/* ==========================================================================
   Inmobile dashboard design system.

   Colour roles are declared once as custom properties and referenced by role
   everywhere else, so light/dark swap in one place. The categorical series
   colours are the validated set (validator: all checks pass in both modes;
   the light-mode contrast warning on aqua/yellow is discharged by the direct
   labels and table views this UI always ships).

   Layout is mobile-first and must not overflow horizontally at 320px. Wide
   content scrolls inside its own container, never the page body.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces and ink */
  --surface-1: #ffffff;          /* cards, chart surface */
  --surface-2: #f5f6f8;          /* page plane */
  --surface-3: #eceef1;          /* wells, hover */
  --surface-inset: #f9fafb;
  --ink-1: #0b0d10;
  --ink-2: #4a5058;
  --ink-3: #7a828c;
  --hairline: #dfe3e8;
  --hairline-strong: #c4cad2;

  /* Brand: the deep teal from the existing Aheeva reports */
  --brand: #0d4f5c;
  --logo-red: #d4141b;
  --brand-ink: #ffffff;
  --brand-soft: #e6f0f2;

  /* Categorical series (validated order) */
  --series-1: #2a78d6;   /* blue    - inbound */
  --series-2: #eb6834;   /* orange  - outbound */
  --series-3: #1baf7a;   /* aqua    */
  --series-4: #eda100;   /* yellow  */
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  /* Status (reserved; never reused as a series colour) */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --good-text: #006300;
  /* Text-safe variants of the status colours, for small coloured type.
     Same hues, darkened until each clears 4.5:1 on --surface-1.
     good 7.54:1, warn 4.80:1, critical 4.80:1. */
  --warn-text: #996903;
  --critical-text: #d03b3b;

  /* Sequential ramp (single hue, light to dark) for heatmaps */
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec;
  --seq-4: #3987e5; --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;

  --grid: #e8ebef;
  --axis: #c4cad2;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(11,13,16,.06), 0 1px 3px rgba(11,13,16,.04);
  --shadow-pop: 0 8px 24px rgba(11,13,16,.16);
  /* --font and its optical tuning come from fonts.css, which is loaded
     first and re-declares them per selected family. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #14161a;
    --surface-2: #0d0f12;
    --surface-3: #1e2228;
    --surface-inset: #191c21;
    --ink-1: #f4f6f8;
    --ink-2: #b3bac3;
    --ink-3: #848c96;
    --hairline: #262b32;
    --hairline-strong: #363d46;
    --logo-red: #ff5a60;
    --brand: #12b5c9;
    --brand-ink: #04191d;
    --brand-soft: #12252a;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --good-text: #0ca30c;
    --warn-text: #fab219;
    --critical-text: #d85b5b;
    --seq-1: #0d366b; --seq-2: #184f95; --seq-3: #256abf;
    --seq-4: #3987e5; --seq-5: #6da7ec; --seq-6: #9ec5f4; --seq-7: #cde2fb;
    --grid: #22262c;
    --axis: #363d46;
    --shadow: 0 1px 2px rgba(0,0,0,.5);
    --shadow-pop: 0 8px 24px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #14161a; --surface-2: #0d0f12; --surface-3: #1e2228; --surface-inset: #191c21;
  --ink-1: #f4f6f8; --ink-2: #b3bac3; --ink-3: #848c96;
  --hairline: #262b32; --hairline-strong: #363d46;
  --logo-red: #ff5a60;
  --brand: #12b5c9; --brand-ink: #04191d; --brand-soft: #12252a;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --good-text: #0ca30c;
  --warn-text: #fab219;
  --critical-text: #d85b5b;
  --seq-1: #0d366b; --seq-2: #184f95; --seq-3: #256abf;
  --seq-4: #3987e5; --seq-5: #6da7ec; --seq-6: #9ec5f4; --seq-7: #cde2fb;
  --grid: #22262c; --axis: #363d46;
  --shadow: 0 1px 2px rgba(0,0,0,.5); --shadow-pop: 0 8px 24px rgba(0,0,0,.6);
}

/* -------------------------------------------------------------------- */
/* Base                                                                  */
/* -------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* A class that sets `display` outranks the UA rule for [hidden], so state the
   intent explicitly. Without this, .control[hidden] still lays out as flex. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--surface-2);
  color: var(--ink-1);
  font-family: var(--font);
  font-size: var(--font-size-base, 14px);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;             /* the page never scrolls sideways */
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------- */
/* App shell                                                             */
/* -------------------------------------------------------------------- */

