/* cm-apps design system — shared stylesheet for every app.
 *
 * Canonical copy: design-system/cm-ds.css. Each app ships its own copy
 * (scripts/sync-design-system.sh), because each app's image is built from its
 * own folder. Edit HERE, then run the sync script — never edit an app's copy.
 *
 * Spec: design-system/SPEC.md (the CM People/SRP app design system).
 * Tokens (§4.3) are verbatim; components follow §5–§11. Light on :root,
 * dark on [data-theme="dark"] (set on <html> by cm-ds.js / the pre-paint snippet).
 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   Tokens (§4.3, verbatim)
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Type ── */
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Figures use the UI face with tabular numerals (aligned columns) — no monospace look */
  --font-num: var(--font-sans);
  --font-code: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ── Brand (Navy) ── */
  --q-accent: #0066a1;
  --q-accent-dark: #004f7d;
  --q-accent-soft: #e5f0f7;
  --q-brand-fg: #ffffff;

  /* ── Core palette ── */
  --primary: var(--q-accent);
  --primary-hover: var(--q-accent-dark);
  --primary-rgb: 0,102,161;
  --primary-100: #e5f0f7;
  --primary-200: #bfd7e8;
  --primary-300: #6fa3c7;
  /* Semantic colours double as TEXT: ≥ 4.5:1 on white and on their -100 tints (WCAG AA) */
  --success: #13743a;
  --success-100: #e7f6ec;
  --warning: #a4520a;
  --warning-100: #fdf3e2;
  --warning-bg: var(--warning-100);
  --danger: #b42318;
  --danger-100: #fdecea;
  --override-bg: #eef1fd;
  --override-color: #3538a8;
  --override-border: rgba(53,56,168,.22);
  --info: var(--q-accent);
  --info-100: var(--q-accent-soft);

  /* ── Surfaces ── */
  --body-bg: #dee1e6;          /* canvas */
  --bg: var(--body-bg);
  --surface: #fafafa;
  --surface2: #f2f3f5;
  --body-color: #1f1f1f;
  --heading-color: #000000;
  --muted-color: #4f5358;      /* 5.4:1 on white, 5.1:1 on canvas */
  --link-color: #0066a1;
  --accent-text: #005a8f;      /* accent used as text (links, IDs, active chips) */
  --on-solid: #ffffff;         /* text on a solid semantic fill */
  --border: #d3d6db;
  --text: #1f1f1f;
  --muted: #4f5358;

  /* ── Sidebar — light, quiet ── */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 68px;
  --sidebar-bg: #083557;
  --sidebar-color: rgba(255,255,255,.95);
  --sidebar-icon: rgba(255,255,255,.85);
  --sidebar-hover-bg: rgba(255,255,255,.08);
  --sidebar-hover-color: #ffffff;
  --sidebar-active-bg: rgba(20,169,250,.22);
  --sidebar-active-color: #ffffff;
  --sidebar-accent: #14a9fa;
  --sidebar-section-color: rgba(255,255,255,.72);
  --sidebar-border: rgba(255,255,255,.10);
  --sidebar-brand-color: #ffffff;
  --q-sidebar-bg: var(--sidebar-bg);
  --q-sidebar-section: var(--sidebar-section-color);

  /* ── Cards ── */
  --card-bg: #fafafa;
  --card-border: #d3d6db;
  --card-radius: 6px;
  --card-shadow: none;
  --card-shadow-hover: 0 4px 12px rgba(16,24,40,.08);

  /* ── Topbar ── */
  --topbar-height: 56px;
  --topbar-bg: #dee1e6;
  --topbar-border: #d3d6db;
  --topbar-shadow: none;
  --topbar-color: var(--body-color);

  /* ── Tables ── */
  --table-border: #e0e0e0;
  --table-header-bg: #ededed;
  --table-stripe-bg: transparent;
  --table-hover-bg: #eef4f9;
  --row-hover: var(--table-hover-bg);
  --table-header-color: #333333;

  /* ── Inputs ── */
  --input-bg: #ffffff;
  --input-disabled-bg: #eceef0;
  --input-border: #b9bdc3;
  --input-color: #000000;
  --input-radius: 4px;
  --input-focus-border: var(--q-accent);
  --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15);

  /* ── Badges ── */
  --badge-primary-bg: #e5f0f7;
  --badge-primary-color: #004f7d;
  --badge-success-bg: #e7f6ec;
  --badge-success-color: #11663a;
  --badge-warning-bg: #fdf3e2;
  --badge-warning-color: #8a4508;
  --badge-danger-bg: #fdecea;
  --badge-danger-color: #9b1c14;
  --badge-info-bg: #e5f0f7;
  --badge-info-color: #004f7d;
  --badge-gray-bg: #f2f4f7;
  --badge-gray-color: #475467;
  --badge-orange-bg: #fef0e6;
  --badge-orange-color: #93370d;

  /* ── Modal ── */
  --modal-bg: #fafafa;
  --modal-overlay: rgba(16,24,40,.40);
  --modal-shadow: 0 24px 48px -12px rgba(16,24,40,.22);
  --modal-radius: 8px;

  --role-switcher-bg: #f9fafb;
  --role-switcher-border: #e4e7ec;
  --role-switcher-label: #5f6877;
  --role-switcher-color: #3a4250;

  /* ── Charts (one harmonised palette; semantic good/warn/bad for bands) ── */
  --chart-1: #0066a1;
  --chart-2: #6fb4e0;
  --chart-3: #8b7fd6;
  --chart-good: #2f9e63;
  --chart-warn: #e0922f;
  --chart-warn-strong: #d9702b;
  --chart-bad: #d9534a;
  --chart-neutral: #b4bcc8;
}

