/**
 * Table to Cards Mobile - CSS Enhancements
 * Garante que tabelas se transformem em cards responsivos perfeitos
 * Versão: 2.0.0
 * Data: 2025-12-10
 */

/* ========================================
   Breakpoint mobile para transformação
   ======================================== */
@media (max-width: 768px) {

  /* Mostrar todas as colunas mesmo com d-none/d-md-hide */
  .table.mobile-card-active thead,
  .table.mobile-card-active tbody {
    display: block !important;
  }

  .table.mobile-card-active tbody tr {
    display: block !important;
    margin-bottom: 1rem;
  }

  /* Mostrar todas as células mesmo com display:none */
  .table.mobile-card-active td.d-none,
  .table.mobile-card-active td.d-sm-table-cell,
  .table.mobile-card-active td.d-md-table-cell,
  .table.mobile-card-active th.d-none,
  .table.mobile-card-active th.d-sm-table-cell,
  .table.mobile-card-active th.d-md-table-cell {
    display: block !important;
  }

  /* Remover classes Bootstrap responsivas que ocultam */
  .table.mobile-card-active .d-none { display: block !important; }
  .table.mobile-card-active .d-sm-table-cell { display: block !important; }
  .table.mobile-card-active .d-md-table-cell { display: block !important; }
  .table.mobile-card-active .d-lg-table-cell { display: block !important; }

  /* Table responsive wrapper em mobile */
  .table-responsive {
    overflow-x: auto;
  }

  /* Garantir que tabelas com classe mobile-card-active não ficam em overflow */
  .table-responsive .table.mobile-card-active {
    width: 100%;
    overflow: visible;
  }

  /* ========================================
     Células de dados em cards
     ======================================== */

  .table.mobile-card-active td {
    display: grid !important;
    grid-template-columns: 35% 1fr;
    align-items: start;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #e9ecef;
    text-align: left;
  }

  .table.mobile-card-active tbody tr > td:last-child {
    border-bottom: none;
  }

  /* Labels antes de cada célula */
  .table.mobile-card-active td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #5c6b7a;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
  }

  /* Sem label? Não mostrar */
  .table.mobile-card-active td[data-label=""]::before,
  .table.mobile-card-active td[data-label=" "]::before {
    content: "";
    display: none;
  }

  /* Conteúdo da célula ocupa espaço restante */
  .table.mobile-card-active td > *:not(.btn):not(.btn-group):not(.d-flex):not(.form-check) {
    word-break: break-word;
  }

  /* ========================================
     Botões de ação em cards
     ======================================== */

  .table.mobile-card-active td .btn,
  .table.mobile-card-active td .btn-group .btn {
    width: auto;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    min-height: 32px;
    border-radius: 6px;
    display: inline-block;
    margin: 0 0.25rem 0 0;
  }

  .table.mobile-card-active td .btn-group,
  .table.mobile-card-active td .crud-row-actions,
  .table.mobile-card-active td .action-buttons,
  .table.mobile-card-active td .d-flex {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
  }

  /* ========================================
     Styling do Card (linhas como cards)
     ======================================== */

  .table.mobile-card-active tbody tr {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .table.mobile-card-active tbody tr:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  /* Estados de linha */
  .table.mobile-card-active tbody tr.table-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
  }

  .table.mobile-card-active tbody tr.table-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
  }

  .table.mobile-card-active tbody tr.table-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }

  .table.mobile-card-active tbody tr.table-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
  }

  /* ========================================
     Badges e tags dentro de cards
     ======================================== */

  .table.mobile-card-active td .badge {
    display: inline-block;
    width: auto;
    margin: 0;
  }

  /* ========================================
     Links e textos small
     ======================================== */

  .table.mobile-card-active td small {
    display: block;
    margin-top: 0.25rem;
  }

  .table.mobile-card-active td .text-muted {
    color: #6c757d !important;
  }

  .table.mobile-card-active td .text-break {
    word-break: break-word;
  }

  /* ========================================
     Formulários inline em cards
     ======================================== */

  .table.mobile-card-active form[style*="display:inline"] {
    display: inline-block !important;
    width: auto;
  }

  .table.mobile-card-active form[style*="display:inline"] .btn {
    width: auto;
  }

}

/* ========================================
   Desktop: Restaurar layout de tabela
   ======================================== */
@media (min-width: 769px) {

  /* Volta ao comportamento normal de tabela */

  .table.mobile-card-active thead,
  .table.mobile-card-active tbody {
    display: table-header-group;
  }

  .table.mobile-card-active tbody {
    display: table-row-group;
  }

  .table.mobile-card-active tr {
    display: table-row;
  }

  .table.mobile-card-active td,
  .table.mobile-card-active th {
    display: table-cell;
  }

  /* Remover estilos de card em desktop */
  .table.mobile-card-active tbody tr {
    background: transparent;
    border: none;
    border-bottom: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
    padding: 0;
    transform: none;
  }

  .table.mobile-card-active tbody tr:hover {
    transform: none;
    box-shadow: none;
  }

  .table.mobile-card-active td::before {
    display: none !important;
  }

  .table.mobile-card-active td {
    display: table-cell !important;
    grid-template-columns: none;
    gap: 0;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem;
  }

  /* Restaurar visibilidade em desktop */
  .table.mobile-card-active .d-none { display: none !important; }
  .table.mobile-card-active .d-sm-table-cell { display: none !important; }
  .table.mobile-card-active .d-md-table-cell { display: table-cell !important; }
  .table.mobile-card-active .d-lg-table-cell { display: table-cell !important; }

}

/* ========================================
   Ajustes para listas vazias
   ======================================== */
.table.mobile-card-active tbody tr td[colspan] {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
}

/* ========================================
   Animações suaves
   ======================================== */
.table.mobile-card-active tbody tr {
  animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   Print media
   ======================================== */
@media print {
  .table.mobile-card-active {
    width: 100%;
  }

  .table.mobile-card-active tbody tr {
    page-break-inside: avoid;
  }
}