.app { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  padding: 8px 12px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.topbar__brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; letter-spacing: -.01em; font-size: 15px;
  margin-right: auto;
}
.topbar__sub { font-weight: 400; color: var(--ink-3); font-size: 12px; }

/* Inmobiles wordmark. Sized in em so it tracks the brand font-size and the
   chevron never drifts out of alignment with the letters. */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; white-space: nowrap; flex: none;
}
.wordmark__word { color: var(--ink-1); }
.wordmark__mark {
  height: .72em; width: auto; color: var(--logo-red);
  /* The chevron sits optically low against a baseline-aligned flex row. */
  align-self: center; margin: 0 .06em; flex: none;
}
@media (max-width: 480px) { .wordmark { font-size: 15px; } }

.tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
  background: var(--surface-3); padding: 3px; border-radius: var(--radius);
  width: 100%; order: 3;
}
.tab {
  flex: 1 0 auto; white-space: nowrap;
  padding: 7px 14px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); font-weight: var(--ui-weight-strong, 600); font-size: 13px;
  cursor: pointer; transition: background .12s, color .12s;
}
.tab:hover { background: var(--surface-1); color: var(--ink-1); }
.tab[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }

/* Toolbar: time range, refresh, filters */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: var(--topbar-h, 96px); z-index: 30;
}

.control { display: flex; align-items: center; gap: 6px; }
.control label { font-size: 12px; color: var(--ink-3); font-weight: 600; }

select.input, input.input {
  background: var(--surface-1); color: var(--ink-1);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  padding: 6px 9px; min-height: 34px; max-width: 100%;
}
input.input::placeholder { color: var(--ink-3); }
.input--search { min-width: 150px; flex: 1 1 180px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-1); color: var(--ink-1);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  padding: 6px 12px; min-height: 34px; font-weight: var(--ui-weight-strong, 600); font-size: 13px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-3); }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-3); color: var(--ink-1); }
.btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--ink-1); }

/* Filter pills */
.filters { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.filters:empty { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); border: 1px solid var(--brand);
  border-radius: 999px; padding: 3px 6px 3px 10px;
  font-size: 12px; font-weight: 600; max-width: 100%;
}
.pill__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill__x {
  border: 0; background: transparent; cursor: pointer; color: var(--ink-2);
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 50%; flex: none;
}
.pill__x:hover { background: var(--surface-1); color: var(--critical); }

.main { flex: 1; padding: 12px; display: grid; gap: 12px; }

/* -------------------------------------------------------------------- */
/* Cards                                                                 */
/* -------------------------------------------------------------------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  min-width: 0;                   /* lets grid children shrink, not overflow */
}
.card__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.card__title { font-size: 14.5px; font-weight: var(--ui-weight-strong, 700); margin: 0; letter-spacing: -.005em; }
.card__sub { font-size: 12px; color: var(--ink-3); margin: 0 0 10px; }
.card__actions { margin-left: auto; display: flex; gap: 6px; }

