/* ================================================= */
/* ===                 TABLES.CSS                === */
/* ================================================= */

/* --- Container e Estrutura --- */
.table-container {
    background: var(--content-bg-color); padding: 20px; border-radius: 8px;
    box-shadow: 0 0 15px var(--box-shadow-color); overflow-x: auto; transition: background-color 0.3s;
}
.table-container.overflow-visible { overflow: visible; }

table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--table-border-color); vertical-align: middle;
}
th {
    background-color: var(--primary-color); color: var(--text-light-color); font-weight: bold;
}

/* --- Correção Visual de Cabeçalho (Borda Direita) --- */
thead th:nth-child(2) { border-right: none; }
thead th:nth-child(3) { padding-left: 0; }
tbody td:nth-child(2) + td { padding-left: 0; }

/* --- Status e Cores de Linha --- */
tr.status-active { background-color: var(--status-active-bg); }
tr.status-warning { background-color: var(--status-warning-bg); }
tr.status-expired { background-color: var(--status-expired-bg); }
tr.status-expiring-app { background-color: var(--status-expiring-app-bg); }
tr.status-app-expired { background-color: var(--status-expired-bg); }
tr.selected { background-color: rgba(52, 152, 219, 0.2) !important; }
tr:hover { background-color: rgba(52, 152, 219, 0.1); }

/* --- Colunas Específicas --- */
.anotacoes-col {
    max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
thead th:last-child { text-align: center; }

.dias-restantes-col, .servidor-col, .preco-col {
    min-width: 130px; text-align: center; white-space: nowrap;
}
#dias-restantes-header:hover { background-color: #2980b9; }
/* Cabeçalhos da tabela de Clientes (default / app-expiring / call-later): escondidos
   por padrão, só o `.header-active` aparece. JS (clients.js renderTable) controla
   a classe baseado no filtro ativo. Antes era style.display inline, mas isso impedia
   o CSS @media de aplicar layout flex (barra de seleção) no mobile. */
thead .default-header,
thead .app-expiring-header,
thead .call-later-header { display: none; }
thead .default-header.header-active,
thead .app-expiring-header.header-active,
thead .call-later-header.header-active { display: table-row; }

/* --- Bulk Actions Toolbar --- */
.bulk-actions-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 15px; background-color: var(--primary-color); color: var(--text-light-color);
    border-radius: 8px; margin-bottom: 20px;
}
.bulk-actions-toolbar #bulk-counter { font-weight: bold; }
.bulk-actions-buttons { display: flex; align-items: center; gap: 10px; }
table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* --- Barra de Ferramentas (Search e Botões) --- */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
.toolbar-actions { display: flex; gap: 15px; }

.search-container { position: relative; display: flex; align-items: center; }
.search-container i.fa-search { position: absolute; left: 15px; color: #aaa; }
/* Botão OCR (ou outro .btn-icon-circle) ao lado do search ganha respiro
   sem quebrar o "colado" do input+paste (que ficam visualmente como um só). */
.search-container .btn-icon-circle { margin-left: 10px; }

/* Botão Filtros Avançados (search-container): laranja por padrão pra diferenciar
   visualmente do OCR (azul) que fica ao lado. Quando há filtros aplicados,
   .filter-active (setada por clients.js após apply/clear) muda pra vermelho
   como sinal visual de "filtro ativo". */
#advanced-filter-btn.btn-icon-circle { background: #e67e22; }
#advanced-filter-btn.btn-icon-circle.filter-active { background: var(--danger-color, #c0392b); }
#search-input {
    padding: 10px 15px 10px 40px; border: 1px solid var(--input-border-color);
    border-radius: 20px; width: 100%; max-width: 300px;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    background-color: var(--content-bg-color); color: var(--text-color); height: 38px;
}

