/* ============================================================================
   TowerDesk — ui-pro.css (v1.0.9.120)
   ----------------------------------------------------------------------------
   Loads AFTER app.css and branding.css. This is the "Clean Workspace" theme:

     • one light shell — white sidebar, white top bar, neutral canvas; the
       building's brand colour is an ACCENT (active nav marker, primary
       button, focus ring, key figures), never a full-bleed gradient;
     • one page-header treatment (the "ledger header"): white card, title on
       the left, actions on the right, and a flat stat strip whose figures are
       separated by hairlines rather than boxed in glowing tiles;
     • the dashboard hero joins the same system instead of being the one dark
       glass panel in an otherwise light product;
     • a single type scale (Inter for everything; display weight 600–700,
       tabular figures for numbers) and normalised buttons, inputs, tabs,
       chips, tables, cards, modals and toasts.

   It is purely additive: it restyles what modules already render and never
   changes layout geometry that app.css owns (sidebar width, top-bar height,
   grid). Where a runtime <style> (dashboard-pro, ticket hero, …) wins by
   cascade order, rules here carry #pg / .ly specificity so they still apply.
   ============================================================================ */

:root {
  --ff-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Type scale — every size in the app should resolve to one of these. */
  --fs-xs: 11px;   /* eyebrows, table captions, chips */
  --fs-sm: 12.5px; /* secondary text, meta, badges */
  --fs-md: 13.5px; /* body, inputs, buttons, table cells */
  --fs-lg: 15px;   /* card titles, list titles */
  --fs-xl: 18px;   /* section headings */
  --fs-2xl: 22px;  /* page titles */
  --fs-3xl: 28px;  /* hero numbers */
  --lh: 1.5;

  /* Workspace neutrals (cool, not warm — keeps a burnt-orange brand crisp). */
  --ws-canvas: #f4f5f7;
  --ws-surface: #ffffff;
  --ws-line: #e4e7ec;
  --ws-line-strong: #d0d5dd;
  --ws-ink: #1b2230;
  --ws-ink-2: #3d4653;
  --ws-muted: #6b7280;
  --ws-faint: #8792a4;
  --ws-hover: #f3f4f6;
  --ws-selected: color-mix(in srgb, var(--c500) 9%, #fff);
  --ws-focus: color-mix(in srgb, var(--c500) 22%, transparent);
  --ws-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --ws-shadow-lg: 0 12px 32px -12px rgba(16, 24, 40, .22);

  /* Sidebar (light) */
  --nav-fg: var(--ws-ink-2);
  --nav-fg-dim: var(--ws-faint);
  --nav-hover: var(--ws-hover);
  --nav-active: var(--ws-selected);

  /* Re-point the shared tokens app.css consumes so the whole app follows. */
  --cream: var(--ws-canvas);
  --card-border: var(--ws-line);
  --table-hover: #f8f9fb;
  --input-bg: #fff;
  --s50: #f8f9fb;
  --s100: #f3f4f6;
  --s150: #eef0f3;
  --s200: #e4e7ec;
  --s300: #d0d5dd;
  --s400: #98a2b3;
  --s500: #6b7280;
  --s600: #475467;
  --s700: #344054;
  --s800: #1b2230;
  --s900: #0f1523;
  --sh-sm: var(--ws-shadow);
  --sh-md: 0 4px 14px -6px rgba(16, 24, 40, .12);
  --sh-lg: var(--ws-shadow-lg);
}

/* ── Base type ─────────────────────────────────────────────────────────── */
html { font-size: 100%; }
body { font-family: var(--ff-body); font-size: var(--fs-md); line-height: var(--lh); color: var(--ws-ink); background: var(--ws-canvas); font-feature-settings: 'cv11', 'ss01', 'tnum'; -webkit-font-smoothing: antialiased; }
.ct { font-size: var(--fs-md); }
.ct p, .ct li, .ct td, .ct .fi, .ct label, .ct select, .ct textarea { line-height: var(--lh); }
.ly .mn { background: var(--ws-canvas); }
.ly .ct { padding: 22px 28px 40px; max-width: 1560px; }
@media (max-width: 768px) { .ly .ct { padding: 14px 12px 40px; } }

/* Headings — one family, one weight ladder. */
.ct h1, .ct h2, .ct h3, .ct h4, .ct h5, .md h1, .md h2, .md h3, .md h4, .mh h3, .md-h h2 {
  font-family: var(--ff-display); color: var(--ws-ink); letter-spacing: -.015em; line-height: 1.25; margin: 0; font-weight: 600;
}
.ct h1 { font-size: var(--fs-2xl); font-weight: 650; }
.ct h2 { font-size: var(--fs-xl); font-weight: 650; }
.ct h3 { font-size: var(--fs-lg); font-weight: 600; }
.ct h4 { font-size: var(--fs-md); font-weight: 600; }
.ct h5 { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ws-muted); }
.mh h3, .md-h h2 { font-size: var(--fs-lg); font-weight: 650; }

/* Cards */
.cd { border-radius: 10px; border: 1px solid var(--ws-line); box-shadow: var(--ws-shadow); background: #fff; }
.cd-h { padding: 14px 18px; border-bottom: 1px solid var(--s100); }
.cd-h h3, .cd-h h2 { font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 600; }
.cd-h > div > span, .cd-h .sub { font-size: var(--fs-sm); color: var(--ws-muted); font-weight: 400; }

/* Eyebrow / label pattern */
.fg label, .lbl, .eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ws-muted); margin-bottom: 6px; }

