/* reports.css — legenda/timeline de pontos, cards de tipo de relatório,
   espelho de ponto (tela + impressão) e horas extras simplificadas.
   Estava injetado via JS em app.js (document.head.insertAdjacentHTML) —
   movido pra cá como parte da consolidação de CSS (ver ESTADO-ATUAL.md
   item 39). O @media print abaixo é preservado literalmente: já resolvia
   bugs reais de impressão (colunas embaralhadas, texto vazando) e continua
   funcionando igual, só mudou de arquivo. */

/* A legenda e os pontos (.timeline-legend-dot / .timeline-point) deste bloco
   eram o esquema visual ANTIGO (verde/vermelho cheio = original, branco com
   borda grossa = editado). O esquema atual (pílula única, entrada azul/saída
   vermelha, anel laranja = ajustado) vive inteiro em timeline-detail.css e já
   usa outros nomes de classe pra legenda (.entry/.exit/.edited/.rejected, não
   .entry-orig/.entry-edit/...). Só o ponto em si (.point-entry-edited etc.)
   ainda recebe a classe antiga via app.js (nunca removida, só as classes
   novas são adicionadas por cima) — como este arquivo carrega DEPOIS de
   timeline-detail.css, a regra antiga (fundo branco) ganhava do empate de
   especificidade e deixava o ponto "ajustado" invisível (branco no branco).
   Removido — quem estiliza .timeline-point agora é só timeline-detail.css. */

.record-points-list { display: grid; gap: 10px; margin: 10px 0; }
.record-point-line { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: end; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px; overflow: hidden; }
.record-point-line.highlighted-point { border-color: var(--color-accent); background: var(--color-primary-soft); }

