/* Faturamento — KW24 (Dash)

   Isolamento: mesmo padrão de contabilidade_style.css/parceiros_tax_style.css — o arquivo
   inteiro vive dentro de @scope (.fat-app), então nenhuma regra daqui vaza pra outra página, e o
   fundo/tipografia ficam no :scope (a div raiz do relatório, className="fat-app" em
   pages/relatorio_faturamento.py) em vez de :root/body.

   Identidade visual: este relatório é da PRÓPRIA KW24 (não tem cliente externo dono da marca,
   diferente de Contabilidade/ContaFarma e Parceiros-Tax/NimbusTax). Por isso segue o design
   system do painel interno app.kw24.com.br, replicado aqui em valores literais (os arquivos
   originais são de outro produto/repositório, não dá pra importar):
     - tokens.css  -> paleta --kw24-* abaixo
     - base-shell.css -> gradiente de fundo + a "janela" translúcida sobre ele
     - screens/dashboard.css -> bloco (rgba .06 / borda .16 / raio 16px), card interno
       (rgba .05 / raio 10px), título de bloco (Rubik 700 16px) e de seção (Rubik 600 11.5px
       maiúsculo espaçado)
   Fontes: declaradas como Rubik/Inter igual aos outros dois relatórios deste mesmo domínio —
   o analytics não carrega webfont em nenhum relatório hoje (só declara a família), então NÃO
   acrescento @import aqui: passaria a valer também pros outros dois (que declaram as mesmas
   famílias) e mudaria a aparência deles sem ninguém ter pedido. */
@scope (.fat-app) {

:scope {
    /* Paleta do painel interno (app.kw24.com.br/public/assets/css/tokens.css) */
    --kw24-navy-escuro: #0A4A5C;
    --kw24-azul: #0DC2FF;
    --kw24-azul-hover: #3fd0ff;
    --kw24-gelo: #F4FCFF;
    --kw24-teal: #086B8D;
    --kw24-verde: #26FF93;
    --kw24-amarelo: #F0B429;
    --kw24-erro-texto: #B91C1C;

    /* Superfícies (dashboard.css): bloco, card interno e as bordas de cada um */
    --fat-bloco-bg: rgba(244,252,255,0.06);
    --fat-bloco-borda: rgba(244,252,255,0.16);
    --fat-card-bg: rgba(244,252,255,0.05);
    --fat-linha: rgba(244,252,255,0.10);
    --fat-texto-fraco: rgba(244,252,255,0.55);

    margin: 0;
    padding: 22px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--kw24-gelo);
    /* Gradiente do painel interno (base-shell.css, body) */
    background: linear-gradient(135deg, var(--kw24-navy-escuro) 0%, var(--kw24-azul) 50%, var(--kw24-teal) 100%);
    /* Sem min-height:100vh, pelo mesmo motivo dos outros dois relatórios: o container cobre a
       altura do próprio conteúdo, sem sobrar fundo vazio embaixo. */
    box-sizing: border-box;
}

:scope *, :scope *::before, :scope *::after { box-sizing: border-box; }

/* A "janela" escura sobre o gradiente (base-shell.css .tela-window) — é ela que dá contraste
   pro texto e pras tabelas; sem isso o gradiente claro do meio brigaria com a leitura. */
.fat-window {
    background: rgba(3,25,32,0.55);
    border: 1px solid rgba(244,252,255,0.24);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(3,25,32,0.35);
    padding: 24px 28px;
}

/* ── Topo ─────────────────────────────────────────────────────────────────── */
.fat-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fat-titulo {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--kw24-gelo);
    margin: 0 0 4px;
}
.fat-subtitulo { font-size: 13px; color: var(--fat-texto-fraco); }

/* Nome do portal (acesso do cliente externo) — ocupa o lugar do filtro de empresa, que não
   aparece lá. Mesmo papel do rt-portal-name no Parceiros-Tax. */
.fat-portal-nome {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--kw24-azul);
    background: rgba(13,194,255,0.12);
    border: 1px solid rgba(13,194,255,0.35);
    border-radius: 10px;
    padding: 8px 14px;
    align-self: flex-start;
}

