/* ============================================================================
   BEC ARABIA — REPORTING DESIGN SYSTEM  (SSOT)
   ============================================================================
   ONE stylesheet for every reporting dashboard (Sales, Warehouse, Maintenance,
   Accounting, Purchasing, HR, CEO). All classes use the single `rpt-` prefix.

   Linked globally from Components/App.razor — NOT Blazor-scoped — so all report
   pages share one identical look. Per-page `.razor.css` files were removed; if a
   page ever needs a true one-off, add a scoped `.razor.css` for that override
   ONLY (never re-declare the system here).

   Layers below:  Tokens · Page · Header · KPIs · Cards · Columns · Tables
                  · Bar chart · Stacked bar · Line chart · Callouts · Badges
                  · Helpers · Responsive · Print
   ============================================================================ */

/* ── LAYER 1 · DESIGN TOKENS ───────────────────────────────────────────────
   Scoped to the report root so they never leak into the rest of the portal. */
.rpt-doc,
.rpt-loading-gate {
  /* Greyscale ramp */
  --black:  #000000;
  --dark:   #1a1a1a;
  --mid:    #555555;
  --light:  #999999;
  --faint:  #cccccc;
  --stroke: #e2e2e2;
  --surface:#f6f6f6;
  --white:  #ffffff;

  /* Accent + status */
  --accent:      #0071e3;
  --accent-soft: #eef5ff;
  --critical:    #7a0012;
  --critical-bg: #fff5f7;
  --success:     #166534;
  --success-bg:  #eef8f1;
  --pending:     #92400e;
  --pending-bg:  #fff7e8;

  /* Type scale — Major-Third (×1.25). KPI ▸ Card gap restored so the two
     no longer read as the same size (was 1.56 vs 1.45 = only 7% apart). */
  --fs-display: 3.45rem;  /* 55px — cover hero            */
  --fs-title:   1.95rem;  /* 31px — page title            */
  --fs-kpi:     1.56rem;  /* 25px — KPI headline value    */
  --fs-card:    1.25rem;  /* 20px — card value            */
  --fs-body:    0.92rem;  /* 15px — body                  */
  --fs-meta:    0.75rem;  /* 12px — captions / callouts   */
  --fs-table:   0.82rem;  /* 13px — table cell (raised from 11px: the team found the tables
                              too cramped to read at a glance) */
  --fs-eyebrow: 0.625rem; /* 10px — chapter / labels      */

  /* Spacing — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;
  --block-gap: 52px;   /* vertical rhythm between visuals. Raised 22 -> 34 -> 52: with a
                          rotated-label chart sitting directly above its own data table,
                          anything tighter reads as one crowded slab. */

  /* Page geometry */
  --page-pad:  34px 46px 28px;
  --cover-pad: 56px 62px;

  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc {
  background: var(--white);
  color: var(--dark);
  padding: 0;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Loading gate ── */
.rpt-loading-gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.rpt-loading-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--stroke);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rpt-spin 0.85s linear infinite;
}
@keyframes rpt-spin { to { transform: rotate(360deg); } }
.rpt-loading-title { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text  { font-size: 15px; color: var(--light); }

/* ── LAYER 2 · PAGE CONTAINER ──────────────────────────────────────────────
   Each report is a stack of full-viewport "slides" (cover → content → end). */
.rpt-page {
  width: 100%;
  max-width: 1680px;       /* tame ultra-wide monitors so charts, tables & KPIs stay aligned */
  margin: 0 auto;
  padding: var(--page-pad);
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: visible;
}
/* Screen: sections flow to their CONTENT with a steady rhythm — no forced full-viewport
   "slides" (which over-scroll and create uneven gaps via space-between). The slide-per-page
   feel is preserved for the PDF/print path in the @media print layer below. */
.rpt-page:not(.rpt-page--cover):not(.rpt-page--end) {
  justify-content: flex-start;   /* blocks self-space via their own margin-bottom (no doubled gap) */
}
/* ONE hairline separates consecutive content chapters (the first, right after the cover,
   gets none). Adjacent-sibling (+) so rules never stack into a double line. */
.rpt-page:not(.rpt-page--cover):not(.rpt-page--end) + .rpt-page:not(.rpt-page--end) {
  border-top: 1px solid var(--stroke);
}

/* Cover & closing stay tall and centred — they're the title moments. */
.rpt-page--cover,
.rpt-page--end { min-height: 88vh; justify-content: center; align-items: center; padding: var(--cover-pad); }
.rpt-page--end .rpt-cover__content {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ── Cover / end content ── */
.rpt-cover__content { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 22px;
}
.rpt-cover__title {
  font-size: var(--fs-display);
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -2.4px;
  color: var(--black);
  margin-bottom: 24px;
  max-width: 960px;
}
.rpt-cover__divider { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--dark);
  max-width: 1000px;
  margin-bottom: 24px;
}
.rpt-cover__period { font-size: var(--fs-meta); font-weight: 600; color: var(--mid); letter-spacing: 0.5px; }
.rpt-cover__footer {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  color: var(--dark);
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--black);
}
.rpt-badge-live { font-weight: 700; letter-spacing: 0.5px; color: var(--black); }

/* ── LAYER 3 · PAGE HEADER ── */
.rpt-page__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter   { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num  { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title {
  font-size: var(--fs-title);
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.9px;
  line-height: 1.05;
  margin-bottom: 10px;
}
.rpt-rule { display: none; }

/* ── LAYER 4 · BIG NUMBERS (KPI strip) ── */
.rpt-big-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--black);
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 16px;
}
.rpt-big-numbers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rpt-big-numbers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rpt-big-numbers--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rpt-big-numbers--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rpt-big-numbers--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.rpt-big-num { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; position: relative; }
.rpt-big-num:last-child { border-right: none; }
.rpt-big-num__val {
  font-size: var(--fs-kpi);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--black);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 4px;
}
.rpt-big-num__lbl {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.65px;
  margin-top: 4px;
}
.rpt-big-num__sub { font-size: 9px; color: var(--light); margin-top: 2px; }
.rpt-big-num--accent .rpt-big-num__val { color: var(--accent); }
.rpt-big-num--warn   .rpt-big-num__val { color: var(--critical); }
/* Two stacked KPI strips read as ONE block: the second drops its heavy 2px top rule and
   tucks under the first (whose 1px bottom border is the single internal divider) — no
   ladder of doubled black lines. */
.rpt-big-numbers + .rpt-big-numbers { border-top: none; margin-top: -16px; }

/* ── LAYER 5 · CARDS ── */
.rpt-card-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.rpt-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rpt-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rpt-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rpt-card {
  border: 1px solid var(--stroke);
  background: var(--surface);
  padding: 14px 12px;
  position: relative;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.rpt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.07); border-color: var(--faint); }
