/* ==========================================================================
   CGWA Portal — design tokens and components layered on Bootstrap 5.3.
   Tokens come from the original telemetry dashboard: navy panels, amber
   accent, IBM Plex Mono for readings. Light and dark themes switch on
   <html data-bs-theme>. Use the tokens — never hard-code colours in pages.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --cg-bg: #EEF3F9;
  --cg-panel: #FFFFFF;
  --cg-panel-2: #F4F7FA;
  --cg-line: #D0DAE5;
  --cg-line-2: #B7C6D6;
  --cg-ink: #0D1A2B;
  --cg-muted: #526479;
  --cg-amber: #E3A200;
  --cg-amber-ink: #8A5A00;
  --cg-on-amber: #1B1300;
  --cg-ok: #1B8458;
  --cg-bad: #C62828;
  --cg-warn: #A86A00;
  --cg-info: #1F6FB5;
  --cg-grid: rgba(13, 26, 43, .09);
  --cg-shadow: 0 6px 20px rgba(13, 26, 43, .07);
  --cg-header: linear-gradient(110deg, #0B1F3A 0%, #123A6B 45%, #0E5E7A 80%, #0F766E 100%);
  --cg-font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cg-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cg-rail-w: 252px;
  --cg-header-h: 58px;

  --bs-body-bg: var(--cg-bg);
  --bs-body-color: var(--cg-ink);
  --bs-border-color: var(--cg-line);
  --bs-secondary-color: var(--cg-muted);
  --bs-primary: #0E5E7A;
  --bs-primary-rgb: 14, 94, 122;
  --bs-link-color: #0E5E7A;
  --bs-link-color-rgb: 14, 94, 122;
  --bs-font-sans-serif: var(--cg-font);
}

[data-bs-theme="dark"] {
  --cg-bg: #081322;
  --cg-panel: #0F2036;
  --cg-panel-2: #0D1B2F;
  --cg-line: #1E3858;
  --cg-line-2: #2A4A70;
  --cg-ink: #E6EDF5;
  --cg-muted: #8DA3BC;
  --cg-amber: #F2A900;
  --cg-amber-ink: #F5B82E;
  --cg-ok: #34C08A;
  --cg-bad: #F0524F;
  --cg-warn: #F2A900;
  --cg-info: #5EA8E8;
  --cg-grid: rgba(141, 163, 188, .14);
  --cg-shadow: 0 6px 22px rgba(0, 0, 0, .28);

  --bs-body-bg: var(--cg-bg);
  --bs-body-color: var(--cg-ink);
  --bs-border-color: var(--cg-line);
  --bs-secondary-color: var(--cg-muted);
  --bs-primary: #38BDF8;
  --bs-primary-rgb: 56, 189, 248;
  --bs-link-color: #5EA8E8;
  --bs-link-color-rgb: 94, 168, 232;
  --bs-tertiary-bg: var(--cg-panel-2);
  --bs-secondary-bg: var(--cg-panel-2);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--cg-header-h) + 8px); }
body {
  font-family: var(--cg-font);
  font-size: 0.9375rem;
  line-height: 1.5;
  background: var(--cg-bg);
  color: var(--cg-ink);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
.mono, .num { font-family: var(--cg-mono); font-variant-numeric: tabular-nums; }
.text-muted, .muted { color: var(--cg-muted) !important; }
:focus-visible { outline: 2px solid var(--cg-amber); outline-offset: 2px; }
h1, h2, h3 { letter-spacing: -0.01em; font-weight: 600; }

/* ---------- Buttons & forms ---------- */
.btn { min-height: 38px; border-radius: 6px; font-weight: 500; }
.btn-sm { min-height: 32px; }
.btn-primary {
  --bs-btn-bg: var(--cg-amber); --bs-btn-border-color: var(--cg-amber); --bs-btn-color: var(--cg-on-amber);
  --bs-btn-hover-bg: #FFC93C; --bs-btn-hover-border-color: #FFC93C; --bs-btn-hover-color: var(--cg-on-amber);
  --bs-btn-active-bg: #D69900; --bs-btn-active-border-color: #D69900; --bs-btn-active-color: var(--cg-on-amber);
  --bs-btn-disabled-bg: var(--cg-amber); --bs-btn-disabled-border-color: var(--cg-amber); --bs-btn-disabled-color: var(--cg-on-amber);
  font-weight: 600;
}
.btn-outline-secondary { --bs-btn-color: var(--cg-ink); --bs-btn-border-color: var(--cg-line-2); --bs-btn-hover-bg: var(--cg-panel-2); --bs-btn-hover-color: var(--cg-ink); --bs-btn-hover-border-color: var(--cg-amber); }
.form-control, .form-select { border-color: var(--cg-line-2); background-color: var(--cg-panel-2); color: var(--cg-ink); min-height: 38px; }
.form-control:focus, .form-select:focus { border-color: var(--cg-amber); box-shadow: 0 0 0 .2rem rgba(242, 169, 0, .2); background-color: var(--cg-panel); color: var(--cg-ink); }
.form-label { font-size: .84rem; color: var(--cg-muted); margin-bottom: .3rem; font-weight: 500; }
.form-label.required::after { content: ' *'; color: var(--cg-bad); }
.form-check-input:checked { background-color: var(--cg-amber); border-color: var(--cg-amber); }
.invalid-feedback { font-size: .8rem; }