/* KPI grid: 2 columns on the smallest phones, up to 7 on desktop */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px)  { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpis--seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px)  { .kpis--seven { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .kpis--seven { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kpis--seven { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.kpi {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  transition: border-color .12s, transform .08s, box-shadow .12s;
  position: relative;
}
.kpi:hover { border-color: var(--brand); box-shadow: var(--shadow-pop); }
.kpi:active { transform: translateY(1px); }
.kpi[data-static="true"] { cursor: default; }
.kpi[data-static="true"]:hover { border-color: var(--hairline); box-shadow: var(--shadow); }
.kpi__label {
  font-size: 10.5px; font-weight: var(--ui-weight-strong, 600); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: var(--label-tracking, .04em);
  display: flex; align-items: center; gap: 4px; min-height: 28px;
}
.kpi__value {
  font-size: clamp(21px, 5.6vw, 29px);
  font-weight: var(--kpi-weight, 700);
  letter-spacing: var(--kpi-tracking, -.02em);
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
}
.kpi__unit { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.kpi__foot { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Tone lives on the LABEL TEXT, not on a border and never on the value.
   The number itself stays in the default ink so it is never recoloured, and
   the coloured word sits directly on the thing it describes.

   These use the *-text tokens rather than the raw status colours because the
   label is 10.5px uppercase, which is small text under WCAG. Measured against
   the card surface, the raw tokens fail badly: --warning #fab219 on white is
   1.83:1, and --critical #d03b3b on the dark surface is 3.77:1. */
.kpi--good  .kpi__label { color: var(--good-text); }
.kpi--warn  .kpi__label { color: var(--warn-text); }
.kpi--alert .kpi__label { color: var(--critical-text); }

.delta { font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.delta--up { color: var(--good-text); }
.delta--down { color: var(--critical); }
.delta--flat { color: var(--ink-3); }

/* Layout helpers */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.grid-2--wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1000px) { .grid-2--wide { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); } }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 1100px) { .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* -------------------------------------------------------------------- */
/* Charts                                                                */
/* -------------------------------------------------------------------- */

.chart { width: 100%; position: relative; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__empty {
  /* Column, not row: these empty states are a sentence plus a hint, and a row
     flex container makes <br> inert and runs the two together on one line. */
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
  min-height: 140px; color: var(--ink-3); font-size: 13px; text-align: center; padding: 16px;
}

.axis-line { stroke: var(--axis); stroke-width: 1; }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis-text { fill: var(--ink-3); font-size: var(--axis-size, 10px); font-family: var(--font); }
.axis-text--y { text-anchor: end; }
.value-label {
  fill: var(--ink-2); font-size: var(--axis-size, 10px);
  font-weight: var(--ui-weight-strong, 700);
  font-variant-numeric: tabular-nums;
}
/* No text-anchor here on purpose: a CSS declaration beats the SVG
   presentation attribute, so each chart must set its own anchor. */

.mark { transition: opacity .12s; }
.mark:hover { opacity: .82; }
.mark--interactive { cursor: pointer; }
.mark-ring { stroke: var(--surface-1); stroke-width: 2; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend button {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 2px 4px; border-radius: 4px;
  font-size: 12px; color: var(--ink-2);
}
.legend button:hover { background: var(--surface-3); }
.legend button[aria-pressed="false"] { opacity: .4; }

.tooltip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--surface-1); color: var(--ink-1);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); padding: 8px 10px; font-size: 12px;
  max-width: min(280px, 88vw); opacity: 0; transition: opacity .1s;
}
.tooltip[data-show="true"] { opacity: 1; }
.tooltip__title { font-weight: 700; margin-bottom: 4px; }
.tooltip__row { display: flex; align-items: center; gap: 6px; justify-content: space-between; gap: 12px; }
.tooltip__key { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.tooltip__val { font-weight: 700; font-variant-numeric: tabular-nums; }
.tooltip__hint { margin-top: 5px; color: var(--ink-3); font-size: 11px; border-top: 1px solid var(--hairline); padding-top: 4px; }

/* -------------------------------------------------------------------- */
/* Tables                                                                */
/* -------------------------------------------------------------------- */

.table-wrap {
  min-width: 0;
  overflow-x: auto;               /* wide tables scroll here, not the page */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  max-width: 100%;
}
table.data {
  border-collapse: collapse; width: 100%; min-width: 640px;
  font-size: var(--table-size, 13px);
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td { padding: 8px 10px; text-align: left; white-space: nowrap; }
table.data thead th {
  background: var(--brand); color: var(--brand-ink);
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: var(--label-tracking, .04em);
  font-weight: var(--ui-weight-strong, 700);
  position: sticky; top: 0; z-index: 2; cursor: pointer; user-select: none;
}
table.data thead th:hover { filter: brightness(1.12); }
table.data thead th[data-sort]::after { content: ' \2195'; opacity: .45; }
table.data thead th[aria-sort="ascending"]::after { content: ' \2191'; opacity: 1; }
table.data thead th[aria-sort="descending"]::after { content: ' \2193'; opacity: 1; }
table.data tbody tr { border-top: 1px solid var(--hairline); cursor: pointer; }
table.data tbody tr:nth-child(even) { background: var(--surface-inset); }
table.data tbody tr:hover { background: var(--brand-soft); }
table.data tfoot td { border-top: 2px solid var(--hairline-strong); font-weight: 700; background: var(--surface-3); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; }

/* Inline bar inside a table cell, for at-a-glance comparison */
.cellbar { position: relative; display: block; min-width: 54px; }
.cellbar__fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 14px; border-radius: 3px; opacity: .22; background: var(--series-1);
}
.cellbar__text { position: relative; padding-left: 4px; font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
.badge--good     { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); border-color: var(--good); }
.badge--warning  { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--ink-1); border-color: var(--warning); }
.badge--critical { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); border-color: var(--critical); }
.badge--neutral  { background: var(--surface-3); color: var(--ink-2); border-color: var(--hairline-strong); }

/* -------------------------------------------------------------------- */
/* Drilldown drawer                                                      */
/* -------------------------------------------------------------------- */

.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(11,13,16,.45);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity .16s;
}
.drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(760px, 100vw);       /* full width on mobile */
  background: var(--surface-1); border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-pop);
  z-index: 61; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease-out;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__head {
  padding: 12px 14px; border-bottom: 1px solid var(--hairline);
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
}
.drawer__title { margin: 0; font-size: 15px; font-weight: 700; }
.drawer__sub { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.drawer__close { margin-left: auto; }
.drawer__body { flex: 1; overflow: auto; padding: 12px 14px; }
.drawer__foot {
  padding: 10px 14px; border-top: 1px solid var(--hairline);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

.kv { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 4px 10px; font-size: 13px; }
.kv dt { color: var(--ink-3); font-weight: 600; }
.kv dd { margin: 0; word-break: break-word; }

/* -------------------------------------------------------------------- */
/* Status strip and misc                                                 */
/* -------------------------------------------------------------------- */

.statusline {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: 12px; color: var(--ink-3); padding: 0 12px 10px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--live { background: var(--good); }
.dot--demo { background: var(--warning); }
.dot--down { background: var(--critical); }

/* Shown only when one of the two feeds is down, so it must read as a caveat
   on the green pill rather than as another healthy fact on the line. */
.statusscope {
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--warning); color: var(--warning);
  font-size: 11px; font-weight: var(--ui-weight-strong, 600);
  letter-spacing: .02em; cursor: default;
}

.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent);
  font-size: 13px;
}
.banner--error { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); }
.banner__icon { font-weight: 700; flex: none; }