.rpt-card__num   { font-size: var(--fs-card); font-weight: 800; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.rpt-card__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--dark); margin-bottom: 4px; }
.rpt-card__desc  { font-size: 11px; color: var(--light); line-height: 1.4; }

.rpt-card--dark { background: var(--dark); border-color: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num,
.rpt-card--dark .rpt-card__title,
.rpt-card--dark .rpt-card__desc { color: var(--white); }
.rpt-card--warn { border-color: var(--critical); background: var(--critical-bg); }
.rpt-card--warn .rpt-card__num { color: var(--critical); }

/* ── LAYER 6 · COLUMN LAYOUTS ── */
.rpt-two-col   { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-3); }
.rpt-three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-3); }
.rpt-col       { display: flex; flex-direction: column; }
.rpt-col__head { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }
.rpt-col__sub  { font-size: var(--fs-eyebrow); color: var(--light); margin: -2px 0 8px; }
.rpt-section-lbl { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--light); margin: var(--sp-3) 0 var(--sp-2); }
.rpt-section-gap { height: var(--sp-5); }

/* ── LAYER 7 · TABLES ──
   Canonical look from the design SSOT: 2px black header underline, no fill. */
.rpt-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); color: var(--dark); }
.rpt-table th {
  text-align: left;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--mid);
  padding: 8px 10px;
  border-bottom: 2px solid var(--black);
}
.rpt-table td { padding: 9px 14px; border-bottom: 1px solid var(--stroke); font-variant-numeric: tabular-nums; }
.rpt-table tr:last-child td { border-bottom: none; }
.rpt-table--compact th { padding: 6px 8px; }
.rpt-table--compact td { padding: 6px 8px; }
.rpt-table--striped tbody tr:nth-child(even) td { background: var(--surface); }
/* Grouped tables (Project x cost stream): a header row per group, indented member rows, a subtotal
   row. Group rows override the stripe so a block reads as one thing. */
.rpt-table__group td { background: var(--surface) !important; border-top: 2px solid var(--stroke); padding-top: 12px; color: var(--black); }
.rpt-table__subtotal td { background: var(--white) !important; border-bottom: 2px solid var(--stroke); }
.rpt-table__indent { padding-inline-start: 30px !important; }
.rpt-muted { color: var(--light); font-weight: 400; font-size: 0.92em; }

.rpt-row--total td,
.rpt-row-total td { border-top: 2px solid var(--black); font-weight: 700; color: var(--black); }
.rpt-row--warn { background: rgba(122, 0, 18, 0.04); }

/* Right-align helpers — must out-specify `.rpt-table th { text-align:left }` so numeric
   HEADERS line up with their right-aligned cells (not just the cells). */
.rpt-num { text-align: right; }
.rpt-table th.rpt-num, .rpt-table td.rpt-num,
.rpt-table th.right,   .rpt-table td.right { text-align: right; }
.rpt-table th.center, .rpt-table td.center, .rpt-table .center { text-align: center; }

/* ── LAYER 8 · HORIZONTAL BAR CHART ──
   Canonical ranked-bar (HR + CEO). label │ track │ value. */
.rpt-bar-section { width: 100%; margin: 0 0 12px; }
.rpt-bar-section--wide { width: 100%; }
.rpt-bar-list { display: grid; gap: 7px; }
.rpt-bar-row {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr minmax(150px, auto);
  gap: 12px;
  align-items: center;
}
.rpt-bar-row__label { font-size: 11px; color: var(--mid); white-space: normal; line-height: 1.25; }
.rpt-bar-row__track { height: 16px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.rpt-bar-row__fill {
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background: var(--dark);
  transition: width 0.4s ease;
}
.rpt-bar-row__fill--warn { background: var(--critical); }
.rpt-bar-row__value { font-size: 11px; font-weight: 700; text-align: right; color: var(--dark); font-variant-numeric: tabular-nums; }

/* ── LAYER 9 · STACKED BAR + LEGEND (HR salary composition) ── */
.rpt-stacked-chart { margin-bottom: 16px; }
.rpt-stacked-row { display: grid; grid-template-columns: 90px 1fr 100px; gap: 8px; align-items: center; margin-bottom: 6px; }
.rpt-stacked-row__label { font-size: 11px; color: var(--mid); }
.rpt-stacked-row__bar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: var(--surface); }
.rpt-stacked-row__total { font-size: 11px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rpt-stacked-seg { height: 100%; min-width: 1px; transition: width 0.4s ease; }
.rpt-stacked-seg--basic     { background: var(--black); }
.rpt-stacked-seg--housing   { background: var(--mid); }
.rpt-stacked-seg--transport { background: var(--light); }
.rpt-stacked-seg--additions { background: var(--accent); }

.rpt-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.rpt-legend__item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mid); }
.rpt-legend__dot { width: 10px; height: 10px; border-radius: 2px; }
.rpt-legend__dot--basic     { background: var(--black); }
.rpt-legend__dot--housing   { background: var(--mid); }
.rpt-legend__dot--transport { background: var(--light); }
.rpt-legend__dot--additions { background: var(--accent); }