/* ---------- Header ---------- */
.cg-header {
  position: sticky; top: 0; z-index: 1030;
  height: var(--cg-header-h);
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; gap: 12px;
  padding-inline: 14px;
  background: var(--cg-header);
  color: #fff;
  box-shadow: 0 4px 18px rgba(8, 19, 34, .35);
}
.cg-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; }
.cg-brand:hover { color: #fff; }
.cg-mark {
  width: 32px; height: 32px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #FFD866, #F2A900 60%, #FB923C);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .15);
}
.cg-mark svg { width: 18px; height: 18px; }
.cg-logo { display: block; height: 28px; width: auto; max-width: 100%; flex: none; }
.cg-header .cg-brand .cg-logo { padding-right: 10px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, .25); }
.cg-logo--large { height: 44px; }
.cg-logo--on-dark { display: none; }                                /* phone sign-in card: dark logo on light, white logo on dark */
[data-bs-theme="dark"] .cg-login-card .cg-logo--on-light { display: none; }
[data-bs-theme="dark"] .cg-login-card .cg-logo--on-dark { display: block; }
.cg-brand b { display: block; font-size: .98rem; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.cg-brand small { display: block; font-size: .74rem; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.cg-header .spacer { flex: 1; }
.cg-clock { font-family: var(--cg-mono); font-size: .85rem; color: #FFE29A; white-space: nowrap; }
.cg-header .btn-icon {
  width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; padding: 0;
}
.cg-header .btn-icon:hover { background: rgba(255, 255, 255, .14); }
.cg-header .btn-icon i { font-size: 1.25rem; }
.cg-user-btn { display: flex; align-items: center; gap: 8px; color: #fff; background: transparent; border: 0; padding: 4px; border-radius: 8px; }
.cg-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); font-weight: 600; font-size: .85rem; color: #fff;
}
.cg-user-btn .who { text-align: left; line-height: 1.15; }
.cg-user-btn .who b { display: block; font-size: .85rem; font-weight: 600; }
.cg-user-btn .who small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .7); }

/* ---------- Shell ---------- */
.cg-shell { display: flex; min-height: calc(100vh - var(--cg-header-h)); }
.cg-rail {
  width: var(--cg-rail-w); flex: none; background: var(--cg-panel-2); border-right: 1px solid var(--cg-line);
  --bs-offcanvas-width: 280px; --bs-offcanvas-bg: var(--cg-panel-2);
}
@media (min-width: 992px) {
  .cg-rail { position: sticky; top: var(--cg-header-h); height: calc(100vh - var(--cg-header-h)); overflow-y: auto; }
}
.cg-rail .offcanvas-body { padding: 14px 10px 30px; }
.cg-nav-group { margin-bottom: 14px; }
.cg-nav-group h6 { font-size: .74rem; color: var(--cg-muted); font-weight: 500; margin: 0 0 4px 12px; }
.cg-nav a {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px;
  color: var(--cg-muted); text-decoration: none; font-size: .92rem; min-height: 40px;
}
.cg-nav a i { font-size: 1.15rem; width: 20px; text-align: center; }
.cg-nav a:hover { color: var(--cg-ink); background: var(--cg-panel); }
.cg-nav a[aria-current="page"] { color: var(--cg-ink); background: var(--cg-panel); box-shadow: inset 3px 0 0 var(--cg-amber); font-weight: 500; }
.cg-nav .badge-count {
  margin-left: auto; font-family: var(--cg-mono); font-size: .72rem; background: var(--cg-bad); color: #fff;
  border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center;
}
.cg-main { flex: 1; min-width: 0; padding: 22px 24px 60px; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.cg-nav-skeleton { height: 34px; border-radius: 6px; margin: 6px 4px; background: var(--cg-panel); opacity: .6; }

/* ---------- Page head ---------- */
.cg-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cg-page-head h1 { font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); margin: 0; }
.cg-page-head p { margin: 4px 0 0; color: var(--cg-muted); max-width: 72ch; font-size: .9rem; }
.cg-ref { font-size: .74rem; color: var(--cg-muted); border: 1px dashed var(--cg-line-2); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }

/* ---------- Panels ---------- */
.cg-panel { background: var(--cg-panel); border: 1px solid var(--cg-line); border-radius: 8px; padding: 16px; box-shadow: var(--cg-shadow); }
.cg-panel + .cg-panel { margin-top: 16px; }
.cg-panel > h2, .cg-panel-title { font-size: 1.02rem; margin: 0 0 12px; }
.cg-panel.flush { padding: 0; }
.cg-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; align-items: end; margin-bottom: 14px; }
.cg-filters .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cg-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }

/* KPI strip */
.cg-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 1px; background: var(--cg-line); border: 1px solid var(--cg-line); border-radius: 8px; overflow: hidden; margin-bottom: 18px;
}
.cg-kpi { background: var(--cg-panel); padding: 12px 14px; }
.cg-kpi small { display: block; color: var(--cg-muted); font-size: .78rem; }
.cg-kpi b { font-family: var(--cg-mono); font-size: 1.3rem; font-weight: 500; display: block; }
.cg-kpi.ok b { color: var(--cg-ok); } .cg-kpi.bad b { color: var(--cg-bad); } .cg-kpi.warn b { color: var(--cg-warn); }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cg-line-2); border-radius: 999px;
  padding: 1px 10px; font-size: .76rem; white-space: nowrap; color: var(--cg-ink); background: transparent; line-height: 1.6;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cg-muted); }
.chip.ok::before { background: var(--cg-ok); } .chip.bad::before { background: var(--cg-bad); }
.chip.warn::before { background: var(--cg-warn); } .chip.info::before { background: var(--cg-info); }
.chip.plain::before { display: none; }
.chip.bad { border-color: var(--cg-bad); color: var(--cg-bad); }

/* ---------- Instrument tiles (live machines) ---------- */
.cg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.cg-tile { background: var(--cg-panel); border: 1px solid var(--cg-line); border-radius: 8px; padding: 12px 14px 10px; position: relative; box-shadow: var(--cg-shadow); min-width: 0; }
.cg-tile.breach { border-color: var(--cg-bad); box-shadow: inset 0 0 0 1px var(--cg-bad); }
.cg-tile.offline .t-val, .cg-tile.no_data .t-val { color: var(--cg-muted); }
.t-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: .84rem; color: var(--cg-muted); }
.t-head .code { font-family: var(--cg-mono); color: var(--cg-amber-ink); font-size: .84rem; font-weight: 600; }
.t-head .name { color: var(--cg-ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-val { font-family: var(--cg-mono); font-size: 2rem; font-weight: 500; line-height: 1.1; margin: 8px 0 6px; letter-spacing: -.02em; }
.t-val small { font-size: .78rem; color: var(--cg-muted); margin-left: 6px; letter-spacing: 0; }
.cg-tile.breach .t-val { color: var(--cg-bad); }
.t-bar { position: relative; height: 6px; background: var(--cg-panel-2); border: 1px solid var(--cg-line); border-radius: 3px; }
.t-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cg-amber); border-radius: 2px; transition: width .4s; }
.cg-tile.breach .t-bar i { background: var(--cg-bad); }
.t-bar .lim { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--cg-ink); opacity: .65; }
.t-spark { display: block; width: 100%; height: 40px; margin-top: 8px; }
.t-spark .line { fill: none; stroke: var(--cg-amber); stroke-width: 1.6; }
.t-spark .area { fill: var(--cg-amber); opacity: .12; }
.cg-tile.breach .t-spark .line { stroke: var(--cg-bad); }
.cg-tile.breach .t-spark .area { fill: var(--cg-bad); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .82rem; margin-top: 8px; }
.kv span { color: var(--cg-muted); }
.kv b { font-weight: 500; text-align: right; font-family: var(--cg-mono); }

