/* ============================================================
 * report-layout.css
 *
 * Trata a área do cliente como um RELATÓRIO formato fixo (estilo
 * PDF/A4 paisagem). Em telas largas, fica centralizado com espaço
 * em branco em volta — em telas estreitas, scroll na página inteira
 * em vez de scroll horizontal nas tabelas.
 *
 * REQUISITOS DO USUÁRIO:
 *   - Tabelas SEMPRE cabem na largura disponível (sem barrinha de
 *     scroll horizontal)
 *   - KPI cards mantêm dimensões consistentes entre si
 *   - Modo claro mostra todas as informações
 *   - Layout não estica/contrai conforme zoom
 *
 * Carregado APÓS client-area.css pra ter prioridade.
 * ============================================================ */

/* ─────────────────────────────────────────────────────────────
 * 1. CONTAINER FORMATO RELATÓRIO
 *    Limita largura do conteúdo a 1120px (mesmo max do
 *    .finance-analysis-row já existente). Em telas >1200px com
 *    sidebar (~220px), sobram ~1180px → 1120px cabe certinho.
 *    Em telas grandes (1600px+) fica centralizado com espaço.
 * ───────────────────────────────────────────────────────────── */
body.client-area > main > section > .container {
    max-width: 1120px;
}

body.sidebar-nav-active > main > section > .container,
body.sidebar-nav-active main > section > .container {
    max-width: 1120px !important;
}

/* ─────────────────────────────────────────────────────────────
 * 2. TABELAS SEM SCROLL HORIZONTAL
 *    Remove o min-width fixo que forçava scroll. Aplica
 *    table-layout fixed pra colunas se ajustarem pro espaço
 *    disponível, com nowrap só nos valores (não na descrição).
 * ───────────────────────────────────────────────────────────── */
body.client-area .finance-analysis-row .table {
    min-width: 0 !important;     /* override do client-area.css linha 1442 */
    table-layout: fixed;
    width: 100%;
    font-size: 0.85rem;
}

/* Coluna Categoria: 38% (texto pode quebrar em 2 linhas se necessário) */
body.client-area .finance-analysis-row .table th:first-child,
body.client-area .finance-analysis-row .table td:first-child {
    width: 38%;
    white-space: normal !important;
    word-wrap: break-word;
}

/* Colunas de valor: dividem 62% restante igualmente */
body.client-area .finance-analysis-row .table th:nth-child(n+2),
body.client-area .finance-analysis-row .table td:nth-child(n+2) {
    width: auto;
    white-space: nowrap;
    text-align: right;
    padding-left: 4px;
    padding-right: 6px;
}

/* Header de tabela compacto */
body.client-area .finance-analysis-row .table thead th {
    font-size: 0.74rem;
    padding: 0.4rem 0.5rem;
}

/* ─────────────────────────────────────────────────────────────
 * 3. KPI CARDS CONSISTENTES
 *    Força dimensões iguais entre cards de uma mesma row, mesmo
 *    quando o conteúdo varia. Antes os cards 'respiravam'
 *    diferentes em zoom out — agora ficam fixos.
 * ───────────────────────────────────────────────────────────── */
body.client-area .kpi-row {
    align-items: stretch !important;
}

body.client-area .kpi-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

body.client-area .kpi-row > [class*="col-"] > .card,
body.client-area .kpi-row > [class*="col-"] > .kpi-card {
    flex: 1 1 auto;
    height: 100%;
}

/* Garante mesma altura em todos os KPI cards */
body.client-area .kpi-card {
    min-height: 84px !important;
}
body.client-area .kpi-card .card-body {
    min-height: 84px !important;
}

/* ─────────────────────────────────────────────────────────────
 * 4. MODO CLARO — força cores explícitas em elementos que
 *    herdavam de [data-theme="dark"] e ficavam invisíveis ao
 *    voltar pro tema light.
 * ───────────────────────────────────────────────────────────── */
[data-theme="light"] body.client-area .table td,
html:not([data-theme="dark"]) body.client-area .table td {
    color: #1c1c1e;
}

[data-theme="light"] body.client-area .table tbody tr,
html:not([data-theme="dark"]) body.client-area .table tbody tr {
    background: transparent;
}

[data-theme="light"] body.client-area .kpi-card,
html:not([data-theme="dark"]) body.client-area .kpi-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%) !important;
}

[data-theme="light"] body.client-area .kpi-card h3,
html:not([data-theme="dark"]) body.client-area .kpi-card h3 {
    color: #1c1c1e !important;
}

/* Tabelas em finance-analysis: garantir contraste no modo claro */
[data-theme="light"] body.client-area .finance-analysis-row .table td,
html:not([data-theme="dark"]) body.client-area .finance-analysis-row .table td {
    color: #1c1c1e;
}

