/* ======================================================================
   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: 8px;
  background: var(--bg-card);
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.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);
}

.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;
}

/* 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--na {
  font-size: 16px;
}

.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;
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  gap: 16px;
}

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

.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 (Backlog tab) 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; }

/* ── Clickable matrix cells / drill-in cards (see js/table-a11y.js) ─────── */
.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 { 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);
}
.table-wrapper { max-height: 70vh; overflow: auto; }
/* Day-columned matrices fit the container instead of forcing their own width — see
   the same rule in Claims_dashboard/css/dashboard.css for the full why (Bauti, 06 Aug:
   a fullscreen page must not scroll sideways). */
.tbl-matrix { width: 100%; table-layout: auto; }
.tbl-matrix th, .tbl-matrix td { padding: 7px 5px; }
.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; }

/* ── Fulfillment App reference strip (Mohamed, 08 Aug) ───────────────────────
   Moved to the foot of the Daily Backlog Trend tab and shrunk to roughly a third
   of the standard metric card: it is a side reference read from the ops sheet,
   not a headline, and at full size six cards wrapped onto two rows and out-shouted
   the per-task backlog charts above them.
   All six sit on ONE row at any width — the default metrics-grid auto-fit reflows
   to a second row below ~1600px, which is the wrap this fixes. Below 900px the row
   scrolls sideways rather than stacking, so the strip never grows tall again. */
.ff-strip .metrics-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.ff-strip .metric-card {
  padding: 5px 8px 6px;
  border-radius: 8px;
  min-width: 0;                /* let a 6-up track shrink instead of overflowing */
  box-shadow: none;
}
.ff-strip .metric-card .lbl { font-size: 7.5px; letter-spacing: .3px; margin-bottom: 1px; }
.ff-strip .metric-card .val { font-size: 15px; margin-bottom: 0; line-height: 1.2; }
/* The sub-line stays, but on ONE clipped line: at a third of the size it wrapped
   to three lines and undid the shrink, and hiding it outright lost the definition
   (and overshot to 77% smaller). Clipped keeps the first words visible, and the
   card's title attribute carries the full text on hover. */
.ff-strip .metric-card .sub {
  font-size: 8px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
@media (max-width: 900px) {
  .ff-strip .metrics-grid {
    grid-auto-flow: column;
    grid-auto-columns: 140px;
    grid-template-columns: none;
    overflow-x: auto;
  }
}

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

/* ── Per-task backlog-trend cards (10 Aug) ───────────────────────────────────
   A grid item defaults to min-width:auto, so it cannot shrink below its content:
   at 30 columns the card grew the track and pushed the whole PAGE sideways instead
   of the table scrolling inside its own wrapper. min-width:0 lets the track shrink
   so the wrapper's overflow does its job — the same fit-then-scroll contract the
   rest of the matrices follow: the page never scrolls sideways, the table does. */
.tt-card { min-width: 0; }
.tt-card .tt-tbl { overflow-x: auto; max-width: 100%; }
/* The day columns keep a readable floor and the metric label stays pinned, so a
   30-day table scrolls rather than crushing its own text. */
.tt-card .tt-tbl table { width: auto; min-width: 100%; }
.tt-card .tt-tbl th, .tt-card .tt-tbl td { white-space: nowrap; }