[data-theme="dark"] {
  --body-bg: #262626;
  --bg: var(--body-bg);
  --surface: #404040;
  --surface2: #494949;
  --body-color: #f2f2f2;
  --heading-color: #ffffff;
  --muted-color: #cfcfcf;
  --border: #535353;
  --text: #f2f2f2;
  --muted: #cfcfcf;

  --sidebar-bg: #1e1e1e;
  --sidebar-color: rgba(255,255,255,.95);
  --sidebar-icon: rgba(255,255,255,.85);
  --sidebar-hover-bg: rgba(255,255,255,.07);
  --sidebar-hover-color: #ffffff;
  --sidebar-active-bg: rgba(60,170,240,.20);
  --sidebar-active-color: #ffffff;
  --sidebar-section-color: rgba(255,255,255,.72);
  --sidebar-border: rgba(255,255,255,.08);
  --sidebar-brand-color: #ffffff;

  --card-bg: #404040;
  --card-border: #535353;
  --card-shadow: none;
  --card-shadow-hover: 0 4px 16px rgba(0,0,0,.35);

  --topbar-bg: #262626;
  --topbar-border: #3a3a3a;

  --table-border: #535353;
  --table-header-bg: #494949;
  --table-hover-bg: rgba(60,170,240,.08);
  --table-header-color: #e0e0e0;

  --input-bg: #333333;
  --input-disabled-bg: #494949;
  --input-border: #666666;
  --input-color: #ffffff;
  --input-focus-border: #3caaf0;
  --input-focus-shadow: 0 0 0 3px rgba(60,170,240,.25);

  --badge-primary-bg: rgba(60,170,240,.16);
  --badge-primary-color: #d4ecfc;
  --badge-success-bg: rgba(34,197,94,.14);
  --badge-success-color: #a3f0c1;
  --badge-warning-bg: rgba(245,158,11,.14);
  --badge-warning-color: #fdd78f;
  --badge-danger-bg: rgba(240,68,56,.15);
  --badge-danger-color: #fec3be;
  --badge-info-bg: rgba(60,170,240,.16);
  --badge-info-color: #c4e5fb;
  --badge-gray-bg: rgba(255,255,255,.07);
  --badge-gray-color: #ececec;
  --badge-orange-bg: rgba(249,115,22,.16);
  --badge-orange-color: #fed2a8;
  --override-bg: rgba(129,140,248,.14);
  --override-color: #dcdffe;
  --override-border: rgba(129,140,248,.30);

  --q-accent: #1f74ad;        /* fill: white text 5.2:1 */
  --q-accent-dark: #2b86c4;
  --q-accent-soft: rgba(60,170,240,.14);
  --accent-text: #7cc6f5;
  --primary-rgb: 60,170,240;
  --on-solid: #0d1117;
  --info: #7cc6f5;
  --link-color: #7cc6f5;
  --info-100: rgba(60,170,240,.14);
  --success: #86efac;
  --success-100: rgba(34,197,94,.14);
  --warning: #fde68a;
  --warning-100: rgba(245,158,11,.12);
  --danger: #fecaca;
  --danger-100: rgba(240,68,56,.12);
  --primary-100: rgba(60,170,240,.14);
  --primary-200: rgba(60,170,240,.30);

  --modal-bg: #404040;
  --modal-overlay: rgba(0,0,0,.62);
  --modal-shadow: 0 24px 48px rgba(0,0,0,.5);

  --role-switcher-bg: #494949;
  --role-switcher-border: #535353;
  --role-switcher-label: #d2d2d2;
  --role-switcher-color: #ececec;

  --chart-1: #3caaf0;
  --chart-2: #9fd3f6;
  --chart-3: #a99ff0;
  --chart-good: #4ade80;
  --chart-warn: #fbbf24;
  --chart-warn-strong: #fb923c;
  --chart-bad: #f87171;
  --chart-neutral: #7a7a7a;
}

/* ══════════════════════════════════════════════════════════════════════
   Base (§5, §11)
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
[data-theme="dark"] { color-scheme: dark; }   /* native controls and scrollbars follow the theme */
body {
  margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; color: var(--body-color); background: var(--body-bg);
}
h1, h2, h3, h4 { color: var(--heading-color); }
a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, .code { font-family: var(--font-code); }
input[type=checkbox], input[type=radio] { accent-color: var(--q-accent); }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--q-accent); outline-offset: 2px; border-radius: 6px; }
::placeholder { color: var(--muted-color); opacity: 1; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-color); }
.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; }

/* ══════════════════════════════════════════════════════════════════════
   Topbar (§6.1) — every app: [home] [app name] [app nav/extras] … [actions] [theme]
   ══════════════════════════════════════════════════════════════════════ */
.ds-topbar {
  position: sticky; top: 0; z-index: 50; min-height: var(--topbar-height);
  display: flex; align-items: center; gap: 8px; padding: 0 28px;
  background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); color: var(--topbar-color);
}
/* cm-apps deviation: apps have no sidebar, so the topbar carries the MES chrome (SRP's sidebar
   colours: navy in light, near-black in dark). Controls placed in it read these re-scoped tokens,
   so app buttons, selects and badges turn light-on-dark without app changes. Solid colours only,
   so a menu opened inside the topbar stays opaque. */
