/* ============================================================================
   Unilam Production Manager — web theme
   Light + dark, switchable. Palette derived from the desktop app (slate +
   indigo) so the web app reads as the same product. No external fonts.
   ============================================================================ */

:root {
  /* Brand constants (same in both themes) */
  --brand-indigo: #6366f1;
  --topbar-bg: #1e293b;          /* slate-800 — dark bar anchors the brand */
  --topbar-text: #e2e8f0;
  --topbar-muted: #94a3b8;

  /* Light theme (default) */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e9eef5;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;

  --accent: #ea580c;
  --accent-hover: #c2410c;
  --accent-soft: #fff7ed;
  --on-accent: #ffffff;

  --success: #16a34a;
  --success-soft: #dcfce7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --info: #2563eb;
  --info-soft: #dbeafe;

  /* Row highlight tints (light) */
  --row-mr: #dcfce7;
  --row-mr-text: #14532d;
  --row-fr: #fce7f3;
  --row-fr-text: #831843;
  --row-pvl: #fef9c3;
  --row-pvl-text: #713f12;
  --row-plain: #e5e7eb;
  --row-plain-text: #1f2937;
  --row-deleted: #fee2e2;
  --row-deleted-text: #b91c1c;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .18);

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Consolas", "Liberation Mono", monospace;

  --sidebar-w: 232px;
  --topbar-h: 56px;

  /* Motion — shared 1:1 with the Sales Assistant so the two apps move identically.
     Animate transform + opacity only; ease-out on enter, ease-in on exit, spring on confirmations. */
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease-in:  cubic-bezier(.4, 0, 1, 1);
  --spring:   cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t: .34s;
  --t-slow: .5s;
}

[data-theme="dark"] {
  --bg: #0b1120;
  --surface: #111a2e;
  --surface-2: #16213a;
  --surface-3: #1e293b;
  --border: #2a3650;
  --border-strong: #3a4a6b;
  --text: #e8edf5;
  --text-muted: #9aa8c0;
  --text-faint: #6b7a96;

  --accent: #fb923c;
  --accent-hover: #fdba74;
  --accent-soft: #3a2310;
  --on-accent: #0b1120;

  --success: #4ade80;
  --success-soft: #16331f;
  --danger: #f87171;
  --danger-soft: #3a1818;
  --warn: #fbbf24;
  --warn-soft: #3a2c12;
  --info: #60a5fa;
  --info-soft: #15233f;

  --row-mr: #14331f;
  --row-mr-text: #86efac;
  --row-fr: #3a1730;
  --row-fr-text: #f9a8d4;
  --row-pvl: #3a3112;
  --row-pvl-text: #fde68a;
  --row-plain: #232c3e;
  --row-plain-text: #cbd5e1;
  --row-deleted: #3a1818;
  --row-deleted-text: #fca5a5;

  --topbar-bg: #0d1424;
  --topbar-text: #e8edf5;
  --topbar-muted: #8092ad;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .5);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .6);
}

/* ── Accent themes (global, admin-selected via data-accent on <html>) ──────────
   Default (no data-accent) is orange, set in :root above. These override per choice. */