/* ── Filtros ──────────────────────────────────────────────────────────────── */
.fat-filtros { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.fat-filtro { flex: 1; min-width: 260px; }
.fat-filtro-label {
    display: block;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--fat-texto-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

/* O Dropdown do Dash (react-select) vem com tema claro por padrão — as regras abaixo o trazem
   pro fundo escuro. Precisam mirar as classes internas do componente (.Select-*), por isso são
   mais específicas que o resto do arquivo. */
.fat-dropdown .Select-control,
.fat-dropdown .Select--single > .Select-control {
    background: var(--fat-card-bg);
    border: 1px solid var(--fat-bloco-borda);
    border-radius: 10px;
    height: 42px;
    color: var(--kw24-gelo);
}
.fat-dropdown .Select-control:hover { border-color: var(--kw24-azul); }
.fat-dropdown.is-focused:not(.is-open) > .Select-control { border-color: var(--kw24-azul); box-shadow: none; }
.fat-dropdown .Select-placeholder { color: rgba(244,252,255,0.40); line-height: 40px; font-size: 13.5px; }
.fat-dropdown .Select-value { line-height: 40px !important; }
.fat-dropdown .Select-value-label { color: var(--kw24-gelo) !important; font-size: 13.5px; }
.fat-dropdown .Select-input > input { color: var(--kw24-gelo); }
.fat-dropdown .Select-arrow { border-color: var(--fat-texto-fraco) transparent transparent; }
.fat-dropdown .Select-clear { color: var(--fat-texto-fraco); }
.fat-dropdown .Select-menu-outer {
    background: #062733;
    border: 1px solid var(--fat-bloco-borda);
    border-radius: 10px;
    margin-top: 4px;
    overflow: hidden;
}
.fat-dropdown .Select-option { background: transparent; color: var(--kw24-gelo); font-size: 13.5px; }
.fat-dropdown .Select-option.is-focused { background: rgba(13,194,255,0.16); }
.fat-dropdown .Select-option.is-selected { background: rgba(13,194,255,0.24); }
.fat-dropdown .Select-noresults { color: var(--fat-texto-fraco); font-size: 13px; }
.fat-dropdown.is-disabled .Select-control { opacity: .55; }

/* ── Cabeçalho do detalhamento ────────────────────────────────────────────── */
.fat-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--fat-bloco-bg);
    border: 1px solid var(--fat-bloco-borda);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.fat-empresa {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--kw24-gelo);
    margin-bottom: 4px;
}
.fat-periodo { font-size: 13px; color: var(--fat-texto-fraco); }
.fat-btn-bitrix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(13,194,255,0.14);
    border: 1px solid rgba(13,194,255,0.45);
    color: var(--kw24-azul);
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 13px;
    padding: 9px 14px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}
.fat-btn-bitrix:hover { background: rgba(13,194,255,0.24); color: var(--kw24-azul-hover); }

