/* ═══════════════════════════════════════════════════════════════════════════
   RELATORIO IMPRESSO / PDF  —  carregado com <link media="print">, portanto
   TODO este arquivo vale apenas na impressao (nao precisa de @media print).

   Objetivo: documento clinico textual, enxuto e monocromatico — NAO um retrato
   da tela. Regras gerais:
     - sem cartao: nada de borda, fundo, sombra ou canto arredondado;
     - hierarquia por tipografia (peso / caixa alta / regua), nunca por cor;
     - Q&A vira linha corrida "Pergunta: resposta";
     - tudo preto, EXCETO valores em alerta amarelo/vermelho
       (critical / high / moderate) e as imagens do mapa de dor;
     - sem break-inside nos cartoes: era isso que abria paginas em branco.
   ═══════════════════════════════════════════════════════════════════════════ */

@page { size: A4 portrait; margin: 16mm 15mm; }

html, body {
    background: #fff !important;
    font-size: 10pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* ── Fora do papel ──────────────────────────────────────────────────────── */
.admin-sidebar, .admin-nav, .sidebar-toggle, #lt-widget,
.topbar-actions, .cache-badge, .swal2-container,
.panel-toolbar .btn, .pm-tip,
/* cabecalho de tela: o cabecalho de impressao ja traz os mesmos dados */
.topbar, .wsr-report-header,
/* dica de interacao que nao faz sentido no papel */
.pm-display-image-hint {
    display: none !important;
}

/* ── Layout em coluna unica, largura total ──────────────────────────────── */
.site-shell, .admin-layout {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
.page-stack { width: 100% !important; max-width: none !important; gap: 0 !important; }

/* ── MONOCROMATICO ──────────────────────────────────────────────────────
   Sledgehammer: tudo preto, sem fundo. As excecoes de alerta vem depois e
   ganham por especificidade de classe (mesmo com !important nos dois lados). */
.page-stack, .page-stack * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ── Sem cartao: vira texto ─────────────────────────────────────────────── */
.card, .note-card, .wps-card, .wps-summary, .wsd-card,
.cpp-page, .wsr-detail-card, .wsr-cfg-group, .pm-display-card {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 6pt !important;
    break-inside: auto !important;        /* nao empurrar cartao inteiro */
    page-break-inside: auto !important;
}

/* Grades multi-coluna viram fluxo vertical descritivo. */
.wps-grid, .wsr-configured-cols, .cpp-row3, .cpp-row2,
.wsd-grid, .pm-display-images {
    display: block !important;
    grid-template-columns: none !important;
}

/* ── Hierarquia por tipografia ──────────────────────────────────────────── */
.wps-card__head, .wsd-card__head, .wsr-detail-group__title,
.wsr-cfg-group__title, .wsr-details__summary span,
.pm-display-image-title, .wps-summary__label {
    font-size: 9pt !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 0.5pt solid #000 !important;
    padding: 0 0 1pt !important;
    margin: 8pt 0 3pt !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
}
.wsr-qa-section-divider {
    font-size: 8.5pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: 0 !important;
    padding: 4pt 0 1pt !important;
    margin: 0 !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
}

/* Emoji e chevrons decorativos: ruido num relatorio clinico. */
.wps-card__icon, .wsr-details__chevron, .wsr-cfg-chevron,
.wsr-details__summary small {
    display: none !important;
}

/* ── Q&A textual: "Pergunta: resposta" em linha corrida ──────────────────
   Na tela e um grid com a resposta a direita e estreita; no papel isso
   quebrava uma palavra por linha ("Not / at / all"). */
.wsr-qa-item, .wps-metric, .wsd-dt-row {
    display: block !important;
    grid-template-columns: none !important;
    padding: 1.5pt 0 !important;
    border: 0 !important;
    border-bottom: 0.25pt dotted #bbb !important;
    break-inside: avoid;
    page-break-inside: avoid;
}
.wsr-qa-item__question, .wps-metric__label {
    display: inline !important;
    font-size: 9pt !important;
}
.wsr-qa-item__question::after,
.wps-metric__label::after { content: ": "; }
.wsr-qa-item__answer, .wps-metric__val {
    display: inline !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
    text-align: left !important;
    max-width: none !important;
    white-space: normal !important;
}
/* Chave tecnica do REDCap (cc_pain_1...) e badge "calc": ruido clinico. */
.wsr-qa-item__key, .wsr-qa-calc-badge { display: none !important; }
.wsr-qa-item--calc { border-left: 0 !important; padding-left: 0 !important; }

/* Chips da faixa demografica viram texto separado por ponto medio. */
.dem-chip { display: inline !important; border: 0 !important; padding: 0 !important; }
.dem-chip__icon { display: none !important; }
.dem-chip::after { content: " \00B7  "; }

/* ── EXCECOES DE COR: apenas alerta amarelo/vermelho ─────────────────────
   Vem depois do sledgehammer e vencem por especificidade de classe.
   'normal' (verde) e 'neutral' (cinza) ficam PRETOS de proposito. */
.wps-col--critical, .wps-band--critical,
.cpp-ld--critical, .cpp-time-label--peak {
    color: #b91c1c !important;
}
.wps-col--high, .wps-band--high,
.wsd-badge--high, .wsd-finding--high,
.cpp-ld--high, .wsd-eff-badge--poor {
    color: #c2410c !important;
}
.wps-col--moderate, .wps-band--moderate,
.wsd-col--moderate, .wsd-badge--moderate,
.cpp-ld--moderate {
    color: #a16207 !important;
}

/* ── Mapa de dor: a unica parte que continua colorida ────────────────────
   O SVG pinta por 'fill', que o sledgehammer (color/background) nao toca. */
svg { max-width: 100% !important; height: auto !important; }
.pm-display-image-card {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 6pt !important;
}
/* A legenda de severidade acompanha o mapa, entao mantem os pontos visiveis. */
.cpp-ld { display: inline-block !important; }

/* ── Cabecalho do relatorio (so existe no papel) ─────────────────────────── */
.print-report-header {
    display: block !important;
    margin: 0 0 10pt;
    padding-bottom: 4pt;
    border-bottom: 1pt solid #000 !important;
}
.print-report-header__title {
    font-size: 13pt;
    font-weight: 800;
    margin: 0 0 3pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.print-report-header__meta { font-size: 8.5pt; display: block; }
.print-report-header__meta span::after { content: "   "; white-space: pre; }

a { text-decoration: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   COBERTURA DOS DEMAIS FORMULARIOS
   O bloco acima foi calibrado no demographics_pain. Os outros formularios usam
   namespaces proprios (wsd / cpp / dcl / mh / dem / sec / pcc / wsr). Levantei
   as classes de cada um e estendi as MESMAS regras do padrao: achatar cartao,
   linearizar grade, titulo tipografico, par label/valor textual, e as excecoes
   de cor de alerta. Nenhuma aparencia nova aqui — so alcance.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grades multi-coluna -> fluxo vertical descritivo ───────────────────── */
.cpp-graphs-row, .cpp-history-row, .cpp-intf-row, .cpp-wellbeing-row,
.dcl-history-grid, .dcl-row2, .dcl-row3,
.dem-row2, .dem-row3,
.mh-row2, .mh-row3, .mh-row3--no-allergies,
.wsd-arch-row, .wsd-hist-row, .wsd-row3,
.wsr-chrono-grid, .wsr-concern-row, .wsr-grid {
    display: block !important;
    grid-template-columns: none !important;
}

/* ── Caixas e cartoes proprios -> texto ─────────────────────────────────── */
.cpp-graph-box, .cpp-legend, .cpp-time-col,
.dem-inline-wrap, .pm-display-note,
.wsd-comment-box, .wsd-narrative, .wsd-patient-hdr,
.wsr-col, .wsr-key-flags, .wsr-safety, .wsr-summary,
.wsr-rh-pill, .sec-panel__badge {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 4pt !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
}

/* ── Titulos de secao (bloco, linha propria) ────────────────────────────── */
.sec-panels__title, .wsr-col__title, .wsr-block__label,
.wsr-key-flags__label, .wsr-summary__label,
.wsd-sub-header, .dcl-subst-title, .pm-display-note__label {
    display: block !important;
    font-size: 9pt !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 0.5pt solid #000 !important;
    padding: 0 0 1pt !important;
    margin: 8pt 0 3pt !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
}

/* ── Pares label/valor -> linha textual ─────────────────────────────────
   Aqui NAO injeto ":" via ::after como no Q&A do padrao: nestes namespaces o
   markup as vezes ja traz pontuacao propria, e o pseudo-elemento produziria
   "Label: :". Uso separacao por espaco, com o valor em negrito fazendo a
   distincao. */
.wsd-row-label, .wsd-dt-label, .cpp-pf-label, .cpp-gcps-label,
.dcl-status-label, .pcc-answer-label, .wsd-finding__label,
.wsr-domain__label, .wsr-grading-label, .sec-panel__label,
.companion-divider__label {
    display: inline !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-right: 0.45em !important;
}
.wsd-val, .wsd-dt-val, .wsd-finding__score, .cpp-nrs-val, .dem-chip__val {
    display: inline !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
    white-space: normal !important;
    max-width: none !important;
    text-align: left !important;
}

/* ── Tabelas: continuam tabelas (sao legiveis), so perdem a cor ─────────── */
.cpp-gcps-table, .wsd-arch-table, .wsd-hist-table,
.cpp-gcps-table th, .cpp-gcps-table td,
.wsd-arch-table th, .wsd-arch-table td,
.wsd-hist-table th, .wsd-hist-table td {
    border-color: #bbb !important;
    font-size: 8.5pt !important;
}
.cpp-gcps-table th, .wsd-arch-table th, .wsd-hist-table th {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-bottom: 0.5pt solid #000 !important;
}
.cpp-gcps-table td, .wsd-arch-table td, .wsd-hist-table td {
    border-bottom: 0.25pt dotted #bbb !important;
    padding: 1.5pt 3pt !important;
}

/* Botao nao tem funcao no papel (o .btn da topbar ja sai, este pega os demais). */
.btn { display: none !important; }

/* ── EXCECOES DE COR — demais formularios ────────────────────────────────
   Mesmos tres tons do padrao. Tudo que e 'normal'/'good'/'green' fica preto
   por ficar de fora desta lista. */
.dcl-score-chip--critical, .dem-bmi-chip--critical, .dem-chip--bmi-critical,
.dem-chip--allergy, .dcl-subst-flag--yes,
.wsd-badge--critical, .wsd-col--critical, .wsd-ctx--critical,
.wsd-finding--critical, .wsd-card__head--red, .wsd-sub-header--red,
.wsr-badge--red, .wsr-col__title--red, .wsr-flag--red,
.wsr-grading-label--red, .wsr-rh-score--red, .wsr-score-pill--red,
.wsr-safety, .wsr-safety__icon {
    color: #b91c1c !important;
}
.wsd-ctx--high, .wsd-card__head--orange, .wsd-sub-header--orange {
    color: #c2410c !important;
}
.wsd-ctx--moderate, .wsd-eff-badge--mod, .wsd-card__head--amber {
    color: #a16207 !important;
}