.report-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.report-type-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; text-align: left; display: flex; gap: 12px; align-items: center; cursor: pointer; transition: all .15s ease; }
.report-type-card:hover, .report-type-card.active { border-color: var(--color-accent); background: var(--color-primary-soft); box-shadow: 0 4px 14px var(--color-accent-soft); }
.report-type-card .card-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; font-size: 18px; font-weight: 700; flex: none; }
.report-type-card.active .card-icon { background: var(--color-primary); color: #fff; }
.report-type-card strong { display: block; font-size: 13px; color: #1e293b; margin-bottom: 2px; }
.report-type-card small { display: block; font-size: 11px; color: #64748b; line-height: 1.3; }

.report-main-actions { display: flex; gap: 10px; align-items: center; }
.report-filter-panel { margin-bottom: 24px; padding-block: 18px; }
.report-filter-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,252px); gap:14px; align-items:start; }
.report-filter-main { min-width:0; }
.report-filter-panel .filter-grid { grid-template-columns: minmax(220px, 1.4fr) minmax(145px, 1fr) minmax(145px, 1fr); align-items:end; }
.report-period-shortcuts { margin-top:10px; }
.report-actions-stack { display: grid; gap: 8px; align-self: start; }
.report-actions-stack button { width: 100%; min-height: 38px; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.report-action-wrap { position: relative; }
.report-actions-stack .outline-button:not(:disabled):hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: 0 6px 16px var(--color-primary-soft); transform: translateY(-1px); }
.report-actions-stack .create-button:not(:disabled):hover { box-shadow: 0 8px 18px var(--color-primary-soft); transform: translateY(-1px); }
.report-actions-stack button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; transform: none; }
.report-action-warning { position:absolute; z-index:20; right:calc(100% + 10px); top:50%; width:260px; padding:11px 12px; border:1px solid #fdba74; border-radius:10px; background:#fff7ed; color:#9a3412; box-shadow:0 12px 30px rgba(120,53,15,.18); font-size:11px; font-weight:700; line-height:1.45; opacity:0; visibility:hidden; pointer-events:none; transform:translate(6px,-50%); transition:opacity .15s ease,transform .15s ease,visibility .15s; }
.report-action-warning::after { content:""; position:absolute; left:100%; top:50%; border:6px solid transparent; border-left-color:#fdba74; transform:translateY(-50%); }
.report-action-wrap.report-action-blocked:hover .report-action-warning,.report-action-wrap.report-action-blocked:focus-within .report-action-warning { opacity:1; visibility:visible; transform:translate(0,-50%); }
.report-action-hint { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: #8a98aa; font-size: 10px; line-height: 1.35; }
.report-signature-ready { display: inline-block; color: #64748b; font-size: 11px; font-weight: 700; }

.espelho-sheet { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.espelho-header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid #e2e8f0; margin-bottom: 10px; }
.espelho-header h2 { margin: 0 0 4px; font-size: 18px; color: #0f172a; }
.espelho-header p { margin: 0; font-size: 12px; color: #64748b; }
.espelho-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: #f8fafc; padding: 14px; border-radius: 8px; font-size: 12px; margin-bottom: 18px; border: 1px solid #e2e8f0; }
.espelho-meta strong { display: block; color: #0f172a; font-weight: 700; }
.espelho-meta span { color: #64748b; font-size: 11px; }
.espelho-schedule { display:grid; grid-template-columns:92px 1fr; gap:8px 14px; align-items:start; margin-bottom:10px; padding:9px 12px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; color:#475569; font-size:11px; }
.espelho-schedule>strong { color:#1e293b; text-transform:uppercase; letter-spacing:.05em; font-size:10px; }
.espelho-schedule>div { display:grid; grid-template-columns:55px 82px minmax(0,1fr); gap:3px 10px; align-items:center; }
.espelho-schedule b { color:#1e293b; }
.espelho-schedule small { color:#64748b; }
.espelho-optional-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin:-2px 0 10px; padding:0 2px; color:#64748b; font-size:10px; }
.espelho-optional-meta b { margin-left:4px; color:#334155; }

.report-table { width: 100%; border-collapse: collapse; font-size: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report-table th { background: #f1f5f9; color: #475569; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-align: left; padding: 10px; border: 1px solid #e2e8f0; }
.report-table td { padding: 9px 10px; border: 1px solid #e2e8f0; color: #334155; }
/* styles.css aplica td:first-child{display:flex} a TODA tabela do site (feito
   para a coluna "pessoa + avatar" das listagens). Nas tabelas de relatório isso
   transformava a 1ª célula em flex container, e text-align deixa de valer em
   flex — era por isso que o valor de PREVISTAS ficava encostado à esquerda
   enquanto as outras colunas apareciam centralizadas. */
.report-table td:first-child { display: table-cell; align-items: initial; gap: 0; }
/* Cabeçalho em duas linhas ("TRABALHADAS" + qualificador). Sem isso, palavras
   longas não cabem nas colunas estreitas da tabela e vazam por cima da coluna
   vizinha — o efeito de nomes embolados que aparecia na impressão/PDF. */
.report-table th .table-sub { display: block; margin-top: 2px; font-size: 9px; font-weight: 600; opacity: .8; letter-spacing: .02em; }
.espelho-table th { hyphens: auto; overflow-wrap:anywhere; line-height:1.15; padding-inline:5px; }
.espelho-table th:not(:nth-child(2)),.espelho-table td:not(:nth-child(2)){text-align:center!important}
.espelho-table th:nth-child(2),.espelho-table td:nth-child(2){text-align:left!important}
.espelho-table th:first-child, .espelho-table td:first-child { white-space: nowrap; }
.report-table tbody tr:nth-child(even) { background: #f8fafc; }
.report-table tr.weekend-row { background: #f1f5f9; }
.report-table tr.summary-row td { background: #e2e8f0; font-weight: 700; border-top: 2px solid #cbd5e1; }
.report-table .negative { color: #ef4444; font-weight: 700; }
.report-table .positive { color: #10b981; font-weight: 700; }
.punch-chain { display: block; white-space: normal; overflow-wrap: anywhere; font-family: monospace; font-size: 12px; font-weight: 600; line-height: 1.45; color: #0f172a; }
.report-legend { margin: 6px 0; font-size: 11px; color: #64748b; }
.simplified-hours-wrap { margin: 18px auto 0; max-width: 650px; }

/* border-collapse quebra border-radius em <table>; a moldura fica no
   container (mesmo padrão de cantos arredondados usado nos cards). */
.espelho-table-wrap, .simplified-hours-wrap { border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
.espelho-table-wrap .report-table, .simplified-hours-wrap .report-table { border: 0; }
.espelho-table { table-layout: fixed; }
.espelho-table td:nth-child(2) { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.espelho-table td:not(:nth-child(2)){padding-inline:5px;white-space:nowrap}
.espelho-table th:nth-child(2),.espelho-table td:nth-child(2){padding-inline:9px}

/* Horas Extras Simplificadas: só tem uma linha de somatórios, não precisa
   do mesmo destaque/tamanho da tabela principal. */
.simplified-hours-table { font-size: 12.5px; }
.simplified-hours-table th, .simplified-hours-table td { padding: 5px 8px; text-align: center; }
.simplified-hours-table thead tr:first-child th { padding: 5px 8px; font-size: 11px; background: #334155; color: #fff; text-align: center; letter-spacing: 0.06em; }

.hours-summary-pill { max-width:720px; margin:16px auto 0; overflow:hidden; border:1px solid #dbe3ec; border-radius:14px; background:#fff; }
.hours-summary-pill header,.hours-summary-pill footer { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:9px 13px; }
.hours-summary-pill header { background:#334155; color:#fff; }
.hours-summary-pill header span { font-size:11px; font-weight:800; letter-spacing:.08em; }
.hours-summary-pill header strong { font-size:15px; }
.hours-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); background:#f8fafc; }
.hours-summary-grid div { min-width:0; padding:10px 12px; border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; text-align:center; }
.hours-summary-grid div:last-child { border-right:0; }
.hours-summary-grid span { display:block; min-height:26px; color:#64748b; font-size:10px; line-height:1.3; }
.hours-summary-grid strong { display:block; margin-top:3px; color:#0f172a; font-size:15px; }
.hours-summary-grid small { display:block; margin-top:3px; color:#dc4a58; font-size:8px; font-weight:750; }
.hours-summary-missing { background:#fff8f8; }
.hours-summary-pill footer { color:#047857; background:#ecfdf5; }
.hours-summary-pill.negative footer { color:#b91c1c; background:#fef2f2; }
.hours-summary-pill footer div { display:grid; gap:1px; }
.hours-summary-pill footer span { font-size:11px; font-weight:900; letter-spacing:.06em; }
.hours-summary-pill footer small { color:#64748b; font-size:9px; font-weight:600; }
.hours-summary-pill footer>strong { font-size:18px; }
.espelho-legal-footer { margin:14px 0 0; color:#94a3b8; font-size:9px; text-align:center; }

.print-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; padding-top: 20px; text-align: center; }
.signature-acknowledgement { margin: 28px 0 0; color: #475569; font-size: 10px; line-height: 1.45; text-align: left; }
.sig-line { border-top: 1px solid #0f172a; margin-bottom: 8px; width: 80%; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .report-type-grid { grid-template-columns: repeat(2, 1fr); }
  .espelho-meta { grid-template-columns: repeat(2, 1fr); }
  .report-filter-layout { grid-template-columns:1fr; }
  .report-filter-panel .filter-grid { grid-template-columns: 1fr 1fr; }
  .report-actions-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-action-warning { left:0; right:auto; top:calc(100% + 8px); transform:translateY(-4px); }
  .report-action-warning::after { left:18px; top:auto; bottom:100%; border-left-color:transparent; border-bottom-color:#fdba74; transform:none; }
  .report-action-wrap.report-action-blocked:hover .report-action-warning,.report-action-wrap.report-action-blocked:focus-within .report-action-warning { transform:translateY(0); }
}

@media (max-width: 620px) {
  .report-filter-panel .filter-grid { grid-template-columns: 1fr; }
  .report-actions-stack { grid-template-columns: 1fr; }
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body { background: #fff !important; color: #000 !important; }
  .sidebar, .topbar, .report-type-grid, .report-filter-panel, .report-main-actions, .eyebrow, .subtitle, .row-button, .create-button, .outline-button { display: none !important; }
  .main-content { margin: 0 !important; width: 100% !important; }
  .page { padding: 0 !important; max-width: 100% !important; }
  .espelho-sheet { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; page-break-after: always; }
  .espelho-meta { background: #fff !important; border: 1px solid #ccc !important; }
  .espelho-schedule { padding:5px 8px!important; margin-bottom:6px!important; }
  .hours-summary-pill { break-inside:avoid; page-break-inside:avoid; }
  .report-table td { border: 1px solid #999 !important; padding: 5px 4px !important; font-size: 8pt !important; }
  /* Cabeçalho menor que o corpo na impressão: em 9pt as palavras longas
     ("TRABALHADAS", "PREVISTAS") não cabem nas colunas de 9%-11% do papel e
     transbordam por cima da coluna seguinte. */
  .report-table th { border: 1px solid #999 !important; padding: 4px 2px !important; font-size: 6.5pt !important; letter-spacing: 0 !important; }
  .report-table th .table-sub { font-size: 6pt !important; }
  .punch-chain { font-size: 8pt !important; }
  .espelho-table td:nth-child(2){padding-inline:6px!important}
  .report-table, .report-table * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}