/* ═══════════════════════════════════════════════════════════════════════════
   Report document — one template, both audiences.

   The hotel owner and the platform operator read different numbers, but a report
   is a report: same header, same provenance line, same footer, same paper. Kept
   in one file precisely so it cannot drift into two formats that almost match.

   Designed for paper first. "Export to PDF" is the browser's own print-to-PDF,
   which needs no library, no server-side renderer and no external request — and
   produces a file that opens on any machine the hotel already owns.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ───────────────────────────────────────────────────────────────
   Declared on the toolbar as well as the document, and that is the whole of the
   "make Export to PDF darker" fix.

   They used to live on .gxr alone -- and .gxr-bar-top is its SIBLING, not its child.
   So every var() in a toolbar rule resolved to nothing: background:var(--r-accent) was
   invalid and fell back to transparent, border-color:var(--r-line) fell back to
   currentColor, and the primary button ended up as white text on no background over the
   console's ivory page. Measured at 1.09:1 -- not "a bit pale", unreadable. Anything
   added to this toolbar later inherits the fix rather than rediscovering it.

   The palette is the product's own, per design/tokens.css. These were sage with cool
   grey-violet neutrals -- a retired palette that outlived the product -- so the one
   artefact a hotel owner exports, prints and forwards to somebody else was the one thing
   that did not look like the software it came from. Warm neutrals and champagne gold now.
   The status colours are deliberately darker than the screen tokens: this is for paper. */
.gxr, .gxr-bar-top {
  --r-ink:#241e17; --r-muted:#8a7f72; --r-faint:#b9afa2;
  --r-line:#ebe4d9; --r-line-soft:#f5efe5;
  --r-accent:#b08d57; --r-surface:#fff; --r-zebra:#faf9f6;
  /* The pressed tone of the same gold (--color-primary-700). White on --r-accent is
     3.1:1, under WCAG AA for text; on this it is 5.7:1. Solid buttons only -- the accent
     stays the accent for bars, rules and the masthead. */
  --r-accent-deep:#7d6238; --r-accent-deeper:#5f4a2a;
  --r-good:#17734c; --r-warn:#8a6414; --r-bad:#b03a4c;
}

.gxr {
  background:var(--r-surface); color:var(--r-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  font-size:13px; line-height:1.5;
  max-width:900px; margin:0 auto; padding:34px 38px 40px;
  border-radius:12px; box-shadow:0 2px 14px rgba(20,20,45,.08);
}
.gxr *{box-sizing:border-box}

/* ── masthead ─────────────────────────────────────────────────────────── */
.gxr-head{display:flex;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:2px solid var(--r-ink)}
.gxr-mark{
  width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--r-accent),#7d6238);color:#fff;
  font-weight:800;font-size:15px;
}
.gxr-titles{min-width:0;flex:1}
.gxr-product{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--r-muted)}
.gxr-title{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:3px 0 0}
.gxr-subject{font-size:13.5px;color:var(--r-muted);margin-top:3px}
.gxr-period{
  flex:none;text-align:right;font-size:11.5px;color:var(--r-muted);
  font-variant-numeric:tabular-nums;
}
.gxr-period b{display:block;color:var(--r-ink);font-size:13px;font-weight:700}

/* ── provenance: who asked, and when. Printed on the page, not just on screen,
      because a number without a timestamp is a number nobody can check. ── */
.gxr-meta{
  display:flex;flex-wrap:wrap;gap:0 26px;
  padding:10px 0 0;font-size:11.5px;color:var(--r-muted);
}
.gxr-meta div{padding:3px 0}
.gxr-meta b{color:var(--r-ink);font-weight:600}

/* ── sections ─────────────────────────────────────────────────────────── */
.gxr-section{margin-top:26px;break-inside:avoid}
.gxr-h{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--r-muted);padding-bottom:7px;border-bottom:1px solid var(--r-line);
}
.gxr-lede{margin:9px 0 0;font-size:12.5px;color:var(--r-muted)}

.gxr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
@media (max-width:640px){.gxr-kpis{grid-template-columns:repeat(2,1fr)}}
.gxr-kpi{border:1px solid var(--r-line);border-radius:9px;padding:12px 13px}
.gxr-kpi .v{font-size:21px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gxr-kpi .k{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--r-muted);margin-top:4px}
.gxr-kpi .d{font-size:11.5px;color:var(--r-faint);margin-top:3px}