[data-accent="orange"] { --accent:#ea580c; --accent-hover:#c2410c; --accent-soft:#fff7ed; --on-accent:#ffffff; }
[data-accent="blue"]   { --accent:#4f46e5; --accent-hover:#4338ca; --accent-soft:#eef2ff; --on-accent:#ffffff; }
[data-accent="slate"]  { --accent:#475569; --accent-hover:#334155; --accent-soft:#f1f5f9; --on-accent:#ffffff; }
[data-accent="teal"]   { --accent:#0d9488; --accent-hover:#0f766e; --accent-soft:#f0fdfa; --on-accent:#ffffff; }

[data-theme="dark"][data-accent="orange"] { --accent:#fb923c; --accent-hover:#fdba74; --accent-soft:#3a2310; --on-accent:#0b1120; }
[data-theme="dark"][data-accent="blue"]   { --accent:#818cf8; --accent-hover:#a5b4fc; --accent-soft:#1e2747; --on-accent:#0b1120; }
[data-theme="dark"][data-accent="slate"]  { --accent:#94a3b8; --accent-hover:#cbd5e1; --accent-soft:#1e293b; --on-accent:#0b1120; }
[data-theme="dark"][data-accent="teal"]   { --accent:#2dd4bf; --accent-hover:#5eead4; --accent-soft:#0f2e2b; --on-accent:#0b1120; }

/* ── OT2: org-switcher pill — always shown in the CURRENT accent (which is now the
   user's per-org choice), keeping a strong colour cue for the active org. */
.org-picker { background:var(--accent); border-radius:8px; padding:3px 10px; }
.org-picker svg,
.org-picker strong { color:var(--on-accent); }
.org-picker select { color:var(--on-accent); background:transparent; border:none; font-weight:700; }
.org-picker select option { color:#111827; }

/* ── R5: Reports page — executive layout ─────────────────────────────────── */
.rpt-hero { background:linear-gradient(135deg,var(--accent-soft),var(--surface,#fff) 60%);
  border:1px solid var(--border); border-radius:16px; padding:20px 22px; margin-bottom:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
.rpt-hero .tag { font-size:12.5px; color:var(--text-muted); }
.rpt-org { font-size:12px; font-weight:700; color:var(--on-accent); background:var(--accent);
  border-radius:999px; padding:5px 12px; white-space:nowrap; }
.rpt-sec { display:flex; align-items:center; gap:10px; margin:24px 0 10px; }
.rpt-sec .eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text); }
.rpt-sec .count { font-size:10.5px; font-weight:700; color:var(--accent); background:var(--accent-soft);
  border-radius:999px; padding:2px 8px; }
.rpt-sec .rule { flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }
.rc { position:relative; display:flex; flex-direction:column; transition:box-shadow .15s, transform .15s; }
.rc:hover { box-shadow:0 6px 18px rgba(17,24,39,.07); transform:translateY(-1px); }
.rc .rc-ic { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:17px; }
.rc h3 { padding-right:50px; }
.rc > p.muted { min-height:38px; }
.rc-star { font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--accent); background:var(--accent-soft);
  padding:2px 7px; border-radius:6px; vertical-align:2px; }

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
::selection { background: var(--accent); color: var(--on-accent); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── App shell ────────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  background: var(--topbar-bg); color: var(--topbar-text);
  box-shadow: var(--shadow-sm);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; font-size: 15px; }
.topbar .brand .logo {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--on-accent, #fff); font-weight: 800; font-size: 14px;
}
.topbar .spacer { flex: 1; }
.topbar .topbar-item { display: flex; align-items: center; gap: 8px; color: var(--topbar-muted); font-size: 13px; }
.topbar .topbar-item strong { color: var(--topbar-text); font-weight: 600; }

.sidebar {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); z-index: 30;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 12px 10px; gap: 2px; overflow-y: auto;
}
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 550; font-size: 13.5px;
  cursor: pointer; user-select: none; border: 1px solid transparent;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.nav-link .ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.nav-section { padding: 14px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.nav-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 14px 12px 6px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); background: none; border: 0; cursor: pointer; text-align: left; }
.nav-group-head:hover { color: var(--text); }
.nav-group-head .nav-chev { width: 13px; height: 13px; flex: 0 0 13px; opacity: .7; transition: transform .2s ease; }
.nav-group-head.open .nav-chev { transform: rotate(90deg); }
.nav-group { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.nav-group.open { grid-template-rows: 1fr; }
.nav-group-inner { overflow: hidden; min-height: 0; }

.content {
  margin-left: var(--sidebar-w); margin-top: var(--topbar-h);
  flex: 1; min-width: 0; padding: 22px 26px 80px; position: relative;
}

/* Desktop sidebar collapse (« / ») — slide the nav off-canvas and reclaim the space. */
@media (min-width: 821px) {
  .sidebar { transition: transform .22s ease; }
  .content { transition: margin-left .22s ease; }
  .app-shell.nav-collapsed .sidebar { transform: translateX(-100%); }
  .app-shell.nav-collapsed .content { margin-left: 0; }
}
.nav-collapse-row { display: flex; justify-content: flex-end; padding: 0 2px 2px; }
.nav-collapse-btn {
  background: none; border: 0; cursor: pointer; color: var(--text-muted);
  font-size: 18px; line-height: 1; padding: 2px 8px; border-radius: var(--radius-sm);
}
.nav-collapse-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-reopen-btn {
  position: fixed; top: calc(var(--topbar-h) + 10px); left: 10px; z-index: 35;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-muted); font-size: 18px; line-height: 1;
  padding: 5px 10px; box-shadow: var(--shadow-sm);
}
.nav-reopen-btn:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 820px) { .nav-collapse-row, .nav-reopen-btn { display: none; } }
.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; }
.page-head .sub { color: var(--text-muted); font-size: 13px; }
.page-head .head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.footer-bar {
  position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; z-index: 20;
  min-height: 30px; padding: 6px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 11.5px; color: var(--text-faint); line-height: 1.5;
  background: var(--surface); border-top: 1px solid var(--border);
}
.footer-bar .foot-left { min-width: 0; }
.footer-bar .foot-right { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }
.footer-bar a { color: inherit; text-decoration: none; }
.footer-bar a:hover { text-decoration: underline; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card.pad { padding: 18px; }
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Report cards: equal height per row, action row pinned to the bottom so the
   Generate buttons line up across each row. */
.report-grid > .card { display: flex; flex-direction: column; }
.report-grid > .card > :last-child { margin-top: auto; }

.tile {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); text-decoration: none; }
.tile .tile-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.tile .tile-title { font-weight: 650; color: var(--text); }
.tile .tile-desc { font-size: 12.5px; color: var(--text-muted); }

.metric { display: flex; flex-direction: column; gap: 2px; }
.metric .value { font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric .label { font-size: 12px; color: var(--text-muted); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  padding: 9px 14px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.975); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.icon { padding: 8px; }
.btn.sync { color: #fff; border: none; background: linear-gradient(135deg, #f59e0b, #d97706); }
.btn.sync:hover { background: linear-gradient(135deg, #fbbf24, #f59e0b); }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.input, .select, textarea.input {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 8px 11px; width: 100%;
}
.input::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, textarea.input:focus, .btn:focus-visible, .nav-link:focus-visible, .pill:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.input-icon { position: relative; }
.input-icon .input { padding-left: 32px; }

/* Searchable dropdown (type-to-filter combobox) */
.ss-wrap { position: relative; }
.ss-input { width: 100%; padding-right: 24px; }
.ss-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.ss-clear:hover { color: var(--text); background: var(--surface-2); }
.ss-menu { position: absolute; z-index: 60; left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 4px; max-height: 260px; overflow: auto; }
.ss-opt { padding: 6px 9px; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-opt:hover { background: var(--surface-2); }
.ss-opt.sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ss-all { color: var(--text-muted); }
.ss-empty { padding: 8px 9px; font-size: 12.5px; color: var(--text-faint); }
.input-icon svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); pointer-events: none; }

/* ── Segmented pill filters (iOS-style, like the SA gate) ─────────────────── */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.segmented .pill {
  border: none; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.segmented .pill.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.seg-group { display: flex; flex-direction: column; gap: 5px; }
.seg-group .seg-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }

.toolbar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }

/* ── Chips ────────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); user-select: none;
}
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ── Attention filter chips (Requests toolbar: needs-attention / cancels) ──
   Toggle buttons that must stand out among plain toolbar buttons: tinted
   pill + colored count bubble; solid fill while the filter is active.
   Text/bubble use var(--surface) on the active fill so both themes keep
   contrast (white-on-amber in light, near-black-on-amber in dark). */
.attn-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent; user-select: none;
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}
.attn-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.attn-chip .cnt {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1;
}
.attn-chip.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.attn-chip.warn .cnt { background: var(--warn); color: var(--surface); }
.attn-chip.warn.active { background: var(--warn); color: var(--surface); border-color: var(--warn); box-shadow: 0 2px 8px color-mix(in srgb, var(--warn) 45%, transparent); }
.attn-chip.warn.active .cnt { background: var(--surface); color: var(--warn); }
.attn-chip.danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.attn-chip.danger .cnt { background: var(--danger); color: var(--surface); }
.attn-chip.danger.active { background: var(--danger); color: var(--surface); border-color: var(--danger); box-shadow: 0 2px 8px color-mix(in srgb, var(--danger) 45%, transparent); }
.attn-chip.danger.active .cnt { background: var(--surface); color: var(--danger); }

/* N2 — flash a grid row after jumping to it from the cancel brief */
@keyframes rowflash { 0%, 60% { background: var(--accent-soft); } 100% { background: transparent; } }
.data-grid tr.row-flash > td { animation: rowflash 2.5s ease-out; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; }
.badge.muted { background: var(--surface-3); color: var(--text-muted); }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.mini { font-size: 10px; padding: 2px 6px; font-weight: 600; }

/* ── Data grid ────────────────────────────────────────────────────────────── */
.grid-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow-sm); max-height: calc(100vh - 290px); }
/* P21: the ↗ Zoho opener menu is position:absolute inside the scroll container — with only
   one or two rows the wrap is shorter than the menu and overflow:auto clips it. While any
   opener menu is open, guarantee the room; closes → back to content height. */
.grid-wrap:has(.opener-menu) { min-height: 320px; }
table.data-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
/* GRID-C — owner request 2026-07-19: every grid centers its cells AND headers. */
table.data-grid th, table.data-grid td { padding: 7px 11px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--border); }
/* GRID-C2 — owner request 2026-07-23: the analytics grids (Rep/Customer Performance,
   Production Analytics; all use table.an-grid, exclusive to those pages) had default browser
   alignment (th center, td left) plus inline text-align on Production Analytics, so headers and
   data didn't line up. Center BOTH; !important beats Production Analytics' inline th/td styles. */
table.an-grid th, table.an-grid td { text-align: center !important; }
table.data-grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--text-muted);
  font-weight: 700; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong); cursor: pointer; user-select: none;
}
table.data-grid thead th:hover { color: var(--text); }
table.data-grid tbody tr:hover { background: var(--surface-2); }
table.data-grid td.num, table.data-grid th.num { text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }   /* GRID-C */
/* GRID-C — form controls inside a grid cell keep their natural left alignment; the
   centered-cell rule is inherited by text inputs otherwise (e.g. the Users search box).
   Numeric grid inputs set inline text-align:right, which wins over this. */
