/* Report charts, the branded report header, the printed (PDF) report and the dashboard's channel split.
   Chart colours: four brand hues in a fixed order, checked for colour-blind separation (green · blue · coral · amber).
   Slot 0 = net / first series, slot 1 = commission / second, so a colour always means the same thing. */
:root {
  --viz-1: #1F8A63;  /* canopy green, lifted for charts */
  --viz-2: #0865CC;  /* horizon blue (logo) */
  --viz-3: #E4624B;  /* coral */
  --viz-4: #E3A21A;  /* amber — low contrast on white, so values are always written beside it or in the table */
}
.viz-s0 { fill: var(--viz-1); stroke: var(--viz-1); background: var(--viz-1); }
.viz-s1 { fill: var(--viz-2); stroke: var(--viz-2); background: var(--viz-2); }
.viz-s2 { fill: var(--viz-3); stroke: var(--viz-3); background: var(--viz-3); }
.viz-s3 { fill: var(--viz-4); stroke: var(--viz-4); background: var(--viz-4); }
path.viz-s0, path.viz-s1, path.viz-s2, path.viz-s3 { stroke: none; }

.viz-grid { display: grid; gap: 14px; margin: 14px 0; }
.viz-grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.viz { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 10px; min-width: 0; }
.viz-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 6px; }
.viz-title { font-weight: 600; color: var(--ink); font-size: var(--fs-sm, 13px); }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.viz-legend i, .viz-tiprow i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.viz-plot { position: relative; }
.viz-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-ui); }
.viz-grid line, .viz-svg .viz-grid { stroke: var(--line); stroke-width: 1; }
.viz-svg .viz-grid { stroke-dasharray: 2 3; }
.viz-svg .viz-base { stroke: var(--line-strong); stroke-width: 1; }
.viz-svg .viz-axis { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-svg .viz-label { fill: var(--ink-2); font-size: 12px; }
.viz-svg .viz-value { fill: var(--ink); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-svg .viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-svg .viz-dot { stroke: var(--paper); stroke-width: 2; }
.viz-svg .viz-hit { fill: transparent; cursor: default; }
.viz-svg .viz-hit:hover { fill: rgba(21, 48, 42, .04); }
.viz-svg .viz-cross { stroke: var(--ink-4); stroke-width: 1; opacity: 0; pointer-events: none; }
.viz-svg .viz-cross.on { opacity: 1; }
.viz-tip { position: absolute; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .08s; min-width: 160px; max-width: 240px;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 6px 20px rgba(21, 48, 42, .14); padding: 8px 10px; font-size: 12px; }
.viz-tip.on { opacity: 1; }
.viz-tiplabel { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.viz-tiprow { display: flex; align-items: center; gap: 7px; color: var(--ink-2); line-height: 1.6; }
.viz-tiprow span { flex: 1; }
.viz-tiprow b { color: var(--ink); font-variant-numeric: tabular-nums; }
.viz-tiprow.total { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 3px; }
.viz-tiprow.total i { background: none; }

/* On-screen report header: logo, period, downloads */
.reportbrand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--canopy-tint), var(--paper) 70%); border: 1px solid var(--line); border-radius: 14px; }
.reportlogo { height: 28px; width: auto; }
.reportbrand .grow { min-width: 160px; border-left: 1px solid var(--line-strong); padding-left: 14px; }
.reportnote { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 10px; }
.reportscroll.short { max-height: none; margin-bottom: 14px; }
@media (max-width: 640px) { .reportbrand .grow { border-left: 0; padding-left: 0; flex-basis: 100%; } .reportbrand .reportactions { flex-basis: 100%; } }

/* ── The printed report (PDF) ── */
.print-sheet.pdf { padding: 0; color: #15302A; font-family: var(--font-ui); font-size: 11px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pdf-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-radius: 10px;
  background: #F3F7F4; border-top: 5px solid #1B5A47; }
.pdf-logo { height: 34px; width: auto; }
.pdf-titles { text-align: right; }
.pdf-kicker { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #1F8A63; font-weight: 700; }
.pdf-band h1 { font-family: var(--font-display); font-size: 21px; margin: 2px 0 1px; color: #15302A; }
.pdf-period { font-size: 11.5px; color: #3F574E; font-weight: 600; }
.pdf-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 8px 4px; margin: 6px 0 4px; border-bottom: 1px solid #D8E2DB; color: #3F574E; font-size: 10px; }
.pdf-meta b { color: #15302A; font-weight: 600; }
.pdf-note { margin: 6px 0; padding: 6px 10px; border-left: 3px solid #E3A21A; background: #FBF0D0; color: #6E4A00; font-size: 10px; border-radius: 4px; }
.pdf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; }
.pdf-tile { border: 1px solid #D8E2DB; border-radius: 8px; padding: 8px 10px; background: #fff; break-inside: avoid; }
.pdf-tile-label { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: #66796F; font-weight: 600; }
.pdf-tile-value { font-size: 15px; font-weight: 700; color: #15302A; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pdf-tile:first-child { border-color: #1B5A47; background: #E1EFE8; }
.print-sheet.pdf .viz-grid { margin: 10px 0; gap: 10px; }
.print-sheet.pdf .viz-grid.two { grid-template-columns: 1fr; }
.print-sheet.pdf.wide .viz-grid.two { grid-template-columns: 1fr 1fr; }
.print-sheet.pdf .viz { border-radius: 8px; padding: 10px 12px 6px; break-inside: avoid; }
.print-sheet.pdf .viz-tip, .print-sheet.pdf .viz-cross { display: none; }
.pdf-section { margin-top: 12px; }
.pdf-section h2 { font-family: var(--font-display); font-size: 13px; color: #1B5A47; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 2px solid #1B5A47; break-after: avoid; }
.print-sheet.pdf .reporttable { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.print-sheet.pdf.wide .reporttable { font-size: 8.5px; }
.print-sheet.pdf .reporttable th { position: static; background: #1B5A47; color: #fff; border: 0; padding: 5px 6px; font-weight: 600; white-space: normal; text-align: left; }
.print-sheet.pdf .reporttable th.right { text-align: right; }
.print-sheet.pdf .reporttable td { padding: 4px 6px; border-bottom: 1px solid #E3EAE5; white-space: normal; }
.print-sheet.pdf .reporttable tbody tr:nth-child(even) td { background: #F6F9F7; }
.print-sheet.pdf .reporttable .muted { color: #8FA196; }
.print-sheet.pdf .resorttotals td.strong { font-weight: 700; }
.pdf-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 6px; border-top: 1px solid #D8E2DB; color: #66796F; font-size: 9px; }
@media print {
  @page { margin: 12mm 12mm 14mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9px 'Inter', sans-serif; color: #66796F; } }
  @page wide { size: A4 landscape; margin: 10mm 10mm 12mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9px 'Inter', sans-serif; color: #66796F; } }
}

/* ── Dashboard: this month's room revenue by channel ── */
.chanrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.chan { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); min-width: 0; text-align: left; color: inherit; font: inherit; }
button.chan { cursor: pointer; }
button.chan:hover { border-color: var(--line-strong); background: var(--mist); }
.chan-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.chan-top i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.chan-val { font-size: 17px; white-space: nowrap; font-weight: 700; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.chan-sub { font-size: 11px; color: var(--ink-3); }
.chanbar { display: flex; gap: 2px; height: 8px; margin-top: 10px; border-radius: 4px; overflow: hidden; background: var(--mist-2); }
.chanbar i { display: block; height: 100%; }

.print-sheet.pdf .viz-svg .viz-hit, .print-sheet.pdf .viz-svg .viz-hit:hover { fill: transparent; }