/* ── Totais ───────────────────────────────────────────────────────────────── */
.fat-totais { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.fat-total-card {
    flex: 1;
    min-width: 200px;
    background: var(--fat-bloco-bg);
    border: 1px solid var(--fat-bloco-borda);
    border-radius: 16px;
    padding: 16px 18px;
}
/* Total da fatura — o número que o cliente confere primeiro. Verde da paleta (confiança). */
.fat-total-card-destaque { border-color: rgba(38,255,147,0.40); background: rgba(38,255,147,0.07); }
.fat-total-rotulo {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--fat-texto-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.fat-total-valor { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 24px; color: var(--kw24-gelo); }
.fat-total-card-destaque .fat-total-valor { color: var(--kw24-verde); }

/* ── Métricas somadas do ciclo (panorama "Todas") ─────────────────────────── */
/* Ex.: "Servidor RDP · 60 usuários". Fica entre os totais e a tabela por empresa, como uma
   informação de apoio — por isso card interno (rgba .05), não bloco. */
.fat-metricas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fat-metrica {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: var(--fat-card-bg);
    border-radius: 10px;
    padding: 10px 14px;
}
.fat-metrica-rotulo {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--fat-texto-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fat-metrica-valor { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 14px; color: var(--kw24-azul); }

/* ── Seções (Suporte / Desenvolvimento / Infraestrutura) ──────────────────── */
.fat-secao {
    background: var(--fat-bloco-bg);
    border: 1px solid var(--fat-bloco-borda);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.fat-secao-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.fat-secao-titulo { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 16px; color: var(--kw24-gelo); }
.fat-secao-meta { display: flex; align-items: baseline; gap: 12px; }
.fat-secao-contagem { font-size: 12px; color: var(--fat-texto-fraco); }
.fat-secao-subtotal { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 15px; color: var(--kw24-azul); }

.fat-tabela { width: 100%; border-collapse: collapse; }
.fat-tabela th {
    text-align: left;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--fat-texto-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--fat-linha);
}
.fat-tabela td { font-size: 13.5px; padding: 10px 12px; border-bottom: 1px solid var(--fat-linha); vertical-align: top; }
.fat-tabela tr:last-child td { border-bottom: none; }
.fat-tabela tbody tr:hover { background: var(--fat-card-bg); }

/* Solicitante (Tarefa 07) — largura fixa pra não roubar espaço do nome do item, que é o que
   identifica a linha. Quebra em nome longo em vez de esticar a coluna. */
.fat-th-solicitante, .fat-td-solicitante { width: 190px; }
.fat-td-solicitante { color: var(--fat-texto-fraco); }
.fat-th-tempo, .fat-td-tempo { width: 110px; white-space: nowrap; }
.fat-th-valor, .fat-td-valor { width: 140px; text-align: right; white-space: nowrap; }
/* Cabeçalho "Valor" alinhado com os números da coluna (Tarefa 09). Precisa da especificidade de
   `.fat-tabela th.fat-th-valor` (0,2,1): a regra `.fat-tabela th { text-align:left }` acima é
   (0,1,1) e vencia o `.fat-th-valor` sozinho (0,1,0) — por isso o cabeçalho ficava à esquerda
   enquanto os valores iam pra direita. Tempo e Solicitante não sofriam porque são à esquerda. */
.fat-tabela th.fat-th-valor { text-align: right; }
.fat-td-valor { font-variant-numeric: tabular-nums; }
/* Coluna "Total" da tabela por empresa (panorama "Todas") — e a que o olho procura na linha. */
.fat-td-total { color: var(--kw24-gelo); font-weight: 600; }
.fat-td-tempo { color: var(--fat-texto-fraco); font-variant-numeric: tabular-nums; }

.fat-link { color: var(--kw24-gelo); text-decoration: none; border-bottom: 1px solid transparent; }
.fat-link:hover { color: var(--kw24-azul); border-bottom-color: rgba(13,194,255,0.5); }

/* ── Botão "Resolução Final" na linha (Tarefa 09) ─────────────────────────── */
/* Mesma família visual do "Ver fatura no Bitrix" (.fat-btn-bitrix), em tamanho de linha. */
.fat-th-resolucao, .fat-td-resolucao { width: 150px; white-space: nowrap; text-align: right; }
.fat-btn-resolucao {
    background: rgba(13,194,255,0.14);
    border: 1px solid rgba(13,194,255,0.45);
    color: var(--kw24-azul);
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.fat-btn-resolucao:hover { background: rgba(13,194,255,0.24); color: var(--kw24-azul-hover); }

/* ── Modal "Resolução Final" ──────────────────────────────────────────────── */
/* Bem maior que o de exclusão: os textos são longos (o maior "Resumo" real tem ~14 mil
   caracteres), então o card cresce até 900px/85vh e o CORPO rola por dentro — o cabeçalho com o
   ✕ fica sempre visível. */
.fat-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;              /* o callback troca pra flex ao abrir */
    align-items: center;
    justify-content: center;
    padding: 24px;
}
/* Fundo escuro: div IRMÃ do card (não container em volta), pra clicar no card não fechar. */
.fat-modal-fundo { position: absolute; inset: 0; background: rgba(3,25,32,0.72); cursor: pointer; }
.fat-modal-card {
    position: relative;         /* fica ACIMA do fundo, sem receber o clique dele */
    z-index: 1;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #062733;
    border: 1px solid rgba(244,252,255,0.24);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(3,25,32,0.55);
    overflow: hidden;
}
.fat-modal-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--fat-linha);
    flex-shrink: 0;
}
.fat-modal-titulo { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 16px; color: var(--kw24-gelo); }
.fat-modal-fechar {
    background: transparent;
    border: none;
    color: var(--fat-texto-fraco);
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.fat-modal-fechar:hover { color: var(--kw24-gelo); }
.fat-modal-corpo { padding: 18px 20px 20px; overflow-y: auto; }  /* rola só o conteúdo */
.fat-modal-secao + .fat-modal-secao { margin-top: 18px; }
.fat-modal-secao-titulo {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--fat-texto-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
/* pre-wrap preserva as quebras de linha e os separadores do texto como estão no Bitrix. */
.fat-modal-texto {
    background: var(--fat-card-bg);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--kw24-gelo);
    white-space: pre-wrap;
    overflow-wrap: anywhere;    /* link/URL gigante não estoura a largura */
}

/* ── Avisos (info / vazio / atenção / erro) ───────────────────────────────── */
.fat-aviso {
    background: var(--fat-card-bg);
    border: 1px solid var(--fat-bloco-borda);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--fat-texto-fraco);
}
.fat-aviso-vazio { color: var(--kw24-gelo); }
/* Atenção "está no ar, mas olhe isto" — amarelo, exatamente o papel do --kw24-amarelo nos tokens. */
.fat-aviso-atencao {
    background: rgba(240,180,41,0.10);
    border-color: rgba(240,180,41,0.45);
    color: var(--kw24-amarelo);
    margin-bottom: 14px;
}
/* Erro sobre fundo escuro: o --kw24-erro-texto (#B91C1C) é feito pro fundo claro do painel e
   fica ilegível aqui, então entra como cor da BORDA/fundo e o texto usa um vermelho claro. */
.fat-aviso-erro {
    background: rgba(185,28,28,0.14);
    border-color: rgba(185,28,28,0.55);
    color: #ffb4b4;
}

/* ── Nota de rodapé ───────────────────────────────────────────────────────── */
.fat-nota { font-size: 12px; color: rgba(244,252,255,0.40); padding: 4px 2px 0; }

/* ── Tarefa 10: filtro de Departamento, condições comerciais e matriz de Infra ─── */

/* Empresa e Departamento empilhados na mesma coluna do bloco de filtros: o segundo é um recorte
   DENTRO do primeiro, então fica logo abaixo dele, e não ao lado do de Período. */
.fat-filtro-coluna { display: flex; flex-direction: column; gap: 12px; }

.fat-th-departamento, .fat-td-departamento { width: 170px; }
.fat-td-departamento { color: var(--fat-texto-fraco); }

/* Marca de que o bloco está recortado por departamento. Existe porque, com o filtro ligado, o
   total do bloco é o do departamento e fica DIFERENTE do card do topo, que continua sendo o da
   empresa inteira — sem a marca, os dois números lado a lado pareceriam um erro. */
.fat-secao-filtrado {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--kw24-azul);
    background: rgba(13,194,255,0.14);
    border: 1px solid rgba(13,194,255,0.34);
    border-radius: 999px;
    padding: 3px 10px;
}