.gxr-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
.gxr-table th{
  text-align:left;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--r-muted);padding:7px 9px;border-bottom:1px solid var(--r-line);white-space:nowrap;
}
.gxr-table td{padding:8px 9px;border-bottom:1px solid var(--r-line-soft);vertical-align:top}
.gxr-table tbody tr:nth-child(even){background:var(--r-zebra)}
.gxr-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gxr-table tfoot td{
  padding:9px;border-top:2px solid var(--r-ink);border-bottom:0;
  font-weight:700;font-variant-numeric:tabular-nums;
}
.gxr-empty{padding:18px 9px;color:var(--r-faint);font-size:12.5px;text-align:center;
  border:1px dashed var(--r-line);border-radius:8px;margin-top:14px}

.gxr-tag{
  display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.gxr-tag.good{background:#e7f5ee;color:var(--r-good)}
.gxr-tag.warn{background:#fbf2df;color:var(--r-warn)}
.gxr-tag.bad{background:#fceaed;color:var(--r-bad)}
.gxr-tag.flat{background:#f0eff4;color:var(--r-muted)}

/* A bar that reads as a proportion without needing a charting library. */
.gxr-bar{height:6px;border-radius:3px;background:var(--r-line-soft);overflow:hidden;min-width:60px}
.gxr-bar i{display:block;height:100%;background:var(--r-accent);border-radius:3px}

/* ── footer ───────────────────────────────────────────────────────────── */
.gxr-foot{
  margin-top:30px;padding-top:12px;border-top:1px solid var(--r-line);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-size:11px;color:var(--r-faint);
}
.gxr-foot .grow{flex:1}
.gxr-conf{font-weight:600;color:var(--r-muted)}

/* ── toolbar (screen only) ────────────────────────────────────────────── */
.gxr-bar-top{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  max-width:900px;margin:0 auto 14px;
}
.gxr-bar-top .grow{flex:1}
.gxr-btn{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--r-line);
  background:#fff;color:var(--r-ink);border-radius:8px;padding:9px 14px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.gxr-btn:hover{border-color:var(--r-accent);color:var(--r-accent)}
.gxr-btn.primary{background:var(--r-accent-deep);border-color:var(--r-accent-deep);color:#fff}
.gxr-btn.primary:hover{background:var(--r-accent-deeper);border-color:var(--r-accent-deeper);color:#fff}
.gxr-field{
  font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--r-line);
  border-radius:8px;background:#fff;color:var(--r-ink);
}

/* ═══ print ══════════════════════════════════════════════════════════════
   What the guest of this document actually keeps. Margins leave room for the
   running header and footer the browser prints; everything interactive goes.  */
/* The margin is deliberately in TWO places, and the inner one is the one that holds.

   @page margin works -- measured at 12/14mm on the old rule -- but it is the ONE margin the
   person printing can switch off: "Margins: None" in the dialog zeroes it, and the setting
   is sticky between prints. Safari has never honoured it properly either. That is how a
   report came back with its text against the paper edge.

   So @page keeps only enough margin for the running header and footer a browser prints,
   and .gxr-print-root carries the margin the reader actually sees -- content padding, which
   no print setting can take away. Measured: 20mm with the dialog on Default, 14mm with it
   on None (0mm before this), and the two never fight because @page trims the sheet while
   the padding insets the content inside what is left. */
@page{ size:A4; margin:8mm 6mm 10mm; }

@media print{
  /* Only the report prints. Sidebars, nav and toolbars are screen furniture and
     would otherwise consume the first page of every export. */
  body>*{display:none!important}
  body>.gxr-print-root{display:block!important}
  .gxr-print-root{position:static!important;inset:auto!important;background:#fff!important;
    padding:12mm 14mm!important;margin:0!important;overflow:visible!important}
  .gxr-bar-top{display:none!important}

  html,body{background:#fff!important;margin:0!important;padding:0!important}
  .gxr{
    max-width:none;margin:0;padding:0;border-radius:0;box-shadow:none;
    font-size:10.5pt;color:#000;
  }
  .gxr-section{break-inside:avoid}
  .gxr-table{font-size:9.5pt}
  .gxr-table thead{display:table-header-group}   /* repeat headers across pages */
  .gxr-table tr{break-inside:avoid}
  .gxr-kpi{border-color:#bbb}
  .gxr-head{border-bottom-color:#000}
  /* Links print as text: a blue underline on paper is noise, and the URL is
     meaningless once the page is a PDF someone was emailed. */
  a{color:inherit!important;text-decoration:none!important}
  .gxr-foot{break-inside:avoid}
}