/* ── LAYER 10 · SVG LINE CHART (CEO trends) ── */
.rpt-chart-shell { width: 100%; flex: 1; min-height: 140px; max-height: 160px; margin: 8px 0 10px; }
.rpt-svg { width: 100%; height: 100%; display: block; min-height: 140px; max-height: 160px; }
.rpt-line-area        { fill: rgba(0, 113, 227, 0.14); }
.rpt-line-area--alt   { fill: rgba(0, 0, 0, 0.08); }
.rpt-line-stroke      { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rpt-line-stroke--alt { stroke: var(--black); }
.rpt-chart-axis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.rpt-chart-axis span { font-size: 9px; color: var(--light); text-align: center; white-space: nowrap; }

/* ── LAYER 11 · CALLOUTS + NOTES ── */
.rpt-callout { border: 1px solid var(--stroke); border-left: 3px solid var(--dark); background: var(--surface); border-radius: 4px; padding: 12px 16px; margin: 10px 0; }
.rpt-callout--info { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.rpt-callout__text { font-size: var(--fs-meta); color: var(--mid); line-height: 1.5; }
.rpt-note-list { display: flex; flex-direction: column; gap: 8px; }
.rpt-note-item { padding: 10px 12px; border: 1px solid var(--stroke); border-left: 3px solid var(--accent); background: var(--white); color: var(--dark); font-size: 12px; line-height: 1.45; }

/* Reference badge + [?] verification popup on each report figure */
.rpt-reftip { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle; font-weight: 400; }
.rpt-reftip__id { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; color: var(--mid); background: var(--surface); border: 1px solid var(--stroke); border-radius: 3px; padding: 1px 5px; }
.rpt-reftip__q { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--dark); color: #fff; font-size: 10px; font-weight: 700; cursor: help; user-select: none; }
.rpt-reftip__pop { position: absolute; top: 130%; left: 0; z-index: 60; width: 370px; max-width: 82vw; background: var(--white, #fff); border: 1px solid var(--stroke); border-left: 3px solid var(--dark); border-radius: 6px; box-shadow: 0 8px 26px rgba(0,0,0,0.16); padding: 13px 15px; display: none; flex-direction: column; gap: 3px; text-align: left; white-space: normal; text-transform: none; letter-spacing: normal; font-weight: 400; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.rpt-reftip:hover .rpt-reftip__pop, .rpt-reftip__q:focus + .rpt-reftip__pop { display: flex; }
.rpt-reftip__title { font-size: 12.5px; font-weight: 700; color: var(--dark); margin-bottom: 3px; text-transform: none; letter-spacing: normal; }
.rpt-reftip__lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--mid); margin-top: 4px; }
.rpt-reftip__txt { font-size: 12.5px; line-height: 1.55; color: var(--dark); text-transform: none; letter-spacing: normal; font-weight: 400; }
.rpt-reftip__formula { font-family: 'Consolas', 'SF Mono', 'Menlo', monospace; font-size: 11.5px; line-height: 1.6; white-space: pre-line; background: var(--surface); border: 1px solid var(--stroke); border-radius: 4px; padding: 7px 10px; margin-top: 1px; color: var(--dark); text-transform: none; letter-spacing: normal; }

/* CEO / ops action note shown under a table or chart (Issue → cause → fix → action) */
.rpt-action-note { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--stroke); border-left: 3px solid var(--dark); background: var(--surface); border-radius: 4px; display: flex; flex-direction: column; gap: 7px; }
.rpt-action-note__row { display: grid; grid-template-columns: 168px 1fr; gap: 12px; align-items: baseline; }
.rpt-action-note__label { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mid); }
.rpt-action-note__label--issue { color: var(--danger, #c0152f); }
.rpt-action-note__label--action { color: var(--dark); }
.rpt-action-note__text { font-size: 12px; line-height: 1.5; color: var(--dark); }
@media (max-width: 760px) { .rpt-action-note__row { grid-template-columns: 1fr; gap: 2px; } }

/* ── LAYER 12 · BADGES (status + severity) ── */
.rpt-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.rpt-badge--ready    { background: var(--success-bg); color: var(--success); }
.rpt-badge--partial  { background: var(--pending-bg); color: var(--pending); }
.rpt-badge--medium   { background: var(--accent-soft); color: var(--accent); }
.rpt-badge--low      { background: var(--surface); color: var(--mid); }
.rpt-badge--empty,
.rpt-badge--critical,
.rpt-badge--high     { background: var(--critical-bg); color: var(--critical); }

/* ── LAYER 13 · EMPTY STATES + INLINE HELPERS ── */
.rpt-empty { color: var(--light); font-size: 12px; font-style: italic; padding: 8px 0; }
.rpt-empty-card { border: 1px solid var(--stroke); background: var(--white); padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

.rpt-report-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--stroke); font-size: 10px; color: var(--light); flex-wrap: wrap; }

/* ── Methodology / honest-data notes ── */
.rpt-notes { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.rpt-notes li { font-size: 11.5px; line-height: 1.55; color: var(--mid); margin-bottom: 7px; }
.rpt-notes li strong { color: var(--dark); font-weight: 700; }

.rpt-doc .bold,
.rpt-bold     { font-weight: 700; }
.rpt-positive { color: var(--accent); font-weight: 700; }
.rpt-warn     { color: var(--critical); font-weight: 700; }

/* ── LAYER 14 · RESPONSIVE — three breakpoints: 1280 · 1024 · 760 ── */
@media (max-width: 1280px) {
  .rpt-big-numbers--6,
  .rpt-big-numbers--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rpt-cover__title { font-size: 2.6rem; letter-spacing: -1.4px; }
}
@media (max-width: 1024px) {
  .rpt-big-numbers--4,
  .rpt-big-numbers--5,
  .rpt-big-numbers--6,
  .rpt-big-numbers--8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rpt-card-grid--3,
  .rpt-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-two-col   { grid-template-columns: 1fr; }
  .rpt-bar-row   { grid-template-columns: minmax(130px, 200px) 1fr minmax(120px, auto); }
}
@media (max-width: 760px) {
  .rpt-page { min-height: auto; padding: 20px 16px; }
  .rpt-big-numbers--3,
  .rpt-big-numbers--4,
  .rpt-big-numbers--5,
  .rpt-big-numbers--6,
  .rpt-big-numbers--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-card-grid--2,
  .rpt-card-grid--3,
  .rpt-card-grid--4 { grid-template-columns: 1fr; }
  .rpt-three-col { grid-template-columns: 1fr; }
  .rpt-big-num { border-right: none; border-bottom: 1px solid var(--stroke); }
  .rpt-big-num:last-child { border-bottom: none; }
  .rpt-cover__title { font-size: 2.1rem; }
  .rpt-bar-row { grid-template-columns: minmax(110px, 1fr) 1.3fr minmax(96px, auto); }
  .rpt-bar-row__label, .rpt-bar-row__value { font-size: 10px; }
}

/* ── LAYER 15 · PRINT — A4 landscape, one report page per sheet ── */
@media print {
  .rpt-doc { padding: 0; background: var(--white); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rpt-page { min-height: auto; box-shadow: none; break-after: page; page-break-after: always; page-break-inside: avoid; }
  .rpt-page--last { break-after: auto; page-break-after: auto; }
  .rpt-card:hover { transform: none; box-shadow: none; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* ── LAYER 16 · BLOCKS · CHART KIT · 2-UP GRID · SCROLL TABLES · KPI DELTAS ──
   Every visual = one .rpt-block (small title + sub + body) with a uniform gap.
   Charts are always full-width blocks; only text tables may sit 2-up. */
.rpt-block { margin-bottom: var(--block-gap); }
.rpt-block:last-child { margin-bottom: 0; }
.rpt-block__title { font-size: 14px; font-weight: 700; color: var(--black); letter-spacing: -0.2px; line-height: 1.25; margin-bottom: 3px; }
.rpt-block__sub { font-size: 11.5px; color: var(--light); line-height: 1.45; margin-bottom: 12px; }

/* Chart fills the content width at a wide ~4.3:1 aspect (viewBox 1280×300) so it matches the
   full-width tables/KPIs instead of letterboxing into a small centred block. */
.rpt-chart { width: 100%; height: auto; display: block; }

/* Ranked data table paired under a column chart (RptColumnTable). Clean, print-friendly. */
.rpt-rank { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
.rpt-rank thead th { text-align: start; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mid); border-bottom: 2px solid var(--stroke); padding: 9px 14px; }
.rpt-rank tbody td { padding: 8px 14px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-rank tbody tr:nth-child(even) td { background: #F7F9FC; }
.rpt-rank tfoot td { padding: 9px 14px; border-top: 2px solid #cbd2dc; font-weight: 800; color: var(--black); }
.rpt-rank__n { width: 36px; text-align: right; color: var(--light); font-variant-numeric: tabular-nums; }
.rpt-rank__lbl { }
.rpt-rank__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-rank__sh { width: 76px; text-align: right; color: var(--mid); font-variant-numeric: tabular-nums; }

/* Header alignment MUST match the cell alignment or the caption floats away from its numbers
   (the "VALUE" header sat left while the figures sat right, so they read as different columns). */
.rpt-rank thead th.rpt-rank__val,
.rpt-rank thead th.rpt-rank__sh,
.rpt-rank thead th.rpt-rank__det,
.rpt-rank thead th.rpt-rank__n { text-align: end; }
/* numeric columns share one tabular rhythm so digits line up down the column */
.rpt-rank td, .rpt-rank th { vertical-align: middle; }
@media (max-width: 760px) { .rpt-rank { font-size: 11.5px; } .rpt-rank thead th, .rpt-rank tbody td, .rpt-rank tfoot td { padding: 4px 6px; } }

/* Ranked table scrolls so EVERY row is reachable while the chart stays at the top N.
   Header + footer stay pinned so the column meaning and the grand total are always visible. */
.rpt-rank__scroll {
  max-block-size: 420px; overflow-y: auto; overflow-x: auto;
  border: 1px solid var(--stroke); border-radius: 6px; margin-block-start: 10px;
}
.rpt-rank__scroll:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.rpt-rank__scroll .rpt-rank { margin-block-start: 0; }
.rpt-rank__scroll thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--white); }
.rpt-rank__scroll tfoot td { position: sticky; inset-block-end: 0; z-index: 2; background: var(--white); }
.rpt-rank__note { margin-block-start: 6px; font-size: 11.5px; color: var(--mid); }
.rpt-rank__det { text-align: end; color: var(--mid); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* long labels stay readable: truncate with the full text available on hover via title= */
.rpt-rank__lbl { max-inline-size: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* printing/export must not clip the table */
@media print { .rpt-rank__scroll { max-block-size: none; overflow: visible; border: none; } }

/* ── Download-Excel action (fixed, top-right; hidden on print/export) ── */
.rpt-export-fab {
  position: fixed; top: 84px; right: 30px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--white); background: var(--black); border: none; border-radius: 999px;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.rpt-export-fab:hover { background: var(--success); transform: translateY(-1px); }
.rpt-export-fab:disabled { opacity: 0.7; cursor: default; transform: none; }
.rpt-export-fab__spin {
  width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
  border-radius: 50%; display: inline-block; animation: rpt-spin 0.8s linear infinite;
}
@media (max-width: 760px) { .rpt-export-fab { top: auto; bottom: 18px; right: 18px; } }
@media print { .rpt-export-fab { display: none !important; } }

/* ── Download-Excel — ONE button + macOS-style dropdown (fixed, top-right; hidden on print) ──
   The 33-sheet workbook is split into section files so each build stays under ACA's 240s cap;
   the button locks to "Preparing…" while one runs so two heavy builds never contend on api-dwh. */
.rpt-export { position: fixed; top: 84px; right: 30px; z-index: 50; }
.rpt-export .rpt-export-fab { position: relative; top: auto; right: auto; }
.rpt-export-fab__caret { font-size: 13px; line-height: 1; opacity: 0.9; transition: transform 0.2s ease; }
.rpt-export-fab__caret.is-open { transform: rotate(180deg); }

.rpt-export-backdrop { position: fixed; inset: 0; z-index: 49; background: transparent; }

.rpt-export-dd {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 51; min-width: 260px;
  padding: 6px; border-radius: 16px;
  background: rgba(250, 250, 252, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border: 0.5px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.10);
  transform-origin: top right; animation: rpt-dd-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rpt-dd-in { from { opacity: 0; transform: scale(0.96) translateY(-6px); } to { opacity: 1; transform: none; } }
.rpt-export-dd__hd {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: #86868b; padding: 8px 12px 6px;
}
.rpt-export-dd__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: none; background: transparent; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #1d1d1f; cursor: pointer;
  transition: background-color 0.12s ease;
}
.rpt-export-dd__item:hover, .rpt-export-dd__item:focus-visible {
  background: #007aff; color: #fff; outline: none;
}
.rpt-export-dd__item:hover .rpt-export-dd__hint, .rpt-export-dd__item:focus-visible .rpt-export-dd__hint { color: rgba(255, 255, 255, 0.72); }
.rpt-export-dd__item:hover .rpt-export-dd__dot, .rpt-export-dd__item:focus-visible .rpt-export-dd__dot { background: #fff; }
.rpt-export-dd__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--navy, #1b3a6b); flex: none; }
.rpt-export-dd__label { flex: 1; }
.rpt-export-dd__hint { font-size: 11px; font-weight: 600; color: #a1a1a6; }
.rpt-export-dd__ft {
  font-size: 11px; color: #86868b; line-height: 1.35; padding: 8px 12px 6px; margin-top: 4px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}
.rpt-export-err {
  position: absolute; top: calc(100% + 10px); right: 0; width: 260px;
  padding: 10px 12px; border-radius: 12px; background: #fdecec; color: #a01818;
  border: 1px solid #f5c2c2; font-weight: 600; font-size: 12px; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
@media (max-width: 760px) {
  .rpt-export { top: auto; bottom: 18px; right: 18px; }
  .rpt-export-dd { top: auto; bottom: calc(100% + 10px); transform-origin: bottom right; }
}
@media print { .rpt-export { display: none !important; } }

.rpt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--block-gap); }

.rpt-scroll { max-height: 320px; overflow-y: auto; }
.rpt-scroll .rpt-table thead th { position: sticky; top: 0; background: var(--white); z-index: 1; }
.rpt-table-note { font-size: 10px; color: var(--light); margin-top: 6px; }

.rpt-big-num__delta { font-size: 11px; color: var(--mid); margin-top: 3px; font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  .rpt-grid-2 { grid-template-columns: 1fr; }
}
@media print {
  .rpt-scroll { max-height: none; overflow: visible; }
}

/* ── LAYER 17 · HOVER EXPLAINERS — plain-English tooltip on any KPI (data-tip) ── */
.rpt-big-num[data-tip] { cursor: help; }
/* native-title hover explainers on cells and chart SVG points */
.rpt-table td[title], .rpt-chart [title] { cursor: help; }
/* headers are click-to-sort (pointer) AND carry a hover explainer (dotted underline) */
.rpt-table thead th { cursor: pointer; user-select: none; }
.rpt-table th[title] { text-decoration: underline dotted rgba(0,0,0,0.28); text-underline-offset: 3px; }
.rpt-sort-mark { color: var(--accent); font-size: 0.82em; font-weight: 700; }

/* per-table filter box (inserted above long tables) + reused by inline pickers */
.rpt-table-search {
  width: 220px; max-width: 100%; padding: 7px 11px; border: 1px solid var(--stroke);
  border-radius: 8px; font-size: 12px; font-family: inherit; color: var(--dark); background: var(--white);
}
.rpt-table-search:focus { outline: none; border-color: var(--accent); }
.rpt-table-filter { display: block; margin: 0 0 var(--sp-2); }
.rpt-big-num[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%);
  width: 220px;
  background: #111;
  color: #fff;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}
.rpt-big-num[data-tip]:hover::after { opacity: 1; }

.rpt-note-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 1024px) { .rpt-note-list--2col { grid-template-columns: 1fr; } }
@media print { .rpt-big-num[data-tip]::after { display: none; } }

/* ── LAYER · ITEM EXPLORER (Logistics rent sections) ────────────────────────
   Interactive item column chart with a rich hover card (order frequency &
   timing + top projects and cost). Used by Charts/RptItemExplorer.razor. */
.rpt-ie-chart {
  display: flex; align-items: flex-end; gap: 16px;
  height: 300px; padding: 34px 10px 48px; margin: 8px 0 2px;
  position: relative; overflow: visible; border-bottom: 1px solid #cbd2dc;
}
.rpt-ie-col {
  flex: 1 1 0; min-width: 44px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  position: relative;
}
/* Matches the 21px value labels on the dashboard/column charts, but clamped: this chart packs up
   to 12 columns into one row, so a fixed 21px would bleed into its neighbour once the viewport
   narrows. Full size on a normal desktop, graceful below that. */
.rpt-ie-colval { font: 700 clamp(13px, 1.35vw, 21px)/1 Inter, system-ui, sans-serif; color: #1F3A68; margin-bottom: 5px; white-space: nowrap; }
.rpt-ie-bar { width: 100%; max-width: 84px; min-height: 3px; border-radius: 4px 4px 0 0; transition: filter .12s ease; }
.rpt-ie-col:hover .rpt-ie-bar { filter: brightness(1.08); }
.rpt-ie-collbl {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px;
  font: 600 11.5px/1.2 Inter, system-ui, sans-serif; color: #4b5563;
  white-space: nowrap; text-align: center; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.rpt-ie-tip {
  position: absolute; left: 50%; bottom: calc(100% + 11px); transform: translateX(-50%);
  width: 306px; background: #fff; color: #1F2937;
  border: 1px solid #d5dbe4; border-radius: 10px; box-shadow: 0 14px 34px rgba(15,32,64,.22);
  padding: 12px 13px; text-align: left; z-index: 40;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .14s ease;
}
.rpt-ie-col:hover .rpt-ie-tip { opacity: 1; visibility: visible; }
.rpt-ie-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #fff; filter: drop-shadow(0 1px 0 #d5dbe4);
}
.rpt-ie-tip__hd { font: 800 13px/1.2 Inter, system-ui, sans-serif; color: #1F3A68; }
.rpt-ie-tip__nm { font: 500 11.5px/1.35 Inter, system-ui, sans-serif; color: #6b7280; margin: 2px 0 8px; }
.rpt-ie-tip__hd--solo { margin-bottom: 8px; }   /* no subtitle beneath it to space the stats */
.rpt-ie-tip__stat { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; }
.rpt-ie-tip__stat span { color: #6b7280; }
.rpt-ie-tip__stat b { color: #111827; font-weight: 700; white-space: nowrap; }
.rpt-ie-tip__sub { margin: 9px 0 4px; padding-top: 7px; border-top: 1px solid #eef1f5; font: 700 10.5px/1 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #2E75B6; }
.rpt-ie-tip__tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.rpt-ie-tip__tbl td { padding: 2px 0; vertical-align: top; }
.rpt-ie-tip__tbl td:last-child { text-align: right; font-weight: 700; color: #1F3A68; white-space: nowrap; padding-left: 10px; }
/* BREAKDOWN ROWS ("top 3 sites this month") carry a long site name beside a two-part value
   such as "125,033 L · 207.5K". Under the default auto layout the name wrapped to a second
   line and every value stepped in and out, so the numbers never formed a column. Fixed layout
   with a reserved value column keeps each row to ONE line and ellipsises the name instead, so
   the values line up dead straight down the right edge. */
.rpt-ie-tip__tbl--note { table-layout: fixed; }
.rpt-ie-tip__tbl--note td { vertical-align: baseline; }
.rpt-ie-tip__tbl--note td:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px;
}
.rpt-ie-tip__tbl--note td:last-child { width: 124px; padding-left: 0; }
.rpt-ie-tip__more { margin-top: 5px; font-size: 11px; color: #9aa3af; font-style: italic; }
@media (max-width: 1024px) { .rpt-ie-tip { width: 244px; } }
@media print { .rpt-ie-tip { display: none; } }

/* keep the first/last item's hover-card from clipping off the chart edges */
.rpt-ie-col:first-child .rpt-ie-tip { left: 0; right: auto; transform: none; }
.rpt-ie-col:first-child .rpt-ie-tip::after { left: 34px; }
.rpt-ie-col:last-child  .rpt-ie-tip { left: auto; right: 0; transform: none; }
.rpt-ie-col:last-child  .rpt-ie-tip::after { left: auto; right: 34px; transform: none; }
.rpt-ie-collbl { font-size: 10.5px; }


/* ── LAYER · COLUMN-CHART HOVER CARD (RptColumnTable) ───────────────────────
   The SVG carries a fixed viewBox and is laid out width:100% / height:auto, so its rendered box
   and this overlay box are the same rectangle. That lets each bar's hot-zone be positioned in
   PERCENTAGES of the viewBox with no JS and no measurement — the card tracks the bar at every
   viewport width. Cards reuse the .rpt-ie-tip look so both chart kits speak one visual language. */
.rpt-cw { position: relative; }
.rpt-cw__hot { position: absolute; z-index: 5; }
.rpt-cw__hot .rpt-ie-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
}
.rpt-cw__hot:hover .rpt-ie-tip,
.rpt-cw__hot:focus-within .rpt-ie-tip { opacity: 1; visibility: visible; }
/* Tall bar: its top is near the chart top, so a card floating above would run off the edge.
   Hang it downward over the plot instead — a tall bar always has room below its own top. */
.rpt-cw__hot--tall .rpt-ie-tip { bottom: auto; top: 6px; }
.rpt-cw__hot--tall .rpt-ie-tip::after {
  top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff;
  filter: drop-shadow(0 -1px 0 #d5dbe4);
}
/* first/last column: pull the card inboard so it can't clip off the chart edge */
.rpt-cw__hot--first .rpt-ie-tip { left: 0; transform: none; }
.rpt-cw__hot--first .rpt-ie-tip::after { left: 34px; transform: none; }
.rpt-cw__hot--last  .rpt-ie-tip { left: auto; right: 0; transform: none; }
.rpt-cw__hot--last  .rpt-ie-tip::after { left: auto; right: 34px; transform: none; }
@media print { .rpt-cw__hot { display: none; } }

/* Paired-bar legend — shown when a chart draws net and VAT-inclusive side by side. */
.rpt-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 2px 0 6px; }
.rpt-legend__k { display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--mid); }
.rpt-legend__k i { inline-size: 11px; block-size: 11px; border-radius: 2px; display: inline-block; }
@media print { .rpt-legend { break-inside: avoid; } }

/* ── LAYER · TABLE SEARCH (RptColumnTable) ──────────────────────────────────
   Sits above the chart because it narrows the chart AND the table together. */
.rpt-tsearch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 2px 0 10px; padding: 7px 10px;
  border: 1px solid var(--stroke); border-radius: 8px; background: var(--surface);
}
.rpt-tsearch__lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mid); }
.rpt-tsearch__input { flex: 1 1 220px; max-inline-size: 380px;
  padding: 5px 10px; border: 1px solid var(--faint); border-radius: 6px;
  font: inherit; font-size: 12.5px; }
.rpt-tsearch__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rpt-tsearch__count { font-size: 11.5px; color: var(--light); font-variant-numeric: tabular-nums; }
.rpt-tsearch__clear { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 11.5px; }
@media print { .rpt-tsearch { display: none; } }

/* ERP code column — monospaced-ish tabular so codes scan vertically */
.rpt-rank__code { inline-size: 132px; white-space: nowrap; color: var(--mid);
  font-variant-numeric: tabular-nums; font-weight: 600; }
.rpt-rank thead th.rpt-rank__code { text-align: start; }


/* ── Inline section filter (equipment category + asset search, shown in each asset section) ── */
.rpt-inline-filter { margin: 2px 0 12px; padding: 10px 12px; border: 1px solid var(--stroke);
  border-radius: 8px; background: var(--surface); }
.rpt-inline-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rpt-inline-filter__row + .rpt-inline-filter__row { margin-block-start: 8px; }
.rpt-inline-filter__lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mid); margin-inline-end: 4px; min-inline-size: 130px; }
.rpt-inline-filter__hint { font-size: 11.5px; color: var(--light); font-style: italic; }
.rpt-inline-filter__clear { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 11.5px; }
.rpt-inline-filter__input { padding: 5px 10px; border: 1px solid var(--faint); border-radius: 6px;
  font: inherit; font-size: 12.5px; min-inline-size: 200px; }
.rpt-chip { padding: 4px 10px; border: 1px solid var(--faint); background: var(--white);
  color: var(--dark); border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rpt-chip:hover { border-color: var(--mid); }
.rpt-chip--on { background: var(--black); border-color: var(--black); color: var(--white); }
.rpt-chip:focus-visible, .rpt-inline-filter__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { .rpt-inline-filter { display: none; } }

/* ── RptPickList (Aug 2026) ────────────────────────────────────────────────────
   One filter control everywhere: searchable, multi-select, chips for what is picked.
   Picks accumulate in the panel and are applied once, so ticking five projects is one
   server round-trip and not five. */
.rpt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rpt-pick__lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mid); margin-inline-end: 4px; min-inline-size: 130px; }
.rpt-pick__box { position: relative; }
.rpt-pick__toggle { display: inline-flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 10px; border: 1px solid var(--faint); border-radius: 6px;
  background: var(--white); color: var(--dark); font: inherit; font-size: 12.5px;
  min-inline-size: 260px; max-inline-size: 420px; cursor: pointer; text-align: start; }
.rpt-pick__toggle:hover { border-color: var(--mid); }
.rpt-pick__toggle--open { border-color: var(--accent); }
.rpt-pick__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rpt-pick__toggle-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-pick__caret { color: var(--mid); font-size: 10px; }
.rpt-pick__backdrop { position: fixed; inset: 0; z-index: 40; }
.rpt-pick__panel { position: absolute; z-index: 41; inset-block-start: calc(100% + 4px);
  inset-inline-start: 0; min-inline-size: 340px; max-inline-size: 460px;
  background: var(--white); border: 1px solid var(--faint); border-radius: 8px;
  box-shadow: 0 10px 28px -12px rgba(20,28,40,.35); padding: 8px; }
.rpt-pick__search { inline-size: 100%; padding: 6px 10px; border: 1px solid var(--faint);
  border-radius: 6px; font: inherit; font-size: 12.5px; margin-block-end: 6px; }
.rpt-pick__search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rpt-pick__list { max-block-size: 260px; overflow-y: auto; }
.rpt-pick__opt { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px;
  border-radius: 5px; font-size: 12.5px; color: var(--dark); cursor: pointer; }
.rpt-pick__opt:hover { background: var(--surface); }
.rpt-pick__opt--on { background: var(--surface); font-weight: 600; }
.rpt-pick__opt input { margin-block-start: 2px; flex: none; cursor: pointer; }
.rpt-pick__opt-txt { overflow-wrap: anywhere; }
.rpt-pick__none { padding: 10px 6px; font-size: 12px; color: var(--light); font-style: italic; }
.rpt-pick__foot { display: flex; align-items: center; gap: 10px; padding-block-start: 8px;
  margin-block-start: 6px; border-block-start: 1px solid var(--faint); }
.rpt-pick__count { font-size: 11.5px; color: var(--mid); margin-inline-end: auto; }
.rpt-pick__apply { padding: 5px 14px; border: 1px solid var(--black); background: var(--black);
  color: var(--white); border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; }
.rpt-pick__apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rpt-pick__hint { font-size: 11.5px; color: var(--light); font-style: italic; }
.rpt-pick__clear { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 11.5px; }
.rpt-pick__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rpt-pick__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  inline-size: 100%; margin-block-start: 2px; }
.rpt-pick__chip { display: inline-flex; align-items: center; gap: 6px; }
.rpt-pick__x { font-size: 14px; line-height: 1; opacity: .75; }
.rpt-pick__chip:hover .rpt-pick__x { opacity: 1; }
@media print { .rpt-pick { display: none; } }

/* A hand-built table long enough to need it scrolls in place with a sticky header,
   the same way RptColumnTable's does, so a section never runs to hundreds of rows. */
.rpt-scroll-tall { max-height: 460px; overflow-y: auto; }
/* Exactly ten body rows before it scrolls: header 40 + 10 x 40. One table, one header,
   the top ten above the fold and the remainder inside the same grid. */
.rpt-scroll-10 { max-height: 440px; overflow-y: auto; }
.rpt-scroll-10 .rpt-table thead th { position: sticky; top: 0; background: var(--white); z-index: 1; }
.rpt-mono { font-variant-numeric: tabular-nums; font-size: .95em; white-space: nowrap; }
@media print { .rpt-scroll-10 { max-height: none; overflow: visible; } }
.rpt-scroll-tall .rpt-table thead th { position: sticky; top: 0; background: var(--white); z-index: 1; }
@media print { .rpt-scroll-tall { max-height: none; overflow: visible; } }


/* ── Column alignment (Aug 2026) ───────────────────────────────────────────────
   Numeric columns right-align in BOTH the header and the cell so the figures sit
   exactly under their heading; text columns start-align in both. The Detail column
   was end-aligned in the header while holding NAMES (locations, sub-categories),
   which is what made "Acq. value (SAR)" and its neighbours look off their heading. */
.rpt-rank thead th.rpt-rank__det { text-align: start; }
.rpt-rank__det { text-align: start; }


/* Rows the report has flagged as wrong data — reads as an alert without relying on
   colour alone: a red left rule and red type, plus the reason in the row itself. */
.rpt-rank tbody tr.rpt-rank--flag td { background: #FDF2F2; color: #9B1C1C; font-weight: 700; }
.rpt-rank tbody tr.rpt-rank--flag td:first-child { box-shadow: inset 3px 0 0 0 #DC2626; }
.rpt-rank tbody tr.rpt-rank--flag:nth-child(even) td { background: #FBE9E9; }


/* ── RptColumnTable Editable mode: remove a row, restore it, one click each ─────────────────
   The strip above the chart holds restorable chips (reuses .rpt-pick__chip so it matches every
   other "picked item" chip on the page); the × lives in its own narrow last column so it never
   competes with the numbers for attention until a reader actually reaches for it. */
.rpt-rank__edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-block-end: 8px; font-size: 12px; }
.rpt-rank__edit-lbl { color: var(--mid); }
.rpt-rank__restore { cursor: pointer; }
.rpt-rank__restore .rpt-pick__x { color: #1a7f37; font-weight: 700; }
/* Same size/shape as a real chip (padding, border-radius) but dashed and unfilled, so it reads as
   "a control goes here, currently empty" rather than disappearing into the sentence beside it. */
.rpt-rank__add-slot { display: inline-flex; align-items: center; padding: 4px 10px;
  border: 1px dashed var(--mid); border-radius: 999px; color: var(--mid); font-weight: 600; }
.rpt-rank__rm-h { width: 30px; }
.rpt-rank__rm { width: 30px; text-align: center; padding-inline: 4px !important; }
/* ALWAYS VISIBLE, not hover-to-reveal: a control nobody can see is a control nobody finds. It was
   opacity:0-until-hover at first, which made "remove" undiscoverable in the first place — and
   with nothing ever removed, there was never anything to add back either. Muted grey at rest,
   red on hover/focus so intent still reads clearly before a click. */
.rpt-rank__rm-btn { inline-size: 22px; block-size: 22px; border-radius: 999px; border: 1px solid var(--stroke);
  background: var(--white); color: var(--mid); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .1s ease, color .1s ease, border-color .1s ease; }
.rpt-rank__rm-btn:hover { background: #FDF2F2; border-color: #f3c6c6; color: #9B1C1C; }
.rpt-rank__rm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media print { .rpt-rank__edit, .rpt-rank__rm-h, .rpt-rank__rm { display: none; } }

/* ── RptColumnTable Editable mode: ADD (Sep 2026) ────────────────────────────────────────────
   A second, genuinely open search sits beside the restore strip: AddUniverse is every code
   related to this table (see Reporting.Logistics_CodeUniverse), not just the ones this specific
   table already had. Reuses RptPickList's panel/search/list/foot classes so it looks like every
   other dropdown on the page; only the option row becomes a plain button — a pick here adds
   immediately, it is not accumulated behind an Apply button the way a filter's picks are. */
.rpt-rank__addbox { position: relative; }
.rpt-rank__addbtn { display: inline-flex; align-items: center; gap: 5px;
  border-color: var(--accent); color: var(--accent); }
.rpt-rank__addbtn span:first-child { font-size: 14px; font-weight: 800; line-height: 1; }
.rpt-rank__addbtn:hover, .rpt-rank__addbtn--open { background: var(--black); border-color: var(--black); color: var(--white); }
.rpt-rank__addpanel { inset-inline-start: 0; min-inline-size: 320px; }
.rpt-rank__addopt { inline-size: 100%; justify-content: space-between; border: none; background: none; margin: 0; font: inherit; text-align: start; }
.rpt-rank__addopt-plus { flex: none; color: var(--mid); font-weight: 700; opacity: 0; }
.rpt-rank__addopt:hover .rpt-rank__addopt-plus, .rpt-rank__addopt:focus-visible .rpt-rank__addopt-plus { opacity: 1; color: #1a7f37; }
.rpt-rank__addopt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* RptItemExplorer has no per-row remove — the only way an ADDED code goes away is its own chip,
   so unlike the restore strip's green +, this × reads red-on-hover like a real delete. */
.rpt-rank__added { cursor: pointer; }
.rpt-rank__added .rpt-pick__x { color: var(--mid); font-weight: 700; }
.rpt-rank__added:hover .rpt-pick__x, .rpt-rank__added:focus-visible .rpt-pick__x { color: #9B1C1C; }


/* ── Numeric columns sit CENTRED under their heading (team decision, Aug 2026) ──────────────
   A heading like "TRANSACTIONS" is far wider than the "168" underneath it, so right-aligning
   the figure parked it against the column's right edge while the heading spanned the whole
   width — which reads as the data not belonging to the header above it. Centring both puts
   the figure directly under the middle of its own heading. `tabular-nums` (already set on
   these cells) keeps the digits themselves evenly spaced so columns of numbers stay scannable. */
.rpt-rank thead th.rpt-rank__val,
.rpt-rank thead th.rpt-rank__sh,
.rpt-rank thead th.rpt-rank__n,
.rpt-rank tbody td.rpt-rank__val,
.rpt-rank tbody td.rpt-rank__sh,
.rpt-rank tbody td.rpt-rank__n,
.rpt-rank tfoot  td.rpt-rank__val,
.rpt-rank tfoot  td.rpt-rank__sh,
.rpt-rank tfoot  td.rpt-rank__n   { text-align: center; }
.rpt-table thead th.rpt-num,
.rpt-table tbody td.rpt-num,
.rpt-table tfoot  td.rpt-num      { text-align: center; }

/* ── Breathing room inside each chart+table block ───────────────────────────────────────── */
.rpt-block__title { margin-bottom: 4px; }
.rpt-block__sub   { margin-bottom: 14px; }
/* the rotated category labels run well below the plot, so the table needs clear separation */
.rpt-cw           { margin-bottom: 18px; }
.rpt-rank__scroll { margin-top: 6px; }
/* the search bar above a chart should not hug the chart */
.rpt-tsearch      { margin-bottom: 14px; }
/* filter chips block above a table */
.rpt-inline-filter { margin-bottom: 16px; }

/* ── Executive dashboard (Aug 2026) ────────────────────────────────────────────
   One screen over the whole report: KPI strip, donut with its own legend, monthly
   trend, three panels and a stat rail. The layout follows the reference the business
   supplied; the palette is this report's own, so the dashboard and the sections below
   it are visibly the same document. Every figure is read from a section — no new
   arithmetic — so the two can never disagree. */
.rpt-dash { border: 1px solid var(--faint); border-radius: 10px; background: var(--surface);
  padding: 16px; margin-block: 18px 8px; }
.rpt-dash__head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-block-end: 14px; }
.rpt-dash__title { font-size: 19px; font-weight: 700; color: var(--black); letter-spacing: -.01em; }
.rpt-dash__sub { font-size: 12px; color: var(--mid); margin-block-start: 2px; }
.rpt-dash__period { font-size: 12px; font-weight: 700; color: var(--white);
  background: var(--black); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }

.rpt-dash__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-block-end: 12px; }
.rpt-dash__kpi { background: var(--white); border: 1px solid var(--faint); border-radius: 8px;
  padding: 12px 14px; }
.rpt-dash__kpi-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mid); }
.rpt-dash__kpi-val { font-size: 22px; font-weight: 700; color: var(--accent);
  letter-spacing: -.015em; margin-block-start: 4px; font-variant-numeric: tabular-nums; }
.rpt-dash__kpi-val--warn { color: #C0152F; }
.rpt-dash__kpi-foot { font-size: 11px; color: var(--mid); margin-block-start: 3px; }

.rpt-dash__row { display: grid; gap: 10px; margin-block-end: 12px; }
.rpt-dash__row--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rpt-dash__row--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rpt-dash__row--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rpt-dash__card { background: var(--white); border: 1px solid var(--faint); border-radius: 8px;
  padding: 12px 14px; min-inline-size: 0; }
.rpt-dash__card-t { font-size: 13px; font-weight: 700; color: var(--black); margin-block-end: 8px; }
.rpt-dash__split { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.1fr);
  gap: 10px; align-items: center; }
.rpt-dash__legend { display: flex; flex-direction: column; gap: 3px; }
.rpt-dash__leg { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 7px;
  align-items: center; font-size: 11.5px; }
.rpt-dash__dot { inline-size: 9px; block-size: 9px; border-radius: 2px; }
.rpt-dash__leg-n { color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-dash__leg-v { color: var(--black); font-weight: 600; font-variant-numeric: tabular-nums; }
.rpt-dash__leg-s { color: var(--mid); font-variant-numeric: tabular-nums; min-inline-size: 38px;
  text-align: end; }

/* EVERY ROW SHARES ONE GRID. Each .rpt-dash__bar used to be its own grid container, so the
   label / track / value columns were sized per ROW — the bars started at a different x on
   every line and the figures did not form a column. The wrapper owns the grid now and each
   row is display:contents, which lifts its three spans into the parent so all rows share the
   same three columns and line up exactly. */
.rpt-dash__bars { display: grid; grid-template-columns: minmax(84px, 1.25fr) minmax(60px, 2fr) auto;
  gap: 3px 8px; align-items: center; }
.rpt-dash__bars .rpt-dash__bar { display: contents; }
.rpt-dash__bar { display: grid; grid-template-columns: minmax(84px, 1.25fr) minmax(60px, 2fr) auto;
  gap: 8px; align-items: center; padding-block: 3px; font-size: 11.5px; }
.rpt-dash__bars .rpt-dash__bar-n,
.rpt-dash__bars .rpt-dash__bar-t,
.rpt-dash__bars .rpt-dash__bar-v { font-size: 11.5px; padding-block: 3px; }
/* the value column is a mini-grid of its own so the figure and its share also line up */
.rpt-dash__bar-v { display: grid; grid-template-columns: auto auto; gap: 6px;
  justify-content: end; align-items: baseline; }
.rpt-dash__bar-n { color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-dash__bar-t { block-size: 10px; background: var(--surface); border-radius: 2px; overflow: hidden; }
.rpt-dash__bar-f { display: block; block-size: 100%; background: var(--accent); }
.rpt-dash__bar-f--alt { background: #2E9E9E; }
.rpt-dash__bar-f--warn { background: #C0152F; }
.rpt-dash__bar-v { color: var(--black); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.rpt-dash__bar-s { color: var(--mid); font-weight: 500; margin-inline-start: 5px; }
.rpt-dash__note { font-size: 10.5px; color: var(--light); font-style: italic;
  margin-block-start: 6px; }

.rpt-dash__stat { background: var(--white); border: 1px solid var(--faint); border-radius: 8px;
  padding: 12px 14px; }
.rpt-dash__stat-v { font-size: 18px; font-weight: 700; color: var(--black);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rpt-dash__stat-u { font-size: .55em; font-weight: 600; color: var(--mid); }
.rpt-dash__stat-l { font-size: 11px; color: var(--mid); margin-block-start: 3px; }

/* The report-wide chart shell is capped at 160px so a page of twenty charts stays readable.
   On the dashboard there are only a handful and they are the whole point, so they get room. */
.rpt-dash__card--tall .rpt-chart-shell,
.rpt-dash__card--tall .rpt-svg { min-block-size: 230px; max-block-size: 260px; }
.rpt-dash__card--tall { display: flex; flex-direction: column; }

@media (max-width: 620px) {
  .rpt-dash__split { grid-template-columns: 1fr; }
  .rpt-dash__head { flex-direction: column; }
  .rpt-dash__card--tall .rpt-chart-shell,
  .rpt-dash__card--tall .rpt-svg { min-block-size: 190px; max-block-size: 210px; }
}