/**
 * @file src/styles/print.css
 * @description Estilos de impressão para o BaZi PWA — @media print completo.
 *              Alinhado à spec docs/PDF_SPEC.md e ao DS v2.3 "Quiet Luxury Tupiniquim".
 *
 * OBJETIVO:
 *   Quando o usuário acionar window.print() (ou Ctrl+P), a página de resultados
 *   deve renderizar como um relatório de consultoria premium — sem elementos de UI,
 *   sem cores saturadas, tipografia Lora + Noto Sans + Noto Serif SC.
 *
 * ESCOPO:
 *   Este arquivo governa a impressão da SPA (app.js + renderer.js).
 *   O PDF export via janela separada (pdf.js) tem seu próprio buildCSS() interno —
 *   ver docs/PDF_SPEC.md §8 para as alterações necessárias em pdf.js.
 *
 * USO:
 *   Incluir em index.html APÓS main.css:
 *   <link rel="stylesheet" href="src/styles/print.css" media="print">
 *
 * DEPENDÊNCIA: tokens.css carregado antes (custom properties usadas aqui)
 *
 * @persona  Isabela Mont + Maya Chen — REQ-08
 * @version  1.0.0
 * @sprint   S2·W2
 */


/* ═══════════════════════════════════════════════════════════════════════════
   @PAGE — Configuração da página física
   ═══════════════════════════════════════════════════════════════════════════ */

@page {
  size: 210mm 297mm portrait;   /* A4 portrait — forçado */
  margin: 20mm;                  /* 2cm todas as bordas — spec §2 */
}

@page :first {
  /* Capa sem cabeçalho/rodapé correntes */
  margin: 20mm;
}