/* Inputs */
.fi, .bkc-input, select.fi, textarea.fi { font-family: var(--ff-body); font-size: var(--fs-md); padding: 9px 12px; border: 1px solid var(--ws-line-strong); border-radius: 8px; background: #fff; color: var(--ws-ink); min-height: 38px; box-shadow: var(--ws-shadow); transition: border-color .12s, box-shadow .12s; }
.fi:focus, .bkc-input:focus { border-color: var(--c500); box-shadow: 0 0 0 3px var(--ws-focus); background: #fff; outline: 0; }
.fi::placeholder { color: var(--ws-faint); }
textarea.fi { min-height: 84px; }
select.fi { padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' 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; -webkit-appearance: none; appearance: none; }

/* Buttons */
.btn { font-family: var(--ff-body); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; padding: 0 14px; min-height: 36px; border-radius: 8px; gap: 8px; box-shadow: var(--ws-shadow); transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .12s; }
.btn.bsm, .btn.sm { min-height: 30px; padding: 0 11px; font-size: var(--fs-sm); }
.btn.blg { min-height: 42px; padding: 0 20px; font-size: var(--fs-lg); }
.btn .td-ico { width: 16px; height: 16px; }
.btn.bs { background: #fff; color: var(--ws-ink-2); border: 1px solid var(--ws-line-strong); }
.btn.bs:hover { background: var(--ws-hover); border-color: var(--s400); color: var(--ws-ink); }
.btn.bo { background: #fff; color: var(--c600); border: 1px solid color-mix(in srgb, var(--c500) 45%, #fff); }
.btn.bo:hover { background: var(--ws-selected); }
.btn.bp { background: var(--c500); color: #fff; border: 1px solid color-mix(in srgb, var(--c500) 85%, #000); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn.bp:hover { background: var(--c600); transform: none; }
.btn.bd { background: #fff; color: var(--err-soft-fg); border: 1px solid #f1c3c3; }
.btn.bd:hover { background: #fff5f5; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ws-focus); }
.btn:active { transform: translateY(1px); }

/* Tabs and chips */
.tabs { border-bottom: 1px solid var(--ws-line); gap: 2px; margin-bottom: 18px; }
.tab { font-size: var(--fs-md); font-weight: 500; padding: 10px 14px; color: var(--ws-muted); border-bottom-width: 2px; margin-bottom: -1px; border-radius: 0; }
.tab:hover { color: var(--ws-ink); }
.tab.a, .tab.active { color: var(--ws-ink); font-weight: 600; border-bottom-color: var(--c500); background: transparent; }
.chip, .pill, .badge, .tag, .pin { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; }
.pin { background: #fff; border: 1px solid var(--ws-line-strong); color: var(--ws-ink-2); border-radius: 6px; }
.b { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; padding: 3px 8px; border-radius: 6px; }

/* Tables */
table { font-size: var(--fs-md); }
th { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ws-muted); }
.t th { background: #fff; border-bottom: 1px solid var(--ws-line); }
td { font-size: var(--fs-md); color: var(--s700); }
td, th { padding-top: 11px; padding-bottom: 11px; }
.t td { border-bottom: 1px solid var(--s100); }
tbody tr:hover td { background: var(--table-hover); }
.tabular, td.num, .num { font-variant-numeric: tabular-nums; }

/* Modals */
.mo { background: rgba(16, 24, 40, .48); backdrop-filter: blur(2px); }
.md { border-radius: 12px; box-shadow: 0 24px 64px -12px rgba(16, 24, 40, .4), 0 0 0 1px rgba(16, 24, 40, .06); }
.mh { padding: 18px 22px 14px; }
.md-h { padding: 16px 22px; border-bottom: 1px solid var(--ws-line); }
.md-h h2 { font-size: var(--fs-lg); }
.md-x { color: var(--ws-muted); }
.md-b { padding: 20px 22px; }
.md-f { padding: 12px 22px 18px; border-top: 1px solid var(--s100); background: #fbfbfc; border-radius: 0 0 12px 12px; }
.md-body { font-size: var(--fs-md); }

/* Toasts */
.toast { font-size: var(--fs-md); border-radius: 10px; padding: 12px 16px; background: var(--ws-ink); box-shadow: 0 10px 30px rgba(16, 24, 40, .28); }

/* Loading spinner colour follows the accent */
.ld { color: var(--c500); }

/* ── Top bar ───────────────────────────────────────────────────────────── */
.ly .tb { height: 56px; background: #fff; border-bottom: 1px solid var(--ws-line); box-shadow: none; }
.tb-t { font-family: var(--ff-display); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0; color: var(--ws-muted); }
.tb-t .tb-t-sep { opacity: .5; }
.tb-t-pg { font-weight: 600; color: var(--ws-ink); font-size: var(--fs-lg); }
.tb-s { width: 240px; }
.tb-s input { font-family: var(--ff-body); font-size: var(--fs-sm); background: var(--s50); border: 1px solid var(--ws-line); height: 34px; padding: 0 10px 0 32px; border-radius: 8px; }
.tb-s input:focus { background: #fff; border-color: var(--c500); box-shadow: 0 0 0 3px var(--ws-focus); }
.tb .fi#lang-sel { min-height: 34px; height: 34px; padding: 0 28px 0 10px !important; font-size: var(--fs-sm) !important; border: 1px solid var(--ws-line) !important; background-color: #fff; border-radius: 8px; box-shadow: none; color: var(--ws-ink-2); }
.tb .notif-bell, .tb .hg-help-btn, .tb .chat-btn, .tb .mob-search-btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--ws-muted); border: 1px solid transparent; }
.tb .notif-bell:hover, .tb .hg-help-btn:hover, .tb .chat-btn:hover, .tb .mob-search-btn:hover { background: var(--ws-hover); color: var(--ws-ink); border-color: var(--ws-line); }
.tb .notif-bell svg, .tb .hg-help-btn svg, .tb .chat-btn svg { width: 18px; height: 18px; }
.tb .notif-badge, .tb .chat-badge { font-family: var(--ff-body); font-weight: 700; }

/* ── Sidebar (light shell) ─────────────────────────────────────────────── */
.ly .sb { background: #fff; color: var(--ws-ink); border-right: 1px solid var(--ws-line); box-shadow: none; }
.ly .sb-l { border-bottom: 1px solid var(--ws-line); min-height: 56px; padding: 10px 12px 10px 16px; }
.ly .sb-l img { background: #fff; border: 1px solid var(--ws-line); padding: 3px; height: 34px; border-radius: 8px; }
.ly .sb-l-txt h2 { font-family: var(--ff-display); font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; color: var(--ws-ink); }
.ly .sb-l-txt span { font-size: 10px; letter-spacing: .08em; font-weight: 600; color: var(--ws-faint); }
.ly .sb-cl { background: #fff; border: 1px solid var(--ws-line); color: var(--ws-faint); }
.ly .sb-cl:hover { color: var(--ws-ink); background: var(--ws-hover); }
.ly .sb-n { scrollbar-color: var(--ws-line-strong) transparent; }
.ly .sb-u { border-top: 1px solid var(--ws-line); background: #fff; }
.ly .sb-ui h4 { color: var(--ws-ink); font-size: var(--fs-sm); font-weight: 600; }
.ly .sb-ui p { color: var(--ws-muted); font-size: var(--fs-xs); }
.ly .sb-ui span[style] { font-size: 10px !important; border-radius: 6px !important; background: var(--ws-selected) !important; color: var(--c700) !important; }
.ly .sb-av { box-shadow: 0 0 0 1px var(--ws-line); background: var(--c500); }
.ly .sb-lo { color: var(--ws-faint); background: #fff; border: 1px solid var(--ws-line); }
.ly .sb-lo:hover { color: var(--err-soft-fg); background: #fff5f5; border-color: #f1c3c3; }

.sb .sb-n { padding: 8px 10px 14px; }
.sbp { display: flex; flex-direction: column; gap: 2px; }
.sbp-find { position: relative; display: flex; align-items: center; margin: 4px 2px 10px; }
.sbp-find > .td-ico { position: absolute; left: 11px; width: 14px; height: 14px; color: var(--ws-faint); pointer-events: none; }
.sbp-find input { width: 100%; background: var(--s50); border: 1px solid var(--ws-line); color: var(--ws-ink); border-radius: 8px; padding: 8px 30px 8px 32px; font-family: var(--ff-body); font-size: var(--fs-sm); outline: 0; transition: background .15s, border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.sbp-find input::placeholder { color: var(--ws-faint); }
.sbp-find input::-webkit-search-cancel-button { display: none; }
.sbp-find input:focus { background: #fff; border-color: var(--c500); box-shadow: 0 0 0 3px var(--ws-focus); }
.sbp-find-x { position: absolute; right: 6px; width: 22px; height: 22px; border: 0; background: transparent; color: var(--ws-faint); border-radius: 6px; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sbp-find-x .td-ico { width: 13px; height: 13px; }
.sbp.filtering .sbp-find-x { display: inline-flex; }
.sbp-find-x:hover { color: var(--ws-ink); background: var(--ws-hover); }

.sbg { border-radius: 8px; }
.sbg-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: var(--nav-fg); font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em; text-align: left; border-radius: 8px; cursor: pointer; transition: background .14s, color .14s; }
.sbg-h:hover { background: var(--nav-hover); color: var(--ws-ink); }
.sbg-h:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ws-focus); }
.sbg-ic { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--ws-faint); flex-shrink: 0; }
.sbg-ic .td-ico { width: 17px; height: 17px; }
.sbg.open .sbg-ic { color: var(--c500); }
.sbg.open .sbg-h { color: var(--ws-ink); }
.sbg-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbg-n { display: none; }
.sbg-chev { display: inline-flex; color: var(--ws-faint); transition: transform .2s; }
.sbg-chev .td-ico { width: 13px; height: 13px; }
.sbg.open .sbg-chev { transform: rotate(180deg); }
.sbg-b { display: none; padding: 2px 0 6px 0; position: relative; }
.sbg.open .sbg-b { display: block; animation: sbgIn .18s ease-out; }
@keyframes sbgIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.sbg-b::before { content: ''; position: absolute; left: 18px; top: 4px; bottom: 8px; width: 1px; background: var(--ws-line); }
.ly .sbp .ni { padding: 6px 10px 6px 34px; margin: 0; font-size: var(--fs-md); font-weight: 450; color: var(--nav-fg); border-radius: 7px; gap: 10px; letter-spacing: 0; line-height: 1.35; min-height: 32px; }
.sbp .ni > svg:first-child, .sbp .ni .td-ico-wrap { display: none; }
.sbp .ni::before { content: none; }
.ly .sbp .ni:hover { background: var(--nav-hover); color: var(--ws-ink); }
.ly .sbp .ni.a { background: var(--nav-active); color: var(--c700); font-weight: 600; box-shadow: none; }
.ly .sbp .ni.a::after { content: ''; position: absolute; left: 15px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--c500); box-shadow: 0 0 0 2px #fff; }
.sbp .ni .ni-lbl { display: block; }
.sbp .ni .ntc-nav-badge, .sbp .ni .mybr-nav-badge, .sbp .ni .nb { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--c500); color: #fff; }
.sbp .ni .ni-upd { top: 50%; margin-top: -4px; right: 10px; }
.sbp-hide { display: none !important; }
.sbp.filtering .sbg:not(.sbp-hide) .sbg-b { display: block; }
.sbp.filtering .sbg-chev { display: none; }

/* Rail (collapsed) mode */
.sb.rail .sbp-find { display: none; }
.sb.rail .sbg-h { justify-content: center; padding: 8px 0; position: relative; }
.sb.rail .sbg-lbl, .sb.rail .sbg-n, .sb.rail .sbg-chev { display: none; }
.sb.rail .sbg-h::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--ws-ink); color: #fff; font-size: var(--fs-sm); font-weight: 500; padding: 5px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 300; }
.sb.rail .sbg-h:hover::after { opacity: 1; }
.sb.rail .sbg-b::before { display: none; }
.ly .sb.rail .sbp .ni { padding: 9px 0; justify-content: center; width: 44px; height: 40px; margin: 2px auto; color: var(--ws-muted); }
.sb.rail .sbp .ni > svg:first-child { display: block; }
.sb.rail .sbp .ni .ni-lbl { display: none; }
.sb.rail .sbp .ni.a::after { display: none; }
.ly .sb.rail .sbp .ni.a { color: var(--c600); }
.ly .sb.rail .sb-l { padding: 10px 8px; }
@media (max-width: 768px) {
  .ly .sb { box-shadow: 8px 0 36px rgba(16, 24, 40, .25); }
  .sb.rail .sbp-find { display: flex; }
  .sb.rail .sbg-h { justify-content: flex-start; padding: 9px 10px; }
  .sb.rail .sbg-lbl, .sb.rail .sbg-chev { display: inline-flex; }
  .sb.rail .sbg-h::after { display: none; }
  .ly .sb.rail .sbp .ni { padding: 10px 10px 10px 36px; width: auto; height: auto; justify-content: flex-start; margin: 0; color: var(--nav-fg); }
  .sb.rail .sbp .ni > svg:first-child, .sbp .ni .td-ico-wrap { display: none; }
  .sb.rail .sbp .ni .ni-lbl { display: block; }
  .sb.rail .sbp .ni.a::after { display: block; }
  .sb.rail .sbg-b::before { display: block; }
  .ly .sbp .ni { font-size: 14px; }
}

/* Footer band */
#td-footer { background: #fff !important; border-top: 1px solid var(--ws-line) !important; box-shadow: none !important; height: 32px !important; backdrop-filter: none !important; }
#td-footer span:first-child { font-size: 10px; letter-spacing: .12em; color: var(--ws-faint) !important; }
#td-footer img { height: 18px !important; opacity: .7; }

/* ── Inline icons that replace emoji ───────────────────────────────────── */
.td-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.16em; flex-shrink: 0; }
.td-ico-wrap { display: inline-flex; align-items: center; justify-content: center; vertical-align: -.16em; line-height: 1; margin-right: .1em; }
.td-ico-wrap .td-ico { width: 1.05em; height: 1.05em; opacity: .9; }
.td-ico-wrap.td-ico-solo { margin-right: 0; }
.td-ico-wrap.td-ico-solo .td-ico { width: 1em; height: 1em; }
/* Large decorative emoji (empty states, quick-action tiles) become calm,
   thin-stroke glyphs in the brand tint. */
[style*="font-size:2"] > .td-ico-wrap.td-ico-solo .td-ico,
[style*="font-size:3"] > .td-ico-wrap.td-ico-solo .td-ico,
[style*="font-size:4"] > .td-ico-wrap.td-ico-solo .td-ico,
[style*="font-size: 2"] > .td-ico-wrap.td-ico-solo .td-ico,
[style*="font-size: 3"] > .td-ico-wrap.td-ico-solo .td-ico,
[style*="font-size: 4"] > .td-ico-wrap.td-ico-solo .td-ico { stroke-width: 1.4; color: var(--c500); opacity: .75; }
.btn .td-ico-wrap { margin-right: 0; }
.btn .td-ico-wrap .td-ico { width: 16px; height: 16px; }
.tab .td-ico-wrap .td-ico, .chip .td-ico-wrap .td-ico, .pill .td-ico-wrap .td-ico { width: 14px; height: 14px; }
h1 .td-ico-wrap .td-ico, h2 .td-ico-wrap .td-ico { width: .95em; height: .95em; opacity: .85; }
.mh h3 .td-ico-wrap { margin-right: .3em; }
.mh h3 .td-ico-wrap .td-ico { color: var(--c500); }

/* ── Mail diagnostic panel ─────────────────────────────────────────────── */
.mail-diag { margin-top: 14px; border: 1px solid var(--s200); border-radius: 10px; background: #fff; overflow: hidden; font-size: var(--fs-md); }
.mail-diag-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 600; font-family: var(--ff-display); font-size: var(--fs-lg); background: var(--s50); border-bottom: 1px solid var(--s200); }
.mail-diag-h.ok { color: var(--ok-soft-fg); background: var(--ok-soft-bg); }
.mail-diag-h.bad { color: var(--warn-soft-fg); background: var(--warn-soft-bg); }
.mail-diag-h .td-ico { width: 18px; height: 18px; }
.mdg-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 12px 16px; font-size: var(--fs-sm); color: var(--s600); border-bottom: 1px solid var(--s100); }
.mdg-meta b { color: var(--s500); font-weight: 600; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .05em; margin-right: 6px; }
.mdg-issues { padding: 8px 16px; background: var(--warn-soft-bg); border-bottom: 1px solid var(--warn-soft-bd); }
.mdg-issue { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; color: var(--warn-soft-fg); font-size: var(--fs-sm); }
.mdg-issue .td-ico { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; }
.mdg-steps { padding: 8px 16px; }
.mdg-step { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: var(--fs-sm); color: var(--s700); font-variant-numeric: tabular-nums; }
.mdg-step .td-ico { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; }
.mdg-step.ok .td-ico { color: var(--ok); }
.mdg-step.bad .td-ico { color: var(--err); }
.mdg-step.bad { color: var(--err-soft-fg); }
.mdg-foot { padding: 10px 16px; font-size: var(--fs-xs); color: var(--s500); border-top: 1px solid var(--s100); }
@media (max-width: 640px) { .mdg-meta { grid-template-columns: 1fr; } }


/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { .sbg.open .sbg-b { animation: none; } .sbg-chev { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Page headers — the "ledger header" (tagged data-td-hero by modules-ui-pro)
   White card, title left, actions right, flat stat strip. Modules painted
   these as dark gradients with white text and glass tiles, so every colour a
   module hard-coded for a dark background is re-mapped here.
   ═══════════════════════════════════════════════════════════════════════════ */
:is(#pg, .md) [data-td-hero] {
  position: relative;
  background: #fff !important;
  background-image: none !important;
  color: var(--ws-ink) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin: 0 0 18px !important;
  border: 1px solid var(--ws-line) !important;
  box-shadow: var(--ws-shadow) !important;
  overflow: hidden;
  min-height: 0 !important;
  isolation: isolate;
  text-shadow: none !important;
}
:is(#pg, .md) [data-td-hero]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c500); pointer-events: none; z-index: 0; border-radius: 0; opacity: 1; }
:is(#pg, .md) [data-td-hero]::after { display: none !important; }
:is(#pg, .md) [data-td-hero] > * { position: relative; z-index: 1; }
[data-td-hero-layer] { display: none !important; }
#pg [data-td-hero="row"] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#pg [data-td-hero="row"] > :first-child { flex: 1 1 320px; min-width: 0; }

/* Title block */
:is(#pg, .md) [data-td-hero] h1, :is(#pg, .md) [data-td-hero] h2, :is(#pg, .md) [data-td-hero] h3,
:is(#pg, .md) [data-td-hero] [class*="hero-title"], :is(#pg, .md) [data-td-hero] [class*="-title"]:not(.btn):not(button) {
  font-family: var(--ff-display) !important; font-size: var(--fs-2xl) !important; font-weight: 650 !important;
  color: var(--ws-ink) !important; letter-spacing: -.02em !important; line-height: 1.2 !important; margin: 0 !important; text-shadow: none !important;
}
:is(#pg, .md) [data-td-hero] h1 + *, :is(#pg, .md) [data-td-hero] h2 + *, :is(#pg, .md) [data-td-hero] [class*="hero-sub"], :is(#pg, .md) [data-td-hero] [class*="-sub"]:not(.btn), :is(#pg, .md) [data-td-hero] p {
  font-size: var(--fs-md) !important; color: var(--ws-muted) !important; font-weight: 400 !important; margin-top: 4px; text-shadow: none !important;
}
:is(#pg, .md) [data-td-hero] [class*="eyebrow"], :is(#pg, .md) [data-td-hero] [class*="kicker"] {
  color: var(--c600) !important; font-size: var(--fs-xs) !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; opacity: 1 !important;
}
:is(#pg, .md) [data-td-hero] [class*="-label"]:not(.btn):not([class*="tab"]) { color: var(--ws-muted) !important; font-size: var(--fs-xs) !important; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; opacity: 1 !important; }
:is(#pg, .md) [data-td-hero] h1 .td-ico-wrap, :is(#pg, .md) [data-td-hero] h2 .td-ico-wrap, :is(#pg, .md) [data-td-hero] [class*="hero-title"] .td-ico-wrap { color: var(--c500); margin-right: .25em; }
:is(#pg, .md) [data-td-hero] h1 .td-ico, :is(#pg, .md) [data-td-hero] h2 .td-ico { width: .9em; height: .9em; opacity: 1; }

/* Every colour modules chose for white-on-dark becomes ink/muted/semantic. */
:is(#pg, .md) [data-td-hero] [style*="color:#fff"], :is(#pg, .md) [data-td-hero] [style*="color: #fff"], :is(#pg, .md) [data-td-hero] [style*="color:white"],
:is(#pg, .md) [data-td-hero] [style*="color:#ffffff"], :is(#pg, .md) [data-td-hero] [style*="color:#f8fafc"], :is(#pg, .md) [data-td-hero] [style*="color:#e2e8f0"] { color: var(--ws-ink) !important; }
:is(#pg, .md) [data-td-hero] [style*="color:rgba(255,255,255"], :is(#pg, .md) [data-td-hero] [style*="color: rgba(255,255,255"], :is(#pg, .md) [data-td-hero] [style*="color:rgba(255, 255, 255"],
:is(#pg, .md) [data-td-hero] [style*="color:#cbd5e1"], :is(#pg, .md) [data-td-hero] [style*="color:#94a3b8"], :is(#pg, .md) [data-td-hero] [style*="color:#bfdbfe"], :is(#pg, .md) [data-td-hero] [style*="color:#dbeafe"], :is(#pg, .md) [data-td-hero] [style*="color:#e0e7ff"] { color: var(--ws-muted) !important; }
:is(#pg, .md) [data-td-hero] [style*="color:#ffd54f"], :is(#pg, .md) [data-td-hero] [style*="color:#fbbf24"], :is(#pg, .md) [data-td-hero] [style*="color:#fcd34d"], :is(#pg, .md) [data-td-hero] [style*="color:#fde68a"], :is(#pg, .md) [data-td-hero] [style*="color:#f59e0b"] { color: var(--warn-soft-fg) !important; }
:is(#pg, .md) [data-td-hero] [style*="color:#81c784"], :is(#pg, .md) [data-td-hero] [style*="color:#4ade80"], :is(#pg, .md) [data-td-hero] [style*="color:#86efac"], :is(#pg, .md) [data-td-hero] [style*="color:#a7f3d0"], :is(#pg, .md) [data-td-hero] [style*="color:#6ee7b7"], :is(#pg, .md) [data-td-hero] [style*="color:#22c55e"] { color: var(--ok-soft-fg) !important; }
:is(#pg, .md) [data-td-hero] [style*="color:#64b5f6"], :is(#pg, .md) [data-td-hero] [style*="color:#93c5fd"], :is(#pg, .md) [data-td-hero] [style*="color:#60a5fa"], :is(#pg, .md) [data-td-hero] [style*="color:#a5d8ff"], :is(#pg, .md) [data-td-hero] [style*="color:#7dd3fc"], :is(#pg, .md) [data-td-hero] [style*="color:#c4b5fd"], :is(#pg, .md) [data-td-hero] [style*="color:#a78bfa"] { color: var(--info-soft-fg) !important; }
:is(#pg, .md) [data-td-hero] [style*="color:#ef9a9a"], :is(#pg, .md) [data-td-hero] [style*="color:#f87171"], :is(#pg, .md) [data-td-hero] [style*="color:#fca5a5"], :is(#pg, .md) [data-td-hero] [style*="color:#ff8a80"], :is(#pg, .md) [data-td-hero] [style*="color:#fecaca"] { color: var(--err-soft-fg) !important; }
:is(#pg, .md) [data-td-hero] [style*="opacity:.5"], :is(#pg, .md) [data-td-hero] [style*="opacity:.6"], :is(#pg, .md) [data-td-hero] [style*="opacity:.7"], :is(#pg, .md) [data-td-hero] [style*="opacity:.8"], :is(#pg, .md) [data-td-hero] [style*="opacity: .7"], :is(#pg, .md) [data-td-hero] [style*="opacity: .8"], :is(#pg, .md) [data-td-hero] [style*="opacity:0.7"], :is(#pg, .md) [data-td-hero] [style*="opacity:0.8"], :is(#pg, .md) [data-td-hero] [style*="opacity:0.6"] { opacity: 1 !important; color: var(--ws-muted); }
:is(#pg, .md) [data-td-hero] [style*="text-shadow"] { text-shadow: none !important; }
:is(#pg, .md) [data-td-hero] [style*="background:rgba(255,255,255"], :is(#pg, .md) [data-td-hero] [style*="background: rgba(255,255,255"], :is(#pg, .md) [data-td-hero] [style*="background:rgba(255, 255, 255"],
:is(#pg, .md) [data-td-hero] [style*="background-color:rgba(255,255,255"], :is(#pg, .md) [data-td-hero] [style*="background:linear-gradient"] { background: var(--s50) !important; border-color: var(--ws-line) !important; backdrop-filter: none !important; }
:is(#pg, .md) [data-td-hero] [style*="border:1px solid rgba(255,255,255"], :is(#pg, .md) [data-td-hero] [style*="border: 1px solid rgba(255,255,255"], :is(#pg, .md) [data-td-hero] [style*="border-color:rgba(255,255,255"] { border-color: var(--ws-line) !important; }
:is(#pg, .md) [data-td-hero] hr, :is(#pg, .md) [data-td-hero] [class*="divider"] { background: var(--ws-line) !important; border-color: var(--ws-line) !important; opacity: 1 !important; }
:is(#pg, .md) [data-td-hero] svg:not(.td-ico) { filter: none !important; }
:is(#pg, .md) [data-td-hero] .td-ico { color: currentColor; }
:is(#pg, .md) [data-td-hero] a:not(.btn) { color: var(--c600); }
:is(#pg, .md) [data-td-hero] img { filter: none !important; }

/* Buttons in a header: secondary = outlined white, primary = brand. */
:is(#pg, .md) [data-td-hero] .btn:not([data-td-stat]), :is(#pg, .md) [data-td-hero] button:not(.bp):not([class*="tab"]):not([class*="pill"]):not([class*="chip"]):not([class*="stat"]):not([class*="kpi"]):not([class*="tile"]):not([data-td-stat]) {
  background: #fff !important; color: var(--ws-ink-2) !important; border: 1px solid var(--ws-line-strong) !important; box-shadow: var(--ws-shadow) !important; backdrop-filter: none !important; text-shadow: none !important;
  font-family: var(--ff-body) !important; font-size: var(--fs-md) !important; font-weight: 600 !important; border-radius: 8px !important; min-height: 36px; padding: 0 14px !important; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0 !important; text-transform: none !important;
}
:is(#pg, .md) [data-td-hero] .btn:hover, :is(#pg, .md) [data-td-hero] button:hover { background: var(--ws-hover) !important; }
:is(#pg, .md) [data-td-hero] .btn.bp, :is(#pg, .md) [data-td-hero] button.bp, :is(#pg, .md) [data-td-hero] [class*="hero-cta"], :is(#pg, .md) [data-td-hero] [class*="-cta"]:not([class*="cta-icon"]):not([class*="cta-label"]) {
  background: var(--c500) !important; color: #fff !important; border: 1px solid color-mix(in srgb, var(--c500) 85%, #000) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .1) !important;
}
:is(#pg, .md) [data-td-hero] .btn.bp:hover, :is(#pg, .md) [data-td-hero] button.bp:hover, :is(#pg, .md) [data-td-hero] [class*="hero-cta"]:hover { background: var(--c600) !important; }
:is(#pg, .md) [data-td-hero] [class*="cta-icon"] { background: transparent !important; border: 0 !important; color: inherit !important; padding: 0 !important; min-height: 0; font-size: 1.1em !important; }
:is(#pg, .md) [data-td-hero] .btn.bsm, :is(#pg, .md) [data-td-hero] button.bsm { min-height: 30px; padding: 0 11px !important; font-size: var(--fs-sm) !important; }

/* The stat strip (a "ledger"): flat figures separated by hairlines. */
:is(#pg, .md) [data-td-hero] [class*="stat"]:not([class*="stats"]):not(button), :is(#pg, .md) [data-td-hero] [class*="kpi"]:not([class*="kpis"]), :is(#pg, .md) [data-td-hero] [class*="tile"]:not([class*="tiles"]), :is(#pg, .md) [data-td-hero] [class*="metric"]:not([class*="metrics"]), :is(#pg, .md) [data-td-hero] button[class*="stat"] {
  background: transparent !important; border: 0 !important; border-left: 1px solid var(--ws-line) !important; border-radius: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; padding: 2px 18px 2px 16px !important; min-width: 0 !important; text-align: left !important; color: var(--ws-ink) !important; transform: none !important;
}
:is(#pg, .md) [data-td-hero] [class*="stat"]:not([class*="stats"]):first-child, :is(#pg, .md) [data-td-hero] [class*="kpi"]:not([class*="kpis"]):first-child, :is(#pg, .md) [data-td-hero] [class*="tile"]:not([class*="tiles"]):first-child, :is(#pg, .md) [data-td-hero] [class*="metric"]:not([class*="metrics"]):first-child { border-left: 0 !important; padding-left: 0 !important; }
:is(#pg, .md) [data-td-hero] [class*="stat"]:not([class*="stats"]):hover, :is(#pg, .md) [data-td-hero] [class*="kpi"]:not([class*="kpis"]):hover, :is(#pg, .md) [data-td-hero] [class*="tile"]:not([class*="tiles"]):hover { background: transparent !important; transform: none !important; }
:is(#pg, .md) [data-td-hero] [class*="stat"] [class*="-n"], :is(#pg, .md) [data-td-hero] [class*="kpi"] [class*="-n"], :is(#pg, .md) [data-td-hero] [class*="tile"] [class*="-n"], :is(#pg, .md) [data-td-hero] [class*="metric"] [class*="-n"],
:is(#pg, .md) [data-td-hero] [class*="stat"] [class*="-v"]:not([class*="-value-"]), :is(#pg, .md) [data-td-hero] [class*="stat"] [class*="value"], :is(#pg, .md) [data-td-hero] [class*="kpi"] [class*="value"], :is(#pg, .md) [data-td-hero] [class*="tile"] [class*="value"],
:is(#pg, .md) [data-td-hero] [class*="stat"] > b, :is(#pg, .md) [data-td-hero] [class*="stat"] > strong, :is(#pg, .md) [data-td-hero] [class*="kpi"] > b, :is(#pg, .md) [data-td-hero] [class*="tile"] > strong {
  font-family: var(--ff-display) !important; font-size: 22px !important; font-weight: 650 !important; line-height: 1.1 !important; letter-spacing: -.02em !important; font-variant-numeric: tabular-nums; text-shadow: none !important; margin: 0 0 3px !important;
}
:is(#pg, .md) [data-td-hero] [class*="stat"] [class*="-l"]:not([class*="-label-"]), :is(#pg, .md) [data-td-hero] [class*="kpi"] [class*="-l"], :is(#pg, .md) [data-td-hero] [class*="tile"] [class*="-l"], :is(#pg, .md) [data-td-hero] [class*="metric"] [class*="-l"],
:is(#pg, .md) [data-td-hero] [class*="stat"] [class*="label"], :is(#pg, .md) [data-td-hero] [class*="kpi"] [class*="label"], :is(#pg, .md) [data-td-hero] [class*="tile"] [class*="label"], :is(#pg, .md) [data-td-hero] [class*="stat"] small, :is(#pg, .md) [data-td-hero] [class*="kpi"] small {
  font-size: var(--fs-xs) !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--ws-muted) !important; opacity: 1 !important; line-height: 1.3 !important; text-shadow: none !important;
}
:is(#pg, .md) [data-td-hero] [class*="stat"] [class*="meta"], :is(#pg, .md) [data-td-hero] [class*="kpi"] [class*="meta"], :is(#pg, .md) [data-td-hero] [class*="stat"] [class*="sub"] { font-size: var(--fs-xs) !important; color: var(--ws-faint) !important; text-transform: none !important; letter-spacing: 0 !important; }
/* Containers of the strip: a row with a hairline above, no boxed look. */
:is(#pg, .md) [data-td-hero] [class*="stats"], :is(#pg, .md) [data-td-hero] [class*="kpis"], :is(#pg, .md) [data-td-hero] [class*="tiles"], :is(#pg, .md) [data-td-hero] [class*="metrics"], :is(#pg, .md) [data-td-hero] [class*="pulse"]:not([class*="pulse-"]) {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--ws-line) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  padding: 16px 0 0 !important; margin-top: 16px !important; display: flex !important; flex-wrap: wrap; gap: 10px 0 !important; align-items: stretch;
}
:is(#pg, .md) [data-td-hero] [class*="pulse-"] { background: transparent !important; border-color: var(--ws-line) !important; backdrop-filter: none !important; box-shadow: none !important; }
:is(#pg, .md) [data-td-hero] [class*="pulse-divider"], :is(#pg, .md) [data-td-hero] [class*="pulse-health-ring"] { display: none !important; }
:is(#pg, .md) [data-td-hero] [class*="pulse-health"] { border-left: 0 !important; padding-left: 0 !important; }
:is(#pg, .md) [data-td-hero] [class*="pulse-stats"] { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; flex: 1 1 auto; }
:is(#pg, .md) [data-td-hero] [class*="pulse-value"] { font-family: var(--ff-display) !important; font-size: 22px !important; font-weight: 650 !important; color: var(--ws-ink) !important; }
:is(#pg, .md) [data-td-hero] [class*="pulse-trend"] { border-left: 1px solid var(--ws-line) !important; padding-left: 18px !important; }
:is(#pg, .md) [data-td-hero] [class*="pulse-trend"] svg * { stroke: var(--c500) !important; }
:is(#pg, .md) [data-td-hero] [class*="pulse-trend"] svg [fill]:not([fill="none"]) { fill: color-mix(in srgb, var(--c500) 12%, transparent) !important; }
/* Decorative icon badges next to a title become a quiet tinted square. */
:is(#pg, .md) [data-td-hero] [class*="hero-icon"], :is(#pg, .md) [data-td-hero] [class*="-ic"]:not(.td-ico):not([class*="-icon"]):not([class*="cta"]) { background: var(--ws-selected) !important; color: var(--c600) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: 10px !important; }
:is(#pg, .md) [data-td-hero] [class*="pulse-label"] { color: var(--ws-muted) !important; }
:is(#pg, .md) [data-td-hero] [class*="live"], :is(#pg, .md) [data-td-hero] [class*="status-pill"], :is(#pg, .md) [data-td-hero] [class*="badge"] { background: var(--s50) !important; color: var(--ws-ink-2) !important; border: 1px solid var(--ws-line) !important; text-shadow: none !important; }

/* Chips / tab rows that some modules place INSIDE the header */
:is(#pg, .md) [data-td-hero] [class*="tab"]:not([class*="tabs"]):not([class*="table"]) { background: transparent !important; color: var(--ws-muted) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; }
:is(#pg, .md) [data-td-hero] [class*="tab"][class*="-on"], :is(#pg, .md) [data-td-hero] [class*="tab"][class*="active"], :is(#pg, .md) [data-td-hero] [class*="tab"].a { color: var(--ws-ink) !important; border-bottom-color: var(--c500) !important; }

@media (max-width: 640px) {
  :is(#pg, .md) [data-td-hero] { padding: 16px 16px !important; border-radius: 10px !important; }
  :is(#pg, .md) [data-td-hero] h1, :is(#pg, .md) [data-td-hero] h2, :is(#pg, .md) [data-td-hero] [class*="hero-title"] { font-size: var(--fs-xl) !important; }
  :is(#pg, .md) [data-td-hero] [class*="stat"]:not([class*="stats"]), :is(#pg, .md) [data-td-hero] [class*="kpi"]:not([class*="kpis"]) { flex: 1 1 40%; padding: 6px 12px 6px 12px !important; }
  :is(#pg, .md) [data-td-hero] [class*="stat"] [class*="-n"], :is(#pg, .md) [data-td-hero] [class*="kpi"] [class*="-n"], :is(#pg, .md) [data-td-hero] [class*="pulse-value"] { font-size: 19px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard (dashboard-pro) — same light system as every other header
   ═══════════════════════════════════════════════════════════════════════════ */
#pg .dp-root { --dp-r: 12px; --dp-r-md: 10px; --dp-r-sm: 8px; --dp-ff-d: var(--ff-display); --dp-line: var(--ws-line); --dp-line-soft: var(--s100); --dp-e1: var(--ws-shadow); --dp-e2: var(--sh-md); --dp-e3: var(--ws-shadow-lg); padding: 0 0 48px; max-width: none; animation: none; }
#pg .dp-root h1, #pg .dp-root h2, #pg .dp-root h3, #pg .dp-root h4 { font-weight: 650; letter-spacing: -.015em; }
#pg .dp-hero, #pg .dp-hero.dp-hero-night, #pg .dp-hero.dp-hero-day { background: #fff; color: var(--ws-ink); border: 1px solid var(--ws-line); box-shadow: var(--ws-shadow); border-radius: 12px; padding: 20px 24px; position: relative; }
#pg .dp-hero::before { background: var(--c500); background-image: none; opacity: 1; inset: auto; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1; }
#pg .dp-hero-photo { box-shadow: 0 0 0 1px var(--ws-line); background: var(--s50); width: 72px; height: 72px; border-radius: 10px; }
#pg .dp-hero-photo.is-logo { background: #fff; }
#pg .dp-hero-greet { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
#pg .dp-hero-meta { color: var(--ws-ink-2); font-weight: 500; opacity: 1; font-size: var(--fs-md); }
#pg .dp-hero-meta b { font-weight: 600; }
#pg .dp-hero-agency { color: var(--ws-muted); opacity: 1; font-size: var(--fs-sm); }
#pg .dp-hero-brief { background: var(--s50); border: 1px solid var(--ws-line); color: var(--ws-ink-2); backdrop-filter: none; border-radius: 8px; font-weight: 450; }
#pg .dp-hero-pill { background: #fff; border: 1px solid var(--ws-line); color: var(--ws-ink-2); backdrop-filter: none; font-weight: 600; letter-spacing: .04em; font-size: 10px; }
#pg .dp-hero-status:hover { background: var(--ws-hover); transform: none; }
#pg .dp-hero-livedot { background: var(--ok); box-shadow: none; animation: none; }
#pg .dp-hero-dot { background: var(--ok); }
#pg .dp-hero-status.dp-bs-event { background: var(--warn-soft-bg); border-color: var(--warn-soft-bd); color: var(--warn-soft-fg); }
#pg .dp-hero-status.dp-bs-emergency { background: var(--err-soft-bg); border-color: var(--err-soft-bd); color: var(--err-soft-fg); }
#pg .dp-hero-aside { background: var(--s50); border: 1px solid var(--ws-line); backdrop-filter: none; border-radius: 10px; }
#pg .dp-hero-time { color: var(--ws-ink); font-weight: 650; letter-spacing: -.03em; font-size: 26px; }
#pg .dp-hero-date, #pg .dp-hero-tz, #pg .dp-wx-cond, #pg .dp-wx-loc { color: var(--ws-muted); opacity: 1; }
#pg .dp-hero-div { background: var(--ws-line); }
#pg .dp-wx-temp { color: var(--ws-ink); font-weight: 650; }
#pg .dp-wx-icon { filter: none; font-size: 28px; }
#pg .dp-wx-spin { border-color: var(--ws-line-strong); border-top-color: var(--c500); }
#pg .dp-fc-day { background: #fff; border: 1px solid var(--ws-line); backdrop-filter: none; border-radius: 8px; color: var(--ws-ink); }
#pg .dp-fc-day:hover { background: var(--ws-hover); transform: none; }
#pg .dp-fc-lbl { color: var(--ws-muted); opacity: 1; }
#pg .dp-fc-lo { color: var(--ws-faint); opacity: 1; }
#pg .dp-fc-precip { color: var(--info-soft-fg); opacity: 1; }
#pg .dp-fc-skel .dp-fc-lbl, #pg .dp-fc-skel .dp-fc-temps { background: var(--s100); }
/* KPI strip → ledger */
#pg .dp-hero-kpis { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ws-line); }
#pg .dp-hk { background: transparent; border: 0; border-left: 1px solid var(--ws-line); border-radius: 0; padding: 2px 22px 2px 18px; backdrop-filter: none; flex: 1 1 120px; min-width: 120px; }
#pg .dp-hk:first-child { border-left: 0; padding-left: 0; }
#pg .dp-hk.dp-clickable:hover { transform: none; background: transparent; border-color: var(--ws-line); }
#pg .dp-hk.dp-clickable:hover .dp-hk-n { color: var(--c600); }
#pg .dp-hk-n { color: var(--ws-ink); font-size: 24px; font-weight: 650; letter-spacing: -.02em; transition: color .12s; }
#pg .dp-hk-l { color: var(--ws-muted); opacity: 1; font-weight: 600; font-size: 10.5px; letter-spacing: .06em; }
#pg .dp-hk-flag { background: var(--s100); color: var(--ws-ink-2); font-weight: 600; }
#pg .dp-hk-flag.warn { background: var(--warn-soft-bg); color: var(--warn-soft-fg); }
#pg .dp-hk-flag.err { background: var(--err-soft-bg); color: var(--err-soft-fg); }
#pg .dp-hk-flag.ok { background: var(--ok-soft-bg); color: var(--ok-soft-fg); }
@media (max-width: 640px) { #pg .dp-hero { padding: 16px; } #pg .dp-hk { flex: 1 1 40%; padding: 6px 12px; } #pg .dp-hk:nth-child(odd) { border-left: 0; padding-left: 0; } }
/* alerts + sections + cards */
#pg .dp-alert { border-radius: 8px; font-weight: 600; box-shadow: none; }
#pg .dp-alert:hover { transform: none; box-shadow: var(--ws-shadow); }
#pg .dp-alert-err { background: var(--err-soft-bg); border-color: var(--err-soft-bd); color: var(--err-soft-fg); }
#pg .dp-alert-warn { background: var(--warn-soft-bg); border-color: var(--warn-soft-bd); color: var(--warn-soft-fg); }
#pg .dp-alert-info { background: var(--info-soft-bg); border-color: var(--info-soft-bd); color: var(--info-soft-fg); }
#pg .dp-alert-ok { background: var(--ok-soft-bg); border-color: var(--ok-soft-bd); color: var(--ok-soft-fg); }
#pg .dp-section { font-family: var(--ff-body); font-weight: 600; letter-spacing: .08em; color: var(--ws-muted); margin: 24px 2px 10px; }
#pg .dp-section::after { background: var(--ws-line); }
#pg .dp-card { border: 1px solid var(--ws-line); box-shadow: var(--ws-shadow); border-radius: 10px; }
#pg .dp-card:hover { box-shadow: var(--ws-shadow); transform: none; }
#pg .dp-qa { border: 1px solid var(--ws-line); border-radius: 10px; box-shadow: none; }
#pg .dp-qa:hover { border-color: var(--c500); background: var(--ws-selected); transform: none; box-shadow: none; }
#pg .dp-qa-ic { border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Toolbars, filter rows, chips and empty states across modules
   ═══════════════════════════════════════════════════════════════════════════ */
/* Ticket toolbar: one row, groups inline, no stacked selects. */
#pg .tk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ws-line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--ws-shadow); }
#pg .tk-toolbar-search { flex: 1 1 260px; min-width: 200px; }
#pg .tk-toolbar-group { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 0 0 auto; }
#pg .tk-toolbar .fi { min-height: 36px; box-shadow: none; }
#pg .tk-toolbar select.fi { width: auto !important; min-width: 0 !important; border-radius: 8px !important; border: 1px solid var(--ws-line-strong) !important; font-size: var(--fs-sm) !important; }
#pg .tk-viewtoggle { display: inline-flex; border: 1px solid var(--ws-line-strong); border-radius: 8px; overflow: hidden; background: #fff; }
#pg .tk-viewtoggle-btn { border: 0; background: #fff; color: var(--ws-muted); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#pg .tk-viewtoggle-btn + .tk-viewtoggle-btn { border-left: 1px solid var(--ws-line); }
#pg .tk-viewtoggle-on { background: var(--ws-selected); color: var(--c700); }
#pg .tk-tabbar { display: inline-flex; gap: 2px; background: var(--s100); border: 1px solid var(--ws-line); border-radius: 9px; padding: 3px; margin-bottom: 12px; }
#pg .tk-tab { border: 0; background: transparent; color: var(--ws-muted); font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
#pg .tk-tab-on { background: #fff; color: var(--ws-ink); box-shadow: var(--ws-shadow); }
#pg .tk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#pg .tk-chip { border: 1px solid var(--ws-line-strong); background: #fff; color: var(--ws-ink-2); border-radius: 999px; padding: 5px 11px 5px 9px; font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#pg .tk-chip:hover { background: var(--ws-hover); }
#pg .tk-chip-on { background: var(--ws-selected); border-color: color-mix(in srgb, var(--c500) 40%, #fff); color: var(--c700); font-weight: 600; }
#pg .tk-chip-dot { color: var(--ch, var(--c500)); display: inline-flex; }
#pg .tk-chip-dot .td-ico { width: 13px; height: 13px; }
#pg .tk-chip-n { font-size: 10.5px; font-weight: 600; background: var(--s100); color: var(--ws-muted); padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; }
#pg .tk-chip-on .tk-chip-n { background: #fff; color: var(--c700); }

/* Generic segmented tab bars and filter chips used by other modules */
#pg [class*="-tabbar"], #pg [class*="-tabs"]:not(.tabs) { gap: 2px; }
#pg [class*="-chip"]:not([class*="-chip-"]) { border-radius: 999px; font-weight: 500; }

/* Empty states: quiet, with a clear next step */
#pg [style*="text-align:center"][style*="padding:60px"], #pg [style*="text-align:center"][style*="padding:40px"] { color: var(--ws-muted); }
#pg [style*="text-align:center"] > [style*="font-size:56px"], #pg [style*="text-align:center"] > [style*="font-size:48px"], #pg [style*="text-align:center"] > [style*="font-size:64px"], #pg [style*="text-align:center"] > [style*="font-size:52px"] { font-size: 40px !important; opacity: 1 !important; margin-bottom: 10px !important; }
#pg [style*="text-align:center"] > [style*="font-size:4"] > .td-ico-wrap.td-ico-solo .td-ico, #pg [style*="text-align:center"] > [style*="font-size:5"] > .td-ico-wrap.td-ico-solo .td-ico, #pg [style*="text-align:center"] > [style*="font-size:6"] > .td-ico-wrap.td-ico-solo .td-ico { width: 44px; height: 44px; color: var(--ws-faint); opacity: 1; stroke-width: 1.3; }

/* Hard-coded blues that a few modules use for "get started" panels follow the brand instead of clashing with it. */
#pg [style*="background:linear-gradient(135deg,#1565c0"], #pg [style*="background:linear-gradient(135deg, #1565c0"], #pg [style*="background:linear-gradient(135deg,#1e3a8a"], #pg [style*="background:linear-gradient(135deg,#0d47a1"], #pg [style*="background:linear-gradient(135deg,#1a5c9c"], #pg [style*="background:linear-gradient(135deg,#0a2744"] { background: #fff !important; color: var(--ws-ink) !important; border: 1px solid var(--ws-line) !important; }
#pg [style*="background:linear-gradient(135deg,#1565c0"] *, #pg [style*="background:linear-gradient(135deg,#1e3a8a"] *, #pg [style*="background:linear-gradient(135deg,#0d47a1"] *, #pg [style*="background:linear-gradient(135deg,#1a5c9c"] *, #pg [style*="background:linear-gradient(135deg,#0a2744"] * { color: inherit; text-shadow: none !important; }

/* Keyboard focus is always visible */
#pg :focus-visible, .sb :focus-visible, .tb :focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ws-focus); border-radius: 6px; }

/* Print: plain */
@media print { .ly .sb, .ly .tb, #td-footer { display: none !important; } .ly .mn { margin: 0 !important; } :is(#pg, .md) [data-td-hero] { border: 0 !important; box-shadow: none !important; } }

/* Ticket hero "pulse" strip: the health block becomes the first ledger cell. */
:is(#pg, .md) [data-td-hero] .tk-hero-pulse-health { background: transparent !important; border: 0 !important; border-right: 1px solid var(--ws-line) !important; border-radius: 0 !important; padding: 2px 18px 2px 0 !important; min-width: 0 !important; backdrop-filter: none !important; overflow: visible !important; flex: 0 0 auto; }
:is(#pg, .md) [data-td-hero] .tk-hero-pulse-stats { display: flex !important; flex-wrap: wrap; gap: 8px 0 !important; }
:is(#pg, .md) [data-td-hero] .tk-hero-pulse-stat { flex: 1 1 auto; }
:is(#pg, .md) [data-td-hero] .tk-hero-pulse-meta { font-size: var(--fs-xs) !important; color: var(--ws-faint) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ── Ledger strip via structural tags (set by modules-ui-pro tagStats) ──── */
:is(#pg, .md) [data-td-hero] [data-td-stats] { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 10px 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; border-top: 1px solid var(--ws-line) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 16px 0 0 !important; margin: 16px 0 0 !important; max-width: none !important; }
:is(#pg, .md) [data-td-hero] [data-td-stats] > [data-td-stat] { flex: 1 1 auto; background: transparent !important; background-image: none !important; border: 0 !important; border-left: 1px solid var(--ws-line) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 2px 18px 2px 16px !important; margin: 0 !important; min-width: 0 !important; width: auto !important; text-align: left !important; color: var(--ws-ink) !important; transform: none !important; display: block !important; overflow: visible !important; }
:is(#pg, .md) [data-td-hero] [data-td-stats] > [data-td-stat]:first-child { border-left: 0 !important; padding-left: 0 !important; }
:is(#pg, .md) [data-td-hero] [data-td-stats] > [data-td-stat]:hover { background: transparent !important; transform: none !important; }
:is(#pg, .md) [data-td-hero] [data-td-stat] [data-td-stat-n] { display: block; font-family: var(--ff-display) !important; font-size: 22px !important; font-weight: 650 !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: var(--ws-ink) !important; font-variant-numeric: tabular-nums; text-shadow: none !important; margin: 0 0 3px !important; padding: 0 !important; background: transparent !important; -webkit-text-fill-color: currentColor; }
:is(#pg, .md) [data-td-hero] [data-td-stat] [data-td-stat-l] { display: block; font-size: var(--fs-xs) !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--ws-muted) !important; opacity: 1 !important; line-height: 1.3 !important; text-shadow: none !important; margin: 0 !important; padding: 0 !important; }
:is(#pg, .md) [data-td-hero] [data-td-stat] [data-td-stat-m] { display: block; font-size: var(--fs-xs) !important; color: var(--ws-faint) !important; text-transform: none !important; letter-spacing: 0 !important; margin-top: 2px !important; opacity: 1 !important; }
:is(#pg, .md) [data-td-hero] [data-td-stat-x] { background: transparent !important; border-color: var(--ws-line) !important; backdrop-filter: none !important; box-shadow: none !important; color: var(--ws-muted) !important; }
:is(#pg, .md) [data-td-hero] [data-td-stat-x]:empty { display: none !important; }
:is(#pg, .md) [data-td-hero] [data-td-tone="ok"] { color: var(--ok-soft-fg) !important; }
:is(#pg, .md) [data-td-hero] [data-td-tone="warn"] { color: var(--warn-soft-fg) !important; }
:is(#pg, .md) [data-td-hero] [data-td-tone="err"] { color: var(--err-soft-fg) !important; }
:is(#pg, .md) [data-td-hero] [data-td-tone="info"] { color: var(--info-soft-fg) !important; }
:is(#pg, .md) [data-td-hero] [data-td-tone="muted"] { color: var(--ws-muted) !important; }
:is(#pg, .md) [data-td-hero] [data-td-stat] [data-td-stat-n][data-td-tone="muted"] { color: var(--ws-ink) !important; }
@media (max-width: 640px) {
  :is(#pg, .md) [data-td-hero] [data-td-stats] > [data-td-stat] { flex: 1 1 40%; padding: 6px 12px !important; }
  :is(#pg, .md) [data-td-hero] [data-td-stats] > [data-td-stat]:nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
  :is(#pg, .md) [data-td-hero] [data-td-stat] [data-td-stat-n] { font-size: 19px !important; }
}
:is(#pg, .md) [data-td-hero] [data-td-stat] [data-td-stat-i] { display: none !important; }
:is(#pg, .md) [data-td-hero] [data-td-tone="ink"] { color: var(--ws-ink) !important; -webkit-text-fill-color: var(--ws-ink); text-shadow: none !important; }
:is(#pg, .md) [data-td-hero] [data-td-tone] { opacity: 1 !important; }
:is(#pg, .md) [data-td-hero] .btn:disabled, :is(#pg, .md) [data-td-hero] button:disabled { background: var(--s50) !important; color: var(--ws-faint) !important; border-color: var(--ws-line) !important; cursor: not-allowed; opacity: 1 !important; }
:is(#pg, .md) [data-td-hero] #mex-bundle-btn:disabled, :is(#pg, .md) [data-td-hero] button#mex-bundle-btn:disabled { background: var(--s50) !important; color: var(--ws-faint) !important; border-color: var(--ws-line) !important; }
/* Export Centre: app.css pins its banner buttons by id with !important. */
:is(#pg, .md) [data-td-hero] #mex-export-all-csv, :is(#pg, .md) [data-td-hero] #mex-board-pack-btn { background: #fff !important; color: var(--ws-ink-2) !important; border-color: var(--ws-line-strong) !important; box-shadow: var(--ws-shadow) !important; }
:is(#pg, .md) [data-td-hero] #mex-export-all-csv:hover { background: var(--ws-hover) !important; border-color: var(--s400) !important; transform: none !important; }
:is(#pg, .md) [data-td-hero] #mex-export-all-pdf, :is(#pg, .md) [data-td-hero] #mex-bundle-btn:not(:disabled) { background: var(--c500) !important; background-image: none !important; color: #fff !important; border-color: color-mix(in srgb, var(--c500) 85%, #000) !important; box-shadow: 0 1px 2px rgba(16,24,40,.1) !important; }
:is(#pg, .md) [data-td-hero] #mex-export-all-pdf:hover, :is(#pg, .md) [data-td-hero] #mex-bundle-btn:not(:disabled):hover { background: var(--c600) !important; transform: none !important; box-shadow: none !important; }
:is(#pg, .md) [data-td-hero] #mex-search { background: var(--s50) !important; border: 1px solid var(--ws-line-strong) !important; color: var(--ws-ink) !important; }
:is(#pg, .md) [data-td-hero] #mex-search:focus { background: #fff !important; border-color: var(--c500) !important; box-shadow: 0 0 0 3px var(--ws-focus) !important; }
:is(#pg, .md) [data-td-hero] #mex-search::placeholder { color: var(--ws-faint) !important; }

/* ── Modal headers as ledger headers ───────────────────────────────────── */
.md [data-td-hero] { border-radius: 12px 12px 0 0 !important; border: 0 !important; border-bottom: 1px solid var(--ws-line) !important; box-shadow: none !important; margin: 0 !important; padding: 18px 22px !important; }
.md [data-td-hero]::before { display: none; }
.md [data-td-hero] h1, .md [data-td-hero] h2, .md [data-td-hero] h3, .md [data-td-hero] [class*="-title"]:not(.btn) { font-size: var(--fs-lg) !important; }
.md [data-td-hero] [data-td-stat] [data-td-stat-n] { font-size: 18px !important; }
.md [data-td-hero] .md-x, .md [data-td-hero] [class*="close"] { background: transparent !important; border: 0 !important; color: var(--ws-muted) !important; }
.md .mh, .md .md-h { background: #fff; }
.md .mh h3, .md .md-h h2 { color: var(--ws-ink); }

/* ── Notification / chat side panels ───────────────────────────────────── */
.notif-panel { background: #fff; box-shadow: -12px 0 40px rgba(16, 24, 40, .16); border-left: 1px solid var(--ws-line); }
.notif-h, .notif-panel > div:first-child, .chat-h { background: #fff !important; background-image: none !important; color: var(--ws-ink) !important; border-bottom: 1px solid var(--ws-line) !important; }
.notif-h *, .notif-panel > div:first-child *, .chat-h * { color: var(--ws-ink); }
.notif-h h3, .chat-h h3 { font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 650; }
.notif-h button, .chat-h button, .notif-panel > div:first-child button { background: #fff !important; border: 1px solid var(--ws-line-strong) !important; color: var(--ws-ink-2) !important; border-radius: 7px !important; font-size: var(--fs-xs) !important; }
.notif-x, .chat-x { color: var(--ws-muted) !important; }
.chat-panel { background: var(--ws-canvas); border-left: 1px solid var(--ws-line); }

/* ═══════════════════════════════════════════════════════════════════════════
   v1.0.9.118 — second design pass
   ═══════════════════════════════════════════════════════════════════════════ */
/* A hero laid out as a two-column flex row (title left, stats right) wraps:
   the stat strip always drops to a full-width row under the title block. */
:is(#pg, .md) [data-td-hero] { flex-wrap: wrap !important; }
:is(#pg, .md) [data-td-hero] > [data-td-stats] { flex: 1 1 100% !important; width: 100% !important; }
/* Header rows: title block grows, actions sit right and never wrap into it. */
#pg [data-td-hero="row"] > :first-child { flex: 1 1 320px; }
#pg [data-td-hero="row"] > :not(:first-child) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pg [data-td-hero="row"] > :not(:first-child) > * { margin-bottom: 0 !important; }
#pg [data-td-hero="row"] p { max-width: 720px; margin-bottom: 0 !important; }
#pg [data-td-hero="row"] [style*="margin-bottom"] { margin-bottom: 0 !important; }
/* Icons dropped into stat labels (car park tone glyphs) read as noise. */
:is(#pg, .md) [data-td-stat-l] .td-ico-wrap, :is(#pg, .md) [data-td-stat-l] [class*="-ico"] { display: none !important; }
/* Dark module panels re-tagged as heroes: keep them below the real header. */
#pg [data-td-hero="panel"] { padding: 18px 22px !important; }
#pg [data-td-hero="panel"] [class*="-title"], #pg [data-td-hero="panel"] [class*="hero-name"] { font-size: var(--fs-xl) !important; }
#pg [data-td-hero="panel"] [class*="-spot"], #pg [data-td-hero="panel"] [class*="-code"] { background: var(--ws-selected) !important; color: var(--c700) !important; border: 0 !important; text-shadow: none !important; }
#pg [data-td-hero="panel"] [class*="-btn"], #pg [data-td-hero="panel"] [class*="-action"] a, #pg [data-td-hero="panel"] [class*="-action"] button { background: #fff !important; color: var(--ws-ink) !important; border: 1px solid var(--ws-line) !important; box-shadow: none !important; }
#pg [data-td-hero="panel"] [class*="-btn"]:first-child { background: var(--c500) !important; color: #fff !important; border-color: var(--c500) !important; }
#pg [data-td-hero="panel"] [style*="opacity"] { opacity: 1 !important; }

/* Page-level stat rows (data-td-stats="page"): the pastel KPI tiles most
   modules paint become one white ledger card, same figure/label system as
   the header strip. */
#pg [data-td-stats="page"] { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 10px 0 !important; background: #fff !important; background-image: none !important; border: 1px solid var(--ws-line) !important; border-radius: 12px !important; box-shadow: var(--ws-shadow) !important; padding: 14px 20px !important; margin: 0 0 16px !important; max-width: none !important; grid-template-columns: none !important; }
#pg [data-td-stats="page"] > [data-td-stat] { flex: 1 1 auto; background: transparent !important; background-image: none !important; border: 0 !important; border-left: 1px solid var(--ws-line) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 2px 18px 2px 16px !important; margin: 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; text-align: left !important; color: var(--ws-ink) !important; transform: none !important; display: block !important; overflow: visible !important; aspect-ratio: auto !important; min-height: 0 !important; height: auto !important; font: inherit !important; }
#pg [data-td-stats="page"] > [data-td-stat]:first-child { border-left: 0 !important; padding-left: 0 !important; }
#pg [data-td-stats="page"] > [data-td-stat]:hover, #pg [data-td-stats="page"] > [data-td-stat].is-active, #pg [data-td-stats="page"] > [data-td-stat].active { background: transparent !important; transform: none !important; box-shadow: none !important; }
#pg [data-td-stats="page"] > [data-td-stat].is-active [data-td-stat-l], #pg [data-td-stats="page"] > [data-td-stat].active [data-td-stat-l] { color: var(--c600) !important; }
#pg [data-td-stats="page"] > [data-td-stat]::before, #pg [data-td-stats="page"] > [data-td-stat]::after { display: none !important; }
#pg [data-td-stats="page"] [data-td-stat-n] { display: block; font-family: var(--ff-display) !important; font-size: 22px !important; font-weight: 650 !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: var(--ws-ink) !important; font-variant-numeric: tabular-nums; text-shadow: none !important; margin: 0 0 3px !important; padding: 0 !important; background: transparent !important; -webkit-text-fill-color: currentColor; opacity: 1 !important; }
#pg [data-td-stats="page"] [data-td-stat-n] * { font-size: inherit !important; color: inherit !important; }
#pg [data-td-stats="page"] [data-td-stat-n] [class*="unit"], #pg [data-td-stats="page"] [data-td-stat-n] small { font-size: var(--fs-sm) !important; color: var(--ws-muted) !important; }
#pg [data-td-stats="page"] [data-td-stat-l] { display: block; font-size: var(--fs-xs) !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--ws-muted) !important; opacity: 1 !important; line-height: 1.3 !important; text-shadow: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
#pg [data-td-stats="page"] [data-td-stat-m] { display: block; font-size: var(--fs-xs) !important; color: var(--ws-faint) !important; text-transform: none !important; letter-spacing: 0 !important; margin-top: 2px !important; opacity: 1 !important; background: transparent !important; padding: 0 !important; }
#pg [data-td-stats="page"] [data-td-stat-i] { display: none !important; }
#pg [data-td-stats="page"] [data-td-stat] svg:not(.td-ico) { display: none !important; }
#pg [data-td-stats="page"] [data-td-stat] .td-ico-wrap { display: none !important; }
#pg [data-td-stats="page"] [data-td-stat-x] { background: transparent !important; border-color: var(--ws-line) !important; box-shadow: none !important; color: var(--ws-muted) !important; }
#pg [data-td-stats="page"] [data-td-stat-x]:empty { display: none !important; }
#pg [data-td-stats="page"] [data-td-tone="ok"] { color: var(--ok-soft-fg, #166534) !important; }
#pg [data-td-stats="page"] [data-td-tone="warn"] { color: var(--warn-soft-fg, #92400e) !important; }
#pg [data-td-stats="page"] [data-td-tone="err"] { color: var(--err-soft-fg, #991b1b) !important; }
#pg [data-td-stats="page"] [data-td-tone="info"] { color: var(--c700) !important; }
@media (max-width: 700px) {
  #pg [data-td-stats="page"] { padding: 12px 14px !important; }
  #pg [data-td-stats="page"] > [data-td-stat] { flex: 1 1 40%; padding: 6px 12px !important; }
  #pg [data-td-stats="page"] > [data-td-stat]:nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
  #pg [data-td-stats="page"] [data-td-stat-n] { font-size: 19px !important; }
}

/* Buttons a module painted in its own blue / green / purple (tagged by
   modules-ui-pro normalizeButtons) take the brand colour instead. Red and
   amber fills are semantic and are never touched. */
#pg [data-td-btn="brand"] { background: var(--c500) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--c500) !important; box-shadow: none !important; text-shadow: none !important; }
#pg [data-td-btn="brand"]:hover { background: var(--c600) !important; border-color: var(--c600) !important; filter: none !important; transform: none !important; }
#pg [data-td-btn="brand"]:disabled { opacity: .5; }

/* Key Register side panel header was a blue gradient. */
#pg .kr-side-h { background: #fff !important; color: var(--ws-ink) !important; border-bottom: 1px solid var(--ws-line) !important; }
#pg .kr-side-h * { color: var(--ws-ink) !important; }
/* Contractor Portal "How it works" strip and similar tinted info blocks. */
#pg [style*="background:#e3f2fd"], #pg [style*="background: #e3f2fd"], #pg [style*="background:#e8eaf6"], #pg [style*="background:#eff6ff"], #pg [style*="background: #eff6ff"] { background: var(--s50) !important; border-color: var(--ws-line) !important; }
/* Empty-state cells some registers tint beige. */
#pg [style*="background:#fdf5e6"], #pg [style*="background:#fff8e1"]:not([class*="pill"]):not([class*="chip"]):not(button) { background: var(--s50) !important; border-color: var(--ws-line) !important; }
/* Nested cell core (icon | body) */
#pg [data-td-stat] [data-td-stat-core] { display: block !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; }
:is(#pg, .md) [data-td-hero] [data-td-stat-i], #pg [data-td-stats="page"] [data-td-stat-i] { display: none !important; }
/* Donut / ring graphics inside a ledger figure: show the figure, drop the ring */
:is(#pg, .md) [data-td-hero] [data-td-stat-n] > svg { display: none !important; }
:is(#pg, .md) [data-td-hero] [data-td-stat-n] [class*="pct"], :is(#pg, .md) [data-td-hero] [data-td-stat-n] > div, :is(#pg, .md) [data-td-hero] [data-td-stat-n] > span { position: static !important; transform: none !important; font-size: inherit !important; color: inherit !important; }
/* Adopted action bars */
#pg [data-td-hero] [data-td-actions] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
/* Selects dropped straight into a filter/toolbar row keep their natural width. */
#pg [class*="filter"] > select.fi, #pg [class*="toolbar"] > select.fi, #pg [class*="-bar"] > select.fi { width: auto !important; flex: 0 0 auto !important; min-width: 120px; }
/* Active filter chips / pills a module painted purple or blue */
#pg [data-td-btn="brand-chip"] { background: var(--c500) !important; background-image: none !important; color: #fff !important; border-color: var(--c500) !important; box-shadow: none !important; }
#pg [data-td-btn="brand-chip"] * { color: inherit !important; }
/* Table row hover: neutral instead of the brand tint */
#pg table.t tr:hover td { background: var(--s50) !important; }

/* ── Resident welcome tour (modules-welcome-guide) joins the light system ── */
#td-tour-root .td-tour-ov { background: rgba(15, 23, 42, .42) !important; }
#td-tour-root .td-tour-card { border-radius: 14px !important; box-shadow: 0 24px 64px -20px rgba(15, 23, 42, .35), 0 0 0 1px var(--ws-line) !important; font-family: var(--ff-body) !important; }
#td-tour-root .td-tour-card.is-hero { background: #fff !important; color: var(--ws-ink) !important; box-shadow: 0 24px 64px -20px rgba(15, 23, 42, .35), 0 0 0 1px var(--ws-line) !important; }
#td-tour-root .td-tour-card.is-hero::before, #td-tour-root .td-tour-card.is-hero::after { display: none !important; }
#td-tour-root .td-tour-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c500); display: block !important; }
#td-tour-root .td-tour-t, #td-tour-root .is-hero .td-tour-t { color: var(--ws-ink) !important; text-shadow: none !important; font-family: var(--ff-display) !important; font-size: var(--fs-xl) !important; letter-spacing: -.01em; }
#td-tour-root .td-tour-b, #td-tour-root .is-hero .td-tour-b { color: var(--ws-muted) !important; font-size: var(--fs-md) !important; line-height: 1.5; }
#td-tour-root .td-tour-eyebrow, #td-tour-root .is-hero .td-tour-eyebrow { color: var(--c600) !important; opacity: 1 !important; letter-spacing: .08em; font-size: var(--fs-xs) !important; }
#td-tour-root .td-tour-ack, #td-tour-root .is-hero .td-tour-ack { color: var(--ws-muted) !important; }
#td-tour-root .td-tour-ack input, #td-tour-root .is-hero .td-tour-ack input { accent-color: var(--c500) !important; }
#td-tour-root .td-tour-ic, #td-tour-root .is-hero .td-tour-ic { background: var(--ws-selected) !important; color: var(--c600) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; }
#td-tour-root .td-tour-ic svg, #td-tour-root .is-hero .td-tour-ic svg { width: 22px !important; height: 22px !important; }
#td-tour-root .td-tour-progbar, #td-tour-root .is-hero .td-tour-progbar { background: var(--ws-line) !important; }
#td-tour-root .td-tour-progbar > i, #td-tour-root .is-hero .td-tour-progbar > i { background: var(--c500) !important; }
#td-tour-root .td-tour-count, #td-tour-root .is-hero .td-tour-count { color: var(--ws-faint) !important; }
#td-tour-root .td-tour-next, #td-tour-root .is-hero .td-tour-next { background: var(--c500) !important; color: #fff !important; box-shadow: none !important; border-radius: 8px !important; }
#td-tour-root .td-tour-next:hover { background: var(--c600) !important; }
#td-tour-root .td-tour-skip, #td-tour-root .td-tour-back, #td-tour-root .is-hero .td-tour-skip, #td-tour-root .is-hero .td-tour-back { color: var(--ws-muted) !important; background: transparent !important; border: 1px solid var(--ws-line) !important; border-radius: 8px !important; }
#td-tour-root .td-tour-dot { background: var(--ws-line) !important; }
#td-tour-root .td-tour-dot.is-on, #td-tour-root .td-tour-dot.active { background: var(--c500) !important; }
/* A module that hides every <span> in a compact button on phones also hid the
   icon we swapped in for its emoji — the icon always stays visible, and the
   Financial Management hero keeps its labels (they wrap fine). */
:is(#pg, .md) button .td-ico-wrap, :is(#pg, .md) .btn .td-ico-wrap { display: inline-flex !important; }
#pg .fin-hero-btn span { display: inline !important; }
@media (max-width: 700px) {
  /* stat strips laid out as a fixed n-column grid must wrap on phones */
  :is(#pg, .md) [data-td-hero] [data-td-stats] { display: flex !important; flex-wrap: wrap !important; grid-template-columns: none !important; overflow: visible !important; }
  :is(#pg, .md) [data-td-hero] [data-td-stats] > [data-td-stat] { flex: 1 1 40% !important; min-width: 0 !important; }
}


/* ── v1.0.9.121: one typeface everywhere ─────────────────────────────────
   Montserrat is no longer loaded. Inline styles inside the modules still
   name it (headings, KPI figures, print headers); an attribute selector
   re-points every one of those at the body stack, and the same rule covers
   Georgia — the old email/print serif. Weight and size are left alone. */
[style*="Montserrat"], [style*="Georgia"] { font-family: var(--ff-body) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   v1.0.9.126 — SITEWIDE CONSISTENCY PASS
   Evidence: a 20-page computed-style audit found SEVEN font families in use
   (Inter, Arial, -apple-system, Montserrat, SF Mono, Roboto Mono, monospace)
   and 27 distinct font sizes. The v121 rule only caught Montserrat named in an
   INLINE style; the hero stat labels (.pg-hstat-l, .ntc-hk-l, .pcl-hk-l,
   .bk-hk-l, .mt-hk-l, .fin-hero-h …) name it in a module <style> block, so it
   survived. Arial came from form controls and icon-glyph buttons, which do not
   inherit font-family from their ancestor by default.
   ═══════════════════════════════════════════════════════════════════════════ */

/* One mono stack. Three were in use (SF Mono, Roboto Mono, bare monospace). */
:root { --ff-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; }

/* 1 ─ Every element in the app shell resolves to the body stack unless it is
       deliberately monospace. `font: inherit` on form controls is the only way
       to stop the UA sheet substituting Arial/-apple-system inside button,
       input, select, option, textarea — they do NOT inherit by default. */
#pg, #pg *, .md, .md *, #sidebar, #sidebar *, .tb, .tb *, #td-footer, #td-footer * {
  font-family: var(--ff-body);
}
#pg button, #pg input, #pg select, #pg option, #pg optgroup, #pg textarea,
.md button, .md input, .md select, .md option, .md optgroup, .md textarea,
#sidebar button, #sidebar input, #sidebar select, .tb button, .tb input, .tb select {
  font-family: var(--ff-body) !important;
}
/* Deliberate monospace keeps its own stack — one stack, not three. */
#pg code, #pg pre, #pg kbd, #pg samp, #pg tt, .md code, .md pre, .md kbd, .md samp,
#pg [style*="monospace"], .md [style*="monospace"],
#pg [style*="SF Mono"], .md [style*="SF Mono"],
#pg [style*="Roboto Mono"], .md [style*="Roboto Mono"] {
  font-family: var(--ff-mono) !important;
}

/* 2 ─ Class-declared Montserrat. These are the hero/stat label classes the
       v121 attribute rule could not reach, listed explicitly so a module's own
       `font-family:'Montserrat'` in a <style> block loses on specificity. */
#pg .pg-hstat-l, #pg .pg-hstat-n, #pg .ntc-hk-l, #pg .ntc-hk-n,
#pg .pcl-hk-l, #pg .pcl-hk-n, #pg .bk-hk-l, #pg .bk-hk-n,
#pg .mt-hk-l, #pg .mt-hk-n, #pg .fin-hero-h, #pg .fin-hero-sub,
#pg .fin-tab-l, #pg .an-hero-h, #pg .an-hero-sub, #pg .an-tab,
#pg .dash-display, #pg [class*="-hk-l"], #pg [class*="-hk-n"],
#pg [class*="-hstat-"], .md [class*="-hstat-"] {
  font-family: var(--ff-body) !important;
}

/* 3 ─ Type scale. The audit found 27 sizes including UA leftovers (13.3333px
       from unstyled buttons, 14.85px from a rem-relative rule). Snap the
       long-tail sizes onto the documented 9/10/11/12/13/15/18/22/28 scale;
       sizes already on the scale are untouched, so nothing visibly resizes
       except the strays. */
#pg [style*="font-size:13.3333px"], #pg button:not([style*="font-size"]):not([class*="btn"]),
#pg select:not([style*="font-size"]), #pg option, #pg input:not([style*="font-size"]) {
  font-size: 13px;
}
#pg [style*="font-size:9.5px"], .md [style*="font-size:9.5px"] { font-size: 10px !important; }
#pg [style*="font-size:14.5px"], .md [style*="font-size:14.5px"] { font-size: 15px !important; }
#pg [style*="font-size:17px"],   .md [style*="font-size:17px"]   { font-size: 18px !important; }
#pg [style*="font-size:20px"],   .md [style*="font-size:20px"]   { font-size: 22px !important; }
#pg [style*="font-size:24px"],   .md [style*="font-size:24px"]   { font-size: 22px !important; }
#pg [style*="font-size:26px"],   .md [style*="font-size:26px"]   { font-size: 28px !important; }
#pg [style*="font-size:30px"],   .md [style*="font-size:30px"]   { font-size: 28px !important; }
#pg [style*="font-size:32px"],   .md [style*="font-size:32px"]   { font-size: 28px !important; }
/* Figures inside a tagged stat strip share ONE size on every page, so the
   Tickets hero and the Parcels hero no longer disagree by 4px. */
:is(#pg, .md) [data-td-stats] [data-td-stat-n] { font-size: 22px !important; line-height: 1.05 !important; }
:is(#pg, .md) [data-td-stats] [data-td-stat-l] { font-size: 10px !important; letter-spacing: .7px !important; }

/* 4 ─ Tabular figures for every number that sits in a column or a stat tile,
       so digits stop jittering as values change. */
:is(#pg, .md) [data-td-stat-n], :is(#pg, .md) table td, :is(#pg, .md) table th,
:is(#pg, .md) [class*="-hk-n"], :is(#pg, .md) [class*="-hstat-n"] {
  font-variant-numeric: tabular-nums;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────
   BUG: #td-footer is position:fixed; left:0; bottom:0; z-index:90 with no
   compensating padding anywhere, so its 32px band sat ON TOP of the last 32px
   of every page AND across the sidebar. On Settings (a 4,200px page) it cut
   through the middle of a card in every screenshot. Start it after the
   sidebar and reserve its height at the end of the scroll container. */
#td-footer { left: var(--sb-w, 250px) !important; width: auto !important; right: 0 !important; }
body.sb-collapsed #td-footer, body[data-sb="mini"] #td-footer { left: var(--sb-w-mini, 68px) !important; }
@media (max-width: 900px) { #td-footer { left: 0 !important; } }
#pg { padding-bottom: 44px; }

/* ── SETTINGS (v126) ──────────────────────────────────────────────────────
   The page was nine panels of wildly uneven weight behind a three-row wrap of
   pill tabs: Email 7,504px / Building 3,780px / Features 3,688px against
   Comms 404px. The -ux module adds a rail, per-tab section nav and search;
   these rules give all of it one surface treatment matching the rest of the
   workspace (white card, hairline, brand used only as an accent). */
#pg .stg-tabwrap {
  display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
  overflow-x: auto !important; scrollbar-width: thin;
  background: var(--ws-surface); border: 1px solid var(--ws-line);
  border-radius: 12px; padding: 6px !important; margin-bottom: 14px;
  box-shadow: var(--ws-shadow);
}
#pg .stg-tabwrap::-webkit-scrollbar { height: 6px; }
#pg .stg-tabwrap::-webkit-scrollbar-thumb { background: var(--ws-line-strong); border-radius: 3px; }
#pg .stg-tab {
  flex: 0 0 auto !important; display: flex !important; flex-direction: column;
  align-items: flex-start; gap: 1px; text-align: left;
  background: transparent !important; border: 1px solid transparent !important;
  border-radius: 9px !important; padding: 8px 13px !important;
  color: var(--ws-ink-2) !important; cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
#pg .stg-tab:hover { background: var(--ws-hover) !important; }
#pg .stg-tab.act, #pg .stg-tab.is-active, #pg .stg-tab[aria-selected="true"] {
  background: var(--ws-selected) !important;
  border-color: color-mix(in srgb, var(--c500) 32%, transparent) !important;
  color: var(--c700) !important;
}
/* The tab label and its description ran together as one string
   ("BuildingProfile, image, levels, structure"). */
#pg .stg-tab > :first-child { font-size: 13px; font-weight: 650; line-height: 1.2; }
#pg .stg-tab > :nth-child(2), #pg .stg-tab small, #pg .stg-tab .stg-tab-sub {
  font-size: 10.5px !important; font-weight: 500 !important;
  color: var(--ws-faint) !important; letter-spacing: 0 !important;
  text-transform: none !important; line-height: 1.3;
}
#pg .stg-tab.act > :nth-child(2), #pg .stg-tab.act .stg-tab-sub {
  color: color-mix(in srgb, var(--c700) 62%, var(--ws-muted)) !important;
}
/* Section cards: one neutral surface. They had been tinted and outlined in the
   building's brand colour, which on this install is a saturated amber — nine
   screens of it, and nothing else in the workspace looks like that. */
#pg .stg-section > .stg-card, #pg .stg-section > .card, #pg .stg-card {
  background: var(--ws-surface) !important;
  border: 1px solid var(--ws-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--ws-shadow) !important;
  margin-bottom: 14px;
}
#pg .stg-section h3 { font-size: 14px !important; font-weight: 650 !important; color: var(--ws-ink) !important; }
#pg .stg-section h4 { font-size: 12.5px !important; font-weight: 650 !important; color: var(--ws-ink-2) !important; }

/* 5 ─ Off-scale sizes declared in module <style> blocks (not inline, so the
       attribute rules above could not reach them). Identified by a computed
       audit across 20 pages; each is snapped to the nearest scale step, which
       is at most 2px of movement. --stgx-rail-h is ours and already on scale.
       24px→22, 17px→18, 14.5/14.85px→15, 9.5px→10. */
#pg .dv3-kpi-v, #pg .dv3-clock-t, #pg .rd-hero-stat-v { font-size: 22px !important; }
#pg .rd-insight-val, #pg .fin-hero-h                  { font-size: 18px !important; }
#pg .rd-card-name, #pg .tk-hero-cta-icon              { font-size: 15px !important; }
#pg .rd-hero-stat-l, #pg .fin-tab-group-hd,
#pg .cp-bay-tag, #pg .rd-recent-chip-age              { font-size: 10px !important; }

/* ── STAFF ACCOUNTS (v126) ────────────────────────────────────────────────
   The page itself is sound; what was inconsistent was colour. The org chart
   painted each department in a saturated hue of its own (green / orange /
   purple) while the SAME departments render as neutral chips in the table
   directly above it, so one screen showed a department in two unrelated
   colours. Department identity is kept — as a 3px colour rail and a dot, the
   same device the rest of the workspace uses — but the card surface returns
   to white so the page matches every other page. */
#pg .oc-dept, #pg .oc-dept-card, #pg [class*="oc-dept"] > [class*="-hdr"],
#pg .org-dept, #pg .org-dept-hdr {
  background: var(--ws-surface) !important;
  color: var(--ws-ink) !important;
  border: 1px solid var(--ws-line) !important;
  border-top: 3px solid var(--dept-c, var(--c500)) !important;
  border-radius: 11px !important;
  box-shadow: var(--ws-shadow) !important;
}
#pg [class*="oc-dept"] [class*="-hdr"] *, #pg .org-dept-hdr * { color: var(--ws-ink) !important; }
#pg .oc-card, #pg .org-card, #pg [class*="oc-staff"] {
  background: var(--ws-surface) !important;
  border: 1px solid var(--ws-line) !important;
  border-left: 3px solid var(--dept-c, var(--c500)) !important;
  color: var(--ws-ink) !important;
  border-radius: 9px !important;
}
#pg .oc-card *, #pg .org-card * { color: inherit !important; }
#pg .oc-card [class*="-role"], #pg .org-card [class*="-role"],
#pg .oc-card [class*="-sub"],  #pg .org-card [class*="-sub"] { color: var(--ws-muted) !important; }
/* Department count bubbles sat on the saturated fill; give them the neutral
   chip treatment used by the table above. */
#pg [class*="oc-dept"] [class*="-count"], #pg .org-dept-hdr [class*="-count"] {
  background: var(--ws-hover) !important; color: var(--ws-muted) !important;
  border: 1px solid var(--ws-line) !important;
}