table.data-grid td .input, table.data-grid th .input { text-align: left; }
table.data-grid td.mono { font-family: var(--font-mono); font-size: 12px; }
table.data-grid .col-sort-asc::after { content: " ▲"; font-size: 9px; color: var(--accent); }
table.data-grid .col-sort-desc::after { content: " ▼"; font-size: 9px; color: var(--accent); }

/* Row category highlights — SO# cell only (faithful to the desktop). Deleted stays whole-row. */
td.son-mr { background: var(--row-mr); color: var(--row-mr-text); font-weight: 650; }
td.son-fr { background: var(--row-fr); color: var(--row-fr-text); font-weight: 650; }
td.son-pvl { background: var(--row-pvl); color: var(--row-pvl-text); font-weight: 650; }
td.son-plain { background: var(--row-plain); color: var(--row-plain-text); font-weight: 650; }
tr.row-deleted td { color: var(--row-deleted-text) !important; background: var(--row-deleted) !important; }
tr.row-aged-warn td { background: var(--warn-soft); }
tr.row-aged-block td { background: var(--danger-soft); }
/* PB1 — Requests paints only the actions cell (policy highlight, not the whole row) */
td.row-aged-warn { background: var(--warn-soft); }
td.row-aged-block { background: var(--danger-soft); }
table.data-grid tbody tr:hover td { background: var(--surface-2); }
.row-actions { display: inline-flex; gap: 4px; }

