/* Relatório de performance do atleta — feature 46-relatorio-html-interativo.
 *
 * Estilo do renderer `js/performance/reportHtml.js`, usado pelos DOIS hosts: a tela do staff
 * (`#performance?view=relatorios`) e a página pública do cartão NFC (`relatorio.html`).
 *
 * MOBILE-FIRST (RHI-04): o dispositivo que encosta no cartão é um telefone, então as regras-base
 * são as do telefone e o `min-width` só ALARGA. Cores só por tokens `--dx-*` (`variables.css`) —
 * nenhum literal de cor de tema aqui, senão o relatório envelhece separado do app.
 *
 * IMPRESSÃO (RHI-09): o bloco `@media print` no fim é o "renderer de papel" que substitui as 904
 * linhas de jsPDF. As classes que ele esconde (`.rep-controls`, `.rep-nav`, `.rep-actions`) são as
 * MESMAS que o renderer emite — há teste que amarra as duas pontas: um CSS que escondesse uma
 * classe inexistente passaria despercebido para sempre.
 */

/* === Documento ========================================================== */

.rep-root {
    display: block;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0 32px;
    color: var(--dx-text);
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

.rep-header {
    padding: 20px 16px 16px;
    background: var(--dx-surface);
    border-bottom: 2px solid var(--dx-teal);
    border-radius: 12px 12px 0 0;
}

.rep-brand {
    margin: 0;
    color: var(--dx-teal);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.rep-title {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dx-text);
}

.rep-assessed {
    margin: 6px 0 0;
    color: var(--dx-muted);
    font-size: 0.82rem;
}

.rep-footer {
    margin-top: 20px;
    padding: 12px 16px;
    color: var(--dx-muted);
    font-size: 0.75rem;
    text-align: center;
}

/* === Ações e índice (some na impressão) ================================= */

.rep-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px 0;
}

.rep-btn {
    padding: 10px 16px;
    border: 1px solid var(--dx-teal-border);
    border-radius: 10px;
    background: var(--dx-teal-dim);
    color: var(--dx-teal);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.rep-btn:hover {
    background: var(--dx-teal);
    color: var(--dx-bg);
}

.rep-nav {
    padding: 12px 16px 0;
}

.rep-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rep-nav-item {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--dx-border);
    border-radius: 999px;
    background: var(--dx-surface);
    color: var(--dx-muted);
    font-size: 0.78rem;
    text-decoration: none;
}

.rep-nav-item:hover {
    border-color: var(--dx-teal-border);
    color: var(--dx-teal);
}

/* === Cards de seção ===================================================== */

.rep-card {
    margin: 12px 16px 0;
    border: 1px solid var(--dx-border);
    border-radius: 12px;
    background: var(--dx-surface);
    overflow: hidden;
}

.rep-card-title {
    margin: 0;
    font-size: 1rem;
}

.rep-card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--dx-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.rep-card-toggle::after {
    content: '▾';
    color: var(--dx-teal);
    font-size: 0.8rem;
}

.rep-card-toggle[aria-expanded='false']::after {
    content: '▸';
}

.rep-card-body {
    padding: 0 16px 16px;
}

/* === Tipografia interna ================================================= */

.rep-subtitle {
    margin: 18px 0 8px;
    color: var(--dx-teal);
    font-size: 0.82rem;
    font-weight: 700;
}

.rep-prose {
    margin: 8px 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

.rep-muted {
    color: var(--dx-muted);
}

.rep-small {
    font-size: 0.76rem;
}

.rep-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--dx-border);
    font-size: 0.88rem;
}

.rep-line-label {
    color: var(--dx-muted);
}

.rep-line-value {
    font-weight: 700;
}

/* Ausência declarada ("não avaliado"): discreta de propósito — não é um número. */
.rep-na {
    color: var(--dx-muted);
    font-weight: 500;
}

/* === Identificação do atleta =========================================== */