.ds-topbar {
  --topbar-bg: var(--sidebar-bg); --topbar-border: var(--sidebar-border); --topbar-color: var(--sidebar-color);
  --heading-color: #ffffff; --body-color: rgba(255,255,255,.95); --text: rgba(255,255,255,.95);
  --muted-color: rgba(255,255,255,.78); --muted: rgba(255,255,255,.78);
  --card-bg: #0e426b; --surface: #0e426b; --surface2: #15507f; --modal-bg: #0e426b;
  --border: rgba(255,255,255,.22); --card-border: rgba(255,255,255,.22);
  --input-bg: #0e426b; --input-border: rgba(255,255,255,.34); --input-color: #ffffff; --input-disabled-bg: #0a3a5f;
  --input-focus-border: #7cc6f5; --input-focus-shadow: 0 0 0 3px rgba(124,198,245,.30);
  --link-color: #ffffff; --accent-text: #9fd8fb; --info: #9fd8fb;
  --q-accent: #1f74ad; --q-accent-dark: #2b86c4; --q-accent-soft: rgba(124,198,245,.18); --primary: #1f74ad; --primary-hover: #2b86c4;
  --badge-gray-bg: rgba(255,255,255,.12); --badge-gray-color: #ffffff;
  --badge-primary-bg: rgba(124,198,245,.20); --badge-primary-color: #ffffff;
  color-scheme: dark;
}
[data-theme="dark"] .ds-topbar {
  --card-bg: #2b2b2b; --surface: #2b2b2b; --surface2: #363636; --modal-bg: #2b2b2b;
  --input-bg: #2b2b2b; --input-disabled-bg: #262626; --border: rgba(255,255,255,.16); --card-border: rgba(255,255,255,.16);
  --input-border: #5c5c5c;
}
.ds-topbar .cm-home {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--input-border); border-radius: 8px; background: var(--card-bg); color: var(--sidebar-icon);
  text-decoration: none; transition: background .12s, color .12s, border-color .12s;
}
.ds-topbar .cm-home:hover { background: var(--surface2); color: var(--heading-color); }
.ds-app { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: 4px; }
.ds-app-name { font-size: 15px; font-weight: 650; color: var(--sidebar-brand-color); letter-spacing: -.01em; white-space: nowrap; }
.ds-app-sub { font-size: 13px; color: var(--muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-app-sub::before { content: '·'; margin-right: 10px; color: var(--muted-color); }
.ds-topbar-spacer { flex: 1; }
.ds-topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-icon-btn {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--sidebar-icon); cursor: pointer;
  transition: background .12s, color .12s;
}
.ds-icon-btn:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-color); }
.ds-theme-toggle .ds-moon { display: none; }
[data-theme="dark"] .ds-theme-toggle .ds-sun { display: none; }
[data-theme="dark"] .ds-theme-toggle .ds-moon { display: inline; }

/* ══════════════════════════════════════════════════════════════════════
   Content & page head (§6.1, §6.2, §7.5)
   ══════════════════════════════════════════════════════════════════════ */
.ds-content { padding: 28px 28px 40px; min-width: 0; }   /* sides = topbar's 28px so edges line up (spec: 32px) */
@media (min-width: 1600px) { .ds-content { padding: 32px 28px 48px; } }
.ds-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ds-page-title { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; color: var(--heading-color); }
.ds-page-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted-color); }
.ds-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ds-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-color); margin-bottom: 10px; flex-wrap: wrap; }
.ds-crumbs a { color: var(--muted-color); }
.ds-crumbs a:hover { color: var(--heading-color); }
.ds-crumbs .ds-here { color: var(--heading-color); font-weight: 500; }
.ds-crumbs .ds-chev { width: 12px; height: 12px; color: var(--muted-color); }
.ds-back { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--input-border); border-radius: 7px; background: var(--card-bg); color: var(--heading-color); }
.ds-back:hover { background: var(--surface2); text-decoration: none; }
.ds-section-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--heading-color); }

/* ══════════════════════════════════════════════════════════════════════
   Tabs (SRP ReportsTabBar)
   ══════════════════════════════════════════════════════════════════════ */
.ds-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  padding: 9px 16px; margin-bottom: -2px; font: 500 13.5px var(--font-sans); color: var(--muted-color);
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color .12s, border-color .12s;
}
.ds-tab:hover { color: var(--heading-color); text-decoration: none; }
.ds-tab.active, .ds-tab[aria-selected="true"], .ds-tab[aria-current="page"] { color: var(--accent-text); font-weight: 600; border-bottom-color: var(--q-accent); }

/* ══════════════════════════════════════════════════════════════════════
   Buttons (§7.1)
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1px solid var(--input-border); border-radius: 8px; background: var(--card-bg); color: var(--heading-color);
  font: 500 13px var(--font-sans); line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface2); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn svg { flex: none; }
.btn-primary { background: var(--q-accent); border-color: var(--q-accent); color: var(--q-brand-fg); }
.btn-primary:hover { background: var(--q-accent-dark); border-color: var(--q-accent-dark); }
.btn-soft { background: var(--q-accent-soft); border-color: transparent; color: var(--accent-text); box-shadow: none; }
.btn-soft:hover { background: rgba(var(--primary-rgb), .16); }
.btn-success { background: var(--success); border-color: var(--success); color: var(--on-solid); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-solid); }
.btn-success:hover, .btn-danger:hover { filter: brightness(.94); }
.btn-destructive { color: var(--danger); border-color: var(--danger); }
.btn-sm { height: 30px; padding: 0 10px; border-radius: 7px; }
.btn-icon { width: 36px; padding: 0; }
.btn-sm.btn-icon { width: 30px; }
.btn.on { color: var(--accent-text); border-color: var(--q-accent); }

/* ══════════════════════════════════════════════════════════════════════
   Inputs (§7.2, §7.3, §7.13)
   ══════════════════════════════════════════════════════════════════════ */