.empty { padding: 48px 20px; text-align: center; color: var(--text-muted); }
.empty .big { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(2, 6, 23, .55); display: grid; place-items: center; padding: 20px; animation: fade var(--t-fast) var(--ease-out); }
/* Blocking progress overlay shown while a bulk assemble / scrap job runs (sits above topbar + sidebar). */
.bulk-modal-backdrop { position: fixed; inset: 0; z-index: 90;   /* PS1 — below .modal-backdrop(100): a confirm dialog must never hide under the busy overlay */ background: rgba(2, 6, 23, .62); display: grid; place-items: center; padding: 20px; animation: fade var(--t-fast) var(--ease-out); }
.bulk-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px 20px; max-width: 420px; width: 100%; animation: pop var(--t) var(--ease-out); }
.modal {
  width: 100%; max-width: 560px; max-height: 86vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: pop var(--t) var(--ease-out);
}
.modal.lg { max-width: 860px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 16px; }
.modal-head .x { margin-left: auto; }
.modal-body { padding: 18px 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } }
/* Spring — confirmations only (a ✓, a count roll). Opt in with .badge-pop. */
@keyframes confirmPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.badge-pop { animation: confirmPop var(--t) var(--spring); }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toasts { position: fixed; right: 18px; bottom: 42px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }

/* CX1 — connection banner (blazor.web.js toggles the state classes) */
#components-reconnect-modal { display: none; }
/* CX2 — dispatcher-wedge banner (shown by the pulse watchdog, not by blazor.web.js) */
#circuit-stuck-modal { display: none; }
#circuit-stuck-modal.show { display: grid; position: fixed; inset: 0; z-index: 209; background: rgba(2, 6, 23, .62); place-items: center; padding: 20px; }
/* CX3 — reconnecting is a corner toast (no full-screen dim), revealed only after 2s
   so a sub-2s blip never flashes anything. Most reconnects succeed in a moment; the
   page is briefly unresponsive either way, but nothing jumps in the user's face. */
#components-reconnect-modal.components-reconnect-show {
  display: block; position: fixed; right: 18px; bottom: 18px; z-index: 210;
  padding: 0; opacity: 0; animation: rcReveal .25s ease-out 2s forwards;
}
/* failed / rejected DO block the page — it is genuinely dead until reconnect/reload
   (the inline watchdog in App.razor nudges Blazor.reconnect() and auto-reloads). */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: grid; position: fixed; inset: 0; z-index: 210;
  background: rgba(2, 6, 23, .62); place-items: center; padding: 20px;
}
@keyframes rcReveal { to { opacity: 1; } }
.reconnect-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px 20px; max-width: 420px; }
.reconnect-row { display: flex; align-items: center; gap: 10px; }
.reconnect-text { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--muted-fg, #64748b); }
.reconnect-text span { display: none; }
#components-reconnect-modal.components-reconnect-show .rc-show { display: inline; }
#components-reconnect-modal.components-reconnect-failed .rc-failed { display: inline; }
#components-reconnect-modal.components-reconnect-rejected .rc-rejected { display: inline; }
#components-reconnect-modal.components-reconnect-failed .rc-spin,
#components-reconnect-modal.components-reconnect-rejected .rc-spin { display: none; }
.rc-reload { display: none; margin-top: 10px; font-size: 13px; }
#components-reconnect-modal.components-reconnect-failed .rc-reload,
#components-reconnect-modal.components-reconnect-rejected .rc-reload { display: inline-block; }
.toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 11px 14px; box-shadow: var(--shadow-md); min-width: 240px; max-width: 380px; font-size: 13px; animation: toastIn var(--t) var(--ease-out); }
.toast.success { border-left-color: var(--success); }
.toast.danger { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }

