/* ======================================================================
   REVIBE brand tokens (from the cloud Design System).
   Primary = Repurple #5019A0 -> Repink #C82D8C gradient. Warm-cool "ink"
   neutrals on paper. Purple-tinted layered shadows, pill controls.
   Existing semantic var NAMES kept so the rest of the CSS is untouched.
   ====================================================================== */
:root {
  --bg: #FAF8FC;          /* paper-2 */
  --bg-card: #FFFFFF;     /* paper */
  --text-main: #0E0A1A;   /* ink */
  --text-muted: #5A5266;  /* ink-3 */
  --text-light: #8A8194;  /* ink-4 */
  --border: #E6E2EC;      /* line */

  /* Brand */
  --primary: #5019A0;         /* repurple */
  --primary-dark: #320F69;    /* repurple-dark */
  --primary-light: #F2EEF7;   /* paper-3 tint (light chip bg) */
  --accent: #C82D8C;          /* repink */
  --brand-grad: linear-gradient(90deg, #5019A0 0%, #C82D8C 100%);
  --brand-grad-d: linear-gradient(135deg, #5019A0 0%, #C82D8C 100%);

  /* Semantic accents (tertiaries from the brand palette) */
  --success: #0E7C5E;      /* regreen */
  --success-light: #DCF3EC;
  --warning: #A07819;      /* regold */
  --warning-light: #F6EEDA;
  --danger: #D92D20;       /* functional red — kept clearly red for alerts */
  --danger-light: #FDE7E5;
  --info: #2DC8A4;         /* reaqua */
  --info-light: #E3F8F2;

  --shadow-sm: 0 1px 2px rgba(14,10,26,0.05), 0 1px 1px rgba(14,10,26,0.03);
  --shadow: 0 4px 12px rgba(14,10,26,0.06), 0 2px 4px rgba(14,10,26,0.04);
  --shadow-lg: 0 12px 32px rgba(80,25,160,0.18), 0 4px 12px rgba(14,10,26,0.06);
  --shadow-brand: 0 8px 24px rgba(80,25,160,0.32);
  --radius: 14px;          /* r-md */
  --radius-pill: 999px;
  --transition: all 0.2s cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* Dark Mode Variables — deep repurple-tinted ink */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #140B24;
    --bg-card: #1E1433;
    --text-main: #F6F2FC;
    --text-muted: #B3A8C6;
    --text-light: #7E7392;
    --border: #322747;

    --primary: #9B6BE0;
    --primary-dark: #7541BA;
    --primary-light: #2A1B4A;
    --accent: #DC4BAA;
    --brand-grad: linear-gradient(90deg, #7541BA 0%, #DC4BAA 100%);
    --brand-grad-d: linear-gradient(135deg, #7541BA 0%, #DC4BAA 100%);
    --success: #2DC8A4;
    --success-light: #0C3B30;
    --warning: #D4A537;
    --warning-light: #4A360E;
    --danger: #F4675C;
    --danger-light: #4A1512;
    --info: #2DC8A4;
    --info-light: #0C3B30;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow: 0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
    --shadow-brand: 0 8px 24px rgba(155,107,224,0.28);
  }
}


/* Explicit theme override (js/theme.js) — attribute wins over the media query */
:root { --chart-axis: #E6E2EC; --chart-label: #8A8194; --chart-grid: rgba(138,129,148,0.16); }
:root[data-theme="light"] {
    --bg: #FAF8FC;
    --bg-card: #FFFFFF;
    --text-main: #0E0A1A;
    --text-muted: #5A5266;
    --text-light: #8A8194;
    --border: #E6E2EC;
    --primary: #5019A0;
    --primary-dark: #320F69;
    --primary-light: #F2EEF7;
    --accent: #C82D8C;
    --brand-grad: linear-gradient(90deg, #5019A0 0%, #C82D8C 100%);
    --brand-grad-d: linear-gradient(135deg, #5019A0 0%, #C82D8C 100%);
    --success: #0E7C5E;
    --success-light: #DCF3EC;
    --warning: #A07819;
    --warning-light: #F6EEDA;
    --danger: #D92D20;
    --danger-light: #FDE7E5;
    --info: #2DC8A4;
    --info-light: #E3F8F2;
    --chart-axis: #E6E2EC;
    --chart-label: #8A8194;
    --chart-grid: rgba(138,129,148,0.16);
    --shadow-sm: 0 1px 2px rgba(14,10,26,0.05), 0 1px 1px rgba(14,10,26,0.03);
    --shadow: 0 4px 12px rgba(14,10,26,0.06), 0 2px 4px rgba(14,10,26,0.04);
    --shadow-lg: 0 12px 32px rgba(80,25,160,0.18), 0 4px 12px rgba(14,10,26,0.06);
    --shadow-brand: 0 8px 24px rgba(80,25,160,0.32);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #140B24;
    --bg-card: #1E1433;
    --text-main: #F6F2FC;
    --text-muted: #B3A8C6;
    --text-light: #7E7392;
    --border: #322747;
    --primary: #9B6BE0;
    --primary-dark: #7541BA;
    --primary-light: #2A1B4A;
    --accent: #DC4BAA;
    --brand-grad: linear-gradient(90deg, #7541BA 0%, #DC4BAA 100%);
    --brand-grad-d: linear-gradient(135deg, #7541BA 0%, #DC4BAA 100%);
    --success: #2DC8A4;
    --success-light: #0C3B30;
    --warning: #D4A537;
    --warning-light: #4A360E;
    --danger: #F4675C;
    --danger-light: #4A1512;
    --info: #2DC8A4;
    --info-light: #0C3B30;
    --chart-axis: #322747;
    --chart-label: #B3A8C6;
    --chart-grid: rgba(179,168,198,0.13);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow: 0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
    --shadow-brand: 0 8px 24px rgba(155,107,224,0.28);
}
body, .metric-card, .card-section, .kpi-card, .tbl-premium, .tab-nav {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.5;
  padding: 24px;
  transition: background-color 0.3s ease;
}

.page {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Header & Controls */
.header-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 8px;
}

.title-section h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  /* signature Repurple -> Repink gradient wordmark */
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.title-section p {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.controls-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.date-picker-group {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
/* hide via a class so inline display (e.g. #range-presets inline-flex) survives */
.filter-hidden { display: none !important; }

/* Date range controls: hidden until the "date range" checkbox is ticked. A class rather
   than inline styles, so _applyFilterScope() can still hide them per tab without the two
   mechanisms fighting — and so the presets keep the inline-flex they need when shown. */
.date-ctl { display: none; }
.date-picker-group.dates-on .date-ctl { display: inline-flex; }
.date-picker-group.dates-on span.date-ctl { display: inline-flex; }
.date-picker-group.dates-on label.date-ctl { display: inline-flex; }
.date-picker-group.dates-on input.date-ctl { display: inline-block; }
/* Apply Filters sits outside .date-picker-group, so it needs its own rule. */
.controls-section.dates-on .date-ctl { display: inline-flex; }
/* hairline separators so presets | dates | compare | country read as groups */
.date-picker-group > #range-presets { padding-right: 10px; border-right: 1px solid var(--border); }
.date-picker-group > label[for="compare-toggle"] { padding-left: 10px; border-left: 1px solid var(--border); }
.date-picker-group > #claim-country { padding-left: 10px; border-left: 1px solid var(--border); }
/* the active preset should read as selected, like the tab pills */
.preset-btn.active { background: var(--primary); color: #fff; border-color: transparent; }

.date-picker-group label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-light);
  text-transform: uppercase;
}

.date-input {
  border: none;
  background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-main);
  outline: none;
}

.btn-primary {
  background: var(--brand-grad);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: var(--transition);
}

.btn-primary:hover {
  filter: brightness(1.06);
}

/* Navigation Tabs */
.tab-nav {
  display: flex;
  gap: 4px;
  background: var(--primary-light);
  padding: 5px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  box-shadow: var(--shadow-sm);
  /* the tab row is long — wrap onto a second line rather than scroll, so every
     tab stays visible without hunting sideways */
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 4px;
  border-radius: var(--radius);
}
.tab-nav > .tab-btn {
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.15;
  padding: 7px 12px;
}
.tab-nav > .tab-btn .tab-pill { font-size: 8.5px; padding: 1px 5px; }

.tab-btn {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.tab-btn:hover {
  color: var(--text-main);
}

.tab-btn.active {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.tab-pill {
  font-size: 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--text-muted);
  color: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.tab-pill.live {
  background: var(--success);
  color: white;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Metrics Cards */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.metric-card:hover {
  /* No translateY: the lift moved the card out from under a cursor entering at the
     bottom edge - hover ended, the card dropped back, and the click landed behind it.
     Bauti hit exactly this on the 06 Aug call ("click on the edge of the card"). The
     lift is feedback, so it lives in the shadow and border now, which do not move the
     hit area. Same fix applied to every hover that carried a translateY. */
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.metric-card .lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-bottom: 6px;
}

.metric-card .val {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.metric-card .sub {
  color: var(--text-light);
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Tremor-style L1 (07 Aug: badge deltas + the morning tracker strip) ─────── */
.metric-card .trow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.metric-card .trow .lbl { margin-bottom: 6px; }
.l1-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.l1-badge.good { background: rgba(16, 185, 129, 0.14); color: var(--success); }
.l1-badge.bad  { background: rgba(244, 63, 94, 0.14);  color: var(--danger); }
#kpi-l1-track { font-size: 11px; color: var(--text-muted); }
#kpi-l1-track .blk {
  display: inline-block;
  width: 22px;
  height: 10px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
#kpi-l1-track .blk.ok   { background: #10b981; }
#kpi-l1-track .blk.bad  { background: #f43f5e; }
#kpi-l1-track .blk.flat { background: var(--border); }
#kpi-l1-track .note { margin-left: 8px; }

/* Alert Boxes */
.alert-urgent {
  background: var(--danger-light);
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}

.alert-urgent strong {
  color: var(--danger);
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
}

.b-red {
  background: var(--danger);
  color: white;
}

.b-amber {
  background: var(--warning);
  color: white;
}

/* Content Layout Containers */
.card-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sec-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.sec-title .chk {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-light);
  font-weight: 400;
}

/* Tables Styling */
.table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.tbl-premium {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.tbl-premium th {
  background: var(--bg);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.tbl-premium td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-main);
}

.tbl-premium tr:last-child td {
  border-bottom: none;
}

.tbl-premium tbody tr:hover {
  background-color: var(--bg);
}

.tbl-premium tr.row-danger {
  background: var(--danger-light);
}

.tbl-premium tr.row-danger:hover {
  background: #fcd5d5;
}

/* Pipeline Custom Table Elements */
.sname {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bar-wrapper {
  background: var(--bg);
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  max-width: 200px;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.mono-cell {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
}

.num-cell {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-align: right;
  font-weight: 600;
}

/* Responsive Grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  gap: 16px;
}

.stale-card {
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stale-card.urgent {
  background: var(--danger-light);
  border: 1px solid var(--danger);
}

.stale-card.warning {
  background: var(--warning-light);
  border: 1px solid var(--warning);
}

.stale-card-hdr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stale-numbers {
  display: flex;
  gap: 20px;
}

.stale-num-box .num-lbl {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-light);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.stale-num-box .num-val {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stale-list-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.stale-list-row:last-child {
  border-bottom: none;
}

/* KPI Cards with charts */
.kpi-grid {
  display: grid;
  /* ONE chart per row. Mohamed, 06 Aug: "each chart should stand alone in the row" —
     the old 45% two-up packing halved every chart's width, and with the per-chart
     numbers table underneath each card the pairing read as clutter. Full width also
     gives the day-columned tables room to fit without their scrollbar. */
  grid-template-columns: 1fr;
  gap: 16px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

/* One chart per row, but SHORT (Mohamed, 07 Aug: "charts are too big — one row but
   smaller"). Full-width cards freed .chart-container's flex:1 to grow with whatever
   the card stretched to, so a chart could fill the whole viewport. Pinned: the box is
   a fixed 220px tall however wide the row is, and the card's old min-height:320px is
   gone — the numbers table under the canvas gives the card its height now. */
.kpi-grid .kpi-card .chart-container {
  height: 190px;
  min-height: 190px;
  flex: none;
}

.kpi-card:hover {
  box-shadow: var(--shadow-lg);
}

.kpi-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.kpi-card-title {
  font-size: 12px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tgl-group {
  display: flex;
  background: var(--bg);
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.tgl-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 4px;
  transition: var(--transition);
}

.tgl-btn.active {
  background: var(--bg-card);
  color: var(--primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.kpi-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.kpi-summary-box .k-val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.kpi-summary-box .k-lbl {
  font-size: 9px;
  color: var(--text-light);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.chart-container {
  position: relative;
  flex: 1;
  min-height: 130px;
}

.chart-container canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* Charts placed directly in a card-section carry an explicit inline height.
   Without this, the generic `.chart-container { flex: 1 }` above (needed for the
   KPI-card charts) zeroes their flex-basis and lets them stretch to fill the
   whole tab — the canvas sizer then bakes that height in. Pinning flex to auto
   makes the inline height authoritative again. */
.card-section > .chart-container {
  flex: 0 0 auto;
}

/* Footer styling */
.footer {
  display: flex;
  justify-content: space-between;
  color: var(--text-light);
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Search Box style */
.search-input {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 12px;
  width: 200px;
}

/* Sub-type custom bars */
.subtype-row {
  display: grid;
  grid-template-columns: 140px 1fr 50px;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}

.subtype-label {
  font-size: 12px;
  color: var(--text-muted);
}

.subtype-bar-bg {
  background: var(--bg);
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
}

.subtype-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
}

.subtype-val {
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
}

/* Canvas chart tooltip (shared chart-engine.js) */
.cv-tooltip { position: fixed; background: var(--text-main, #1f2937); color: var(--bg-card, #fff);
  padding: 7px 11px; border-radius: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  pointer-events: none; z-index: 10000; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0;
  transition: opacity .12s; white-space: nowrap; line-height: 1.5; max-width: 260px; }
.cv-tooltip.visible { opacity: 1; }
.cv-tooltip-date { font-weight: 700; margin-bottom: 3px; opacity: .85; }
.cv-tooltip-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.cv-tooltip-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* selects: solid themed background so the native dropdown popup is readable in dark mode */
select.date-input { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.date-input option { background: var(--bg-card); color: var(--text-main); }

/* Background-sync button */
@keyframes cx-spin { to { transform: rotate(360deg); } }
.sync-icon.spin { animation: cx-spin 0.8s linear infinite; }
#sync-btn[disabled] { opacity: 0.65; cursor: default; }

/* ── Repair-partner assignation flow cards (compact) ── */
#repair-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.repair-node {
  flex: 1 1 118px; min-width: 118px; position: relative; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px 9px 15px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.repair-node::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 10px 0 0 10px; background: var(--accent, var(--primary));
}
.repair-node::after {
  content: '›'; position: absolute; top: 6px; right: 10px; font-size: 15px; line-height: 1;
  color: var(--text-light); opacity: .45;
}
.repair-node:hover { box-shadow: 0 6px 16px rgba(80,25,160,.12); border-color: var(--accent, var(--primary)); }
.repair-node .rn-val { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--accent, var(--text)); font-variant-numeric: tabular-nums; line-height: 1.15; }
.repair-node .rn-lbl { font-size: 10.5px; color: var(--text-light); margin-top: 1px; }
.repair-flow-arrow { align-self: center; color: var(--text-light); font-size: 15px; }
.repair-node-stack { display: flex; flex-direction: column; gap: 8px; flex: 1 1 128px; min-width: 128px; }

/* ── Segmented toggle buttons (Period / Country in KPI stage section) ── */
.stage-btn {
  border: none; background: transparent; color: var(--text-muted);
  padding: 4px 11px; font-size: 11px; font-weight: 600; line-height: 1.4;
  border-radius: 5px; cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: background .14s ease, color .14s ease;
}
.stage-btn:hover { color: var(--text); }
.stage-btn.active {
  background: var(--bg-card); color: var(--primary);
  box-shadow: 0 1px 2px rgba(80,25,160,.12);
}

/* Compact the repair-monitor secondary stat strip (was using full metric-card size) */
#repair-stat-strip { gap: 10px; }
#repair-stat-strip .metric-card { padding: 9px 13px 10px; }
#repair-stat-strip .metric-card .val { font-size: 19px; line-height: 1.15; }
#repair-stat-strip .metric-card .lbl { font-size: 9.5px; }
#repair-stat-strip .metric-card .sub { font-size: 10px; }

/* ── Clickable matrix cells / drill-in cards ──────────────────────────────
   Affordance was cursor-only: invisible until hover, absent on touch, and the
   cells weren't keyboard reachable (js/table-a11y.js adds role + tabindex).
   Colour is never the only signal — hover lifts, focus draws a real ring.   */
.is-clickable { transition: box-shadow .12s ease, filter .12s ease; }
td.is-clickable:hover { box-shadow: inset 0 0 0 2px var(--primary); filter: brightness(1.04); }
.metric-card.is-clickable:hover,
.repair-node.is-clickable:hover { box-shadow: var(--shadow); }
.is-clickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--primary-light);
}
/* Tall/wide matrices: keep the day columns readable while scrolling. The frozen
   first column already sits at z-index 2, so the header must sit above it. */
/* Tables render at FULL HEIGHT and the page scrolls — no scrollbox inside a scrollbox.
   This used to be `max-height:70vh; overflow:auto`, which meant every table got its own
   vertical scrollbar: you scrolled the page to the table, then scrolled again inside it,
   and there was no way to see a whole table at once. Worst on bauti-daily, where every
   section is a table.

   Horizontal scroll STAYS (overflow-x on the base rule above) because the daily matrices
   are genuinely wider than any screen — 14 day columns plus totals. Vertical is the one
   that had no reason to be there.

   Sticky headers still work, and work better: with no scroll container the `top:0`
   resolves against the viewport, so the header row now follows you down the PAGE instead
   of only within a 70vh box. */
.table-wrapper { overflow-x: auto; overflow-y: visible; }

/* Day-columned matrices (bauti-daily and the drill tables). Bauti, 06 Aug: at full
   window size a table must not scroll sideways. The old tables forced their own width
   (min-width:max-content + 52px per day column + 10/12px padding), which at 17 columns
   is ~1.5k px — wider than the 1400px page even fullscreen, so the scrollbar was
   permanent. Sizing is now the opposite way round: the table takes the container's
   width and the day columns compress to fit. overflow-x on .table-wrapper stays as the
   fallback for genuinely narrow windows — the rule is "no scroll when there is room",
   not "crush the table at any width". */
.tbl-matrix { width: 100%; table-layout: auto; }
.tbl-matrix th, .tbl-matrix td { padding: 7px 5px; }
/* Agent-views blocks (bauti-daily): one bordered block per app queue with a tinted
   header strip, and a visible rule under every stage row inside it. Bauti's dashboard
   comment (06 Aug) asked for exactly this: lines separating each stage, and a look
   that says where one queue ends and the next begins. */
.av-block { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.av-block-head {
  font-size: 12px; font-weight: 700; color: var(--primary);
  padding: 8px 12px; background: var(--bg);
  border-bottom: 2px solid var(--primary);
}
.av-block .table-wrapper, .av-block [id^="av-sub-"] { border: 0; border-radius: 0; }
.av-block .tbl-premium td { border-bottom: 1px solid var(--border); }
.av-block .tbl-premium tbody tr:last-child td { border-bottom: 0; }

.tbl-matrix th:first-child, .tbl-matrix td:first-child {
  padding-left: 10px;
  /* Labels wrap at WORD boundaries only, with a floor. The first version used
     overflow-wrap:anywhere, which also lowers the column's min-content width to a
     single character — so in a narrow window the label column crushed into a one-
     letter-per-line ribbon BEFORE the wrapper's scrollbar ever engaged ("Revibe —
     Not Replied" rendered as a vertical strip; Bauti sent the screenshot). With a
     floor and word-wrapping, the table compresses down to its floors and then the
     wrapper scrolls — fit when there is room, scroll when there is not, and the
     text is never the thing that gives. */
  white-space: normal; overflow-wrap: normal; word-break: normal;
  min-width: 130px; max-width: 240px;
}
.table-wrapper thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-card); }
.table-wrapper thead th:first-child { z-index: 4; }

/* ── Compact density (Mohamed, 08 Aug: "zoom out ... so we have more content on
   the screen") ──────────────────────────────────────────────────────────────
   A true zoom rather than a typography diet: one rule scales cards, tables,
   charts and gaps together, so nothing can be missed and the proportions we
   just tuned (the 5:6 plots, the fit-vs-scroll matrices) all survive intact.
   Canvas charts stay sharp — the backing store is still sized in unzoomed CSS
   pixels, so the browser DOWN-scales it, which never blurs.

   Keyed to body.dash-compact, NOT to .page: bauti-daily, repair-partner and
   Claims' list.html all load this same stylesheet and were not part of the ask.

   Scoped to the page shell so anything mounted on <body> — the comment layer's
   pins and panel, the drill-down modals — keeps its own 1:1 scale. Those are
   positioned from viewport coordinates, and scaling them here would put every
   pin a few percent away from the thing it is pinned to. */
body.dash-compact .page { zoom: 0.85; }