.btn-paste {
    background-color: #f0f0f0; border: 1px solid var(--input-border-color);
    color: var(--secondary-color); cursor: pointer; height: 38px; width: 40px;
    border-top-right-radius: 20px; border-bottom-right-radius: 20px; margin-left: -1px;
    display: flex; align-items: center; justify-content: center; transition: background-color 0.3s;
}
.btn-paste:hover { background-color: #e0e0e0; }
html[data-theme='dark'] .btn-paste { background-color: var(--secondary-color); color: var(--text-light-color); border-color: var(--input-border-color); }
html[data-theme='dark'] .btn-paste:hover { background-color: #4a627a; }

/* --- Copy e Detalhes --- */
.table-copy-container { display: flex; align-items: center; justify-content: flex-start; }
.table-copy-container span { flex-grow: 0; }
.copy-btn { margin-left: 15px; cursor: pointer; color: var(--primary-color); transition: color 0.3s, transform 0.2s; }
.copy-btn:hover { transform: scale(1.2); }


/* --- Sticky Header --- */
.sticky-header {
    position: -webkit-sticky; position: sticky; top: 0; z-index: 1020;
    background: var(--background-color);
}

/* --- Ações e Dropdowns (Lógica Desktop) --- */
.action-icons i { cursor: pointer; transition: color 0.2s, transform 0.2s; }
.action-icons i + i { margin-left: 15px; }
.action-icons i:hover { transform: scale(1.2); }
.edit-btn { color: var(--primary-color); }
.delete-btn { color: var(--danger-color); }
.user-action-link { cursor: pointer; text-decoration: none !important; color: inherit !important; cursor: default; }

.actions-cell { text-align: center; }
.actions-dropdown { position: relative; display: none; justify-content: flex-end; }
.actions-toggle-btn { background: none; border: 1px solid var(--input-border-color); border-radius: 5px; padding: 5px 10px; cursor: pointer; }
.dropdown-menu {
    display: none; position: absolute; top: 100%; right: 0;
    background-color: var(--content-bg-color); border-radius: 5px;
    box-shadow: 0 4px 12px var(--box-shadow-color); z-index: 1010;
    min-width: 150px; border: 1px solid #eee; padding: 5px 0;
}
.actions-dropdown.open .dropdown-menu { display: block; }
.dropdown-menu i { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 15px; color: var(--text-color); transition: background-color 0.2s; }
.dropdown-menu i:hover { background-color: rgba(52, 152, 219, 0.1); }
html[data-theme='dark'] .actions-toggle-btn { color: var(--text-color); border-color: var(--text-color); }

/* --- Detalhes da Linha (Expandível) --- */
.toggle-details-btn {
    cursor: pointer; font-size: 1.2em; color: var(--primary-color);
    transition: transform 0.3s; display: inline-block; width: 20px; text-align: center;
}
.toggle-details-btn.expanded { transform: rotate(135deg); color: var(--danger-color); }

.child-row td {
    padding: 20px 15px; background-color: var(--content-bg-color); border-top: 2px solid var(--primary-color);
}
@media (min-width: 900px) { .child-row td { padding: 20px 30px 20px 60px; } }

.details-content { display: grid; gap: 12px 20px; grid-template-columns: 1fr; text-align: left; padding: 15px; }
.detail-item { display: flex; align-items: flex-start; }
.dado-item, .detail-item { border-bottom: none !important; padding-bottom: 5px; margin-bottom: 5px; }
.detail-item strong { color: var(--text-color); font-size: 0.9em; margin-right: 8px; white-space: nowrap; }
.detail-item span { text-align: left; word-break: break-all; }
.detail-item .copy-btn { margin-left: 15px; }
.full-width-detail { grid-column: 1 / -1; }
.details-content hr { grid-column: 1 / -1; border: none; border-top: 1px solid #eee; margin: 5px 0; }

@media (min-width: 600px) { .details-content { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .details-content { grid-template-columns: repeat(3, 1fr); } }

/* --- RESPONSIVIDADE MOBILE DA TABELA (O Pulo do Gato) --- */
@media (max-width: 899px) {
    /* Esconde elementos não vitais */
    .hide-on-mobile { display: none; }
    #vencimento-contrato-header { display: none !important; }
    
    /* Ajuste da Toolbar */
    .toolbar { flex-direction: column; align-items: stretch; }
    .search-container { width: 100%; }
    .toolbar-actions { order: 2; flex-direction: column; }
    .btn-action { justify-content: center; } /* Centraliza texto dos botões no mobile */
    
    /* Layout da Tabela */
    table td { padding-left: 8px; padding-right: 8px; }
    .sticky-header { position: static; } /* Remove header fixo se quebrar layout */
    
    /* IMPORTANTE: Troca ícones por Dropdown */
    .action-icons { display: none; }
    .actions-dropdown { display: flex; }
    
    /* Correção do Botão Copiar na 4ª Coluna (Evita quebra de layout) */
    td:nth-child(4) > .table-copy-container > .copy-btn { display: none; }
    
    /* Links clicáveis */
    .user-action-link { cursor: pointer !important; }

/* Ajuste Botões Bulk Mobile */
    #bulk-send-msg-btn, #bulk-delete-btn, #bulk-copy-numbers-btn, #bulk-advance-btn, #bulk-renew-btn, #bulk-renew-advanced-btn { width: 44px; height: 44px; padding: 0; justify-content: center; align-items: center; }
    #bulk-send-msg-btn span, #bulk-delete-btn span, #bulk-copy-numbers-btn span, #bulk-advance-btn span, #bulk-renew-btn span,  #bulk-renew-advanced-btn span { display: none; }
    #bulk-send-msg-btn i, #bulk-delete-btn i, #bulk-copy-numbers-btn i, #bulk-advance-btn i, #bulk-renew-btn i,  #bulk-renew-advanced-btn i { margin: 0; font-size: 1.2rem; }

}
/* Desktop volta ao normal */
@media (min-width: 900px) { 
    .action-icons { display: block; } 
    .actions-dropdown { display: none; } 
}
/* ================================================= */
/* === Paginação client-side (Histórico Ativações) === */
/* ================================================= */
.pagination-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
    margin: 20px 0 10px;
    padding: 12px;
    background: var(--card-bg-color, transparent);
}
.pagination-bar .btn-secondary {
    padding: 8px 14px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.92em;
}
.pagination-bar .btn-secondary:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.pagination-info {
    font-size: 0.9em; opacity: 0.75; min-width: 180px; text-align: center;
}

/* ================================================= */
/* === Tabela vira cards em mobile (≤768px)        === */
/* ================================================= */
@media (max-width: 899px) {
    table.responsive-cards-mobile thead { display: none; }
    table.responsive-cards-mobile,
    table.responsive-cards-mobile tbody,
    table.responsive-cards-mobile tr,
    table.responsive-cards-mobile td {
        display: block;
        width: 100%;
    }
    table.responsive-cards-mobile tr {
        background: var(--card-bg-color, var(--bg-color));
        border: 1px solid var(--input-border-color);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 12px 14px;
        box-shadow: 0 1px 2px var(--box-shadow-color);
    }
    /* Cores de status do cliente sobrescrevem o background neutro do card.
       Sem isso, em mobile o card ficava sempre com fundo do tema, perdendo
       a indicação visual de "ativo / vencendo / vencido / app vencendo". */
    table.responsive-cards-mobile tr.status-active     { background: var(--status-active-bg); }
    table.responsive-cards-mobile tr.status-warning    { background: var(--status-warning-bg); }
    table.responsive-cards-mobile tr.status-expired,
    table.responsive-cards-mobile tr.status-app-expired { background: var(--status-expired-bg); }
    table.responsive-cards-mobile tr.status-expiring-app { background: var(--status-expiring-app-bg); }
    table.responsive-cards-mobile tr.selected          { background: rgba(52, 152, 219, 0.2); }
    table.responsive-cards-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none;
        gap: 12px;
    }
    table.responsive-cards-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.78em;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.6;
        flex-shrink: 0;
    }
    table.responsive-cards-mobile td:not([data-label]) {
        justify-content: flex-end;
    }
    table.responsive-cards-mobile td[colspan] {
        text-align: center !important;
        justify-content: center;
        padding: 16px 0;
    }
    table.responsive-cards-mobile td[colspan]::before { content: none; }
    .pagination-info { min-width: 0; flex: 1 1 100%; order: -1; }
}

/* === Servidor cell: nome + badge de tipo agrupados (wrap único) === */
.servidor-cell-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.servidor-tipo-badge {
    font-size: 0.8em;
    color: var(--primary-color);
    background: rgba(52, 152, 219, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

/* === Tabela de Clientes em mobile (cards com checkbox/toggle/actions) === */
@media (max-width: 899px) {
    /* Cancela min-width que algumas regras antigas podem aplicar */
    table.responsive-cards-mobile.client-card-table { min-width: 0; }

    /* Selecionar Todos no mobile: o thead some por default em responsive-cards-mobile
       (ver linha ~204), mas pra clientes precisamos manter o checkbox visível.
       Renderizamos a tr ativa (.header-active) como uma barra de seleção compacta
       no topo, mostrando só a 1ª th (que tem o select-all-checkbox*). As demais
       colunas da header (Nome, Contato, etc) permanecem ocultas — labels já
       aparecem no card via data-label. */
    table.responsive-cards-mobile.client-card-table thead { display: block; }
    /* Garante que tr de header SEM .header-active continue escondida em mobile.
       Sem essa regra mais específica, `table.responsive-cards-mobile tr { display: block }`
       (linha ~205) tem MESMA especificidade que `thead .app-expiring-header { display: none }`
       (linha ~49) e ganha por vir depois — fazendo a app-expiring-header aparecer com
       Contato/Ações flutuando mesmo sem .header-active. */
    table.responsive-cards-mobile.client-card-table thead tr:not(.header-active) {
        display: none;
    }
    table.responsive-cards-mobile.client-card-table thead .header-active {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        margin-bottom: 10px;
        background: var(--card-bg-color, var(--bg-color));
        border: 1px solid var(--input-border-color);
        border-radius: 8px;
    }
    table.responsive-cards-mobile.client-card-table thead .header-active th {
        display: none;
        padding: 0;
        border: none;
        text-align: left;
    }
    table.responsive-cards-mobile.client-card-table thead .header-active th:first-child {
        display: flex;
        align-items: center;
        gap: 8px;
        /* Cancela o background azul + texto claro do `th` global (linhas 16-17) — em mobile
           o checkbox + "Selecionar todos" devem aparecer só como texto sobre o card neutro. */
        background: transparent;
        color: inherit;
        font-weight: normal;
    }
    table.responsive-cards-mobile.client-card-table thead .header-active th:first-child::after {
        content: "Selecionar todos";
        font-size: 0.9em;
        font-weight: 500;
    }

    /* Checkbox e toggle (1ª e 2ª td): inline no topo do card, lado a lado.
       Sem o ::before do data-label — eles são auto-explicativos. */
    table.responsive-cards-mobile.client-card-table tr {
        position: relative;
        padding: 14px;
        padding-top: 40px; /* reserva espaço pro checkbox+toggle no topo */
    }
    table.responsive-cards-mobile.client-card-table td.td-checkbox,
    table.responsive-cards-mobile.client-card-table td.td-toggle {
        position: absolute;
        top: 12px;
        display: inline-flex;
        align-items: center;
        padding: 0;
        width: auto;
        margin: 0;
    }
    table.responsive-cards-mobile.client-card-table td.td-checkbox { left: 14px; }
    table.responsive-cards-mobile.client-card-table td.td-toggle { left: 44px; }
    table.responsive-cards-mobile.client-card-table td.td-checkbox::before,
    table.responsive-cards-mobile.client-card-table td.td-toggle::before { display: none; }

    /* Action cell (última td) — topo direito, alinhada com checkbox/toggle */
    table.responsive-cards-mobile.client-card-table td.actions-cell {
        position: absolute;
        top: 8px;
        right: 12px;
        padding: 0;
        margin: 0;
        width: auto;
        border: none;
    }
    table.responsive-cards-mobile.client-card-table td.actions-cell::before { display: none; }

    /* Em mobile: child-row criada em desktop não deve aparecer. Mantemos só por
       segurança — em mobile usamos tr.expanded no próprio card. */
    table.responsive-cards-mobile.client-card-table tr.child-row { display: none; }

    /* Card expandido: mostra os tds normalmente ocultos (.hide-on-mobile)
       + os tds extras só-mobile (.mobile-detail-only). Tudo no MESMO card,
       intercalado na ordem natural (Nome → Contato → Usuário → Venc.Contrato →
       Data Ativação → Dias → Servidor → Preço → Anotações → Senha → Aplicativos). */
    table.responsive-cards-mobile.client-card-table tr.expanded .hide-on-mobile,
    table.responsive-cards-mobile.client-card-table tr.expanded .mobile-detail-only {
        display: flex !important;
    }
    /* Aplicativos: ocupa linha cheia (label em cima, lista de apps embaixo) */
    table.responsive-cards-mobile.client-card-table .mobile-detail-fullwidth {
        flex-direction: column;
        align-items: stretch;
    }
    table.responsive-cards-mobile.client-card-table .mobile-detail-fullwidth::before {
        margin-bottom: 6px;
    }

    /* Anotações: a regra global `.anotacoes-col` (linha ~35) tem max-width: 150px +
       white-space: nowrap + overflow: hidden + text-overflow: ellipsis — feita pra
       desktop. Em mobile precisamos cancelar TODAS essas restrições, senão o texto
       fica truncado dentro do td estreito e nenhum filho consegue quebrar.
       Depois disso, layout: label esquerda + texto direita (flex padrão) com
       align-items: flex-start pra alinhar o topo do label com a primeira linha. */
    table.responsive-cards-mobile.client-card-table td.anotacoes-col {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: inherit;
        align-items: flex-start;
    }
    table.responsive-cards-mobile.client-card-table td[data-label="Anotações"] > .anotacoes-value {
        flex: 1;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }
}

/* .mobile-detail-only: invisível em qualquer contexto, EXCETO quando o tr está
   expandido no mobile (regra acima). Em desktop também fica oculto — os detalhes
   continuam aparecendo via child-row clássica. */
.mobile-detail-only { display: none !important; }
@media (max-width: 899px) {
    table.responsive-cards-mobile.client-card-table tr.expanded .mobile-detail-only {
        display: flex !important;
    }
}

/* Tela de Clientes: na faixa Fold portrait + iPad portrait (500-899px), toolbar
   mantém o layout column padrão do mobile (search em cima ocupando linha cheia,
   com Filtros + OCR + Paste como ícones redondos ao lado), e os 4 botões grandes
   abaixo ficam em grid 2x2 (2 por linha, ordem natural do HTML:
   Manutenção | Enviar Mensagens / Criar Teste | Cadastrar Novo Cliente).
   Em mobile pequeno (<500px) mantém 1-por-linha — botões com texto longo
   ("Cadastrar Novo Cliente") quebrariam feio em colunas estreitas. */
@media (min-width: 500px) and (max-width: 899px) {
    #client-content .toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* Telas MUITO estreitas (≤380px): label em cima, valor embaixo. Evita overflow
   com strings longas (MAC, data + hora) que estouram a largura disponível. */
@media (max-width: 380px) {
    table.responsive-cards-mobile tr { padding: 10px 12px; }
    table.responsive-cards-mobile td {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        word-break: break-word;
    }
    table.responsive-cards-mobile td::before {
        font-size: 0.7em;
    }
    table.responsive-cards-mobile td[data-label="Ações"] {
        align-items: flex-end;
    }
}