/* ── Misc helpers ─────────────────────────────────────────────────────────── */
.muted { color: var(--text-muted); }
.row { display: flex; gap: 10px; align-items: center; }
.wrap { flex-wrap: wrap; }
.right { margin-left: auto; }
.spin { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: rot .7s linear infinite; display: inline-block; }
@keyframes rot { to { transform: rotate(360deg); } }
.divider { height: 1px; background: var(--border); margin: 16px 0; border: 0; }
.cols-popover { position: absolute; z-index: 60; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; width: 260px; max-height: 360px; overflow: auto; transform-origin: top left; animation: popoverIn var(--t) var(--ease-out); }
.popover-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }
.cols-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.actions-col { width: 1%; white-space: nowrap; }
.col-toggle { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; animation: rowIn var(--t) var(--ease-out) both; }
.col-toggle:hover { background: var(--surface-2); }
@keyframes popoverIn { from { opacity: 0; transform: scale(.92) translateY(-4px); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(-5px); } }

/* ── Auth / login ─────────────────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background:
  radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--brand-indigo) 14%, transparent), transparent),
  var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px 28px; }
.auth-card .logo-lg { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--on-accent, #fff); font-weight: 800; font-size: 22px; margin-bottom: 16px; }
.auth-card h1 { font-size: 19px; margin-bottom: 3px; }
.auth-card .sub { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
.auth-card .field { margin-bottom: 14px; }
.auth-card .err { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; margin-bottom: 16px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 11.5px; color: var(--text-faint); }

/* Theme toggle */
.theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; color: var(--topbar-text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.theme-toggle:hover { background: rgba(255,255,255,.12); }

/* Org picker in the topbar */
.org-picker select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--topbar-text);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
.org-picker select option { color: #0f172a; }

/* M1 — mobile drawer trigger (☰, hidden on desktop) + tap-outside backdrop */
.topbar .menu-btn { display: none; font-size: 20px; padding: 4px 10px; }
.sidebar-backdrop {
  position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 29;   /* under .sidebar(30), over content */
  background: rgba(2, 6, 23, .45); animation: fade var(--t-fast) var(--ease-out);
}

@media (max-width: 820px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); width: 232px; }
  .sidebar.open { transform: translateX(0); }
  .footer-bar { left: 0; }

  /* M1 — phone layout: show the drawer trigger, drop non-essential topbar
     items, tighten paddings, and collapse the footer contacts. */
  .topbar { gap: 10px; padding: 0 12px; }
  .topbar .menu-btn { display: inline-flex; }
  .topbar .sub-badge, .topbar .user-item { display: none; }
  .org-picker select { max-width: 150px; }
  .content { padding: 14px 12px 58px; }
  .page-head h1 { font-size: 19px; }
  .footer-bar .foot-contacts { display: none; }
}

@media (max-width: 640px) {
  /* M1 — small-phone utilities.
     .hide-sm: secondary table columns (creator, dates) that would force a
     side-scroll drop out — !important so it also wins over inline widths. */
  .hide-sm { display: none !important; }
  /* Filter fields stack full-width instead of a cramped fixed-width row
     (stylesheet !important beats the inline width:NNNpx on the fields). */
  .toolbar .field { width: 100% !important; min-width: 0 !important; flex: 1 1 100%; }
  /* The shell is tighter on phones — give the data grid the reclaimed room. */
  .grid-wrap { max-height: calc(100vh - 215px); }
}

@media (max-width: 520px) {
  /* One short centered footer line — the fixed bar was wrapping to 4 lines
     and eating ~25% of a phone screen. */
  .footer-bar { justify-content: center; }
  .footer-bar .foot-left { display: none; }
  .topbar .brand > span:last-child { display: none; }   /* logo only — frees room for the org picker */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Per-row "open in Zoho" menu (#11) */
.opener-wrap { position: relative; display: inline-block; }
/* ZM2 (owner 2026-09-04) — the menu opens RIGHTWARD (left:0): both pages using it have
   Actions as the FIRST column, and the old right:0 alignment pushed the menu past the
   grid's LEFT edge where overflow:auto clipped it ("ales order / tem / omposite item"). */
.opener-menu { position: absolute; left: 0; z-index: 60; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; min-width: 168px; display: flex; flex-direction: column; gap: 2px; transform-origin: top left; animation: popoverIn var(--t) var(--ease-out); }
.opener-link { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; background: transparent; border: 0; color: inherit; }
.opener-link:hover { background: var(--surface-2); }
.opener-menu.up { margin-top:0; margin-bottom:4px; top:auto; bottom:100%; transform-origin:bottom left; }   /* ZM1 — flipped above the button when it would clip the viewport */

/* ── Theme picker (User Management → global accent) ──────────────────────────── */
.theme-pick { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.theme-pick:hover { border-color: var(--accent); }
.theme-pick.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-soft); }
.theme-pick:disabled { opacity: .6; cursor: default; }
.theme-dot { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.theme-check { color: var(--accent); font-weight: 800; animation: confirmPop var(--t) var(--spring); }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong); position: relative; flex: 0 0 auto; transition: background var(--t-fast) var(--ease-out); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease-out); }
.switch > input:checked + .track { background: var(--accent); }
.switch > input:checked + .track::after { transform: translateX(18px); }
.switch > input:focus-visible + .track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.switch > input:disabled + .track { opacity: .5; cursor: not-allowed; }