.input, .select, .textarea,
.ds-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .ds-form select, .ds-form textarea {
  min-height: 36px; padding: 8px 11px; border: 1px solid var(--input-border); border-radius: var(--input-radius);
  background: var(--input-bg); color: var(--input-color); font: 13px var(--font-sans); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.textarea, .ds-form textarea { min-height: 72px; line-height: 1.5; }
.select, .ds-form select { padding-right: 30px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6877' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
[data-theme="dark"] .select, [data-theme="dark"] .ds-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dcdcdc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.input:focus, .select:focus, .textarea:focus,
.ds-form input:focus, .ds-form select:focus, .ds-form textarea:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--input-disabled-bg); cursor: not-allowed; }
.ds-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ds-label { font-size: 13px; font-weight: 500; color: var(--heading-color); }
.ds-hint { font-size: 12px; color: var(--muted-color); }
input[type=file]::file-selector-button { font: 500 13px var(--font-sans); height: 30px; padding: 0 10px; margin-right: 10px; border: 1px solid var(--input-border); border-radius: 7px; background: var(--card-bg); color: var(--heading-color); cursor: pointer; }
.ds-search { position: relative; display: inline-flex; align-items: center; }
.ds-search svg { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--muted-color); pointer-events: none; }
.ds-search input { height: 30px; width: 180px; padding: 0 10px 0 28px; border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); color: var(--input-color); font: 13px var(--font-sans); outline: none; }
.ds-search input:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); }
.ds-switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex: none; }
.ds-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ds-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--input-border); transition: background .12s; pointer-events: none; }
.ds-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.25); transition: transform .12s; }
.ds-switch input:checked + span { background: var(--q-accent); }
.ds-switch input:checked + span::after { transform: translateX(16px); }
.ds-switch input:focus-visible + span { outline: 2px solid var(--q-accent); outline-offset: 2px; }
.ds-switch input:disabled + span { opacity: .45; }

/* ══════════════════════════════════════════════════════════════════════
   Card (§7.4), KPI strip (§7.6), empty state (§7.12)
   ══════════════════════════════════════════════════════════════════════ */
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 20px 24px; margin-bottom: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; }
.card-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--heading-color); }
.card-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted-color); }
.card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card.alert-success { border-left: 3px solid var(--success); background: var(--badge-success-bg); }
.card.alert-danger { border-left: 3px solid var(--danger); background: var(--badge-danger-bg); }
.card.alert-warning { border-left: 3px solid var(--warning); background: var(--badge-warning-bg); }
.ds-grid { display: grid; gap: 20px; align-items: stretch; }
.ds-grid > .card { margin-bottom: 0; }
.ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; } }

.ds-kpis { display: grid; grid-template-columns: repeat(var(--kpi-n, 4), minmax(0, 1fr)); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); margin-bottom: 20px; overflow: hidden; }
.ds-kpis.embedded { border: 0; box-shadow: none; margin: 0; border-radius: 0; }
.ds-kpi { padding: 18px 22px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; min-width: 0; }
.ds-kpis.compact .ds-kpi { padding: 12px 18px; }
.ds-kpi-label { font-size: 13px; font-weight: 500; color: var(--muted-color); }
.ds-kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--heading-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.ds-kpis.compact .ds-kpi-value { font-size: 20px; }
.ds-kpi-sub { font-size: 12px; color: var(--muted-color); margin-top: 2px; }
.ds-kpi-value.accent { color: var(--accent-text); }
.ds-kpi-value.success { color: var(--success); }
.ds-kpi-value.danger { color: var(--danger); }
.ds-kpi-value.warning { color: var(--warning); }
@media (max-width: 768px) { .ds-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ds-empty { text-align: center; padding: 32px 16px; }
.ds-empty svg { width: 36px; height: 36px; color: var(--muted-color); opacity: .3; margin-bottom: 8px; }
.ds-empty-title { font-size: 14px; color: var(--heading-color); }
.ds-empty-hint { font-size: 13px; color: var(--muted-color); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   Pills & badges (§7.7)
   ══════════════════════════════════════════════════════════════════════ */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; background: var(--badge-gray-bg); color: var(--badge-gray-color); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.xs { padding: 1px 7px; font-size: 11px; }
.badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; background: var(--badge-gray-bg); color: var(--badge-gray-color); }
.tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--badge-gray-bg); color: var(--badge-gray-color); }
.tone-gray    { background: var(--badge-gray-bg);    color: var(--badge-gray-color); }
.tone-primary { background: var(--badge-primary-bg); color: var(--badge-primary-color); }
.tone-info    { background: var(--badge-info-bg);    color: var(--badge-info-color); }
.tone-success { background: var(--badge-success-bg); color: var(--badge-success-color); }
.tone-warning { background: var(--badge-warning-bg); color: var(--badge-warning-color); }
.tone-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-color); }
.tone-orange  { background: var(--badge-orange-bg);  color: var(--badge-orange-color); }
.tone-override{ background: var(--override-bg);      color: var(--override-color); }