/* ═══════════════════════════════════════════════════════════════════════════
   @MEDIA PRINT — Regras globais
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

  /* ── Preservação de cor — crítico para Wu Xing badges e bordas ── */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── Reset de animações — nenhum movimento em impressão ── */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* ── Base de página ── */
  html,
  body {
    background: #F7F4F0 !important;   /* --pdf-bg: bone DS v2.3 */
    color: #1A1A2E !important;         /* --pdf-ink */
    font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 10pt;
    line-height: 1.6;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* ── Tipografia de impressão ── */
  h1, h2, h3, h4, h5, h6,
  .sec-label,
  .pdf-section-title {
    font-family: 'Lora', Georgia, serif;
    font-size: 18pt;
    font-weight: 400;               /* sem bold — regra cardinal DS v2.3 */
    color: #1A1A2E;
    margin-bottom: 4mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid rgba(184, 134, 11, 0.25);
    page-break-after: avoid;
  }

  .cjk,
  .bazi-pillar__char,
  .p-char {
    font-family: 'Noto Serif SC', 'SimSun', serif;
    font-size: 14pt;
  }

  .mono,
  .bazi-pillar__pinyin,
  .bazi-pillar__label,
  .p-py,
  .luck-py,
  .ic-title {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 8pt;
  }

  .pdf-legend,
  .print-legend {
    font-size: 8pt;
    font-style: italic;
    color: #718096;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     OCULTAR — Elementos de UI não relevantes para impressão
     ═══════════════════════════════════════════════════════════════════════ */

  /* Navegação e estrutura do app */
  header,
  nav,
  .topbar,
  .topbar-inner,
  footer:not(.pdf-footer),

  /* Formulário de cálculo */
  #calcForm,
  .form-section,
  .form-row,
  .btn,
  .calcBtn,
  #calcBtn,

  /* Botões de ação */
  .pdf-export-btn,
  #pdfExportBtn,
  .btn-voltar-natal,
  #_btnVoltarNatal,
  button:not(.print-only),

  /* Banners e overlays do PWA */
  .sw-update-bar,
  #_errBanner,
  .err,
  .print-bar,
  .print-btn,
  .print-hint,

  /* Estado vazio */
  #emptyState,
  .empty-state,

  /* Shimmer de loading */
  #_shimmerWrap,
  .is-loading,

  /* Seletor de Zi Shi */
  .zi-panel,
  .zi-toggle-hd,

  /* Toast e notificações */
  .toast,
  .notification,
  [role="alert"]:not(.pdf-alert),

  /* Scroll e decoração de tela */
  .scroll-hint,
  .chart-tab,
  .tabs {
    display: none !important;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     EXIBIR — Apenas o conteúdo do relatório
     ═══════════════════════════════════════════════════════════════════════ */

  /* Container principal de resultados */
  #results,
  .bazi-chart {
    display: block !important;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     CABEÇALHO CORRENTE — aparece em páginas 2–4
     ═══════════════════════════════════════════════════════════════════════
     Implementado via .pdf-running-header injetado por pdf.js (REQ-08 §L03).
     Este CSS prepara o estilo; o elemento é criado em buildPage2/3/4().
     ═══════════════════════════════════════════════════════════════════════ */

  .pdf-running-header {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    height: 12mm;
    border-bottom: 1px solid rgba(184, 134, 11, 0.35);
    margin-bottom: 4mm;
    padding-bottom: 2mm;
  }

  .pdf-running-header__brand {
    font-family: 'Lora', Georgia, serif;
    font-size: 11pt;
    color: #B8860B;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .pdf-running-header__brand-zh {
    font-family: 'Noto Serif SC', serif;
    font-size: 14pt;
    color: #B8860B;
  }

  .pdf-running-header__meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8pt;
    color: #718096;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     RODAPÉ CORRENTE — aparece em todas as páginas com conteúdo
     ═══════════════════════════════════════════════════════════════════════ */

  .pdf-running-footer {
    display: block !important;
    text-align: center;
    font-family: 'Noto Sans', Arial, sans-serif;
    font-size: 8pt;
    font-style: italic;
    color: #718096;
    border-top: 1px solid rgba(184, 134, 11, 0.20);
    padding-top: 2mm;
    margin-top: 4mm;
    height: 10mm;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     QUEBRAS DE PÁGINA
     ═══════════════════════════════════════════════════════════════════════ */

  /* Forçar nova página */
  .pdf-page-break {
    page-break-before: always;
    break-before: page;
  }

  /* Seções que nunca devem ser cortadas */
  .bazi-pillar,
  .pillar-card,
  .bazi-pillar__stem,
  .bazi-pillar__branch,
  .info-card,
  .luck-card,
  .star-card,
  .pdf-table,
  .pdf-pillar-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Títulos de seção nunca ficam no final da página sem conteúdo */
  .sec-label,
  h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     MAPA BAZI — Quatro Pilares (adaptação para impressão)
     ═══════════════════════════════════════════════════════════════════════ */

  /* Grid de pilares — largura total sem gaps excessivos */
  .bazi-map,
  .pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4mm !important;
    width: 100%;
    margin-bottom: 6mm;
  }

  /* Célula de pilar — borda superior colorida por elemento, sem sombra */
  .bazi-pillar,
  .pillar-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(184, 134, 11, 0.20) !important;
    border-radius: 2mm !important;
    box-shadow: none !important;
    padding: 4mm !important;
    min-height: auto !important;

    /* Estado de hover/active: resetar para impressão */
    transform: none !important;
  }

  /* Cor de borda superior por elemento (Wu Xing — apenas borda, sem fundo) */
  .bazi-pillar[data-element="wood"],
  .pillar-card[data-element="wood"]  { border-top: 3px solid #4A7A3A !important; }
  .bazi-pillar[data-element="fire"],
  .pillar-card[data-element="fire"]  { border-top: 3px solid #B34030 !important; }
  .bazi-pillar[data-element="earth"],
  .pillar-card[data-element="earth"] { border-top: 3px solid #7A5C20 !important; }
  .bazi-pillar[data-element="metal"],
  .pillar-card[data-element="metal"] { border-top: 3px solid #4E6070 !important; }
  .bazi-pillar[data-element="water"],
  .pillar-card[data-element="water"] { border-top: 3px solid #3A6E9E !important; }

  /* Badge de elemento — borda sem fundo para impressão */
  .bazi-pillar__element,
  .p-elem {
    background: transparent !important;
    border: 1px solid currentColor !important;
    font-size: 7pt !important;
    padding: 1px 4px !important;
  }

  /* Ten God */
  .bazi-pillar__ten-god,
  .p-god {
    font-size: 8pt;
    color: #5A5870;
  }

  /* Troncos ocultos */
  .bazi-pillar__hidden-stems,
  .p-hidden {
    border-top: 1px dashed rgba(184, 134, 11, 0.25) !important;
    font-size: 7pt;
    color: #718096;
  }

  .bazi-pillar__hidden-stem {
    background: transparent !important;
    border: 1px solid rgba(90, 88, 112, 0.30) !important;
    color: #5A5870 !important;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     CARDS DE INFORMAÇÃO
     ═══════════════════════════════════════════════════════════════════════ */

  .info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3mm !important;
  }

  .info-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(184, 134, 11, 0.20) !important;
    box-shadow: none !important;
    padding: 3mm !important;
  }

  .ic-val {
    font-size: 10pt;
    color: #1A1A2E;
  }

  .ic-sub {
    font-size: 8pt;
    color: #718096;
    font-style: italic;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     GRANDES CICLOS — Grid compacto para impressão
     ═══════════════════════════════════════════════════════════════════════ */

  .luck-grid,
  .lp-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 2mm !important;
  }

  .luck-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(184, 134, 11, 0.20) !important;
    box-shadow: none !important;
    padding: 2mm !important;
    text-align: center;
  }

  /* Ciclo atual — destaque sutil */
  .luck-card.current {
    border-color: #B8860B !important;
    background: rgba(184, 134, 11, 0.05) !important;
  }

  .luck-chars {
    font-family: 'Noto Serif SC', serif;
    font-size: 12pt;
  }

  .luck-age,
  .luck-years,
  .luck-py {
    font-size: 7pt;
    color: #718096;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     BARRA DE BALANÇO DOS ELEMENTOS
     ═══════════════════════════════════════════════════════════════════════ */

  .elem-fill {
    /* Garante que a barra de progresso seja impressa */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .elem-track {
    background: rgba(184, 134, 11, 0.06) !important;
    border: 1px solid rgba(184, 134, 11, 0.15) !important;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     ESTRELAS SIMBÓLICAS
     ═══════════════════════════════════════════════════════════════════════ */

  .stars-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2mm !important;
  }

  .star-card {
    background: transparent !important;
    border: 1px solid rgba(184, 134, 11, 0.15) !important;
    box-shadow: none !important;
    padding: 2mm !important;
    font-size: 9pt;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     INTERAÇÕES ENTRE RAMOS
     ═══════════════════════════════════════════════════════════════════════ */

  .interact-list {
    font-size: 9pt;
  }

  .interact-item {
    border-bottom: 1px solid rgba(184, 134, 11, 0.10) !important;
    padding: 1mm 0 !important;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     ÁREA DE NOTAS DO CONSULTOR (Pág. 4)
     ═══════════════════════════════════════════════════════════════════════ */

  .pdf-notes-area {
    display: block !important;
    width: 100%;
    margin-top: 4mm;
  }

  .pdf-notes-area__line {
    border-bottom: 1px solid rgba(184, 134, 11, 0.20);
    height: 8mm;   /* line-height equivalente a 10pt × 1.6 */
    display: block;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     CAPA — Página 1 (classe .pdf-cover adicionada por buildCoverPage())
     ═══════════════════════════════════════════════════════════════════════ */

  .pdf-cover {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 257mm;   /* área útil com margens de 2cm */
    text-align: center;
    page-break-after: always;
    break-after: page;
  }

  .pdf-cover__zh {
    font-family: 'Noto Serif SC', serif;
    font-size: 72pt;
    color: #B8860B;
    line-height: 1;
    margin-bottom: 8mm;
  }

  .pdf-cover__title {
    font-family: 'Lora', Georgia, serif;
    font-size: 18pt;
    color: #1A1A2E;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12mm;
  }

  .pdf-cover__rule {
    width: 60mm;
    border: none;
    border-top: 1px solid rgba(184, 134, 11, 0.40);
    margin: 6mm auto;
  }

  .pdf-cover__name {
    font-family: 'Lora', Georgia, serif;
    font-size: 24pt;
    color: #1A1A2E;
    margin-bottom: 4mm;
  }

  .pdf-cover__meta {
    font-family: 'Noto Sans', Arial, sans-serif;
    font-size: 10pt;
    color: #718096;
    line-height: 1.8;
  }

  .pdf-cover__gen {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8pt;
    color: #5A5870;
    margin-top: 12mm;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     LINKS — remover underline e cor em impressão
     ═══════════════════════════════════════════════════════════════════════ */

  a,
  a:visited {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* Mostrar URL de links externos após o texto */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 7pt;
    color: #718096;
  }

  /* Não mostrar URL para links internos ou de ação */
  a[href^="#"]::after,
  a[href^="javascript"]::after,
  button::after {
    content: none;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     OVERRIDE DE DARK MODE — forçar light para impressão
     ═══════════════════════════════════════════════════════════════════════ */

  [data-theme="dark"],
  [data-theme="dark"] * {
    background-color: transparent !important;
    color: #1A1A2E !important;
  }

  /* Exceções: elementos que precisam de fundo branco */
  [data-theme="dark"] .bazi-pillar,
  [data-theme="dark"] .pillar-card,
  [data-theme="dark"] .info-card,
  [data-theme="dark"] .luck-card,
  [data-theme="dark"] .star-card {
    background: #FFFFFF !important;
  }

}
/* fim @media print */