/* ── Tri-state toggle (all / none / partial) — for group head toggles ─────── */
.tri-toggle { position: relative; display: inline-flex; align-items: center; width: 42px; height: 24px; border: 0; padding: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; flex: 0 0 auto; transition: background var(--t-fast) var(--ease-out); }
.tri-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease-out); }
.tri-toggle.tri-on { background: var(--accent); }
.tri-toggle.tri-on::after { transform: translateX(18px); }
.tri-toggle.tri-part { background: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.tri-toggle.tri-part::after { transform: translateX(9px); }
.tri-toggle.tri-off { background: var(--border-strong); }
.tri-toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); outline: none; }

/* ── Collapsible card (HTML <details>) ───────────────────────────────────── */
.fold-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.fold-card > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; user-select: none; }
.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > summary::before { content: "\25B8"; color: var(--text-muted); display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.fold-card[open] > summary::before { transform: rotate(90deg); }
.fold-card > summary:hover { background: var(--surface-2); }
.fold-body { padding: 4px 16px 16px; border-top: 1px solid var(--border); }

/* ── Column drag-to-reorder (drag handle in each header) ──────────────────── */
.grip { cursor: grab; color: var(--text-muted); opacity: .4; margin-right: 6px; font-size: 11px; user-select: none; display: inline-block; vertical-align: middle; line-height: 1; transition: opacity var(--t-fast) var(--ease-out); }
table.data-grid thead th:hover .grip { opacity: .85; }
.grip:hover { opacity: 1 !important; }
.grip:active { cursor: grabbing; }
table.data-grid thead th.col-dragging { opacity: .4; }
table.data-grid thead th.col-drag-over { box-shadow: inset 3px 0 0 var(--accent); }

/* Cheque Writing — payment picker rows: hover + selected marking */
.pick-row { transition: background .12s ease; }
.pick-row:hover { background: var(--surface-2); }
.pick-row.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pick-row.sel .muted { color: var(--accent); opacity: .85; }

/* Setting page — area navigation cards */
.set-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:16px; }
.set-card { display:flex; align-items:center; gap:12px; text-align:left; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; cursor:pointer; transition:background .12s, border-color .12s, transform .05s; }
.set-card:hover { background:var(--surface-2); border-color:var(--accent); }
.set-card:active { transform:translateY(1px); }