/* ══════════════════════════════════════════════════════════════════════
   Tables (§8)
   ══════════════════════════════════════════════════════════════════════ */
.table-scroll { overflow: auto; max-height: 60vh; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); }
@media (min-width: 1600px) { .table-scroll { max-height: 72vh; } }
.table-scroll.no-max { max-height: none; }
.ds-table { width: 100%; border-collapse: collapse; margin: 0; }
.ds-table th, .ds-table td { padding: 11px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--table-border); vertical-align: middle; }
.ds-table th { position: sticky; top: 0; z-index: 2; padding: 9px 14px; background: var(--table-header-bg); color: var(--table-header-color); font-size: 12px; font-weight: 500; white-space: nowrap; border-bottom: none; box-shadow: inset 0 -1px 0 var(--table-border); }
.ds-table tbody tr:hover { background: var(--table-hover-bg); }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table th.num, .ds-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table td.actions, .ds-table th.actions { width: 1px; white-space: nowrap; }
.ds-table th.sortable { cursor: pointer; user-select: none; }
.ds-table th.sortable::after { content: ' ⇅'; opacity: .45; font-size: 11px; }
.ds-table th.sort-asc::after { content: ' ▲'; opacity: 1; color: var(--accent-text); font-size: 10px; }
.ds-table th.sort-desc::after { content: ' ▼'; opacity: 1; color: var(--accent-text); font-size: 10px; }
.ds-table tfoot td, .ds-table tr.total td { font-weight: 600; color: var(--heading-color); background: var(--surface2); border-top: 1px solid var(--table-border); }
.table-link { color: var(--accent-text); font-weight: 500; cursor: pointer; }
.ds-cell-sub { display: block; font-size: 11px; color: var(--muted-color); }
.ds-col-filter { width: 100%; height: 28px; padding: 4px 8px; margin-top: 6px; font: 12px var(--font-sans); border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); color: var(--input-color); }
.ds-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; font-size: 13px; color: var(--muted-color); }

/* ══════════════════════════════════════════════════════════════════════
   Modal (§7.8) and toast (§7.9)
   ══════════════════════════════════════════════════════════════════════ */