/* ---------- Tables (cards on phones) ---------- */
.cg-table-wrap { overflow-x: auto; border: 1px solid var(--cg-line); border-radius: 8px; background: var(--cg-panel); }
.cg-table { width: 100%; border-collapse: collapse; font-size: .87rem; margin: 0; }
.cg-table th, .cg-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--cg-line); vertical-align: top; }
.cg-table th { font-weight: 500; color: var(--cg-muted); background: var(--cg-panel-2); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.cg-table tr:last-child td { border-bottom: 0; }
.cg-table td { overflow-wrap: anywhere; }          /* a long unbroken name must wrap, not widen the page */
.cg-table td.num, .cg-table td.actions { overflow-wrap: normal; }
.min-w-0 { min-width: 0; }
.cg-table td.num, .cg-table th.num { text-align: right; white-space: nowrap; }
.cg-table td.breach { color: var(--cg-bad); font-weight: 600; }
.cg-table tbody tr:hover td { background: color-mix(in srgb, var(--cg-panel-2) 70%, transparent); }
.cg-table .actions { white-space: nowrap; text-align: right; }
.cg-empty { padding: 28px 16px; text-align: center; color: var(--cg-muted); }
.cg-empty .btn { margin-top: 10px; }
.cg-scroll { max-height: 480px; overflow: auto; }

.cg-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; font-size: .85rem; }
.cg-pager .info { color: var(--cg-muted); font-family: var(--cg-mono); }

/* ---------- Alerts list ---------- */
.cg-alert { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--cg-line); }
.cg-alert:last-child { border-bottom: 0; }
.cg-alert .when { font-family: var(--cg-mono); font-size: .78rem; color: var(--cg-muted); }
.cg-alert .what b { font-weight: 600; }
.cg-alert .what b.critical { color: var(--cg-bad); }
.cg-alert .what b.warning { color: var(--cg-warn); }
.cg-alert .meta { font-size: .8rem; color: var(--cg-muted); margin-top: 3px; }

/* ---------- Checklist ---------- */
.cg-check { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--cg-line); align-items: start; }
.cg-check:last-child { border-bottom: 0; }
.mk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 700; color: #fff; }
.mk.pass { background: var(--cg-ok); } .mk.warn { background: var(--cg-warn); color: var(--cg-on-amber); }
.mk.fail { background: var(--cg-bad); } .mk.pending, .mk.na { background: var(--cg-line-2); color: var(--cg-ink); }
.cg-check .t { font-weight: 500; }
.cg-check .d { color: var(--cg-muted); font-size: .84rem; }
.cg-tag { font-size: .7rem; border: 1px solid var(--cg-line-2); border-radius: 3px; padding: 0 6px; color: var(--cg-muted); white-space: nowrap; vertical-align: 1px; }
.cg-score { font-family: var(--cg-mono); font-size: 2.2rem; font-weight: 500; line-height: 1; }

pre.cg-code { background: var(--cg-panel-2); border: 1px solid var(--cg-line); border-radius: 6px; padding: 12px; overflow: auto; font-size: .78rem; max-height: 340px; margin: 0; font-family: var(--cg-mono); color: var(--cg-ink); }

/* Permission matrix */
.cg-matrix th, .cg-matrix td { text-align: center; }
.cg-matrix th:first-child, .cg-matrix td:first-child { text-align: left; }
.cg-matrix .module { background: var(--cg-panel-2); font-weight: 600; font-size: .78rem; color: var(--cg-muted); text-align: left !important; }
.cg-matrix input[type=checkbox] { width: 20px; height: 20px; }

/* Charts */
.cg-chart { width: 100%; height: 340px; }
.cg-chart.sm { height: 180px; }

/* ---------- Toasts / modal ---------- */
.cg-toasts { position: fixed; z-index: 1090; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; width: min(440px, 92vw); }
.cg-toast { background: var(--cg-ink); color: var(--cg-bg); padding: 10px 14px; border-radius: 6px; font-size: .88rem; box-shadow: var(--cg-shadow); display: flex; gap: 10px; align-items: flex-start; }
.cg-toast.error { background: var(--cg-bad); color: #fff; }
.cg-toast.success { background: var(--cg-ok); color: #fff; }
.modal-content { background: var(--cg-panel); border-color: var(--cg-line); color: var(--cg-ink); }
.modal-header, .modal-footer { border-color: var(--cg-line); }
.dropdown-menu { --bs-dropdown-bg: var(--cg-panel); --bs-dropdown-link-color: var(--cg-ink); --bs-dropdown-border-color: var(--cg-line); }

.cg-loading { position: relative; min-height: 80px; }
.cg-loading::after {
  content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--cg-panel) 60%, transparent);
  border-radius: 8px;
}
.note { border-left: 3px solid var(--cg-amber); padding: 8px 12px; background: var(--cg-panel-2); border-radius: 0 6px 6px 0; font-size: .86rem; }