.rep-athlete-name {
    margin: 4px 0 12px;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rep-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.rep-grid-item dt {
    color: var(--dx-muted);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rep-grid-item dd {
    margin: 2px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* === Índice Global ====================================================== */

.rep-ig {
    margin: 8px 0 4px;
    padding: 16px;
    border: 1px solid var(--dx-teal-border);
    border-radius: 12px;
    background: var(--dx-surface2);
    text-align: center;
}

.rep-ig-label {
    margin: 0;
    color: var(--dx-muted);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.rep-ig-value {
    margin: 6px 0 0;
    color: var(--dx-teal);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.rep-ig-value.rep-na {
    color: var(--dx-muted);
    font-size: 1.1rem;
    font-weight: 600;
}

.rep-ig-max {
    color: var(--dx-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.rep-ig-status {
    margin: 4px 0 0;
    font-size: 0.95rem;
    font-weight: 700;
}

/* === Tabelas ============================================================ */

.rep-table-wrap {
    /* Grades largas (a evolução tem 6 colunas) rolam DENTRO do card: a página nunca rola na
       horizontal, que no telefone é o jeito mais rápido de perder o leitor. */
    overflow-x: auto;
    margin: 8px 0;
}

.rep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.rep-table th {
    padding: 8px 10px;
    background: var(--dx-teal);
    /* Tinta ESCURA sobre o teal: claro-sobre-teal dá ~1.9:1 de contraste. */
    color: var(--dx-bg);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.rep-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--dx-border);
}

.rep-table tbody tr:nth-child(odd) {
    background: var(--dx-surface2);
}

/* === Gráficos =========================================================== */

.rep-chart {
    position: relative;
    height: 260px;
    margin: 12px 0 4px;
}

.rep-canvas {
    width: 100%;
    height: 100%;
}

.rep-chart-note {
    margin: 0;
    padding: 24px 8px;
    color: var(--dx-muted);
    font-size: 0.8rem;
    text-align: center;
}

/* === Seletor de período (some na impressão) ============================= */

.rep-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
}

.rep-range {
    padding: 6px 14px;
    border: 1px solid var(--dx-border);
    border-radius: 999px;
    background: transparent;
    color: var(--dx-muted);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.rep-range[aria-pressed='true'] {
    border-color: var(--dx-teal-border);
    background: var(--dx-teal-dim);
    color: var(--dx-teal);
    font-weight: 700;
}

/* === Desktop ============================================================ */

@media (min-width: 768px) {
    .rep-header {
        padding: 28px 24px 20px;
    }

    .rep-brand {
        font-size: 1.4rem;
    }

    .rep-title {
        font-size: 1.15rem;
    }

    .rep-card {
        margin: 16px 24px 0;
    }

    .rep-card-body {
        padding: 0 24px 20px;
    }

    .rep-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .rep-ig-value {
        font-size: 3rem;
    }

    .rep-chart {
        height: 320px;
    }
}

/* === Impressão (RHI-09) =================================================
 *
 * O "Salvar em PDF" é o do navegador: o que sai daqui É o entregável de papel. Por isso o fundo
 * escuro é PRESERVADO (`print-color-adjust: exact`) — imprimir claro desfaria a decisão de tema do
 * relatório, que é o produto entregue ao cliente.
 */

@media print {
    /* Controles não existem no papel: não há o que clicar, e um botão impresso é ruído. */
    .rep-controls,
    .rep-nav,
    .rep-actions {
        display: none !important;
    }

    /* --- Isolamento do relatório dentro do app -------------------------------------
     *
     * `window.print()` imprime o DOCUMENTO INTEIRO, e na tela do staff o relatório divide a
     * página com o cromo do app (navegação, toasts, a prévia da ficha). Enquanto o papel saiu
     * do jsPDF o caminho era limpo por construção (desenhava só a ficha); virou "imprime a
     * tela". (O painel com o TOKEN do cartão, que motivou esta regra, saiu desta tela na
     * feature 51 — a gestão das pulseiras mora em `#bracelets`.)
     *
     * Estes ids só existem no shell da SPA (`index.html`) e na tela de relatórios:
     * `relatorio.html` não tem nenhum deles, então a página pública do cartão segue
     * imprimindo exatamente como antes. */
    #bottom-nav,
    #toasts-container,
    #report-preview {
        display: none !important;
    }

    /* Varredura do resto do cromo da tela — o que NÃO tem nome próprio (o cabeçalho da
     * página, o parágrafo de instrução, o seletor de atleta) também fica fora do papel.
     *
     * Ancorada em `:has(.rep-root)`: vale SÓ quando há um relatório aberto no shell. Sem esse
     * gate, imprimir qualquer outra tela do app (Cobranças, Usuários) sairia em branco. É
     * REGRA SEPARADA da de cima de propósito: um navegador sem `:has()` descarta a regra
     * inteira, e o bloco acima — o que tira o token do papel — tem de sobreviver a isso.
     * Escolhida em vez de uma classe no `<body>` porque não deixa estado para limpar: sair
     * da tela de relatórios já remove o `.rep-root` e a regra se desliga sozinha. */
    #app:has(.rep-root) .page-container > *:not(#report-interactive) {
        display: none !important;
    }

    /* O fundo escuro do relatório é PRESERVADO (`print-color-adjust: exact`). O escopo é o
     * documento que TEM relatório: antes isto era `html, body, .rep-root` sem escopo nenhum e
     * imprimir qualquer tela do app forçava fundo preto de página inteira. */
    .rep-root {
        background: var(--dx-bg) !important;
        color: var(--dx-text) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        max-width: none;
        padding: 0;
    }

    html:has(.rep-root),
    body:has(.rep-root) {
        background: var(--dx-bg) !important;
        color: var(--dx-text) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* O marcador da posição normativa (feature 50) é um FUNDO colorido, e o navegador descarta
     * fundo na impressão por padrão: sem isto a bolinha some do papel. A cor não é enfeite — é
     * metade da leitura da coluna, que o relatório entrega impresso a atleta, pai e investidor.
     * A classe é a MESMA que `positionCell` emite (`js/performance/reportHtml.js`), amarrada por
     * teste: uma regra sobre classe inexistente ficaria morta aqui para sempre. */
    .rep-pos-dot {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* TODA seção sai expandida: o que o leitor tinha fechado na tela não pode faltar no papel.
       Vence o atributo `hidden` (regra do UA `display: none`), daí o `!important`. */
    .rep-card-body[hidden],
    .rep-card-body {
        display: block !important;
    }

    .rep-card-toggle::after {
        content: '' !important;
    }

    /* Quebra de página ENTRE seções, nunca no meio de um card (Edge Case "relatório longo"). */
    .rep-card {
        margin: 0 0 12px;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rep-table-wrap {
        overflow-x: visible;
    }

    .rep-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rep-chart {
        height: 240px;
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* === Via do contrato (feature 57-entrada-contrato-aceite, AC 28) ========================
 *
 * A via (`#contrato-via`) é impressa pelo mesmo caminho do relatório: `window.print()` e o
 * "Salvar em PDF" do navegador. Sai no papel só o texto congelado e o "Registro do aceite": a
 * navegação do app, os toasts e os botões da tela ficam de fora. Ancorado em
 * `:has(.contract-via)`, como a regra do relatório: imprimir outra tela não é afetado. Sem cor
 * própria: esta folha só usa tokens `--dx-*` (RHI-04), e o navegador já descarta fundo no papel. */
@media print {
    #app:has(.contract-via) #bottom-nav,
    #app:has(.contract-via) #toasts-container,
    .contract-via-actions {
        display: none !important;
    }
}