.ds-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--modal-overlay); backdrop-filter: blur(2px); animation: ds-fade .15s ease; }
.ds-modal { width: 560px; max-width: 93vw; max-height: 88vh; overflow: auto; padding: 24px; background: var(--modal-bg); border: 1px solid var(--card-border); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); animation: ds-up .18s ease; }
.ds-modal.wide { width: 880px; }
@media (min-width: 1600px) { .ds-modal { width: 640px; } .ds-modal.wide { width: 960px; } }
.ds-modal-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--heading-color); }
.ds-modal-actions { display: flex; gap: 8px; justify-content: flex-start; margin-top: 20px; flex-wrap: wrap; }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-up { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.ds-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; width: min(480px, calc(100vw - 32px)); }
.ds-toast { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--card-radius); padding: 12px 40px 12px 14px; box-shadow: 0 8px 24px rgba(16,24,40,.14); font-size: 13px; color: var(--muted-color); }
.ds-toast.danger { border-left-color: var(--danger); } .ds-toast.warning { border-left-color: var(--warning); } .ds-toast.success { border-left-color: var(--success); }
.ds-toast-title { font-weight: 600; color: var(--heading-color); }
.ds-toast.danger .ds-toast-title { color: var(--danger); }
.ds-toast-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted-color); cursor: pointer; font-size: 16px; }
.ds-toast-close:hover { background: var(--table-header-bg); color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════
   Category hues (cm-apps extension to the spec)
   Every app uses the one MES accent (no app-level hue since the MES redesign;
   never put data-hue on <html>). data-hue on an element colours just that
   subtree, for data categories: ROI sections, HSC components, news
   categories, strategy initiatives. "navy" is the MES blue.
   Every value is AA-checked: white on --hue-fill ≥ 4.5:1 (both themes),
   --hue-text ≥ 4.5:1 on cards and on --hue-soft.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --hue-fill: var(--q-accent); --hue-fill-hover: var(--q-accent-dark); --hue-text: var(--accent-text);
  --hue-soft: var(--q-accent-soft); --hue-soft-2: var(--primary-200); --hue-rgb: var(--primary-rgb);
}
[data-hue="navy"] {
  --hue-fill: #0066a1; --hue-fill-hover: #004f7d; --hue-text: #005a8f; --hue-soft: #e5f0f7; --hue-soft-2: #bfd7e8; --hue-rgb: 0,102,161;
}
[data-hue="sky"] {
  --hue-fill: #0b6e99; --hue-fill-hover: #085a7e; --hue-text: #0a6389; --hue-soft: #e3f3fa; --hue-soft-2: #bfe3f3; --hue-rgb: 11,110,153;
}
[data-hue="violet"] {
  --hue-fill: #5b4bc4; --hue-fill-hover: #4a3ba8; --hue-text: #4f40b3; --hue-soft: #efedfc; --hue-soft-2: #d7d2f6; --hue-rgb: 91,75,196;
}
[data-hue="green"] {
  --hue-fill: #177a47; --hue-fill-hover: #11643a; --hue-text: #146d3f; --hue-soft: #e6f5ec; --hue-soft-2: #c2e6d0; --hue-rgb: 23,122,71;
}
[data-hue="amber"] {
  --hue-fill: #9c5a06; --hue-fill-hover: #834b05; --hue-text: #8c5006; --hue-soft: #fdf2df; --hue-soft-2: #f6dcad; --hue-rgb: 156,90,6;
}
[data-hue="orange"] {
  --hue-fill: #b04d17; --hue-fill-hover: #933f12; --hue-text: #a2470f; --hue-soft: #fdeee4; --hue-soft-2: #f7cfb6; --hue-rgb: 176,77,23;
}
[data-hue="plum"] {
  --hue-fill: #8a3a86; --hue-fill-hover: #732f70; --hue-text: #7d3479; --hue-soft: #f7eaf6; --hue-soft-2: #e8c6e5; --hue-rgb: 138,58,134;
}
[data-hue="teal"] {
  --hue-fill: #0f766e; --hue-fill-hover: #0c5f58; --hue-text: #0d6b63; --hue-soft: #e0f4f1; --hue-soft-2: #b6e6de; --hue-rgb: 15,118,110;
}
[data-theme="dark"][data-hue="navy"], [data-theme="dark"] [data-hue="navy"] {
  --hue-fill: #1f74ad; --hue-fill-hover: #2b86c4; --hue-text: #94d1f7; --hue-soft: rgba(60,170,240,.16); --hue-soft-2: rgba(60,170,240,.30); --hue-rgb: 60,170,240;
}
[data-theme="dark"][data-hue="sky"], [data-theme="dark"] [data-hue="sky"] {
  --hue-fill: #1479a6; --hue-fill-hover: #1f88b6; --hue-text: #c9ecfa; --hue-soft: rgba(56,189,248,.16); --hue-soft-2: rgba(56,189,248,.30); --hue-rgb: 56,189,248;
}
[data-theme="dark"][data-hue="violet"], [data-theme="dark"] [data-hue="violet"] {
  --hue-fill: #6556cc; --hue-fill-hover: #7364d6; --hue-text: #e4dfff; --hue-soft: rgba(169,159,240,.16); --hue-soft-2: rgba(169,159,240,.30); --hue-rgb: 169,159,240;
}
[data-theme="dark"][data-hue="green"], [data-theme="dark"] [data-hue="green"] {
  --hue-fill: #1a7f4b; --hue-fill-hover: #218c55; --hue-text: #bdf2d3; --hue-soft: rgba(74,222,128,.16); --hue-soft-2: rgba(74,222,128,.30); --hue-rgb: 74,222,128;
}
[data-theme="dark"][data-hue="amber"], [data-theme="dark"] [data-hue="amber"] {
  --hue-fill: #a15e07; --hue-fill-hover: #b06a0c; --hue-text: #fde3b3; --hue-soft: rgba(251,191,36,.16); --hue-soft-2: rgba(251,191,36,.30); --hue-rgb: 251,191,36;
}
[data-theme="dark"][data-hue="orange"], [data-theme="dark"] [data-hue="orange"] {
  --hue-fill: #b5521b; --hue-fill-hover: #c45f25; --hue-text: #fed7c0; --hue-soft: rgba(251,146,60,.16); --hue-soft-2: rgba(251,146,60,.30); --hue-rgb: 251,146,60;
}
[data-theme="dark"][data-hue="plum"], [data-theme="dark"] [data-hue="plum"] {
  --hue-fill: #904092; --hue-fill-hover: #9e4da0; --hue-text: #f7d9f4; --hue-soft: rgba(232,121,249,.16); --hue-soft-2: rgba(232,121,249,.30); --hue-rgb: 232,121,249;
}
[data-theme="dark"][data-hue="teal"], [data-theme="dark"] [data-hue="teal"] {
  --hue-fill: #0f7d74; --hue-fill-hover: #148a80; --hue-text: #c2f1ea; --hue-soft: rgba(45,212,191,.16); --hue-soft-2: rgba(45,212,191,.30); --hue-rgb: 45,212,191;
}
[data-hue] {
  --q-accent: var(--hue-fill); --q-accent-dark: var(--hue-fill-hover); --q-accent-soft: var(--hue-soft);
  --primary: var(--hue-fill); --primary-hover: var(--hue-fill-hover); --primary-rgb: var(--hue-rgb);
  --primary-100: var(--hue-soft); --primary-200: var(--hue-soft-2);
  --accent-text: var(--hue-text); --link-color: var(--hue-text); --info: var(--hue-text); --info-100: var(--hue-soft);
  --input-focus-border: var(--hue-fill); --input-focus-shadow: 0 0 0 3px rgba(var(--hue-rgb), .18);
  --badge-primary-bg: var(--hue-soft); --badge-primary-color: var(--hue-text);
  --badge-info-bg: var(--hue-soft); --badge-info-color: var(--hue-text);
  --sidebar-active-bg: var(--hue-soft); --sidebar-active-color: var(--hue-text);
}
[data-theme="dark"][data-hue], [data-theme="dark"] [data-hue] { --input-focus-border: var(--hue-text); }

/* ── Colourful components (use the app hue; tone modifiers use semantic/chart tokens) ── */
/* App tile in the topbar, before .ds-app-name */
.ds-app-mark { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--hue-fill); color: #fff; }
.ds-app-mark svg { width: 17px; height: 17px; }

/* Tinted page-header band: first thing inside .ds-content */
.ds-hero { margin: -28px -28px 24px; padding: 26px 28px 22px; background: var(--hue-soft); border-bottom: 1px solid var(--hue-soft-2); }
@media (min-width: 1600px) { .ds-hero { margin: -32px -28px 28px; padding-top: 30px; } }
.ds-hero .ds-page-head { margin-bottom: 0; }
.ds-hero .ds-eyebrow, .ds-eyebrow { font-size: 13px; font-weight: 600; color: var(--hue-text); margin-bottom: 4px; }
.ds-hero + .ds-tabs { margin-top: -8px; }