/* ─────────────────────────────────────────────────────────────
 * 5. PROTEÇÃO CONTRA OVERFLOW DE TEXTO LONGO
 *    Em zoom muito out, textos longos (categorias com ~30 chars)
 *    podiam estourar a célula. Agora quebram em 2 linhas.
 * ───────────────────────────────────────────────────────────── */
body.client-area .table-responsive {
    overflow-x: auto;
}

/* Em telas muito estreitas (<768), permite scroll horizontal como fallback */
@media (max-width: 767.98px) {
    body.client-area .finance-analysis-row .table {
        min-width: 480px !important;  /* só em mobile, pra não comprimir demais */
    }
    body.client-area .finance-analysis-row .table th:first-child,
    body.client-area .finance-analysis-row .table td:first-child {
        white-space: normal !important;
    }
}

/* ─────────────────────────────────────────────────────────────
 * 6. TABELAS DE MOVIMENTAÇÕES (cartão + conta corrente)
 *    Têm 9 colunas (Mês, Data, Descrição, Valor, Categoria,
 *    Parcela, Banco, Editar, Excluir). Container é limitado a
 *    1120px e o sidebar consome ~220px do viewport.
 *
 *    Estratégia: comprimir conteúdo pra a tabela CABER no
 *    container, sem barra de scroll horizontal:
 *      - fonte 0.78rem
 *      - padding compacto
 *      - quebra de linha em Descrição e Categoria
 *      - Editar/Excluir minúsculas (só ícone/checkbox)
 *
 *    Reportado em 2026-05-11 ("a tabela embaixo nao está cabendo
 *    na tela, quando eu seleciono todos"). Iteração anterior tinha
 *    tentado forçar scroll horizontal com min-width:1000px, mas
 *    isso só piorou o overflow no viewport do cliente.
 * ───────────────────────────────────────────────────────────── */
body.client-area #movimentacoesTabela {
    width: 100%;
    table-layout: auto;
    font-size: 0.78rem;
    word-break: break-word;
}

body.client-area #movimentacoesTabela th,
body.client-area #movimentacoesTabela td {
    padding: 0.4rem 0.35rem;
    vertical-align: middle;
    white-space: normal;     /* permite quebrar — não corta com "..." */
}

/* Coluna Descrição (col 3): pode ocupar mais espaço, quebra livre */
body.client-area #movimentacoesTabela th:nth-child(3),
body.client-area #movimentacoesTabela td:nth-child(3) {
    text-align: left;
    word-break: break-word;
    min-width: 130px;
}

/* Coluna Categoria (col 5): texto pode ser longo, quebra em 2 linhas */
body.client-area #movimentacoesTabela th:nth-child(5),
body.client-area #movimentacoesTabela td:nth-child(5) {
    word-break: break-word;
    line-height: 1.2;
}

/* Coluna Banco (col 7): texto curto, mantém em uma linha */
body.client-area #movimentacoesTabela th:nth-child(7),
body.client-area #movimentacoesTabela td:nth-child(7) {
    white-space: nowrap;
}

/* Colunas Editar (8) e Excluir (9): minúsculas — só ícone/checkbox */
body.client-area #movimentacoesTabela th:nth-child(8),
body.client-area #movimentacoesTabela td:nth-child(8),
body.client-area #movimentacoesTabela th:nth-child(9),
body.client-area #movimentacoesTabela td:nth-child(9) {
    width: 44px !important;
    min-width: 38px !important;
    max-width: 50px;
    padding: 0.3rem 0.15rem;
    text-align: center;
    white-space: nowrap;
}

/* Inputs de filtro (linha 2 do thead) — bem compactos */
body.client-area #movimentacoesTabela .mov-column-filter {
    padding: 0.2rem 0.3rem;
    font-size: 0.72rem;
    min-width: 0;
}

/* Botão Editar (ícone-only): padding e fonte reduzidos pra caber */
body.client-area #movimentacoesTabela .btn-outline-dark {
    padding: 0.15rem 0.35rem !important;
    font-size: 0.7rem !important;
    line-height: 1;
}

/* Header da tabela mais compacto (col Mês Fatura, Data, etc.) */
body.client-area #movimentacoesTabela thead th {
    font-size: 0.72rem;
    line-height: 1.2;
    padding: 0.4rem 0.3rem;
}

/* Em viewport realmente pequeno (<992 = tablet), aí sim escola
 * o scroll horizontal como fallback — não dá pra comprimir mais
 * sem ficar ilegível */
@media (max-width: 991.98px) {
    body.client-area #movimentacoesTabela {
        min-width: 760px;     /* gera scroll horizontal pelo .table-responsive */
        font-size: 0.8rem;
    }
}