/* ST1 — settings cards: bigger, aligned with the rest of the app */
.set-grid { grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.set-card { padding:20px 18px; min-height:92px; border-radius:14px; }
.set-card .set-ic { font-size:28px; line-height:1; }
.set-card .set-tx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.set-card .set-tt { font-size:15.5px; font-weight:700; }
.set-card .set-ss { font-size:12.5px; color:var(--text-muted); line-height:1.35; white-space:normal; }
.set-card .set-go { margin-left:auto; font-size:18px; color:var(--text-muted); }
.set-card:hover .set-go { color:var(--accent); }
.set-ic { font-size:22px; line-height:1; }
.set-tx { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.set-tt { font-weight:600; }
.set-ss { font-size:12px; color:var(--text-muted); line-height:1.4; }
.set-go { color:var(--text-muted); font-size:18px; }

/* ── Production Plan ─────────────────────────────────────────────── */
table.data-grid tbody tr.clickable { cursor: pointer; }
table.data-grid tbody tr.totals td { border-top: 2px solid var(--border-strong); background: var(--surface-2); }
table.data-grid.slim { font-size: 12px; }
table.data-grid.slim th, table.data-grid.slim td { padding: 5px 10px; }
.rollup { margin-top: 22px; }
.rollup h2 { font-size: 16px; margin: 0 0 12px; }
.mat-group { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mat-group.combo { border-color: var(--accent); }
.mat-group.grand { border-color: var(--border-strong); }
.mat-head { padding: 8px 12px; background: var(--surface-2); font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.mat-head.strong { font-weight: 750; }
.mat-head .muted { color: var(--text-muted); font-weight: 500; font-size: 12px; }

/* ── Top-bar accent picker (per user) ───────────────────────────── */
.accent-picker { gap: 5px; }
.accent-swatch { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.accent-swatch:hover { background: rgba(255,255,255,.14); }
.accent-swatch.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.accent-dot { width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
@media (max-width: 720px) { .accent-picker { display: none; } }

/* ── DB4/DB8: Database page schema browser ──────────────────────────────────
   THREE equal-height panels side by side: tables | columns of the picked
   table | the SQL editor (owner request 2026-07-19). Each panel is a flex
   column of a fixed height, so all three share the same top and bottom;
   the list (or textarea) inside flexes and scrolls. Collapses on narrow
   screens back to stacked panels with capped lists. */
.db-layout { display:grid; grid-template-columns:280px 280px minmax(0,1fr); gap:16px; align-items:stretch; }
.db-panel { display:flex; flex-direction:column; min-width:0; height:460px; }
/* the .cols variant is repeated so this override outranks the later .db-list.cols cap */
.db-panel .db-list, .db-panel .db-list.cols { flex:1 1 0; max-height:none; min-height:0; }
@media (max-width: 1100px) {
    .db-layout { grid-template-columns:1fr 1fr; }
    .db-editor { grid-column:1 / -1; }   /* the SQL editor keeps full width below the two lists */
    .db-panel { height:auto; }
    .db-panel .db-list, .db-panel .db-list.cols { max-height:300px; }
}
@media (max-width: 760px) { .db-layout { grid-template-columns:1fr; } }
.db-list {
    display:flex; flex-direction:column; gap:1px; margin-top:2px;
    max-height:240px; overflow:auto;
    border:1px solid var(--border,#cfd6df); border-radius:8px; padding:4px;
    background:var(--surface,#fff);
}
.db-list.cols { max-height:300px; }
.db-item {
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    width:100%; text-align:left; padding:4px 8px; border:0; border-radius:6px;
    background:transparent; cursor:pointer; font:inherit; font-size:12.5px; color:inherit;
}
.db-item:hover { background:var(--surface-2,#f1f4f8); }
.db-item.active { background:rgba(234,88,12,.13); color:var(--accent,#EA580C); font-weight:600; }
/* DB8 — nm takes the free width so every row's count/type hugs the right edge
   on ONE line (they used to float at odd positions mid-row). */
.db-item .nm {
    font-family:ui-monospace,Consolas,monospace; min-width:0; flex:1 1 auto;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.db-item .ty { flex:none; font-size:10.5px; opacity:.62; white-space:nowrap; }

/* LEG1 — color-legend swatch used by PolicyLegend */
.legend-swatch {
    display:inline-block; width:13px; height:13px; border-radius:3px; vertical-align:-2px;
    border:1px solid color-mix(in srgb, var(--text) 25%, transparent); margin-right:4px;
}

/* HT1 — "?" explainers (HelpTip): a small badge; the popover is position:fixed so
   sticky headers / overflow:auto grids can never clip it. Pop resets inherited
   header styling (uppercase, letter-spacing) so the text reads as prose. */
.htip {
    display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px;
    border-radius:50%; border:1px solid var(--border,#cfd6df); background:var(--surface-2,#f1f4f8);
    color:var(--muted,#6b7682); font-size:9.5px; font-weight:700; line-height:1; cursor:help;
    vertical-align:1px; margin-left:4px; user-select:none; text-transform:none; flex:none;
}
.htip:hover { color:var(--accent,#EA580C); border-color:var(--accent,#EA580C); }
.htip-backdrop { position:fixed; inset:0; z-index:118; }
.htip-pop {
    position:fixed; z-index:119; transform:translateX(-50%); width:max-content; max-width:min(360px, 92vw);
    background:var(--surface,#fff); border:1px solid var(--border,#cfd6df); border-radius:10px;
    box-shadow:0 12px 30px rgba(16,24,40,.22); padding:10px 12px; font-size:12.5px; line-height:1.5;
    color:var(--text,#333); text-transform:none; letter-spacing:normal; font-weight:400;
    white-space:normal; text-align:left; font-family:var(--font, inherit);
}
.htip-t { font-weight:700; margin-bottom:4px; }

/* DB4.1: schema-browser extras — column-match hint, row-count, preview play */
.db-item .via { color:var(--accent,#EA580C); font-weight:500; font-family:inherit; }
.db-play { flex:none; opacity:.4; font-size:10px; padding:1px 5px; border-radius:5px; line-height:1.5; }
.db-item:hover .db-play { opacity:.85; }
.db-play:hover { opacity:1 !important; background:rgba(234,88,12,.16); color:var(--accent,#EA580C); }

/* ── CH1: team chat ────────────────────────────────────────────────────── */
.chat-badge {
    position:absolute; top:-4px; right:-6px; background:var(--accent,#EA580C); color:#fff;
    border-radius:999px; font-size:10px; font-weight:700; line-height:1; padding:3px 6px; min-width:18px; text-align:center;
    /* CH3 — CONTINUOUS wobble while anything is unread (not a one-shot at arrival —
       nobody stares at the badge at the exact second a message lands). Each 2.2s cycle:
       ~0.9s of left↔right rocking, then a rest, repeating until the messages are read. */
    animation:chatBadgeWobble 2.2s ease-in-out infinite;
    transform-origin:center;
}
.chat-badge.inline { position:static; margin-left:auto; flex:none; }
@keyframes chatBadgeWobble {
    0%   { transform:rotate(0) scale(1); }
    6%   { transform:rotate(-15deg) scale(1.15); }
    14%  { transform:rotate(13deg); }
    22%  { transform:rotate(-9deg); }
    30%  { transform:rotate(5deg); }
    38%  { transform:rotate(-2deg); }
    45%, 100% { transform:rotate(0) scale(1); }
}
/* CH3 — the 💬 topbar button keeps a soft orange pulse while any message is unread,
   so it draws the eye even when the badge itself isn't in focus. */
.btn.icon.chat-has-unread { animation:chatBtnRing 1.7s ease-in-out infinite; border-radius:9px; }
@keyframes chatBtnRing {
    0%,100% { box-shadow:0 0 0 0 rgba(234,88,12,0); }
    50%     { box-shadow:0 0 0 5px rgba(234,88,12,.38); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-badge,
    .btn.icon.chat-has-unread { animation:none; }
}
.chat-drawer {
    position:fixed; top:64px; right:14px; bottom:14px; width:min(680px, calc(100vw - 28px));
    z-index:60; display:grid; grid-template-columns:210px minmax(0,1fr);
    /* CH5 — pin the single grid row to the drawer height and let it SHRINK below its
       content (minmax(0,…)). Without this the row grows with the messages, the input
       is pushed past the drawer edge (clipped by overflow:hidden) and no scrollbar
       ever appears on .chat-msgs. */
    grid-template-rows:minmax(0,1fr);
    background:var(--surface,#fff); border:1px solid var(--border,#cfd6df); border-radius:14px;
    box-shadow:0 18px 44px rgba(16,24,40,.24); overflow:hidden;
    /* CH2 — the drawer renders inside the topbar (light text). Reset to page
       text so names/messages are legible on the light-theme white surface. */
    color:var(--text,#1f2937);
}
@media (max-width: 640px) { .chat-drawer { grid-template-columns:130px minmax(0,1fr); } }
.chat-side { border-right:1px solid var(--border,#e3e8ef); overflow-y:auto; padding:8px 6px; display:flex; flex-direction:column; gap:2px; background:var(--surface-2,#f7f9fc); }
.chat-user {
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    padding:7px 9px; border:0; border-radius:8px; background:transparent; cursor:pointer;
    font:inherit; font-size:13px; color:inherit;
}
.chat-user:hover { background:var(--surface,#fff); }
.chat-user.active { background:rgba(234,88,12,.13); color:var(--accent,#EA580C); font-weight:600; }
.chat-user .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-user .dot { width:8px; height:8px; border-radius:50%; background:var(--border,#cbd5e1); flex:none; }
/* CH2 — a live pulse on the online dot ("the user is alive"). */
.chat-user .dot.on { background:#22c55e; animation:chatDotPulse 1.8s ease-out infinite; }
@keyframes chatDotPulse {
    0%   { box-shadow:0 0 0 0 rgba(34,197,94,.55); }
    70%  { box-shadow:0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.chat-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.chat-head { display:flex; align-items:baseline; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border,#e3e8ef); }
/* CH5 — min-height:0 lets the flex item shrink so overflow-y actually engages:
   the list scrolls (auto-stuck to the last message) and the input stays visible. */
.chat-msgs { flex:1; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.chat-row { display:flex; }
.chat-row.mine { justify-content:flex-end; }
.chat-bubble {
    max-width:78%; padding:7px 11px; border-radius:12px; font-size:13px;
    background:var(--surface-2,#eef2f7); border:1px solid var(--border,#e3e8ef);
    overflow-wrap:anywhere; white-space:pre-wrap; position:relative;
}
/* CH5 — admin delete: a small ✕ that fades in on hover of the bubble. */
.chat-del {
    position:absolute; top:-7px; right:-7px; width:18px; height:18px; padding:0;
    border-radius:50%; border:1px solid var(--border,#cfd6df); background:var(--surface,#fff);
    color:var(--danger,#b91c1c); font-size:10px; line-height:1; cursor:pointer;
    opacity:0; transition:opacity .12s ease;
    display:inline-flex; align-items:center; justify-content:center;
}
.chat-bubble:hover .chat-del { opacity:.85; }
.chat-del:hover { opacity:1 !important; background:var(--danger,#b91c1c); color:#fff; }
.chat-row.mine .chat-bubble { background:rgba(234,88,12,.12); border-color:rgba(234,88,12,.25); }
.chat-bubble .who { font-size:11px; font-weight:700; color:var(--accent,#EA580C); margin-bottom:2px; }
.chat-bubble .when { font-size:10px; opacity:.55; text-align:right; margin-top:3px; }
/* CH6 — WhatsApp-style ticks: ✓ sent (grey), ✓✓ read (green) — DM read receipts. */
.chat-bubble .when .tick { margin-left:4px; font-size:10px; letter-spacing:-1.5px; }
.chat-bubble .when .tick.read { color:#16a34a; font-weight:700; }
.chat-row.mine .chat-bubble .when { opacity:.75; }
/* CH6 — sidebar section labels (Groups / People) + the admin ➕ new-group button. */
.chat-sec {
    display:flex; align-items:center; justify-content:space-between; padding:9px 9px 2px;
    font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--muted,#6b7682);
}
.chat-sec-add { border:0; background:transparent; cursor:pointer; font-size:11px; padding:0 2px; line-height:1; }
.chat-sec-add:hover { transform:scale(1.2); }
/* CH6 — standalone presence dot (members modal; the .chat-user .dot rules are scoped). */
.chat-dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--border,#cbd5e1); }
.chat-dot.on { background:#22c55e; }
.chat-input { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--border,#e3e8ef); }
.chat-input .input { flex:1; }