.spinner {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--hairline-strong); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .drawer, .drawer-backdrop, .mark, .kpi { transition: none; }
}

.loading-veil {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--surface-1) 62%, transparent);
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius);
  z-index: 5;
}

.muted { color: var(--ink-3); }
.stack { display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spacer { flex: 1 1 auto; }
.nowrap { white-space: nowrap; }
.hint { font-size: 12px; color: var(--ink-3); }
.hint--click::before { content: '\1F50E\FE0E'; margin-right: 4px; opacity: .7; }

/* Searchable select (typeahead) */
.combo { position: relative; min-width: 0; }
.combo__list {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 50;
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
  max-height: 260px; overflow: auto; padding: 4px; margin: 0; list-style: none;
  min-width: 200px;
}
.combo__list[hidden] { display: none; }
.combo__opt {
  padding: 7px 9px; border-radius: 4px; cursor: pointer; font-size: 13px;
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.combo__opt:hover, .combo__opt[aria-selected="true"] { background: var(--brand-soft); }
.combo__count { color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.combo__empty { padding: 10px; color: var(--ink-3); font-size: 12px; text-align: center; }

@media (max-width: 560px) {
  .main { padding: 10px 8px; }
  .topbar { padding: 8px; }
  .toolbar { padding: 8px; }
  .card { padding: 11px; }
  .statusline { padding: 0 8px 8px; }
}

@media print {
  .topbar, .toolbar, .drawer, .drawer-backdrop, .card__actions { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* Any grid/flex child may shrink below its content so its own scroll
   container handles the overflow instead of the page. */
.grid-2 > *, .grid-2--wide > *, .grid-3 > *, .stack > * { min-width: 0; }

/* Discover: field sidebar beside results on wide screens, stacked on phones.
   minmax(0,…) on both tracks keeps the results table inside its scroller. */
.discover-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.discover-fields > #fieldList { max-height: 260px; overflow: auto; }
.discover-fields, .discover-results { min-width: 0; }
@media (min-width: 900px) {
  .discover-layout { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
  .discover-fields > #fieldList { max-height: 520px; }
}

/* Typeface switcher in the header. Compact so it does not compete with the
   analytical controls in the toolbar below it. */
.control--font { flex: none; }
.input--font {
  min-height: 30px;
  padding: 3px 7px;
  font-size: 12px;
  max-width: 132px;
  border-color: var(--hairline);
  color: var(--ink-2);
}
.input--font:hover { border-color: var(--hairline-strong); color: var(--ink-1); }
@media (max-width: 420px) {
  .input--font { max-width: 104px; font-size: 11px; }
}

/* Connection state, one word. Clickable so it is never a dead indicator:
   it opens Data health, where the full stream detail lives. */
.statuspill {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: var(--ui-weight-strong, 600);
  color: var(--ink-2); border-radius: 4px;
}
.statuspill:hover { color: var(--ink-1); text-decoration: underline; }

/* Live agent board. Cards rather than a table, because state and duration
   read faster than columns when scanning for who is free. */
.agentgrid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.agentcard {
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 10px; background: var(--surface-inset); min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.agentcard__name {
  font-weight: var(--ui-weight-strong, 700); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agentcard__meta {
  font-size: 11px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}