/* Accent top line on a card */
/* Thin lines/dots use the hue's bright variant (rgb(--hue-rgb)): it stays ≥3:1 on dark cards,
   where the darker fill (made for white text) would not. */
.card.accent-top { border-top: 3px solid rgb(var(--hue-rgb)); }

/* Card / section icon: tinted square with the hue (or a tone) */
.ds-icon { flex: none; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ic-bg, var(--hue-soft)); color: var(--ic-fg, var(--hue-text)); }
.ds-icon svg { width: 17px; height: 17px; }
.ds-icon.lg { width: 40px; height: 40px; border-radius: 10px; } .ds-icon.lg svg { width: 20px; height: 20px; }
.ds-icon.solid { background: var(--hue-fill); color: #fff; }
.card-title.with-icon { display: inline-flex; align-items: center; gap: 10px; }

/* KPI cells with a coloured top line + coloured value */
.ds-kpi.accent { box-shadow: inset 0 3px 0 var(--kpi-c, rgb(var(--hue-rgb))); }
.ds-kpi.accent .ds-kpi-value { color: var(--kpi-t, var(--hue-text)); }
.ds-kpi .ds-kpi-label { display: flex; align-items: center; gap: 8px; }
.ds-kpi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kpi-c, rgb(var(--hue-rgb))); flex: none; }

/* Tone modifiers for .ds-kpi / .ds-icon (chart hue for lines & dots, AA text colour for values/glyphs) */
.k-success { --kpi-c: var(--chart-good);        --kpi-t: var(--success);            --ic-bg: var(--badge-success-bg); --ic-fg: var(--badge-success-color); }
.k-warning { --kpi-c: var(--chart-warn);        --kpi-t: var(--warning);            --ic-bg: var(--badge-warning-bg); --ic-fg: var(--badge-warning-color); }
.k-danger  { --kpi-c: var(--chart-bad);         --kpi-t: var(--danger);             --ic-bg: var(--badge-danger-bg);  --ic-fg: var(--badge-danger-color); }
.k-orange  { --kpi-c: var(--chart-warn-strong); --kpi-t: var(--badge-orange-color); --ic-bg: var(--badge-orange-bg);  --ic-fg: var(--badge-orange-color); }
.k-violet  { --kpi-c: var(--chart-3);           --kpi-t: var(--override-color);     --ic-bg: var(--override-bg);      --ic-fg: var(--override-color); }
.k-neutral { --kpi-c: var(--badge-gray-color);     --kpi-t: var(--heading-color);      --ic-bg: var(--badge-gray-bg);    --ic-fg: var(--badge-gray-color); }