/* Bloco de condições comerciais: é informação, não cálculo, então tem o peso visual de um
   cartão de apoio e não o dos cards de valor do topo. */
.fat-condicoes {
    background: var(--fat-bloco-bg);
    border: 1px solid var(--fat-bloco-borda);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.fat-condicoes-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.fat-condicoes-titulo {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--kw24-gelo);
}

.fat-condicoes-tipo {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--kw24-azul);
    background: rgba(13,194,255,0.14);
    border: 1px solid rgba(13,194,255,0.34);
    border-radius: 999px;
    padding: 3px 10px;
}

.fat-condicoes-ciclo { font-size: 12px; color: var(--fat-texto-fraco); }

.fat-condicoes-valores { display: flex; gap: 12px; flex-wrap: wrap; }

.fat-condicao {
    flex: 1;
    min-width: 190px;
    background: var(--fat-card-bg);
    border: 1px solid var(--fat-linha);
    border-radius: 10px;
    padding: 10px 14px;
}

.fat-condicao-rotulo {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fat-texto-fraco);
    margin-bottom: 6px;
}

.fat-condicao-valor {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--kw24-gelo);
}

.fat-condicoes-nota { font-size: 12px; color: rgba(244,252,255,0.40); margin-top: 12px; }

/* A matriz cresce em COLUNA (um item por coluna), então a rolagem horizontal fica dentro dela,
   nunca na página: 9 colunas na Nimbus Tax já não cabem em tela de notebook. */
.fat-matriz-rolagem { overflow-x: auto; }
.fat-matriz { min-width: 100%; }
.fat-matriz .fat-th-valor, .fat-matriz .fat-td-valor { width: auto; min-width: 116px; }
.fat-matriz .fat-th-nome, .fat-matriz .fat-td-nome { white-space: nowrap; }

/* Célula zerada continua visível (é R$ 0,00, não vazio — decisão do usuário), mas apagada: o
   que a pessoa procura na matriz é onde TEM valor. */
.fat-td-zero { color: rgba(244,252,255,0.30); }

/* Célula que tem domínios na dica: o pontilhado avisa que há algo a mais ali. */
.fat-td-com-dica { border-bottom: 1px dotted rgba(13,194,255,0.45); cursor: help; }

/* ── Responsivo ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    :scope { padding: 12px; }
    .fat-window { padding: 18px 16px; border-radius: 16px; }
    .fat-filtro { min-width: 100%; }
    .fat-total-card { min-width: 100%; }
    .fat-th-tempo, .fat-td-tempo { width: auto; }
    .fat-th-valor, .fat-td-valor { width: auto; }
    .fat-th-solicitante, .fat-td-solicitante { width: auto; }
    .fat-th-departamento, .fat-td-departamento { width: auto; }
    .fat-th-resolucao, .fat-td-resolucao { width: auto; }
    .fat-condicao { min-width: 100%; }
    .fat-modal { padding: 12px; }
    .fat-modal-card { max-height: 92vh; }
}

}