/* ---------- Login ---------- */
.cg-login {
  min-height: 100vh; display: grid; grid-template-columns: 1fr; background:
    radial-gradient(900px 500px at 100% -10%, rgba(56, 189, 248, .14), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(167, 139, 250, .14), transparent 60%),
    radial-gradient(800px 600px at 60% 110%, rgba(45, 212, 191, .14), transparent 60%), var(--cg-bg);
}
.cg-login-side { display: none; background: var(--cg-header); color: #fff; padding: 48px; flex-direction: column; justify-content: space-between; }
.cg-login-side h1 { font-size: clamp(1.8rem, 1rem + 2vw, 2.6rem); line-height: 1.15; max-width: 16ch; margin: 18px 0 14px; }
.cg-login-side p { color: rgba(255, 255, 255, .78); max-width: 44ch; }
.cg-gauge { font-family: var(--cg-mono); display: grid; gap: 10px; max-width: 360px; }
.cg-gauge div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, .18); padding-bottom: 8px; font-size: .88rem; }
.cg-gauge b { color: #FFE29A; font-weight: 500; }
.cg-login-main { display: grid; place-items: center; padding: 28px 16px; padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
.cg-login-card { width: min(420px, 100%); background: var(--cg-panel); border: 1px solid var(--cg-line); border-radius: 10px; padding: 26px 24px; box-shadow: var(--cg-shadow); }
.cg-login-card .cg-mark { width: 40px; height: 40px; }
.cg-segment { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--cg-line-2); border-radius: 7px; overflow: hidden; }
.cg-segment input { position: absolute; opacity: 0; pointer-events: none; }
.cg-segment label { text-align: center; padding: 9px 8px; cursor: pointer; color: var(--cg-muted); font-weight: 500; font-size: .9rem; min-height: 42px; display: grid; place-items: center; }
.cg-segment input:checked + label { background: var(--cg-amber); color: var(--cg-on-amber); font-weight: 600; }
.cg-segment input:focus-visible + label { outline: 2px solid var(--cg-amber); outline-offset: -3px; }
.cg-captcha { display: flex; gap: 8px; align-items: center; }
.cg-captcha img { height: 46px; border-radius: 6px; border: 1px solid var(--cg-line); background: #F0F4F9; }
@media (min-width: 992px) {
  .cg-login { grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); }
  .cg-login-side { display: flex; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .cg-main { padding: 16px 14px 70px; }
  .cg-user-btn .who { display: none; }
}
@media (max-width: 600px) {
  body { font-size: .9rem; }
  .cg-clock { display: none; }
  .cg-brand small { max-width: 52vw; }
  .cg-strip { grid-template-columns: 1fr 1fr; }
  .cg-kpi b { font-size: 1.08rem; }
  .cg-tiles { grid-template-columns: 1fr; }
  .t-val { font-size: 1.6rem; }
  .cg-panel { padding: 12px; }
  .cg-chart { height: 260px; }
  .form-control, .form-select { font-size: 16px; }   /* stops iOS zoom on focus */
  .btn { min-height: 42px; }
  .cg-alert { grid-template-columns: 1fr; gap: 6px; }
  .cg-check { grid-template-columns: 28px 1fr; }
  .cg-check > .act { grid-column: 2; }
  /* Tables become cards */
  .cg-table-wrap.cards { border: 0; background: transparent; overflow: visible; }
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { background: var(--cg-panel); border: 1px solid var(--cg-line); border-radius: 8px; margin-bottom: 8px; padding: 6px 0; }
  table.cards td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border: 0; padding: 5px 12px; text-align: right; }
  table.cards td::before { content: attr(data-label); color: var(--cg-muted); font-family: var(--cg-font); font-size: .78rem; text-align: left; flex: 0 0 42%; }
  table.cards td:first-child { font-weight: 600; border-bottom: 1px solid var(--cg-line); padding-bottom: 7px; margin-bottom: 3px; }
  table.cards td[data-label=""]::before { display: none; }
  table.cards td.actions { justify-content: flex-end; }
  table.cards tbody tr:hover td { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .cg-header, .cg-rail, .noprint { display: none !important; }
  .cg-main { padding: 0; }
  body { background: #fff; color: #000; }
}