/* ============================================================================
   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); }

.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;
}
.rpt-ie-colval { font: 700 13px/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__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; }
.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; } }


/* ── 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; }


/* ── 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; }