/* Solid pills (stronger status): text on a solid fill */
.pill.solid { color: var(--on-solid); }
.pill.solid.tone-primary, .pill.solid.tone-info { background: var(--q-accent); color: #fff; }
.pill.solid.tone-success { background: var(--success); }
.pill.solid.tone-warning { background: var(--warning); }
.pill.solid.tone-danger  { background: var(--danger); }
.pill.solid.tone-gray    { background: var(--badge-gray-color); color: var(--card-bg); }

/* Hue-tinted table header */
.ds-table.tinted th { background: var(--hue-soft); color: var(--hue-text); box-shadow: inset 0 -1px 0 var(--hue-soft-2); }

/* ══════════════════════════════════════════════════════════════════════
   Responsive (§6.3)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ds-topbar { padding: 8px 16px; flex-wrap: wrap; }
  .ds-app-sub { display: none; }
  .ds-content { padding: 16px; }
  .ds-hero { margin: -16px -16px 20px; padding: 18px 16px 16px; }
  .card { padding: 16px; }
}
/* ══════════════════════════════════════════════════════════════════════
   Phone layer (cm-apps, after SRP §8.5): one block, ≤ 640px only, so desktop and
   tablet are untouched. It works through class hooks on the shared components:
   - page head: title takes the full width, actions wrap below it
   - card head: tools go on their own row; toolbars (.ds-toolbar, .card-tools): search fills the row
   - KPIs two per row with full values; .tiles-sm → two per row; .stack-sm → one column
   - tabs scroll sideways; dialogs become full-screen sheets
   - touch: buttons, selects, inputs and tabs at least 40px (icon buttons 40 × 40)
   - tables: cm-ds.js (cmds.mobileTables) turns a table that doesn't fit into cards,
     or a compact list when it has more than 6 rows; opt out with data-cards="off"
   ══════════════════════════════════════════════════════════════════════ */
.phone-only { display: none !important; }
@media (max-width: 640px) {
  .phone-only { display: revert !important; }
  .desk-only { display: none !important; }

  /* Page and card heads */
  .ds-page-head > :first-child { flex: 1 1 100%; min-width: 0; }
  .ds-page-actions { flex: 1 1 100%; }
  .ds-page-title { font-size: 21px; overflow-wrap: anywhere; }
  .card-head > :first-child { flex: 1 1 100%; min-width: 0; }
  .card-tools, .card-head-actions { flex: 1 1 100%; }
  .ds-toolbar, .card-tools { display: flex; flex-wrap: wrap; gap: 8px; }
  .ds-toolbar .ds-search, .card-tools .ds-search { flex: 1 1 100%; }
  .ds-toolbar .ds-search input, .card-tools .ds-search input { width: 100%; }
  .ds-toolbar > .select, .ds-toolbar > select, .card-tools > .select { flex: 1 1 140px; min-width: 0; }

  /* Layout helpers */
  .stack-sm { display: flex !important; flex-direction: column; align-items: stretch; }
  .stack-sm > * { width: auto; max-width: 100%; min-width: 0; }
  .tiles-sm { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }

  /* KPIs: two per row, values wrap instead of being cut */
  .ds-kpi { padding: 14px 16px; }
  .ds-kpi-value { white-space: normal; overflow-wrap: anywhere; font-size: 22px; }
  .ds-kpis .ds-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Tabs scroll sideways (already) and are touch-sized */
  .ds-tab { min-height: 40px; }

  /* Touch size */
  .btn, .btn-sm { min-height: 40px; height: auto; }
  .btn-icon, .btn-sm.btn-icon { width: 40px; min-width: 40px; }
  .ds-icon-btn, .ds-topbar .cm-home { width: 40px; height: 40px; }
  .input, .select, .ds-search input,
  .ds-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .ds-form select { min-height: 40px; height: auto; font-size: 16px; }
  .ds-col-filter { min-height: 40px; }
  .ds-toast-close { width: 40px; height: 40px; }
  .ds-back { width: 40px; height: 40px; }
  input[type=file] { min-height: 40px; max-width: 100%; }

  /* Dialogs: full-screen sheets */
  .ds-modal-overlay { padding: 0; align-items: stretch; }
  .ds-modal, .ds-modal.wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .ds-modal-actions .btn { flex: 1 1 auto; }

  /* Tables → cards / compact list (classes set by cmds.mobileTables) */
  table.m-cards, table.m-compact { display: block; width: 100%; border: 0; }
  table.m-cards thead, table.m-compact thead { display: none; }
  table.m-cards tbody, table.m-compact tbody { display: flex; flex-direction: column; gap: 10px; }
  table.m-cards tr, table.m-compact tr { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 12px 14px; }
  table.m-cards tbody tr:hover, table.m-compact tbody tr:hover { background: var(--card-bg); }
  table.m-cards td, table.m-compact td { display: block; border: 0 !important; padding: 3px 0; text-align: left !important; white-space: normal; width: auto !important; font-size: 13.5px; }
  table.m-cards td::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted-color); }
  table.m-cards td.m-title, table.m-compact td.m-title { font-size: 15px; font-weight: 600; color: var(--heading-color); padding-bottom: 6px; }
  table.m-cards td.m-title::before, table.m-cards td.m-id::before, table.m-compact td.m-title::before, table.m-compact td.m-id::before { display: none; }
  table.m-cards td.m-id, table.m-compact td.m-id { font-size: 12px; color: var(--muted-color); padding: 0 0 4px; }
  table.m-cards td.m-title { order: -1; }
  table.m-cards td.m-id { order: -2; }
  table.m-cards td.m-empty, table.m-compact td.m-empty, table.m-cards td.m-check, table.m-compact td.m-check { display: none; }
  table.m-cards td.actions, table.m-compact td.actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
  table.m-cards td.actions::before, table.m-compact td.actions::before { display: none; }
  table.m-cards td.actions .btn, table.m-compact td.actions .btn { flex: 1 1 auto; min-height: 44px; }
  /* Compact list: name line, then wrapping "label value" pairs */
  table.m-compact tr { padding: 10px 12px; display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; align-items: baseline; }
  table.m-compact td { display: inline; padding: 0; font-size: 13px; }
  table.m-compact td.m-title { flex: 1 1 100%; padding: 0 0 4px; order: -1; }
  table.m-compact td.m-id { flex: 1 1 100%; padding: 0 0 4px; order: -2; }
  table.m-compact td.actions { flex: 1 1 100%; }
  table.m-compact td:not(.m-title):not(.m-id):not(.actions)::before { content: attr(data-label) ' '; color: var(--muted-color); font-size: 12px; }
  table.m-compact tr.m-more, table.m-cards tr.m-more { display: none; }
  .m-unboxed { max-height: none !important; overflow: visible !important; border: 0 !important; background: transparent !important; }
  .m-showall { width: 100%; margin-top: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   App version footer and "new version available" banner (cm-ds.js + cm-live.js)
   ══════════════════════════════════════════════════════════════════════ */
footer.ds-version { padding: 8px 28px 24px; color: var(--muted-color); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
[data-ds-version] { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
/* Live-connection dot (SRP style): green while the /__live socket is open, amber while reconnecting */
.ds-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--chart-warn); box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.ds-live.on { background: var(--chart-good); box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.ds-newversion { position: sticky; top: var(--topbar-height); z-index: 49; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 28px; background: var(--q-accent); color: #fff; font-size: 14px; }
.ds-newversion b { font-weight: 600; }
.ds-newversion .btn { background: #fff; color: var(--q-accent); border-color: #fff; }
.ds-newversion .btn:hover { background: rgba(255,255,255,.9); }
.ds-newversion-x { background: none; border: 0; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; }
@media (max-width: 640px) {
  footer.ds-version { padding: 8px 16px 20px; text-align: center; }
  .ds-newversion { padding: 8px 16px; justify-content: space-between; top: 0; }
  .ds-newversion > span { flex: 1 1 100%; }
  .ds-newversion .btn { flex: 1 1 auto; }
  .ds-newversion-x { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .ds-topbar { display: none; } }