/* ============================================================================
   ISABI Systems — Manufacturing Operations Command Center (css/app.css v3.0)
   Official Rev 10 "Ledger" Design System (Exact Parity with ISABI Website)
   Palette: Ink #0F1E38 · Plate #0B1730 · Warm Paper #EEEDE9 / #F4F2EE · Brass #C0892F / #D9A54A
   Typography: Archivo (wdth 112/125, wght 600/700/800) + Instrument Sans (tabular-nums)
   ============================================================================ */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EEEDE9;
  --bg-alt: #E5E3DC;
  --surface: #FFFFFF;
  --surface-2: #F8F7F4;
  --surface-elev: #FFFFFF;
  --ink: #0F1E38;
  --muted: #5C6B80;
  --muted-2: #6E7E94;
  --line: #E1E4E9;
  --line-strong: #C6CDD8;
  --plate: #FFFFFF;
  --rail: #F4F2EE;
  --brass: #B88228;
  --brass-on-ink: #D9A54A;
  --brass-strong: #9A691B;
  --brass-tint: rgba(184, 130, 40, 0.11);
  --brass-border: rgba(184, 130, 40, 0.38);
  --badge-bg-1: #FCF9F2;
  --badge-bg-2: #EFE7D6;
  --badge-stroke: #C4913A;
  --badge-inner-stroke: rgba(184, 130, 40, 0.18);
  --badge-ii: #281D15;
  --badge-rule: #B88228;
  --wm-ink: #281D15;
  --wm-sys: #4A3628;
  --wm-rule: #B88228;
  --steel: #2A6DB5;
  --steel-tint: rgba(42, 109, 181, 0.10);
  --teal: #1E9E8A;
  --teal-tint: rgba(30, 158, 138, 0.10);
  --good: #1C8C46;
  --good-bg: #E4F3E9;
  --warn: #E07A1F;
  --warn-bg: #FCEBDD;
  --crit: #C8333B;
  --crit-bg: #F9E1E2;
  --s1: #2356A8;
  --s2: #7A889B;
  --s3: #C0892F;
  --chart-navy: #2356A8;
  --chart-steel: #4A90D9;
  --chart-brass: #C0892F;
  --chart-slate: #7A889B;
  --chart-amber: #C96A22;
  --chart-plum: #6B5B95;
  --chart-good: #1F7A4C;
  --chart-good-soft: #6BA888;
  --chart-crit: #C8333B;
  --chart-crit-soft: #DF8A71;
  --m-chip: #EEF0F4;
  --m-grid: #E6E8EC;
  --shadow-sm: 0 2px 8px rgba(15, 30, 56, 0.05);
  --shadow-md: 0 10px 28px rgba(15, 30, 56, 0.08);
  --shadow-lg: 0 20px 52px rgba(15, 30, 56, 0.14);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1A2E;
  --bg-alt: #0B1526;
  --surface: #152238;
  --surface-2: #1A2B46;
  --surface-elev: #1E3150;
  --ink: #E9ECF2;
  --muted: #9AA7BA;
  --muted-2: #768AA6;
  --line: #24344F;
  --line-strong: #32486B;
  --plate: #081223;
  --rail: #081223;
  --brass: #D9A54A;
  --brass-on-ink: #D9A54A;
  --brass-strong: #E5B764;
  --brass-tint: rgba(217, 165, 74, 0.13);
  --brass-border: rgba(217, 165, 74, 0.38);
  --badge-bg-1: #281F18;
  --badge-bg-2: #1B140F;
  --badge-stroke: rgba(217, 165, 74, 0.55);
  --badge-inner-stroke: rgba(217, 165, 74, 0.12);
  --badge-ii: #FAF6EE;
  --badge-rule: #D9A54A;
  --wm-ink: #FAF6EE;
  --wm-sys: #E6DEC8;
  --wm-rule: #D9A54A;
  --steel: #4F8FD6;
  --steel-tint: rgba(79, 143, 214, 0.15);
  --teal: #25A38D;
  --teal-tint: rgba(37, 163, 141, 0.15);
  --good: #3DB36A;
  --good-bg: rgba(61, 179, 106, 0.16);
  --warn: #F09045;
  --warn-bg: rgba(240, 144, 69, 0.16);
  --crit: #E25A61;
  --crit-bg: rgba(226, 90, 97, 0.18);
  --s1: #5B9CF0;
  --s2: #788CA6;
  --s3: #DFAA4E;
  --chart-navy: #5B9CF0;
  --chart-steel: #88C4FA;
  --chart-brass: #DFAA4E;
  --chart-slate: #788CA6;
  --chart-amber: #ED8936;
  --chart-plum: #A794F7;
  --chart-good: #3DB36A;
  --chart-good-soft: #68C78E;
  --chart-crit: #E25A61;
  --chart-crit-soft: #EB937E;
  --m-chip: #1E2E48;
  --m-grid: #22324D;
  --shadow-sm: 0 4px 14px rgba(4, 10, 22, 0.30);
  --shadow-md: 0 14px 36px rgba(4, 10, 22, 0.44);
  --shadow-lg: 0 24px 64px rgba(3, 8, 18, 0.62);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, h4, .font-display {
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-stretch: 112%;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.num, table, .kpi .v, .kpi .d, .ops-cell b {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.brass-text {
  color: var(--brass-on-ink);
}

/* ==================== CUSTOM REV 10 "LEDGER" SCROLLBARS ==================== */
/* Sleek pill scrollbars without Windows arrow buttons or bright white gutters */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

:root[data-theme="light"] ::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: #E5E2D9;
  border-radius: 999px;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background-color: rgba(15, 30, 56, 0.24);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(15, 30, 56, 0.36);
  border: 2px solid transparent;
  background-clip: padding-box;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:active {
  background-color: rgba(15, 30, 56, 0.44);
  border: 2px solid transparent;
  background-clip: padding-box;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0B1526;
  border-radius: 999px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: rgba(217, 165, 74, 0.34);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #D9A54A;
  border: 1.5px solid transparent;
  background-clip: padding-box;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
  background-color: #E5B764;
}

/* Compact scrollbars for Ask ISABI Drawer & Auth Gate (Left Sidebar Rail hides scrollbar chrome) */
.rail-nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ai-thread::-webkit-scrollbar,
.quick-seat-list::-webkit-scrollbar,
.auth-right::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

:root[data-theme="dark"] .ai-thread::-webkit-scrollbar-track,
:root[data-theme="dark"] .quick-seat-list::-webkit-scrollbar-track,
:root[data-theme="dark"] .auth-right::-webkit-scrollbar-track {
  background: rgba(8, 17, 36, 0.55);
  border-radius: 999px;
}

:root[data-theme="dark"] .ai-thread::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .quick-seat-list::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .auth-right::-webkit-scrollbar-thumb {
  background-color: rgba(217, 165, 74, 0.32);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

:root[data-theme="dark"] .ai-thread::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] .quick-seat-list::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] .auth-right::-webkit-scrollbar-thumb:hover {
  background-color: #D9A54A;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 30, 56, 0.35) #E5E2D9;
  }
  :root[data-theme="dark"] * {
    scrollbar-color: rgba(217, 165, 74, 0.42) #0B1526;
  }
  .rail-nav,
  :root[data-theme="dark"] .rail-nav {
    scrollbar-width: none;
  }
  :root[data-theme="dark"] .ai-thread,
  :root[data-theme="dark"] .quick-seat-list {
    scrollbar-color: rgba(217, 165, 74, 0.42) #0B1730;
  }
}

/* ==================== APP SHELL & LEFT INK RAIL ==================== */
.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-w, 248px) minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  overflow: clip;
}

@media (min-width: 861px) {
  .app-shell.rail-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-shell.rail-collapsed .rail {
    display: none;
  }
}

body.is-resizing-rail,
body.is-resizing-rail * {
  cursor: col-resize !important;
  user-select: none !important;
}

.rail {
  position: relative;
  background: var(--rail);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-strong);
  z-index: 40;
  overflow: hidden;
  min-width: 0;
}

.rail .brand {
  position: relative;
  padding: 14px 12px 13px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.brand-lockup {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.rail-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}

.rail-size-btn {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 5px;
  width: 22px;
  height: 24px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.rail-size-btn:hover:not(:disabled) {
  background: var(--brass-tint);
  border-color: var(--brass);
  color: var(--ink);
}

.rail-size-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.rail-collapse-btn {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 5px;
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.rail-collapse-btn:hover {
  background: var(--brass-tint);
  border-color: var(--brass);
  color: var(--ink);
}

/* Interactive Drag-to-Resize Handle on Right Edge of Left Rail */
.rail-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 48;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  transition: background 0.15s;
}

.rail-resizer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.15s;
}

.rail-resizer-grip {
  display: none;
}

.rail-resizer:hover::before,
.rail-resizer:focus-visible::before,
body.is-resizing-rail .rail-resizer::before {
  background: #D9A54A;
}

.brand-badge {
  width: 36px;
  height: 36px;
  margin-top: 1px;
  flex-shrink: 0;
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.brand-badge-sm {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.brand-wordmark-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  overflow: visible;
}

.brand-wordmark {
  height: 28px;
  width: 62px;
  display: block;
}

.brand-badge .badge-outer,
.brand-badge-sm .badge-outer,
.auth-badge .badge-outer {
  stroke: var(--badge-stroke, #C4913A);
}

.brand-badge .badge-inner,
.brand-badge-sm .badge-inner,
.auth-badge .badge-inner {
  stroke: var(--badge-inner-stroke, rgba(184, 130, 40, 0.18));
}

.brand-badge .badge-ii,
.brand-badge-sm .badge-ii,
.auth-badge .badge-ii {
  fill: var(--badge-ii, #281D15);
}

.brand-badge .badge-rule,
.brand-badge-sm .badge-rule,
.auth-badge .badge-rule {
  fill: var(--badge-rule, #B88228);
}

.brand-wordmark .wm-word {
  fill: var(--wm-ink, #281D15);
}

.brand-wordmark .wm-word {
  fill: var(--wm-ink, #281D15);
}

.brand-wordmark .wm-rule {
  fill: var(--wm-rule, #B88228);
}

.brand-wordmark .wm-sys {
  fill: var(--wm-sys, #4A3628);
}

.brand-sub {
  font-size: 8.6px;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

/* Narrow rail adaptive tuning (< 215px) */
@media (min-width: 861px) {
  .app-shell.rail-narrow .rail .brand {
    padding: 11px 7px 10px 9px;
    gap: 4px;
  }
  .app-shell.rail-narrow .brand-badge {
    width: 30px;
    height: 30px;
  }
  .app-shell.rail-narrow .brand-wordmark {
    height: 24px;
    width: 53px;
  }
  .app-shell.rail-narrow .brand-sub {
    font-size: 7.5px;
    letter-spacing: 0.035em;
  }
  .app-shell.rail-narrow .rail-nav {
    padding: 4px 6px 6px;
  }
  .app-shell.rail-narrow .rail-nav button.nav-item,
  .app-shell.rail-narrow .rail-nav a.rail-showcase-link {
    padding: 5px 6px;
    font-size: 11.6px;
    gap: 4px;
  }
  .app-shell.rail-narrow .rail-system-bar {
    padding: 5px 6px;
    gap: 3px;
  }
  .app-shell.rail-narrow .rail-sys-btn {
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    font-size: 9.8px;
  }
  .app-shell.rail-narrow .rail-sys-btn .nav-ico {
    font-size: 13px;
  }
  .app-shell.rail-narrow .rail-footer {
    padding: 8px 9px 9px;
  }
}

.rail-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 5px;
  display: flex;
  flex-direction: column;
}

.rail-nav .grp {
  font-family: "Archivo", sans-serif;
  font-size: 9.4px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 8px 2px;
}

.rail-nav .grp:first-child {
  padding-top: 2px;
}

.rail-nav .grp.grp-univ {
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  color: var(--brass-strong, var(--brass));
}

:root[data-theme="dark"] .rail-nav .grp.grp-univ {
  color: var(--brass);
}

.rail-nav button.nav-item,
.rail-nav a.rail-showcase-link {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--muted);
  margin: 0.5px 0;
  font-size: 12.1px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.rail-nav button.nav-item > span,
.rail-nav a.rail-showcase-link > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-nav button.nav-item:hover,
.rail-nav a.rail-showcase-link:hover {
  background: var(--brass-tint);
  color: var(--ink);
}

.rail-nav button.nav-item.on {
  background: var(--surface);
  color: var(--ink);
  border-left-color: var(--brass);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.nav-pill {
  font-style: normal;
  font-size: 9.8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  padding: 1.5px 6.5px;
  border-radius: 999px;
  background: var(--m-chip);
  color: var(--muted);
  border: 1px solid transparent;
  flex-shrink: 0;
}

/* Instant Zero-Delay Hover Tooltip for Truncated (...) Left Sidebar Names */
.rail-hover-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background: var(--surface-elev, #FFFFFF);
  color: var(--ink, #0F1E38);
  border: 1px solid var(--line-strong, #C6CDD8);
  border-left: 3px solid var(--brass, #C0892F);
  border-radius: 7px;
  padding: 6px 12px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(15, 30, 56, 0.14), 0 2px 6px rgba(15, 30, 56, 0.08);
}

.rail-hover-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--brass, #C0892F);
}

:root[data-theme="dark"] .rail-hover-tooltip {
  background: #152238;
  color: #F4F2EE;
  border-color: rgba(217, 165, 74, 0.65);
  box-shadow: 0 12px 28px rgba(3, 8, 18, 0.52), 0 2px 6px rgba(3, 8, 18, 0.35);
}

/* Light Porcelain UI Tooltip Card (zero native black OS [title] tooltips) */
.mfg-ui-tooltip {
  position: fixed;
  z-index: 10005;
  pointer-events: none;
  max-width: min(340px, calc(100vw - 24px));
  background: var(--surface-elev, #FFFFFF);
  color: var(--ink, #0F1E38);
  border: 1px solid var(--line-strong, #C6CDD8);
  border-top: 2px solid var(--brass, #C0892F);
  border-radius: 7px;
  padding: 6px 10px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 11.8px;
  font-weight: 500;
  line-height: 1.38;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  box-shadow: 0 10px 24px rgba(15, 30, 56, 0.13), 0 2px 6px rgba(15, 30, 56, 0.07);
}
.mfg-ui-tooltip[hidden] {
  display: none !important;
}

:root[data-theme="dark"] .mfg-ui-tooltip {
  background: #152238;
  color: #F4F2EE;
  border-color: rgba(217, 165, 74, 0.55);
  border-top-color: var(--brass, #D9A54A);
  box-shadow: 0 12px 28px rgba(3, 8, 18, 0.52), 0 2px 6px rgba(3, 8, 18, 0.35);
}

.nav-pill.warn {
  background: #FEF3C7;
  color: #9A4A06;
  border-color: rgba(217, 119, 6, 0.26);
}

.nav-pill.crit {
  background: #FEE2E2;
  color: #B4232A;
  border-color: rgba(200, 51, 59, 0.28);
}

:root[data-theme="dark"] .nav-pill.warn {
  background: rgba(245, 158, 11, 0.18);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.36);
}

:root[data-theme="dark"] .nav-pill.crit {
  background: rgba(239, 68, 68, 0.20);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.40);
}

/* Compact Pinned System Utility Bar (Tables · Kiosks · Users) */
.rail-system-bar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 5px 8px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  flex-shrink: 0;
}

.rail-system-bar[hidden] {
  display: none !important;
}

.rail-sys-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s;
}

.rail-sys-btn[hidden] {
  display: none !important;
}

.rail-sys-btn .nav-ico {
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rail-sys-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-sys-btn:hover {
  background: var(--brass-tint);
  color: var(--ink);
}

.rail-sys-btn.on {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--brass);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* Rail User Profile & RLS Footer */
.rail-footer {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.system-showcase-card {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

:root[data-theme="dark"] .system-showcase-card {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(255, 255, 255, 0.025) 100%);
}

.system-showcase-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 15px 18px;
}

.system-showcase-lead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 340px;
  min-width: 0;
}

.system-showcase-crest {
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--badge-ii, #281D15);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:root[data-theme="dark"] .system-showcase-crest {
  background: transparent;
  border: none;
  color: #FAF6EE;
  box-shadow: none;
}

.system-showcase-copy {
  flex: 1 1 260px;
  min-width: 0;
}

.system-showcase-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.system-showcase-title {
  font-family: "Archivo", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wm-ink, #281D15);
  letter-spacing: 0.005em;
  margin: 0;
}

.system-showcase-tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.system-showcase-tags .badge {
  font-size: 10.2px;
  padding: 1.5px 7px;
}

.system-showcase-sub {
  font-size: 11.8px;
  color: var(--muted);
  line-height: 1.48;
  max-width: 780px;
}

.system-showcase-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.sys-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11.4px;
  color: var(--muted);
}

.sys-link-pill strong {
  color: var(--ink);
  font-weight: 600;
}

.sys-link-url {
  color: var(--brass-strong, #8B6018);
  font-weight: 600;
  text-decoration: none;
}

.sys-link-url:hover {
  text-decoration: underline;
}

:root[data-theme="dark"] .sys-link-url {
  color: #D9A54A;
}

.sys-link-copy-btn {
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}

.sys-link-copy-btn:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}

a.system-showcase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--brass-tint);
  color: var(--ink);
  border: 1px solid var(--brass-border);
  box-shadow: 0 1px 2px rgba(184, 136, 59, 0.12);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

a.system-showcase-btn:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}

:root[data-theme="dark"] a.system-showcase-btn {
  background: #1E3254;
  color: #F4F2EE;
  border-color: rgba(136, 196, 250, 0.32);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] a.system-showcase-btn:hover {
  background: #28426E;
  border-color: rgba(217, 165, 74, 0.55);
  color: #FFFFFF;
}

a.system-showcase-btn .nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .system-showcase-inner {
    padding: 13px 14px;
    gap: 12px;
  }
  .system-showcase-lead {
    align-items: flex-start;
    gap: 11px;
  }
  a.system-showcase-btn {
    width: 100%;
  }
}

.rail .me {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rail .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brass);
  color: #0B1730;
  display: grid;
  place-items: center;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  flex-shrink: 0;
}

.rail .me-info {
  flex: 1;
  min-width: 0;
}

.rail .me-info strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail .me-info small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-switch-btn {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.rail-switch-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
}

.rail-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  color: var(--muted);
}

.engine-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--good);
  font-weight: 600;
}

.engine-dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px var(--good);
}

.rls-tag {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== MAIN WORKSPACE & TOP HEADER ==================== */
.main-area {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  overflow: clip;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 11px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  z-index: 20;
}

.top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 5px;
  padding: 5.5px 9px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.mobile-menu-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}

.mobile-menu-btn.rail-is-hidden {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
}

.sidebar-toggle-lbl {
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.crumb span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.crumb b {
  display: block;
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.entity-bar {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.entity-btn {
  padding: 4.5px 7px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}

.entity-btn:hover {
  color: var(--ink);
}

.entity-btn.active {
  background: var(--brass);
  color: #0B1730;
  font-weight: 700;
}

.pill-select {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 5px;
  padding: 4.5px 6px;
  font-size: 11.5px;
  font-weight: 600;
  outline: none;
}

#periodSelect,
#pbiPeriodSelect,
.pbi-period-select {
  display: none !important;
}

.pill-select:focus {
  border-color: var(--brass);
}

.basis-switch {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.basis-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

.basis-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Official ISABI Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: var(--brass-tint);
  border-color: var(--brass);
  color: var(--ink);
}

.btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.btn-primary,
.btn-brass {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
  font-weight: 700;
}

.btn-primary:hover:not(:disabled),
.btn-brass:hover:not(:disabled) {
  background: var(--brass-strong);
  border-color: var(--brass-strong);
  color: #FFFFFF;
}

/* Header button contrast guard (theme-aware inside .pbi-studio-hdr, .cockpit-banner & .pa-subgrid-hdr) */
.pbi-studio-hdr .btn:not(.btn-brass):not(.btn-primary),
.cockpit-banner .btn:not(.btn-brass):not(.btn-primary),
.pa-subgrid-hdr .btn:not(.btn-brass):not(.btn-primary) {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

:root[data-theme="dark"] .pbi-studio-hdr .btn:not(.btn-brass):not(.btn-primary),
:root[data-theme="dark"] .cockpit-banner .btn:not(.btn-brass):not(.btn-primary),
:root[data-theme="dark"] .pa-subgrid-hdr .btn:not(.btn-brass):not(.btn-primary) {
  background: rgba(255, 255, 255, 0.10);
  color: #F4F2EE;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.pbi-studio-hdr .btn:not(.btn-brass):not(.btn-primary):hover:not(:disabled),
.cockpit-banner .btn:not(.btn-brass):not(.btn-primary):hover:not(:disabled),
.pa-subgrid-hdr .btn:not(.btn-brass):not(.btn-primary):hover:not(:disabled) {
  background: var(--brass-tint);
  border-color: var(--brass);
  color: var(--ink);
}

:root[data-theme="dark"] .pbi-studio-hdr .btn:not(.btn-brass):not(.btn-primary):hover:not(:disabled),
:root[data-theme="dark"] .cockpit-banner .btn:not(.btn-brass):not(.btn-primary):hover:not(:disabled),
:root[data-theme="dark"] .pa-subgrid-hdr .btn:not(.btn-brass):not(.btn-primary):hover:not(:disabled) {
  background: rgba(217, 165, 74, 0.22);
  border-color: #D9A54A;
  color: #FFFFFF;
}

.pbi-studio-hdr .btn:disabled,
.cockpit-banner .btn:disabled {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line);
  opacity: 0.65;
}

:root[data-theme="dark"] .pbi-studio-hdr .btn:disabled,
:root[data-theme="dark"] .cockpit-banner .btn:disabled {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(244, 242, 238, 0.42);
  border-color: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.btn-outline-bar {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--brass-border);
  padding: 6px 11px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.btn-outline-bar:hover {
  background: var(--brass-tint);
  border-color: var(--brass);
}

.btn-ghost-bar {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
}

.btn-ghost-bar:hover {
  border-color: var(--brass);
}

/* Official Ask ISABI Header Trigger (Theme-Aware Light Paper / Dark Ink) */
.ask-isabi-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 5px;
  background: var(--brass-tint);
  color: var(--ink);
  border: 1px solid var(--brass);
  font-family: "Archivo", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}

.ask-isabi-trigger svg .ask-ii {
  fill: var(--wm-ink, #281D15);
}

.ask-isabi-trigger svg .ask-rule {
  fill: var(--wm-rule, #B88228);
}

.ask-isabi-trigger:hover {
  background: var(--brass);
  color: #FAF6EE;
  border-color: var(--brass-strong);
}

.ask-isabi-trigger:hover svg .ask-ii {
  fill: #FAF6EE;
}

.ask-isabi-trigger:hover svg .ask-rule {
  fill: rgba(250, 246, 238, 0.88);
}

:root[data-theme="dark"] .ask-isabi-trigger {
  background: #221A14;
  color: #FAF6EE;
  border-color: rgba(217, 165, 74, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] .ask-isabi-trigger svg .ask-ii {
  fill: #FAF6EE;
}

:root[data-theme="dark"] .ask-isabi-trigger svg .ask-rule {
  fill: #D9A54A;
}

:root[data-theme="dark"] .ask-isabi-trigger:hover {
  background: #30241B;
  color: #FFFFFF;
  border-color: #D9A54A;
}

:root[data-theme="dark"] .ask-isabi-trigger:hover svg .ask-ii {
  fill: #FFFFFF;
}

:root[data-theme="dark"] .ask-isabi-trigger:hover svg .ask-rule {
  fill: #D9A54A;
}

.ask-isabi-trigger svg {
  height: 15px;
  width: auto;
  display: block;
}

/* ==================== WORKSPACE & REV 10 OVERVIEW LAYOUT ==================== */
.workspace {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: var(--bg);
  padding: 0 0 28px;
}

/* Unified 6-Column KPI Surface Band (Exact Match to ISABI Sandbox .kpis) */
.kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border-bottom: 3px double var(--brass);
  box-shadow: var(--shadow-sm);
}

.kpi {
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.kpi:last-child {
  border-right: 0;
}

.kpi .k {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi .v {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-weight: 700;
  font-size: 21.5px;
  line-height: 1.12;
  color: var(--ink);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.kpi .v small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}

.kpi .d {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi .d.good {
  color: var(--good);
  font-weight: 600;
}

.kpi .d.warn {
  color: var(--warn);
  font-weight: 600;
}

.kpi .d.crit {
  color: var(--crit);
  font-weight: 600;
}

.kpi.books {
  background: color-mix(in srgb, var(--brass) 9%, var(--surface));
}

/* Secondary Operational Proof Strip */
.ops-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.ops-cell {
  padding: 8px 15px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.ops-cell:last-child {
  border-right: 0;
}

.ops-cell span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ops-cell b {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-weight: 700;
  color: var(--ink);
  font-size: 13.5px;
  white-space: nowrap;
}

/* 2x2 Asymmetric Executive Panels Grid (.row2 & .row3 from ISABI Sandbox) */
.row2, .row3, .page-pad {
  padding: 16px 20px 0;
}

.row2 {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 16px;
}

.row3 {
  display: grid;
  grid-template-columns: 0.82fr 1.38fr;
  gap: 16px;
  padding-bottom: 16px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.panel.panel-brass {
  border-top: 3px solid var(--brass);
}

.ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 13px 16px 9px;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.ph h3 {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.ph-sub {
  font-size: 11.5px;
  color: var(--muted);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sw-box {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}

.s-1 { fill: var(--s1); background: var(--s1); }
.s-2 { fill: var(--s2); background: var(--s2); }
.s-3 { fill: var(--s3); background: var(--s3); }

/* Interactive SVG Chart (Exact Match to ISABI Sandbox Chart) */
.chartwrap {
  position: relative;
  padding: 10px 14px 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chart-ftr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.chart-ftr-cell {
  padding: 9px 12px;
  border-right: 1px solid var(--line);
}

.chart-ftr-cell:last-child {
  border-right: 0;
}

.chart-ftr-cell small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.chart-ftr-cell b {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart .grid { stroke: var(--m-grid); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .lbl { fill: var(--ink); font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; }
.chart .hit {
  fill: rgba(15, 30, 56, 0);
  fill-opacity: 1;
  transition: none;
}
.chart .col { cursor: pointer; }
.chart .col:hover .hit {
  fill: rgba(15, 30, 56, 0.045);
  fill-opacity: 1;
}
:root[data-theme="dark"] .chart .hit {
  fill: rgba(233, 236, 242, 0);
  fill-opacity: 1;
}
:root[data-theme="dark"] .chart .col:hover .hit {
  fill: rgba(233, 236, 242, 0.06);
  fill-opacity: 1;
}

.chart-tip,
.mfg-chart-popover {
  position: fixed;
  z-index: 9600;
  pointer-events: none;
  min-width: 224px;
  max-width: 332px;
  background: rgba(255, 255, 255, 0.985);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink, #0F1E38);
  border: 1px solid var(--line-strong, #C6CDD8);
  border-top: 2.5px solid var(--brass, #C0892F);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
  font-size: 11.6px;
  line-height: 1.38;
  white-space: normal;
  box-shadow: 0 14px 34px rgba(15, 30, 56, 0.14), 0 3px 8px rgba(15, 30, 56, 0.07);
}
#execChartTip.chart-tip {
  position: absolute;
  z-index: 25;
}
:root[data-theme="dark"] .chart-tip,
:root[data-theme="dark"] .mfg-chart-popover {
  background: rgba(21, 34, 56, 0.985);
  color: var(--ink, #E9ECF2);
  border-color: var(--line-strong, #32486B);
  border-top-color: var(--brass, #D9A54A);
  box-shadow: 0 16px 38px rgba(3, 8, 18, 0.55), 0 3px 10px rgba(3, 8, 18, 0.35);
}
.chart-pop-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 5.5px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line, #E1E4E9);
}
.chart-pop-title {
  font-family: "Archivo", sans-serif;
  font-stretch: 110%;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink, #0F1E38);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.chart-pop-badge {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--brass, #C0892F);
  background: var(--brass-tint, rgba(192, 137, 47, 0.10));
  border: 1px solid var(--brass-border, rgba(192, 137, 47, 0.32));
  padding: 1.5px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.chart-pop-badge.good {
  color: var(--good, #1C8C46);
  background: var(--good-bg, #E4F3E9);
  border-color: rgba(28, 140, 70, 0.28);
}
.chart-pop-badge.crit {
  color: var(--crit, #C8333B);
  background: var(--crit-bg, #F9E1E2);
  border-color: rgba(200, 51, 59, 0.28);
}
.chart-pop-rows {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
}
.chart-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 11.3px;
  line-height: 1.35;
}
.chart-pop-row.is-total {
  margin-top: 2.5px;
  padding-top: 4.5px;
  border-top: 1px dashed var(--line-strong, #C6CDD8);
  font-weight: 700;
}
.chart-pop-row.is-active {
  background: var(--brass-tint, rgba(192, 137, 47, 0.10));
  margin: 0 -5px;
  padding: 1.5px 5px;
  border-radius: 4px;
}
.chart-pop-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted, #5C6B80);
  font-weight: 500;
  min-width: 0;
}
.chart-pop-row.is-total .chart-pop-lbl,
.chart-pop-row.is-active .chart-pop-lbl {
  color: var(--ink, #0F1E38);
  font-weight: 700;
}
.chart-pop-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}
.chart-pop-swatch.is-line {
  width: 11px;
  height: 3px;
  border-radius: 99px;
}
.chart-pop-val {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 11.3px;
  font-weight: 700;
  color: var(--ink, #0F1E38);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.chart-pop-val.good { color: var(--good, #1C8C46); }
.chart-pop-val.crit { color: var(--crit, #C8333B); }
.chart-pop-val.brass { color: var(--brass, #C0892F); }
.chart-pop-ftr {
  margin-top: 5.5px;
  padding-top: 4.5px;
  border-top: 1px solid var(--line, #E1E4E9);
  font-size: 10px;
  font-weight: 600;
  color: var(--brass, #C0892F);
}
.pbi-chart-col,
.cf-chart-bar {
  cursor: pointer;
}
.pbi-chart-col .pbi-col-hit {
  fill: rgba(15, 30, 56, 0);
  fill-opacity: 1;
  transition: none;
}
.pbi-chart-col:hover .pbi-col-hit,
.pbi-chart-col.is-hovered .pbi-col-hit {
  fill: rgba(15, 30, 56, 0.045);
  fill-opacity: 1;
}
:root[data-theme="dark"] .pbi-chart-col .pbi-col-hit {
  fill: rgba(233, 236, 242, 0);
  fill-opacity: 1;
}
:root[data-theme="dark"] .pbi-chart-col:hover .pbi-col-hit,
:root[data-theme="dark"] .pbi-chart-col.is-hovered .pbi-col-hit {
  fill: rgba(233, 236, 242, 0.06);
  fill-opacity: 1;
}
.workspace.is-scrolling .pbi-chart-col:hover .pbi-col-hit,
.workspace.is-scrolling .chart .col:hover .hit {
  fill: rgba(15, 30, 56, 0);
}
:root[data-theme="dark"] .workspace.is-scrolling .pbi-chart-col:hover .pbi-col-hit,
:root[data-theme="dark"] .workspace.is-scrolling .chart .col:hover .hit {
  fill: rgba(233, 236, 242, 0);
}
.pbi-chart-col .pbi-col-guide {
  stroke: var(--brass, #C0892F);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: none;
  pointer-events: none;
}
.pbi-chart-col:hover .pbi-col-guide,
.pbi-chart-col.is-hovered .pbi-col-guide {
  opacity: 0.72;
}
.workspace.is-scrolling .pbi-chart-col:hover .pbi-col-guide {
  opacity: 0;
}
.pbi-bar-item[data-chart-pop],
.pbi-cbar-item[data-chart-pop] {
  border-radius: 5px;
  padding: 3px 5px;
  margin: -3px -5px;
  background: rgba(248, 247, 244, 0);
  transition: none;
}
.pbi-bar-item[data-chart-pop]:hover,
.pbi-cbar-item[data-chart-pop]:hover {
  background: var(--surface-2, #F8F7F4);
}
:root[data-theme="dark"] .pbi-bar-item[data-chart-pop],
:root[data-theme="dark"] .pbi-cbar-item[data-chart-pop] {
  background: rgba(26, 43, 70, 0);
}

/* Institutional Ledger Tables (table.m-grid) */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}

table.m-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

table.m-grid th {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  padding: 7px 9px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.m-grid td {
  padding: 7px 9px;
  font-size: 11.8px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.m-grid tbody tr:hover td {
  background: color-mix(in srgb, var(--brass) 5%, var(--surface));
}

table.m-grid tr.clickable-row {
  cursor: pointer;
}

table.m-grid .n {
  text-align: right;
}

table.m-grid .mu {
  color: var(--muted);
}

table.m-grid tr.total td,
table.m-grid tfoot tr td {
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-2);
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--brass);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Status Chips (.m-chip) */
.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2.5px 8px;
  border-radius: 999px;
  background: var(--m-chip);
  color: var(--muted);
  white-space: nowrap;
}

.m-chip.closed, .m-chip.good {
  background: var(--good-bg);
  color: var(--good);
}

.m-chip.warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.m-chip.crit {
  background: var(--crit-bg);
  color: var(--crit);
}

.m-chip.brass {
  background: var(--brass-tint);
  color: var(--brass);
  border: 1px solid var(--brass-border);
}

.m-chip.steel {
  background: var(--steel-tint);
  color: var(--steel);
}

/* Executive Exceptions & Sentinel Watchdogs List (ul.att from ISABI Sandbox) */
.att {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.att li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 9px 16px 9px 16px;
  border-left: 3px solid var(--line);
  margin: 0 0 4px;
  transition: background 0.14s;
}

.att li:hover {
  background: var(--surface-2);
}

.att li b {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.att li span {
  grid-column: 1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.att li button.att-act {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 10px;
  color: var(--steel);
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
}

.att li button.att-act:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.att li.crit { border-left-color: var(--crit); }
.att li.warn { border-left-color: var(--warn); }
.att li.good { border-left-color: var(--good); }

/* ==================== MODULE SUB-PAGES & TOOLBARS ==================== */
.module-banner {
  background: var(--plate);
  color: var(--ink);
  padding: 18px 22px;
  border-bottom: 3px double var(--brass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.module-banner-left small {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
}

.module-banner-left h2 {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 3px;
}

.module-banner-left p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.module-banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.m-stat-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  min-width: 120px;
}

.m-stat-box small {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.m-stat-box strong {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.m-stat-box strong.brass { color: var(--brass); }
.m-stat-box strong.good { color: var(--good); }

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.search-input {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 5px;
  padding: 6.5px 12px;
  font-size: 12.8px;
  min-width: 270px;
  outline: none;
}

.search-input:focus {
  border-color: var(--brass);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

.filter-chip.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
  font-weight: 700;
}

/* ==================== PRINTABLE A4 STATEMENT SHEET ==================== */
.statements-grid {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 18px;
  padding: 16px 20px;
  align-items: start;
}

.stmt-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: calc(100dvh - 200px);
  overflow-y: auto;
}

.stmt-btn {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  padding: 8px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.stmt-btn:hover {
  background: var(--surface-2);
}

.stmt-btn.active {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  border-left: 3px solid var(--brass);
  font-weight: 700;
}

.a4-sheet {
  background: #FFFFFF;
  color: #0F1E38;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 32px 36px;
  box-shadow: var(--shadow-md);
}

.a4-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 3px double #C0892F;
  margin-bottom: 20px;
}

/* ==================== ASK ISABI SLIDE-OVER DRAWER ==================== */
.ai-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(470px, 100vw);
  height: 100dvh;
  background: var(--surface);
  color: var(--ink);
  border-left: 1px solid var(--brass-border);
  box-shadow: var(--shadow-lg);
  z-index: 120;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] .ai-drawer {
  background: #081223;
  color: #F4F2EE;
  box-shadow: -16px 0 48px rgba(3, 8, 18, 0.55);
}

.ai-drawer.open {
  transform: translateX(0);
}

.ai-console-hdr {
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

:root[data-theme="dark"] .ai-console-hdr {
  background: #0B1730;
}

.ai-console-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.ai-console-title b {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  color: var(--ink);
}

.ai-console-title small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

.ai-close-btn {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 5px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.ai-scope-bar {
  padding: 8px 18px;
  background: var(--brass-tint);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
}

.ai-scope-bar b {
  color: var(--brass);
}

.ai-reset-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 2.5px 8px;
  font-size: 11px;
  font-weight: 600;
}

.ai-prompt-pills {
  padding: 11px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-pill-btn {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11.5px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ai-pill-btn:hover {
  background: var(--brass-tint);
  border-color: var(--brass);
  color: var(--ink);
}

.ai-thread {
  padding: 16px 18px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-msg-user {
  align-self: flex-end;
  background: var(--steel);
  color: #FFFFFF;
  padding: 9px 14px;
  border-radius: 10px 10px 2px 10px;
  font-size: 13px;
  max-width: 86%;
}

.ai-msg-bot {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 4px 10px 10px 10px;
  padding: 13px 15px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

.ai-console-ftr {
  padding: 12px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
}

:root[data-theme="dark"] .ai-console-ftr {
  background: #0B1730;
}

.ai-console-ftr input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--ink);
  font-size: 13.5px;
  outline: none;
}

.ai-console-ftr input:focus {
  border-color: var(--brass);
}

/* ==================== SMART ENTRY MODAL ==================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 17, 36, 0.72);
  backdrop-filter: blur(5px);
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--brass);
  border-radius: 10px;
  width: min(740px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.modal-header > div:first-child {
  min-width: 0;
  flex: 1;
}

.modal-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brass);
  margin-bottom: 3px;
}

.modal-close-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.modal-hdr-act-btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.2;
}

.modal-void-record-btn {
  border-color: rgba(196, 56, 56, 0.35);
  color: var(--crit);
  background: transparent;
  font-weight: 600;
  white-space: nowrap;
}

.modal-void-record-btn:hover,
.modal-void-record-btn.is-armed {
  border-color: var(--crit);
  background: var(--crit-bg);
  color: var(--crit);
}

.modal-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.modal-tab {
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.modal-tab.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
  font-weight: 700;
}

.modal-body {
  padding: 20px 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.form-field input, .form-field select {
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

/* ==================== MULTI-DEVICE TEAM SIGN-IN GATE ==================== */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 50% 24%, #FAF9F6 0%, #EFEDE8 62%, #E4E1D9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

:root[data-theme="dark"] .auth-gate {
  background: radial-gradient(circle at 50% 24%, #15294D 0%, #0B1730 58%, #060D1C 100%);
}

.auth-card {
  width: 100%;
  max-width: 500px;
  margin: auto;
  background: var(--surface);
  border: 1px solid var(--brass-border);
  border-top: 3px solid var(--brass);
  border-radius: 16px;
  box-shadow: 0 22px 54px rgba(15, 30, 56, 0.09);
  display: flex;
  flex-direction: column;
  padding: 20px 26px 16px;
  color: var(--ink);
}

:root[data-theme="dark"] .auth-card {
  background: #0E1D38;
  color: #F4F2EE;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);
}

.auth-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.auth-badge {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.auth-brand-title {
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.15;
  color: var(--wm-ink, #281D15);
}

.auth-brand-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 1px;
}

.auth-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-pin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.auth-input {
  width: 100%;
  min-width: 0;
  padding: 9px 14px;
  height: 42px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  font-size: 14.5px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.14s, box-shadow 0.14s;
}

:root[data-theme="dark"] .auth-input {
  background: rgba(8, 17, 36, 0.75);
  border-color: rgba(255, 255, 255, 0.18);
  color: #F4F2EE;
}

.auth-input:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-tint);
}

.pin-disc {
  letter-spacing: normal;
  font-weight: 500;
  -webkit-text-security: none;
}

.pin-disc:not(:placeholder-shown) {
  -webkit-text-security: disc;
  letter-spacing: 0.28em;
  font-weight: 700;
}

.auth-submit-btn {
  margin: 0;
  padding: 0 22px;
  height: 42px;
  min-width: 112px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 9px;
  white-space: nowrap;
}

.auth-error {
  padding: 8px 11px;
  background: var(--crit-bg);
  border: 1px solid var(--crit);
  border-radius: 7px;
  color: var(--crit);
  font-size: 12px;
  line-height: 1.35;
}

.auth-selected-group:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--brass-border);
  border-radius: 10px;
}

:root[data-theme="dark"] .auth-selected-group:not([hidden]) {
  background: rgba(8, 17, 36, 0.58);
  border-color: rgba(217, 165, 74, 0.34);
}

.auth-selected-seat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

:root[data-theme="dark"] .auth-selected-seat {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.auth-seat-av,
.quick-seat-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brass-tint);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--brass-border);
}

:root[data-theme="dark"] .auth-seat-av,
:root[data-theme="dark"] .quick-seat-av {
  background: #1A2C4A;
  color: #F4F2EE;
  border-color: rgba(217, 165, 74, 0.42);
}

.auth-seat-info {
  flex: 1;
  min-width: 0;
  line-height: 1.24;
}

.auth-seat-info b {
  display: block;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-seat-info small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-seat-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}

:root[data-theme="dark"] .auth-seat-clear {
  background: rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, 0.18);
}

.auth-seat-clear:hover {
  color: var(--ink);
  border-color: var(--brass);
  background: var(--brass-tint);
}

:root[data-theme="dark"] .auth-seat-clear:hover {
  color: #F4F2EE;
}

.auth-selected-group .auth-input {
  background: var(--surface);
}

:root[data-theme="dark"] .auth-selected-group .auth-input {
  background: rgba(8, 17, 36, 0.9);
}

.auth-seat-drawer:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.auth-seat-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-seat-search-ic {
  position: absolute;
  left: 11px;
  color: var(--muted);
  pointer-events: none;
}

.auth-seat-search {
  height: 36px;
  padding: 6px 11px 6px 32px;
  font-size: 12.5px;
  border-radius: 8px;
}

.quick-seat-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 142px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.quick-seat-list::-webkit-scrollbar {
  width: 5px;
}

.quick-seat-list::-webkit-scrollbar-track {
  background: transparent;
}

.quick-seat-list::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}

.quick-seat-empty {
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.quick-seat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
}

:root[data-theme="dark"] .quick-seat-item {
  background: rgba(8, 17, 36, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}

.quick-seat-item:hover,
.quick-seat-item.is-selected {
  background: var(--brass-tint);
  border-color: var(--brass-border);
}

.quick-seat-av {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.quick-seat-copy {
  flex: 1;
  min-width: 0;
  line-height: 1.24;
}

.quick-seat-item b {
  display: block;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-seat-item small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-seat-demo-tag,
.quick-seat-cue {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}

:root[data-theme="dark"] .quick-seat-cue {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #CBD5E1;
}

.quick-seat-demo-tag {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}

.quick-seat-item:hover .quick-seat-cue {
  color: var(--ink);
  border-color: var(--brass);
  background: var(--surface);
}

:root[data-theme="dark"] .quick-seat-item:hover .quick-seat-cue {
  color: #F4F2EE;
}

.auth-footer-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
}

.auth-footer-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.auth-link-btn,
.auth-showcase-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.14s;
}

.auth-link-btn:hover,
.auth-showcase-link:hover {
  color: var(--ink);
}

:root[data-theme="dark"] .auth-link-btn:hover,
:root[data-theme="dark"] .auth-showcase-link:hover {
  color: #F4F2EE;
}

.auth-cloud-ok {
  color: var(--good);
  font-weight: 600;
}

/* Toast & Welcome Pill */
@keyframes toastRise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastRiseMobile {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-left: 3.5px solid var(--brass);
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 12.8px;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(15, 30, 56, 0.12), 0 2px 6px rgba(15, 30, 56, 0.05);
  z-index: 2000;
  cursor: pointer;
  animation: toastRise 190ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 180ms ease, transform 180ms ease;
}

:root[data-theme="dark"] .toast {
  background: rgba(21, 34, 56, 0.95);
  box-shadow: 0 16px 40px rgba(3, 8, 18, 0.56);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
}

.toast.toast-welcome {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 17px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15, 30, 56, 0.10);
  border-left-width: 1px;
  max-width: min(380px, calc(100vw - 32px));
}

:root[data-theme="dark"] .toast.toast-welcome {
  background: rgba(18, 31, 54, 0.96);
  border-color: rgba(217, 165, 74, 0.26);
}

.toast-welcome .tw-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
}

.toast-welcome .tw-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brass-tint);
  color: var(--ink);
  border: 1.5px solid var(--brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

:root[data-theme="dark"] .toast-welcome .tw-avatar {
  background: #1A2C4A;
  color: #F4F2EE;
  border-color: rgba(217, 165, 74, 0.48);
}

.toast-welcome .tw-check {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--good);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:root[data-theme="dark"] .toast-welcome .tw-check {
  border-color: #121F36;
}

.toast-welcome .tw-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1.5px;
}

.toast-welcome .tw-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-welcome .tw-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}

.toast-welcome .tw-badge {
  color: var(--good);
  font-weight: 600;
}

.toast-welcome .tw-dot {
  opacity: 0.55;
}

.toast-welcome .tw-role {
  color: var(--muted);
}

/* ==================== RESPONSIVE & PRINT RULES ==================== */
@media (max-width: 1180px) {
  .kpis, .ops-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .kpi { border-bottom: 1px solid var(--line); }
  .row2, .row3, .statements-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
  }
  .rail.open {
    transform: translateX(0);
  }
  .rail-resizer,
  .rail-size-btn {
    display: none !important;
  }
  .mobile-menu-btn {
    display: inline-flex;
  }
  .auth-card {
    grid-template-columns: 1fr;
  }
}

@media print {
  .rail, .top, .ai-drawer, .stmt-list, .filter-bar, .no-print {
    display: none !important;
  }
  html, body, .app-shell, .main-area, .workspace, .statements-grid {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .a4-sheet {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* ============================================================================
   SUB-MODULE & LEDGER COMPONENT SYSTEM (REV 10 "LEDGER" PARITY)
   ============================================================================ */
.cockpit-banner {
  background: var(--surface);
  color: var(--ink);
  padding: 18px 22px;
  border-bottom: 3px double var(--brass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

:root[data-theme="dark"] .cockpit-banner {
  background: #0B1730;
  color: #F4F2EE;
}

.cockpit-title-block {
  min-width: 260px;
  flex: 1;
}

.cockpit-eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
}

.cockpit-title {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin-bottom: 4px;
}

.cockpit-sub {
  font-size: 12.8px;
  color: var(--muted);
}

.cockpit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cockpit-pill {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  min-width: 112px;
}

.cockpit-pill-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 2px;
}

.cockpit-pill-val {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cockpit-pill-val.brass { color: var(--brass); }
.cockpit-pill-val.emerald { color: var(--good); }
.cockpit-pill-val.amber { color: var(--warn); }

/* Sub-module Grids & Cards */
.kpi-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-bottom: 3px double var(--brass);
  box-shadow: var(--shadow-sm);
}

.kpi-card {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}

.kpi-card:last-child {
  border-right: 0;
}

.kpi-lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.kpi-val {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
}

.kpi-delta {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kpi-delta.up { color: var(--good); font-weight: 600; }
.kpi-delta.warn { color: var(--warn); font-weight: 600; }

.unit-strip-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.unit-card {
  padding: 10px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.unit-card:last-child {
  border-right: 0;
}

.unit-lbl {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.unit-val {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 1px;
}

.unit-sub {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.split-grid-2 {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 16px;
  padding: 16px 20px;
}

.panel-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 16px 20px;
}

.split-grid-2 .panel-card {
  margin: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.panel-title {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.panel-meta {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.chip-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

.btn-primary {
  background: var(--brass);
  color: #0B1730;
  border: 1px solid var(--brass);
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 12.5px;
}

.btn-primary:hover {
  background: var(--brass-strong);
  color: #FFFFFF;
}

.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-y: contain;
  background: var(--surface);
}
.a4-sheet .table-wrap {
  background: transparent;
}

table.ledger-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

table.ledger-table th {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  padding: 8px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.ledger-table td {
  padding: 7.5px 8px;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.ledger-table tbody tr:hover td {
  background: color-mix(in srgb, var(--brass) 5%, var(--surface));
}

table.ledger-table .r {
  text-align: right;
}

table.ledger-table tfoot tr td,
table.ledger-table tr.total td {
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-2);
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--brass);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7.5px;
  border-radius: 999px;
  background: var(--m-chip);
  color: var(--muted);
  white-space: nowrap;
}

.badge-ok { background: var(--good-bg); color: var(--good); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err { background: var(--crit-bg); color: var(--crit); }
.badge-info { background: var(--steel-tint); color: var(--steel); }
.badge-brass { background: var(--brass-tint); color: var(--brass); border: 1px solid var(--brass-border); }
.badge-cost-prod { background: rgba(166, 115, 32, 0.085); color: #7A5219; border: 1px solid rgba(166, 115, 32, 0.25); }
.badge-cost-opex { background: rgba(38, 86, 127, 0.085); color: #265985; border: 1px solid rgba(38, 86, 127, 0.25); }
.badge-cost-capex, .badge-capex { background: rgba(31, 97, 84, 0.085); color: #1F6356; border: 1px solid rgba(31, 97, 84, 0.25); }
:root[data-theme="dark"] .badge-cost-prod { background: rgba(217, 165, 74, 0.13); color: #DFB56C; border-color: rgba(217, 165, 74, 0.30); }
:root[data-theme="dark"] .badge-cost-opex { background: rgba(79, 143, 214, 0.13); color: #8EB8E5; border-color: rgba(79, 143, 214, 0.30); }
:root[data-theme="dark"] .badge-cost-capex, :root[data-theme="dark"] .badge-capex { background: rgba(37, 163, 141, 0.13); color: #7AD1C0; border-color: rgba(37, 163, 141, 0.30); }

/* Sentinel Watchdog Items */
.sentinel-list {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.sentinel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-left: 3px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sentinel-item:last-child {
  border-bottom: 0;
}

.sentinel-item.ok { border-left-color: var(--good); }
.sentinel-item.warn { border-left-color: var(--warn); }
.sentinel-item.crit { border-left-color: var(--crit); }
.sentinel-item.reviewed {
  border-left-color: #2E6F9E;
  background: rgba(46, 111, 158, 0.045);
}
:root[data-theme="dark"] .sentinel-item.reviewed {
  border-left-color: #67A8DB;
  background: rgba(103, 168, 219, 0.075);
}
.sentinel-item.is-interactive {
  cursor: pointer;
  transition: background 0.14s ease;
}
.sentinel-item.is-interactive:hover {
  background: var(--surface-2);
}
.sentinel-item.reviewed.is-interactive:hover {
  background: rgba(46, 111, 158, 0.085);
}
:root[data-theme="dark"] .sentinel-item.reviewed.is-interactive:hover {
  background: rgba(103, 168, 219, 0.12);
}

.sentinel-body {
  min-width: 0;
  flex: 1 1 auto;
}
.sentinel-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.sentinel-signed-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #235B84;
  background: rgba(46, 111, 158, 0.10);
  border: 1px solid rgba(46, 111, 158, 0.24);
  border-radius: 4px;
  padding: 1px 6px;
}
:root[data-theme="dark"] .sentinel-signed-note {
  color: #8FC4EE;
  background: rgba(103, 168, 219, 0.14);
  border-color: rgba(103, 168, 219, 0.30);
}
.sentinel-signed-note.is-drifted {
  color: var(--warn);
  background: rgba(196, 127, 23, 0.11);
  border-color: rgba(196, 127, 23, 0.30);
}
.sentinel-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.btn-sn-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}
.btn-sn-act:hover {
  background: var(--surface-2);
  border-color: var(--brass);
}
.btn-sn-act.is-check {
  border-color: rgba(31, 97, 84, 0.35);
  background: rgba(31, 97, 84, 0.08);
  color: #1B5E4F;
}
.btn-sn-act.is-check:hover {
  background: rgba(31, 97, 84, 0.15);
  border-color: rgba(31, 97, 84, 0.55);
}
:root[data-theme="dark"] .btn-sn-act.is-check {
  border-color: rgba(58, 184, 157, 0.38);
  background: rgba(58, 184, 157, 0.13);
  color: #7AD6C2;
}
.btn-sn-act.is-undo {
  color: var(--muted);
  font-weight: 500;
}
.badge-reviewed {
  background: rgba(46, 111, 158, 0.11);
  color: #21577E;
  border: 1px solid rgba(46, 111, 158, 0.28);
}
:root[data-theme="dark"] .badge-reviewed {
  background: rgba(103, 168, 219, 0.16);
  color: #93C7F0;
  border-color: rgba(103, 168, 219, 0.34);
}
@keyframes snPanelPulse {
  0% { box-shadow: 0 0 0 0 rgba(182, 138, 58, 0.50); border-color: var(--brass); }
  100% { box-shadow: 0 0 0 8px rgba(182, 138, 58, 0); }
}
.panel-card.sn-panel-flash {
  animation: snPanelPulse 1.15s ease-out 1;
}
@media (max-width: 760px) {
  .sentinel-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  .sentinel-right {
    width: 100%;
    justify-content: flex-start;
  }
}

.sentinel-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.sentinel-detail {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.42;
}

/* Statements Catalog Grid */
.stmt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

.stmt-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}

.stmt-card:hover {
  background: var(--surface);
  border-color: var(--brass-border);
}

.stmt-card.active {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  border-left: 3px solid var(--brass);
}

.stmt-num {
  font-family: "Archivo", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stmt-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin: 2px 0;
}

.stmt-desc {
  font-size: 11.5px;
  color: var(--muted);
}


/* ============================================================================
   v3.1 — ENTRY DESK, REGISTERS, STATEMENT CATALOG, MOBILE & PRINT FIXES
   ============================================================================ */
/* Grid tracks never blow out on long numbers (PWA.md §3.6); stack multi-table module registers full-width */
.kpis, .ops-strip, .unit-strip-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chart-ftr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row2 { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.row3 { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.38fr); }
.split-grid-2 { grid-template-columns: minmax(0, 1fr); }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Fit all table columns comfortably with clean breathing room and zero mid-word breaks */
table.m-grid th, table.m-grid td { padding: 7.5px 9px; font-size: 11.6px; }
table.m-grid th:first-child, table.m-grid td:first-child { padding-left: 14px; }
table.m-grid th:last-child, table.m-grid td:last-child { padding-right: 14px; }
table.m-grid th { white-space: normal; line-height: 1.25; vertical-align: middle; }
table.m-grid td:first-child { white-space: normal; line-height: 1.35; }
table.ledger-table th { padding: 8px 8.5px; font-size: 9.8px; letter-spacing: 0.035em; white-space: normal; line-height: 1.25; vertical-align: middle; position: sticky; top: 0; z-index: 2; }
table.ledger-table td { padding: 7px 8.5px; font-size: 11.5px; white-space: normal; line-height: 1.35; overflow-wrap: normal; word-break: normal; }
table.ledger-table th:first-child, table.ledger-table td:first-child { padding-left: 12px; }
table.ledger-table th:last-child, table.ledger-table td:last-child { padding-right: 12px; }
table.ledger-table td.r, table.ledger-table th.r { white-space: nowrap; }
table.ledger-table td.mono { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
table.ledger-table .badge { white-space: nowrap; text-align: center; padding: 2px 6.5px; font-size: 10px; line-height: 1.2; }
#pricingPanel table.ledger-table td:first-child { white-space: nowrap; }
#salesPanel table.ledger-table th, #salesPanel table.ledger-table td, .a4-sheet table.ledger-table th, .a4-sheet table.ledger-table td { padding: 6.5px 6.5px; font-size: 11px; }
#snDates, #snMalfunction { grid-column: 1 / -1; }

/* Entry desk */
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.form-field { min-width: 0; }
.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select { width: 100%; max-width: 100%; min-width: 0; }
.form-field input[type="checkbox"], .form-field input[type="radio"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--brass); }
.form-field input:disabled, .form-field input[readonly] { background: var(--surface-2); color: var(--muted); }
.form-field .hint { font-size: 10.5px; color: var(--muted); line-height: 1.3; min-height: 13px; }
.form-field .hint.ok { color: var(--good); }
.form-field .hint.warn { color: var(--warn); font-weight: 600; }
.form-field .hint.crit { color: var(--crit); font-weight: 600; }
.form-field.span-2 { grid-column: span 2; }
.form-grid-3 > #wrap_sal_usd { grid-column-start: 1; }
.form-grid-3:has(#wrap_sal_method[hidden]):has(#wrap_f_repdate[hidden]) > #wrap_sal_staff { grid-column: span 2; }
.form-grid-3:has(#wrap_f_repdate:not([hidden])):has(#wrap_sal_method:not([hidden])) > #wrap_sal_method { grid-column: 1 / -1; }
.form-field.span-3, .form-grid-3 > .span-3 { grid-column: 1 / -1; }
.form-field label .badge { margin-left: 6px; vertical-align: middle; }
.form-field.check-field { flex-direction: row; align-items: center; gap: 8px; padding-top: 20px; }
.form-field.check-field input { width: 16px; height: 16px; margin: 0; accent-color: var(--brass); }
.form-field.check-field label { cursor: pointer; }
.rule-banner { background: var(--brass-tint); border: 1px solid var(--brass-border); border-left: 3px solid var(--brass); border-radius: 6px; padding: 9px 12px; font-size: 12px; color: var(--ink); margin-bottom: 14px; line-height: 1.45; }
.live-calc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
.live-calc div small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.live-calc div b { font-family: "Archivo", sans-serif; font-stretch: 112%; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.form-errors { margin-top: 12px; padding: 9px 12px; border-radius: 6px; background: var(--crit-bg); border: 1px solid var(--crit); color: var(--crit); font-size: 12.5px; }
.form-errors ul { margin: 4px 0 0 16px; padding: 0; }
.form-note { font-size: 11.5px; color: var(--muted); }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.modal-foot > div { display: flex; gap: 8px; }
.btn:disabled, .btn-primary:disabled { opacity: .55; cursor: wait; }
body.modal-open { overflow: hidden; }

/* Registers */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable.on { color: var(--brass); }
th.sortable i { font-style: normal; font-size: 9px; margin-left: 3px; color: var(--brass); }
th.sortable i:empty { display: none; margin: 0; }
.badge-app { background: var(--teal-tint); color: var(--teal); border: 1px solid rgba(30, 158, 138, .4); margin-left: 5px; vertical-align: middle; }
.void-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 4px; font-size: 9.5px; font-weight: 700; padding: 0 4px; margin-left: 4px; line-height: 1; vertical-align: middle; cursor: pointer; }
.void-btn:hover, .void-btn.armed { border-color: var(--crit); color: var(--crit); background: var(--crit-bg); }
.ledger-table tbody td:first-child { position: relative; }
.void-btn.row-void-hover { display: none; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 3; margin-left: 0; background: var(--surface); box-shadow: 0 1px 4px rgba(11, 23, 48, 0.14); padding: 0 4.5px; }
td:has(> u.row-sel-dot) > .void-btn.row-void-hover { right: 22px; }
.ledger-table tbody tr:hover .void-btn.row-void-hover,
.void-btn.row-void-hover.armed,
.void-btn.row-void-hover:focus-visible { display: inline-flex; align-items: center; }
.pa-cmd-btn.pa-cmd-btn-danger,
.btn.btn-danger-outline { border-color: color-mix(in srgb, var(--crit) 42%, var(--line)); color: var(--crit); }
.pa-cmd-btn.pa-cmd-btn-danger:hover,
.pa-cmd-btn.pa-cmd-btn-danger.armed,
.btn.btn-danger-outline:hover,
.btn.btn-danger-outline.armed { border-color: var(--crit); background: var(--crit-bg); color: var(--crit); font-weight: 700; }
.show-more-row td { text-align: center; background: var(--surface-2); padding: 8px !important; }
.empty-row td { text-align: center; color: var(--muted); padding: 22px 14px !important; white-space: normal !important; font-size: 12.5px; line-height: 1.5; }
.app-strip { padding: 8px 20px; background: var(--warn-bg); border-bottom: 1px solid var(--warn); font-size: 12px; color: var(--ink); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.app-strip span { font-variant-numeric: tabular-nums; }
.app-pill { border-color: rgba(240, 144, 69, .55); }
.mini-table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 20px 16px; }
.mini-table-grid .panel-card { margin: 0; }
.panel-meta .btn { margin-left: 6px; padding: 2px 8px; font-size: 11px; }

/* Statement catalog (the markup used .stmt-catalog-grid / .stmt-code which had no rules) */
.stmt-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 14px 20px; }
.stmt-code { font-family: "Archivo", sans-serif; font-size: 10.5px; font-weight: 700; color: var(--brass); text-transform: uppercase; letter-spacing: .06em; }
.stmt-card { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stmt-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.a4-sheet { margin: 0 20px 24px; }
.a4-sheet h4 { margin: 16px 0 6px; font-family: "Archivo", sans-serif; font-size: 13px; }
.a4-sheet table.ledger-table th, .a4-sheet table.ledger-table td { white-space: normal; }
.a4-title { font-family: "Archivo", sans-serif; font-stretch: 112%; font-size: 20px; font-weight: 800; color: #0F1E38; margin-top: 2px; }
:root[data-theme="dark"] .a4-sheet { background: #FFFFFF; color: #0F1E38; }
:root[data-theme="dark"] .a4-sheet table.ledger-table td, :root[data-theme="dark"] .a4-sheet table.ledger-table th { color: #0F1E38; background: #FFFFFF; border-color: #E1E4E9; }
:root[data-theme="dark"] .a4-sheet table.ledger-table th { background: #F8F7F4; }
:root[data-theme="dark"] .a4-sheet .live-calc { background: #F8F7F4; border-color: #E1E4E9; }
:root[data-theme="dark"] .a4-sheet .live-calc b, :root[data-theme="dark"] .a4-sheet .form-note { color: #0F1E38; }

/* Shell & iOS Standalone Safe-Area Defaults (PWA.md §3.1) */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media not all and (display-mode: standalone) {
  html:not(.ios-standalone),
  html:not(.ios-standalone) body,
  html:not(.ios-standalone) .app-shell,
  html:not(.ios-standalone) .main-area {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }
}
html.ios-standalone,
html.ios-standalone body,
html.ios-standalone .app-shell,
html.ios-standalone .main-area,
html.ios-standalone .ai-drawer,
html.ios-standalone .rail,
html.ios-standalone .auth-gate {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}
html.ios-standalone .app-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.co-short { display: none; }
.top-mobile-actions, .mobile-subnav, .mobile-bottom-dock { display: none; }
.period-basis-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.tool-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .tool-actions { display: none !important; }
}
.stmt-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stmt-quick-select { background: var(--surface-2); color: var(--ink); border-color: var(--brass-border); }
.stmt-quick-select option { background: var(--surface); color: var(--ink); }

.rail-backdrop { position: fixed; inset: 0; background: rgba(8, 17, 36, .55); z-index: 35; }
body.locked .app-shell { pointer-events: none; user-select: none; visibility: hidden; }
html.sw-resuming #authGate { display: none !important; }
html.sw-resuming body.locked .app-shell { pointer-events: auto; user-select: auto; visibility: visible; }
.toast.toast-err { border-color: var(--crit); border-left-color: var(--crit); }
.toast.toast-warn { border-color: var(--warn); border-left-color: var(--warn); }
.toast.toast-ok { border-left-color: #3DB36A; }
.auth-cloud-warn { color: #F09045; font-weight: 600; }
.auth-card.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.nav-pill { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  .kpis, .ops-strip, .unit-strip-6, .kpi-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { border-bottom: 1px solid var(--line); }
  .row2, .row3, .statements-grid, .split-grid-2, .mini-table-grid { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid-3 > .form-field.span-2,
  .form-grid-3 > #wrap_sal_usd,
  .form-grid-3:has(#wrap_sal_method[hidden]):has(#wrap_f_repdate[hidden]) > #wrap_sal_staff,
  .form-grid-3:has(#wrap_f_repdate:not([hidden])):has(#wrap_sal_method:not([hidden])) > #wrap_sal_method { grid-column: auto; }
}

@media (max-width: 860px) {
  html.ios-standalone {
    --safe-top: max(env(safe-area-inset-top, 0px), 47px);
    --safe-bottom: 16px;
  }
  .rail {
    width: min(278px, 84vw);
  }
  .rail .brand {
    padding-top: calc(14px + var(--safe-top));
  }
  .rail-footer {
    padding-bottom: calc(12px + var(--safe-bottom));
  }
  .ai-console-hdr {
    padding-top: calc(12px + var(--safe-top));
  }
  .ai-console-ftr {
    padding-bottom: calc(12px + var(--safe-bottom));
  }
  .ai-prompt-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 9px 14px;
  }
  .ai-prompt-pills::-webkit-scrollbar { display: none; }
  .ai-pill-btn { white-space: nowrap; flex-shrink: 0; }

  .top {
    padding: calc(8px + var(--safe-top)) 12px 8px;
    gap: 6px;
  }
  .top-left {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .crumb {
    flex: 1;
    min-width: 0;
  }
  .crumb span {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .crumb b {
    font-size: 13.5px;
    line-height: 1.2;
  }
  .top-mobile-actions {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    flex-shrink: 0;
  }
  .mobile-new-entry-btn {
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }
  .ask-isabi-mobile {
    padding: 5px 8.5px;
    font-size: 11px;
    gap: 4.5px;
  }
  .ask-isabi-mobile svg {
    height: 12.5px;
  }
  .mobile-theme-btn {
    padding: 4px 7px;
    font-size: 13px;
    min-width: 28px;
  }
  .desktop-tool-btn {
    display: none !important;
  }
  .tools {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .co-full { display: none; }
  .co-short { display: inline; }
  .entity-bar {
    display: block;
    width: 100%;
    padding: 0;
  }
  .entity-btn {
    padding: 5px 4px;
    font-size: 11.5px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .period-basis-row {
    display: flex;
    width: 100%;
    gap: 6px;
    align-items: center;
  }
  #periodSelect {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    height: 32px;
  }
  .basis-switch {
    flex-shrink: 0;
  }

  /* Mobile Sub-Module Pill Strip */
  .mobile-subnav {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  .mobile-subnav::-webkit-scrollbar { display: none; }
  .m-subnav-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8.5px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .m-subnav-pill em {
    font-style: normal;
    font-size: 9.6px;
    font-weight: 700;
    padding: 1px 5.5px;
    border-radius: 999px;
    background: var(--m-chip);
    color: var(--muted);
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
  }
  .m-subnav-pill em.warn {
    background: #FEF3C7;
    color: #9A4A06;
    border-color: rgba(217, 119, 6, 0.26);
  }
  .m-subnav-pill em.crit {
    background: #FEE2E2;
    color: #B4232A;
    border-color: rgba(200, 51, 59, 0.28);
  }
  :root[data-theme="dark"] .m-subnav-pill em.warn {
    background: rgba(245, 158, 11, 0.20);
    color: #FCD34D;
    border-color: rgba(245, 158, 11, 0.36);
  }
  :root[data-theme="dark"] .m-subnav-pill em.crit {
    background: rgba(239, 68, 68, 0.22);
    color: #FCA5A5;
    border-color: rgba(239, 68, 68, 0.40);
  }
  .m-subnav-pill.on {
    background: var(--brass);
    color: #0B1730;
    border-color: var(--brass);
    font-weight: 700;
  }
  .m-subnav-pill.on em {
    background: rgba(11, 23, 48, 0.18);
    color: #0B1730;
  }
  .m-subnav-pill.on em.warn,
  :root[data-theme="dark"] .m-subnav-pill.on em.warn {
    background: #FFFBEB;
    color: #78350F;
    border-color: rgba(120, 53, 15, 0.24);
  }
  .m-subnav-pill.on em.crit,
  :root[data-theme="dark"] .m-subnav-pill.on em.crit {
    background: #FEE2E2;
    color: #991B1B;
    border-color: rgba(153, 27, 27, 0.28);
  }

  /* Mobile Bottom Navigation Dock */
  .mobile-bottom-dock {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    background: var(--surface);
    color: var(--muted);
    border-top: 1px solid var(--line-strong);
    padding: 5px max(4px, env(safe-area-inset-left, 4px)) max(6px, min(22px, env(safe-area-inset-bottom, 6px))) max(4px, env(safe-area-inset-right, 4px));
    flex-shrink: 0;
    z-index: 30;
    box-shadow: 0 -4px 18px rgba(8, 17, 36, 0.08);
  }
  html.ios-standalone .mobile-bottom-dock {
    padding: 6px max(6px, env(safe-area-inset-left, 6px)) 22px max(6px, env(safe-area-inset-right, 6px));
  }
  :root[data-theme="dark"] .mobile-bottom-dock {
    background: #081223;
    color: rgba(244, 242, 238, 0.68);
    border-top-color: rgba(217, 165, 74, 0.35);
    box-shadow: 0 -4px 18px rgba(8, 17, 36, 0.28);
  }
  .dock-btn {
    background: transparent;
    border: 0;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 6px;
    min-width: 0;
  }
  .dock-btn svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  .dock-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .dock-btn.on {
    color: var(--brass);
    font-weight: 700;
  }
  .dock-btn.dock-cta {
    color: var(--ink);
    font-weight: 700;
  }
  .dock-cta-ring {
    width: 34px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #D9A54A 0%, #C0892F 100%);
    color: #0B1730;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(217, 165, 74, 0.35);
  }
  .dock-cta-ring svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; } /* iOS auto-zoom trap — PWA.md §3.4 */
  .hide-xs { display: none !important; }
  .search-input { min-width: 0; width: 100%; }

  /* KPI & Operational Proof Strips — zero truncation, crisp 2-col ledger grid */
  .kpis, .ops-strip, .unit-strip-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 10px 12px; gap: 2px; border-bottom: 1px solid var(--line); }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi .k { font-size: 10.5px; }
  .kpi .v { font-size: 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
  .kpi .v small { margin-left: 0; font-size: 10.5px; }
  .kpi .d { font-size: 10.2px; white-space: normal; line-height: 1.28; overflow: visible; text-overflow: clip; }

  .ops-cell { padding: 7px 12px; border-bottom: 1px solid var(--line); }
  .ops-cell:nth-child(2n) { border-right: 0; }
  .ops-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .ops-cell span { font-size: 9.5px; }
  .ops-cell b { font-size: 12.5px; }

  /* Full-width stacked Overview & Module Panels */
  .row2, .row3, .page-pad, .split-grid-2, .mini-table-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .row2 { padding-top: 12px; }
  .row3 { padding-top: 12px; padding-bottom: 16px; }
  .ph { padding: 11px 12px 8px; }
  .ph h3 { font-size: 13.5px; }
  .ph-sub { font-size: 11px; }
  .chart-ftr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-ftr-cell { padding: 8px 10px; border-bottom: 1px solid var(--line); }
  .chart-ftr-cell:nth-child(2n) { border-right: 0; }
  .chart-ftr-cell:nth-last-child(-n+2) { border-bottom: 0; }
  table.m-grid th, table.m-grid td { padding: 6px 4.5px; font-size: 10.5px; }
  .m-chip { font-size: 9.8px; padding: 2px 5.5px; }
  .att li { padding: 9px 12px; }

  /* Sub-module Cockpit Banners & Toolbars */
  .cockpit-banner { padding: 12px 12px; gap: 10px; }
  .cockpit-title-block { min-width: 0; width: 100%; }
  .cockpit-eyebrow { font-size: 9.5px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cockpit-title { font-size: 17px; }
  .cockpit-sub { font-size: 11.5px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cockpit-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .cockpit-pill { min-width: 0; padding: 6px 10px; }
  .cockpit-pill-val { font-size: 15px; }
  .panel-card { margin: 10px 12px; }
  .split-grid-2 .panel-card, .mini-table-grid .panel-card { margin: 0; }
  .table-toolbar { padding: 10px 12px; gap: 8px; }
  .table-toolbar > div:first-child { width: 100%; }
  .table-toolbar > div:last-child { width: 100%; justify-content: flex-end; }
  .chip-bar {
    flex-wrap: wrap;
    overflow-x: visible;
    width: 100%;
    padding-bottom: 2px;
    gap: 4px;
  }
  .chip-bar::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; padding: 4.5px 10px; font-size: 11.5px; }

  /* Statements View on Mobile */
  .stmt-banner-actions { width: 100%; }
  .stmt-quick-select { width: 100%; }
  .stmt-catalog-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 10px 12px;
  }
  .stmt-catalog-grid::-webkit-scrollbar { display: none; }
  .stmt-card { min-width: 210px; flex-shrink: 0; padding: 8px 10px; }
  .a4-sheet { margin: 0 12px 16px; padding: 16px 12px; }
  .a4-header { flex-direction: column; gap: 8px; }
  .a4-header > div:last-child { text-align: left !important; }

  /* Smart Entry Modal Bottom-Sheet */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-card {
    width: 100%;
    max-height: calc(100dvh - var(--safe-top) - 6px);
    border-radius: 14px 14px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-header { padding: 11px 14px; flex-shrink: 0; }
  .modal-header h2 { font-size: 14.5px; line-height: 1.25; }
  .modal-eyebrow { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    overflow: visible;
    padding: 7px 12px;
    flex-shrink: 0;
  }
  .modal-tabs::-webkit-scrollbar { display: none; }
  .modal-tab { flex-shrink: 0; white-space: nowrap; padding: 5.5px 10px; font-size: 11.5px; }
  .modal-body { padding: 12px 14px 0; overflow-y: auto; flex: 1; min-height: 0; }
  .rule-banner { font-size: 11px; padding: 7px 10px; margin-bottom: 10px; }
  .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .form-field.span-3, .form-field.check-field { grid-column: 1 / -1; }
  .form-field.check-field { padding-top: 4px; }
  .live-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 10px; }
  .modal-foot {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    margin: 12px -14px 0;
    padding: 10px 14px calc(12px + var(--safe-bottom));
    border-top: 1px solid var(--line);
    z-index: 5;
  }
  .modal-foot .form-note { font-size: 10.5px; width: 100%; }
  .modal-foot > div { width: 100%; display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
  .modal-foot > div.has-void { grid-template-columns: auto auto 1fr; gap: 6px; }
  .modal-hdr-act-btn { font-size: 10.5px; padding: 4px 7px; }

  .app-strip { padding: 8px 12px; }
  .auth-gate { padding: calc(12px + var(--safe-top)) 12px calc(16px + var(--safe-bottom)); align-items: flex-start; }
  .quick-seat-list { max-height: 180px; }
  .toast { left: 12px; right: 12px; bottom: calc(64px + var(--safe-bottom)); padding: 9px 12px; font-size: 12px; }
  .toast.toast-welcome {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 7px 15px 7px 8px;
    animation: toastRiseMobile 190ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .toast.toast-welcome.is-leaving {
    transform: translate(-50%, 6px) scale(0.98);
  }
}

@media (max-width: 480px) {
  #f_customer, #f_product, #f_site, #f_siteowner, #f_truckowner, #f_supplier, #f_category {
    min-width: 0;
  }
}
@media print {
  .cockpit-banner, .stmt-catalog-grid, .table-toolbar, .show-more-row, .void-btn, u.row-sel-dot, .toast, .rail-backdrop, .auth-gate, .modal-backdrop, .app-strip, .mobile-subnav, .mobile-bottom-dock { display: none !important; }
  body { background: #fff !important; }
  .workspace { padding: 0 !important; }
  .a4-sheet { margin: 0 !important; }
  table.ledger-table th, table.ledger-table td { font-size: 10px; padding: 4px 5px; }
  @page { size: A4; margin: 12mm; }
}

/* ============================================================================
   v4.0 — 20-PAGE POWER BI STUDIO + 24-FORM POWER APPS AUTOMATION ENGINE
   ============================================================================ */
.modal-card { width: min(880px, 100%); }
@media (min-width: 981px) {
  #entryModal .modal-card:has(.exp-items-cockpit.is-multi-mode) { width: min(1056px, calc(100vw - 28px)); }
}
@media (min-width: 1025px) {
  #entryModal .modal-card { width: min(980px, calc(100vw - 32px)); }
  #entryModal .modal-card:has(.exp-items-cockpit.is-multi-mode) { width: min(1056px, calc(100vw - 32px)); }
}
.pa-modal-groups {
  display: flex;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.pa-group-btn {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pa-group-btn.is-universal-group {
  border-color: rgba(192, 137, 47, 0.42);
  background: var(--bg-alt);
  color: var(--ink);
}
:root[data-theme="dark"] .pa-group-btn.is-universal-group {
  border-color: rgba(217, 165, 74, 0.36);
  background: rgba(217, 165, 74, 0.07);
  color: #F4F2EE;
}
.pa-group-btn.active,
.pa-group-btn.is-universal-group.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
}
:root[data-theme="dark"] .pa-group-btn.active,
:root[data-theme="dark"] .pa-group-btn.is-universal-group.active {
  background: rgba(217, 165, 74, 0.22);
  color: #D9A54A;
  border-color: var(--brass);
}
.pa-modal-subtabs {
  display: flex;
  gap: 5px;
  width: 100%;
  flex-wrap: wrap;
  padding-top: 6px;
}
.pa-modal-subtabs .modal-tab {
  padding: 5px 9px;
  font-size: 11.5px;
  gap: 5px;
}
.pa-modal-subtabs .modal-tab small {
  font-size: 9px;
}
.modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.modal-tab small {
  font-size: 9.5px;
  opacity: 0.72;
}
.pa-locked-input {
  background: var(--brass-tint) !important;
  border-color: var(--brass-border) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Embedded 4-Card Power Apps Cockpit (bhf_mfgCockpit.htm m283) */
.pa-cockpit {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--brass-border);
  border-top: 3px solid var(--brass);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
:root[data-theme="dark"] .pa-cockpit {
  background: #0B1730;
  color: #F4F2EE;
}
.pa-cockpit-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 10.5px;
}
.pa-cockpit-badge {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brass);
}
.pa-cockpit-scope {
  color: var(--muted);
}
.pa-cockpit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pa-cockpit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 9px;
  min-width: 0;
}
.pa-cockpit-card.crit {
  border-color: var(--crit);
  background: var(--crit-bg);
}
.pa-cockpit-card small {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.pa-cockpit-card strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 1px 0;
}
.pa-cockpit-card span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Live Contextual Intelligence Banner (bhf_live_banner m281) */
.pa-live-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal, #1E9E8A);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--ink);
  margin-bottom: 12px;
}
.pa-banner-dot {
  color: #3DB36A;
  font-size: 10px;
}

/* Locked Truck Quick-View Strip (qv_truck m99) */
.pa-quickview {
  background: var(--surface-2);
  border: 1px solid var(--brass-border);
  border-left: 3px solid var(--brass);
  border-radius: 6px;
  padding: 8px 11px;
  margin-top: 2px;
}
.pa-quickview.empty {
  border-color: var(--line);
  border-left-color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.pa-qv-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.pa-qv-tag {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brass);
  background: var(--brass-tint);
  padding: 2px 6px;
  border-radius: 4px;
}
.pa-qv-cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.pa-qv-cells small {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.pa-qv-cells b {
  font-size: 12px;
  color: var(--ink);
}
.warn-text { color: var(--warn); }
.crit-text { color: var(--crit); }

/* Live Open-Ticket / 3-Leg AP FIFO Subgrids (step240 / step241) */
.pa-subgrid {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.pa-subgrid-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 11px;
  background: var(--surface-2);
  color: var(--brass);
  border-bottom: 1px solid var(--line);
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
:root[data-theme="dark"] .pa-subgrid-hdr {
  background: #0B1730;
  color: #D9A54A;
}
.pa-subgrid-empty {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--surface-2);
}

/* 12-Page Analytics & Insights Studio — Executive Command Deck */
.pbi-studio-hdr {
  background: #FFFFFF;
  color: var(--ink);
  margin: 10px 20px 0;
  padding: 11px 16px 12px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(11, 23, 48, 0.04);
  overflow: hidden;
}
:root[data-theme="dark"] .pbi-studio-hdr {
  background: #0B1730;
  color: #F4F2EE;
  border-color: #1E325C;
  border-top-color: var(--brass);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.pbi-studio-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: nowrap;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.pbi-studio-title {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.pbi-hero-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0%;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.pbi-stepper-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #FAF8F4;
  border: 1px solid #DFDAD0;
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}
:root[data-theme="dark"] .pbi-stepper-pill {
  background: #13223E;
  border-color: #263B63;
}
.pbi-step-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #6E675C;
  font-size: 10.5px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.pbi-step-btn:hover {
  background: var(--brass-tint);
  color: #1F1C18;
}
.pbi-step-pos,
.pbi-step-counter {
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1F1C18;
  padding: 0 5px;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .pbi-step-pos,
:root[data-theme="dark"] .pbi-step-counter {
  color: #F4F2EE;
}
.pbi-step-pos b,
.pbi-step-counter b {
  color: var(--brass);
}
.pbi-domain-badge {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(192, 137, 47, 0.12);
  color: #9A6B1F;
  border: 1px solid rgba(192, 137, 47, 0.35);
  flex-shrink: 0;
  white-space: nowrap;
}
:root[data-theme="dark"] .pbi-domain-badge {
  background: rgba(217, 165, 74, 0.14);
  color: #F3C36F;
  border-color: rgba(217, 165, 74, 0.35);
}
.pbi-active-heading {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1 1 0%;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.pbi-active-title {
  font-family: "Archivo", sans-serif;
  font-stretch: 108%;
  font-size: 14.5px;
  font-weight: 800;
  color: #1F1C18;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  white-space: nowrap;
}
:root[data-theme="dark"] .pbi-active-title {
  color: #F4F2EE;
}
.pbi-active-sep {
  color: var(--brass);
  font-weight: 700;
  flex-shrink: 0;
}
.pbi-active-sub {
  font-size: 11.5px;
  color: #6E675C;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme="dark"] .pbi-active-sub {
  color: #9AA7BA;
}
.pbi-hero-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.pbi-hero-actions > .btn,
.pbi-hero-actions > .pbi-drawer-toggle {
  flex-shrink: 0;
  white-space: nowrap;
  height: 27px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pbi-drawer-toggle {
  appearance: none;
  background: #FAF8F4;
  border: 1px solid #DFDAD0;
  color: #57524A;
  border-radius: 6px;
  padding: 0 9px;
  height: 27px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
}
:root[data-theme="dark"] .pbi-drawer-toggle {
  background: #13223E;
  border-color: #29406B;
  color: #CBD5E1;
}
.pbi-drawer-toggle:hover {
  border-color: var(--brass);
  color: #1F1C18;
  background: #FBF6EB;
}
:root[data-theme="dark"] .pbi-drawer-toggle:hover {
  color: #FFFFFF;
  background: #1D3259;
}
.pbi-drawer-toggle.active {
  background: #FAF3E3;
  border-color: rgba(192, 137, 47, 0.55);
  color: #6E4B12;
  font-weight: 700;
}
:root[data-theme="dark"] .pbi-drawer-toggle.active {
  background: rgba(217, 165, 74, 0.16);
  border-color: rgba(217, 165, 74, 0.55);
  color: #F3C36F;
}
.pbi-dt-caret {
  color: #9A6B1F;
  font-size: 11.5px;
  line-height: 1;
}
:root[data-theme="dark"] .pbi-dt-caret {
  color: #F3C36F;
}

/* 5-Domain Grouped Page Deck — 21-Column 2-Shelf Single-Row Layout */
.pbi-page-strip {
  display: grid;
  grid-template-columns: repeat(21, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 10px;
}
.pbi-page-strip.is-collapsed {
  display: none !important;
}
.pbi-page-strip.has-filtered-pod {
  display: flex;
  flex-wrap: wrap;
}
.pbi-page-strip:not(.has-filtered-pod) .pbi-domain-pod[data-pbi-domain="Executive"] {
  grid-column: span 7;
}
.pbi-page-strip:not(.has-filtered-pod) .pbi-domain-pod[data-pbi-domain="Commercial & AR"] {
  grid-column: span 14;
}
.pbi-page-strip:not(.has-filtered-pod) .pbi-domain-pod[data-pbi-domain="Procurement & Stock"] {
  grid-column: span 6;
}
.pbi-page-strip:not(.has-filtered-pod) .pbi-domain-pod[data-pbi-domain="Fleet & Workforce"] {
  grid-column: span 9;
}
.pbi-page-strip:not(.has-filtered-pod) .pbi-domain-pod[data-pbi-domain="Treasury & GL"] {
  grid-column: span 6;
}
.pbi-page-strip.has-filtered-pod .pbi-domain-pod {
  flex: 1 1 260px;
}
.pbi-domain-pod {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px 7px;
  border-radius: 8px;
  background: #FAF8F4;
  border: 1px solid #E6E1D6;
  min-width: 0;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
:root[data-theme="dark"] .pbi-domain-pod {
  background: #0F1D38;
  border-color: #1E325C;
}
.pbi-domain-pod.is-active-pod {
  background: #FDFBF5;
  border-color: rgba(192, 137, 47, 0.58);
  box-shadow: inset 0 2px 0 var(--brass);
}
:root[data-theme="dark"] .pbi-domain-pod.is-active-pod {
  background: #132546;
  border-color: rgba(217, 165, 74, 0.55);
  box-shadow: inset 0 2px 0 var(--brass);
}
.pbi-domain-pod-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
  cursor: pointer;
  user-select: none;
}
.pbi-domain-pod-title,
.pbi-domain-pod-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #787165;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme="dark"] .pbi-domain-pod-title,
:root[data-theme="dark"] .pbi-domain-pod-lbl {
  color: #94A3B8;
}
.pbi-domain-pod.is-active-pod .pbi-domain-pod-title,
.pbi-domain-pod.is-active-pod .pbi-domain-pod-lbl {
  color: #9A6B1F;
}
:root[data-theme="dark"] .pbi-domain-pod.is-active-pod .pbi-domain-pod-title,
:root[data-theme="dark"] .pbi-domain-pod.is-active-pod .pbi-domain-pod-lbl {
  color: #F3C36F;
}
.pbi-domain-pod-count,
.pbi-domain-pod-cnt {
  font-size: 9px;
  font-weight: 700;
  color: #787165;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .pbi-domain-pod-count,
:root[data-theme="dark"] .pbi-domain-pod-cnt {
  color: #94A3B8;
}
.pbi-domain-pod-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}
.pbi-page-tab {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 4px;
  padding: 5.5px 6px;
  border-radius: 6px;
  border: 1px solid #DFDAD0;
  background: #FFFFFF;
  color: #26231E;
  font-size: 10.4px;
  font-weight: 600;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
:root[data-theme="dark"] .pbi-page-tab {
  background: #13223E;
  border-color: #29406B;
  color: #E2E8F0;
}
.pbi-page-tab:hover {
  background: #FBF6EB;
  border-color: var(--brass);
  color: #1F1C18;
}
:root[data-theme="dark"] .pbi-page-tab:hover {
  background: #1D3259;
  border-color: var(--brass);
  color: #FFFFFF;
}
.pbi-page-tab.active {
  background: linear-gradient(180deg, #C69034 0%, #B37E24 100%);
  color: #FFFFFF;
  border-color: #A67320;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(184, 136, 59, 0.28);
}
:root[data-theme="dark"] .pbi-page-tab.active {
  background: linear-gradient(180deg, #D9A54A 0%, #C0892F 100%);
  color: #1A1408;
  border-color: #E5B764;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.pbi-page-num {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #9A6B1F;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .pbi-page-num {
  color: #D9A54A;
}
.pbi-page-tab.active .pbi-page-num {
  color: #FFF4DC;
}
:root[data-theme="dark"] .pbi-page-tab.active .pbi-page-num {
  color: #4A320A;
}
.pbi-page-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pbi-slicer-wrap {
  margin: 0 -16px -12px;
  padding: 9px 16px 11px;
  background: #FAF8F4;
  border-top: 1px solid #E6E1D6;
}
:root[data-theme="dark"] .pbi-slicer-wrap {
  background: #0D1A33;
  border-top-color: #1E325C;
}
.pbi-slicer-wrap.is-collapsed {
  display: none !important;
}
.pbi-slicer-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.pbi-slicer-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pbi-slicer-item label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #787165;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
:root[data-theme="dark"] .pbi-slicer-item label {
  color: #94A3B8;
}
.pbi-slicer-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  display: inline-block;
  flex-shrink: 0;
}
.pbi-slicer-item select,
.pbi-slicer-item input {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #DFDAD0;
  background: #FFFFFF;
  color: #1F1C18;
  font-size: 11.5px;
  font-weight: 500;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
:root[data-theme="dark"] .pbi-slicer-item select,
:root[data-theme="dark"] .pbi-slicer-item input {
  background: #13223E;
  border-color: #29406B;
  color: #F4F2EE;
}
.pbi-slicer-item select:focus,
.pbi-slicer-item input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(184, 136, 59, 0.18);
}
.pbi-slicer-item.is-filtered select,
.pbi-slicer-item.is-filtered input {
  border-color: var(--brass);
  background: #FFFDF8;
  font-weight: 700;
}
:root[data-theme="dark"] .pbi-slicer-item.is-filtered select,
:root[data-theme="dark"] .pbi-slicer-item.is-filtered input {
  border-color: var(--brass);
  background: #1A2D52;
}

/* Interactive Section Switcher Bar inside #pbiCanvasPanel */
.pbi-sec-switcher {
  margin: 10px 20px 0;
  padding: 6.5px 12px;
  background: #FFFFFF;
  border: 1px solid #E6E1D6;
  border-left: 3.5px solid var(--brass);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
:root[data-theme="dark"] .pbi-sec-switcher {
  background: #0F1D38;
  border-color: #1E325C;
  border-left-color: var(--brass);
}
.pbi-sec-switcher-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.pbi-sec-switcher-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9A6B1F;
  flex-shrink: 0;
}
:root[data-theme="dark"] .pbi-sec-switcher-lbl {
  color: #F3C36F;
}
.pbi-sec-switcher-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.pbi-sec-pill {
  appearance: none;
  border: 1px solid #DFDAD0;
  background: #FAF8F4;
  color: #57524A;
  font-size: 11px;
  font-weight: 600;
  padding: 3.5px 9px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s ease;
}
:root[data-theme="dark"] .pbi-sec-pill {
  background: #152647;
  border-color: #29406B;
  color: #CBD5E1;
}
.pbi-sec-pill:hover {
  border-color: var(--brass);
  color: #1F1C18;
  background: #FBF6EB;
}
:root[data-theme="dark"] .pbi-sec-pill:hover {
  border-color: var(--brass);
  color: #FFFFFF;
  background: #1D3259;
}
.pbi-sec-pill.active {
  background: linear-gradient(180deg, #C69034 0%, #B37E24 100%);
  border-color: #A67320;
  color: #FFFFFF;
  font-weight: 700;
}
:root[data-theme="dark"] .pbi-sec-pill.active {
  background: linear-gradient(180deg, #D9A54A 0%, #C0892F 100%);
  border-color: #E5B764;
  color: #1A1408;
}
.pbi-sec-pill-cnt {
  font-size: 9.5px;
  font-weight: 800;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(11, 23, 48, 0.12);
}
.pbi-sec-switcher-hint {
  font-size: 10.5px;
  color: var(--muted);
}
.pbi-sec-filtered-out,
.pbi-sec-collapsed-body {
  display: none !important;
}
.pbi-kpi-sec.is-sec-collapsed .pbi-kpi-sec-grid {
  display: none !important;
}
.pbi-sec-caret {
  font-size: 11px;
  color: var(--brass);
  margin-left: auto;
  padding-left: 8px;
  transition: transform 0.15s ease;
}
.is-sec-collapsed .pbi-sec-caret {
  transform: rotate(-90deg);
}

.pbi-overview-bands {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px 4px;
}
.pbi-kpi-sec {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin: 12px 20px 0;
}
.pbi-overview-bands .pbi-kpi-sec {
  margin: 0;
}
.pbi-kpi-sec-hdr {
  padding: 7px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brass);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pbi-kpi-sec.is-sec-collapsed .pbi-kpi-sec-hdr {
  border-bottom: 0;
}
.pbi-kpi-sec-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pbi-kpi-card {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pbi-kpi-card:last-child { border-right: 0; }
.pbi-kpi-card .k { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.pbi-kpi-card .v { font-family: "Archivo", sans-serif; font-stretch: 112%; font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pbi-kpi-card.brass .v { color: var(--brass); }
.pbi-kpi-card.good .v { color: var(--good); }
.pbi-kpi-card.warn .v { color: var(--warn); }
.pbi-kpi-card.crit .v { color: var(--crit); }
.pbi-kpi-card .d { font-size: 10.5px; color: var(--muted); }

.pbi-hbar-list { display: flex; flex-direction: column; gap: 8px; }
.pbi-hbar-row { display: flex; flex-direction: column; gap: 3px; }
.pbi-hbar-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.pbi-hbar-rank { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbi-hbar-rank small { color: var(--muted); font-weight: 400; }
.pbi-hbar-track { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.pbi-hbar-fill { height: 100%; background: var(--steel, #2D5A88); border-radius: 999px; }
.pbi-hbar-fill.brass { background: var(--brass); }
.pbi-hbar-fill.crit { background: var(--crit); }

@media (max-width: 1180px) {
  .pbi-page-strip:not(.has-filtered-pod) .pbi-domain-pod[data-pbi-domain] { grid-column: span 10; }
  .pbi-page-strip:not(.has-filtered-pod) .pbi-domain-pod[data-pbi-domain="Treasury & GL"] { grid-column: span 20; }
  .pbi-slicer-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pbi-kpi-sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pa-cockpit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-qv-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
  @media (max-width: 768px) {
  .pbi-studio-hdr { margin: 8px 10px 0; padding: 10px 12px; }
  .pbi-studio-top,
  .pbi-hero-identity,
  .pbi-active-heading,
  .pbi-hero-actions {
    flex-wrap: wrap;
  }
  .pbi-hero-identity,
  .pbi-active-heading {
    flex: 1 1 100%;
  }
  .pbi-active-sub {
    white-space: normal;
  }
  .pbi-page-strip,
  .pbi-page-strip:not(.has-filtered-pod) {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pbi-page-strip:not(.has-filtered-pod) .pbi-domain-pod[data-pbi-domain] {
    grid-column: span 1;
  }
  .pbi-domain-pod-tabs {
    display: flex;
    flex-wrap: wrap;
  }
  .pbi-page-tab { flex: 1 1 auto; white-space: nowrap; }
  .pbi-slicer-wrap { margin: 0 -12px -10px; padding: 8px 12px 10px; }
  .pbi-slicer-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbi-sec-switcher { margin: 8px 10px 0; padding: 6px 10px; }
  .pbi-sec-switcher-hint { display: none; }
  .pbi-kpi-sec { margin: 10px 12px 0; }
  .pbi-overview-bands { padding: 10px 12px 0; }
  .pbi-kpi-sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbi-kpi-card { border-bottom: 1px solid var(--line); }
  .pa-modal-groups, .pa-modal-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pa-modal-groups::-webkit-scrollbar, .pa-modal-subtabs::-webkit-scrollbar { display: none; }
  .pa-group-btn { flex-shrink: 0; white-space: nowrap; }
  .pa-qv-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v4.1 — clickable KPI cards, record inspector, tier hints */
.kpi-link { cursor: pointer; transition: background .12s ease, box-shadow .12s ease; }
.kpi-link:hover, .kpi-link:focus-visible { background: var(--surface-2); outline: none; box-shadow: inset 0 -2px 0 var(--brass); }
.kpi-link:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.inspector-card { width: min(820px, 100%); }
.inspector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; padding: 4px 0 2px; }
.inspector-cell { min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.inspector-cell small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
.inspector-cell b { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
tr.rrow { cursor: pointer; }
tr.rrow:focus-visible td { outline: 2px solid var(--brass); outline-offset: -2px; }
.btn.armed { border-color: var(--crit); color: var(--crit); background: var(--crit-bg); }
.pbi-page-tab:focus-visible, .filter-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
@media (max-width: 860px) {
  .inspector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   v4.3 — Power BI Studio Parity+ Upgrade (Section Headings, Data Bars,
          Conditional Formatting, Multi-Series Charts & Dynamic Page Slicers)
   ========================================================================== */
.pbi-slicer-wrap {
  margin-top: 10px;
  padding: 9px 11px;
  background: #F4F6FA;
  border: 1px solid var(--line);
  border-radius: 8px;
}
:root[data-theme="dark"] .pbi-slicer-wrap {
  background: #0E1C36;
  border-color: #1E325C;
}
.pbi-slicer-bar.dynamic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}
.pbi-sec-heading {
  margin: 14px 20px 4px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(11, 23, 48, 0.05) 0%, rgba(184, 136, 59, 0.04) 100%);
  border-left: 4px solid var(--brass);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 6px 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
[data-theme="dark"] .pbi-sec-heading {
  background: linear-gradient(90deg, rgba(217, 165, 74, 0.12) 0%, rgba(14, 26, 46, 0.5) 100%);
}
.pbi-sec-heading h4 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-stretch: 110%;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.pbi-sec-heading span {
  font-size: 11.5px;
  color: var(--muted);
}
.pbi-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 12px 20px 0;
}
.pbi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 12px 20px 0;
}
.pbi-grid-62-38 {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 14px;
  padding: 12px 20px 0;
}
.pbi-grid-1 {
  padding: 12px 20px 0;
}
.pbi-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pbi-panel-hdr {
  padding: 9px 14px 7px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.pbi-panel-title {
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.pbi-panel-sub {
  display: block;
  font-size: 10.8px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.pbi-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}
.pbi-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pbi-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.pbi-legend i.line {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

/* Inline Data Bars & Conditional Formatting (matching m18c_report.py BAR_POS / BAR_NEG / AMBER_BG / NAVY_TINT) */
td.pbi-bar-cell {
  position: relative;
  z-index: 1;
}
.pbi-bar-bg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 5px;
  border-radius: 3px;
  pointer-events: none;
  z-index: -1;
}
td.r.pbi-bar-cell .pbi-bar-bg {
  left: auto;
  right: 6px;
}
.pbi-bar-bg.pos {
  background: rgba(43, 92, 143, 0.16);
  border-left: 2.5px solid rgba(43, 92, 143, 0.58);
}
td.r.pbi-bar-cell .pbi-bar-bg.pos {
  border-left: 0;
  border-right: 2.5px solid rgba(43, 92, 143, 0.62);
}
.pbi-bar-bg.neg {
  background: rgba(200, 51, 59, 0.15);
  border-left: 2.5px solid rgba(200, 51, 59, 0.62);
}
td.r.pbi-bar-cell .pbi-bar-bg.neg {
  border-left: 0;
  border-right: 2.5px solid rgba(200, 51, 59, 0.65);
}
.pbi-bar-bg.brass {
  background: rgba(184, 136, 59, 0.17);
  border-left: 2.5px solid rgba(184, 136, 59, 0.68);
}
td.r.pbi-bar-cell .pbi-bar-bg.brass {
  border-left: 0;
  border-right: 2.5px solid rgba(184, 136, 59, 0.72);
}
[data-theme="dark"] .pbi-bar-bg.pos { background: rgba(74, 140, 212, 0.22); }
[data-theme="dark"] .pbi-bar-bg.neg { background: rgba(232, 88, 96, 0.22); }
[data-theme="dark"] .pbi-bar-bg.brass { background: rgba(217, 165, 74, 0.22); }

.pbi-neg {
  color: #C8333B !important;
  font-weight: 700;
}
[data-theme="dark"] .pbi-neg {
  color: #F26D75 !important;
}
.pbi-pos {
  color: var(--good) !important;
  font-weight: 600;
}
tr.pbi-row-amber td {
  background: #FDF1E3 !important;
  color: #B45309 !important;
}
[data-theme="dark"] tr.pbi-row-amber td {
  background: rgba(224, 122, 31, 0.16) !important;
  color: #F6AD55 !important;
}
tr.pbi-row-navy td {
  background: #E8EFF8 !important;
}
[data-theme="dark"] tr.pbi-row-navy td {
  background: rgba(43, 92, 143, 0.18) !important;
}
td.pbi-cell-amber {
  background: #FDF1E3 !important;
  color: #B45309 !important;
  font-weight: 700;
}
[data-theme="dark"] td.pbi-cell-amber {
  background: rgba(224, 122, 31, 0.20) !important;
  color: #F6AD55 !important;
}

/* Horizontal Bar Chart with inline labels (Power BI barChart style) */
.pbi-bar-chart {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pbi-bar-item {
  display: grid;
  grid-template-columns: minmax(95px, 34%) 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.pbi-bar-lbl {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pbi-bar-lbl small {
  color: var(--muted);
  font-weight: 400;
}
.pbi-bar-lane {
  height: 15px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.pbi-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s ease;
}
.pbi-bar-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 58px;
}

/* Clustered Horizontal Bar Chart */
.pbi-cbar-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--line);
}
.pbi-cbar-item:last-child { border-bottom: 0; padding-bottom: 0; }
.pbi-cbar-head {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}
.pbi-cbar-series {
  display: grid;
  grid-template-columns: 72px 1fr 64px;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
}
.pbi-cbar-series span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbi-cbar-series b { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }

/* Clickable PBI KPI card */
.pbi-kpi-card[data-pbi-jump] {
  cursor: pointer;
  transition: background 0.14s ease, box-shadow 0.14s ease;
}
.pbi-kpi-card[data-pbi-jump]:hover {
  background: var(--surface-2);
  box-shadow: inset 0 -2px 0 var(--brass);
}

/* Statement Hub Category Filter Bar */
.stmt-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}

@media (max-width: 1180px) {
  .pbi-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbi-grid-62-38 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pbi-sec-heading { margin: 12px 12px 4px; padding: 8px 11px; }
  .pbi-grid-2, .pbi-grid-3, .pbi-grid-62-38, .pbi-grid-1 { grid-template-columns: 1fr; padding: 10px 12px 0; gap: 10px; }
  .pbi-slicer-bar.dynamic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbi-bar-item { grid-template-columns: minmax(80px, 38%) 1fr auto; }
}

/* ============================================================================
   v4.5 — BIOMETRIC FACE ID SCANNER (#authGate) & ENROLMENT STUDIO (Users)
   ============================================================================ */
.auth-face-stage {
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.auth-face-dot,
.auth-face-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94A3B8;
  flex-shrink: 0;
}
.auth-face-dot.live,
.auth-face-pulse.live {
  background: #22C55E;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.75);
}
.auth-hud-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.auth-hud-btn.cam-live {
  color: var(--ink);
  border-color: var(--brass-border);
}
:root[data-theme="dark"] .auth-hud-btn {
  background: rgba(255, 255, 255, 0.07);
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, 0.15);
}
:root[data-theme="dark"] .auth-hud-btn.cam-live {
  color: #F4F2EE;
  border-color: rgba(217, 165, 74, 0.42);
}
.auth-hud-btn:hover {
  background: var(--brass-tint);
  border-color: var(--brass);
  color: var(--ink);
}
:root[data-theme="dark"] .auth-hud-btn:hover {
  color: #F4F2EE;
}
.auth-face-target-banner,
.auth-face-target {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--brass-tint);
  border: 1px solid var(--brass);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}
.auth-target-cancel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.auth-face-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.auth-cam-viewport {
  --auth-cam-zoom: 1.44;
  --auth-cam-origin-y: 52%;
  position: relative;
  width: clamp(268px, 38.5dvh, 336px);
  aspect-ratio: 6 / 7;
  height: auto;
  max-width: 100%;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 44%, #FFFFFF 0%, #F4F2EE 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--brass-border);
  box-shadow: 0 10px 28px rgba(15, 30, 56, 0.07), inset 0 0 16px rgba(15, 30, 56, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-cam-viewport.is-matching {
  border-color: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16), 0 8px 22px rgba(15, 30, 56, 0.08);
}
:root[data-theme="dark"] .auth-cam-viewport {
  background: radial-gradient(circle at 50% 42%, #172A4D 0%, #081124 100%);
  border-color: rgba(217, 165, 74, 0.42);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .auth-cam-viewport.is-matching {
  border-color: #22C55E;
}
.auth-cam-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  z-index: 0;
}
.auth-cam-viewport.is-video-ready .auth-cam-backdrop {
  opacity: 0;
}
.auth-cam-viewport video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--auth-cam-origin-y, 52%);
  transform-origin: 50% var(--auth-cam-origin-y, 52%);
  transform: scaleX(calc(-1 * var(--auth-cam-zoom, 1.44))) scaleY(var(--auth-cam-zoom, 1.44));
  opacity: 0;
  transition: opacity 0.18s ease;
  display: block;
}
.auth-cam-viewport.is-video-ready video {
  opacity: 1;
}
.auth-cam-viewport canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 50% var(--auth-cam-origin-y, 52%);
  transform: scaleX(calc(-1 * var(--auth-cam-zoom, 1.44))) scaleY(var(--auth-cam-zoom, 1.44));
}
.auth-cam-reticle {
  position: absolute;
  inset: 11px;
  pointer-events: none;
  z-index: 3;
  color: rgba(200, 157, 84, 0.52);
  transition: color 0.18s ease;
}
.auth-cam-viewport.is-matching .auth-cam-reticle {
  color: rgba(34, 197, 94, 0.85);
}
.auth-face-oval {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  opacity: 0.72;
}
.auth-finder-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(200, 157, 84, 0.78);
  border-style: solid;
  border-width: 0;
  transition: border-color 0.18s ease;
}
.auth-cam-viewport.is-matching .auth-finder-corner {
  border-color: #22C55E;
}
.auth-finder-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 5px; }
.auth-finder-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 5px; }
.auth-finder-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 5px; }
.auth-finder-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 5px; }
.auth-cam-off {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F4F2EE 100%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  z-index: 4;
}
.auth-cam-off.is-pin-only {
  cursor: default;
}
:root[data-theme="dark"] .auth-cam-off {
  background: radial-gradient(circle at 50% 42%, #132342 0%, #081124 100%);
  color: #94A3B8;
}
.auth-face-side {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.auth-hint-wrap {
  position: static;
  width: 100%;
  min-height: 2px;
  background: transparent;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.auth-hint-wrap:empty,
.auth-face-hint:empty {
  display: none;
}
.auth-face-card {
  position: static;
  width: 100%;
  background: var(--good-bg);
  border: 1.5px solid var(--good);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  z-index: 6;
}
:root[data-theme="dark"] .auth-face-card {
  background: rgba(15, 23, 42, 0.94);
  border-color: #22C55E;
}
#authFaceCard:not([hidden]) ~ .auth-hint-wrap {
  display: none !important;
}
.auth-face-card-av {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.auth-face-photo,
.auth-face-card-av img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #22C55E;
  flex-shrink: 0;
}
.auth-face-card-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22C55E;
  color: #0F172A;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-face-badge,
.auth-face-card-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(34, 197, 94, 0.16);
  color: var(--good);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 2px;
}
.auth-face-name,
.auth-face-card-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.auth-face-meta,
.auth-face-card-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--good);
  margin-left: 6px;
}
.auth-face-conf,
.auth-face-card-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.auth-face-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.35;
}
.auth-face-hint.ok { color: var(--good); font-weight: 600; }
.auth-face-hint.warn { color: var(--warn); }
.auth-face-hint.crit { color: var(--crit); font-weight: 600; }
.auth-streak-bar {
  width: 160px;
  height: 0;
  opacity: 0;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  transition: opacity 0.14s ease;
}
.auth-streak-bar.is-active {
  height: 3px;
  opacity: 1;
}
:root[data-theme="dark"] .auth-streak-bar {
  background: rgba(255, 255, 255, 0.12);
}
.auth-streak-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brass), #22C55E);
  transition: width 0.16s ease;
}
.auth-or-divider,
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 0 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.auth-or-divider::before,
.auth-or-divider::after,
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ============================================================================
   BIOMETRIC FACE ID ENROLMENT STUDIO & CALIBRATION (REV 10 OBSIDIAN & BRASS)
   ============================================================================ */
.mfg-enrol-studio {
  border: 1px solid rgba(217, 165, 74, 0.48);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(8, 17, 36, 0.08);
  background: var(--surface);
}
.enrol-console-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--brass-border);
  color: var(--ink);
}
:root[data-theme="dark"] .enrol-console-hdr {
  background: linear-gradient(108deg, #081124 0%, #0F1E38 62%, #152747 100%);
  color: #F4F2EE;
}
.enrol-console-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.enrol-console-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.enrol-console-icon svg {
  width: 19px;
  height: 19px;
}
.enrol-console-eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.2;
}
.enrol-console-title {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.enrol-console-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.enrol-seat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.enrol-seat-pill.enrolled {
  background: var(--good-bg);
  border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
  color: var(--good);
}
.enrol-seat-pill.pending {
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--brass);
}
.enrol-calib-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--brass-border) !important;
  border-radius: 6px;
}
.enrol-calib-btn:hover {
  background: var(--brass-tint) !important;
  border-color: var(--brass) !important;
}
.enrol-calib-btn svg {
  width: 14px;
  height: 14px;
  color: var(--brass);
}

.enrol-studio-grid {
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
  align-items: start;
}
.enrol-cam-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.enrol-cam-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--brass-border);
  box-shadow: inset 0 0 18px rgba(15, 30, 56, 0.06);
}
:root[data-theme="dark"] .enrol-cam-viewport {
  background: #081124;
  border-color: rgba(217, 165, 74, 0.42);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.65);
}
.enrol-cam-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}
.enrol-cam-viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: scaleX(-1);
  z-index: 2;
}
.enrol-cam-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, transparent 52%, rgba(15, 30, 56, 0.08) 100%);
  z-index: 1;
}
:root[data-theme="dark"] .enrol-cam-vignette {
  background: radial-gradient(circle at 50% 48%, transparent 48%, rgba(8, 17, 36, 0.62) 100%);
}
.enrol-hud-corners {
  position: absolute;
  inset: 14px;
  pointer-events: none;
  z-index: 2;
}
.enrol-hud-corners i {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(217, 165, 74, 0.72);
  border-style: solid;
  border-width: 0;
}
.enrol-hud-corners i.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; }
.enrol-hud-corners i.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.enrol-hud-corners i.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
.enrol-hud-corners i.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }
.enrol-hud-oval {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 52%;
  height: 70%;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(217, 165, 74, 0.34);
  border-radius: 50% / 54%;
}
.enrol-hud-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
}
.enrol-hud-pill,
.enrol-hud-spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3.5px 8.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--brass-border);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .enrol-hud-pill,
:root[data-theme="dark"] .enrol-hud-spec {
  background: rgba(8, 17, 36, 0.82);
  border-color: rgba(217, 165, 74, 0.38);
  color: #F4F2EE;
}
.enrol-hud-spec {
  color: var(--brass);
}
:root[data-theme="dark"] .enrol-hud-spec {
  color: #D9A54A;
}
.enrol-hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94A3B8;
}
.enrol-hud-dot.live {
  background: #D9A54A;
  box-shadow: 0 0 8px #D9A54A;
}
.enrol-hud-dot.live.locked {
  background: #22C55E;
  box-shadow: 0 0 9px #22C55E;
}
.enrol-hud-stop-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--brass-border);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.enrol-hud-stop-btn:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #081124;
}
:root[data-theme="dark"] .enrol-hud-stop-btn {
  background: rgba(8, 17, 36, 0.86);
  border-color: rgba(217, 165, 74, 0.45);
  color: #F4F2EE;
}
:root[data-theme="dark"] .enrol-hud-stop-btn:hover {
  background: var(--brass);
  color: #081124;
}
.enrol-hud-stop-btn svg {
  width: 10px;
  height: 10px;
}
.staff-hud-stop-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
}
.enrol-shutter-flash {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.22s ease-out;
}
.enrol-shutter-flash.active {
  opacity: 0.82;
  transition: none;
}
.enrol-cam-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px 14px;
  color: var(--ink);
  background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F4F2EE 100%);
  gap: 6px;
  z-index: 4;
  cursor: pointer;
}
:root[data-theme="dark"] .enrol-cam-placeholder {
  color: #E2E8F0;
  background: radial-gradient(circle at 50% 42%, #132342 0%, #081124 100%);
}
.enrol-cam-placeholder[hidden] {
  display: none !important;
}
.enrol-cam-reticle-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.enrol-cam-reticle-badge svg {
  width: 26px;
  height: 26px;
}
.enrol-cam-placeholder-title {
  font-family: "Archivo", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme="dark"] .enrol-cam-placeholder-title {
  color: #F4F2EE;
}
.enrol-cam-placeholder small {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
  max-width: 260px;
}
:root[data-theme="dark"] .enrol-cam-placeholder small {
  color: #94A3B8;
}
.enrol-cam-wake-pill {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--brass);
  font-size: 11px;
  font-weight: 700;
  transition: background 0.15s, transform 0.15s;
}
.enrol-cam-placeholder:hover .enrol-cam-wake-pill {
  background: var(--brass);
  color: #081124;
}
.enrol-cam-wake-pill svg {
  width: 13px;
  height: 13px;
}

/* 3 Stored Pose Photo Cards below Camera */
.enrol-thumb-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.enrol-thumb-slot {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
}
.enrol-thumb-slot:hover {
  border-color: var(--brass);
  transform: translateY(-1px);
}
.enrol-thumb-slot.next-slot {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px rgba(217, 165, 74, 0.28);
}
.enrol-thumb-slot.captured {
  border-color: rgba(22, 163, 74, 0.55);
  background: rgba(22, 163, 74, 0.05);
}
.enrol-thumb-slot.is-capturing {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(217, 165, 74, 0.34);
}
.enrol-thumb-badge.capturing {
  background: var(--brass);
  border-color: var(--brass);
  color: #081124;
}
.enrol-thumb-media {
  position: relative;
  width: 100%;
  height: 66px;
  background: var(--surface-2);
  overflow: hidden;
}
:root[data-theme="dark"] .enrol-thumb-media {
  background: #0B1730;
}
.enrol-thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}
.enrol-thumb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1.5px 5px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(74, 222, 128, 0.6);
  color: #4ADE80;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.enrol-thumb-vec {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--good-bg);
}
:root[data-theme="dark"] .enrol-thumb-vec {
  background: radial-gradient(circle at 50% 50%, #13284C 0%, #081124 100%);
}
.enrol-vec-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--good);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
}
.enrol-vec-chip svg {
  width: 18px;
  height: 18px;
}
.enrol-thumb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: linear-gradient(180deg, rgba(15, 30, 56, 0.06) 0%, rgba(15, 30, 56, 0.12) 100%);
}
:root[data-theme="dark"] .enrol-thumb-empty {
  background: rgba(8, 17, 36, 0.65);
}
.enrol-empty-num {
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--brass);
  line-height: 1;
}
.enrol-thumb-empty small {
  font-size: 9px;
  color: var(--muted);
  font-weight: 600;
}
.enrol-thumb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4.5px 6px;
  border-top: 1px solid var(--line);
  font-size: 9.8px;
  background: var(--surface);
}
.enrol-thumb-lbl {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enrol-thumb-lbl b {
  font-family: var(--font-mono);
  color: var(--brass);
  margin-right: 2px;
}
.enrol-thumb-action {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}
.enrol-thumb-slot.captured .enrol-thumb-action {
  color: var(--brass);
}

/* Right Column: 2-Card Configuration Strip */
.enrol-controls-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.enrol-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.enrol-config-card {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.enrol-config-lbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.enrol-seat-step-btns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.enrol-step-btn {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  transition: border-color 0.15s, background 0.15s;
}
.enrol-step-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.enrol-config-lbl {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.enrol-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.enrol-policy-card {
  gap: 6px;
}
.enrol-policy-subgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.enrol-policy-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.enrol-policy-field-wide {
  grid-column: 1 / -1;
}
.enrol-policy-field label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enrol-policy-field small {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.enrol-policy-checks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 2px;
}
.enrol-policy-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.25;
}
.enrol-policy-check input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brass);
  cursor: pointer;
}

/* 3-Step Horizontal Pose Track */
.pose-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pose-step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}
.pose-step:hover {
  border-color: var(--brass);
}
.pose-step.active {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
}
.pose-step.done {
  border-color: rgba(22, 163, 74, 0.48);
  background: rgba(22, 163, 74, 0.08);
  color: var(--ink);
}
.pose-step-num {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  flex-shrink: 0;
}
.pose-step.active .pose-step-num {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}
.pose-step.done .pose-step-num {
  background: #16A34A;
  border-color: #16A34A;
  color: #FFFFFF;
}
.pose-step-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pose-step-txt b {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pose-step-txt small {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pose-step.done .pose-step-txt small {
  color: var(--good);
  font-weight: 600;
}

/* Guided Pose Instruction + Action Deck */
.mfg-pose-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--brass-border);
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.mfg-pose-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 260px;
  min-width: 0;
}
.mfg-pose-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
:root[data-theme="dark"] .mfg-pose-guide {
  background: linear-gradient(108deg, #081124 0%, #0F1E38 100%);
  color: #F8FAFC;
}
.mfg-pose-guide.complete {
  border-color: color-mix(in srgb, var(--good) 55%, transparent);
  background: var(--good-bg);
}
:root[data-theme="dark"] .mfg-pose-guide.complete {
  border-color: rgba(34, 197, 94, 0.65);
  background: linear-gradient(108deg, #081F1C 0%, #0B1730 100%);
}
.mfg-pose-guide.is-live-verified {
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.28);
}
.mfg-pose-guide.is-capturing {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.mfg-pose-guide.is-warn {
  border-color: rgba(217, 119, 6, 0.55);
  background: rgba(217, 119, 6, 0.08);
}
.mfg-pose-guide.is-warn .mfg-pose-kicker {
  color: var(--warn);
}
.mfg-pose-guide.is-crit {
  border-color: rgba(220, 38, 38, 0.55);
  background: rgba(220, 38, 38, 0.08);
}
.mfg-pose-guide.is-crit .mfg-pose-kicker {
  color: var(--crit);
}
.mfg-pose-svg {
  width: 54px;
  height: 54px;
  padding: 5px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--brass-border);
  color: var(--ink);
  flex-shrink: 0;
}
:root[data-theme="dark"] .mfg-pose-svg {
  background: rgba(255, 255, 255, 0.05);
  color: #F8FAFC;
}
.mfg-pose-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mfg-pose-copy {
  flex: 1;
  min-width: 0;
}
.mfg-pose-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brass);
  margin-bottom: 2px;
}
.mfg-pose-guide.complete .mfg-pose-kicker {
  color: var(--good);
}
.mfg-pose-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.mfg-pose-pill {
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
.mfg-pose-guide.complete .mfg-pose-pill {
  background: var(--good-bg);
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  color: var(--good);
}

.enrol-consent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.2px;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 0;
}
.enrol-consent-row input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brass);
}

.enrol-status-bar {
  padding: 8px 12px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  font-size: 11.8px;
  font-weight: 500;
  color: var(--ink);
}
.enrol-status-bar.ok {
  border-color: rgba(22, 163, 74, 0.45);
  border-left: 3px solid #16A34A;
  background: rgba(22, 163, 74, 0.08);
  color: var(--good);
  font-weight: 600;
}
.enrol-status-bar.warn {
  border-color: rgba(217, 119, 6, 0.45);
  border-left: 3px solid #D97706;
  background: rgba(217, 119, 6, 0.08);
  color: var(--warn);
  font-weight: 600;
}
.enrol-status-bar.crit {
  border-color: rgba(220, 38, 38, 0.45);
  border-left: 3px solid #DC2626;
  background: rgba(220, 38, 38, 0.08);
  color: var(--crit);
  font-weight: 600;
}

.enrol-btn-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.enrol-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 7px;
}
.enrol-action-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.enrol-capture-cta {
  padding: 8px 16px;
  box-shadow: 0 4px 14px rgba(217, 165, 74, 0.28);
}
.enrol-selected-row td {
  background: var(--brass-tint) !important;
}
.enrol-calib-box {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .enrol-config-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .enrol-console-hdr {
    padding: 11px 12px;
  }
  .enrol-studio-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .pose-stepper {
    grid-template-columns: 1fr;
  }
  .mfg-pose-pill {
    display: none;
  }
  .auth-face-body {
    gap: 8px;
  }
  .auth-cam-viewport {
    margin: 0 auto;
  }
}

/* ============================================================================
   v4.7 — POWER BI / POWER APPS DATE GRAIN & RANGE SLICER + BOUNDED PAGINATED TABLES
   ============================================================================ */
.grain-switch {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px;
  gap: 1.5px;
  flex-shrink: 0;
}

.grain-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.grain-btn:hover {
  color: var(--ink);
}

.grain-btn.active {
  background: var(--brass);
  color: #0B1730;
  font-weight: 700;
}

.date-range-bar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 5px;
  min-width: 0;
  flex-shrink: 0;
}

.date-range-bar.custom-active {
  border-color: var(--brass);
  background: var(--brass-tint);
}

.date-range-input {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 2.5px 1px;
  width: 98px;
  min-width: 0;
  outline: none;
}

.date-range-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--line-strong);
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0 2px;
  user-select: none;
}

.date-range-bar.custom-active .date-range-sep {
  background: var(--brass-border);
}

.date-range-reset {
  border: 0;
  background: rgba(200, 51, 59, 0.14);
  color: var(--crit);
  border-radius: 3px;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.date-range-reset[hidden] {
  display: inline-flex !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.date-range-reset:hover {
  background: var(--crit);
  color: #FFFFFF;
}

@media (max-width: 1350px) and (min-width: 861px) {
  .entity-btn { padding: 4px 5.5px; font-size: 11px; }
  .grain-btn { padding: 4px 5px; font-size: 10.5px; }
  #periodSelect { width: 128px; min-width: 128px; max-width: 128px; font-size: 11px; padding: 4px 5px; }
  .date-range-input { width: 90px; font-size: 10.5px; }
  .basis-btn { padding: 4px 5.5px; font-size: 10.5px; }
}

/* Power BI Studio Embedded Date Grain + Range Bar */
.pbi-date-slicer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--brass-border);
  border-radius: 6px;
}

:root[data-theme="dark"] .pbi-date-slicer-row {
  background: rgba(8, 17, 36, 0.65);
}

.pbi-date-left,
.pbi-date-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.pbi-date-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

.pbi-grain-group {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5px;
  gap: 2px;
}

.pbi-grain-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10.8px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

.pbi-grain-btn:hover {
  color: var(--ink);
}

.pbi-grain-btn.active {
  background: var(--brass);
  color: #0B1730;
  font-weight: 800;
}

.pbi-period-select,
.pbi-date-input {
  padding: 4px 7px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 11.2px;
  font-weight: 600;
  min-width: 0;
}

.pbi-period-select {
  width: 168px;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pbiDateResetBtn[hidden] {
  display: inline-flex !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.pbi-date-input {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  width: 118px;
}

/* Bounded Vertical Scroll + Sticky Header/Footer on All Tables */
.table-wrap {
  max-height: 620px;
  overflow-y: auto;
  overflow-x: auto;
}

.a4-sheet .table-wrap {
  max-height: none;
  overflow-y: visible;
}

table.ledger-table thead th,
table.m-grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-2);
  box-shadow: 0 -2px 0 0 var(--surface-2), 0 1px 0 var(--line);
}

table.ledger-table:has(tfoot) tbody tr:last-child td,
table.m-grid:has(tfoot) tbody tr:last-child td {
  border-bottom: 0;
}

table.ledger-table tfoot,
table.m-grid tfoot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface-2);
}

table.ledger-table tfoot tr td,
table.m-grid tfoot tr td {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 11.5px;
  padding: 9px 8.5px;
  border-top: 2px solid var(--ink);
  border-bottom: 3px double var(--brass);
  box-shadow: 0 -2px 6px rgba(11, 23, 48, 0.08), 0 4px 0 0 var(--surface-2);
  white-space: nowrap;
}

table.ledger-table tfoot tr td:first-child {
  padding-left: 12px;
}

table.ledger-table tfoot tr td:last-child {
  padding-right: 12px;
}

/* Compact Table Pagination Bar (.pbi-pager & .reg-pager) */
.pbi-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}

.pbi-pager-info {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pbi-pager-info b {
  color: var(--ink);
}

.pbi-pager-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pbi-page-btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px;
  padding: 2.5px 7px;
  font-size: 10.8px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.pbi-page-btn:hover:not(:disabled) {
  border-color: var(--brass);
  background: var(--brass-tint);
}

.pbi-page-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.pbi-page-size-sel {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 10.8px;
  font-weight: 600;
}

@media (max-width: 860px) {
  .period-basis-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 5px;
  }
  .grain-switch {
    order: 1;
    flex: 1 1 100%;
    justify-content: space-between;
    min-width: 0;
  }
  .grain-btn {
    flex: 1;
    text-align: center;
    padding: 4px 4px;
    font-size: 10.5px;
  }
  #periodSelect {
    order: 2;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .basis-switch {
    order: 3;
    flex-shrink: 0;
  }
  .date-range-bar {
    order: 4;
    flex: 1 1 100%;
    justify-content: space-between;
    padding: 3px 6px;
  }
  .date-range-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .pbi-period-select {
    flex: 1;
    width: 100%;
    max-width: none;
  }
  .pbi-date-slicer-row {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    gap: 6px;
  }
  .pbi-date-left,
  .pbi-date-right {
    width: 100%;
    justify-content: space-between;
  }
  .pbi-grain-group {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .pbi-grain-btn {
    text-align: center;
    padding: 4px 2px;
    font-size: 10px;
  }
  .pbi-period-select {
    flex: 1;
    width: 100%;
  }
  .pbi-date-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .sidebar-toggle-lbl {
    display: none;
  }
  .table-wrap {
    max-height: 420px;
  }
}

@media print {
  .table-wrap {
    max-height: none !important;
    overflow: visible !important;
  }
  .pbi-pager {
    display: none !important;
  }
}

/* ==========================================================================
   v5.3 — POWER APPS RECORD FORM, RELATIONAL SUBGRIDS, CLICKABLE LOOKUPS,
          LIVE NOTIFICATION BANNER & 4-CARD NAVY EXECUTIVE COCKPIT (m12 / m283)
   ========================================================================== */
.inspector-card {
  width: min(1140px, 96vw) !important;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 3px solid var(--brass);
}
#recordInspector .modal-header {
  padding: 10px 18px;
  background: var(--surface-2);
  color: var(--ink);
  border-bottom: 1px solid var(--brass-border);
}
:root[data-theme="dark"] #recordInspector .modal-header {
  background: #0B1730;
  color: #F4F2EE;
}
#recordInspector .modal-eyebrow {
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.09em;
}
#recordInspector #inspectorTitle {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}
#recordInspector .modal-close-btn {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
#recordInspector .modal-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Top Command & Relational Breadcrumb Trail */
.pa-cmd-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 10px;
}
.pa-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 11.5px;
}
.pa-crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--brass);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pa-crumb-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-crumb-btn:hover {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
.pa-crumb-btn.current {
  color: var(--ink);
  font-weight: 800;
  background: var(--surface);
  border-color: var(--line);
  cursor: default;
}
.pa-crumb-sep {
  color: var(--muted);
  font-size: 11px;
}
.pa-cmd-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pa-cmd-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.pa-cmd-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}

/* Live Contextual Notification Bar (Screenshot 2 top bar) */
.pa-rec-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-left: 4px solid #2563EB;
  border-radius: 6px;
  color: #1E3A8A;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
}
:root[data-theme="dark"] .pa-rec-banner {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(96, 165, 250, 0.35);
  border-left-color: #60A5FA;
  color: #DBEAFE;
}
.pa-rec-banner.warn {
  background: #FFFBEB;
  border-color: #FDE68A;
  border-left-color: #D97706;
  color: #92400E;
}
:root[data-theme="dark"] .pa-rec-banner.warn {
  background: rgba(217, 119, 6, 0.16);
  border-color: rgba(251, 191, 36, 0.35);
  border-left-color: #FBBF24;
  color: #FEF3C7;
}
.pa-rec-banner.ok, .pa-rec-banner.good {
  background: #ECFDF5;
  border-color: #A7F3D0;
  border-left-color: #059669;
  color: #065F46;
}
:root[data-theme="dark"] .pa-rec-banner.ok, :root[data-theme="dark"] .pa-rec-banner.good {
  background: rgba(5, 150, 105, 0.16);
  border-color: rgba(52, 211, 153, 0.35);
  border-left-color: #34D399;
  color: #D1FAE5;
}
.pa-rec-banner.crit {
  background: #FEF2F2;
  border-color: #FECACA;
  border-left-color: #DC2626;
  color: #991B1B;
}
:root[data-theme="dark"] .pa-rec-banner.crit {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(248, 113, 113, 0.35);
  border-left-color: #F87171;
  color: #FEE2E2;
}
.pa-rec-banner-ico {
  font-size: 13px;
  flex-shrink: 0;
}

/* Power Apps Form Tabs (General | Related + Subgrid Quick-Jump Tabs) */
.pa-rec-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--line);
  margin-bottom: 12px;
}
.pa-rec-tab {
  background: transparent;
  border: 0;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  padding: 7px 12px;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pa-rec-tab:hover {
  color: var(--ink);
}
.pa-rec-tab.active {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
.pa-rec-tab em {
  font-style: normal;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 4-Card Executive Telemetry & Control Cockpit (Screenshot 2 bhf_mfgCockpit.htm parity) */
.pa-rec-cockpit {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--brass-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .pa-rec-cockpit {
  background: #0F1E36;
  color: #F4F2EE;
  box-shadow: 0 6px 18px rgba(8, 17, 36, 0.28);
}
.pa-rec-cockpit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .pa-rec-cockpit-top {
  background: #091326;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.pa-rec-cockpit-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.pa-rec-bu-pill {
  background: var(--brass);
  color: #091326;
  font-family: "Archivo", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.pa-rec-val-pill {
  background: var(--good-bg);
  border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
  color: var(--good);
  font-family: "Archivo", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.pa-rec-cockpit-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  background: #F8FAFC;
  color: #0F172A;
}
:root[data-theme="dark"] .pa-rec-cockpit-cards {
  background: #111F38;
  color: #F4F2EE;
}
.pa-rec-kcard {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 10px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}
:root[data-theme="dark"] .pa-rec-kcard {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.pa-rec-kcard-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.pa-rec-kcard-lbl {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
}
:root[data-theme="dark"] .pa-rec-kcard-lbl {
  color: rgba(244, 242, 238, 0.64);
}
.pa-rec-kcard-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pa-rec-kcard-tag.good { background: #DCFCE7; color: #166534; }
.pa-rec-kcard-tag.info { background: #DBEAFE; color: #1E40AF; }
.pa-rec-kcard-tag.warn { background: #FEF3C7; color: #92400E; }
.pa-rec-kcard-tag.crit { background: #FEE2E2; color: #991B1B; }
:root[data-theme="dark"] .pa-rec-kcard-tag.good { background: rgba(34, 197, 94, 0.22); color: #86EFAC; }
:root[data-theme="dark"] .pa-rec-kcard-tag.info { background: rgba(59, 130, 246, 0.22); color: #93C5FD; }
:root[data-theme="dark"] .pa-rec-kcard-tag.warn { background: rgba(245, 158, 11, 0.22); color: #FCD34D; }
:root[data-theme="dark"] .pa-rec-kcard-tag.crit { background: rgba(239, 68, 68, 0.22); color: #FCA5A5; }
.pa-rec-kcard-val {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
:root[data-theme="dark"] .pa-rec-kcard-val {
  color: #F4F2EE;
}
.pa-rec-kcard-sub {
  font-size: 11px;
  color: #475569;
  line-height: 1.35;
}
:root[data-theme="dark"] .pa-rec-kcard-sub {
  color: rgba(244, 242, 238, 0.72);
}
.pa-rec-kcard-bar {
  height: 4px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 3px;
}
:root[data-theme="dark"] .pa-rec-kcard-bar {
  background: rgba(255, 255, 255, 0.12);
}
.pa-rec-kcard-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #16A34A;
}
.pa-rec-kcard-bar > i.info { background: #2563EB; }
.pa-rec-kcard-bar > i.warn { background: #D97706; }
.pa-rec-kcard-bar > i.crit { background: #DC2626; }

/* Power Apps Structured Form Sections & Locked Quick-View Cards (m12_forms.py) */
.pa-form-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.pa-form-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
.pa-form-sec-hdr {
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pa-form-sec-hdr span {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.pa-form-sec-body {
  padding: 10px 12px;
}

/* Quick-View Cards Grid inside Record Form (qv_customer, qv_truck, qv_site, qv_rule, qv_supplier) */
.pa-qv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pa-qv-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3.5px solid var(--brass);
  border-radius: 7px;
  padding: 9px 12px;
  min-width: 0;
}
.pa-qv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.pa-qv-card-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brass);
}
.pa-qv-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.pa-qv-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
}
.pa-qv-kv small {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.pa-qv-kv b {
  font-size: 11.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Clickable Relational Lookup Links across Forms, Subgrids & Registers */
.rel-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #1D4ED8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(29, 78, 216, 0.45);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  border-radius: 3px;
  padding: 0 2px;
}
:root[data-theme="dark"] .rel-link {
  color: #60A5FA;
  border-bottom-color: rgba(96, 165, 250, 0.45);
}
.rel-link:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
  background: var(--brass-tint);
}
.rel-link .rel-arr {
  font-size: 9.5px;
  opacity: 0.75;
}

/* Interactive Related Subgrids inside Record Inspector (bhf_related_subgrids.py parity) */
.pa-subgrids-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}
.pa-subgrid-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pa-subgrid-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--surface-2);
  color: var(--ink);
  border-bottom: 2px solid var(--brass);
}
:root[data-theme="dark"] .pa-subgrid-bar {
  background: #0B1730;
  color: #F4F2EE;
}
.pa-subgrid-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-family: "Archivo", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.pa-subgrid-rel {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: var(--brass-tint);
  color: var(--brass);
  border: 1px solid var(--brass-border);
}
.pa-subgrid-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pa-subgrid-search {
  padding: 3.5px 8px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  min-width: 155px;
}
.pa-subgrid-search::placeholder {
  color: var(--muted);
}
.pa-subgrid-jump {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--brass);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.pa-subgrid-jump:hover {
  background: var(--brass);
  color: #0B1730;
}

/* Connected Tables & System Views Strip on 34-Table Hub */
.pa-hub-rel-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.pa-hub-views, .pa-hub-conns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pa-hub-lbl {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-right: 2px;
}

@media (max-width: 860px) {
  .pa-rec-cockpit-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pa-qv-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .inspector-card {
    width: 100% !important;
    max-height: calc(100dvh - var(--safe-top) - 6px);
  }
  .pa-rec-cockpit-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 9px 10px;
    gap: 8px;
  }
  .pa-rec-kcard-val {
    font-size: 16px;
  }
  .pa-subgrid-search {
    min-width: 120px;
    flex: 1;
  }
}

/* ============================================================================
   v5.7 — REV 10 CUSTOM SUGGESTION POPOVER (NO NATIVE DATALIST / NO SCROLLBAR)
   ============================================================================ */
.pa-suggest-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.pa-suggest-wrap > input {
  width: 100%;
  padding-right: 28px !important;
}
.pa-suggest-wrap.has-value > input:not(:disabled):not([readonly]) {
  padding-right: 48px !important;
}
.form-field.is-policy-locked .pa-suggest-wrap.has-value > input {
  padding-right: 28px !important;
}
.pa-suggest-clear {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.pa-suggest-wrap.has-value > .pa-suggest-clear:not([hidden]) {
  display: inline-flex;
  opacity: 0.78;
}
.pa-suggest-wrap.open.has-value > .pa-suggest-clear:not([hidden]),
.pa-suggest-wrap.has-value:focus-within > .pa-suggest-clear:not([hidden]) {
  opacity: 0.92;
}
.pa-suggest-clear:hover {
  opacity: 1 !important;
  color: var(--ink);
  background: var(--brass-tint);
}
:root[data-theme="dark"] .pa-suggest-clear:hover {
  color: #F8FAFC;
  background: rgba(217, 165, 74, 0.22);
}
.pa-suggest-caret {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease, transform 0.15s ease;
}
.pa-suggest-caret:hover {
  color: var(--brass);
  background: var(--brass-tint);
}
.pa-suggest-wrap.open .pa-suggest-caret {
  color: var(--brass);
  transform: translateY(-50%) rotate(180deg);
}
.pa-suggest-wrap > input:disabled ~ .pa-suggest-caret,
.pa-suggest-wrap > input:disabled ~ .pa-suggest-clear,
.pa-suggest-wrap > input[readonly] ~ .pa-suggest-clear,
.pa-select-wrap > select:disabled ~ .pa-suggest-clear,
.form-field.is-policy-locked .pa-suggest-clear {
  display: none !important;
}
.pa-suggest-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--surface);
  border: 1px solid var(--brass-border);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(11, 23, 48, 0.18), 0 2px 6px rgba(11, 23, 48, 0.08);
  padding: 4px;
  overflow: hidden;
}
:root[data-theme="dark"] .pa-suggest-menu {
  background: #101D36;
  border-color: rgba(217, 165, 74, 0.42);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}
.pa-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease, color 0.1s ease;
}
.pa-suggest-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pa-suggest-item:hover,
.pa-suggest-item.active {
  background: var(--brass-tint);
  color: var(--ink);
}
.pa-suggest-item.active {
  box-shadow: inset 2.5px 0 0 var(--brass);
  font-weight: 600;
}
.pa-suggest-mark {
  background: rgba(217, 165, 74, 0.28);
  color: inherit;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 1px;
}
.pa-suggest-more {
  margin-top: 3px;
  padding: 5px 10px 3px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* v6.0 / v19.6.8 — Enlarged Laptop & Mobile Portrait Biometric Scanner + Ordered Account-Then-PIN Gate (Zero Top/Bottom Cutoff on Scaled Laptops & Mobile) */
.auth-gate {
  align-items: flex-start;
  justify-content: center;
  padding: clamp(8px, 1.8dvh, 22px) clamp(12px, 2vw, 22px);
  overflow-y: auto;
}
.auth-card {
  margin: auto;
  max-width: 500px;
}
@media (min-width: 769px) and (max-height: 700px) {
  .auth-card {
    max-width: 472px;
    padding: 15px 22px 13px;
  }
  .auth-top-bar {
    margin-bottom: 8px;
  }
  .auth-cam-viewport {
    width: clamp(210px, 35dvh, 252px);
    aspect-ratio: 6 / 7;
    border-radius: 18px;
  }
  .auth-divider {
    margin: 8px 0 7px;
  }
  .quick-seat-list {
    max-height: 118px;
  }
}
@media (max-width: 768px) {
  .auth-card {
    max-width: 428px;
    padding: 16px 16px 14px;
  }
  .auth-cam-viewport {
    --auth-cam-zoom: 1.38;
    --auth-cam-origin-y: 38%;
    width: min(244px, 66vw);
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 22px;
  }
  .auth-input,
  .auth-seat-search {
    font-size: 16px !important;
  }
  .auth-seat-search {
    height: 40px;
  }
  .quick-seat-list {
    max-height: 160px;
  }
}
@media (max-width: 768px) and (max-height: 720px) {
  .auth-cam-viewport {
    width: min(180px, 50vw);
  }
  .quick-seat-list {
    max-height: 132px;
  }
}
@media (max-height: 555px) {
  .auth-gate {
    padding: 6px 14px;
  }
  .auth-card {
    max-width: 452px;
    padding: 11px 18px 10px;
  }
  .auth-top-bar {
    margin-bottom: 5px;
  }
  .auth-badge {
    width: 28px;
    height: 28px;
  }
  .auth-cam-viewport {
    width: 120px;
    aspect-ratio: 6 / 7;
    height: auto;
    border-radius: 14px;
  }
  .auth-face-body {
    gap: 4px;
  }
  .auth-divider {
    margin: 6px 0 5px;
  }
  .auth-input,
  .auth-submit-btn {
    height: 36px;
  }
  .auth-seat-search {
    height: 32px;
  }
  .auth-footer-note {
    margin-top: 7px;
    padding-top: 5px;
  }
  .quick-seat-list {
    max-height: 100px;
  }
}

/* v6.3 — Module Toolbar Consistency: Search + Filter Chips Left, CSV + Primary Action Pinned Right */
@media (min-width: 861px) {
  .table-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }
  .table-toolbar > div:first-child {
    flex: 1 1 0%;
    min-width: 0;
  }
  .table-toolbar > div:last-child {
    flex-shrink: 0;
    margin-left: auto;
    align-items: center;
    white-space: nowrap;
  }
  .table-toolbar .search-input {
    min-width: 190px;
    width: 220px;
    max-width: 100%;
  }
}

/* v6.4 / v18.5 — Entity Split & Reconciliation Ledger Strip (Flush Hairline Columns & Semantic Restraint) */
.sales-entity-recon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.sales-entity-recon.single,
.sales-entity-recon:not(:has(.sales-recon-card:not([hidden]) ~ .sales-recon-card:not([hidden]))) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  background: var(--surface);
}
.sales-recon-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}
.sales-recon-card.single-card {
  cursor: default;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.sales-recon-card:not(.single-card):hover {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.sales-recon-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
:root[data-theme="dark"] .sales-recon-head {
  background: rgba(255, 255, 255, 0.024);
}
.sales-recon-act {
  margin-left: auto;
  font-size: 10.8px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.12s;
}
.sales-recon-card:not(.single-card):hover .sales-recon-act {
  color: var(--ink);
}
.sales-recon-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 0;
  background: var(--surface);
}
.sales-recon-metrics span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sales-recon-metrics small {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sales-recon-metrics b {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.sales-recon-metrics b.brass,
.sales-recon-single b.brass,
.sales-recon-metrics b.good,
.sales-recon-metrics b.crit {
  color: var(--ink);
}
.sales-recon-single {
  display: block;
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sales-recon-reset {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.tfoot-col-lbl {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.15;
  margin-bottom: 2px;
}
.tfoot-sub-split {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
#salesPanel table.ledger-table th,
#salesPanel table.ledger-table td {
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11.4px;
}
@media (max-width: 1100px) {
  .sales-entity-recon {
    grid-template-columns: 1fr;
  }
  .sales-recon-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ============================================================================
   v6.5 / v19.6.27 — 22 PAGINATED REPORTS SUITE (Grouped Domain Deck + Interactive Tables)
   ============================================================================ */
.rdl-suite-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: var(--bg);
}

.rdl-viewer-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: var(--bg);
  position: relative;
}

.rdl-suite-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  margin: 10px 16px 0;
  padding: 9px 14px;
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: 10px 10px 0 0;
  flex-wrap: nowrap;
}

:root[data-theme="dark"] .rdl-suite-hdr {
  background: #0B1730;
  color: #F8FAFC;
  border-color: #1E325C;
  border-top-color: var(--brass);
}

.rdl-suite-pill {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(184, 136, 59, 0.11);
  color: #9A6B1F;
  border: 1px solid rgba(184, 136, 59, 0.32);
  flex-shrink: 0;
}

:root[data-theme="dark"] .rdl-suite-pill {
  background: rgba(217, 165, 74, 0.14);
  color: #F3C36F;
  border-color: rgba(217, 165, 74, 0.35);
}

.rdl-suite-title {
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

.rdl-search-wrap {
  display: inline-flex;
  align-items: center;
}

.rdl-search-input {
  background: #FAF8F4;
  border: 1px solid #DFDAD0;
  color: #1F1C18;
  border-radius: 6px;
  padding: 4.5px 9px;
  font-size: 11px;
  width: 142px;
  min-width: 118px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

:root[data-theme="dark"] .rdl-search-input {
  background: #13223E;
  border-color: #29406B;
  color: #F8FAFC;
}

.rdl-search-input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(184, 136, 59, 0.16);
}

:root[data-theme="dark"] .rdl-search-input:focus {
  background: #16284A;
}

.rdl-search-input::placeholder {
  color: #787165;
}

/* Grouped 7-Domain Report Catalog Deck — 20-Column 3-Shelf Single-Row Layout */
.rdl-tab-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px;
  padding: 8px 12px 9px;
  background: #F7F5EF;
  border-left: 1px solid #E6E1D6;
  border-right: 1px solid #E6E1D6;
  border-bottom: 1px solid #E6E1D6;
  overflow: visible;
}

:root[data-theme="dark"] .rdl-tab-bar {
  background: #0D1A33;
  border-color: #1E325C;
}

.rdl-tab-bar.is-collapsed {
  display: none !important;
}

.rdl-grouped-pods {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.rdl-grouped-pods.has-filtered-pod {
  display: flex;
  flex-wrap: wrap;
}

.rdl-grouped-pods:not(.has-filtered-pod) .rdl-group-pod[data-rdl-pod="Digest"] {
  grid-column: span 3;
}

.rdl-grouped-pods:not(.has-filtered-pod) .rdl-group-pod[data-rdl-pod="Statements"] {
  grid-column: span 8;
}

.rdl-grouped-pods:not(.has-filtered-pod) .rdl-group-pod[data-rdl-pod="General Ledger"] {
  grid-column: span 9;
}

.rdl-grouped-pods:not(.has-filtered-pod) .rdl-group-pod[data-rdl-pod="Registers"] {
  grid-column: span 13;
}

.rdl-grouped-pods:not(.has-filtered-pod) .rdl-group-pod[data-rdl-pod="Tax & Recon"] {
  grid-column: span 7;
}

.rdl-grouped-pods:not(.has-filtered-pod) .rdl-group-pod[data-rdl-pod="Counterparties"] {
  grid-column: span 13;
}

.rdl-grouped-pods:not(.has-filtered-pod) .rdl-group-pod[data-rdl-pod="Documents"] {
  grid-column: span 7;
}

.rdl-grouped-pods.has-filtered-pod .rdl-group-pod {
  flex: 1 1 220px;
}

.rdl-group-pod {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5.5px 8px 6.5px;
  border-radius: 7px;
  background: #FFFFFF;
  border: 1px solid #E6E1D6;
  min-width: 0;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

:root[data-theme="dark"] .rdl-group-pod {
  background: #0B1730;
  border-color: #1E325C;
}

.rdl-group-pod.is-active-pod {
  background: #FDFBF5;
  border-color: rgba(192, 137, 47, 0.58);
  box-shadow: inset 0 2px 0 var(--brass);
}

:root[data-theme="dark"] .rdl-group-pod.is-active-pod {
  background: #132546;
  border-color: rgba(217, 165, 74, 0.55);
  box-shadow: inset 0 2px 0 var(--brass);
}

.rdl-group-pod.rdl-pod-filtered {
  display: none !important;
}

.rdl-pod-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
  cursor: pointer;
  user-select: none;
}

.rdl-pod-title {
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #787165;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root[data-theme="dark"] .rdl-pod-title {
  color: #94A3B8;
}

.rdl-group-pod.is-active-pod .rdl-pod-title {
  color: #9A6B1F;
}

:root[data-theme="dark"] .rdl-group-pod.is-active-pod .rdl-pod-title {
  color: #F3C36F;
}

.rdl-pod-count {
  font-size: 9px;
  font-weight: 700;
  color: #787165;
  font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .rdl-pod-count {
  color: #94A3B8;
}

.rdl-pod-items {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.rdl-grouped-pods.has-filtered-pod .rdl-pod-items {
  display: flex;
  flex-wrap: wrap;
}

.rdl-tab.stmt-card {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 3.5px;
  padding: 5px 5.5px;
  background: #FAF8F4;
  border: 1px solid #DFDAD0;
  border-radius: 5px;
  color: #26231E;
  font-size: 10.2px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

:root[data-theme="dark"] .rdl-tab.stmt-card {
  background: #13223E;
  border-color: #29406B;
  color: #E2E8F0;
}

.rdl-tab.stmt-card:hover {
  background: #FBF6EB;
  border-color: var(--brass);
  color: #1F1C18;
}

:root[data-theme="dark"] .rdl-tab.stmt-card:hover {
  background: #1D3259;
  border-color: var(--brass);
  color: #FFFFFF;
}

.rdl-tab.stmt-card.active {
  background: linear-gradient(180deg, #C69034 0%, #B37E24 100%);
  color: #FFFFFF;
  border-color: #A67320;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(184, 136, 59, 0.28);
}

:root[data-theme="dark"] .rdl-tab.stmt-card.active {
  background: linear-gradient(180deg, #D9A54A 0%, #C0892F 100%);
  color: #1A1408;
  border-color: #E5B764;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.rdl-tab.stmt-card.rdl-tab-filtered {
  display: none !important;
}

.rdl-tid {
  font-family: "Archivo", sans-serif;
  font-size: 9.8px;
  font-weight: 800;
  color: #9A6B1F;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .rdl-tid {
  color: #D9A54A;
}

.rdl-tab.stmt-card.active .rdl-tid {
  color: #FFF4DC;
}

:root[data-theme="dark"] .rdl-tab.stmt-card.active .rdl-tid {
  color: #4A320A;
}

.rdl-ttitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rdl-tcat {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  line-height: 1.1;
}

.rdl-tb-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.rdl-tb-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.rdl-tb-right > * {
  flex-shrink: 0;
  white-space: nowrap;
}

.rdl-tb-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #FAF8F4;
  border: 1px solid #DFDAD0;
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}

:root[data-theme="dark"] .rdl-tb-nav-group {
  background: #13223E;
  border-color: #29406B;
}

.rdl-tb-icon-btn {
  padding: 3px 7px !important;
  border: 0 !important;
  background: transparent !important;
}

.rdl-tb-icon-btn:hover {
  background: var(--brass-tint, rgba(217, 165, 74, 0.14)) !important;
  color: #1F1C18 !important;
}

.rdl-menu-crumb {
  font-size: 13px;
  color: #6E675C;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex: 1 1 0%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.rdl-menu-crumb b {
  font-family: "Archivo", sans-serif;
  font-stretch: 108%;
  color: #1F1C18;
  font-weight: 800;
  flex-shrink: 0;
  white-space: nowrap;
}

:root[data-theme="dark"] .rdl-menu-crumb b {
  color: #F8FAFC;
}

.rdl-crumb-ar {
  font-size: 11.5px;
  color: #9A6B1F;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="dark"] .rdl-crumb-ar {
  color: #F3C36F;
}

.rdl-tb-btn {
  appearance: none;
  background: #FAF8F4;
  border: 1px solid #DFDAD0;
  color: #57524A;
  border-radius: 6px;
  padding: 4.5px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

:root[data-theme="dark"] .rdl-tb-btn {
  background: #13223E;
  border-color: #29406B;
  color: #E2E8F0;
}

.rdl-tb-btn:hover {
  background: #FBF6EB;
  border-color: var(--brass);
  color: #1F1C18;
}

:root[data-theme="dark"] .rdl-tb-btn:hover {
  background: #1D3259;
  border-color: var(--brass);
  color: #FFFFFF;
}

.rdl-tb-btn.active {
  background: #FAF3E3;
  border-color: rgba(192, 137, 47, 0.55);
  color: #6E4B12;
  font-weight: 700;
}

:root[data-theme="dark"] .rdl-tb-btn.active {
  background: rgba(217, 165, 74, 0.16);
  border-color: rgba(217, 165, 74, 0.65);
  color: #F3C36F;
}

.rdl-tb-caret {
  color: #9A6B1F;
  font-size: 11.5px;
  line-height: 1;
}

:root[data-theme="dark"] .rdl-tb-caret {
  color: #F3C36F;
}

.rdl-tb-page {
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1F1C18;
  padding: 0 5px;
  font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .rdl-tb-page {
  color: #F8FAFC;
}

.rdl-tb-page b {
  color: var(--brass);
}

.rdl-tb-divider {
  width: 1px;
  height: 16px;
  background: #E6E1D6;
  margin: 0 2px;
}

/* RDL Parameter Deck — Docked Seamlessly Under Report Catalog */
#rdlParamContainer {
  position: relative;
  z-index: 45;
  overflow: visible;
  margin: 0 16px;
}

.rdl-param-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 9px 14px;
  background: #FAF8F4;
  border: 1px solid #E6E1D6;
  border-top: 0;
  border-left: 3.5px solid var(--brass, #D9A54A);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 8px rgba(11, 23, 48, 0.04);
  flex-wrap: wrap;
  position: relative;
  overflow: visible;
}

:root[data-theme="dark"] .rdl-param-bar {
  background: #0F1D38;
  border-color: #1E325C;
  border-left-color: var(--brass);
}

/* Interactive Sheet Section Switcher + Interactive Table Grouping & Pagination */
.rdl-sheet-sec-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
  padding: 6px 10px;
  background: #FAF8F4;
  border: 1px solid #E6E1D6;
  border-left: 3.5px solid #B8883B;
  border-radius: 6px;
}
.rdl-sheet-sec-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9A6B1F;
  flex-shrink: 0;
}
.rdl-sheet-sec-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.rdl-sheet-sec-pill {
  appearance: none;
  border: 1px solid #DFDAD0;
  background: #FFFFFF;
  color: #57524A;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s ease;
}
.rdl-sheet-sec-pill:hover {
  border-color: #B8883B;
  color: #1F1C18;
  background: #FBF6EB;
}
.rdl-sheet-sec-pill.active {
  background: linear-gradient(180deg, #C69034 0%, #B37E24 100%);
  border-color: #A67320;
  color: #FFFFFF;
  font-weight: 700;
}
.rdl-sec-pill-cnt {
  font-size: 9px;
  font-weight: 800;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(120, 113, 101, 0.16);
}
.rdl-sec-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rdl-sec-filtered-out,
.rdl-sec-collapsed-body {
  display: none !important;
}

.rdl-tbl-ctrl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
  padding: 6px 10px;
  background: #FAF8F4;
  border: 1px solid #E6E1D6;
  border-radius: 6px;
}
.rdl-tbl-ctrl-left,
.rdl-tbl-ctrl-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.rdl-tbl-ctrl-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #787165;
  margin-right: 2px;
}
.rdl-tbl-grp-pill,
.rdl-tbl-expand-all-btn {
  appearance: none;
  border: 1px solid #DFDAD0;
  background: #FFFFFF;
  color: #57524A;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.rdl-tbl-grp-pill:hover,
.rdl-tbl-expand-all-btn:hover {
  border-color: #B8883B;
  color: #1F1C18;
  background: #FBF6EB;
}
.rdl-tbl-grp-pill.active {
  background: linear-gradient(180deg, #C69034 0%, #B37E24 100%);
  border-color: #A67320;
  color: #FFFFFF;
  font-weight: 700;
}
.rdl-tbl-search-inp {
  background: #FFFFFF;
  border: 1px solid #DFDAD0;
  color: #1F1C18;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  min-width: 145px;
}
.rdl-tbl-search-inp:focus {
  outline: none;
  border-color: #B8883B;
}
.rdl-tbl-pagesize {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #DFDAD0;
  border-radius: 5px;
  overflow: hidden;
}
.rdl-tbl-sz-btn {
  appearance: none;
  border: 0;
  border-right: 1px solid #E6E1D6;
  background: transparent;
  color: #57524A;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 6px;
  cursor: pointer;
}
.rdl-tbl-sz-btn:last-child {
  border-right: 0;
}
.rdl-tbl-sz-btn.active {
  background: linear-gradient(180deg, #C69034 0%, #B37E24 100%);
  color: #FFFFFF;
  font-weight: 700;
}
.rdl-tbl-pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rdl-tbl-pg-btn {
  appearance: none;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #0F172A;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.rdl-tbl-pg-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.rdl-tbl-pg-info {
  font-size: 10.5px;
  font-weight: 600;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
tr.rdl-interactive-group-row {
  background: #F8FAFC !important;
  cursor: pointer;
  border-top: 1.5px solid #CBD5E1;
  border-bottom: 1px solid #CBD5E1;
  transition: background 0.12s ease;
}
tr.rdl-interactive-group-row:hover {
  background: #FEF9EC !important;
}
tr.rdl-interactive-group-row.is-expanded {
  background: #FEF3C7 !important;
}
.rdl-igrp-title-cell {
  font-weight: 700;
  color: #0F172A;
}
.rdl-igrp-caret {
  display: inline-block;
  width: 14px;
  color: #B45309;
  font-weight: 800;
}
.rdl-igrp-label {
  font-weight: 700;
  color: #0F172A;
  margin-right: 6px;
}
.rdl-igrp-count {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #E2E8F0;
  color: #334155;
  margin-right: 6px;
}
.rdl-igrp-hint {
  font-size: 9.5px;
  font-weight: 500;
  color: #64748B;
}
@media screen {
  tr.rdl-row-search-hidden,
  tr.rdl-row-paged-hidden,
  tr.rdl-row-grouped-hidden {
    display: none !important;
  }
}

.rdl-param-bar.collapsed {
  display: none !important;
}

.rdl-param-fields {
  display: flex;
  align-items: flex-end;
  gap: 10px 12px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.rdl-p-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  max-width: 280px;
  position: relative;
}

.rdl-p-item.rdl-p-date,
.rdl-p-item.rdl-p-seg {
  min-width: 142px;
  max-width: 190px;
}

.rdl-p-item.rdl-p-wide {
  min-width: 340px;
  max-width: 500px;
  flex: 1 1 380px;
}

.rdl-p-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rdl-p-lbl {
  font-family: "Archivo", "Instrument Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #475569);
}

.rdl-p-cnt {
  font-size: 9.8px;
  font-weight: 700;
  color: var(--brass, #B45309);
  background: var(--brass-tint, rgba(217, 165, 74, 0.14));
  border: 1px solid var(--brass-border, rgba(217, 165, 74, 0.35));
  padding: 0.5px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.rdl-date-input {
  height: 35px;
  padding: 4px 10px;
  font-size: 12.2px;
  font-weight: 600;
  color: var(--ink, #0F172A);
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, #CBD5E1);
  border-radius: 6px;
  font-family: inherit;
  min-width: 0;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.rdl-date-input:focus {
  outline: none;
  border-color: var(--brass, #D9A54A);
  box-shadow: 0 0 0 3px rgba(217, 165, 74, 0.18);
}

.rdl-combo-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.rdl-combo {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.rdl-combo-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #64748B);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.14s ease;
}

.rdl-combo.open .rdl-combo-ico,
.rdl-p-item.is-filtered .rdl-combo-ico {
  color: var(--brass, #D9A54A);
}

.rdl-combo-input {
  width: 100%;
  height: 35px;
  padding: 4px 52px 4px 30px !important;
  font-size: 12.4px;
  font-weight: 600;
  color: var(--ink, #0F172A);
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, #CBD5E1);
  border-radius: 6px;
  font-family: inherit;
  min-width: 0;
  text-overflow: ellipsis;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.rdl-p-item.is-filtered .rdl-combo-input {
  border-color: var(--brass-border, rgba(217, 165, 74, 0.55));
  background: color-mix(in srgb, var(--brass, #D9A54A) 6%, var(--surface, #FFFFFF));
}

.rdl-combo.open .rdl-combo-input,
.rdl-combo-input:focus {
  outline: none;
  border-color: var(--brass, #D9A54A);
  background: var(--surface, #FFFFFF);
  box-shadow: 0 0 0 3px rgba(217, 165, 74, 0.20);
}

.rdl-combo-input::placeholder {
  color: var(--muted, #64748B);
  font-weight: 500;
}

.rdl-combo-clear {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted, #64748B);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.rdl-combo.open .rdl-combo-clear,
.rdl-p-item.is-filtered .rdl-combo-clear,
.rdl-combo:hover .rdl-combo-clear {
  opacity: 0.85;
  pointer-events: auto;
}

.rdl-combo-clear:hover {
  opacity: 1;
  background: var(--brass-tint, rgba(217, 165, 74, 0.18));
  color: var(--ink, #0B1730);
}

.rdl-combo-caret {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted, #64748B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.16s ease, color 0.14s ease, background 0.14s ease;
}

.rdl-combo-caret:hover {
  color: var(--brass, #D9A54A);
  background: var(--brass-tint, rgba(217, 165, 74, 0.14));
}

.rdl-combo.open .rdl-combo-caret {
  color: var(--brass, #D9A54A);
  transform: translateY(-50%) rotate(180deg);
}

/* Searchable Combobox Popover — strictly BELOW the input (never covers the text box) */
.rdl-combo-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max(100%, 340px);
  max-width: min(560px, calc(100vw - 32px));
  z-index: 240;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--brass, #D9A54A);
  border-top: 2.5px solid var(--brass, #D9A54A);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(11, 23, 48, 0.24), 0 4px 12px rgba(11, 23, 48, 0.10);
  overflow: hidden;
}

:root[data-theme="dark"] .rdl-combo-menu {
  background: #0F1D36;
  border-color: rgba(217, 165, 74, 0.65);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65);
}

.rdl-combo-status {
  padding: 6.5px 11px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.6px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--brass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

:root[data-theme="dark"] .rdl-combo-status {
  background: #0B1730;
  color: rgba(244, 242, 238, 0.82);
}

.rdl-combo-status b {
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.rdl-combo-list {
  max-height: 290px;
  overflow-y: auto;
  padding: 4px;
  overscroll-behavior: contain;
}

.rdl-combo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6.5px 9px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--ink, #0F172A);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
}

.rdl-combo-item:hover,
.rdl-combo-item.active {
  background: var(--brass-tint, rgba(217, 165, 74, 0.15));
}

.rdl-combo-item.active {
  box-shadow: inset 2.5px 0 0 var(--brass, #D9A54A);
}

.rdl-combo-item.is-selected {
  background: color-mix(in srgb, var(--brass, #D9A54A) 10%, transparent);
  font-weight: 700;
}

.rdl-opt-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
}

.rdl-opt-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.6px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: var(--brass-tint);
  color: var(--brass);
  border: 1px solid var(--brass-border);
  white-space: nowrap;
  flex-shrink: 0;
}

:root[data-theme="dark"] .rdl-opt-code {
  background: #0B1730;
  color: #D9A54A;
  border-color: transparent;
}

.rdl-opt-main {
  font-weight: 600;
  color: var(--ink, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rdl-opt-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.rdl-opt-meta {
  font-size: 11px;
  color: var(--muted, #64748B);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rdl-opt-check {
  color: var(--brass, #B45309);
  font-weight: 800;
  font-size: 12px;
}

.rdl-combo-mark {
  background: rgba(217, 165, 74, 0.34);
  color: inherit;
  font-weight: 800;
  border-radius: 2px;
  padding: 0 1.5px;
}

.rdl-doc-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line, #CBD5E1);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface, #FFFFFF);
  height: 35px;
  flex-shrink: 0;
}

.rdl-step-btn {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--line, #E2E8F0);
  background: transparent;
  color: var(--ink, #0B1730);
  width: 28px;
  height: 100%;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.rdl-step-btn:last-child {
  border-right: 0;
}

.rdl-step-btn:hover {
  background: var(--brass-tint, rgba(217, 165, 74, 0.16));
  color: var(--brass, #B45309);
}

.rdl-seg {
  display: inline-flex;
  border: 1px solid var(--line, #CBD5E1);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface, #FFFFFF);
  height: 35px;
}

.rdl-seg-btn {
  appearance: none;
  border: none;
  border-right: 1px solid var(--line, #E2E8F0);
  background: transparent;
  color: var(--muted, #475569);
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 11px;
  cursor: pointer;
}

.rdl-seg-btn:last-child {
  border-right: none;
}

.rdl-seg-btn.active {
  background: linear-gradient(180deg, #C69034 0%, #B37E24 100%);
  color: #FFFFFF;
  font-weight: 700;
}

:root[data-theme="dark"] .rdl-seg-btn.active {
  background: linear-gradient(180deg, #D9A54A 0%, #C0892F 100%);
  color: #1A1408;
}

.rdl-param-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.rdl-view-btn {
  appearance: none;
  height: 33px;
  padding: 0 15px;
  background: linear-gradient(180deg, #C69034 0%, #B37E24 100%);
  color: #FFFFFF;
  border: 1px solid #A67320;
  border-radius: 6px;
  font-size: 11.8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(184, 136, 59, 0.28);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

:root[data-theme="dark"] .rdl-view-btn {
  background: linear-gradient(180deg, #D9A54A 0%, #C0892F 100%);
  color: #1A1408;
  border-color: #E5B764;
}

.rdl-view-btn:hover {
  background: linear-gradient(180deg, #B37E24 0%, #9E6E1D 100%);
  border-color: #936519;
  color: #FFFFFF;
}

:root[data-theme="dark"] .rdl-view-btn:hover {
  background: linear-gradient(180deg, #E5B764 0%, #D9A54A 100%);
  border-color: #F3C36F;
  color: #1A1408;
}

.rdl-reset-btn {
  appearance: none;
  height: 33px;
  padding: 0 12px;
  background: #FFFFFF;
  color: #57524A;
  border: 1px solid #DFDAD0;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.rdl-reset-btn:hover {
  background: #FBF6EB;
  color: #1F1C18;
  border-color: var(--brass);
}

.rdl-param-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.rdl-param-scope-badge {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--brass-tint);
  color: var(--brass);
  border: 1px solid var(--brass-border);
}

:root[data-theme="dark"] .rdl-param-scope-badge {
  background: #0B1730;
  color: #D9A54A;
  border-color: rgba(217, 165, 74, 0.4);
}

.rdl-param-search-tip {
  font-size: 11px;
  color: var(--muted, #64748B);
}

/* Paginated Canvas & White Paper Sheet */
.rdl-canvas {
  padding: 18px 20px 28px;
  background: var(--bg);
  overflow-x: auto;
  min-width: 0;
}

:root[data-theme="dark"] .rdl-canvas {
  background: #081124;
}

.rdl-sheet {
  background: #FFFFFF !important;
  color: #0F172A !important;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 26px 24px;
  border: 1px solid #94A3B8;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
  font-family: "Segoe UI", "Instrument Sans", sans-serif;
  overflow-x: auto;
}

/* RDL Title Block (rdl_common.header_xml parity) */
.rdl-title-block {
  border-bottom: 2px solid #1E293B;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.rdl-title-text {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}

.rdl-subtitle-text {
  font-size: 11.5px;
  color: #475569;
  margin-top: 2px;
}

.rdl-note-text {
  font-size: 10.5px;
  font-style: italic;
  color: #64748B;
  margin-top: 3px;
}

/* KPI Strip inside RDL-01 / 05 / 13 / 18 */
.rdl-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.rdl-kpi-box {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-top: 2.5px solid #1E293B;
  padding: 7px 10px;
}

.rdl-kpi-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
}

.rdl-kpi-val {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 1px;
}

.rdl-kpi-sub {
  font-size: 10px;
  color: #64748B;
}

.rdl-sec-title {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 5px;
}

/* RDL Tablix (rdl_common.py COLOR_HEADER_BG = #1E293B, COLOR_ALT_ROW = #F8FAFC) */
table.rdl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.2px;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

table.rdl-table thead th {
  background: #F4F1EA !important;
  color: #0B1730 !important;
  font-weight: 700;
  font-size: 10.5px;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid #D6CFC2;
  border-bottom: 2px solid #C69034;
  white-space: nowrap;
  user-select: none;
}

table.rdl-table thead th.num,
table.rdl-table td.num {
  text-align: right;
  white-space: nowrap;
}

table.rdl-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid #E2E8F0;
  border-left: 1px solid #F1F5F9;
  border-right: 1px solid #F1F5F9;
  color: #0F172A !important;
  background: #FFFFFF;
}

table.rdl-table tbody tr:nth-child(even) td {
  background: #F8FAFC;
}

table.rdl-table tbody tr.rdl-group-row td {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  font-weight: 700;
  border-top: 1px solid #94A3B8;
  border-bottom: 1px solid #94A3B8;
  padding: 6px 8px;
}

table.rdl-table tbody tr.rdl-subtotal-row td {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  font-weight: 700;
  border-top: 1px solid #64748B;
  border-bottom: 2px solid #475569;
}

/* Never sticky tfoot (PWA.md §3.8) */
table.rdl-table tfoot,
table.rdl-table tfoot tr,
table.rdl-table tfoot td {
  position: static !important;
}

table.rdl-table tfoot tr.rdl-total-row td {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  font-weight: 700;
  font-size: 11.4px;
  padding: 6.5px 8px;
  border-top: 1.5px solid #0F172A;
  border-bottom: 3px double #0F172A;
}

table.rdl-table td.bold {
  font-weight: 700;
}

table.rdl-table td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.6px;
}

/* Document Headers (RDL-20 Sales Invoice, RDL-21 Delivery Ticket, RDL-22 Receipt Voucher) */
.rdl-doc-top {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
  align-items: start;
}

.rdl-co-block {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-left: 3.5px solid #1E293B;
  padding: 8px 12px;
}

.rdl-co-legal {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F172A;
}

.rdl-co-ar {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin: 1px 0 3px;
}

.rdl-co-meta {
  font-size: 10.5px;
  color: #475569;
  line-height: 1.35;
}

table.rdl-meta-box {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

table.rdl-meta-box td {
  padding: 4px 8px;
  border: 1px solid #CBD5E1;
}

table.rdl-meta-box td.rdl-meta-lbl {
  background: #F1F5F9;
  color: #475569;
  font-weight: 600;
  width: 44%;
}

table.rdl-meta-box td.rdl-meta-val {
  background: #FFFFFF;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}

table.rdl-meta-box td.rdl-meta-val.bold {
  font-weight: 700;
}

.rdl-party-box {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.rdl-party-hdr {
  font-size: 9.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  margin-bottom: 2px;
}

.rdl-party-name {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
}

.rdl-party-sub,
.rdl-party-meta {
  font-size: 10.8px;
  color: #475569;
  margin-top: 1px;
}

.rdl-sig-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 26px 0 14px;
  padding-top: 12px;
}

.rdl-sig-line {
  border-top: 1px solid #475569;
  padding-top: 5px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}

.rdl-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #CBD5E1;
  padding-top: 6px;
  margin-top: 12px;
  font-size: 10px;
  color: #64748B;
}

@media (max-width: 860px) {
  .rdl-suite-hdr {
    margin: 8px 8px 0;
    padding: 8px 10px;
    flex-wrap: wrap;
  }
  .rdl-tb-left,
  .rdl-menu-crumb,
  .rdl-tb-right {
    flex-wrap: wrap;
  }
  .rdl-tb-left {
    flex: 1 1 100%;
  }
  .rdl-tab-bar {
    margin: 0 8px;
    padding: 8px 10px;
  }
  #rdlParamContainer {
    margin: 0 8px;
  }
  .rdl-grouped-pods,
  .rdl-grouped-pods:not(.has-filtered-pod) {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .rdl-grouped-pods:not(.has-filtered-pod) .rdl-group-pod[data-rdl-pod] {
    grid-column: span 1;
  }
  .rdl-pod-items {
    display: flex;
    flex-wrap: wrap;
  }
  .rdl-tab.stmt-card {
    flex: 1 1 auto;
  }
  .rdl-search-input {
    width: 100%;
    margin-left: 0;
  }
  .rdl-param-bar {
    padding: 8px 10px;
  }
  .rdl-p-item {
    min-width: calc(50% - 6px);
    max-width: 100%;
    flex: 1 1 calc(50% - 6px);
  }
  .rdl-p-item.rdl-p-wide {
    min-width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }
  .rdl-combo-menu {
    width: 100%;
    max-width: calc(100vw - 24px);
  }
  .rdl-param-search-tip {
    display: none;
  }
  .rdl-canvas {
    padding: 8px 6px 20px;
  }
  .rdl-sheet {
    padding: 12px 10px 16px;
  }
  .rdl-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rdl-doc-top,
  .rdl-sig-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media print {
  .rdl-suite-hdr,
  .rdl-tab-bar,
  .rdl-menubar,
  .rdl-toolbar,
  .rdl-param-bar,
  #rdlParamContainer,
  .rdl-sheet-sec-bar,
  .rdl-tbl-ctrl-bar,
  tr.rdl-interactive-group-row {
    display: none !important;
  }
  .rdl-sec-filtered-out,
  .rdl-sec-collapsed-body {
    display: block !important;
  }
  table.rdl-sec-filtered-out,
  table.rdl-sec-collapsed-body {
    display: table !important;
  }
  .rdl-viewer-shell,
  .rdl-canvas {
    background: #FFFFFF !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .rdl-sheet {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
}

/* ============================================================================
   v6.8 — Intuitive Data Entry: Section Ordering, Dynamic Column Gating,
   Reporting Date & Policy-Locked Fields with Admin Privilege Unlock Process
   ============================================================================ */
.pa-form-sec-hdr {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  margin-top: 4px;
  background: linear-gradient(90deg, rgba(184, 136, 59, 0.12) 0%, rgba(184, 136, 59, 0.02) 100%);
  border-left: 3px solid var(--brass);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 5px 5px 0;
  font-family: "Archivo", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.pa-form-sec-hdr:first-child {
  margin-top: 0;
}
.pa-form-sec-hdr small {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

/* Policy Lock & Admin Privilege Bar (#paAdminLockBar — retired, hidden) */
.pa-admin-lock-bar,
#paAdminLockBar {
  display: none !important;
}
.pa-admin-lock-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.pa-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--brass-tint);
  color: var(--brass);
  border: 1px solid var(--brass-border);
}
.pa-admin-badge.override {
  background: rgba(22, 163, 74, 0.14);
  color: var(--good);
  border-color: rgba(22, 163, 74, 0.4);
}
.pa-admin-lock-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pa-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.pa-admin-btn:hover {
  background: var(--brass);
  color: #0B1730;
}
.pa-admin-btn.secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--muted);
}
.pa-admin-btn.secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--surface-2);
}

/* Admin Privilege Unlock Process Box (#paAdminUnlockBox) */
.pa-admin-unlock-box {
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--brass);
  background: linear-gradient(180deg, var(--brass-tint) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-sm);
}
.pa-admin-unlock-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pa-admin-unlock-hdr strong {
  font-family: "Archivo", sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pa-admin-unlock-desc {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 9px;
  line-height: 1.4;
}
.pa-admin-unlock-desc b {
  color: var(--ink);
}
.pa-admin-unlock-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pa-admin-unlock-controls input {
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  min-width: 190px;
}

/* Field-Level Lock Pills & Strict Column-Aligned Input States */
.form-field:not(.check-field) > label,
.form-field > .field-lbl-with-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: nowrap;
  min-height: 20px;
  height: 20px;
  max-height: 20px;
  line-height: 1.2;
  min-width: 0;
  margin: 0;
}
.form-field > label .pa-fld-lbl,
.form-field > .field-lbl-with-btn > label {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-field input:not([type="checkbox"]):not([type="radio"]):not(.co-multi-search):not(.pa-select-filter),
.form-field select {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 6px 11px;
  box-sizing: border-box;
  line-height: 1.25;
}
.form-field > .pa-suggest-wrap,
.form-field > .pa-select-wrap {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
}
@media (min-width: 769px) {
  .form-field.check-field {
    padding-top: 25px;
    min-height: 61px;
    align-items: center;
    box-sizing: border-box;
  }
}
@media (max-width: 768px) {
  .form-field input:not([type="checkbox"]):not([type="radio"]):not(.co-multi-search):not(.pa-select-filter),
  .form-field select {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 6px 10px;
  }
  .form-field > .pa-suggest-wrap,
  .form-field > .pa-select-wrap {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
  }
}
.pa-lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: "Archivo", sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.3;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.pa-lock-pill.locked {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .pa-lock-pill.locked {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-color: var(--line-strong);
}
.pa-lock-pill.locked:hover {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
}
.pa-lock-pill.unlocked {
  background: rgba(22, 163, 74, 0.14);
  color: var(--good);
  border-color: rgba(22, 163, 74, 0.42);
}
.pa-lock-pill.unlocked:hover {
  background: rgba(200, 51, 59, 0.14);
  color: var(--crit);
  border-color: rgba(200, 51, 59, 0.4);
}
.pa-lock-pill.auto-open {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line-strong);
  cursor: default;
}

.form-field.is-policy-locked input,
.form-field.is-policy-locked select {
  background: var(--surface-2) !important;
  border-style: dashed !important;
  border-color: var(--line-strong) !important;
  color: var(--muted) !important;
  cursor: not-allowed;
}
:root[data-theme="dark"] .form-field.is-policy-locked input,
:root[data-theme="dark"] .form-field.is-policy-locked select {
  border-color: var(--line-strong) !important;
}
.form-field.is-policy-locked .pa-suggest-caret {
  opacity: 0.4;
  pointer-events: none;
}
.form-field.is-admin-unlocked input,
.form-field.is-admin-unlocked select {
  border-color: rgba(22, 163, 74, 0.65) !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
}

/* Neglected Field & Neglected Section Red Highlights (shown on failed post attempt or live rejected Ton quantity) */
.form-field.field-neglected > label .pa-fld-lbl,
.form-field.field-neglected > .field-lbl-with-btn > label,
.form-field.field-live-invalid > label,
.form-field.field-live-invalid > label .pa-fld-lbl,
.form-field.field-live-invalid > .field-lbl-with-btn > label {
  color: var(--crit) !important;
  font-weight: 700;
}
.form-field.field-neglected input:not([type="checkbox"]):not([type="radio"]):not(.pa-select-filter),
.form-field.field-neglected select,
.form-field.field-live-invalid input:not([type="checkbox"]):not([type="radio"]):not(.pa-select-filter),
.form-field.field-live-invalid select {
  border-style: solid !important;
  border-color: var(--crit) !important;
  background: rgba(200, 51, 59, 0.05) !important;
  box-shadow: 0 0 0 2.5px rgba(200, 51, 59, 0.16) !important;
}
.form-field.field-neglected > .hint:not(.field-err-msg) {
  display: none;
}
.form-field.field-neglected > .field-err-msg,
.form-field.field-live-invalid > .hint.crit {
  color: var(--crit) !important;
  font-weight: 700;
}
.pa-form-sec-hdr.sec-neglected {
  border-left-color: var(--crit);
  border-top-color: rgba(200, 51, 59, 0.32);
  border-bottom-color: rgba(200, 51, 59, 0.32);
  background: linear-gradient(90deg, rgba(200, 51, 59, 0.14) 0%, rgba(200, 51, 59, 0.02) 100%);
  color: var(--crit);
}
.pa-form-sec-hdr .sec-err-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--crit);
  color: #FFFFFF;
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-errors .err-jump-item {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-errors .err-jump-item:hover {
  opacity: 0.85;
}

/* ============================================================================
   v7.5 — Scalable Multi-Industry & Multi-Company Selector System
   (10 Industries × 10–20 Companies = 100–200+ Companies · Fixed Topbar & RLS Box)
   ============================================================================ */
.entity-bar.entity-picker-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  width: 242px;
  min-width: 242px;
  max-width: 242px;
  flex-shrink: 0;
}
@media (max-width: 1350px) and (min-width: 861px) {
  .entity-bar.entity-picker-box {
    width: 206px;
    min-width: 206px;
    max-width: 206px;
  }
}
@media (max-width: 860px) {
  .entity-bar.entity-picker-box {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}
.entity-picker-trigger {
  width: 100%;
  height: 31px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.entity-picker-trigger:hover,
.entity-picker-box.open .entity-picker-trigger {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-tint);
}
.ep-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.ep-seg-ind {
  flex: 0 1 44%;
}
.ep-seg-co {
  flex: 1 1 56%;
}
.ep-seg-kicker {
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  flex-shrink: 0;
}
.ep-seg strong {
  font-size: 11.2px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-seg-div {
  width: 1px;
  height: 15px;
  background: var(--line-strong);
  flex-shrink: 0;
}
.ep-caret {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.entity-picker-box.open .ep-caret {
  transform: rotate(180deg);
  color: var(--brass);
}
.entity-picker-popover {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 520px;
  max-width: calc(100vw - 24px);
  z-index: 140;
  background: var(--surface);
  border: 1.5px solid var(--brass);
  border-radius: 9px;
  box-shadow: 0 14px 34px rgba(11, 23, 48, 0.28);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.entity-picker-popover[hidden] {
  display: none !important;
}
.entity-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.entity-picker-search {
  flex: 1;
  min-width: 150px;
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  outline: none;
}
.entity-picker-search:focus {
  border-color: var(--brass);
}
.entity-picker-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.entity-picker-act-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 10.8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.entity-picker-act-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.entity-picker-demo-btn.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
  font-weight: 700;
}
.entity-picker-body {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  gap: 8px;
  min-height: 190px;
  max-height: 268px;
}
@media (max-width: 640px) {
  .entity-picker-popover {
    width: calc(100vw - 24px);
  }
  .entity-picker-body {
    grid-template-columns: 132px minmax(0, 1fr);
  }
}
.entity-picker-ind-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  padding-right: 4px;
  border-right: 1px solid var(--line);
}
.ep-ind-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5.5px 7px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 11.2px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ep-ind-tab:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.ep-ind-tab.active {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--ink);
  font-weight: 700;
}
.ep-ind-tab-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-ind-tab-cnt {
  font-style: normal;
  font-family: "Archivo", sans-serif;
  font-size: 9.8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  flex-shrink: 0;
}
.ep-ind-tab.active .ep-ind-tab-cnt {
  background: var(--brass);
  color: #0B1730;
}
.entity-picker-co-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.entity-picker-co-head {
  font-family: "Archivo", sans-serif;
  font-size: 9.8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 4px 5px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.entity-picker-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  max-height: 235px;
  padding-right: 2px;
}
.entity-picker-list .entity-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 11.8px;
  font-weight: 600;
}
.entity-picker-list .entity-btn[hidden] {
  display: none !important;
}
.entity-picker-list .entity-btn:hover {
  border-color: var(--brass);
  background: var(--surface-2);
}
.entity-picker-list .entity-btn.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
  font-weight: 700;
}
.entity-picker-list .entity-btn::after {
  content: attr(data-ind-tag);
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
  flex-shrink: 0;
}
.entity-picker-list .entity-btn.active::after {
  background: rgba(11, 23, 48, 0.16);
  color: #0B1730;
  border-color: rgba(11, 23, 48, 0.22);
}
.entity-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
}

/* Scalable Multi-Select Industry & Company Selector (10 Industries × 200+ Companies RLS) */
.co-multi-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.co-multi-trigger {
  width: 100%;
  min-height: 36px;
  max-height: 36px;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  font-size: 12.2px;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.co-multi-trigger:hover:not(:disabled),
.co-multi-select.open .co-multi-trigger {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-tint);
}
.co-multi-trigger-summary {
  display: block;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-multi-trigger-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.co-multi-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brass-tint);
  color: var(--ink);
  border: 1px solid var(--brass-border);
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.co-multi-caret {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.co-multi-select.open .co-multi-caret {
  transform: rotate(180deg);
  color: var(--brass);
}
/* Single-row horizontal scroll strip — never grows vertically even with 200 companies */
.co-multi-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  max-height: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.co-multi-chips::-webkit-scrollbar {
  height: 3px;
}
.co-multi-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--ink);
  font-size: 10.8px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.co-multi-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 11.5px;
  line-height: 1;
  border-radius: 3px;
}
.co-multi-chip button:hover {
  color: var(--crit);
}
.co-multi-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 540px;
  max-width: calc(100vw - 32px);
  z-index: 95;
  background: var(--surface);
  border: 1.5px solid var(--brass);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(11, 23, 48, 0.24);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.co-multi-popover[hidden] {
  display: none !important;
}
.co-multi-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.co-multi-search {
  flex: 1;
  min-width: 130px;
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  outline: none;
}
.co-multi-search:focus {
  border-color: var(--brass);
}
.co-multi-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.co-multi-act-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.co-multi-act-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.co-multi-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 7px;
  max-height: 246px;
  min-height: 175px;
}
@media (max-width: 640px) {
  .co-multi-popover {
    width: 100%;
  }
  .co-multi-body {
    grid-template-columns: 126px minmax(0, 1fr);
  }
}
.co-multi-ind-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  padding-right: 4px;
  border-right: 1px solid var(--line);
}
.co-multi-ind-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 6px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.co-multi-ind-tab:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.co-multi-ind-tab.active {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--ink);
  font-weight: 700;
}
.co-multi-ind-tab-lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-multi-ind-tab-cnt {
  font-style: normal;
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  flex-shrink: 0;
}
.co-multi-ind-tab.active .co-multi-ind-tab-cnt {
  background: var(--brass);
  color: #0B1730;
}
.co-multi-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 2px;
}
.co-multi-ind-hdr {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 4px;
  margin-top: 3px;
}
.co-multi-ind-hdr:first-child {
  margin-top: 0;
}
.co-multi-ind-hdr[hidden] {
  display: none !important;
}
.co-multi-ind-hdr-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.co-multi-ind-code {
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--brass-tint);
  color: var(--brass);
  border: 1px solid var(--brass-border);
}
.co-multi-ind-hdr-left b {
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-multi-ind-hdr-left small {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.co-multi-ind-toggle {
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--brass-border);
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.co-multi-ind-toggle:hover {
  background: var(--brass);
  color: #0B1730;
}
.co-multi-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5.5px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--bg);
  cursor: pointer;
  font-size: 12px;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.co-multi-opt[hidden] {
  display: none !important;
}
.co-multi-opt:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.co-multi-opt.is-checked {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  font-weight: 600;
}
.co-multi-opt-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.co-multi-opt-body b {
  font-size: 11.8px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-multi-opt-body small {
  font-size: 10px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-multi-opt input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--brass);
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  cursor: pointer;
}
.co-multi-opt-tag {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
  flex-shrink: 0;
}
.co-multi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
}
.rls-co-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ============================================================================
   v7.0 — Unified Rev 10 Custom Searchable Combobox & Select Popover System
   (Product/Grade metadata badges, zero native <select> popups across forms,
    Power BI Studio slicers, Team Auth, and Admin Unlock controls)
   ============================================================================ */
.pa-select-wrap > select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding-right: 28px !important;
  cursor: pointer;
  text-overflow: ellipsis;
}
.pa-select-wrap.has-value > select:not(:disabled) {
  padding-right: 48px !important;
}
.form-field.is-policy-locked .pa-select-wrap.has-value > select {
  padding-right: 28px !important;
}
.pa-suggest-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
  max-width: 66%;
}
.pa-suggest-right .pa-suggest-meta {
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 768px) {
  .pa-suggest-clear {
    width: 24px;
    height: 24px;
    right: 27px;
  }
  .pa-suggest-wrap.has-value > input:not(:disabled):not([readonly]),
  .pa-select-wrap.has-value > select:not(:disabled) {
    padding-right: 52px !important;
  }
  .form-field.is-policy-locked .pa-suggest-wrap.has-value > input,
  .form-field.is-policy-locked .pa-select-wrap.has-value > select {
    padding-right: 28px !important;
  }
}
.pa-select-wrap.open > select {
  border-color: var(--brass) !important;
  box-shadow: 0 0 0 2px var(--brass-tint);
}
.pa-suggest-item {
  gap: 8px;
}
.pa-suggest-label {
  flex: 1 1 auto;
  min-width: 72px;
}
.pa-suggest-meta {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 1;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.pa-suggest-item:hover .pa-suggest-meta,
.pa-suggest-item.active .pa-suggest-meta {
  border-color: var(--brass-border);
  color: var(--ink);
}
.pa-suggest-item.is-selected {
  font-weight: 700;
  color: var(--brass);
  background: rgba(184, 136, 59, 0.08);
}
.pa-suggest-check {
  color: var(--brass);
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 2px;
}
.pa-select-filter-wrap {
  padding: 3px 3px 5px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3px;
}
.pa-select-filter {
  width: 100% !important;
  padding: 5px 8px !important;
  font-size: 11.5px !important;
  border-radius: 5px !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  outline: none !important;
}
.pa-select-filter:focus {
  border-color: var(--brass) !important;
}
.pbi-slicer-wrap,
.pbi-slicer-bar,
.pbi-slicer-item {
  overflow: visible !important;
}
.pbi-slicer-item .pa-suggest-menu {
  min-width: 220px;
  z-index: 120;
}

/* ============================================================================
   Team Seat Inspector & Multi-Device Login Seat Editor (#seatEditorPanel)
   ============================================================================ */
.seat-editor-card {
  border: 1.5px solid var(--brass);
  overflow: visible;
}
.seat-editor-head {
  gap: 10px;
  flex-wrap: wrap;
}
.seat-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.seat-picker-bar {
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seat-picker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.seat-picker-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}
.seat-select-dropdown {
  flex: 1;
  min-width: 280px;
  max-width: 680px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--brass-border);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 12.5px;
}
.seat-pill-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}
.seat-pill-strip .seat-pick-pill {
  flex-shrink: 0;
}
.seat-pick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}
.seat-pick-pill:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.seat-pick-pill.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(184, 136, 59, 0.25);
}
.seat-pick-pill.active small,
.seat-pick-pill.active .seat-pick-num {
  color: #0B1730;
  background: rgba(11, 23, 48, 0.14);
}
.seat-pick-pill.suspended {
  opacity: 0.68;
  border-style: dashed;
}
.seat-pick-pill.new-seat {
  border-style: dashed;
  border-color: var(--brass);
  color: var(--brass);
  font-weight: 700;
}
.seat-pick-pill.new-seat.active {
  border-style: solid;
  color: #0B1730;
}
.seat-pick-num {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.seat-pick-pill small {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
}
.seat-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--line);
}
.seat-editor-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seat-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}
.seat-status-inline select {
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
}
.seat-editor-collapsed {
  border: 1px dashed var(--brass-border);
  background: var(--surface);
}
.seat-collapsed-inner {
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink);
}
.seat-collapsed-sub {
  color: var(--muted);
  font-size: 11.5px;
  margin-left: 4px;
}
tr.user-dir-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
tr.user-dir-row:hover td {
  background: var(--surface-2);
}
tr.seat-editing-row td {
  background: var(--brass-tint) !important;
}
tr.seat-editing-row td:first-child {
  box-shadow: inset 3px 0 0 var(--brass);
}
@media (max-width: 768px) {
  .seat-picker-bar { padding: 10px 12px; }
  .seat-select-dropdown { min-width: 100%; width: 100%; }
  .seat-pill-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .seat-pill-strip::-webkit-scrollbar { display: none; }
  .seat-pick-pill { flex-shrink: 0; }
}

/* ==========================================================================
   ROLES, PERMISSIONS & EXECUTIVE DASHBOARDS MATRIX (Rev 10 Ledger Theme)
   ========================================================================== */
.field-lbl-with-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.role-inspect-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--brass);
  font-family: "Archivo", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.14s ease;
}
.role-inspect-btn:hover,
.role-inspect-btn.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
}
.role-posture-strip,
.dash-posture-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.role-posture-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.role-posture-pill.on {
  background: rgba(11, 23, 48, 0.07);
  border-color: rgba(11, 23, 48, 0.22);
  color: var(--ink);
}
[data-theme="dark"] .role-posture-pill.on {
  background: rgba(217, 165, 74, 0.12);
  border-color: rgba(217, 165, 74, 0.35);
  color: #F4EFE6;
}
.role-posture-pill.emerald {
  background: rgba(22, 163, 74, 0.11);
  border-color: rgba(22, 163, 74, 0.32);
  color: var(--good);
}
.role-posture-pill.brass {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}
.role-posture-pill.amber {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.32);
  color: #D97706;
}
.role-posture-pill.off {
  opacity: 0.65;
}

.role-perm-matrix-wrap,
#rolePermissionsMatrixWrap {
  margin-top: 12px;
}
#rolePermissionsMatrixWrap:empty {
  margin-top: 0;
}
.role-perm-select > select[hidden],
.role-perm-popover[hidden],
.role-hover-card[hidden],
.perm-sec-box[hidden] {
  display: none !important;
}

/* Unified Roles & Permissions Selector + 2-Pane Interactive Hover Popover */
.role-perm-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.role-perm-trigger {
  width: 100%;
  min-height: 36px;
  max-height: 36px;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.2px;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.role-perm-trigger:hover:not(:disabled),
.role-perm-select.open .role-perm-trigger {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-tint);
}
.role-perm-select.open .co-multi-caret {
  transform: rotate(180deg);
  color: var(--brass);
}
.role-perm-trigger-main {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}
.role-perm-trigger-main strong {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
.rp-trig-sep {
  color: var(--muted);
  flex-shrink: 0;
}
.rp-trig-scope {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.role-perm-trigger-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.role-perm-mode-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  font-family: "Archivo", sans-serif;
  font-size: 9.8px;
  font-weight: 700;
  white-space: nowrap;
}
.role-perm-mode-pill.is-custom {
  background: var(--brass-tint);
  color: var(--brass);
  border-color: var(--brass-border);
}
.role-posture-pill.interactive {
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.role-posture-pill.interactive svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.role-posture-pill.interactive:hover,
.role-posture-pill.interactive:focus-visible {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
  opacity: 1;
  outline: none;
}

.role-perm-popover {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: min(700px, calc(100vw - 44px));
  z-index: 98;
  background: var(--surface);
  border: 1.5px solid var(--brass);
  border-radius: 9px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.role-perm-popover-body {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: 300px;
}
.role-perm-opt-col {
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-perm-col-hdr {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  padding: 2px 6px 5px;
}
.role-perm-opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.role-perm-opt:hover,
.role-perm-opt.is-preview {
  background: var(--surface);
  border-color: var(--brass-border);
}
.role-perm-opt.is-selected {
  background: var(--brass-tint);
  border-color: var(--brass);
}
.role-perm-opt-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.role-perm-opt-copy b {
  font-family: "Archivo", sans-serif;
  font-size: 11.8px;
  font-weight: 700;
  color: var(--ink);
}
.role-perm-opt-copy small {
  font-size: 10.2px;
  color: var(--muted);
  line-height: 1.25;
}
.role-perm-opt-check {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
}
.role-perm-opt.is-selected .role-perm-opt-check,
.role-perm-opt.is-preview .role-perm-opt-check {
  color: var(--brass);
}

.role-perm-preview-col {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  background: var(--surface);
}
.rp-preview-hdr {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-preview-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.rp-preview-title {
  font-family: "Archivo", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.rp-preview-desc {
  margin: 0;
  font-size: 11.3px;
  line-height: 1.42;
  color: var(--muted);
}

.rp-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.rp-cap-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  min-width: 0;
  font-size: 10.8px;
}
.rp-cap-item.is-on {
  background: rgba(28, 140, 70, 0.07);
  border-color: rgba(28, 140, 70, 0.28);
}
[data-theme="dark"] .rp-cap-item.is-on {
  background: rgba(61, 179, 106, 0.13);
  border-color: rgba(61, 179, 106, 0.34);
}
.rp-cap-item.is-partial {
  background: var(--brass-tint);
  border-color: var(--brass-border);
}
.rp-cap-item.is-off {
  opacity: 0.72;
}
.rp-cap-icon {
  font-size: 10px;
  font-weight: 800;
  width: 13px;
  text-align: center;
  flex-shrink: 0;
  color: var(--muted);
}
.rp-cap-item.is-on .rp-cap-icon {
  color: var(--good);
}
.rp-cap-item.is-partial .rp-cap-icon {
  color: var(--brass);
}
.rp-cap-lbl {
  font-weight: 700;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-cap-state {
  font-style: normal;
  font-size: 9.8px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.rp-cap-item.is-on .rp-cap-state {
  color: var(--good);
}
.rp-cap-item.is-partial .rp-cap-state {
  color: var(--brass);
}

.rp-hubs-block,
.rp-reports-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.rp-sec-lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Archivo", sans-serif;
  font-size: 9.8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.rp-scope-mode-note {
  color: var(--brass);
}
.rp-reset-scope-btn {
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--brass);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}
.rp-reset-scope-btn:hover {
  background: var(--brass);
  color: #0B1730;
}
.rp-hub-tags,
.rp-suite-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rp-hub-tag,
.rp-suite-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.8px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.rp-hub-tag i,
.rp-suite-tag i {
  font-style: normal;
  font-size: 9px;
}
.rp-hub-tag.on,
.rp-suite-tag.on {
  background: rgba(28, 140, 70, 0.08);
  border-color: rgba(28, 140, 70, 0.28);
  color: var(--good);
}
[data-theme="dark"] .rp-hub-tag.on,
[data-theme="dark"] .rp-suite-tag.on {
  background: rgba(61, 179, 106, 0.14);
  border-color: rgba(61, 179, 106, 0.34);
}
.rp-suite-tag.stmt.on {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}
.rp-hub-tag.off,
.rp-suite-tag.off {
  opacity: 0.56;
}

.rp-quick-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.rp-scope-pill {
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.rp-scope-pill:hover {
  border-color: var(--brass);
  color: var(--brass);
}
.rp-scope-pill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}

.role-perm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.role-perm-custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--brass);
  font-family: "Archivo", sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}
.role-perm-custom-btn svg {
  width: 12px;
  height: 12px;
}
.role-perm-custom-btn:hover {
  background: var(--brass);
  color: #0B1730;
}

/* Floating Interactive Hover Breakdown Card */
.role-hover-card {
  position: fixed;
  z-index: 9500;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--surface);
  border: 1.5px solid var(--brass);
  border-radius: 9px;
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--ink);
}
.rhc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.rhc-title-wrap {
  min-width: 0;
}
.rhc-eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 2px;
}
.rhc-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rhc-title-row strong {
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.rhc-summary {
  margin: 0;
  font-size: 11.2px;
  line-height: 1.4;
  color: var(--muted);
}
.rhc-close-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s ease;
}
.rhc-close-btn:hover {
  border-color: var(--brass);
  color: var(--ink);
  background: var(--brass-tint);
}
.rhc-quick-deck {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.rhc-quick-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rhc-quick-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 9.2px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 82px;
  flex-shrink: 0;
}
.rhc-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
}
.rhc-quick-pill {
  padding: 2.5px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 9.8px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.rhc-quick-pill:hover {
  border-color: var(--brass);
  color: var(--brass);
  background: var(--brass-tint);
}
.rhc-quick-pill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}
.rhc-quick-pill.scope.active {
  background: rgba(35, 86, 168, 0.12);
  border-color: rgba(35, 86, 168, 0.42);
  color: #2356A8;
}
[data-theme="dark"] .rhc-quick-pill.scope.active {
  background: rgba(74, 144, 217, 0.18);
  border-color: rgba(74, 144, 217, 0.48);
  color: #7DB8F5;
}
.rp-cap-item.is-clickable,
.rp-suite-tag[data-hover-open-perms] {
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.rp-cap-item.is-clickable:hover,
.rp-suite-tag[data-hover-open-perms]:hover {
  border-color: var(--brass);
  box-shadow: 0 1px 4px rgba(15, 30, 56, 0.08);
}
.rhc-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.rhc-hidden-note {
  font-size: 10.2px;
  color: var(--muted);
  line-height: 1.35;
}
.rhc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 10.4px;
  color: var(--muted);
}
.rhc-foot svg {
  width: 11px;
  height: 11px;
}

/* Merged Team Directory Roles & Permissions Interactive Capsule Card */
td.user-role-perm-cell {
  min-width: 184px;
  max-width: 210px;
}
.user-role-perm-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3.5px;
  padding: 4.5px 6.5px 4.5px 7.5px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  border-left: 3.5px solid #4A6B82;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
.user-role-perm-btn.tier-owner {
  border-left-color: #1F7A4C;
}
.user-role-perm-btn.tier-sup-entry,
.user-role-perm-btn.tier-custom {
  border-left-color: var(--brass);
}
.user-role-perm-btn.tier-supervisor,
.user-role-perm-btn.tier-sales {
  border-left-color: #2356A8;
}
.user-role-perm-btn.tier-entry {
  border-left-color: #5C728A;
}
.user-role-perm-btn:hover,
.user-role-perm-btn:focus-visible {
  border-color: var(--brass);
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(15, 30, 56, 0.09);
  outline: none;
}
.user-role-perm-btn:hover .urp-interactive-cue,
.user-role-perm-btn:focus-visible .urp-interactive-cue,
.user-role-perm-btn.is-active .urp-interactive-cue {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--brass);
}
.user-role-perm-btn.is-active {
  border-color: var(--brass);
  background: var(--brass-tint);
  box-shadow: 0 0 0 2px rgba(192, 137, 47, 0.18);
}
.user-role-perm-btn.is-readonly {
  cursor: default;
}
.urp-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}
.urp-role-lead {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: nowrap;
}
.urp-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1.5px 7px;
  border-radius: 999px;
  font-family: "Archivo", sans-serif;
  font-size: 10.2px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.urp-role-pill .urp-role-ico svg {
  width: 10.5px;
  height: 10.5px;
  display: block;
}
.urp-role-pill.tier-owner {
  background: rgba(31, 122, 76, 0.11);
  border-color: rgba(31, 122, 76, 0.3);
  color: #1A6B41;
}
[data-theme="dark"] .urp-role-pill.tier-owner {
  background: rgba(61, 179, 106, 0.16);
  border-color: rgba(61, 179, 106, 0.38);
  color: #5CE092;
}
.urp-role-pill.tier-sup-entry,
.urp-role-pill.tier-custom {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}
.urp-role-pill.tier-supervisor,
.urp-role-pill.tier-sales {
  background: rgba(35, 86, 168, 0.1);
  border-color: rgba(35, 86, 168, 0.28);
  color: #2356A8;
}
[data-theme="dark"] .urp-role-pill.tier-supervisor,
[data-theme="dark"] .urp-role-pill.tier-sales {
  background: rgba(74, 144, 217, 0.16);
  border-color: rgba(74, 144, 217, 0.38);
  color: #82BAF8;
}
.urp-role-pill.tier-entry {
  background: rgba(92, 114, 138, 0.11);
  border-color: rgba(92, 114, 138, 0.28);
  color: var(--ink);
}
.urp-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: "Archivo", sans-serif;
  font-size: 9.2px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
}
.urp-lock-badge .urp-cap-ico svg {
  width: 9.5px;
  height: 9.5px;
  display: block;
}
.urp-lock-badge.brass {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}
.urp-interactive-cue {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  padding: 1.5px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.14s ease;
}
.urp-interactive-cue svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.urp-caret {
  font-style: normal;
  font-size: 8.5px;
  opacity: 0.8;
}
.urp-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.urp-cap-pill {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  padding: 1.5px 4.5px;
  border-radius: 4px;
  font-size: 8.8px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}
.urp-cap-pill .urp-cap-ico svg {
  width: 9px;
  height: 9px;
  display: block;
  color: var(--muted);
  flex-shrink: 0;
}
.urp-cap-pill.reports {
  background: rgba(35, 86, 168, 0.05);
  border-color: rgba(35, 86, 168, 0.18);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.urp-cap-pill.reports .urp-cap-ico svg {
  color: #2356A8;
}
[data-theme="dark"] .urp-cap-pill.reports {
  background: rgba(74, 144, 217, 0.1);
  border-color: rgba(74, 144, 217, 0.25);
}
[data-theme="dark"] .urp-cap-pill.reports .urp-cap-ico svg {
  color: #7DB8F5;
}
.urp-cap-pill.hubs {
  color: var(--muted);
  background: var(--surface-2);
  padding: 1px 4px;
  font-size: 8.2px;
  flex-shrink: 0;
}
.urp-scope-lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.urp-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9.4px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.urp-tag.brass {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}
.urp-tag.official {
  background: rgba(28, 140, 70, 0.09);
  border-color: rgba(28, 140, 70, 0.28);
  color: var(--good);
}
@media (max-width: 768px) {
  .role-perm-popover {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: min(540px, 74vh);
    overflow-y: auto;
  }
  .role-perm-popover-body {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .role-perm-opt-col {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .rp-cap-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.perm-matrix-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 7px;
  border: 1px solid var(--brass-border);
  background: linear-gradient(90deg, rgba(11, 23, 48, 0.03) 0%, rgba(184, 136, 59, 0.07) 100%);
}
[data-theme="dark"] .perm-matrix-collapsed {
  background: linear-gradient(90deg, rgba(14, 26, 46, 0.75) 0%, rgba(217, 165, 74, 0.11) 100%);
}
.perm-collapsed-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 320px;
}
.perm-collapsed-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--brass-tint);
  color: var(--brass);
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border: 1px solid var(--brass-border);
  white-space: nowrap;
}
.perm-collapsed-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.perm-collapsed-text,
.perm-collapsed-summary {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.perm-collapsed-text b,
.perm-collapsed-summary b {
  color: var(--ink);
  font-weight: 700;
}
.perm-collapsed-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.perm-matrix-card {
  border-radius: 8px;
  border: 1px solid var(--brass-border);
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(11, 23, 48, 0.06);
  overflow: hidden;
}
.perm-matrix-card.is-custom {
  border-color: var(--brass);
}
.perm-matrix-hdr {
  padding: 13px 16px;
  background: var(--surface-2);
  color: var(--ink);
  border-bottom: 2px solid var(--brass);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
:root[data-theme="dark"] .perm-matrix-hdr {
  background: linear-gradient(135deg, #0B1730 0%, #132548 100%);
  color: #F4EFE6;
}
.perm-matrix-title-wrap,
.perm-matrix-title-col {
  min-width: 0;
  flex: 1 1 320px;
}
.perm-matrix-eyebrow,
.perm-matrix-kicker {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
}
.perm-matrix-title {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
:root[data-theme="dark"] .perm-matrix-title {
  color: #F4EFE6;
}
.perm-matrix-sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.42;
}
:root[data-theme="dark"] .perm-matrix-sub {
  color: rgba(244, 239, 230, 0.82);
}
.perm-matrix-hdr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.perm-role-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 3px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
:root[data-theme="dark"] .perm-role-switcher {
  background: rgba(8, 17, 36, 0.65);
  border-color: rgba(217, 165, 74, 0.32);
}
.perm-role-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: "Archivo", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
:root[data-theme="dark"] .perm-role-tab {
  color: rgba(244, 239, 230, 0.78);
}
.perm-role-tab:hover {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--brass-border);
}
:root[data-theme="dark"] .perm-role-tab:hover {
  color: #F4EFE6;
  background: rgba(255, 255, 255, 0.08);
}
.perm-role-tab.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
}
.perm-role-tab.custom-tab.active,
:root[data-theme="dark"] .perm-role-tab.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
}
.perm-close-btn {
  padding: 4px 9px;
  font-size: 11px;
  white-space: nowrap;
}

.perm-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.perm-summary-cell,
.perm-sum-tile {
  padding: 8px 11px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.perm-summary-cell.interactive {
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.perm-summary-cell.interactive:hover,
.perm-summary-cell.interactive:focus-visible {
  border-color: var(--brass-border);
  box-shadow: 0 2px 6px rgba(15, 30, 56, 0.06);
  outline: none;
}
.perm-summary-cell.interactive.is-focused {
  border-color: var(--brass);
  background: var(--brass-tint);
  box-shadow: 0 0 0 1px var(--brass-border);
}
.perm-sum-lbl,
.perm-sum-k {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.perm-sum-val,
.perm-sum-v {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.perm-sum-val.brass {
  color: var(--brass);
}
.perm-summary-cell small,
.perm-sum-s {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perm-hub-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.perm-hub-preview-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brass);
  white-space: nowrap;
}
.perm-hub-preview-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.perm-hub-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.perm-hub-pill i {
  font-style: normal;
  font-size: 9.5px;
}
.perm-hub-pill.is-visible {
  background: rgba(31, 122, 76, 0.09);
  border-color: rgba(31, 122, 76, 0.30);
  color: var(--good);
}
[data-theme="dark"] .perm-hub-pill.is-visible {
  background: rgba(31, 122, 76, 0.16);
  border-color: rgba(31, 122, 76, 0.42);
}
.perm-hub-pill.is-hidden {
  opacity: 0.58;
}

.perm-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px;
}
.perm-section-grid.is-single-focus {
  grid-template-columns: minmax(0, 1fr);
}
.perm-sec-box {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.perm-sec-head,
.perm-sec-hdr {
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.perm-sec-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.perm-sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--brass);
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.perm-sec-head strong,
.perm-sec-hdr strong {
  font-family: "Archivo", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
}
.perm-sec-quick,
.perm-sec-bulk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.perm-mini-btn {
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}
.perm-mini-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
  background: var(--brass-tint);
}
.perm-items-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.perm-item-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.12s ease;
  margin: 0;
  min-width: 0;
}
.perm-item-row:hover {
  border-color: var(--brass-border);
}
.perm-item-row.on,
.perm-item-row.is-on {
  background: rgba(31, 122, 76, 0.05);
  border-color: rgba(31, 122, 76, 0.26);
}
[data-theme="dark"] .perm-item-row.on,
[data-theme="dark"] .perm-item-row.is-on {
  background: rgba(31, 122, 76, 0.11);
  border-color: rgba(31, 122, 76, 0.35);
}
.perm-item-row.off,
.perm-item-row.is-off {
  opacity: 0.76;
}
.perm-cb,
.perm-item-cb {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--brass);
  flex-shrink: 0;
  cursor: pointer;
}
.perm-item-copy,
.perm-item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.perm-item-title,
.perm-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.perm-item-title b,
.perm-item-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
}
.perm-rule-code,
.perm-item-cat {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--brass);
  border: 1px solid var(--brass-border);
  white-space: nowrap;
}
.perm-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 1.5px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.perm-state-pill.on {
  background: rgba(31, 122, 76, 0.11);
  border-color: rgba(31, 122, 76, 0.32);
  color: var(--good);
}
.perm-state-pill.brass {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}
.perm-item-copy small,
.perm-item-desc {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.perm-matrix-foot {
  padding: 9px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.perm-matrix-foot b {
  color: var(--ink);
}

/* Team Directory Role Badge Button */
.role-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  transition: all 0.12s ease;
}
.role-badge-btn:hover {
  border-color: var(--brass);
  box-shadow: 0 2px 6px rgba(11, 23, 48, 0.12);
}
.role-badge-btn.owner {
  background: var(--brass-tint);
  color: var(--ink);
  border-color: var(--brass);
}
:root[data-theme="dark"] .role-badge-btn.owner {
  background: #1A2C4A;
  color: #F4EFE6;
  border-color: var(--brass);
}
.role-badge-btn.custom {
  background: var(--brass-tint);
  color: var(--brass);
  border-color: var(--brass);
}
.role-badge-sub {
  font-size: 9.5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(184, 136, 59, 0.2);
  color: var(--brass);
}

/* Record Inspector Modify Drawer */
.insp-modify-drawer {
  margin: 10px 16px;
  padding: 12px 14px;
  border-radius: 7px;
  border: 1px solid var(--brass);
  background: var(--surface-2);
}
.insp-modify-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.insp-modify-hdr strong {
  font-family: "Archivo", sans-serif;
  font-size: 12.5px;
  color: var(--ink);
}
.insp-modify-hdr span {
  font-size: 11px;
  color: var(--muted);
}
.insp-modify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.insp-mod-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}
.insp-mod-field span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}
.insp-mod-field input {
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}
.insp-modify-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .perm-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .perm-section-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .perm-summary-strip {
    grid-template-columns: 1fr;
  }
  .perm-matrix-hdr {
    padding: 10px 12px;
  }
  .perm-section-grid {
    padding: 10px;
  }
}

/* On-demand Reporting Date toggle, Yesterday's After-Hours toggle & reset bar under Transaction Date / Reporting Date */
.repdate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.repdate-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.repdate-bar .hint {
  margin-top: 0;
}
.repdate-toggle-btn,
.repdate-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px dashed var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.repdate-bar.has-afterhours .repdate-actions {
  gap: 4px;
}
.repdate-bar.has-afterhours .repdate-toggle-btn {
  padding: 2px 6px;
  gap: 3.5px;
  font-size: 10px;
  white-space: nowrap;
}
.repdate-bar.has-afterhours .repdate-toggle-btn svg.ic {
  width: 11px;
  height: 11px;
  margin-right: 0;
  flex-shrink: 0;
}
.repdate-toggle-btn:hover,
.repdate-reset-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
}
.repdate-toggle-btn.active {
  border-style: solid;
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
}
.afterhours-toggle-btn.is-afterhours {
  border-style: solid;
  border-color: rgba(217, 119, 6, 0.48);
  background: rgba(245, 158, 11, 0.14);
  color: #B45309;
}
.afterhours-toggle-btn.is-afterhours:hover {
  border-color: #D97706;
  background: rgba(245, 158, 11, 0.22);
  color: #92400E;
}
html[data-theme="dark"] .afterhours-toggle-btn.is-afterhours {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
}
html[data-theme="dark"] .afterhours-toggle-btn.is-afterhours:hover {
  border-color: #FBBF24;
  background: rgba(245, 158, 11, 0.26);
  color: #FDE68A;
}
#wrap_f_date.is-afterhours-yesterday input#f_date {
  border-color: rgba(217, 119, 6, 0.52);
  background: rgba(245, 158, 11, 0.07);
}
html[data-theme="dark"] #wrap_f_date.is-afterhours-yesterday input#f_date {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(245, 158, 11, 0.10);
}
.repdate-reset-btn {
  border-style: solid;
}

/* Duplicate Ticket # guard: yellow warning (2–30 days prior) & red hard block (same day / day before) */
#hint_ticket.warn {
  color: #854D0E;
  background: #FEF9C3;
  border: 1px solid #FACC15;
  border-radius: 5px;
  padding: 2px 7px;
  display: inline-block;
  margin-top: 2px;
}
:root[data-theme="dark"] #hint_ticket.warn {
  color: #FDE047;
  background: rgba(250, 204, 21, 0.16);
  border-color: rgba(250, 204, 21, 0.48);
}
#hint_ticket.crit {
  color: var(--crit);
  background: var(--crit-bg);
  border: 1px solid rgba(200, 51, 59, 0.32);
  border-radius: 5px;
  padding: 2px 7px;
  display: inline-block;
  margin-top: 2px;
}
:root[data-theme="dark"] #hint_ticket.crit {
  border-color: rgba(226, 90, 97, 0.42);
}

.ot-inline-wrap {
  display: inline-flex;
  align-items: center;
}
.ot-inline-wrap[hidden] {
  display: none !important;
}
.overtime-toggle-btn.is-overtime {
  border-style: solid;
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(245, 158, 11, 0.14);
  color: #B45309;
}
.overtime-toggle-btn.is-overtime:hover {
  border-color: #D97706;
  background: rgba(245, 158, 11, 0.22);
  color: #92400E;
}
html[data-theme="dark"] .overtime-toggle-btn.is-overtime {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
}
html[data-theme="dark"] .overtime-toggle-btn.is-overtime:hover {
  border-color: #FBBF24;
  background: rgba(245, 158, 11, 0.26);
  color: #FDE68A;
}

/* Truck Owner Drivers Inline Management Panel (Supplier / Truck Owner Form) */
.pa-owner-drivers-panel {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.pa-owner-drivers-add {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.pa-owner-drivers-btn-wrap button {
  height: 36px;
  white-space: nowrap;
}
.pa-owner-drivers-list {
  margin-top: 10px;
}
.pa-owner-drivers-empty {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
}
.pa-owner-drivers-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
}
.pa-owner-drivers-hdr small {
  color: var(--muted);
  font-size: 11px;
}
.pa-owner-drivers-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pa-owner-drv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
}
.pa-owner-drv-chip.is-staged {
  border-color: var(--brass-border);
  background: var(--brass-tint);
}
.pa-owner-drv-main {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pa-owner-drv-rm {
  border: 0;
  background: transparent;
  color: var(--crit);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
}
.pa-owner-drv-rm:hover {
  background: var(--crit-bg);
}
@media (max-width: 860px) {
  .pa-owner-drivers-add {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   v8.6 — FULL-VIEWPORT TABLE FIT (ZERO HORIZONTAL & VERTICAL CLIPPING ON LAPTOPS)
   ============================================================================ */
.sr-only {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

span:has(> .sr-only),
td:has(> .row-void-hover) {
  position: relative;
}

/* Natural inline wrapping for relational lookup links inside table cells */
table.ledger-table .rel-link {
  display: inline;
  padding: 0 1px;
}
table.ledger-table .rel-link .rel-arr {
  display: inline;
  margin-left: 2px;
  white-space: nowrap;
}

/* Compact company badge & stacked Truck / Driver cell */
table.ledger-table .co-tbl-badge {
  position: relative;
  padding: 2px 6px;
  font-size: 10.2px;
  letter-spacing: 0.02em;
}
table.ledger-table th.th-truck-drv,
table.ledger-table td.td-truck-drv {
  width: 78px;
  max-width: 86px;
  white-space: normal;
  line-height: 1.24;
}
.td-truck-drv .drv-sub {
  font-size: 10.8px;
  font-weight: 500;
  color: var(--ink-2, var(--ink));
  margin-top: 1px;
  line-height: 1.22;
  white-space: normal;
  overflow-wrap: break-word;
}
#salesPanel table.ledger-table thead th:nth-child(1),
#salesPanel table.ledger-table tbody td:nth-child(1) {
  width: 72px;
  white-space: nowrap;
}
#salesPanel table.ledger-table thead th:nth-child(2),
#salesPanel table.ledger-table tbody td:nth-child(2),
#rawPanel table.ledger-table thead th:nth-child(2),
#rawPanel table.ledger-table tbody td:nth-child(2),
#rawSalesHaulPanel table.ledger-table thead th:nth-child(2),
#rawSalesHaulPanel table.ledger-table tbody td:nth-child(2) {
  white-space: nowrap;
}
#salesPanel table.ledger-table thead th:nth-child(3),
#salesPanel table.ledger-table tbody td:nth-child(3) {
  width: 38px;
}
#salesPanel table.ledger-table thead th:nth-child(4),
#salesPanel table.ledger-table tbody td:nth-child(4) {
  width: 46px;
}
#salesPanel table.ledger-table tbody td:nth-child(5),
#salesPanel table.ledger-table tbody td:nth-child(6),
#salesPanel table.ledger-table tbody td:nth-child(7),
#salesPanel table.ledger-table tbody td:nth-child(8) {
  overflow-wrap: anywhere;
}
#salesPanel table.ledger-table thead th:nth-child(5),
#salesPanel table.ledger-table tbody td:nth-child(5) {
  max-width: 96px;
  white-space: normal;
}
#salesPanel table.ledger-table thead th:nth-child(6),
#salesPanel table.ledger-table tbody td:nth-child(6) {
  max-width: 78px;
  white-space: normal;
}
#salesPanel table.ledger-table thead th:nth-child(7),
#salesPanel table.ledger-table tbody td:nth-child(7) {
  max-width: 64px;
  white-space: normal;
}
#salesPanel table.ledger-table thead th:nth-child(8),
#salesPanel table.ledger-table tbody td:nth-child(8) {
  width: 68px;
  max-width: 72px;
}
#salesPanel table.ledger-table thead th:nth-child(15),
#salesPanel table.ledger-table tbody td:nth-child(15) {
  width: 48px;
}
#salesPanel table.ledger-table tbody td:nth-child(15) .badge {
  white-space: normal;
}
.mini-table-grid table.ledger-table th,
.mini-table-grid table.ledger-table td {
  padding: 5.5px 5.5px;
  font-size: 11.4px;
}

/* Clean, single-line ledger tfoot bar & strict no-wrap on all numeric/currency cells */
table.ledger-table th.r,
table.m-grid th.r {
  white-space: normal;
  line-height: 1.18;
  vertical-align: middle;
}
#univRegPanel table.ledger-table thead th {
  white-space: nowrap;
  vertical-align: middle;
}
table.ledger-table tbody td.r,
table.ledger-table tfoot tr td.r,
table.m-grid tbody td.n,
table.m-grid tfoot tr td.n {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-variant-numeric: tabular-nums;
}
table.ledger-table tfoot tr td,
table.m-grid tfoot tr td {
  background: #F4F6F9;
  color: var(--ink);
  font-weight: 700;
  border-top: 1.5px solid var(--ink);
  border-bottom: 3px double rgba(192, 137, 47, 0.55);
  box-shadow: 0 -2px 6px rgba(15, 30, 56, 0.05), 0 4px 0 0 #F4F6F9;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  vertical-align: middle;
}
:root[data-theme="dark"] table.ledger-table tfoot tr td,
:root[data-theme="dark"] table.m-grid tfoot tr td {
  background: #1B2C47;
  color: var(--ink);
  border-top-color: #4A6388;
  border-bottom-color: rgba(217, 165, 74, 0.55);
  box-shadow: 0 -2px 8px rgba(4, 10, 22, 0.35), 0 4px 0 0 #1B2C47;
}
table.ledger-table tfoot tr td:first-child,
table.ledger-table tfoot tr td[colspan],
table.m-grid tfoot tr td:first-child,
table.m-grid tfoot tr td[colspan] {
  white-space: nowrap !important;
  line-height: 1.25;
  letter-spacing: 0.015em;
}
.tfoot-avg-tag {
  display: inline;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 2px;
}
.tfoot-col-lbl {
  font-size: 9px;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 1px;
  white-space: normal;
}
.tfoot-sub-split {
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
}

/* Allow long agreement codes, vouchers & composite mono cells to wrap instead of forcing 300px+ columns */
#pricingPanel table.ledger-table tbody td:first-child,
#rawPricingPanel table.ledger-table tbody td:first-child,
#soaPanel table.ledger-table tbody td.mono:nth-child(3),
#rcptPanel table.ledger-table tbody td.mono:nth-child(2),
#settlePanel table.ledger-table tbody td.mono:nth-child(2),
#pbiCanvasPanel table.ledger-table tbody td.mono:not(:first-child),
#tablesHubPanel table.ledger-table tbody td.mono:not(:first-child),
#univRegPanel table.ledger-table tbody td.mono:not(:first-child) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Stack Power BI & split grids full-width whenever they contain data tables (charts stay 2-up) */
.split-grid-2:has(.table-wrap),
.pbi-grid-2:has(.table-wrap),
.pbi-grid-split:has(.table-wrap),
.pbi-grid-62-38:has(.table-wrap) {
  grid-template-columns: minmax(0, 1fr);
}

/* Executive Team Login Directory & Row-Level Security (RLS) Table Styling */
table.ledger-table:has(#usersDirectoryTbody) th {
  padding: 5px 3px !important;
  font-size: 9px !important;
  letter-spacing: 0.025em;
  white-space: normal;
  line-height: 1.15;
}
table.ledger-table:has(#usersDirectoryTbody) td {
  padding: 5px 3px !important;
  font-size: 10.6px !important;
  vertical-align: middle !important;
}
table.ledger-table:has(#usersDirectoryTbody) .badge {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
.user-dir-name-cell {
  min-width: 90px;
  max-width: 112px;
}
.user-dir-identity {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.user-dir-avatar {
  width: 22px;
  height: 22px;
  border-radius: 5.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Archivo", sans-serif;
  font-size: 9.2px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.05);
}
.user-dir-avatar.tier-owner {
  background: rgba(31, 122, 76, 0.13);
  border-color: rgba(31, 122, 76, 0.34);
  color: #1A6B41;
}
[data-theme="dark"] .user-dir-avatar.tier-owner {
  background: rgba(61, 179, 106, 0.18);
  border-color: rgba(61, 179, 106, 0.42);
  color: #5CE092;
}
.user-dir-avatar.tier-sup-entry,
.user-dir-avatar.tier-custom {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}
.user-dir-avatar.tier-supervisor,
.user-dir-avatar.tier-sales {
  background: rgba(35, 86, 168, 0.12);
  border-color: rgba(35, 86, 168, 0.32);
  color: #2356A8;
}
[data-theme="dark"] .user-dir-avatar.tier-supervisor,
[data-theme="dark"] .user-dir-avatar.tier-sales {
  background: rgba(74, 144, 217, 0.18);
  border-color: rgba(74, 144, 217, 0.42);
  color: #82BAF8;
}
.user-dir-name-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.user-dir-name-line {
  display: flex;
  align-items: center;
  gap: 3.5px;
  flex-wrap: wrap;
  line-height: 1.16;
}
.user-dir-name-line strong {
  font-family: "Archivo", sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  color: var(--ink);
}
.user-you-badge {
  font-size: 8px !important;
  padding: 1px 3.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.user-dir-seat-sub {
  font-size: 8.8px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.15;
}
.user-dir-email-cell {
  white-space: nowrap;
}
.user-email-pill {
  display: inline-block;
  padding: 1.5px 4px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 9px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.user-dir-pin-cell {
  white-space: nowrap !important;
}
.user-pin-keycap {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 1.5px 4px !important;
  border-radius: 4.5px !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.6px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  box-shadow: inset 0 -1px 0 rgba(15, 30, 56, 0.12);
}
.user-dir-face-cell {
  white-space: nowrap;
}
.user-face-capsule {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  padding: 2.5px 5px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.14s ease;
}
.user-face-capsule.is-enrolled {
  background: rgba(31, 122, 76, 0.09);
  border-color: rgba(31, 122, 76, 0.3);
  color: #1A6B41;
}
[data-theme="dark"] .user-face-capsule.is-enrolled {
  background: rgba(61, 179, 106, 0.15);
  border-color: rgba(61, 179, 106, 0.36);
  color: #5CE092;
}
.user-face-capsule.is-pin-only {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
}
.user-face-capsule:not(.is-readonly):hover,
.user-face-capsule.is-target {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(192, 137, 47, 0.16);
}
.user-face-capsule.is-readonly {
  cursor: default;
}
.face-pose-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.face-pose-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(122, 136, 155, 0.38);
  display: inline-block;
}
.face-pose-dots i.on {
  background: #1F7A4C;
}
[data-theme="dark"] .face-pose-dots i.on {
  background: #5CE092;
}
.face-pose-dots i.saved {
  background: var(--brass);
}
.user-dir-rls-cell {
  min-width: 80px;
  max-width: 100px;
}
.rls-co-cell.is-interactive {
  cursor: pointer;
  padding: 2px 3px;
  margin: -2px -3px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: all 0.14s ease;
}
.rls-co-cell.is-interactive:hover,
.rls-co-cell.is-interactive:focus-visible {
  border-color: var(--brass-border);
  background: var(--brass-tint);
  outline: none;
}
.rls-co-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}
.rls-co-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 4px;
  border-radius: 3.5px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  font-size: 8.9px;
  color: var(--ink);
  white-space: nowrap;
}
.rls-co-chip strong {
  font-weight: 700;
}
.rls-co-chip.more {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass);
  font-weight: 700;
}
.user-status-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  padding: 1.5px 5px !important;
  font-size: 9px !important;
}
.user-status-dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.user-dir-login-cell {
  white-space: nowrap;
}
.user-last-login {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 9px;
  color: var(--ink);
  white-space: nowrap;
}
.user-last-login .login-time {
  font-size: 8.3px;
  color: var(--muted);
}
.user-last-login.is-never {
  color: var(--muted);
  font-style: italic;
}
.user-actions-cell {
  white-space: nowrap;
}
.user-actions-wrap {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2px;
  justify-content: start;
  align-items: center;
}
.user-actions-wrap .user-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  padding: 2px 4.5px !important;
  font-size: 8.9px !important;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.15;
}
.user-actions-wrap .user-act-btn svg {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}
.user-actions-wrap .user-act-btn.is-active-seat {
  background: rgba(31, 122, 76, 0.1);
  border-color: rgba(31, 122, 76, 0.34);
  color: #1A6B41;
}
[data-theme="dark"] .user-actions-wrap .user-act-btn.is-active-seat {
  background: rgba(61, 179, 106, 0.16);
  border-color: rgba(61, 179, 106, 0.38);
  color: #5CE092;
}
.user-actions-wrap .user-act-btn.is-suspend:hover {
  border-color: rgba(198, 55, 55, 0.45);
  color: var(--crit);
  background: rgba(198, 55, 55, 0.07);
}
.user-actions-wrap .user-act-btn.is-activate {
  border-color: rgba(31, 122, 76, 0.4);
  color: var(--good);
}

/* Crisp, readable typography across all column counts with 0px horizontal overflow */
@media (min-width: 861px) {
  table.ledger-table {
    width: 100%;
    font-size: 12.6px;
  }
  table.ledger-table th {
    padding: 8px 9px;
    font-size: 10.6px;
    letter-spacing: 0.03em;
    line-height: 1.2;
  }
  table.ledger-table td {
    padding: 7px 9px;
    font-size: 12.6px;
    line-height: 1.32;
  }
  table.ledger-table tfoot tr td {
    padding: 8px 9px;
    font-size: 12px;
  }

  /* 10–12 columns (Raw Intake 11-col, Price Agreements 12-col, Sales by Product 10-col, Equipment 10-col) */
  table.ledger-table:has(thead th:nth-child(10)) th,
  table.ledger-table:has(thead th:nth-child(10)) td {
    padding: 6.5px 6px;
    font-size: 12px;
  }
  table.ledger-table:has(thead th:nth-child(10)) th {
    font-size: 10.2px;
    letter-spacing: 0.02em;
    line-height: 1.18;
  }
  table.ledger-table:has(thead th:nth-child(10)) tfoot tr td {
    padding: 7px 6px;
    font-size: 11.6px;
  }
  table.ledger-table:has(thead th:nth-child(10)) th:first-child,
  table.ledger-table:has(thead th:nth-child(10)) td:first-child {
    padding-left: 10px;
  }
  table.ledger-table:has(thead th:nth-child(10)) th:last-child,
  table.ledger-table:has(thead th:nth-child(10)) td:last-child {
    padding-right: 10px;
  }

  /* 13–15 columns (#salesPanel 15-col, #payStaffRegPanel 15-col, P04 Sales, P05 Pricing, P10 Fleet) */
  table.ledger-table:has(thead th:nth-child(13)) th,
  table.ledger-table:has(thead th:nth-child(13)) td {
    padding: 6px 4px;
    font-size: 11.6px;
  }
  #salesPanel table.ledger-table th,
  #salesPanel table.ledger-table td,
  #pricingPanel table.ledger-table th,
  #pricingPanel table.ledger-table td,
  #rawPricingPanel table.ledger-table th,
  #rawPricingPanel table.ledger-table td,
  #payAttStaffSumPanel table.ledger-table th,
  #payAttStaffSumPanel table.ledger-table td {
    padding: 5.5px 3.2px;
    font-size: 11.5px;
  }
  #payStaffRegPanel table.ledger-table th,
  #payStaffRegPanel table.ledger-table td {
    padding: 5.5px 2.3px;
    font-size: 10.6px;
  }
  #payStaffRegPanel table.ledger-table thead th {
    font-size: 8.5px;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: nowrap;
  }
  #payStaffRegPanel table.ledger-table thead th:nth-child(1),
  #payStaffRegPanel table.ledger-table tbody td:nth-child(1) {
    width: 118px;
    max-width: 134px;
  }
  #payStaffRegPanel table.ledger-table tbody td:nth-child(1) {
    white-space: normal;
    overflow-wrap: break-word;
  }
  #payStaffRegPanel table.ledger-table tbody td:nth-child(1) .badge {
    font-size: 8.8px;
    padding: 1px 4px;
  }
  #payStaffRegPanel table.ledger-table thead th:nth-child(2),
  #payStaffRegPanel table.ledger-table tbody td:nth-child(2) {
    width: 34px;
    white-space: nowrap;
  }
  #payStaffRegPanel table.ledger-table thead th:nth-child(3),
  #payStaffRegPanel table.ledger-table tbody td:nth-child(3) {
    width: 45px;
    white-space: nowrap;
  }
  #payStaffRegPanel table.ledger-table tbody td:not(.r) {
    overflow-wrap: break-word;
    word-break: normal;
  }
  #payStaffRegPanel table.ledger-table tfoot tr td {
    padding: 6px 2.3px;
    font-size: 10.3px;
  }
  #paySalPanel table.ledger-table thead th,
  #paySalPanel table.ledger-table tbody td.sal-paid-earned-cell,
  #payAttPanel table.ledger-table thead th,
  #payAttStaffSumPanel table.ledger-table thead th,
  #payDriverOtPanel table.ledger-table thead th,
  #paySiteStaffPanel table.ledger-table thead th,
  #payEmpPanel table.ledger-table thead th,
  #payUnmatchedPanel table.ledger-table thead th,
  #driversOtPanel table.ledger-table thead th {
    white-space: nowrap;
  }
  #payAttStaffSumPanel table.ledger-table thead th {
    font-size: 9px !important;
    letter-spacing: 0 !important;
    padding: 6px 3px;
  }
  #payAttStaffSumPanel table.ledger-table thead th:nth-child(1),
  #payAttStaffSumPanel table.ledger-table tbody td:nth-child(1),
  #payDriverOtPanel table.ledger-table thead th:nth-child(1),
  #payDriverOtPanel table.ledger-table tbody td:nth-child(1),
  #paySiteStaffPanel table.ledger-table thead th:nth-child(1),
  #paySiteStaffPanel table.ledger-table tbody td:nth-child(1),
  #driversOtPanel table.ledger-table thead th:nth-child(1),
  #driversOtPanel table.ledger-table tbody td:nth-child(1) {
    width: 114px;
    max-width: 128px;
  }
  #payAttStaffSumPanel table.ledger-table tbody td:nth-child(1),
  #payDriverOtPanel table.ledger-table tbody td:nth-child(1),
  #paySiteStaffPanel table.ledger-table tbody td:nth-child(1),
  #driversOtPanel table.ledger-table tbody td:nth-child(1) {
    white-space: normal;
    overflow-wrap: break-word;
  }
  #payDriverOtPanel table.ledger-table thead th,
  #driversOtPanel table.ledger-table thead th {
    font-size: 9.2px !important;
    letter-spacing: 0.005em !important;
    padding: 6px 3.8px;
  }
  #payDriverOtPanel table.ledger-table thead th:nth-child(4),
  #payDriverOtPanel table.ledger-table tbody td:nth-child(4),
  #driversOtPanel table.ledger-table thead th:nth-child(3),
  #driversOtPanel table.ledger-table tbody td:nth-child(3) {
    max-width: 128px;
  }
  #payDriverOtPanel table.ledger-table tbody td:nth-child(4),
  #driversOtPanel table.ledger-table tbody td:nth-child(3) {
    white-space: normal;
    overflow-wrap: break-word;
  }
  #paySiteStaffPanel table.ledger-table thead th {
    font-size: 9.3px !important;
    letter-spacing: 0.005em !important;
    padding: 6px 4px;
  }
  table.ledger-table:has(thead th:nth-child(13)) th,
  #salesPanel table.ledger-table th {
    font-size: 9.8px;
    letter-spacing: 0.015em;
    line-height: 1.15;
  }
  table.ledger-table:has(thead th:nth-child(13)) tfoot tr td {
    padding: 6.5px 4px;
    font-size: 11.2px;
  }
  #salesPanel table.ledger-table tfoot tr td {
    padding: 6.5px 3.2px;
    font-size: 10.9px;
  }
  table.ledger-table:has(thead th:nth-child(13)) th:first-child,
  table.ledger-table:has(thead th:nth-child(13)) td:first-child,
  #salesPanel table.ledger-table th:first-child,
  #salesPanel table.ledger-table td:first-child {
    padding-left: 8px;
  }
  table.ledger-table:has(thead th:nth-child(13)) th:last-child,
  table.ledger-table:has(thead th:nth-child(13)) td:last-child,
  #salesPanel table.ledger-table th:last-child,
  #salesPanel table.ledger-table td:last-child {
    padding-right: 8px;
  }
  table.ledger-table:has(thead th:nth-child(13)) th.sortable i {
    font-size: 8.5px;
    margin-left: 1px;
  }
  table.ledger-table:has(thead th:nth-child(13)) .badge {
    padding: 2px 5px;
    font-size: 10px;
  }

  /* 16–20 columns (P06 AR 17-col, P12 Payroll 17-col, Tables Hub 16–20 col tables) */
  table.ledger-table:has(thead th:nth-child(16)) th,
  table.ledger-table:has(thead th:nth-child(16)) td {
    padding: 4.5px 2.5px;
    font-size: 10.2px;
  }
  table.ledger-table:has(thead th:nth-child(16)) th {
    font-size: 8.8px;
    letter-spacing: 0;
    line-height: 1.1;
  }
  table.ledger-table:has(thead th:nth-child(16)) tfoot tr td {
    padding: 5px 2.5px;
    font-size: 10px;
  }
  table.ledger-table:has(thead th:nth-child(16)) td:not(.r) {
    overflow-wrap: anywhere;
  }
  table.ledger-table:has(thead th:nth-child(16)) th:first-child,
  table.ledger-table:has(thead th:nth-child(16)) td:first-child {
    padding-left: 6px;
  }
  table.ledger-table:has(thead th:nth-child(16)) th:last-child,
  table.ledger-table:has(thead th:nth-child(16)) td:last-child {
    padding-right: 6px;
  }
  table.ledger-table:has(thead th:nth-child(16)) th.sortable i {
    font-size: 7.5px;
    margin-left: 1px;
  }
  table.ledger-table:has(thead th:nth-child(19)) th,
  table.ledger-table:has(thead th:nth-child(19)) td {
    padding: 4px 2px;
    font-size: 9.5px;
  }
  table.ledger-table:has(thead th:nth-child(19)) th {
    font-size: 8.2px;
  }
  table.ledger-table:has(thead th:nth-child(19)) tfoot tr td {
    padding: 4.5px 2px;
    font-size: 9.3px;
  }

  /* Viewport-adaptive vertical table height + readable banner/recon so thead + rows + sticky tfoot fit on 1280×600 & 1366×768 laptops */
  table.m-grid th,
  table.m-grid td {
    padding: 6.5px 8px;
    font-size: 12px;
  }
  table.m-grid th:first-child,
  table.m-grid td:first-child {
    padding-left: 12px;
  }
  table.m-grid th:last-child,
  table.m-grid td:last-child {
    padding-right: 12px;
  }
  .workspace {
    padding: 8px 16px 16px;
  }
  .cockpit-banner {
    padding: 7px 14px;
    margin-bottom: 7px;
    gap: 5px 12px;
  }
  .cockpit-title-block {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 100%;
    overflow: hidden;
  }
  .cockpit-eyebrow {
    font-size: 9.5px;
    margin-bottom: 0;
    white-space: nowrap;
  }
  .cockpit-title {
    font-size: 15.5px;
    margin-bottom: 0;
    white-space: nowrap;
  }
  .cockpit-sub {
    font-size: 11px;
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .cockpit-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
    width: 100%;
  }
  .cockpit-pill {
    padding: 4px 8px;
    min-width: 0;
  }
  .cockpit-pill-lbl {
    font-size: 8.8px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cockpit-pill-val {
    font-size: 13.2px;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .table-toolbar {
    padding: 7px 12px;
    gap: 8px;
  }
  .table-toolbar .search-input {
    min-width: 240px;
    width: clamp(240px, 26vw, 340px);
    padding: 5.5px 10px 5.5px 28px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--line-strong);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cline x1='10.4' y1='10.4' x2='14' y2='14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 13px 13px;
    box-shadow: inset 0 1px 2px rgba(8, 17, 34, 0.03);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
  }
  .table-toolbar .search-input:focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 2px var(--brass-tint);
    outline: none;
  }
  .table-toolbar .chip-bar {
    gap: 4px;
  }
  .table-toolbar .filter-chip {
    padding: 3.5px 8px;
    font-size: 11px;
  }
  .table-toolbar .btn {
    padding: 4.5px 10px;
    font-size: 11.2px;
    white-space: nowrap;
  }
  .sales-entity-recon {
    padding: 6px 12px;
    gap: 8px;
  }
  .sales-entity-recon.single {
    padding: 0;
  }
  .sales-recon-single {
    font-size: 11.6px;
  }
  .sales-recon-card {
    padding: 0;
  }
  .sales-recon-head {
    margin-bottom: 0;
    padding: 4px 12px;
    font-size: 11px;
  }
  .sales-recon-act {
    font-size: 10.2px;
  }
  .sales-recon-metrics {
    gap: 0;
  }
  .sales-recon-metrics > span {
    padding: 6px 10px 5px;
  }
  .sales-recon-metrics small {
    font-size: 8.5px;
  }
  .sales-recon-metrics b {
    font-size: 11.4px;
  }
  .table-wrap {
    max-height: clamp(360px, calc(100dvh - 205px), 620px);
  }
  .panel-card:has(.sales-entity-recon) .table-wrap {
    max-height: clamp(340px, calc(100dvh - 245px), 580px);
  }
}

@media (min-width: 981px) and (max-height: 700px) {
  .top {
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .workspace {
    padding: 6px 14px 12px;
  }
  .cockpit-banner {
    padding: 4px 10px;
    margin-bottom: 5px;
    gap: 3px 10px;
  }
  .cockpit-sub {
    display: none;
  }
  .cockpit-pill {
    padding: 2.5px 6px;
  }
  .cockpit-pill-lbl {
    font-size: 8px;
  }
  .cockpit-pill-val {
    font-size: 12px;
  }
  .panel-head {
    padding: 6px 12px;
  }
  .table-toolbar {
    padding: 4px 10px;
  }
  .sales-entity-recon {
    padding: 4px 10px;
    gap: 6px;
  }
  .sales-entity-recon.single {
    padding: 0;
  }
  .sales-recon-card {
    padding: 0;
  }
  .sales-recon-head {
    margin-bottom: 0;
    padding: 3px 10px;
    font-size: 10.2px;
  }
  .sales-recon-metrics > span {
    padding: 4px 8px 4px;
  }
  .sales-recon-metrics small {
    font-size: 8px;
  }
  .sales-recon-metrics b {
    font-size: 10.6px;
  }
  .table-wrap {
    max-height: clamp(320px, calc(100dvh - 190px), 460px);
  }
  .panel-card:has(.sales-entity-recon) .table-wrap {
    max-height: clamp(300px, calc(100dvh - 220px), 430px);
  }
}

/* ============================================================================
   v9.0 — UNIFIED 4-KIOSK SUITE & BLUETOOTH ESC/POS THERMAL RECEIPT ENGINE
   (1: Sales Dispatch · 2: Raw Material · 3: Fuel & Lube · 4: Attendance Biometric)
   ============================================================================ */

/* Inline Thermal Print Mini Button & Single-Line Ticket # Cell in Registers */
.tkt-cell-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  vertical-align: middle;
}
.tkt-cell-inline .tkt-no-num {
  display: inline-block;
  min-width: 34px;
  font-variant-numeric: tabular-nums;
}
.tkt-cell-inline .tkt-print-mini {
  margin-left: 0;
  flex-shrink: 0;
}
.tkt-cell-inline .tkt-ot-badge,
.tkt-cell-inline .tkt-ah-badge,
.tkt-ot-badge.has-ico,
.tkt-ah-badge.has-ico {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  padding: 1px 4.5px !important;
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  flex-shrink: 0;
  vertical-align: middle;
}
.tkt-ot-badge svg.ic,
.tkt-ah-badge svg.ic {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  stroke-width: 2.1;
}
.rep-shift-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  color: var(--brass);
  vertical-align: -1px;
  cursor: help;
}
.rep-shift-ico svg.ic {
  width: 11px;
  height: 11px;
  stroke-width: 2;
}
.tkt-print-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 1px 4.5px;
  margin-left: 2px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--ink);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1.15;
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
}
.tkt-print-mini:hover {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
}

/* Context-Clean Topbar on Plant Kiosks & Universal Shared Registries */
body.is-kiosks-view .period-basis-row,
body.is-kiosks-view #newEntryBtn,
body.is-kiosks-view #mobileNewEntryBtn,
body.is-universal-view .period-basis-row {
  display: none !important;
}

.univ-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(192, 137, 47, 0.45);
  white-space: nowrap;
  flex-shrink: 0;
}

.univ-scope-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}

.univ-scope-pill[hidden] {
  display: none !important;
}

@media (max-width: 860px) {
  .univ-scope-pill {
    display: none !important;
  }
}

/* Locked Tablet Kiosk Shell Mode */
body.kiosk-locked .rail,
body.kiosk-locked #railResizer,
body.kiosk-locked .mobile-subnav,
body.kiosk-locked .mobile-bottom-dock,
body.kiosk-locked #mobileMenuBtn,
body.kiosk-locked #newEntryBtn,
body.kiosk-locked #mobileNewEntryBtn,
body.kiosk-locked #askIsabiBtn,
body.kiosk-locked #mobileAskIsabiBtn {
  display: none !important;
}
body.kiosk-locked .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

.kiosk-unlock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  color: var(--ink);
  font-size: 12.5px;
}
.kiosk-unlock-pin-input {
  width: 128px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  -webkit-text-security: disc;
}

/* 4-Kiosk Mode Switcher & Context-Aware Station / Printer Deck (Rev 10 Porcelain & Obsidian) */
.panel-card.kiosk-control-deck {
  margin: 0 0 12px;
  padding: 0;
  overflow: visible;
  z-index: 12;
}
.panel-card.kiosk-control-deck:has(.pa-select-wrap.open) {
  z-index: 40;
}

.kiosk-nav-strip {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-radius: 7px 7px 0 0;
  min-height: 44px;
}

.kiosk-mode-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kiosk-mode-tabs::-webkit-scrollbar {
  display: none;
}

.kiosk-mode-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px 8.5px;
  border: none;
  border-bottom: 2.5px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: "Archivo", sans-serif;
  font-size: 12.6px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.kiosk-mode-tab:hover:not(.active) {
  color: var(--ink);
  background: rgba(15, 30, 56, 0.028);
}
:root[data-theme="dark"] .kiosk-mode-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.04);
}
.kiosk-mode-tab.active {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--ink);
  background: transparent;
}
:root[data-theme="dark"] .kiosk-mode-tab.active {
  color: var(--ink);
  border-bottom-color: var(--brass);
}
.kiosk-tab-ico {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.14s ease;
}
.kiosk-mode-tab.active .kiosk-tab-ico {
  color: #2356A8;
}
:root[data-theme="dark"] .kiosk-mode-tab.active .kiosk-tab-ico {
  color: var(--brass);
}
.kiosk-tab-lbl {
  white-space: nowrap;
}
.kiosk-tab-live-pill {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: var(--good-bg);
  border: 1px solid color-mix(in srgb, var(--good) 36%, var(--line));
  color: var(--good);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

.kiosk-nav-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 6px 0;
}
.kiosk-nav-date {
  font-size: 11.2px;
  font-weight: 600;
  color: var(--muted);
  padding-right: 9px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.kiosk-printer-bar,
.kiosk-station-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 7px 14px;
  background: var(--surface-2);
  border-radius: 0 0 7px 7px;
}
.kiosk-printer-grp,
.kiosk-station-right {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}
.kiosk-station-right {
  margin-left: auto;
}
.kiosk-bar-lbl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

/* Porcelain Recessed Track + Elevated Keycap Segmented Controls */
.kiosk-seg-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(15, 30, 56, 0.048);
  border: 1px solid var(--line-strong);
  box-sizing: border-box;
}
:root[data-theme="dark"] .kiosk-seg-group {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--line-strong);
}
.kiosk-seg-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5.5px;
  height: 26px;
  padding: 0 9.5px;
  border: 1px solid transparent;
  border-radius: 4.5px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.kiosk-seg-btn .ksg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(100, 116, 139, 0.42);
  flex-shrink: 0;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.kiosk-seg-btn:hover:not(.active) {
  background: rgba(15, 30, 56, 0.038);
  color: var(--ink);
}
:root[data-theme="dark"] .kiosk-seg-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
}
.kiosk-seg-btn.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  border-color: var(--line-strong);
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 #2356A8;
}
:root[data-theme="dark"] .kiosk-seg-btn.active {
  background: var(--surface-elev, #182338);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 -1.5px 0 #60A5FA;
}
.kiosk-seg-btn[data-tone="sapphire"].active .ksg-dot {
  background: #2356A8;
  box-shadow: 0 0 0 2px rgba(35, 86, 168, 0.16);
}
:root[data-theme="dark"] .kiosk-seg-btn[data-tone="sapphire"].active .ksg-dot {
  background: #60A5FA;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.20);
}
.kiosk-seg-btn[data-tone="emerald"].active {
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 #1F7A4C;
}
.kiosk-seg-btn[data-tone="emerald"].active .ksg-dot {
  background: #1F7A4C;
  box-shadow: 0 0 0 2px rgba(31, 122, 76, 0.16);
}
:root[data-theme="dark"] .kiosk-seg-btn[data-tone="emerald"].active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 -1.5px 0 #4AD28A;
}
:root[data-theme="dark"] .kiosk-seg-btn[data-tone="emerald"].active .ksg-dot {
  background: #4AD28A;
  box-shadow: 0 0 0 2px rgba(74, 210, 138, 0.20);
}
.kiosk-seg-btn[data-tone="amber"].active {
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 #B45309;
}
.kiosk-seg-btn[data-tone="amber"].active .ksg-dot {
  background: #B45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.16);
}
:root[data-theme="dark"] .kiosk-seg-btn[data-tone="amber"].active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 -1.5px 0 #FBBF24;
}
:root[data-theme="dark"] .kiosk-seg-btn[data-tone="amber"].active .ksg-dot {
  background: #FBBF24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.20);
}

.kiosk-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 148px;
  max-width: 220px;
  height: 30px;
  padding: 4px 28px 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  color: var(--ink);
  font-size: 11.8px;
  font-weight: 600;
  cursor: pointer;
  text-overflow: ellipsis;
}
.kiosk-select:focus {
  outline: none;
  border-color: #2356A8;
}
.kiosk-printer-grp > .pa-select-wrap {
  width: 172px;
  min-width: 0;
  max-width: 210px;
  flex: 0 1 auto;
}
.kiosk-printer-grp > .pa-select-wrap > select.kiosk-select {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.kiosk-printer-grp .pa-select-menu {
  min-width: 220px;
}

.kiosk-onsite-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.4px;
  font-weight: 700;
  white-space: nowrap;
}
.kiosk-onsite-pill.has-onsite {
  background: var(--good-bg);
  border-color: color-mix(in srgb, var(--good) 40%, var(--line));
  color: var(--good);
}
.kiosk-live-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.kiosk-onsite-pill.has-onsite .kiosk-live-dot {
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent);
}
.kiosk-lock-pill-btn,
.kiosk-enrol-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  font-size: 11.4px;
  font-weight: 600;
  white-space: nowrap;
}

/* 1-Tap Quick-Preset Strip for Touch Operators */
.kiosk-quick-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 10px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.kiosk-quick-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.kiosk-quick-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-right: 2px;
}
.kiosk-qchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 11.4px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.kiosk-qchip:hover,
.kiosk-qchip.active {
  background: var(--surface);
  border-color: #2356A8;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.06);
}
:root[data-theme="dark"] .kiosk-qchip:hover,
:root[data-theme="dark"] .kiosk-qchip.active {
  border-color: var(--brass);
}

/* 2-Column Weighbridge / Quarry / Fuel Kiosk Workspace */
.kiosk-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.95fr);
  gap: 14px;
  padding: 0 0 18px;
  align-items: start;
}
.kiosk-work-grid.is-single-col {
  grid-template-columns: minmax(0, 860px);
}
.kiosk-work-grid .panel-card {
  margin: 0;
}
.panel-card.kiosk-form-pane {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.panel-card.kiosk-form-pane > .panel-head {
  border-radius: 7px 7px 0 0;
}
.kiosk-form-body {
  padding: 14px 16px;
}
.kiosk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-radius: 0 0 7px 7px;
}
.kiosk-action-note {
  font-size: 11.5px;
  color: var(--muted);
}
.kiosk-action-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.kiosk-big-print-btn {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
}

.kiosk-preview-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
#kioskRecentTable th,
#kioskRecentTable td,
#kioskAttFeedTable th,
#kioskAttFeedTable td {
  padding: 5.5px 6px;
  font-size: 11px;
}
#kioskRecentTable .kiosk-rec-name-cell {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#kioskRecentTable .kiosk-rec-name-cell strong,
#kioskRecentTable .kiosk-rec-name-cell .drv-sub {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#kioskRecentTable .kiosk-rec-print-cell {
  white-space: nowrap;
}
#kioskRecentTable .tkt-print-mini {
  padding: 2px 5px;
  margin-left: 2px;
}
.kiosk-thermal-meta {
  padding: 6px 14px;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.kiosk-thermal-stage {
  padding: 14px 12px;
  background: var(--surface-2);
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

/* Realistic Monochrome Thermal Paper Roll (80mm & 58mm) */
.thermal-paper-roll {
  background: #FFFFFF;
  color: #000000;
  font-family: "JetBrains Mono", "Courier New", monospace;
  border: 1px solid #D0D4DC;
  border-top: 4px dashed #B5BBC6;
  border-bottom: 4px dashed #B5BBC6;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(8, 17, 36, 0.14);
  padding: 14px 14px 16px;
  line-height: 1.35;
  box-sizing: border-box;
  max-width: 100%;
}
.thermal-paper-roll.paper-80mm {
  width: 320px;
  font-size: 11.2px;
}
.thermal-paper-roll.paper-58mm {
  width: 236px;
  font-size: 10px;
  padding: 10px 9px 12px;
}
.th-brand-crest {
  text-align: center;
  margin-bottom: 6px;
}
.th-brand-crest svg {
  display: block;
  margin: 0 auto 4px;
}
.th-co-name {
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: #000;
}
.th-doc-title {
  font-weight: 800;
  font-size: 12px;
  color: #000;
  margin-top: 1px;
}
.th-mode-pill {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border: 1px solid #000;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #000;
}
.th-sep {
  border-top: 1px dashed #000;
  margin: 6px 0;
}
.th-dsep {
  border-top: 2px solid #000;
  border-bottom: 1px solid #000;
  height: 2px;
  margin: 6px 0;
}
.th-ticket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}
.th-tkt-num {
  font-weight: 900;
  font-size: 13px;
  color: #000;
}
.th-ot-tag {
  padding: 1px 5px;
  background: #000;
  color: #FFF;
  font-size: 9.5px;
  font-weight: 800;
}
.th-tkt-date {
  font-size: 10px;
  color: #000;
}
.th-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0;
  color: #000;
}
.th-kv span {
  color: #222;
  flex-shrink: 0;
}
.th-kv b {
  text-align: right;
  font-weight: 700;
  color: #000;
  word-break: break-word;
}
.th-kv-lg {
  font-size: 12.5px;
  margin: 4px 0;
}
.th-sec-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
}
.th-item-title {
  font-size: 13px;
  font-weight: 900;
  color: #000;
  margin: 1px 0 3px;
}
.th-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 900;
  color: #000;
  margin: 4px 0;
}
.th-gatepass-box {
  border: 2px solid #000;
  padding: 6px 8px;
  text-align: center;
  margin: 6px 0;
}
.th-gatepass-qty {
  font-size: 13.5px;
  font-weight: 900;
  color: #000;
}
.th-gatepass-sub {
  font-size: 9.5px;
  font-weight: 700;
  color: #000;
  margin-top: 2px;
}
.th-notes {
  font-size: 10px;
  color: #000;
  margin: 3px 0;
}
.th-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 8px;
}
.th-sig-box {
  border-top: 1px solid #000;
  padding-top: 3px;
  text-align: center;
  font-size: 9px;
  color: #000;
}
.th-barcode-wrap {
  text-align: center;
  margin-top: 8px;
}
.thermal-barcode-svg {
  width: 100%;
  max-width: 220px;
  height: 38px;
  display: block;
  margin: 0 auto;
}
.th-barcode-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #000;
  margin-top: 2px;
}
.th-foot-caption {
  text-align: center;
  font-size: 8.8px;
  color: #333;
  margin-top: 6px;
}

/* Interactive Thermal Print Modal */
.thermal-modal-card {
  width: min(560px, 100%);
}
.thermal-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.thermal-modal-head h3 {
  margin: 2px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  color: var(--ink);
}
.thermal-modal-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.thermal-ctrl-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.thermal-ctrl-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.thermal-modal-body {
  padding: 16px;
  background: var(--surface-2);
  display: flex;
  justify-content: center;
  max-height: 62vh;
  overflow-y: auto;
}
.thermal-modal-foot {
  padding: 12px 16px;
  margin-top: 0;
}
.thermal-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Kiosk 4: Executive Staff Attendance Station (Optical 4:3 Face ID + Tactile 4-Digit PIN + Active Staff Roster) */
.kiosk-att-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 18px;
}
.kiosk-att-shell .panel-card {
  margin: 0;
}
.kiosk-att-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  align-items: stretch;
}
.kiosk-att-cam-card,
.kiosk-att-pin-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.panel-card.kiosk-att-pin-card {
  overflow: visible;
  z-index: 6;
}
.panel-card.kiosk-att-pin-card:has(.pa-select-wrap.open) {
  z-index: 30;
}
.panel-card.kiosk-att-pin-card > .panel-head {
  border-radius: 7px 7px 0 0;
}
.kiosk-att-cam-body,
.kiosk-att-pin-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

/* 4:3 Optical Camera Viewport — PWA.md §3.5 */
.kiosk-att-viewport {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
}
:root[data-theme="dark"] .kiosk-att-viewport {
  background: #0F172A;
}
.kiosk-att-viewport.is-standby {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.kiosk-att-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}
.kiosk-att-viewport.is-standby video {
  opacity: 0;
}
.kiosk-att-reticle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.kiosk-finder-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(15, 30, 56, 0.22);
  border-style: solid;
  border-width: 0;
  transition: border-color 0.18s ease;
}
:root[data-theme="dark"] .kiosk-finder-corner {
  border-color: rgba(255, 255, 255, 0.24);
}
.kiosk-att-viewport.is-live .kiosk-finder-corner {
  border-color: rgba(74, 210, 138, 0.85);
}
.kiosk-finder-corner.tl { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; }
.kiosk-finder-corner.tr { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.kiosk-finder-corner.bl { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
.kiosk-finder-corner.br { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }

.kiosk-att-oval {
  width: 46%;
  height: 68%;
  border: 2px dashed rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(11, 23, 48, 0.24);
  transition: opacity 0.18s ease;
}
.kiosk-att-viewport.is-standby .kiosk-att-oval {
  opacity: 0;
  box-shadow: none;
}
.kiosk-cam-standby-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 26px;
  text-align: center;
}
.kiosk-cam-standby-ico {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(35, 86, 168, 0.08);
  border: 1px solid rgba(35, 86, 168, 0.22);
  color: #2356A8;
  margin-bottom: 2px;
}
:root[data-theme="dark"] .kiosk-cam-standby-ico {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.28);
  color: #60A5FA;
}
.kiosk-cam-standby-ico svg {
  width: 20px;
  height: 20px;
}
.kiosk-cam-standby-card strong {
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.kiosk-cam-standby-card p {
  margin: 0;
  max-width: 295px;
  font-size: 12px;
  line-height: 1.48;
  color: var(--muted);
}
.kiosk-cam-start-btn {
  margin-top: 6px;
  padding: 8px 16px;
  font-size: 12.4px;
  font-weight: 700;
  border-radius: 6px;
}
.kiosk-att-cam-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kiosk-att-status {
  flex: 1;
  min-width: 0;
  padding: 7.5px 11px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11.8px;
  color: var(--muted);
  text-align: center;
}
.kiosk-att-status.ok {
  background: var(--good-bg);
  border-color: var(--good);
  color: var(--good);
  font-weight: 700;
}
.kiosk-att-status.warn {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--warn);
  font-weight: 700;
}
.kiosk-cam-stop-btn {
  flex-shrink: 0;
  font-size: 11.5px;
}

/* Confirmation Strip for Most Recent Real Punch (with 1-Tap Switch IN/OUT) */
.kiosk-last-punch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3.5px solid var(--good);
  box-shadow: var(--shadow-sm);
}
.kiosk-last-punch-card.is-out {
  border-left-color: #B45309;
}
.kiosk-lp-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.kiosk-lp-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
  font-size: 12.5px;
  min-width: 0;
}
.kiosk-lp-meta {
  font-size: 11.8px;
  color: var(--muted);
}
.kiosk-flip-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  border-color: var(--line-strong);
}

/* Centered Tactile 4-Digit PIN Module */
.kiosk-pin-module {
  width: 100%;
  max-width: 348px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.kiosk-pin-display-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.kiosk-pin-boxes {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kiosk-pin-slot {
  width: 44px;
  height: 44px;
  border-radius: 7px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 17px;
  font-weight: 800;
  box-shadow: inset 0 1px 2px rgba(15, 30, 56, 0.04);
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.kiosk-pin-slot.next {
  border-color: rgba(35, 86, 168, 0.55);
  box-shadow: 0 0 0 3px rgba(35, 86, 168, 0.09);
}
:root[data-theme="dark"] .kiosk-pin-slot.next {
  border-color: rgba(96, 165, 250, 0.65);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
}
.kiosk-pin-slot.filled {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.08);
}
:root[data-theme="dark"] .kiosk-pin-slot.filled {
  border-color: #60A5FA;
}
.kiosk-pin-hint {
  font-size: 11.6px;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}
.kiosk-pin-hint.ok {
  color: var(--good);
  font-weight: 700;
}
.kiosk-pin-hint.warn {
  color: var(--warn);
  font-weight: 700;
}

.kiosk-pin-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.kiosk-pad-key {
  min-height: 46px;
  padding: 10px 8px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.05), inset 0 -1px 0 rgba(15, 30, 56, 0.04);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.kiosk-pad-key:hover {
  border-color: #2356A8;
  background: var(--surface-2);
}
:root[data-theme="dark"] .kiosk-pad-key {
  background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
:root[data-theme="dark"] .kiosk-pad-key:hover {
  border-color: #60A5FA;
  background: var(--surface-elev, #182338);
}
.kiosk-pad-key:active {
  transform: translateY(1px);
}
.kiosk-pad-key.aux {
  font-size: 12.2px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
}
.kiosk-pad-key.go {
  font-size: 11.8px;
  font-weight: 700;
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass-strong, #A67320);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kiosk-pad-key.go:hover {
  background: #B37E24;
  border-color: #9E6E1D;
  color: #FFFFFF;
}
:root[data-theme="dark"] .kiosk-pad-key.go {
  background: #D9A54A;
  color: #0B1730;
  border-color: #F3CE85;
}
:root[data-theme="dark"] .kiosk-pad-key.go:hover {
  background: #E5B968;
}
.kiosk-pad-key.go.is-in {
  background: var(--good);
  color: #FFFFFF;
  border-color: var(--good);
}

/* Optional Supervisor Name Selector (quiet footer inside PIN card) */
.kiosk-manual-staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 348px;
  margin: 0 auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.kiosk-manual-lbl {
  font-size: 11.2px;
  font-weight: 600;
  color: var(--muted);
}
.kiosk-manual-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
}
.kiosk-manual-ctrl .pa-select-wrap,
.kiosk-manual-ctrl .kiosk-select {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  min-width: 0;
}

/* Full-Width Active Staff Roster & Daily Clock Log */
.kiosk-att-feed-card {
  overflow: hidden;
}
.kiosk-feed-head {
  gap: 10px;
}
.kiosk-feed-sub {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.4px;
  font-weight: 500;
  color: var(--muted);
}
.kiosk-feed-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.kiosk-roster-search {
  width: 215px;
  max-width: 100%;
  height: 30px;
  padding: 4px 10px;
  font-size: 12px;
}
.kiosk-status-quiet {
  font-size: 11.4px;
  font-weight: 600;
  color: var(--muted);
}
.kiosk-bio-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.kiosk-bio-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.8px;
  font-weight: 600;
  white-space: nowrap;
}
.kiosk-bio-tag.ok {
  background: var(--good-bg);
  border-color: color-mix(in srgb, var(--good) 35%, var(--line));
  color: var(--good);
  font-weight: 700;
}
.kiosk-pin-edit-link {
  appearance: none;
  border: none;
  background: transparent;
  padding: 2px 4px;
  color: #2356A8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
:root[data-theme="dark"] .kiosk-pin-edit-link {
  color: #60A5FA;
}
.kiosk-inline-pin-form {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kiosk-inline-pin-input {
  width: 74px;
  height: 27px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
}
.kiosk-mini-btn {
  height: 27px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}
.kiosk-quick-clock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 27px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 11.2px;
  font-weight: 700;
  white-space: nowrap;
}
.kiosk-quick-clock-btn.is-in {
  background: var(--good-bg);
  border-color: color-mix(in srgb, var(--good) 40%, var(--line));
  color: var(--good);
}
.kiosk-quick-clock-btn.is-in:hover {
  background: var(--good);
  border-color: var(--good);
  color: #FFFFFF;
}
.kiosk-quick-clock-btn.is-out {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  color: var(--ink);
}

@media (max-width: 1180px) {
  .kiosk-work-grid,
  .kiosk-work-grid.is-single-col,
  .kiosk-att-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .kiosk-unlock-bar,
  .panel-card.kiosk-control-deck,
  .kiosk-quick-strip {
    margin-left: 12px;
    margin-right: 12px;
  }
  .workspace > .kiosk-unlock-bar,
  .workspace > .panel-card.kiosk-control-deck {
    margin-top: 10px;
  }
  .workspace > .kiosk-unlock-bar + .panel-card.kiosk-control-deck {
    margin-top: 0;
  }
  .kiosk-work-grid,
  .kiosk-att-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .kiosk-nav-strip {
    flex-wrap: wrap;
    padding: 0 10px;
  }
  .kiosk-nav-date {
    display: none;
  }
  .kiosk-station-right {
    margin-left: 0;
  }
  .kiosk-feed-sub {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
  .kiosk-roster-search {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .kiosk-printer-grp,
  .kiosk-station-right {
    flex-wrap: wrap;
  }
  .kiosk-select,
  .kiosk-unlock-pin-input,
  .kiosk-roster-search,
  .kiosk-inline-pin-input {
    font-size: 16px !important;
  }
  .kiosk-select,
  .kiosk-printer-grp > .pa-select-wrap {
    max-width: 100%;
  }
}

@media print {
  body.printing-thermal-ticket .app-shell,
  body.printing-thermal-ticket .cockpit-banner,
  body.printing-thermal-ticket .thermal-modal-head,
  body.printing-thermal-ticket .thermal-modal-controls,
  body.printing-thermal-ticket .thermal-modal-foot {
    display: none !important;
  }
  body.printing-thermal-ticket #thermalPrintModal {
    position: static !important;
    background: #FFFFFF !important;
    padding: 0 !important;
    display: block !important;
  }
  body.printing-thermal-ticket .thermal-modal-card,
  body.printing-thermal-ticket .thermal-modal-body {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-height: none !important;
    background: #FFFFFF !important;
  }
}

/* ============================================================================
   v10.2 — Interactive Table Column Manager (Hide / Show, Widen / Narrow &
           Ephemeral Default Revert via js/table_columns.js)
   ============================================================================ */
.tbl-col-hidden {
  display: none !important;
}

table.has-col-resize {
  table-layout: fixed !important;
}

table.has-col-resize .tbl-col-resized {
  width: var(--col-custom-w) !important;
  min-width: var(--col-custom-w) !important;
  max-width: var(--col-custom-w) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.is-col-resizing,
body.is-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

table[data-col-mgr-id] thead th {
  position: relative;
}
table.ledger-table[data-col-mgr-id] thead th {
  position: sticky;
}

.tbl-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 6;
  touch-action: none;
  user-select: none;
}
.tbl-col-resizer::after {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 1px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.12s ease, top 0.12s ease, bottom 0.12s ease;
}
thead th:hover > .tbl-col-resizer::after {
  background: rgba(192, 137, 47, 0.45);
}
.tbl-col-resizer:hover::after,
.tbl-col-resizer.dragging::after {
  top: 0;
  bottom: 0;
  width: 2.5px;
  background: var(--brass);
}

.tbl-th-tools {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1;
}
thead th:hover > .tbl-th-tools,
thead th:focus-within > .tbl-th-tools {
  opacity: 0 !important;
  pointer-events: none !important;
}
.tbl-th-tool-btn {
  width: 16px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tbl-th-tool-btn:hover {
  background: var(--brass-tint);
  color: var(--brass);
}
.tbl-th-tool-btn.hide:hover {
  background: var(--crit-bg);
  color: var(--crit);
}

/* Toolbar "Columns" + "↺ Default" Wrapper & Popover */
.panel-card:has(.tbl-col-popover:not([hidden])),
.pbi-panel:has(.tbl-col-popover:not([hidden])),
.panel:has(.tbl-col-popover:not([hidden])),
.pa-subgrid-box:has(.tbl-col-popover:not([hidden])) {
  overflow: visible !important;
  position: relative;
  z-index: 35;
}

.tbl-col-mgr-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.tbl-col-trigger-btn,
.tbl-col-inline-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8.5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}
.tbl-col-trigger-btn:hover,
.tbl-col-inline-reset:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.tbl-col-trigger-btn.is-customized {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
}
.tbl-col-inline-reset {
  border-color: var(--brass-border);
  color: var(--brass);
  background: var(--brass-tint);
  font-weight: 700;
}
.tbl-col-badge {
  display: inline-block;
  padding: 1px 4.5px;
  border-radius: 999px;
  background: var(--brass);
  color: #0B1730;
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.15;
}

.tbl-col-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 312px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--brass-border);
  border-top: 3px solid var(--brass);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 95;
  text-align: left;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
:root[data-theme="dark"] .tbl-col-popover {
  background: #101D33;
  border-color: rgba(217, 165, 74, 0.45);
}

.tbl-col-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.tbl-col-pop-title strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.tbl-col-pop-title small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}

.tbl-col-pop-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3.5px 8px;
  border-radius: 5px;
  border: 1px solid var(--brass);
  background: var(--brass-tint);
  color: var(--brass);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.tbl-col-pop-reset:hover:not(:disabled) {
  background: var(--brass);
  color: #0B1730;
}
.tbl-col-pop-reset:disabled {
  opacity: 0.42;
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  cursor: default;
}

.tbl-col-pop-list {
  max-height: 290px;
  overflow-y: auto;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tbl-col-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.tbl-col-pop-row:hover {
  background: var(--surface-2);
  border-color: var(--line);
}
.tbl-col-pop-row.is-hidden .tbl-col-pop-name {
  color: var(--muted);
  text-decoration: line-through;
}
.tbl-col-pop-row.is-resized {
  background: rgba(192, 137, 47, 0.06);
}

.tbl-col-pop-chk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}
.tbl-col-pop-chk input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--brass);
  flex-shrink: 0;
  cursor: pointer;
}
.tbl-col-pop-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tbl-col-pop-size {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.tbl-col-sz-btn {
  width: 21px;
  height: 21px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tbl-col-sz-btn:hover:not(:disabled) {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--brass);
}
.tbl-col-sz-btn:disabled,
.tbl-col-sz-val:disabled {
  opacity: 0.38;
  cursor: default;
}
.tbl-col-sz-val {
  min-width: 48px;
  height: 21px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: "Instrument Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 10.2px;
  font-weight: 600;
}
.tbl-col-sz-val.custom {
  border-color: var(--brass-border);
  background: var(--brass-tint);
  color: var(--brass);
  font-weight: 700;
}

.tbl-col-pop-foot {
  padding: 6px 10px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 768px) {
  .tbl-th-tools {
    display: none !important;
  }
  .tbl-col-popover {
    right: 0;
    width: min(300px, calc(100vw - 28px));
  }
}

@media print {
  .tbl-col-mgr-wrap,
  .tbl-col-resizer,
  .tbl-th-tools,
  .col-filter-bar,
  .th-filter-btn,
  .col-filter-popover {
    display: none !important;
  }
}

/* ==========================================================================
   Multi-Column Filter Engine (.col-filter-bar, .th-filter-btn, .col-filter-popover)
   ========================================================================== */
.col-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  max-width: 100%;
  box-sizing: border-box;
}
.col-filter-bar:not(.has-active),
.col-filter-bar[hidden],
.cf-controls,
.cf-bar-lbl,
.cf-pill-trigger {
  display: none !important;
}
.col-filter-bar.has-active {
  background: linear-gradient(90deg, var(--brass-tint) 0%, var(--surface-2) 100%);
  border-bottom-color: var(--brass-border);
}
.cf-active-lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.cf-active-lbl svg {
  color: var(--brass);
  flex-shrink: 0;
}
.cf-bar-lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.cf-bar-lbl svg {
  color: var(--brass);
  flex-shrink: 0;
}
.cf-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.cf-item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}
.cf-pill-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
  max-width: 210px;
  min-width: 0;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.cf-pill-trigger:hover {
  border-color: var(--brass);
  background: var(--surface-2);
}
.cf-pill-trigger.is-active {
  border-color: var(--brass);
  background: var(--brass-tint);
  box-shadow: inset 0 0 0 1px rgba(181, 131, 42, 0.15);
}
.cf-pill-key {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.cf-pill-trigger.is-active .cf-pill-key {
  color: var(--ink);
}
.cf-pill-val {
  font-weight: 700;
  color: var(--brass);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}
.cf-pill-trigger.is-active .cf-pill-val {
  color: var(--brass);
}
.cf-pill-caret {
  font-size: 9.5px;
  color: var(--muted);
  line-height: 1;
  margin-left: 1px;
}
.cf-select {
  display: none !important;
}
.cf-active-strip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.cf-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.25;
}
.cf-active-pill b {
  color: var(--brass);
  font-weight: 800;
}
.cf-pill-x {
  font-size: 10px;
  font-weight: 800;
  margin-left: 2px;
  opacity: 0.75;
}
.cf-active-pill:hover {
  background: var(--brass);
  color: #fff;
}
.cf-active-pill:hover b,
.cf-active-pill:hover .cf-pill-x {
  color: #fff;
}
.cf-clear-all-btn {
  padding: 2.5px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cf-clear-all-btn:hover {
  border-color: var(--crit);
  color: var(--crit);
  background: var(--crit-bg);
}

/* Column Header Filter Trigger — out-of-flow floating overlay badge (0px inline width, hidden until hover or active filter) */
th.sortable {
  position: relative;
}
th.sortable .th-lbl {
  display: inline;
  vertical-align: middle;
}
.th-filter-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  box-shadow: 0 2px 6px rgba(11, 23, 48, 0.16);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
th.sortable:hover .th-filter-btn,
th.sortable:focus-within .th-filter-btn {
  opacity: 1;
  pointer-events: auto;
  background: var(--surface);
  border-color: var(--brass);
  color: var(--brass);
}
.th-filter-btn:hover,
.th-filter-btn.active {
  opacity: 1;
  pointer-events: auto;
  background: var(--brass) !important;
  border-color: var(--brass) !important;
  color: #fff !important;
}
th.sortable.th-filtered,
th.sortable.col-filtered {
  box-shadow: inset 0 -2px 0 var(--brass);
  background: color-mix(in srgb, var(--brass) 8%, var(--surface-2));
}

/* Column Header & Pill Filter Popover */
.col-filter-popover {
  position: fixed;
  z-index: 9500;
  width: 284px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  box-shadow: 0 14px 36px rgba(8, 17, 34, 0.26);
  color: var(--ink);
  overflow: hidden;
  font-size: 12px;
}
.cf-pop-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.cf-pop-hdr-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cf-pop-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cf-pop-title {
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-pop-close {
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
}
.cf-pop-close:hover {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.cf-pop-sort-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.cf-pop-sort-btn {
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.cf-pop-sort-btn:hover,
.cf-pop-sort-btn.active {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--brass);
  font-weight: 700;
}
.cf-pop-custom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 6px;
}
.cf-pop-input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 5.5px 9px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 11.5px;
  outline: none;
}
.cf-pop-input:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-tint);
}
.cf-pop-apply-btn {
  padding: 5.5px 10px;
  border-radius: 5px;
  border: 1px solid var(--brass);
  background: var(--brass);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.cf-pop-apply-btn:hover {
  filter: brightness(1.06);
}
.cf-pop-quick-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--line);
}
.cf-pop-qpill {
  flex: 1 1 auto;
  padding: 3.5px 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.cf-pop-qpill:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.cf-pop-qpill.active {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--brass);
  font-weight: 700;
}
.cf-pop-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 6px;
}
.cf-pop-opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.cf-pop-opt[hidden] {
  display: none !important;
}
.cf-pop-opt:hover {
  background: var(--surface-2);
}
.cf-pop-opt.active {
  background: var(--brass-tint);
  color: var(--brass);
  font-weight: 700;
}
.cf-pop-opt-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.cf-pop-opt-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.cf-pop-opt-cnt {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5px 5px;
  font-variant-numeric: tabular-nums;
}
.cf-pop-opt.active .cf-pop-opt-cnt {
  color: var(--brass);
  border-color: var(--brass);
  background: var(--surface);
}
.cf-pop-check {
  color: var(--brass);
  font-weight: 800;
  font-size: 11px;
}
.cf-pop-empty {
  padding: 12px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}
.cf-pop-coltools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.cf-pop-coltools-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.cf-pop-coltools-btns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cf-pop-coltool-btn {
  padding: 2.5px 7px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.cf-pop-coltool-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}
.cf-pop-coltool-hide:hover {
  border-color: var(--crit);
  color: var(--crit);
}

@media (max-width: 768px) {
  .col-filter-bar {
    padding: 5px 8px;
    gap: 5px;
  }
  .cf-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .cf-controls::-webkit-scrollbar {
    display: none;
  }
  .cf-item {
    flex-shrink: 0;
  }
  .th-filter-btn {
    display: none !important;
  }
}

/* ==========================================================================
   Multi-Select Supplier Category Control & Hauler Fleet Strip
   ========================================================================== */
.pa-multiselect-wrap {
  position: relative;
  width: 100%;
}

.pa-multiselect-trigger {
  width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 28px 0 10px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.pa-multiselect-wrap.open .pa-multiselect-trigger,
.pa-multiselect-trigger:focus-visible {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(192, 137, 47, 0.16);
  outline: none;
}

.pa-ms-chips {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 34px;
  color: var(--ink);
}

.pa-ms-placeholder {
  font-size: 12px;
  color: var(--muted);
}

.pa-ms-chip {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.pa-ms-chip.is-hauler-chip {
  color: var(--ink);
}

.pa-ms-sep {
  color: var(--muted);
  font-weight: 400;
}

.pa-ms-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.pa-multiselect-menu {
  min-width: 240px;
}

.pa-ms-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

.pa-ms-head-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.pa-ms-quick-btn {
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.pa-ms-quick-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.pa-ms-rows-scroll {
  max-height: none;
  overflow-y: visible;
}

.pa-ms-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 7px 10px;
  cursor: pointer;
}

.pa-ms-option .pa-suggest-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.pa-ms-chk-box {
  width: 15px;
  height: 15px;
  border-radius: 3.5px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  color: #0B1730;
  flex-shrink: 0;
}

.pa-ms-option.is-selected .pa-ms-chk-box {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}

.pa-owner-trucks-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px dashed var(--brass-border);
  font-size: 11.8px;
}

.pa-owner-trucks-lbl {
  color: var(--ink);
  white-space: nowrap;
}

.pa-owner-trucks-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ==========================================================================
   3-Card Fleet & Counterparty Architecture Guide Strip (#fleetCounterpartyGuide)
   ========================================================================== */
.pa-registry-guide-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.pa-reg-guide-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.pa-reg-guide-card:hover {
  border-color: var(--brass);
  box-shadow: 0 2px 8px rgba(11, 23, 48, 0.08);
}
.pa-reg-guide-card.is-active {
  border-color: var(--brass);
  background: var(--brass-tint);
  box-shadow: inset 0 2px 0 var(--brass);
}
.pa-reg-guide-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.pa-reg-guide-step {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brass);
}
.pa-reg-guide-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}
.pa-reg-guide-card.is-active .pa-reg-guide-badge {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
}
.pa-reg-guide-title {
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.pa-reg-guide-desc {
  font-size: 11.2px;
  line-height: 1.38;
  color: var(--muted);
}
@media (max-width: 900px) {
  .pa-registry-guide-strip {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   v11.3 — Interactive Segmented Date Control ([DD] - [MMM] - [YYYY] [📅])
           & Date / Period Facilitator Popover (#dateFacilitatorPopover)
   ========================================================================== */
.date-seg-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 98px;
  min-width: 98px;
  max-width: 98px;
  flex-shrink: 0;
}

.date-seg-slot.pbi-seg-slot {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  padding: 2.5px 5px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-sizing: border-box;
}

.date-native-proxy {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.date-seg-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  gap: 0.5px;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 10.6px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  user-select: none;
}

.date-seg-pill.is-open-end {
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--brass);
  background: rgba(192, 137, 47, 0.10);
}

.date-seg-part {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.25;
  padding: 1.5px 1.5px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}

.date-seg-part:hover,
.date-seg-part:focus-visible {
  background: var(--brass-tint);
  color: var(--brass);
  box-shadow: inset 0 0 0 1px var(--brass-border);
  outline: none;
}

.date-seg-part.is-active-seg {
  background: var(--brass);
  color: #0B1730;
  font-weight: 800;
}

.date-seg-dash {
  color: var(--muted);
  font-size: 9.5px;
  padding: 0 0.5px;
  pointer-events: none;
}

.date-seg-cal {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 1.5px 2px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s ease, background 0.12s ease;
}

.date-seg-cal:hover {
  color: var(--brass);
  background: var(--brass-tint);
}

@media (max-width: 1350px) and (min-width: 861px) {
  .date-seg-slot:not(.pbi-seg-slot) {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
  }
  .date-seg-slot:not(.pbi-seg-slot) .date-seg-pill {
    font-size: 9.8px;
  }
  .date-seg-slot:not(.pbi-seg-slot) .date-seg-part {
    padding: 1px 1px;
  }
}

@media (max-width: 860px) {
  .date-seg-slot,
  .date-seg-slot.pbi-seg-slot {
    flex: 1;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .date-seg-pill {
    justify-content: center;
    gap: 2px;
    font-size: 11px;
  }
}

/* Floating Interactive Date & Period Facilitator Popover — Rev 10 Locked Institutional Deck */
.date-facilitator-popover {
  position: fixed;
  z-index: 260;
  width: 448px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  box-shadow: 0 16px 40px rgba(15, 30, 56, 0.16), 0 2px 8px rgba(15, 30, 56, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.date-facilitator-popover[hidden] {
  display: none !important;
}

:root[data-theme="dark"] .date-facilitator-popover {
  background: #122038;
  border-color: var(--line-strong);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.56);
}

.df-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

:root[data-theme="dark"] .df-head {
  background: #152542;
}

.df-head-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.df-active-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.df-range-readout {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11.8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

.df-range-to {
  font-weight: 500;
  color: var(--muted);
  margin: 0 2px;
}

.df-step-period-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.df-step-period-btn:hover {
  background: var(--surface);
  border-color: var(--brass);
  color: var(--brass);
}

.df-head-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.df-reset-btn,
.df-close-btn {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 5px;
  height: 24px;
  padding: 0 8px;
  font-size: 10.6px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.df-close-btn {
  width: 24px;
  padding: 0;
}

.df-reset-btn:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--brass);
}

.df-close-btn:hover {
  background: rgba(200, 51, 59, 0.10);
  color: var(--crit);
  border-color: rgba(200, 51, 59, 0.35);
}

.df-mode-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

:root[data-theme="dark"] .df-mode-bar {
  background: rgba(255, 255, 255, 0.025);
}

.df-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(15, 30, 56, 0.05);
  border: 1px solid var(--line);
}

:root[data-theme="dark"] .df-tabs {
  background: rgba(255, 255, 255, 0.05);
}

.df-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 4px;
  height: 26px;
  padding: 0 6px;
  font-family: inherit;
  font-size: 11.2px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.df-tab:hover:not(.active) {
  color: var(--ink);
  background: rgba(15, 30, 56, 0.035);
}

.df-tab.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 var(--brass);
}

:root[data-theme="dark"] .df-tab.active {
  background: var(--surface-elev);
  color: var(--ink);
  border-color: var(--line-strong);
}

.df-target-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.df-target-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 5px;
  height: 25px;
  padding: 0 6px;
  font-size: 10.4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

:root[data-theme="dark"] .df-target-btn {
  background: rgba(255, 255, 255, 0.03);
}

.df-target-btn b {
  font-weight: 700;
  color: var(--ink);
}

.df-target-btn:hover:not(.active) {
  color: var(--ink);
  border-color: var(--line-strong);
}

.df-target-btn.active {
  border-color: #2356A8;
  background: rgba(35, 86, 168, 0.07);
  color: var(--ink);
}

:root[data-theme="dark"] .df-target-btn.active {
  border-color: #5B9CF0;
  background: rgba(91, 156, 240, 0.14);
}

.df-body {
  padding: 9px 10px;
  height: 264px;
  min-height: 264px;
  max-height: 264px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-sizing: border-box;
}

@media (max-height: 540px) {
  .df-body {
    height: 210px;
    min-height: 210px;
    max-height: 210px;
  }
}

.df-sec-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.8px;
  color: var(--muted);
  flex-shrink: 0;
}

.df-sec-hint b {
  color: var(--ink);
}

.df-sec-sub {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Year Selector Grid — All 7 Years Visible Without Scroll */
.df-year-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.df-year-card {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: 7px;
  padding: 8px 8px 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  min-height: 82px;
  box-sizing: border-box;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

:root[data-theme="dark"] .df-year-card {
  background: rgba(255, 255, 255, 0.03);
}

.df-year-card:hover {
  border-color: #2356A8;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(15, 30, 56, 0.07);
}

:root[data-theme="dark"] .df-year-card:hover {
  border-color: #5B9CF0;
  background: var(--surface-elev);
}

.df-year-card.in-range {
  border-color: rgba(35, 86, 168, 0.30);
}

.df-year-card.is-end-active,
.df-year-card.is-full-active {
  border-color: #2356A8;
  background: rgba(35, 86, 168, 0.06);
  box-shadow: inset 0 -2px 0 var(--brass);
}

:root[data-theme="dark"] .df-year-card.is-end-active,
:root[data-theme="dark"] .df-year-card.is-full-active {
  border-color: #5B9CF0;
  background: rgba(91, 156, 240, 0.13);
}

.df-yc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.df-yc-num {
  font-family: "Archivo", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.df-yc-tag {
  font-size: 8.8px;
  font-weight: 700;
  padding: 1px 4.5px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
}

.df-yc-tag.has-data {
  color: #1F7A4C;
  border-color: rgba(31, 122, 76, 0.28);
  background: rgba(31, 122, 76, 0.08);
}

:root[data-theme="dark"] .df-yc-tag.has-data {
  color: #4AD28A;
  border-color: rgba(74, 210, 138, 0.32);
  background: rgba(74, 210, 138, 0.12);
}

.df-yc-stat {
  font-size: 9.8px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.df-yc-stat b {
  color: var(--ink);
  font-weight: 600;
}

.df-yc-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.df-yc-drill {
  font-size: 9.4px;
  font-weight: 600;
  color: var(--muted);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.df-yc-drill:hover {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line-strong);
}

/* Month Selector 3x4 Quarter-Aligned Keycap Grid */
.df-month-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.df-year-strip,
.df-mo-mini-strip,
.df-quarter-strip {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  flex-wrap: nowrap;
}

.df-mo-mini-strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
}

.df-yr-pill,
.df-mo-mini,
.df-q-pill,
.df-nav-mini {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 4px;
  height: 23px;
  padding: 0 5px;
  font-size: 10.2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.df-mo-mini {
  padding: 0;
  text-align: center;
  font-size: 9.8px;
}

.df-q-pill:hover,
.df-yr-pill:hover:not(.active),
.df-mo-mini:hover:not(.active),
.df-nav-mini:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--brass);
}

.df-yr-pill.active,
.df-mo-mini.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 var(--brass);
}

:root[data-theme="dark"] .df-yr-pill.active,
:root[data-theme="dark"] .df-mo-mini.active {
  background: var(--surface-elev);
}

.df-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  flex: 1;
}

.df-month-card {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

:root[data-theme="dark"] .df-month-card {
  background: rgba(255, 255, 255, 0.03);
}

.df-month-card:hover {
  border-color: #2356A8;
  background: var(--surface);
  box-shadow: 0 2px 5px rgba(15, 30, 56, 0.06);
}

:root[data-theme="dark"] .df-month-card:hover {
  border-color: #5B9CF0;
  background: var(--surface-elev);
}

.df-month-card.in-range {
  border-color: rgba(35, 86, 168, 0.28);
  background: rgba(35, 86, 168, 0.035);
}

:root[data-theme="dark"] .df-month-card.in-range {
  border-color: rgba(91, 156, 240, 0.28);
  background: rgba(91, 156, 240, 0.06);
}

.df-month-card.is-end-active,
.df-month-card.is-full-active {
  border-color: #2356A8;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 30, 56, 0.09), inset 0 -2px 0 var(--brass);
}

:root[data-theme="dark"] .df-month-card.is-end-active,
:root[data-theme="dark"] .df-month-card.is-full-active {
  border-color: #5B9CF0;
  background: var(--surface-elev);
}

.df-mc-top {
  display: flex;
  align-items: center;
  gap: 5px;
}

.df-mc-num {
  font-family: Consolas, ui-monospace, monospace;
  font-size: 9.8px;
  font-weight: 600;
  color: var(--muted);
}

.df-mc-name {
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.df-mc-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: #1F7A4C;
  flex-shrink: 0;
}

:root[data-theme="dark"] .df-mc-dot {
  background: #4AD28A;
}

.df-mc-days-link {
  margin-left: auto;
  font-size: 9.2px;
  font-weight: 600;
  color: var(--muted);
  padding: 1px 4.5px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.df-month-card:hover .df-mc-days-link {
  opacity: 1;
}

.df-mc-days-link:hover {
  background: rgba(35, 86, 168, 0.10);
  color: #2356A8;
}

:root[data-theme="dark"] .df-mc-days-link:hover {
  background: rgba(91, 156, 240, 0.18);
  color: #88C4FA;
}

.df-mc-stat {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Week Selector List */
.df-week-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.df-week-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.df-week-row:hover,
.df-week-row.active {
  border-color: #2356A8;
  background: var(--surface);
  box-shadow: inset 0 -1.5px 0 var(--brass);
}

:root[data-theme="dark"] .df-week-row:hover,
:root[data-theme="dark"] .df-week-row.active {
  border-color: #5B9CF0;
  background: var(--surface-elev);
}

.df-wk-main strong {
  display: block;
  font-size: 11.2px;
  color: var(--ink);
}

.df-wk-main small {
  display: block;
  font-size: 9.8px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.df-wk-badge {
  font-size: 9.8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.df-wk-badge.has-data {
  color: #1F7A4C;
  border-color: rgba(31, 122, 76, 0.28);
  background: rgba(31, 122, 76, 0.08);
}

/* Interactive Calendar Day Grid */
.df-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.df-cal-nav-left,
.df-cal-nav-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.df-cal-jumper {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 5px;
  height: 24px;
  padding: 0 8px;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.df-cal-jumper:hover {
  background: var(--surface);
  border-color: var(--brass);
}

.df-mini-act {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 4px;
  height: 24px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.df-mini-act:hover {
  color: var(--ink);
  border-color: var(--brass);
  background: var(--surface);
}

.df-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  font-size: 9.6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 1px 0;
  flex-shrink: 0;
}

.df-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2.5px;
  flex: 1;
}

.df-cal-day {
  position: relative;
  height: 29px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

:root[data-theme="dark"] .df-cal-day {
  background: rgba(255, 255, 255, 0.03);
}

.df-cal-day.is-outside {
  opacity: 0.38;
}

.df-cal-day:hover:not(:disabled) {
  border-color: #2356A8;
  background: var(--surface);
}

.df-cal-day.in-range {
  background: rgba(35, 86, 168, 0.08);
  border-color: rgba(35, 86, 168, 0.18);
}

:root[data-theme="dark"] .df-cal-day.in-range {
  background: rgba(91, 156, 240, 0.12);
  border-color: rgba(91, 156, 240, 0.24);
}

.df-cal-day.is-from,
.df-cal-day.is-to {
  background: #2356A8 !important;
  color: #FFFFFF !important;
  border-color: #2356A8 !important;
  font-weight: 700;
}

:root[data-theme="dark"] .df-cal-day.is-from,
:root[data-theme="dark"] .df-cal-day.is-to {
  background: #3B76CC !important;
  border-color: #5B9CF0 !important;
}

.df-cal-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--brass);
}

.df-cal-day i {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #1F7A4C;
  margin-top: 1px;
}

:root[data-theme="dark"] .df-cal-day i {
  background: #4AD28A;
}

.df-cal-day.is-from i,
.df-cal-day.is-to i {
  background: #FFFFFF;
}

/* Quick Presets Bar — Locked Single-Line Footer */
.df-presets-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

:root[data-theme="dark"] .df-presets-bar {
  background: rgba(255, 255, 255, 0.025);
}

.df-pre-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 6px;
  border-right: 1px solid var(--line-strong);
  flex-shrink: 0;
}

.df-pre-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.df-pre-chips::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.df-pre-chip {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  border-radius: 5px;
  height: 22px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.df-pre-chip:hover {
  color: var(--ink);
  border-color: var(--brass);
}

.df-pre-chip.active {
  background: var(--surface);
  color: var(--ink);
  border-color: #2356A8;
  box-shadow: inset 0 -1.5px 0 var(--brass);
}

/* ============================================================================
   EMBEDDED MODULE ANALYTICS & INSIGHTS HUB (.mod-analytics-hub)
   Renders domain analytics & moved Power BI pages directly inside each sidebar view
   ============================================================================ */
.mod-analytics-hub {
  margin-top: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.mod-analytics-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 2px solid var(--brass);
}

.mod-analytics-hub.is-collapsed .mod-analytics-bar {
  border-bottom-color: transparent;
}

.mod-analytics-hub.is-collapsed .mod-analytics-hdr {
  cursor: pointer;
}

.mod-analytics-hdr {
  min-width: 220px;
  flex: 1 1 280px;
}

.mod-analytics-eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass);
}

.mod-analytics-title {
  font-family: "Archivo", sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 1px;
}

.mod-analytics-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.mod-analytics-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mod-analytics-body {
  padding: 12px 14px 16px;
}

.mod-analytics-section + .mod-analytics-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}

.mod-analytics-hub .pbi-overview-bands,
.mod-analytics-hub .pbi-kpi-sec,
.mod-analytics-hub .pbi-sec-heading,
.mod-analytics-hub .pbi-grid-1,
.mod-analytics-hub .pbi-grid-2,
.mod-analytics-hub .pbi-grid-62-38 {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.mod-analytics-hub .pbi-grid-2:has(.table-wrap),
.mod-analytics-hub .pbi-grid-62-38:has(.table-wrap) {
  grid-template-columns: minmax(0, 1fr);
}

.mod-analytics-hub .ledger-table th,
.mod-analytics-hub .ledger-table td {
  padding: 5px 6px;
  font-size: 11px;
}

.mod-analytics-hub .ledger-table td.mono {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* === Rev 10 Institutional Vector Icon System (js/icons.js) === */
svg.ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  pointer-events: none;
}

.btn svg.ic,
.pa-cmd-btn svg.ic,
.rdl-tb-btn svg.ic,
.kiosk-qchip svg.ic,
.kiosk-toggle-pill svg.ic,
.kiosk-dir-btn svg.ic,
.grain-btn svg.ic,
.df-tab svg.ic,
.pa-lock-pill svg.ic,
.repdate-toggle-btn svg.ic,
.pa-admin-btn svg.ic,
.role-posture-pill svg.ic,
.perm-state-pill svg.ic,
.role-inspect-btn svg.ic,
.entity-picker-act-btn svg.ic {
  margin-right: 3px;
}

.btn svg.ic:only-child,
.tkt-print-mini svg.ic:only-child,
.tbl-print-icon svg.ic:only-child,
.mobile-theme-btn svg.ic:only-child,
.kiosk-tab-ico svg.ic:only-child,
.pa-rec-banner-ico svg.ic:only-child {
  margin-right: 0;
  vertical-align: 0;
}

/* Left Sidebar Module Icons */
.rail-nav .nav-ico {
  width: 14px;
  height: 14px;
  font-size: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.78;
  transition: color 0.14s, opacity 0.14s;
}
.rail-nav .nav-ico svg.ic {
  vertical-align: 0;
}
.rail-nav button.nav-item:hover .nav-ico,
.rail-nav a.rail-showcase-link:hover .nav-ico {
  color: var(--brass-strong);
  opacity: 1;
}
:root[data-theme="dark"] .rail-nav button.nav-item:hover .nav-ico,
:root[data-theme="dark"] .rail-nav a.rail-showcase-link:hover .nav-ico {
  color: var(--brass);
}
.rail-nav button.nav-item.on .nav-ico {
  color: var(--brass-strong);
  opacity: 1;
}
:root[data-theme="dark"] .rail-nav button.nav-item.on .nav-ico {
  color: var(--brass);
}
@media (min-width: 861px) {
  .app-shell.rail-narrow .rail-nav .nav-ico {
    width: 13px;
    height: 13px;
    font-size: 13px;
  }
}

/* Mobile Subnav Module Icons */
.m-subnav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 4px;
  opacity: 0.85;
  flex-shrink: 0;
}
.m-subnav-ico svg.ic {
  vertical-align: 0;
}
.m-subnav-pill.on .m-subnav-ico {
  opacity: 1;
  color: var(--brass);
}

/* Unified Thermal Ticket Print Action Pill (#sales, #raw, #fleet & #kiosks) */
#fuelPanel table.ledger-table thead th:nth-child(2),
#fuelPanel table.ledger-table tbody td:nth-child(2) {
  white-space: nowrap;
}
.tkt-print-mini,
.tbl-print-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--brass-strong);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.1s;
}
:root[data-theme="dark"] .tkt-print-mini,
:root[data-theme="dark"] .tbl-print-icon {
  color: var(--brass);
}
.tkt-print-mini:hover,
.tbl-print-icon:hover {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
}
:root[data-theme="dark"] .tkt-print-mini:hover,
:root[data-theme="dark"] .tbl-print-icon:hover {
  color: #0B1730;
}
.tkt-print-mini svg.ic,
.tbl-print-icon svg.ic {
  width: 12px;
  height: 12px;
  vertical-align: 0;
}

/* Kiosk Terminal Switcher Icon (Borderless Rev 10 Vector) */
.kiosk-tab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.14s ease;
}
.kiosk-mode-tab.active .kiosk-tab-ico {
  color: #2356A8;
}
:root[data-theme="dark"] .kiosk-mode-tab.active .kiosk-tab-ico {
  color: var(--brass);
}
.kiosk-bar-lbl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kiosk-bar-lbl svg.ic {
  color: var(--muted);
  vertical-align: 0;
}

/* Topbar Theme Toggle Compact Width Guard (1366x768 single-row invariant) */
#themeToggleBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  padding-right: 9px;
}
#themeToggleBtn svg.ic {
  font-size: 11.5px;
  vertical-align: 0;
}
#mobileThemeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#mobileThemeBtn svg.ic {
  font-size: 14px;
  vertical-align: 0;
}

/* Entry Modal Group Tabs & Record Inspector Banner Icon */
.pa-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pa-group-btn svg.ic {
  font-size: 12.5px;
  opacity: 0.85;
  vertical-align: 0;
  margin-right: 0;
}
.pa-rec-banner-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--brass-strong);
}
:root[data-theme="dark"] .pa-rec-banner-ico {
  color: var(--brass);
}

/* ============================================================================
   BUSINESS-CYCLE HUB HORIZONTAL IN-PAGE SUB-TAB BAR (#hubSubtabBar)
   Option A v14.0 — Consolidates 26 sidebar screens into 10 Hubs + crisp sub-tabs
   ============================================================================ */
.hub-subtab-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  margin: 0 0 12px 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom: 2px solid var(--brass-border);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hub-subtab-bar::-webkit-scrollbar {
  display: none;
  height: 0;
}

.hub-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: "Instrument Sans", sans-serif;
  font-size: 12.2px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.hub-subtab svg.ic {
  font-size: 13.5px;
  opacity: 0.85;
  vertical-align: 0;
}
.hub-subtab:hover {
  background: var(--brass-tint);
  color: var(--ink);
}
.hub-subtab.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(184, 136, 59, 0.22);
}
.hub-subtab.active svg.ic {
  opacity: 1;
  color: #0B1730;
}
:root[data-theme="dark"] .hub-subtab.active {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .hub-subtab.active svg.ic {
  color: #0B1730;
}

body.kiosk-locked .hub-subtab-bar {
  display: none !important;
}
@media print {
  .hub-subtab-bar {
    display: none !important;
  }
}
@media (max-width: 860px) {
  .hub-subtab-bar {
    margin: 0 0 9px 0;
    padding: 4px 5px;
    border-radius: 8px;
  }
  .hub-subtab {
    padding: 5.5px 9.5px;
    font-size: 11.6px;
    gap: 5px;
  }
}

/* ============================================================================
   v15.3 — CASH TILL 5300 CHARTS, DAILY TILL SHEET & INTERACTIVE CASHBOOK
   ============================================================================ */
.cf-register-head {
  align-items: center;
}

.cf-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2.5px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  max-width: 100%;
  flex-wrap: wrap;
}
:root[data-theme="dark"] .cf-mode-switch {
  background: rgba(9, 15, 28, 0.65);
}

.cf-mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.2px;
  font-weight: 700;
  padding: 4.5px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.cf-mode-btn span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.78;
}
.cf-mode-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.cf-mode-btn.active {
  background: var(--brass);
  color: #0B1730;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.12);
}
:root[data-theme="dark"] .cf-mode-btn.active {
  background: var(--brass);
  color: #0B1730;
}
.cf-mode-btn.active span {
  opacity: 0.92;
}

.cf-explainer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: linear-gradient(90deg, var(--brass-tint), var(--surface));
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 7px;
  min-width: 0;
}
.cf-explainer-copy {
  flex: 1 1 380px;
  min-width: 0;
  font-size: 11.6px;
  line-height: 1.45;
  color: var(--ink);
}
.cf-explainer-copy strong {
  color: var(--brass);
  letter-spacing: 0.01em;
}
.cf-explainer-copy em {
  color: var(--muted);
  font-style: normal;
}
.cf-grain-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  max-width: 100%;
}
.cf-grain-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.cf-live-strip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.4px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cf-live-strip b {
  font-family: var(--font-mono);
  font-weight: 700;
}
.cf-live-strip b.good { color: var(--good); }
.cf-live-strip b.crit { color: var(--crit); }

.cf-drill-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 14px;
  background: var(--brass-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.cf-drill-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brass);
}
.cf-active-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--brass);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.cf-active-pill:hover {
  background: var(--surface-2);
}
.cf-pill-x {
  font-weight: 800;
  color: var(--muted);
  font-size: 10px;
}
.cf-clear-all-btn {
  appearance: none;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 6px;
  padding: 3px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.cf-clear-all-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.cf-flow-badge {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.8px;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-right: 4px;
  white-space: nowrap;
}
.cf-flow-badge.in {
  background: rgba(28, 140, 70, 0.14);
  color: var(--good);
}
.cf-flow-badge.out {
  background: rgba(200, 51, 59, 0.14);
  color: var(--crit);
}
.cf-flow-badge.fx {
  background: rgba(192, 137, 47, 0.16);
  color: var(--brass);
}
.cf-cat-txt {
  font-weight: 600;
  color: var(--ink);
}
#tillRecentPanel .ledger-table th,
#tillRecentPanel .ledger-table td {
  padding: 5.5px 6px;
  font-size: 11.2px;
}
.cf-cat-cell {
  white-space: nowrap;
}
.cf-party-cell {
  max-width: 138px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-party-cell .cf-party-btn,
.cf-party-cell .rel-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.cf-detail-cell {
  max-width: 176px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.cf-ref-cell {
  max-width: 116px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-date-jump,
.cf-party-btn,
.cf-month-drill-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.cf-date-jump {
  font-weight: 700;
  border-bottom: 1px dotted var(--line-strong);
}
.cf-party-btn {
  font-weight: 700;
  border-bottom: 1px dashed rgba(192, 137, 47, 0.45);
}
.cf-month-drill-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin: -2px -4px;
  border-radius: 5px;
  transition: background 0.12s ease, color 0.12s ease;
}
.cf-month-drill-btn span {
  font-size: 10px;
  color: var(--muted);
}
.cf-date-jump:hover,
.cf-party-btn:hover,
.cf-month-drill-btn:hover,
.cf-month-drill-btn.active {
  color: var(--brass);
}
.cf-month-drill-btn:hover,
.cf-month-drill-btn.active {
  background: var(--brass-tint);
}
.cf-month-drill-btn.active span {
  color: var(--brass);
}

tr.cf-day-row,
tr.cf-party-row,
tr.cf-bridge-row {
  cursor: pointer;
}
tr.cf-day-row:hover td,
tr.cf-party-row:hover td,
tr.cf-bridge-row:hover td {
  background: var(--brass-tint) !important;
}

svg .cf-chart-bar {
  cursor: pointer;
}
svg .cf-chart-bar.is-selected .cf-bar-hit {
  fill: rgba(46, 116, 181, 0.12);
  fill-opacity: 1;
}
svg .cf-chart-bar:hover .cf-bar-hit {
  fill: rgba(192, 137, 47, 0.10);
  fill-opacity: 1;
}

@media (max-width: 768px) {
  .cf-explainer-bar {
    padding: 8px 11px;
    gap: 8px;
  }
  .cf-explainer-copy {
    flex-basis: 100%;
    font-size: 11px;
  }
  .cf-detail-cell {
    max-width: 190px;
  }
  .cf-clear-all-btn {
    margin-left: 0;
  }
}

/* ============================================================================
   REV 10 "LEDGER" STRUCTURAL, DENSITY & TABLE ERGONOMICS ARCHITECTURE (v16.0)
   1. Single-Row Desktop Command Bar (header.top, 48px) with zero truncation
   2. Flush Architectural Underline Sub-Tab Strip (#hubSubtabBar) with 6-tab fit
   3. Unified Workspace Grid Alignment (+40px horizontal table width)
   4. 4-Column Metric Strip (.cockpit-banner.has-insights & .insight-card meters)
   5. Single-Row Table Toolbar, Compact Entity Recon & 12-15 Visible Ledger Rows
   6. Quiet Relational Table Typography (.rel-link) & Row-Hover Print Affordance
   ============================================================================ */

/* 1. Single-Row Desktop Command Bar (header.top) */
@media (min-width: 861px) {
  .top {
    flex-wrap: nowrap;
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    gap: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .top-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 7px;
  }
  /* Hide duplicate "Hide Menu" text when sidebar is already open; show "Show Menu" pill when collapsed */
  .app-shell:not(.rail-collapsed) #mobileMenuBtn {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
  }
  .app-shell:not(.rail-collapsed) #mobileMenuBtn:hover {
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--ink);
  }
  .app-shell:not(.rail-collapsed) #sidebarToggleLbl {
    display: none;
  }
  /* Visually hide redundant 75-char topbar eyebrow on desktop (controls right beside it already show Scope, Period & Basis) */
  #topbarEyebrow {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .crumb {
    min-width: 0;
  }
  .crumb b {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    max-width: 150px;
  }
  .tools {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 4px;
    margin-left: auto;
  }
  .entity-bar.entity-picker-box {
    width: 224px;
    min-width: 224px;
    max-width: 224px;
  }
  .entity-picker-trigger {
    height: 30px;
    padding: 2px 6px;
    gap: 4px;
    background: var(--surface-2);
    border-color: var(--line-strong);
  }
  .entity-picker-trigger .ep-seg {
    gap: 3px;
    align-items: center;
  }
  .entity-picker-trigger .ep-seg .ep-seg-kicker {
    font-size: 7.8px;
    letter-spacing: 0.04em;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(192, 137, 47, 0.14);
    color: var(--brass);
    line-height: 1.15;
  }
  .entity-picker-trigger .ep-seg-ind .ep-seg-kicker {
    background: rgba(15, 30, 56, 0.06);
    color: var(--muted);
  }
  :root[data-theme="dark"] .entity-picker-trigger .ep-seg-ind .ep-seg-kicker {
    background: rgba(255, 255, 255, 0.08);
  }
  .entity-picker-trigger .ep-seg-ind {
    flex: 0 1 auto;
    max-width: 84px;
  }
  .entity-picker-trigger .ep-seg-ind strong {
    font-size: 9.8px;
    font-weight: 600;
    color: var(--muted);
  }
  .entity-picker-trigger .ep-seg-co {
    flex: 1 1 auto;
    min-width: 108px;
  }
  .entity-picker-trigger .ep-seg-co strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
  }
  .period-basis-row {
    gap: 3.5px;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .grain-switch,
  .date-range-bar,
  .basis-switch {
    background: var(--surface-2);
    border-color: var(--line);
    height: 30px;
    align-items: center;
  }
  .grain-btn {
    padding: 3px 4px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
  }
  .date-range-bar {
    padding: 1px 4.5px;
    gap: 3.5px;
  }
  .date-seg-slot:not(.pbi-seg-slot) {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
  }
  .date-seg-slot:not(.pbi-seg-slot) .date-seg-pill {
    font-size: 9.4px;
    padding: 1px 0;
    gap: 0.5px;
  }
  .date-seg-slot:not(.pbi-seg-slot) .date-seg-part {
    padding: 1px 1.2px;
  }
  .date-seg-slot:not(.pbi-seg-slot) .date-seg-cal {
    padding: 1.5px 1.5px;
    margin-left: 1px;
  }
  .date-range-bar .date-range-reset {
    margin-left: 1.5px;
  }
  .basis-btn {
    padding: 3px 4.5px;
    font-size: 10px;
  }
  .tool-actions {
    gap: 3.5px;
  }
  .tool-actions .btn,
  .tool-actions .ask-isabi-trigger {
    height: 30px;
    padding: 0 6.5px;
    font-size: 10.5px;
    gap: 3.5px;
    border-radius: 6px;
  }
}

/* 2. Flush Architectural Underline Sub-Tab Strip (#hubSubtabBar - Zero Right-Edge Overflow) */
.hub-subtab-bar {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 16px;
  margin: -8px -16px 10px -16px;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
:root[data-theme="dark"] .hub-subtab-bar {
  background: var(--plate);
  border-bottom-color: var(--line);
}
.hub-subtab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 8px 7.5px 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.4px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.hub-subtab svg.ic {
  font-size: 12.5px;
  opacity: 0.72;
  color: var(--muted);
}
.hub-subtab:hover {
  background: rgba(15, 30, 56, 0.035);
  color: var(--ink);
}
:root[data-theme="dark"] .hub-subtab:hover {
  background: rgba(255, 255, 255, 0.04);
}
.hub-subtab.active,
:root[data-theme="dark"] .hub-subtab.active {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  border-bottom: 2px solid var(--brass);
  font-weight: 700;
  box-shadow: none;
}
.hub-subtab.active svg.ic,
:root[data-theme="dark"] .hub-subtab.active svg.ic {
  opacity: 1;
  color: var(--brass);
}
.hub-subtab-pill {
  font-style: normal;
  font-size: 9.6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--m-chip);
  color: var(--muted);
  border: 1px solid transparent;
}
.hub-subtab-pill.warn,
.hub-subtab.active .hub-subtab-pill.warn {
  background: #FEF3C7;
  color: #9A4A06;
  border-color: rgba(217, 119, 6, 0.26);
}
.hub-subtab-pill.crit,
.hub-subtab.active .hub-subtab-pill.crit {
  background: #FEE2E2;
  color: #B4232A;
  border-color: rgba(200, 51, 59, 0.28);
}
:root[data-theme="dark"] .hub-subtab-pill.warn,
:root[data-theme="dark"] .hub-subtab.active .hub-subtab-pill.warn {
  background: rgba(245, 158, 11, 0.18);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.36);
}
:root[data-theme="dark"] .hub-subtab-pill.crit,
:root[data-theme="dark"] .hub-subtab.active .hub-subtab-pill.crit {
  background: rgba(239, 68, 68, 0.20);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.40);
}
@media (max-width: 860px) {
  .hub-subtab-bar {
    margin: 0 0 8px 0;
    padding: 0 8px;
  }
  .hub-subtab {
    padding: 7px 8px 6px;
    font-size: 11.5px;
  }
}

/* 3. Unified Workspace Grid Alignment & 4-Column Metric Strip (.cockpit-banner & .insight-card) */
@media (min-width: 861px) {
  .main-area > .hub-subtab-bar {
    flex-shrink: 0;
    margin: 0;
    padding: 0 16px;
    position: relative;
    z-index: 18;
  }
  .workspace {
    padding: 8px 16px 18px;
  }
  .main-area > .hub-subtab-bar ~ .workspace {
    padding-top: 10px;
  }
  .workspace > .panel-card {
    margin: 0 0 10px 0;
  }
  .workspace > .kpis {
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }
  .workspace > .ops-strip {
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .workspace > .row2,
  .workspace > .row3,
  .workspace > .split-grid-2,
  .workspace > .pbi-grid-2,
  .workspace > .pbi-grid-62-38,
  .workspace > .pbi-grid-3,
  .workspace > .pbi-grid-1 {
    padding: 0;
    margin: 0 0 12px 0;
    gap: 12px;
  }
}

.cockpit-banner {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 10px 0;
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .cockpit-banner {
  background: var(--plate);
  border-color: var(--line);
}
.cockpit-banner.has-insights {
  padding: 0;
  overflow: hidden;
}
.cockpit-pills.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
}
.cockpit-pills.insight-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cockpit-pills.insight-grid > .cockpit-pill.insight-card {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 9px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.cockpit-pills.insight-grid > .cockpit-pill.insight-card:last-of-type {
  border-right: 0;
}
.cockpit-pill-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
  min-width: 0;
}
.cockpit-pill.insight-card .cockpit-pill-lbl {
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cockpit-pill-tag {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.cockpit-pill-tag.good {
  background: var(--good-bg);
  color: var(--good);
}
.cockpit-pill-tag.warn {
  background: var(--warn-bg);
  color: var(--warn);
}
.cockpit-pill-tag.brass,
.cockpit-pill-tag.info {
  background: var(--brass-tint);
  color: var(--brass);
}
.cockpit-pill.insight-card .cockpit-pill-val {
  font-family: "Archivo", sans-serif;
  font-stretch: 112%;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cockpit-pill.insight-card .cockpit-pill-val.brass {
  color: var(--brass);
}
.cockpit-pill.insight-card .cockpit-pill-val.emerald {
  color: var(--good);
}
.cockpit-pill.insight-card .cockpit-pill-val small {
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.cockpit-meter {
  display: flex;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 30, 56, 0.08);
  overflow: hidden;
  margin-bottom: 5px;
  gap: 0;
}
:root[data-theme="dark"] .cockpit-meter {
  background: rgba(255, 255, 255, 0.10);
}
.cockpit-meter-fill {
  display: block;
  height: 100%;
  border-radius: 0 999px 999px 0;
}
.cockpit-meter:has(.secondary) .cockpit-meter-fill {
  border-radius: 0;
}
/* Never use black/ink on progress meters or bars — chromatic institutional palette across all tones */
.cockpit-meter-fill.primary {
  background: var(--chart-navy);
}
.tone-brass .cockpit-meter-fill.primary {
  background: var(--chart-brass);
}
.tone-emerald .cockpit-meter-fill.primary,
.tone-good .cockpit-meter-fill.primary {
  background: var(--chart-good);
}
.tone-steel .cockpit-meter-fill.primary,
.tone-info .cockpit-meter-fill.primary {
  background: var(--chart-navy);
}
.tone-sky .cockpit-meter-fill.primary {
  background: var(--chart-steel);
}
.tone-amber .cockpit-meter-fill.primary,
.tone-warn .cockpit-meter-fill.primary {
  background: var(--chart-amber);
}
.tone-crit .cockpit-meter-fill.primary {
  background: var(--chart-crit);
}
.tone-plum .cockpit-meter-fill.primary {
  background: var(--chart-plum);
}
.tone-teal .cockpit-meter-fill.primary {
  background: var(--teal);
}
.tone-slate .cockpit-meter-fill.primary {
  background: var(--chart-slate);
}
.cockpit-meter-fill.secondary {
  background: #9DB2CC;
  opacity: 0.62;
}
:root[data-theme="dark"] .cockpit-meter-fill.secondary {
  background: rgba(148, 175, 210, 0.38);
  opacity: 1;
}
.cockpit-meter-fill.secondary.sec-emerald {
  background: var(--chart-good);
  opacity: 0.86;
}
.cockpit-meter-fill.secondary.sec-steel {
  background: var(--chart-steel);
  opacity: 0.88;
}
.cockpit-meter-fill.secondary.sec-brass {
  background: var(--chart-brass);
  opacity: 0.86;
}
.cockpit-meter-fill.secondary.sec-amber {
  background: var(--chart-amber);
  opacity: 0.86;
}
.cockpit-meter-fill.secondary.sec-crit {
  background: var(--chart-crit);
  opacity: 0.86;
}
.cockpit-pill-sub {
  font-size: 10.8px;
  color: var(--muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.cockpit-pill-sub b {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 1020px) {
  .cockpit-pills.insight-grid:not(.cols-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cockpit-pills.insight-grid:not(.cols-3) > .cockpit-pill.insight-card {
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 720px) {
  .cockpit-pills.insight-grid.cols-3 {
    grid-template-columns: 1fr;
  }
  .cockpit-pills.insight-grid.cols-3 > .cockpit-pill.insight-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .cockpit-pills.insight-grid.cols-3 > .cockpit-pill.insight-card:last-of-type {
    border-bottom: 0;
  }
}
@media (max-width: 600px) {
  .cockpit-pills.insight-grid {
    grid-template-columns: 1fr;
  }
  .cockpit-pills.insight-grid > .cockpit-pill.insight-card:last-of-type {
    border-bottom: 0;
  }
}

/* 4. Table Toolbar, Unclipped Filter Chip Bar, Compact Entity Recon Strip & Expanded Above-the-Fold Table Height */
@media (min-width: 861px) {
  .table-toolbar {
    padding: 6px 12px;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--surface);
  }
  .table-toolbar > div:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap !important;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
  }
  .table-toolbar > div:last-child {
    flex-shrink: 0;
    margin-left: auto;
  }
  .table-toolbar .search-input {
    min-width: 240px;
    width: clamp(240px, 18vw, 270px);
    height: 30px;
    padding: 4px 10px 4px 28px;
    font-size: 11.8px;
    background-color: var(--surface-2);
    border-color: var(--line);
    flex-shrink: 0;
  }
  #salesPanel .table-toolbar .search-input,
  #fuelPanel .table-toolbar .search-input,
  #equipPanel .table-toolbar .search-input,
  #driversOtPanel .table-toolbar .search-input,
  #tillRecentPanel .table-toolbar .search-input,
  #extEntriesPanel .table-toolbar .search-input {
    min-width: 190px;
    width: clamp(190px, 15vw, 228px);
    flex-shrink: 1;
  }
  .table-toolbar .chip-bar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px;
    overflow-x: visible;
    max-width: 100%;
  }
  .table-toolbar .filter-chip {
    border: 0;
    border-radius: 4px;
    padding: 3.5px 7.5px;
    font-size: 11px;
    font-weight: 500;
    background: transparent;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .table-toolbar .filter-chip:hover:not(.active) {
    color: var(--ink);
    background: rgba(15, 30, 56, 0.04);
  }
  .table-toolbar .filter-chip.active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 30, 56, 0.08);
  }
  :root[data-theme="dark"] .table-toolbar .filter-chip.active {
    background: var(--surface-elev);
    color: var(--ink);
  }
  .table-toolbar .btn {
    height: 30px;
    padding: 0 10px;
    font-size: 11.2px;
    border-radius: 6px;
  }
  .sales-entity-recon {
    padding: 9px 12px;
    gap: 10px;
  }
  .sales-entity-recon.single {
    padding: 0;
  }
  .sales-recon-card {
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 30, 56, 0.03);
  }
  .sales-recon-card.single-card {
    border-radius: 0;
    box-shadow: none;
  }
  .sales-recon-head {
    margin-bottom: 0;
    padding: 5.5px 14px;
    font-size: 11.4px;
    flex-wrap: nowrap;
  }
  .sales-recon-act {
    font-size: 10.5px;
    font-weight: 600;
  }
  .table-wrap {
    max-height: clamp(410px, calc(100dvh - 175px), 710px);
  }
  .panel-card:has(> .panel-head .ph-sub) > .table-wrap {
    max-height: clamp(340px, calc(100dvh - 210px), 675px);
  }
  .panel-card:has(.sales-entity-recon) .table-wrap {
    max-height: clamp(385px, calc(100dvh - 215px), 665px);
  }
  .panel-card:has(> .payroll-cutoff-bar:not(.is-pbi)) > .table-wrap {
    max-height: clamp(330px, calc(100dvh - 224px), 660px);
  }
  .panel-card:has(> .payroll-cutoff-bar:not(.is-pbi)):has(> .col-filter-bar.has-active) > .table-wrap {
    max-height: clamp(305px, calc(100dvh - 258px), 628px);
  }
}

/* 5. Quiet Relational Table Typography (.rel-link) & Row-Hover Print Affordance (.tkt-print-mini) */
.rel-link,
table.ledger-table .rel-link {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid rgba(15, 30, 56, 0.16);
  border-bottom-style: solid;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
:root[data-theme="dark"] .rel-link,
:root[data-theme="dark"] table.ledger-table .rel-link {
  color: var(--ink);
  border-bottom-color: rgba(233, 236, 242, 0.22);
}
.rel-link .rel-arr,
table.ledger-table .rel-link .rel-arr {
  color: var(--muted-2);
  opacity: 0.45;
  font-size: 9px;
  transition: opacity 0.12s, color 0.12s;
}
.rel-link:hover,
:root[data-theme="dark"] .rel-link:hover {
  color: var(--brass);
  background: var(--brass-tint);
  border-bottom-color: var(--brass);
}
.rel-link:hover .rel-arr {
  color: var(--brass);
  opacity: 0.95;
}

.tkt-print-mini {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted-2);
  opacity: 0.48;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}
tr.rrow:hover .tkt-print-mini,
.tkt-print-mini:focus-visible {
  opacity: 0.92;
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink);
}
.tkt-print-mini:hover,
:root[data-theme="dark"] .tkt-print-mini:hover {
  opacity: 1;
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}

/* 8. Interactive KPI Insight Drill-Downs & Structured Architectural Entity Recon Strip (v16.2) */
.insight-drill {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  border-bottom: 1px dashed rgba(192, 137, 47, 0.32);
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.cockpit-pill-tag.insight-drill {
  padding: 2px 6px;
  margin: 0;
  border-bottom: 1px solid rgba(192, 137, 47, 0.25);
}
.insight-drill:hover {
  color: var(--brass) !important;
  background: var(--brass-tint);
  border-bottom-color: var(--brass);
}
.insight-drill.is-active {
  color: var(--brass) !important;
  background: rgba(192, 137, 47, 0.14);
  border-bottom: 1.5px solid var(--brass);
  font-weight: 700;
}

/* Architectural Ledger Strip & Semantic Metric Columns inside .sales-entity-recon (v18.5) */
.sales-recon-head > .badge {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-weight: 700;
  letter-spacing: 0.015em;
}
:root[data-theme="dark"] .sales-recon-head > .badge {
  background: var(--surface-elev);
  color: var(--ink);
  border-color: var(--line-strong);
}
.sales-recon-head .recon-head-mix {
  display: inline-flex;
  align-items: center;
  width: 50px;
  height: 4.5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  gap: 0;
  flex-shrink: 0;
  margin-left: 2px;
}
.sales-recon-head .recon-head-mix .rhm-seg {
  display: block;
  height: 100%;
}
.sales-recon-head .recon-head-mix .rhm-emerald {
  background: #1F7A52;
}
.sales-recon-head .recon-head-mix .rhm-steel {
  background: #2E74B5;
}
:root[data-theme="dark"] .sales-recon-head .recon-head-mix .rhm-emerald {
  background: #34B37A;
}
:root[data-theme="dark"] .sales-recon-head .recon-head-mix .rhm-steel {
  background: #5B9CF0;
}
.sales-recon-head .recon-head-mix-lbl {
  text-decoration: none;
  font-size: 10.2px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.sales-recon-head .recon-head-mix-lbl em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.sales-recon-head .recon-co-pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  background: rgba(15, 30, 56, 0.045);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}
:root[data-theme="dark"] .sales-recon-head .recon-co-pills {
  background: rgba(255, 255, 255, 0.05);
}
.sales-recon-head:has(.recon-co-pills) .sales-recon-reset {
  margin-left: 4px;
}
.sales-recon-head .recon-co-pill {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10.2px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.sales-recon-head .recon-co-pill:hover:not(.active) {
  color: var(--ink);
  background: rgba(15, 30, 56, 0.04);
}
.sales-recon-head .recon-co-pill.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.08);
}
:root[data-theme="dark"] .sales-recon-head .recon-co-pill.active {
  background: var(--surface-elev);
}
@media (max-width: 860px) {
  .sales-recon-head .recon-head-mix,
  .sales-recon-head .recon-head-mix-lbl,
  .sales-recon-head .recon-co-pills {
    display: none;
  }
}

.sales-recon-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0;
  background: var(--surface);
}
.sales-entity-recon:not(.single) .sales-recon-metrics {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 0;
}
.sales-recon-metrics > span {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 13px 7px;
  margin: 0;
  min-width: 0;
  transition: background 0.14s, box-shadow 0.14s;
}
.sales-recon-metrics > span:last-child {
  border-right: 0;
}
.sales-entity-recon:not(.single) .sales-recon-metrics > span {
  padding: 7px 10px 6px;
}
@media (max-width: 1680px) {
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) > span:nth-child(3n) {
    border-right: 0;
  }
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) > span:nth-child(-n+3) {
    border-bottom: 1px solid var(--line);
  }
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) > span:nth-child(5):last-child {
    grid-column: span 2;
  }
}
@media (max-width: 1100px) {
  .sales-recon-metrics,
  .sales-entity-recon:not(.single) .sales-recon-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sales-recon-metrics > span:nth-child(3n) {
    border-right: 0;
  }
  .sales-recon-metrics:has(> span:nth-child(4)) > span:nth-child(-n+3) {
    border-bottom: 1px solid var(--line);
  }
  .sales-recon-metrics > span:nth-child(5):last-child {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .sales-recon-metrics,
  .sales-entity-recon:not(.single) .sales-recon-metrics,
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sales-recon-metrics > span:nth-child(n),
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) > span:nth-child(n) {
    grid-column: auto;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .sales-recon-metrics > span:nth-child(2n),
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) > span:nth-child(2n) {
    border-right: 0;
  }
  .sales-recon-metrics > span:last-child,
  .sales-recon-metrics > span:nth-last-child(2):nth-child(odd),
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) > span:last-child,
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) > span:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
  .sales-recon-metrics > span:nth-child(5):last-child,
  .sales-entity-recon:not(.single) .sales-recon-metrics:has(> span:nth-child(5)) > span:nth-child(5):last-child {
    grid-column: span 2;
    border-right: 0;
  }
}

/* Reconciled Total Column: calm warm-stone ledger paper shading (zero muddy yellow/orange) */
.sales-recon-metrics > span[data-tile-tone="total"] {
  background: #F5F4F0;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="total"] {
  background: rgba(255, 255, 255, 0.036);
}
.sales-recon-metrics > span[data-tile-tone="total"] small {
  color: #334155;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="total"] small {
  color: #CBD5E1;
}
.sales-recon-metrics > span[data-tile-tone="total"] b {
  font-weight: 800;
}

/* Interactive Filter Slice Hover & Active Selection Indicator */
.sales-recon-metrics > span.recon-metric-slice {
  cursor: pointer;
}
.sales-recon-metrics > span.recon-metric-slice:hover {
  background: rgba(15, 30, 56, 0.028);
}
:root[data-theme="dark"] .sales-recon-metrics > span.recon-metric-slice:hover {
  background: rgba(255, 255, 255, 0.045);
}
.sales-recon-metrics > span.recon-metric-slice.is-active {
  background: rgba(15, 30, 56, 0.055);
  box-shadow: inset 0 2px 0 var(--ink);
}
:root[data-theme="dark"] .sales-recon-metrics > span.recon-metric-slice.is-active {
  background: rgba(217, 165, 74, 0.10);
  box-shadow: inset 0 2px 0 var(--brass);
}
.sales-recon-metrics > span.recon-metric-slice.is-active small {
  color: var(--ink);
}
:root[data-theme="dark"] .sales-recon-metrics > span.recon-metric-slice.is-active small {
  color: var(--brass);
}

/* Label Typography & Restrained Semantic Dots (ONLY on Cash/Credit split, Total marker & >0 Exceptions) */
.sales-recon-metrics small {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}
.sales-entity-recon:not(.single) .sales-recon-metrics small {
  font-size: 8.2px;
  letter-spacing: 0.03em;
  gap: 4px;
}
.sales-recon-metrics > span[data-tile-tone="emerald"] small::before,
.sales-recon-metrics > span[data-tile-tone="steel"] small::before,
.sales-recon-metrics > span[data-tile-tone="warn"] small::before,
.sales-recon-metrics > span[data-tile-tone="total"] small::before {
  content: "";
  display: inline-block;
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sales-recon-metrics > span[data-tile-tone="emerald"] small::before {
  background: #1F7A52;
}
.sales-recon-metrics > span[data-tile-tone="steel"] small::before {
  background: #2E74B5;
}
.sales-recon-metrics > span[data-tile-tone="warn"] small::before {
  background: #B45309;
}
.sales-recon-metrics > span[data-tile-tone="total"] small::before {
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: var(--brass);
  opacity: 0.90;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="emerald"] small::before {
  background: #34B37A;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="steel"] small::before {
  background: #5B9CF0;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="warn"] small::before {
  background: #F59E0B;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="total"] small::before {
  background: var(--brass);
  opacity: 0.85;
}

.sales-recon-metrics b {
  font-family: "Archivo", sans-serif;
  font-stretch: 108%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sales-entity-recon:not(.single) .sales-recon-metrics b {
  font-size: 13.2px;
}
.sales-recon-metrics b .num-sym {
  font-style: normal;
  font-size: 0.74em;
  font-weight: 600;
  opacity: 0.62;
  margin-right: 1px;
  vertical-align: 0.06em;
}
.sales-recon-metrics b .num-cents {
  font-style: normal;
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.54;
  letter-spacing: 0;
}
.sales-recon-metrics b .num-unit {
  font-style: normal;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--muted);
}
.sales-recon-metrics em.recon-tile-sub {
  display: block;
  font-style: normal;
  font-size: 9.3px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.sales-entity-recon:not(.single) .sales-recon-metrics em.recon-tile-sub {
  font-size: 8.8px;
}
.sales-recon-metrics u.recon-tile-bar {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(15, 30, 56, 0.075);
  overflow: hidden;
  margin-top: 4px;
}
:root[data-theme="dark"] .sales-recon-metrics u.recon-tile-bar {
  background: rgba(255, 255, 255, 0.09);
}
.sales-recon-metrics u.recon-tile-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #94A3B8;
}
.sales-recon-metrics > span[data-tile-tone="navy"] u.recon-tile-bar > i {
  background: var(--chart-navy);
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="navy"] u.recon-tile-bar > i {
  background: var(--chart-navy);
}
.sales-recon-metrics > span[data-tile-tone="total"] u.recon-tile-bar > i {
  background: var(--chart-brass);
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="total"] u.recon-tile-bar > i {
  background: var(--chart-brass);
}
.sales-recon-metrics > span[data-tile-tone="emerald"] u.recon-tile-bar > i {
  background: #1F7A52;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="emerald"] u.recon-tile-bar > i {
  background: #34B37A;
}
.sales-recon-metrics > span[data-tile-tone="steel"] u.recon-tile-bar > i {
  background: #2E74B5;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="steel"] u.recon-tile-bar > i {
  background: #5B9CF0;
}
.sales-recon-metrics > span[data-tile-tone="warn"] u.recon-tile-bar > i {
  background: #B45309;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="warn"] u.recon-tile-bar > i {
  background: #F59E0B;
}
.sales-recon-metrics > span[data-tile-tone="slate"] u.recon-tile-bar > i {
  background: #94A3B8;
}
:root[data-theme="dark"] .sales-recon-metrics > span[data-tile-tone="slate"] u.recon-tile-bar > i {
  background: #64748B;
}

/* 9. Proportional Inline Magnitude Data Bars (.td-databar) & Multi-Row Live Calculator (#liveSelectionBar) */
table.ledger-table tbody td.td-databar {
  background-image:
    linear-gradient(90deg, rgba(192, 137, 47, 0.18) var(--bar-pct, 0%), transparent var(--bar-pct, 0%)),
    linear-gradient(90deg, rgba(192, 137, 47, 0.055) var(--bar-pct, 0%), transparent var(--bar-pct, 0%));
  background-size: 100% 2.5px, 100% 100%;
  background-repeat: no-repeat;
  background-position: left bottom, left top;
}
:root[data-theme="dark"] table.ledger-table tbody td.td-databar {
  background-image:
    linear-gradient(90deg, rgba(200, 157, 84, 0.30) var(--bar-pct, 0%), transparent var(--bar-pct, 0%)),
    linear-gradient(90deg, rgba(200, 157, 84, 0.08) var(--bar-pct, 0%), transparent var(--bar-pct, 0%));
}

tr.rrow td:first-child {
  position: relative;
}
.ledger-table tbody td:is(:first-child, .tbl-first-vis-cell) u.row-sel-dot {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(11, 23, 48, 0.10);
}
.ledger-table tbody td:is(:first-child, .tbl-first-vis-cell):has(.badge-app, .void-btn:not(.row-void-hover)) u.row-sel-dot {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin-left: 4px;
  vertical-align: middle;
  box-shadow: none;
}
u.row-sel-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: transparent;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}
u.row-sel-dot::after {
  content: "✓";
}
tr.rrow:hover u.row-sel-dot {
  opacity: 0.72;
}
u.row-sel-dot:hover {
  opacity: 1 !important;
  border-color: var(--brass);
  color: var(--brass);
}
tr.rrow.is-row-selected u.row-sel-dot {
  opacity: 1;
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}
tr.rrow.is-row-selected > td {
  background-color: rgba(192, 137, 47, 0.11) !important;
}

.live-selection-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--brass);
  box-shadow: 0 10px 28px rgba(15, 30, 56, 0.14);
  max-width: calc(100vw - 24px);
  overflow-x: auto;
}
:root[data-theme="dark"] .live-selection-bar {
  background: #14223B;
  color: #F4F2EE;
  border-color: rgba(200, 157, 84, 0.45);
  box-shadow: 0 10px 28px rgba(3, 8, 18, 0.48);
}
.live-selection-bar[hidden] {
  display: none !important;
}
.lsb-head {
  display: flex;
   flex-direction: column;
  gap: 1px;
  padding-right: 12px;
  border-right: 1px solid var(--line);
  flex-shrink: 0;
}
.lsb-badge {
  font-family: "Archivo", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brass);
  white-space: nowrap;
}
.lsb-hint {
  font-size: 9.5px;
  color: var(--muted);
  white-space: nowrap;
}
.lsb-metrics {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.lsb-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lsb-cell small {
  font-family: "Archivo", sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}
.lsb-cell b {
  font-family: "Archivo", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lsb-cell.lsb-tot b {
  color: var(--brass);
  font-size: 14.5px;
}
.lsb-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  flex-shrink: 0;
}
.lsb-btn {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.lsb-btn:hover {
  background: var(--brass-tint);
  border-color: var(--brass);
}
.lsb-btn.lsb-clear {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.35);
  color: var(--crit);
}
:root[data-theme="dark"] .lsb-btn.lsb-clear {
  background: rgba(220, 53, 69, 0.18);
  border-color: rgba(220, 53, 69, 0.4);
  color: #FFB3B8;
}
.lsb-btn.lsb-clear:hover {
  background: rgba(220, 53, 69, 0.32);
}

/* ============================================================================
   v17.1 — 360° RECORD INSPECTOR CLICK-TO-EDIT CELLS & TYPED MODIFY DRAWER
   ============================================================================ */
.inspector-cell.is-editable-cell {
  cursor: pointer;
  position: relative;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.inspector-cell.is-editable-cell:hover {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass-tint) 65%, var(--surface));
  box-shadow: 0 2px 8px rgba(196, 154, 69, 0.12);
}
.inspector-cell.is-editable-cell small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.insp-cell-edit-ico {
  font-style: normal;
  font-size: 11px;
  color: var(--brass);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.inspector-cell.is-editable-cell:hover .insp-cell-edit-ico,
.inspector-cell.is-empty-cell .insp-cell-edit-ico {
  opacity: 0.9;
}
.inspector-cell.is-empty-cell {
  border-style: dashed;
}
.insp-empty-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brass);
  opacity: 0.88;
}
.inspector-cell.is-editable-cell:hover .insp-empty-add {
  opacity: 1;
  text-decoration: underline;
}
.insp-modify-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
.insp-modify-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--brass-border);
}
.insp-mod-live-calc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
}
.insp-mod-live-calc span b {
  color: var(--ink);
  font-family: var(--font-mono);
  margin-left: 3px;
}

/* ============================================================================
   v17.5 — DAILY PLANT, EXTERNAL FACTORIES & WORKFORCE MACHINE MAP (#workforce_map)
   ============================================================================ */
.wf-day-command-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3.5px solid var(--brass);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wf-day-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.wf-day-stepper {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.wf-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--brass-border);
  background: var(--brass-tint);
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
}
.wf-date-badge input[type="date"] {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  height: 26px;
}
.wf-alert-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(200, 51, 59, 0.42);
  background: var(--crit-bg);
  color: var(--crit);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wf-alert-jump-btn:hover {
  box-shadow: 0 2px 8px rgba(200, 51, 59, 0.20);
}
.wf-day-strip {
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 3px;
}
.wf-day-pill {
  flex: 0 0 auto;
  min-width: 96px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.wf-day-pill:hover {
  border-color: var(--brass);
}
.wf-day-pill.is-active {
  background: var(--brass);
  border-color: #B4883E;
  color: #0B1730;
  box-shadow: 0 3px 10px rgba(184, 136, 59, 0.24);
}
:root[data-theme="dark"] .wf-day-pill.is-active {
  background: #D9A54A;
  border-color: #F3CE85;
  color: #0B1730;
}
.wf-day-pill-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
}
.wf-day-pill-sub {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.wf-day-pill.is-active .wf-day-pill-sub {
  color: rgba(11, 23, 48, 0.78);
}
.wf-day-alert-dot {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 800;
  background: var(--crit);
  color: #FFFFFF;
}
.wf-day-alert-dot.warn {
  background: var(--warn);
}

/* Headcount Distribution Proportional Map Bar */
.wf-proportion-wrap {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.wf-proportion-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
}
.wf-prop-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.wf-prop-pill.is-active {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-tint);
}
.wf-prop-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.wf-prop-dot.plant { background: var(--good); }
.wf-prop-dot.ext { background: var(--steel); }
.wf-prop-dot.abs { background: var(--crit); }

.wf-proportion-bar {
  display: flex;
  height: 11px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
  gap: 0;
}
.wf-prop-seg {
  height: 100%;
  transition: width 0.22s ease;
  cursor: pointer;
}
.wf-prop-seg.plant { background: var(--good); }
.wf-prop-seg.ext { background: var(--steel); }
.wf-prop-seg.abs { background: var(--crit); }

/* 3-Zone Tactical Floorplan / Dispatch Map */
.wf-map-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: 12px;
  padding: 12px 14px 14px;
  align-items: start;
}
.wf-map-canvas.single-zone {
  grid-template-columns: minmax(0, 1fr);
}
.wf-zone-card {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wf-zone-card.zone-plant { border-top: 3.5px solid var(--good); }
.wf-zone-card.zone-external { border-top: 3.5px solid var(--steel); }
.wf-zone-card.zone-absent { border-top: 3.5px solid var(--crit); }

.wf-zone-hdr {
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.wf-zone-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.wf-zone-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.wf-zone-count {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.zone-plant .wf-zone-count { background: var(--good-bg); color: var(--good); }
.zone-external .wf-zone-count { background: var(--steel-tint); color: var(--steel); }
.zone-absent .wf-zone-count { background: var(--crit-bg); color: var(--crit); }

.wf-zone-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.wf-subsec-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Machine Station & Operator Node Cards inside Plant */
.wf-station-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 7px;
}
.wf-station-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: border-color 0.14s ease;
}
.wf-station-card:hover {
  border-color: var(--brass);
}
.wf-station-card.has-alert {
  border-color: var(--crit);
  background: var(--crit-bg);
}
.wf-st-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
}
.wf-st-emp {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-st-machines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wf-mach-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.wf-mach-tag:hover {
  background: var(--brass);
  color: #fff;
}
.wf-st-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10.5px;
  color: var(--muted);
}
.wf-service-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: var(--m-chip);
  color: var(--ink);
}
.wf-service-pill.lube {
  background: var(--warn-bg);
  color: var(--warn);
}
.wf-service-pill.diesel {
  background: var(--steel-tint);
  color: var(--steel);
}

/* Plant Floor / Admin Staff Compact Pills */
.wf-staff-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.wf-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.wf-staff-chip small {
  color: var(--muted);
  font-weight: 500;
  font-size: 10px;
}

/* External Factory / Quarry / Project Site Nodes */
.wf-site-node {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.wf-site-node.kind-quarry {
  border-left-color: var(--brass);
}
.wf-site-node.kind-field {
  border-left-color: var(--teal);
}
.wf-site-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.wf-site-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.wf-site-workers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-worker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 11.5px;
}
.wf-worker-row.is-hauler {
  opacity: 0.88;
  border-left: 2px dashed var(--line-strong);
}

/* Absent Employees & Ghost Activity Cards */
.wf-absent-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted-2);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wf-absent-card.is-ghost-alert {
  border-color: var(--crit);
  border-left: 4px solid var(--crit);
  background: var(--crit-bg);
}
.wf-absent-card.has-substitute {
  border-left-color: var(--steel);
}
.wf-ghost-explain {
  font-size: 11px;
  font-weight: 700;
  color: var(--crit);
  line-height: 1.38;
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px dashed rgba(200, 51, 59, 0.45);
}

@media (max-width: 1180px) {
  .wf-map-canvas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .wf-zone-card.zone-absent {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .wf-map-canvas {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
  }
  .wf-station-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .wf-date-badge input[type="date"] {
    font-size: 16px;
    height: 32px;
  }
}

/* ============================================================================
   ATTENDANCE & OVERTIME INTUITIVE DESK & REGISTER TAGS (v17.5)
   ============================================================================ */
.att-contract-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--ink);
}
.att-contract-strip[hidden] {
  display: none !important;
}
.att-contract-strip.is-muted {
  display: block;
  border-left-color: var(--muted-2);
  color: var(--muted);
}
.att-contract-strip.is-warn {
  border-left-color: #D97706;
  background: rgba(217, 119, 6, 0.08);
}
.att-contract-strip.is-ok {
  border-left-color: var(--good);
  background: rgba(15, 118, 110, 0.06);
}
.att-contract-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.att-contract-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11.4px;
}
.att-contract-metrics span small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.att-contract-metrics span b {
  font-family: "Archivo", sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.att-contract-metrics span b.emerald {
  color: var(--good);
}
.att-contract-metrics span b.amber {
  color: var(--warn);
}
.att-contract-metrics span b.red {
  color: var(--crit);
}

.att-compact-grid {
  gap: 9px 12px;
}
.att-compact-grid .form-field .hint:empty {
  display: none;
}
.att-top-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(105px, 0.78fr) minmax(140px, 1.02fr) minmax(168px, 1.16fr) minmax(170px, 1.24fr);
  gap: 9px 10px;
  align-items: start;
}
.att-top-row > .form-field {
  min-width: 0;
}
.att-step-pills {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}
.att-step-btn {
  appearance: none;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--surface-2);
  color: var(--ink-soft, var(--ink));
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.att-step-btn:hover {
  background: var(--brass-tint);
  border-color: var(--brass-border);
  color: var(--brass-strong);
}
@media (max-width: 820px) {
  .att-top-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .att-top-row {
    grid-template-columns: 1fr;
  }
}

#entryModal .modal-eyebrow {
  display: none;
}

.equip-site-readonly-box {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 8px;
  min-width: 0;
}
.equip-site-readonly-box[hidden] {
  display: none !important;
}
.eq-site-box-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.eq-site-box-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.eq-site-box-title svg {
  width: 13px;
  height: 13px;
  color: var(--brass);
  flex-shrink: 0;
}
.eq-site-readonly-pill {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  letter-spacing: 0.02em;
}
.eq-site-units-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.eq-site-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 3px 9px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--ink);
  min-width: 0;
  max-width: 100%;
}
.eq-site-chip small {
  font-size: 10.6px;
  color: var(--muted);
  font-weight: 500;
}
.eq-site-more {
  font-size: 10.8px;
  color: var(--muted);
  font-weight: 600;
}
.eq-site-log-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  min-width: 0;
}
.eq-site-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-size: 11.4px;
  color: var(--ink);
  min-width: 0;
}
.eq-site-log-main {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-weight: 600;
  min-width: 0;
}
.eq-site-log-meta {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.eq-site-log-meta b {
  color: var(--ink);
  font-family: "Archivo", sans-serif;
}
.eq-site-log-foot {
  font-size: 10.6px;
  color: var(--muted);
}

.log-days-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
}
.log-day-chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.log-day-chk:has(input:checked) {
  border-color: var(--brass);
  background: rgba(180, 134, 59, 0.1);
}
.log-day-chk input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--brass);
  cursor: pointer;
}

.att-preset-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}
.att-preset-bar[hidden] {
  display: none !important;
}
.att-preset-lbl {
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-right: 2px;
}
.att-preset-pill {
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.4px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.att-preset-pill:hover {
  border-color: var(--brass);
  color: var(--brass-strong);
}
:root[data-theme="dark"] .att-preset-pill:hover {
  color: var(--brass);
}
.att-preset-pill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
  font-weight: 700;
}

.att-subpanel {
  display: contents;
}
.att-subpanel[hidden] {
  display: none !important;
}
.att-live-calc-compact {
  margin-top: 10px;
  padding: 7px 11px;
  gap: 8px;
}
.att-live-calc-compact div b {
  font-size: 13px;
}

.att-day-pill {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  vertical-align: middle;
}
.att-day-pill.is-sun {
  color: var(--brass-strong);
  background: var(--brass-tint);
  border-color: var(--brass-border);
  font-weight: 700;
}
:root[data-theme="dark"] .att-day-pill.is-sun {
  color: var(--brass);
}
.att-nextday-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--steel);
  background: rgba(59, 130, 246, 0.1);
}
.att-basis-pill {
  display: inline-block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.att-basis-pill.is-callout {
  color: var(--brass-strong);
  font-weight: 600;
}
:root[data-theme="dark"] .att-basis-pill.is-callout {
  color: var(--brass);
}
.att-impact-pos {
  color: var(--teal);
  font-weight: 700;
}
.att-impact-neg {
  color: var(--crit);
  font-weight: 700;
}

@media (max-width: 768px) {
  .att-mode-deck,
  .att-subpanel,
  .att-variance-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace > .pbi-grid-2,
  .workspace > .pbi-grid-62-38,
  .workspace > .pbi-grid-3,
  .workspace > .pbi-grid-1 {
    padding: 0;
    margin: 10px 12px;
    gap: 10px;
  }
}

/* ============================================================================
   WORKSPACE EMBEDDED CHART ROW ALIGNMENT & SUBSYSTEM TELEMETRY POLISH (v18.3)
   ============================================================================ */
.workspace > .pbi-grid-2 > .pbi-panel,
.workspace > .pbi-grid-62-38 > .pbi-panel,
.workspace > .pbi-grid-3 > .pbi-panel,
.workspace > .pbi-grid-1 > .pbi-panel {
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.pbi-panel-hdr {
  align-items: center;
}
.pbi-panel-hdr > div:first-child {
  min-width: 0;
  flex: 1 1 210px;
}

.pbi-panel > .pbi-bar-chart {
  flex: 1;
  justify-content: space-between;
  padding: 12px 14px;
}

@media (min-width: 861px) {
  #maintChartsRow .pbi-bar-item {
    grid-template-columns: 205px 1fr auto;
    gap: 10px;
  }
}

.maint-custody-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.maint-custody-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-right: 2px;
}
.maint-custody-pill {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.maint-custody-pill:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.maint-custody-pill b {
  font-family: var(--font-mono);
  margin-left: 2px;
}

/* ============================================================================
   v18.8 — INSTITUTIONAL NAVY, STEEL & RESTRAINED BRASS CHROME DISCIPLINE
   (LOGO.md §8: Brass rationed strictly to active marker, primary CTA & total
    double rule; quiet monochrome row/header pills & cool steel data bars)
   ============================================================================ */

/* 1. Quiet Monochrome Row & Register Pills (Company + Payment Method + Neutral) */
.badge-neutral {
  background: #F1F4F8;
  color: #475569;
  border: 1px solid #D8E0EB;
}
:root[data-theme="dark"] .badge-neutral {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.24);
}

.badge.co-tbl-badge,
.sales-recon-head > .badge {
  background: #F1F4F8;
  color: #334155;
  border: 1px solid #D6DEE9;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge.co-tbl-badge.co-tbl-bbc,
.sales-recon-head > .badge.badge-info {
  background: #ECF2F9;
  color: #1E3A5F;
  border: 1px solid #C7D6EA;
}
:root[data-theme="dark"] .badge.co-tbl-badge,
:root[data-theme="dark"] .sales-recon-head > .badge {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.24);
}
:root[data-theme="dark"] .badge.co-tbl-badge.co-tbl-bbc,
:root[data-theme="dark"] .sales-recon-head > .badge.badge-info {
  background: rgba(79, 143, 214, 0.14);
  color: #B6D4F7;
  border-color: rgba(79, 143, 214, 0.30);
}

.badge.badge-method-cash {
  background: #EDF1F7;
  color: #0F1E38;
  border: 1px solid #CBD5E1;
  font-weight: 700;
}
.badge.badge-method-credit {
  background: #F8FAFC;
  color: #5C6B80;
  border: 1px solid #DCE3EE;
  font-weight: 600;
}
:root[data-theme="dark"] .badge.badge-method-cash {
  background: rgba(197, 216, 240, 0.14);
  color: #E2E8F0;
  border-color: rgba(197, 216, 240, 0.28);
}
:root[data-theme="dark"] .badge.badge-method-credit {
  background: rgba(148, 163, 184, 0.06);
  color: #9AA7BA;
  border-color: rgba(148, 163, 184, 0.18);
}

/* 2. Cool Steel Inline Table Magnitude Data Bars (replacing yellowish brass wash) */
table.ledger-table tbody td.td-databar {
  background-image:
    linear-gradient(90deg, rgba(46, 116, 181, 0.20) var(--bar-pct, 0%), transparent var(--bar-pct, 0%)),
    linear-gradient(90deg, rgba(46, 116, 181, 0.05) var(--bar-pct, 0%), transparent var(--bar-pct, 0%));
}
:root[data-theme="dark"] table.ledger-table tbody td.td-databar {
  background-image:
    linear-gradient(90deg, rgba(79, 143, 214, 0.30) var(--bar-pct, 0%), transparent var(--bar-pct, 0%)),
    linear-gradient(90deg, rgba(79, 143, 214, 0.08) var(--bar-pct, 0%), transparent var(--bar-pct, 0%));
}

/* 3. Top Header, Sidebar & Subtab Brass Restraint */
.rail .av {
  background: var(--brass-tint);
  color: var(--ink);
  border: 1px solid var(--brass-border);
}
:root[data-theme="dark"] .rail .av {
  background: #1A2C4A;
  color: #F4F2EE;
  border-color: rgba(217, 165, 74, 0.45);
}

.rail-nav button.nav-item:hover,
.rail-nav a.rail-showcase-link:hover {
  background: rgba(15, 30, 56, 0.045);
}
:root[data-theme="dark"] .rail-nav button.nav-item:hover,
:root[data-theme="dark"] .rail-nav a.rail-showcase-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.rail-nav button.nav-item.on .nav-ico,
.hub-subtab.active svg.ic {
  color: var(--ink);
}
:root[data-theme="dark"] .rail-nav button.nav-item.on .nav-ico,
:root[data-theme="dark"] .hub-subtab.active svg.ic {
  color: var(--brass);
}

.entity-picker-trigger .ep-seg .ep-seg-kicker,
.ep-seg-kicker {
  background: rgba(15, 30, 56, 0.06) !important;
  color: var(--muted) !important;
}
:root[data-theme="dark"] .entity-picker-trigger .ep-seg .ep-seg-kicker,
:root[data-theme="dark"] .ep-seg-kicker {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--muted) !important;
}

.grain-btn.active,
.pbi-grain-btn.active {
  background: var(--brass);
  color: #0B1730;
  box-shadow: 0 1px 3px rgba(184, 136, 59, 0.25);
}
:root[data-theme="dark"] .grain-btn.active,
:root[data-theme="dark"] .pbi-grain-btn.active {
  background: #D9A54A;
  color: #0B1730;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
}

/* Ask ISABI Trigger: Warm Brass-Tinted Alabaster Plate in Light Mode (zero dark-blue blocks) */
.ask-isabi-trigger {
  background: var(--brass-tint);
  color: var(--ink);
  border: 1px solid var(--brass-border);
}
.ask-isabi-trigger svg g[fill="#F4F2EE"] {
  fill: var(--ink);
}
.ask-isabi-trigger:hover {
  background: var(--brass);
  color: #0B1730;
  border-color: var(--brass);
}
.ask-isabi-trigger:hover svg g[fill="#F4F2EE"] {
  fill: #0B1730;
}
:root[data-theme="dark"] .ask-isabi-trigger {
  background: rgba(217, 165, 74, 0.14);
  color: #F4F2EE;
  border: 1px solid rgba(217, 165, 74, 0.45);
}
:root[data-theme="dark"] .ask-isabi-trigger svg g[fill="#F4F2EE"] {
  fill: #F4F2EE;
}
:root[data-theme="dark"] .ask-isabi-trigger:hover {
  background: #D9A54A;
  color: #0B1730;
  border-color: #F3CE85;
}
:root[data-theme="dark"] .ask-isabi-trigger:hover svg g[fill="#F4F2EE"] {
  fill: #0B1730;
}

/* 4. Calm Executive Telemetry Strip (.cockpit-pill.insight-card) */
.cockpit-pill-tag,
.cockpit-pill-tag.good,
.cockpit-pill-tag.brass,
.cockpit-pill-tag.info {
  background: var(--m-chip);
  color: var(--muted);
}
.cockpit-pill.insight-card .cockpit-pill-val.emerald,
.cockpit-pill.insight-card .cockpit-pill-val.brass {
  color: var(--ink);
}
:root[data-theme="dark"] .cockpit-pill.insight-card .cockpit-pill-val.brass {
  color: var(--brass);
}

/* Shared All-BUs subtle micro-pill inside Domain Table Picker & + New Entry Modal */
.tbl-univ-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 15px;
  vertical-align: 1px;
  color: var(--muted);
  background: var(--m-chip, rgba(15, 23, 42, 0.06));
  border: 1px solid var(--line);
}
.filter-chip.active .tbl-univ-tag,
.modal-tab.active .tbl-univ-tag {
  color: inherit;
  background: rgba(255, 255, 255, 0.22);
  border-color: currentColor;
  opacity: 0.85;
}
:root[data-theme="dark"] .tbl-univ-tag {
  background: rgba(255, 255, 255, 0.07);
}

/* ============================================================================
   Architectural Register Toolbar — 1-Line Command Bar (Search ↔ Actions/CTA)
   + Dedicated Separated Quick-Filter Strip (.chip-bar)
   Eliminates staggered 2-line flex wraps inside .table-toolbar while giving
   Search full breathing room on Row 1 and Filter Chips 100% width on Row 2.
   ============================================================================ */

.tb-auto-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.tb-auto-actions:empty {
  display: none;
}

.tb-chip-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  height: 23px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 10.8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.05);
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.tb-chip-reset-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
:root[data-theme="dark"] .tb-chip-reset-btn {
  background: var(--surface-elev);
  border-color: var(--line-strong);
  color: var(--ink);
}
:root[data-theme="dark"] .tb-chip-reset-btn:hover {
  border-color: var(--brass);
  background: rgba(217, 165, 74, 0.14);
}

@media (min-width: 861px) {
  /* 1. Split 2-Zone Toolbars (Search + Filter Chips + Right Actions/CTA) */
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(0, auto);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 0 !important;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) > div:first-child {
    display: contents !important;
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .search-input,
  #workspace .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .search-input#tableSearchInput {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    margin: 7px 0 7px 12px;
    width: calc(100% - 12px);
    min-width: 160px;
    max-width: 430px;
    height: 31px;
    padding: 4px 28px 4px 29px;
    font-size: 12px;
    border-radius: 6px;
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 2px rgba(8, 17, 34, 0.03);
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) > div:last-child {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 7px 12px 7px 8px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .chip-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 5.5px 12px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface-2);
  }
  :root[data-theme="dark"] .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .chip-bar {
    background: rgba(255, 255, 255, 0.028);
  }

  /* 2. Single-Row Command Toolbars (Search + Right Actions, no filter chips) */
  .table-toolbar:has(.search-input):not(:has(.chip-bar)) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 7px 12px;
    gap: 12px;
    background: var(--surface);
  }
  .table-toolbar:has(.search-input):not(:has(.chip-bar)) .search-input,
  #workspace .table-toolbar:has(.search-input):not(:has(.chip-bar)) .search-input#tableSearchInput {
    width: clamp(240px, 30vw, 430px);
    min-width: 170px;
    max-width: 430px;
    height: 31px;
    padding: 4px 28px 4px 29px;
    font-size: 12px;
    border-radius: 6px;
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 2px rgba(8, 17, 34, 0.03);
  }

  /* Keyboard "/" quick-focus badge inside idle empty search boxes */
  .table-toolbar .search-input:placeholder-shown:not(:focus),
  #workspace .table-toolbar .search-input#tableSearchInput:placeholder-shown:not(:focus) {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cline x1='10.4' y1='10.4' x2='14' y2='14'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='1' width='16' height='16' rx='3.5' fill='%23f1f5f9' stroke='%23cbd5e1' stroke-width='1'/%3E%3Cline x1='10.8' y1='4.6' x2='7.2' y2='13.4' stroke='%2364748b' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 9px center, calc(100% - 7px) center;
    background-size: 13px 13px, 16px 16px;
  }
  :root[data-theme="dark"] .table-toolbar .search-input:placeholder-shown:not(:focus),
  :root[data-theme="dark"] #workspace .table-toolbar .search-input#tableSearchInput:placeholder-shown:not(:focus) {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cline x1='10.4' y1='10.4' x2='14' y2='14'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='1' width='16' height='16' rx='3.5' fill='%231e293b' stroke='%23334155' stroke-width='1'/%3E%3Cline x1='10.8' y1='4.6' x2='7.2' y2='13.4' stroke='%2394a3b8' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] .table-toolbar .search-input,
  :root[data-theme="dark"] #workspace .table-toolbar .search-input#tableSearchInput {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--line-strong);
  }

  /* 3. Chip-Only Sub-Panel Toolbars (1-Line Filter Strip ↔ Right Columns Control) */
  .table-toolbar:not(:has(.search-input)):has(.chip-bar) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 5.5px 12px !important;
    gap: 10px;
    background: var(--surface-2);
  }
  :root[data-theme="dark"] .table-toolbar:not(:has(.search-input)):has(.chip-bar) {
    background: rgba(255, 255, 255, 0.028);
  }
  .table-toolbar:not(:has(.search-input)):has(.chip-bar) .chip-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 4px;
    flex: 1 1 auto;
  }

  /* 4. Filter Strip Micro-Label & Tactile Filter Chip Geometry */
  .table-toolbar .chip-bar::before {
    content: "Filter";
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 8px 0 14px;
    margin-right: 2px;
    border-right: 1px solid var(--line-strong);
    font-size: 9.8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
    user-select: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1.8 2.5 14.2 2.5 9.5 8.1 9.5 12.6 6.5 14 6.5 8.1 1.8 2.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 10.5px 10.5px;
  }
  :root[data-theme="dark"] .table-toolbar .chip-bar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1.8 2.5 14.2 2.5 9.5 8.1 9.5 12.6 6.5 14 6.5 8.1 1.8 2.5'/%3E%3C/svg%3E");
  }
  .table-toolbar .chip-bar.has-active-filter::before {
    color: var(--ink);
  }
  .table-toolbar .filter-chip {
    padding: 3.5px 8.5px;
    font-size: 11.1px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }
  .table-toolbar .filter-chip:hover:not(.active) {
    color: var(--ink);
    background: rgba(15, 30, 56, 0.05);
  }
  :root[data-theme="dark"] .table-toolbar .filter-chip:hover:not(.active) {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
  }
  .table-toolbar .filter-chip.active {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-strong);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 30, 56, 0.07);
  }
  :root[data-theme="dark"] .table-toolbar .filter-chip.active {
    background: var(--surface-elev);
    color: var(--ink);
    border-color: var(--line-strong);
  }

  /* 5. Hairline Divider Between Navigation Shortcuts & Export / Primary CTA */
  .table-toolbar .tb-cluster-sep {
    position: relative;
    margin-left: 6px;
  }
  .table-toolbar .tb-cluster-sep::before {
    content: "";
    position: absolute;
    left: -6.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: var(--line-strong);
    pointer-events: none;
  }
  #fuelPanel .table-toolbar > div:last-child {
    gap: 4px !important;
  }
  #fuelPanel .table-toolbar > div:last-child .btn {
    padding: 0 7.5px;
    font-size: 11px;
  }
}

@media (min-width: 981px) and (max-height: 700px) {
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .search-input,
  #workspace .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .search-input#tableSearchInput {
    margin: 5px 0 5px 10px;
    height: 29px;
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) > div:last-child {
    margin: 5px 10px 5px 8px;
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .chip-bar {
    padding: 4px 10px;
  }
}

@media (max-width: 860px) {
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    gap: 0;
    background: var(--surface);
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) > div:first-child {
    display: contents !important;
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .search-input {
    order: 1;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 9px 10px 6px 10px;
    box-sizing: border-box;
    font-size: 16px;
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) > div:last-child {
    order: 2;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px 8px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .chip-bar {
    order: 3;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    gap: 4px;
  }
  :root[data-theme="dark"] .table-toolbar:has(.search-input):has(.chip-bar):has(> div:nth-child(2)) .chip-bar {
    background: rgba(255, 255, 255, 0.028);
  }
  .table-toolbar .filter-chip {
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 500;
  }
  .table-toolbar .filter-chip.active {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-strong);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 30, 56, 0.08);
  }
  :root[data-theme="dark"] .table-toolbar .filter-chip.active {
    background: var(--surface-elev);
    color: var(--ink);
    border-color: var(--line-strong);
  }
}

/* Inline Joint Venture ("JV") marker icon on Site columns (replaces dedicated JV column) */
.site-jv-marker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 5.5px 1px 4.5px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.35;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--brass-strong, #A67320);
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
}
.site-jv-marker .site-jv-ico {
  flex-shrink: 0;
  opacity: 0.92;
}
:root[data-theme="dark"] .site-jv-marker {
  color: var(--brass, #D9A54A);
}

/* Unit (UoM) 1-click quick-switcher pills (m³ · Ton · Truck) inside form field label */
#wrap_f_uom > label > .pa-fld-lbl {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  flex-wrap: nowrap;
}
.uom-quick-pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 1.5px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.uom-qpill {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  padding: 2px 6.5px;
  border-radius: 4.5px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.uom-qpill:hover:not(.active) {
  color: var(--ink);
  background: rgba(15, 30, 56, 0.05);
}
.uom-qpill.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--brass-border, var(--line-strong));
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.08);
}
:root[data-theme="dark"] .uom-qpill:hover:not(.active) {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .uom-qpill.active {
  background: var(--surface-elev);
  color: var(--brass, #D9A54A);
  border-color: var(--brass-border);
}

.malf-scope-box {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.malf-scope-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.malf-scope-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.malf-cat-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.malf-cat-pills .uom-qpill {
  padding: 4px 10px;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.malf-cat-pills .uom-qpill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.malf-quick-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.malf-quick-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft, var(--ink));
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.malf-quick-chip small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}
.malf-quick-chip:hover {
  border-color: var(--brass-border, var(--line-strong));
  color: var(--ink);
}
.malf-quick-chip.active {
  background: rgba(200, 157, 84, 0.14);
  border-color: var(--brass, #C89D54);
  color: var(--ink);
  font-weight: 700;
}
:root[data-theme="dark"] .malf-quick-chip.active {
  background: rgba(217, 165, 74, 0.18);
  color: var(--brass, #D9A54A);
}

/* ============================================================================
   v11.1 — Tablet & Mobile Smart Entry Modal Ergonomics + iOS WebKit Input Fix
   ============================================================================ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Always stack Group Pills (Row 1) above Form Subtabs (Row 2) inside #modalTabs */
.modal-tabs:has(.pa-modal-groups) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

/* Prevent grid blowout and horizontal overlap on iOS/iPadOS WebKit date & time inputs */
.form-grid-3 > *,
.form-grid > *,
.form-field {
  min-width: 0;
  max-width: 100%;
}

#paAdminUnlockBox {
  grid-column: 1 / -1;
}

.form-field > input:not([type="checkbox"]):not([type="radio"]),
.form-field > select,
.form-field > .pa-suggest-wrap,
.form-field > .pa-select-wrap,
.form-field .pa-suggest-wrap > input,
.form-field .pa-suggest-wrap > select,
.form-field .pa-select-wrap > select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-sizing: border-box !important;
}

.form-field input[type="date"],
.form-field input[type="time"],
.form-field input[type="month"],
.form-field input[type="datetime-local"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  line-height: 20px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  overflow: hidden;
}

.form-field input[type="date"]::-webkit-date-and-time-value,
.form-field input[type="time"]::-webkit-date-and-time-value,
.form-field input[type="month"]::-webkit-date-and-time-value,
.form-field input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Hide redundant AUTO-OPEN badge on editable fields & compact LOCKED pill so labels never truncate */
.pa-lock-pill.auto-open {
  display: none !important;
}
.pa-lock-pill {
  padding: 1px 6px;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  gap: 3px;
  flex-shrink: 0;
}

/* Collapse empty hints and hidden overtime bar so rows don't have dead vertical gaps */
.form-field > .hint:empty,
.repdate-bar > .hint:empty {
  display: none;
}
.repdate-bar.time-ot-bar:has(#wrap_f_overtime[hidden]):has(.hint:empty) {
  display: none;
}

/* Prevent native iOS picker wheel from fighting custom .pa-select-menu & style interactive Next page footer */
.pa-select-wrap > select {
  pointer-events: none;
}
.pa-suggest-more[data-suggest-next] {
  cursor: pointer;
  color: var(--brass-strong, #A67320);
  user-select: none;
}
.pa-suggest-more[data-suggest-next]:hover {
  text-decoration: underline;
}
:root[data-theme="dark"] .pa-suggest-more[data-suggest-next] {
  color: var(--brass, #D9A54A);
}

@media (max-width: 1024px) {
  .modal-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
    overflow: hidden;
  }
  .modal-header {
    flex-shrink: 0;
  }
  .modal-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    overflow: visible;
    flex-shrink: 0;
  }
  .pa-modal-groups,
  .pa-modal-subtabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .pa-modal-groups::-webkit-scrollbar,
  .pa-modal-subtabs::-webkit-scrollbar {
    display: none;
  }
  .pa-group-btn,
  .pa-modal-subtabs .modal-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-foot {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    z-index: 6;
  }
}

@media (max-width: 860px) {
  .form-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
  .form-field.span-3,
  .form-field.span-2,
  .form-field.check-field {
    grid-column: 1 / -1;
  }
  .uom-qpill {
    padding: 1.5px 5px;
    font-size: 9.5px;
  }
  .form-field .pa-suggest-menu {
    min-width: min(276px, calc(100vw - 28px));
    max-width: calc(100vw - 24px);
  }
  .form-field .pa-suggest-wrap.menu-align-right > .pa-suggest-menu {
    left: auto;
    right: 0;
  }
}

@media (max-width: 768px) {
  .form-field input:not([type="checkbox"]):not([type="radio"]):not(.co-multi-search):not(.pa-select-filter),
  .form-field select,
  .form-field > .pa-suggest-wrap,
  .form-field > .pa-select-wrap,
  .form-field input[type="date"],
  .form-field input[type="time"],
  .form-field input[type="month"],
  .form-field input[type="datetime-local"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

@media (max-width: 600px) {
  .form-grid-3 {
    gap: 10px 8px;
  }
  .form-field:not(.check-field) > label,
  .form-field > .field-lbl-with-btn {
    gap: 3px;
    font-size: 11px;
    letter-spacing: -0.01em;
  }
  .pa-lock-pill .lp-short {
    display: none;
  }
  .pa-lock-pill {
    padding: 2px 4px;
  }
}

/* ==================== DIESEL CONSUMPTION, SALES & TANK REMAINING LEDGER (#dieselTankPanel) ==================== */
#fuelPanel table.ledger-table thead th:nth-child(8),
#fuelPanel table.ledger-table tbody td:nth-child(8) {
  white-space: nowrap;
}
#dieselTankPanel .dtank-subbar {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2, rgba(15, 23, 42, 0.018));
}
:root[data-theme="dark"] #dieselTankPanel .dtank-subbar {
  background: rgba(255, 255, 255, 0.02);
}
#dieselTankPanel tbody tr.dtank-month-row:hover td {
  background: var(--brass-tint);
}
#dieselTankPanel .dtank-cp-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#dieselTankPanel .dtank-cp-section + .dtank-cp-section {
  border-top: 1px solid var(--line);
}
#dieselTankPanel .dtank-cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 14px;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface-2, rgba(15, 23, 42, 0.02));
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] #dieselTankPanel .dtank-cp-head {
  background: rgba(255, 255, 255, 0.024);
}
#dieselTankPanel table.ledger-table tbody td.r,
#dieselTankPanel table.ledger-table tfoot tr td {
  white-space: nowrap;
}

/* ==========================================================================
   ALERTS & THRESHOLDS REGISTRY (#alert_rules) + LIVE FORM CUSTOM BANNERS
   ========================================================================== */
#alertRulesPanel .alert-rules-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#alertRulesPanel .alert-rules-table th,
#alertRulesPanel .alert-rules-table td {
  white-space: normal;
  vertical-align: top;
  overflow-wrap: anywhere;
  padding: 11px 12px;
}
#alertRulesPanel .alert-rules-table th:nth-child(1),
#alertRulesPanel .alert-rules-table td:nth-child(1) { width: 22%; }
#alertRulesPanel .alert-rules-table th:nth-child(2),
#alertRulesPanel .alert-rules-table td:nth-child(2) { width: 39%; }
#alertRulesPanel .alert-rules-table th:nth-child(3),
#alertRulesPanel .alert-rules-table td:nth-child(3) { width: 16%; }
#alertRulesPanel .alert-rules-table th:nth-child(4),
#alertRulesPanel .alert-rules-table td:nth-child(4) { width: 12%; }
#alertRulesPanel .alert-rules-table th:nth-child(5),
#alertRulesPanel .alert-rules-table td:nth-child(5) { width: 11%; text-align: right; }

.alert-rule-row {
  cursor: pointer;
  transition: background 0.14s ease;
}
.alert-rule-row:hover td {
  background: var(--brass-tint);
}
.alert-rule-row.is-expanded td {
  background: rgba(180, 130, 45, 0.08);
  border-bottom-color: transparent;
}
.alert-rule-row.is-paused td {
  opacity: 0.72;
}
.alert-code-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.alert-code-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brass);
  background: var(--brass-tint);
  border: 1px solid rgba(180, 130, 45, 0.28);
}
.alert-domain-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.alert-rule-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.32;
}
.alert-where-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2, rgba(37, 99, 235, 0.05));
  color: var(--steel, #2563EB);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.alert-where-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}
.alert-what-line {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.44;
}
.alert-what-line b {
  color: var(--brass);
  font-weight: 700;
}
.alert-why-line {
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  border-left: 2.5px solid var(--brass);
  background: var(--surface-2, rgba(15, 23, 42, 0.03));
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
:root[data-theme="dark"] .alert-why-line {
  background: rgba(255, 255, 255, 0.035);
}
.alert-why-line strong {
  color: var(--ink);
  font-weight: 600;
}
.alert-thresh-summary {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}
.alert-edited-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--brass);
  background: var(--brass-tint);
  border: 1px solid rgba(180, 130, 45, 0.35);
}
.alert-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.alert-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}
.alert-tune-row td {
  padding: 0 12px 14px 12px !important;
  background: rgba(180, 130, 45, 0.045);
  border-bottom: 2px solid rgba(180, 130, 45, 0.28);
}
:root[data-theme="dark"] .alert-tune-row td {
  background: rgba(180, 130, 45, 0.07);
}
.alert-tune-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card, #ffffff);
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
:root[data-theme="dark"] .alert-tune-card {
  background: var(--panel, #111927);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.alert-tune-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.alert-tune-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.alert-param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.alert-param-box {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2, rgba(15, 23, 42, 0.02));
}
:root[data-theme="dark"] .alert-param-box {
  background: rgba(255, 255, 255, 0.025);
}
.alert-param-lbl {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.alert-stepper {
  display: flex;
  align-items: center;
  gap: 5px;
}
.alert-step-btn {
  width: 28px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
:root[data-theme="dark"] .alert-step-btn {
  background: rgba(255, 255, 255, 0.06);
}
.alert-step-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}
.alert-param-input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
:root[data-theme="dark"] .alert-param-input {
  background: rgba(15, 23, 42, 0.65);
}
.alert-param-unit {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.alert-param-def {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--muted);
}
.alert-live-preview {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.06);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px;
}
:root[data-theme="dark"] .alert-live-preview {
  background: rgba(59, 130, 246, 0.11);
  border-color: rgba(59, 130, 246, 0.3);
}
.alert-why-edit-wrap {
  margin-bottom: 12px;
}
.alert-why-edit-wrap label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.alert-why-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
  color: var(--ink);
  font-size: 12.5px;
}
:root[data-theme="dark"] .alert-why-input {
  background: rgba(15, 23, 42, 0.65);
}
.alert-tune-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.alert-rules-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.alert-rules-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 280px;
  min-width: 0;
}
#alertRulesSearchInput.search-input {
  flex: 1 1 210px;
  max-width: 340px;
  min-width: 180px;
  height: 34px;
}
.alert-custom-creator {
  margin: 12px 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(180, 130, 45, 0.38);
  background: var(--brass-tint);
}
.ca-domain-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ca-domain-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}
:root[data-theme="dark"] .ca-domain-pill {
  background: rgba(15, 23, 42, 0.72);
}
.ca-domain-pill:hover {
  border-color: var(--brass);
  color: var(--brass);
}
.ca-domain-pill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
}
.ca-pill-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.08);
  color: inherit;
}
.ca-domain-pill.active .ca-pill-cnt {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.alert-custom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.alert-custom-grid .fld-mini {
  min-width: 0;
}
.alert-custom-grid .fld-mini label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.alert-custom-grid .fld-mini input,
.alert-custom-grid .fld-mini select {
  width: 100%;
  height: 34px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
  color: var(--ink);
  font-size: 12.5px;
}
:root[data-theme="dark"] .alert-custom-grid .fld-mini input,
:root[data-theme="dark"] .alert-custom-grid .fld-mini select {
  background: rgba(15, 23, 42, 0.78);
}
#customAlertCreatorCard .pa-select-menu {
  min-width: min(400px, calc(100vw - 48px));
  width: max-content;
  max-width: min(480px, calc(100vw - 32px));
}
#customAlertCreatorCard .pa-select-menu .pa-suggest-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 1 0 auto;
}
.ca-explain-box {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  background: var(--card, #fff);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.48;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:root[data-theme="dark"] .ca-explain-box {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(59, 130, 246, 0.3);
}
.ca-explain-box b {
  color: var(--brass);
}
.ca-explain-live {
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  color: var(--ink);
}
@media (max-width: 1060px) {
  .alert-custom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.form-custom-alert-banner {
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(217, 119, 6, 0.42);
  background: rgba(245, 158, 11, 0.1);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.42;
}
.form-custom-alert-banner.is-crit {
  border-color: rgba(220, 38, 38, 0.48);
  background: rgba(220, 38, 38, 0.1);
}
.form-custom-alert-item + .form-custom-alert-item {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

@media (max-width: 768px) {
  #alertRulesPanel .alert-rules-table,
  #alertRulesPanel .alert-rules-table thead,
  #alertRulesPanel .alert-rules-table tbody,
  #alertRulesPanel .alert-rules-table tr,
  #alertRulesPanel .alert-rules-table td {
    display: block;
    width: 100% !important;
  }
  #alertRulesPanel .alert-rules-table thead {
    display: none;
  }
  #alertRulesPanel .alert-rule-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  #alertRulesPanel .alert-rules-table td {
    padding: 4px 0;
    text-align: left !important;
    border: none;
  }
  #alertRulesPanel .alert-row-actions {
    justify-content: flex-start;
    margin-top: 6px;
  }
  .alert-custom-grid {
    grid-template-columns: 1fr;
  }
  .alert-param-input,
  .alert-why-input,
  .alert-custom-grid .fld-mini input,
  .alert-custom-grid .fld-mini select {
    font-size: 16px;
    height: 38px;
  }
}

/* ==================== EXPENSE PENDING-PRICE MODE & LOCKED COMPLETION ==================== */
.exp-amt-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.exp-amt-input-wrap > input {
  width: 100%;
}
.exp-amt-input-wrap.is-pending > input {
  padding-right: 104px !important;
  color: var(--muted);
  background: var(--surface-2);
}
.exp-switch-priced-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 4.5px;
  border: 1px solid var(--brass-border, var(--line-strong));
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 30, 56, 0.08);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.exp-switch-priced-btn[hidden] {
  display: none !important;
}
.exp-switch-priced-btn:hover {
  background: var(--brass-tint);
  border-color: var(--brass);
  color: var(--ink);
}
.exp-switch-priced-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
:root[data-theme="dark"] .exp-switch-priced-btn {
  background: var(--surface-elev);
  color: var(--brass, #D9A54A);
  border-color: var(--brass-border);
}
:root[data-theme="dark"] .exp-switch-priced-btn:hover {
  background: rgba(217, 165, 74, 0.16);
}
.exp-fld-head,
label.exp-inline-bar-lbl {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 20px;
  height: 20px;
  max-height: 20px;
  line-height: 1.2;
  min-width: 0;
  margin: 0 !important;
}
.exp-fld-head > label {
  margin: 0 !important;
  min-width: 0;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
}
.exp-method-pills[hidden],
.exp-sup-ap-pill[hidden],
.exp-single-dest-bar[hidden],
#expItemsModeBadge[hidden] {
  display: none !important;
}
.exp-sup-ap-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-strong, #8B641E);
  background: color-mix(in srgb, var(--brass) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brass) 42%, var(--line));
  white-space: nowrap;
  flex-shrink: 0;
}
:root[data-theme="dark"] .exp-sup-ap-pill {
  color: var(--brass);
}
#lbl_exp_amount {
  display: inline-block;
  white-space: nowrap;
}
.exp-price-mode-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  margin-top: 5px;
  padding: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-sizing: border-box;
}
.exp-price-mode-bar.is-inline-lbl {
  width: auto;
  margin-top: 0;
  padding: 0;
  gap: 3px;
  background: transparent;
  border: 0;
  flex-shrink: 0;
}
.exp-price-mode-bar[hidden] {
  display: none !important;
}
.exp-price-mode-bar .uom-qpill {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 3.5px 6px;
  font-size: 11px;
  white-space: nowrap;
}
.exp-price-mode-bar.is-inline-lbl .uom-qpill {
  flex: 0 0 auto;
  min-width: 56px;
  height: 20px;
  min-height: 20px;
  padding: 0 7px;
  font-size: 10.5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
}
.exp-price-mode-bar.is-inline-lbl .uom-qpill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
  font-weight: 700;
  box-shadow: none;
}
:root[data-theme="dark"] .exp-price-mode-bar.is-inline-lbl .uom-qpill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}
.exp-complete-pending-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  border-left: 3px solid var(--brass);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
}
.exp-complete-pending-banner svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--brass);
}

/* ==================== PAYROLL CUTOFF, STAFF STATUS & LBP FX LEDGER STRIP ==================== */
.payroll-cutoff-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  background: var(--surface-2, #F5F7FA);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

:root[data-theme="dark"] .payroll-cutoff-bar {
  background: rgba(255, 255, 255, 0.026);
}

.payroll-cutoff-bar.is-pbi {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  margin-bottom: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .payroll-cutoff-bar.is-pbi {
  background: transparent;
}

.payroll-cutoff-ctrl {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.payroll-cutoff-pills {
  display: inline-grid;
  grid-template-columns: repeat(3, 148px);
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(15, 30, 56, 0.048);
  border: 1px solid var(--line-strong);
  box-sizing: border-box;
  flex-shrink: 0;
}

:root[data-theme="dark"] .payroll-cutoff-pills {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-strong);
}

.payroll-cutoff-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 4.5px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.3px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.payroll-cutoff-pill .pcp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(100, 116, 139, 0.42);
  flex-shrink: 0;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.payroll-cutoff-pill:hover:not(.active) {
  background: rgba(15, 30, 56, 0.038);
  color: var(--ink);
}

:root[data-theme="dark"] .payroll-cutoff-pill:hover:not(.active) {
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
}

.payroll-cutoff-pill.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 var(--brass);
}

:root[data-theme="dark"] .payroll-cutoff-pill.active {
  background: var(--surface-elev);
  color: var(--ink);
  border-color: var(--line-strong);
}

.payroll-cutoff-pill[data-tone="closed"].active {
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 #1F7A4C;
}

.payroll-cutoff-pill[data-tone="closed"].active .pcp-dot {
  background: #1F7A4C;
  box-shadow: 0 0 0 2px rgba(31, 122, 76, 0.16);
}

:root[data-theme="dark"] .payroll-cutoff-pill[data-tone="closed"].active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 -1.5px 0 #4AD28A;
}

:root[data-theme="dark"] .payroll-cutoff-pill[data-tone="closed"].active .pcp-dot {
  background: #4AD28A;
  box-shadow: 0 0 0 2px rgba(74, 210, 138, 0.20);
}

.payroll-cutoff-pill[data-tone="mtd"].active {
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 #2356A8;
}

.payroll-cutoff-pill[data-tone="mtd"].active .pcp-dot {
  background: #2356A8;
  box-shadow: 0 0 0 2px rgba(35, 86, 168, 0.16);
}

:root[data-theme="dark"] .payroll-cutoff-pill[data-tone="mtd"].active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 -1.5px 0 #5B9CF0;
}

:root[data-theme="dark"] .payroll-cutoff-pill[data-tone="mtd"].active .pcp-dot {
  background: #5B9CF0;
  box-shadow: 0 0 0 2px rgba(91, 156, 240, 0.22);
}

.payroll-cutoff-pill[data-tone="full"].active {
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 #C0892F;
}

.payroll-cutoff-pill[data-tone="full"].active .pcp-dot {
  background: #C0892F;
  box-shadow: 0 0 0 2px rgba(192, 137, 47, 0.18);
}

.payroll-cutoff-custom-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pcc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 11.3px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: inset 0 -1.5px 0 var(--brass);
}

.pcc-pill .pcp-dot.is-locked {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

.pcc-reset-btn {
  appearance: none;
  height: 27px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 10.8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.pcc-reset-btn:hover {
  color: var(--ink);
  border-color: var(--brass);
}

.payroll-cutoff-bar:has(.tbl-col-popover:not([hidden])) {
  z-index: 45;
}

.payroll-bar-aux {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
}

.payroll-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.payroll-bar-actions .btn[data-export-csv],
.payroll-bar-actions .tbl-col-trigger-btn,
.payroll-bar-actions .tbl-col-inline-reset {
  height: 29px;
  padding: 0 9px;
  font-size: 11.2px;
  font-weight: 600;
  line-height: 1;
  border-radius: 5.5px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-sizing: border-box;
}

.payroll-bar-actions .tbl-col-inline-reset {
  border-color: var(--brass-border);
  color: var(--brass);
  background: var(--brass-tint);
  font-weight: 700;
}

.payroll-bar-actions .btn[data-export-csv]:hover:not(:disabled),
.payroll-bar-actions .tbl-col-trigger-btn:hover,
.payroll-bar-actions .tbl-col-inline-reset:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
}

.payroll-bar-actions .tbl-col-trigger-btn.is-customized {
  border-color: var(--brass);
  background: var(--brass-tint);
}

:root[data-theme="dark"] .payroll-bar-actions .btn[data-export-csv],
:root[data-theme="dark"] .payroll-bar-actions .tbl-col-trigger-btn {
  background: var(--surface-elev);
  border-color: var(--line-strong);
  color: var(--ink);
}

:root[data-theme="dark"] .payroll-bar-actions .btn[data-export-csv]:hover:not(:disabled),
:root[data-theme="dark"] .payroll-bar-actions .tbl-col-trigger-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}

.payroll-status-pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(15, 30, 56, 0.048);
  border: 1px solid var(--line-strong);
  box-sizing: border-box;
  flex-shrink: 0;
}

:root[data-theme="dark"] .payroll-status-pills {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-strong);
}

.payroll-status-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 27px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 4.5px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.payroll-status-pill:hover:not(.active) {
  background: rgba(15, 30, 56, 0.038);
  color: var(--ink);
}

:root[data-theme="dark"] .payroll-status-pill:hover:not(.active) {
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
}

.payroll-status-pill.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 #1F7A4C;
}

.payroll-status-pill[data-payroll-status="inactive"].active {
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 #C0892F;
}

.payroll-status-pill[data-payroll-status="all"].active {
  box-shadow: 0 1px 2.5px rgba(15, 30, 56, 0.08), inset 0 -1.5px 0 var(--brass);
}

:root[data-theme="dark"] .payroll-status-pill.active {
  background: var(--surface-elev);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 -1.5px 0 #4AD28A;
}

:root[data-theme="dark"] .payroll-status-pill[data-payroll-status="inactive"].active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 -1.5px 0 #E0A84B;
}

:root[data-theme="dark"] .payroll-status-pill[data-payroll-status="all"].active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 -1.5px 0 var(--brass);
}

.payroll-status-pill .psp-cnt {
  font-size: 10.3px;
  font-weight: 700;
  color: var(--muted);
  opacity: 0.9;
}

.payroll-status-pill.active .psp-cnt {
  color: var(--ink);
  opacity: 1;
}

.fx-ref-rate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.fx-ref-copy {
  flex: 1 1 320px;
  min-width: 0;
}

.fx-ref-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.fx-ref-title span {
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.fx-ref-sub {
  font-size: 11.4px;
  line-height: 1.4;
  color: var(--muted);
}

.fx-ref-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

@media (max-width: 1280px) and (min-width: 861px) {
  .payroll-cutoff-pills {
    grid-template-columns: repeat(3, 134px);
  }
  .payroll-status-pill {
    padding: 0 7px;
    font-size: 10.9px;
  }
}

@media (max-width: 1120px) and (min-width: 861px) {
  .payroll-cutoff-pills {
    grid-template-columns: repeat(3, 118px);
  }
  .payroll-cutoff-pill {
    font-size: 10.5px;
    padding: 0 5px;
  }
  .payroll-bar-aux {
    gap: 6px;
  }
  .payroll-bar-actions {
    gap: 4px;
  }
  .payroll-bar-actions .btn[data-export-csv],
  .payroll-bar-actions .tbl-col-trigger-btn,
  .payroll-bar-actions .tbl-col-inline-reset {
    padding: 0 7px;
    font-size: 10.7px;
  }
}

@media (max-width: 860px) {
  .payroll-cutoff-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    height: auto;
    min-height: 0;
    padding: 7px 10px;
  }
  .payroll-cutoff-bar.is-pbi {
    display: flex;
    width: 100%;
    padding: 0;
  }
  .payroll-cutoff-ctrl {
    width: 100%;
  }
  .payroll-cutoff-pills {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .payroll-cutoff-pill {
    padding: 0 4px;
    font-size: 10.6px;
    gap: 4px;
    min-width: 0;
  }
  .payroll-cutoff-pill .pcp-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .payroll-bar-aux {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-left: 0;
  }
  .payroll-status-pills {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .payroll-status-pill {
    padding: 0 4px;
    font-size: 10.5px;
    gap: 3px;
    min-width: 0;
  }
  .payroll-bar-actions {
    gap: 4px;
  }
  .payroll-bar-actions .btn[data-export-csv],
  .payroll-bar-actions .tbl-col-trigger-btn,
  .payroll-bar-actions .tbl-col-inline-reset {
    height: 29px;
    padding: 0 7px;
    font-size: 10.5px;
    gap: 4px;
  }
  .fx-ref-controls {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Site Allowance Smart Entry Desk & Daily Work Verification Ledger (v19.4.5)
   ========================================================================== */
.log-mode-bar {
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  gap: 6px;
}
.log-mode-sep {
  width: 1px;
  height: 18px;
  background: var(--line-strong);
  margin: 0 2px;
  flex-shrink: 0;
}
#modalBody:has(.log-compact-grid) {
  padding-top: 9px;
  padding-bottom: 9px;
}
.log-compact-grid {
  gap: 5px 10px !important;
}
.log-compact-grid .form-field > label {
  margin-bottom: 1px;
}
.log-mode-bar {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.log-mode-bar .log-win-pill {
  font-size: 11px;
  padding: 3px 9px;
}
#logStaffContextStrip {
  padding: 4px 10px;
  gap: 8px;
  flex-wrap: nowrap;
}
.log-strip-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
#logLiveCalc {
  margin-top: 6px;
  padding: 6px 12px;
}
.form-field.check-field.log-dow-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  min-width: 0;
}
.form-field.check-field.log-dow-field[hidden] {
  display: none !important;
}
#logDowBar[hidden] + #wrap_log_notes {
  grid-column: 1 / -1;
}
.log-dow-lbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
  min-height: 17px;
}
.log-dow-lbl-row .pa-fld-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
}
.log-dow-presets {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.log-dow-preset {
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.35;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.log-dow-preset:hover {
  border-color: var(--brass);
  color: var(--ink);
}
.log-dow-preset.is-active {
  background: var(--surface);
  border-color: var(--brass);
  color: var(--ink);
  font-weight: 700;
}
.log-dow-pills {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.log-dow-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 4px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}
.log-dow-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.log-dow-pill:hover {
  border-color: var(--brass);
  color: var(--ink);
}
.log-dow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  flex-shrink: 0;
  transition: background 0.12s, box-shadow 0.12s;
}
.log-dow-pill.is-on {
  background: var(--surface);
  border-color: var(--good);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(31, 122, 76, 0.1), inset 0 -2px 0 var(--good);
}
.log-dow-pill.is-on .log-dow-dot {
  background: var(--good);
  box-shadow: 0 0 0 2px rgba(31, 122, 76, 0.16);
}
.log-dow-pill.is-sun.is-on {
  border-color: var(--brass);
  box-shadow: 0 1px 3px rgba(192, 137, 47, 0.12), inset 0 -2px 0 var(--brass);
}
.log-dow-pill.is-sun.is-on .log-dow-dot {
  background: var(--brass);
  box-shadow: 0 0 0 2px rgba(192, 137, 47, 0.18);
}
:root[data-theme="dark"] .log-dow-pill.is-on {
  background: #1C2E4A;
}

.log-day-mini-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.log-day-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.6px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.log-day-mini.is-ok {
  border-color: rgba(31, 122, 76, 0.35);
  color: var(--good);
}
.log-day-mini.is-site {
  border-color: rgba(74, 144, 217, 0.38);
  color: var(--chart-steel, #2356A8);
}
.log-day-mini.is-abs {
  border-color: rgba(200, 51, 59, 0.35);
  color: var(--crit);
  text-decoration: line-through;
}
.log-day-mini.is-unv {
  border-color: rgba(201, 106, 34, 0.35);
  color: var(--warn);
}

.site-proof-chips,
.site-proof-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.site-proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1.5px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.site-proof-chip.is-direct,
.site-proof-chip.is-shift,
.site-proof-chip.is-tallied {
  border-color: rgba(31, 122, 76, 0.34);
  color: var(--good);
}
.site-proof-chip.is-site,
.site-proof-chip.is-trips {
  border-color: rgba(74, 144, 217, 0.36);
  color: var(--chart-steel, #2356A8);
}
.site-proof-chip.is-fuel {
  border-color: rgba(192, 137, 47, 0.38);
  color: var(--brass-ink, var(--ink));
}
.site-proof-chip.is-abs,
.site-proof-chip.is-off {
  border-color: rgba(200, 51, 59, 0.34);
  color: var(--crit);
}
.site-proof-chip.is-plant {
  border-color: var(--line-strong);
  color: var(--muted);
}
.site-tally-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.site-tally-btn {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10.8px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.site-tally-btn:hover {
  border-color: var(--brass);
}
.site-tally-btn.is-confirm {
  border-color: rgba(31, 122, 76, 0.42);
  color: var(--good);
}
.site-tally-btn.is-confirm:hover,
.site-tally-btn.is-confirm.is-active {
  background: rgba(31, 122, 76, 0.12);
  border-color: var(--good);
}
.site-tally-btn.is-absent {
  border-color: rgba(200, 51, 59, 0.36);
  color: var(--crit);
}
.site-tally-btn.is-absent:hover,
.site-tally-btn.is-absent.is-active {
  background: rgba(200, 51, 59, 0.12);
  border-color: var(--crit);
}
.site-tally-btn.is-undo {
  color: var(--muted);
  font-weight: 600;
}
.site-staff-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.site-verif-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 11.2px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.site-verif-pill:hover {
  border-color: var(--brass);
}
.site-verif-pill.is-high {
  border-color: rgba(31, 122, 76, 0.38);
  color: var(--good);
}
.site-verif-pill.is-mid {
  border-color: rgba(74, 144, 217, 0.4);
}
.site-verif-pill.is-low {
  border-color: rgba(201, 106, 34, 0.4);
  color: var(--warn);
}

@media (max-width: 640px) {
  #logStaffContextStrip,
  .log-strip-left {
    flex-wrap: wrap;
  }
  .form-field.check-field.log-dow-field {
    grid-column: 1 / -1;
  }
  .log-dow-pills {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .log-dow-pill {
    padding: 0 4px;
    height: 34px;
    font-size: 11px;
    gap: 4px;
  }
  .log-dow-dot {
    width: 5px;
    height: 5px;
  }
  .log-mode-sep {
    display: none;
  }
}

/* ============================================================================
   STAFF FACE ID ENROLMENT, SHIFT SCHEDULE & OVERTIME RULES (Rev 10)
   ============================================================================ */
.kiosk-seg-btn[data-tone="indigo"].active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
  box-shadow: 0 2px 6px rgba(184, 136, 59, 0.24);
}
:root[data-theme="dark"] .kiosk-seg-btn[data-tone="indigo"].active {
  background: #D9A54A;
  border-color: #F3CE85;
  color: #0B1730;
}

.kiosk-shift-pill,
.kiosk-ot-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 11.4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}
.kiosk-shift-pill:hover,
.kiosk-ot-pill:hover {
  border-color: var(--brass);
  box-shadow: 0 2px 7px rgba(15, 30, 56, 0.08);
}
.kiosk-shift-pill[data-tone="amber"],
.kiosk-ot-pill[data-tone="amber"] {
  background: rgba(192, 137, 47, 0.10);
  border-color: rgba(192, 137, 47, 0.34);
  color: #8A5D14;
}
.kiosk-shift-pill[data-tone="indigo"] {
  background: rgba(35, 86, 168, 0.10);
  border-color: rgba(35, 86, 168, 0.32);
  color: #1D468A;
}
.kiosk-shift-pill[data-tone="sapphire"],
.kiosk-ot-pill[data-tone="sapphire"] {
  background: rgba(35, 86, 168, 0.09);
  border-color: rgba(35, 86, 168, 0.28);
  color: #1F4E96;
}
.kiosk-shift-pill[data-tone="emerald"],
.kiosk-ot-pill[data-tone="emerald"] {
  background: rgba(31, 122, 76, 0.10);
  border-color: rgba(31, 122, 76, 0.32);
  color: #18633C;
}
.kiosk-shift-pill[data-tone="muted"],
.kiosk-ot-pill[data-tone="muted"] {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
  font-weight: 600;
}
:root[data-theme="dark"] .kiosk-shift-pill[data-tone="amber"],
:root[data-theme="dark"] .kiosk-ot-pill[data-tone="amber"] {
  background: rgba(212, 163, 73, 0.16);
  border-color: rgba(212, 163, 73, 0.38);
  color: #F2CB7D;
}
:root[data-theme="dark"] .kiosk-shift-pill[data-tone="indigo"],
:root[data-theme="dark"] .kiosk-shift-pill[data-tone="sapphire"],
:root[data-theme="dark"] .kiosk-ot-pill[data-tone="sapphire"] {
  background: rgba(74, 144, 217, 0.16);
  border-color: rgba(74, 144, 217, 0.38);
  color: #9BC4F5;
}
:root[data-theme="dark"] .kiosk-shift-pill[data-tone="emerald"],
:root[data-theme="dark"] .kiosk-ot-pill[data-tone="emerald"] {
  background: rgba(45, 164, 104, 0.16);
  border-color: rgba(45, 164, 104, 0.38);
  color: #7EE0AC;
}

.kiosk-shift-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kiosk-bio-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.kiosk-bio-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--brass-border, rgba(192, 137, 47, 0.36));
  background: var(--brass-tint, rgba(192, 137, 47, 0.09));
  color: var(--ink);
  font-family: inherit;
  font-size: 11.2px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.kiosk-bio-btn svg {
  width: 13px;
  height: 13px;
  color: var(--brass);
}
.kiosk-bio-btn.is-enrolled {
  border-color: rgba(31, 122, 76, 0.36);
  background: rgba(31, 122, 76, 0.10);
  color: #18633C;
}
.kiosk-bio-btn.is-enrolled svg {
  color: #1F7A4C;
}
:root[data-theme="dark"] .kiosk-bio-btn.is-enrolled {
  color: #7EE0AC;
  background: rgba(45, 164, 104, 0.16);
}
.kiosk-bio-btn:hover {
  border-color: var(--brass);
}
.kiosk-bio-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.8px;
  font-weight: 600;
  white-space: nowrap;
}
.kiosk-bio-tag.ok {
  color: var(--good);
  border-color: rgba(31, 122, 76, 0.28);
  background: rgba(31, 122, 76, 0.07);
}
.kiosk-bio-tag svg {
  width: 11px;
  height: 11px;
}

/* Shift Types Catalog & Weekly Schedule Matrix */
.kiosk-sched-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;
}
.shift-types-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 9px;
}
.shift-type-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  border-left: 3.5px solid var(--brass);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}
.shift-type-card:hover {
  border-color: var(--brass);
  box-shadow: 0 3px 10px rgba(15, 30, 56, 0.08);
}
.shift-type-card[data-tone="indigo"] {
  border-left-color: #2356A8;
}
.shift-type-card[data-tone="sapphire"] {
  border-left-color: #4A90D9;
}
.shift-type-card[data-tone="emerald"] {
  border-left-color: #1F7A4C;
}
.shift-type-card.is-add {
  border-style: dashed;
  border-left-width: 1px;
  background: var(--surface-2);
}
.stc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  font-size: 12.2px;
}
.stc-cnt {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.stc-time {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stc-sub {
  font-size: 10.8px;
  color: var(--muted);
}

.sched-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.sched-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.sched-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.sched-matrix-table th.is-today-col,
.sched-matrix-table td.is-today-col {
  background: rgba(192, 137, 47, 0.07);
}
.sched-day-cell {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 82px;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 10.9px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.sched-day-cell:hover {
  border-color: var(--brass);
}
.sched-day-cell[data-tone="indigo"] {
  background: rgba(35, 86, 168, 0.09);
  border-color: rgba(35, 86, 168, 0.28);
  color: #1D468A;
}
:root[data-theme="dark"] .sched-day-cell[data-tone="indigo"] {
  background: rgba(74, 144, 217, 0.16);
  border-color: rgba(74, 144, 217, 0.36);
  color: #9BC4F5;
}
.sched-day-cell[data-tone="emerald"] {
  background: rgba(31, 122, 76, 0.09);
  border-color: rgba(31, 122, 76, 0.28);
  color: #18633C;
}
:root[data-theme="dark"] .sched-day-cell[data-tone="emerald"] {
  background: rgba(45, 164, 104, 0.16);
  color: #7EE0AC;
}
.sched-day-cell.is-off {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  font-weight: 600;
}
.sched-day-cell.is-override {
  box-shadow: inset 0 0 0 1px var(--brass);
}
.sdc-ot {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(31, 122, 76, 0.16);
  color: #18633C;
  font-size: 9.6px;
  font-weight: 800;
}
:root[data-theme="dark"] .sdc-ot {
  color: #7EE0AC;
}

/* Dynamic Kiosk Submodals (Face ID Studio, Staff Schedule & Shift Type) */
.kiosk-submodal-backdrop {
  z-index: 1220;
}
.kiosk-submodal-backdrop[hidden] {
  display: none !important;
}
.kiosk-submodal-backdrop .modal-head {
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.kiosk-submodal-backdrop .modal-head > div:first-child {
  min-width: 0;
  flex: 1;
}
.kiosk-submodal-backdrop .modal-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.kiosk-submodal-backdrop .modal-sub {
  margin-top: 3px;
  font-size: 11.8px;
  color: var(--muted);
  line-height: 1.35;
}
.kiosk-submodal-backdrop .icon-btn {
  appearance: none;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s;
}
.kiosk-submodal-backdrop .icon-btn:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.kiosk-submodal-backdrop .modal-foot {
  padding: 13px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 860px) {
  .kiosk-submodal-backdrop .modal-head {
    padding: 12px 14px;
  }
  .kiosk-submodal-backdrop .modal-body {
    padding: 14px;
  }
  .kiosk-submodal-backdrop .modal-foot {
    padding: 11px 14px;
  }
}

.staff-enrol-modal-card {
  width: min(820px, 95vw);
  max-width: 820px;
}
.staff-enrol-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
}
.staff-enrol-top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: visible;
}
.staff-enrol-field,
.staff-enrol-pin-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: visible;
}
.staff-enrol-field label,
.staff-enrol-pin-inline label {
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.staff-enrol-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 14px;
  align-items: start;
}
.staff-enrol-cam-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.staff-enrol-field .pa-select-wrap,
.staff-enrol-field .pa-select-btn {
  width: 100%;
}
#staffEnrolViewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 270px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
#staffEnrolViewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#staffEnrolViewport:has(#staffEnrolStandby:not([hidden])) .kiosk-att-oval {
  opacity: 0;
  box-shadow: none;
}
.staff-enrol-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.staff-enrol-live-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}
.staff-enrol-btn-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.staff-enrol-poses-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.staff-enrol-pose-prompt {
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.38;
}
.staff-enrol-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.staff-pose-slot {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  min-height: 98px;
  border-radius: 8px;
  border: 1px dashed var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
}
.staff-pose-slot.is-next {
  border-style: solid;
  border-color: var(--brass);
  background: var(--surface);
  color: var(--ink);
}
.staff-pose-slot.is-done {
  border-style: solid;
  border-color: rgba(31, 122, 76, 0.42);
  background: rgba(31, 122, 76, 0.07);
  color: var(--good);
}
.staff-pose-slot img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.staff-pose-placeholder {
  font-size: 11.5px;
  font-weight: 700;
}
.staff-pose-lbl {
  font-size: 10.3px;
  font-weight: 700;
  text-align: center;
}

/* Staff Schedule & Overtime Modal */
.staff-sched-modal-card {
  width: min(860px, 95vw);
  max-width: 860px;
}
.staff-sched-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
}
.ssm-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.ssm-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12.6px;
}
.ssm-sec-head .muted {
  font-size: 11.2px;
}
.ssm-shift-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}
.ssm-shift-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.ssm-shift-card.active {
  border-color: var(--brass);
  background: var(--brass-tint);
  box-shadow: 0 0 0 1px var(--brass);
}
.ssm-sc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  font-size: 12px;
}
.ssm-sc-hrs {
  font-size: 11px;
  font-weight: 700;
  color: var(--brass);
}
.ssm-sc-win {
  font-size: 12.2px;
  font-weight: 700;
  color: var(--muted);
}
.ssm-shift-card.active .ssm-sc-win {
  color: var(--ink);
}
.ssm-custom-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 9px;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.ssm-calc-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11.8px;
  font-weight: 700;
  color: var(--ink);
}
.ssm-days-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.ssm-days-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.ssm-lbl {
  font-size: 11.2px;
  font-weight: 700;
  color: var(--muted);
}
.ssm-day-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ssm-day-pill {
  appearance: none;
  height: 28px;
  min-width: 38px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 11.2px;
  font-weight: 700;
  cursor: pointer;
}
.ssm-day-pill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}
:root[data-theme="dark"] .ssm-day-pill.active {
  background: #D9A54A;
  border-color: #F3CE85;
  color: #0B1730;
}
.ssm-grace-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.2px;
  font-weight: 600;
  color: var(--muted);
}
.ssm-grace-wrap input {
  height: 30px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.ot-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ot-mode-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.ot-mode-card.active {
  border-color: var(--brass);
  background: var(--brass-tint);
  box-shadow: 0 0 0 1px var(--brass);
}
.ot-mc-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.2px;
  font-weight: 800;
  color: var(--ink);
}
.ot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ot-dot.muted { background: #7A889B; }
.ot-dot.emerald { background: #1F7A4C; }
.ot-dot.sapphire { background: #2356A8; }
.ot-dot.amber { background: #C0892F; }
.ot-dot.rose { background: #DC2626; }
.ot-mc-desc {
  font-size: 11.1px;
  line-height: 1.35;
  color: var(--muted);
}

.ssm-ot-subpanel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px 11px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.ssm-ot-cap-row,
.ssm-pass-builder {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  overflow: visible;
}
.ssm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: visible;
}
.ssm-field label {
  font-size: 10.6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.ssm-field input,
.ssm-field select {
  height: 34px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 12.4px;
  font-weight: 600;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.ssm-helper {
  font-size: 11.2px;
  color: var(--muted);
}
.ssm-preset-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ssm-pass-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ot-pass-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11.6px;
}

@media (max-width: 860px) {
  .staff-enrol-grid,
  .ot-mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sched-week-nav {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .kiosk-submodal-backdrop input,
  .kiosk-submodal-backdrop select,
  .kiosk-submodal-backdrop textarea {
    font-size: 16px !important;
  }
  .kiosk-submodal-backdrop input[type="date"],
  .kiosk-submodal-backdrop input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   v19.6.0 — Multi-Item Expense & Repair Line Builders + Warehouse Routing
   ========================================================================== */
.exp-route-bar {
  margin-top: 0;
  min-height: 36px;
}
.exp-route-bar .uom-qpill {
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 600;
}

.line-items-builder {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.line-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.line-items-head strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.line-items-head span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.line-items-empty {
  padding: 9px 11px;
  border-radius: 6px;
  border: 1px dashed var(--line-strong, var(--line));
  background: var(--surface);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}
.line-items-cols-hdr {
  display: grid;
  gap: 6px;
  align-items: center;
  padding: 4px 2px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.line-items-cols-hdr > span.r {
  text-align: right;
}
.line-items-cols-hdr.is-exp-grid,
.line-item-row.is-exp-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(62px, 74px) minmax(68px, 84px) minmax(76px, 94px) minmax(84px, 102px);
}
.line-items-cols-hdr.is-rep-grid,
.line-item-row.is-rep-grid {
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.3fr) minmax(64px, 78px) minmax(68px, 84px) minmax(78px, 96px) minmax(86px, 104px);
}
.line-item-row {
  display: grid;
  gap: 6px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.line-item-row:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}
.li-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.li-cell input,
.li-cell select,
.li-cell .pa-suggest-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.line-item-static-pill {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-item-static-pill.is-muted {
  color: var(--muted);
  font-weight: 500;
}
.line-item-tot-cell {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 34px;
}
.line-item-tot-cell strong {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.line-item-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.line-item-del-btn:hover {
  border-color: var(--crit, #C93B3B);
  color: var(--crit, #C93B3B);
  background: color-mix(in srgb, var(--crit, #C93B3B) 10%, var(--surface));
}

@media (max-width: 860px) {
  .line-items-cols-hdr {
    display: none;
  }
  .line-item-row.is-exp-grid,
  .line-item-row.is-rep-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
  }
  .line-item-row > .li-cell:first-child,
  .line-item-row > .li-cell.line-item-tot-cell {
    grid-column: 1 / -1;
  }
  .line-item-tot-cell {
    justify-content: space-between;
    padding-top: 4px;
    border-top: 1px dashed var(--line);
  }
}

@media (max-width: 768px) {
  .line-items-builder input,
  .line-items-builder select {
    font-size: 16px !important;
  }
  .exp-route-bar {
    flex-wrap: wrap;
    height: auto;
  }
  .exp-route-bar .uom-qpill {
    flex: 1 1 calc(50% - 4px);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding: 6px;
  }
}

/* ==========================================================================
   Shelf-First Warehouse Adjust Guide & Direction Bar
   ========================================================================== */
.wh-adjust-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  background: var(--surface-2);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.wh-adjust-guide-copy {
  min-width: 0;
  flex: 1 1 260px;
}
.wh-adjust-guide-copy strong {
  display: block;
  font-size: 12.2px;
  font-weight: 700;
  color: var(--ink);
}
.wh-adjust-guide-copy span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.wh-adjust-guide-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wh-adjust-guide-actions .wh-guide-btn {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.wh-dir-bar {
  margin-top: 0;
  min-height: 36px;
}
.wh-dir-bar .uom-qpill {
  flex: 1 1 0;
  padding: 6px 10px;
  font-size: 11.8px;
  font-weight: 600;
  text-align: center;
}
.wh-dir-bar .uom-qpill.is-wh-in.active {
  border-color: color-mix(in srgb, var(--good) 45%, var(--line));
  color: var(--good);
}
.wh-dir-bar .uom-qpill.is-wh-out.active {
  border-color: color-mix(in srgb, var(--warn) 50%, var(--line));
  color: var(--warn);
}
@media (max-width: 768px) {
  .wh-dir-bar {
    flex-wrap: wrap;
    height: auto;
  }
  .wh-dir-bar .uom-qpill {
    flex: 1 1 calc(50% - 4px);
    white-space: normal;
    line-height: 1.25;
  }
  .wh-adjust-guide-actions {
    width: 100%;
  }
  .wh-adjust-guide-actions .wh-guide-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ==========================================================================
   v19.6.67 - Streamlined Interactive Expense Entry & Split Cockpit
   ========================================================================== */
.exp-route-bar {
  padding: 3px;
  border-radius: 8px;
}
.exp-route-bar .uom-qpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
}
.exp-route-bar .uom-qpill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.72;
}
.exp-route-bar .uom-qpill.active {
  border-color: var(--brass);
  font-weight: 700;
}
.exp-route-bar .uom-qpill.active svg {
  color: var(--brass);
  opacity: 1;
}

.exp-equip-strip-field {
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-sizing: border-box;
}
.exp-equip-strip-row {
  display: grid;
  grid-template-columns: minmax(200px, 265px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.exp-equip-input-col {
  min-width: 0;
}
.exp-equip-quick-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.exp-inline-equip-hint {
  margin: 0 !important;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-eq-qchip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 11.2px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.exp-eq-qchip:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.exp-eq-qchip.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
  font-weight: 700;
}
:root[data-theme="dark"] .exp-eq-qchip.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}

.exp-main-qty-stepper {
  height: 36px;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--line-strong, var(--line));
}
.exp-main-qty-stepper:focus-within {
  box-shadow: inset 0 0 0 1px var(--brass), 0 0 0 3px var(--brass-tint);
}
.exp-main-qty-stepper input {
  height: 100% !important;
  min-height: 0 !important;
}

.exp-items-cockpit {
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 10px;
  background: var(--surface);
  padding: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.035);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
.exp-items-cockpit.is-single-mode > #expItemsRowsWrap {
  padding: 12px 14px;
}
.exp-items-cockpit.is-multi-mode > #expItemsRowsWrap {
  padding: 0;
}
.exp-items-cockpit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 14px;
  margin: 0;
  background: #F8F6F0;
  border-bottom: 1px solid var(--line);
  border-radius: 9px 9px 0 0;
}
:root[data-theme="dark"] .exp-items-cockpit-head {
  background: var(--surface-2);
}
.exp-items-cockpit-head span {
  display: inline;
  margin-top: 0;
  color: inherit;
  font-size: inherit;
}
.exp-items-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}
.exp-single-dest-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 7px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--surface);
  flex-wrap: wrap;
}
.exp-dest-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 27px;
  padding: 0 11px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.4px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.exp-dest-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.78;
}
.exp-dest-pill:hover {
  color: var(--ink);
}
.exp-dest-pill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
  font-weight: 700;
}
.exp-dest-pill.active svg {
  color: #0B1730;
  opacity: 1;
}
.exp-dest-pill.is-wh.active {
  background: color-mix(in srgb, var(--good) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--good) 48%, var(--line));
  color: var(--good);
}
.exp-dest-pill.is-wh.active svg {
  color: var(--good);
  opacity: 1;
}
.exp-items-head-title {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 12.2px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  white-space: nowrap;
}
.exp-items-head-title[hidden] {
  display: none !important;
}
.exp-lines-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brass) 20%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brass) 45%, var(--line));
  font-style: normal;
  font-size: 10.8px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.exp-items-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.exp-items-live-metrics {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.2px;
  color: var(--muted);
}
.exp-items-live-metrics[hidden] {
  display: none !important;
}
.exp-items-live-metrics b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.exp-items-live-metrics .is-wh b {
  color: var(--good);
}
.exp-metrics-dot {
  opacity: 0.55;
}
.exp-new-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  font-size: 11.1px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface);
}
.exp-new-cat-btn svg {
  width: 11.5px;
  height: 11.5px;
  color: var(--brass);
}
.exp-new-cat-btn.active {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--ink);
}
.exp-items-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 11px;
  font-size: 11.2px;
  font-weight: 700;
  white-space: nowrap;
}
.exp-items-add-btn svg {
  width: 12px;
  height: 12px;
}
.exp-items-clear-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 11.1px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface);
}

/* Inline Quick Catalog Item Drawer */
.exp-quick-cat-drawer {
  padding: 10px 14px;
  background: #FCFBF7;
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .exp-quick-cat-drawer {
  background: color-mix(in srgb, var(--surface-2) 85%, var(--surface));
}
.exp-quick-cat-drawer[hidden] {
  display: none !important;
}
.exp-qc-grid {
  display: grid;
  grid-template-columns: minmax(170px, 1.55fr) minmax(126px, 1fr) 92px minmax(145px, 1.15fr) 86px auto;
  gap: 8px;
  align-items: end;
}
.exp-qc-fld {
  min-width: 0;
}
.exp-qc-fld label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-qc-fld input,
.exp-qc-fld select {
  width: 100%;
  height: 34px;
  min-height: 34px;
  font-size: 12px;
  box-sizing: border-box;
}
.exp-qc-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
}
.exp-qc-save-btn,
.exp-qc-cancel-btn {
  height: 34px;
  padding: 0 10px;
  font-size: 11.2px;
  white-space: nowrap;
}

.pa-suggest-empty-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11.4px;
  color: var(--muted);
  flex-wrap: wrap;
}
.pa-suggest-empty-cat b {
  color: var(--ink);
}
.pa-suggest-reg-btn {
  appearance: none;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--brass) 55%, var(--line));
  background: var(--brass-tint);
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.pa-suggest-reg-btn:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
}

.exp-item-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.line-item-row.exp-item-card.is-single-card {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  width: 100%;
  max-width: 100%;
}

/* Flush Split-Invoice Ledger Sheet */
.exp-split-cols-hdr {
  display: grid;
  grid-template-columns: 22px 218px minmax(124px, 0.92fr) minmax(176px, 1.38fr) 140px 92px 102px;
  gap: 7px;
  align-items: center;
  padding: 7px 12px;
  background: #FAF9F5;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
}
:root[data-theme="dark"] .exp-split-cols-hdr {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}
.exp-split-cols-hdr .is-right {
  text-align: right;
}
.line-item-row.exp-item-card.exp-split-row {
  display: grid;
  grid-template-columns: 22px 218px minmax(124px, 0.92fr) minmax(176px, 1.38fr) 140px 92px 102px;
  gap: 7px;
  align-items: start;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 0;
  background: var(--surface);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  transition: background 0.12s ease;
}
.line-item-row.exp-item-card.exp-split-row:last-child {
  border-bottom: 0;
}
.line-item-row.exp-item-card.exp-split-row:hover {
  background: #FCFBF8;
}
:root[data-theme="dark"] .line-item-row.exp-item-card.exp-split-row:hover {
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}
@media (min-width: 981px) {
  .line-item-row.exp-item-card.exp-split-row.is-mode-general .exp-split-cell-target {
    display: none;
  }
  .line-item-row.exp-item-card.exp-split-row.is-mode-general .exp-split-cell-name {
    grid-column: 3 / 5;
  }
}
.exp-split-cell-idx {
  display: flex;
  align-items: center;
  height: 36px;
}
.exp-row-idx-num {
  font-size: 11.2px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.exp-split-mob-actions {
  display: none;
}
.exp-split-cell-dest {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #F4F2EC;
  box-sizing: border-box;
  min-width: 0;
}
:root[data-theme="dark"] .exp-split-cell-dest {
  background: var(--surface-2);
}
.exp-item-rpill {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 6px;
  border-radius: 4.5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.9px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.exp-item-rpill:hover {
  color: var(--ink);
}
.exp-item-rpill.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #0B1730;
  font-weight: 700;
}
.exp-item-rpill.is-wh.active {
  background: color-mix(in srgb, var(--good) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--good) 48%, var(--line));
  color: var(--good);
  font-weight: 700;
}
.exp-item-rpill.is-gen.active {
  background: var(--surface);
  border-color: var(--line-strong, var(--line));
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.exp-item-mode-select-sr,
.exp-uom-sr-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}
.exp-split-cell-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  height: 36px;
  min-width: 0;
}
.exp-line-tot-val {
  font-size: 12.2px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.exp-row-ghost-group {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.exp-row-ghost-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.exp-row-ghost-btn svg {
  width: 13px;
  height: 13px;
}
.exp-row-ghost-btn:hover {
  opacity: 1;
  background: var(--surface-2);
  color: var(--ink);
}
.exp-row-ghost-btn.is-del:hover {
  background: color-mix(in srgb, var(--bad, #B91C1C) 10%, var(--surface));
  color: var(--bad, #B91C1C);
}
.exp-item-card-grid.is-single-gen {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.12fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: start;
}
.exp-item-card-grid.is-single-4col {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(0, 1.12fr) minmax(0, 0.85fr);
  gap: 10px;
  align-items: start;
}
.exp-item-card-grid .li-cell > .exp-item-lbl,
.exp-item-card-grid .li-cell > .exp-fld-head {
  display: flex;
  align-items: center;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  margin-bottom: 3px !important;
}
.exp-item-lbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-item-cell-target .exp-equip-quick-bar {
  margin-top: 5px;
  gap: 4px;
}
.exp-item-cell-target .exp-eq-qchip {
  height: 22px;
  padding: 0 7px;
  font-size: 10.5px;
}

/* Unified Quantity Stepper + Permanently Frozen Unit Capsule */
.exp-qty-uom-capsule {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.exp-qty-uom-capsule:focus-within {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-tint);
}
.exp-qty-uom-capsule .exp-item-stepper {
  flex: 1 1 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  min-width: 0;
}
.exp-item-stepper {
  display: flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 5px;
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}
.exp-item-stepper input {
  flex: 1 1 0;
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center;
  padding: 0 2px !important;
  min-width: 0;
  height: 100% !important;
  min-height: 0 !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.exp-item-stepper input::-webkit-outer-spin-button,
.exp-item-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.exp-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.exp-split-row .exp-step-btn {
  width: 21px;
}
.exp-step-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.exp-uom-frozen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  min-width: 54px;
  padding: 0 7px;
  border-left: 1px solid var(--line);
  background: #F4F1E8;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  flex-shrink: 0;
}
:root[data-theme="dark"] .exp-uom-frozen {
  background: var(--surface-2);
}
.exp-uom-frozen.is-awaiting {
  color: var(--muted);
  font-weight: 500;
}
.exp-uom-lock-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
  flex-shrink: 0;
}
.exp-uom-frozen.is-awaiting .exp-uom-lock-svg {
  color: var(--muted);
  opacity: 0.72;
}
.exp-uom-lock-svg svg {
  width: 10.5px;
  height: 10.5px;
}
.exp-item-cost-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.exp-cost-prefix {
  position: absolute;
  left: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
  z-index: 2;
}
.exp-item-cost-wrap input,
.exp-amt-input-wrap.exp-item-cost-wrap > input {
  padding-left: 22px !important;
  font-variant-numeric: tabular-nums;
}

.exp-items-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
  background: #F8F6F0;
}
:root[data-theme="dark"] .exp-items-footer-bar {
  background: var(--surface-2);
}
.exp-items-quick-add-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.exp-quick-add-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 27px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 11.1px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.exp-quick-add-pill svg {
  width: 11px;
  height: 11px;
  color: var(--brass);
}
.exp-quick-add-pill.is-wh svg {
  color: var(--good);
}
.exp-quick-add-pill:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.exp-quick-add-pill.is-wh:hover {
  border-color: color-mix(in srgb, var(--good) 50%, var(--line));
  background: color-mix(in srgb, var(--good) 8%, var(--surface));
  color: var(--good);
}
.exp-items-rollup-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
  margin-left: auto;
}
.exp-items-rollup-summary strong,
.exp-items-rollup-summary b {
  color: var(--ink);
  font-size: 12.6px;
  font-weight: 800;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .exp-qc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .exp-qc-fld.is-wide {
    grid-column: 1 / -1;
  }
  .exp-split-cols-hdr,
  .exp-split-cell-actions {
    display: none !important;
  }
  .line-item-row.exp-item-card.exp-split-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 11px 12px;
  }
  .line-item-row.exp-item-card.exp-split-row.is-mode-general .exp-split-cell-target {
    display: none;
  }
  .exp-split-cell-idx {
    grid-column: 1 / -1;
    height: auto;
    justify-content: space-between;
  }
  .exp-split-mob-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .exp-split-cell-dest,
  .exp-split-cell-target,
  .exp-split-cell-name {
    grid-column: 1 / -1;
  }
  .exp-split-cell-dest {
    width: 100%;
  }
  .exp-split-row .li-cell[data-mob-lbl]::before {
    content: attr(data-mob-lbl);
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 3px;
  }
}

@media (max-width: 860px) {
  .exp-item-card-grid.is-single-gen,
  .exp-item-card-grid.is-single-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .exp-item-card-grid.is-single-gen .exp-item-cell-name,
  .exp-item-card-grid.is-single-4col .exp-item-cell-target,
  .exp-item-card-grid.is-single-4col .exp-item-cell-name {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .exp-main-qty-stepper,
  .exp-item-stepper,
  .exp-qty-uom-capsule {
    height: 38px;
    min-height: 38px;
  }
}

@media (max-width: 640px) {
  .exp-method-pills {
    display: none !important;
  }
  .exp-item-card-grid.is-single-gen,
  .exp-item-card-grid.is-single-4col,
  .line-item-row.exp-item-card.exp-split-row,
  .exp-qc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .exp-single-dest-bar {
    width: 100%;
  }
  .exp-dest-pill {
    flex: 1 1 0;
    padding: 0 6px;
  }
}

/* FX Conversion 4-Tier Corridor Guard & Quick Presets */
.conv-quick-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.conv-usd-preset-pill {
  font-size: 10.5px;
  padding: 2px 8px;
}

.conv-corridor-msg {
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.att-contract-strip.is-warn .conv-corridor-msg {
  color: #D97706;
  font-weight: 600;
}

:root[data-theme="dark"] .att-contract-strip.is-warn .conv-corridor-msg {
  color: #FBBF24;
}

.att-contract-strip.is-err .conv-corridor-msg,
.att-contract-strip.is-crit .conv-corridor-msg {
  color: #DC2626;
  font-weight: 600;
}

:root[data-theme="dark"] .att-contract-strip.is-err .conv-corridor-msg,
:root[data-theme="dark"] .att-contract-strip.is-crit .conv-corridor-msg {
  color: #F87171;
}

.att-contract-strip.is-fx-frozen-strip {
  border-width: 2px;
  border-color: #DC2626;
  background: color-mix(in srgb, #DC2626 11%, var(--surface));
}

.pa-lock-pill.is-warn-pill {
  background: rgba(217, 119, 6, 0.14);
  color: #B45309;
  border-color: rgba(217, 119, 6, 0.42);
}

:root[data-theme="dark"] .pa-lock-pill.is-warn-pill {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.45);
}

.pa-lock-pill.is-frozen {
  background: rgba(220, 38, 38, 0.16);
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.55);
  cursor: not-allowed;
}

:root[data-theme="dark"] .pa-lock-pill.is-frozen {
  background: rgba(239, 68, 68, 0.22);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.6);
}

.att-fill-btn.is-sup-unlock-pill {
  background: rgba(217, 119, 6, 0.16);
  color: #B45309;
  border-color: rgba(217, 119, 6, 0.48);
  font-weight: 700;
}

:root[data-theme="dark"] .att-fill-btn.is-sup-unlock-pill {
  background: rgba(245, 158, 11, 0.22);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.55);
}

.att-fill-btn.is-reset-rate-pill {
  font-weight: 700;
}

/* ==========================================================================
   Items Catalog UoM Lock Badge & 1-Click Quick-Pick Chips (v19.6.39)
   ========================================================================== */
.exp-uom-lock-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brass-tint);
  border: 1px solid var(--brass-border);
  color: var(--brass);
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

select[data-locked-by-item="1"]:disabled {
  background: var(--surface-2) !important;
  border-color: var(--brass-border) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  opacity: 0.92 !important;
  cursor: not-allowed !important;
}

.exp-quick-item-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.exp-quick-item-bar[hidden] {
  display: none !important;
}

.exp-items-head-left .exp-quick-item-bar {
  margin-top: 0;
}

.exp-quick-item-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

.exp-quick-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.exp-quick-item-chip em {
  font-style: normal;
  font-size: 9.8px;
  font-weight: 700;
  color: var(--muted);
  padding: 0 4px;
  border-radius: 4px;
  background: var(--surface-2);
}

.exp-quick-item-chip:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}

.exp-quick-item-chip.active {
  border-color: var(--brass);
  background: var(--brass);
  color: #0B1730;
  font-weight: 700;
}

.exp-quick-item-chip.active em {
  background: rgba(11, 23, 48, 0.16);
  color: #0B1730;
}

/* ==========================================================================
   Kiosk Lateness Tolerance, When Late & Punishment Rules (v19.6.43)
   ========================================================================== */
.kiosk-late-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, border-color 0.14s ease, background 0.14s ease;
}

.kiosk-late-pill:hover {
  transform: translateY(-1px);
  border-color: var(--brass);
}

.kiosk-late-pill[data-tone="amber"] {
  background: rgba(217, 119, 6, 0.13);
  border-color: rgba(217, 119, 6, 0.38);
  color: #B45309;
}

:root[data-theme="dark"] .kiosk-late-pill[data-tone="amber"] {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.44);
  color: #FBBF24;
}

.kiosk-late-pill[data-tone="rose"] {
  background: rgba(220, 38, 38, 0.13);
  border-color: rgba(220, 38, 38, 0.38);
  color: #B91C1C;
}

:root[data-theme="dark"] .kiosk-late-pill[data-tone="rose"] {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.44);
  color: #FCA5A5;
}

.kiosk-late-pill[data-tone="emerald"] {
  background: rgba(5, 150, 105, 0.12);
  border-color: rgba(5, 150, 105, 0.36);
  color: #047857;
}

:root[data-theme="dark"] .kiosk-late-pill[data-tone="emerald"] {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.42);
  color: #6EE7B7;
}

.kiosk-late-pill[data-tone="sapphire"] {
  background: rgba(35, 86, 168, 0.11);
  border-color: rgba(35, 86, 168, 0.34);
  color: #1D468A;
}

:root[data-theme="dark"] .kiosk-late-pill[data-tone="sapphire"] {
  background: rgba(59, 130, 246, 0.17);
  border-color: rgba(59, 130, 246, 0.42);
  color: #93C5FD;
}

.kiosk-late-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}

.kiosk-late-filter-bar .kiosk-filter-pod {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.kiosk-late-filter-bar .kiosk-filter-pod .sched-filter-lbl {
  font-size: 9.8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-right: 1px;
}

.kiosk-late-filter-bar .kiosk-filter-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.kiosk-late-filter-bar .kiosk-qchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  height: 24px;
  border-radius: 6px;
}

.kiosk-late-filter-bar .kiosk-qchip .kf-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brass) 16%, var(--surface-2));
  color: var(--ink);
  font-size: 9.8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kiosk-late-filter-bar .kiosk-qchip.active .kf-cnt {
  background: rgba(11, 23, 48, 0.16);
  color: inherit;
}

.kiosk-late-filter-bar .kiosk-qchip .kf-cnt.is-zero {
  display: none;
}

.kiosk-reset-filters-btn {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--brass) 48%, var(--line)) !important;
  background: color-mix(in srgb, var(--brass) 12%, var(--surface)) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* Interactive Kiosk Staff Rows & Polished Cells (v19.6.66) */
#kioskAttFeedTable,
#kioskLatenessRulesTable,
#kioskShiftScheduleTable {
  min-width: 0 !important;
  width: 100%;
}

#kioskAttFeedTable th,
#kioskAttFeedTable td {
  padding: 7px 5px;
  vertical-align: middle;
}

#kioskAttFeedTable .kiosk-late-pill,
#kioskAttFeedTable .kiosk-ot-pill,
#kioskAttFeedTable .kiosk-shift-pill {
  padding: 2px 7px;
  font-size: 10.6px;
}

#kioskAttFeedTable .kiosk-bio-btn {
  padding: 3px 7px;
  font-size: 10.6px;
  white-space: nowrap;
}

tr.kiosk-staff-row {
  cursor: pointer;
  transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

tr.kiosk-staff-row:hover,
tr.kiosk-staff-row:focus-visible {
  background: color-mix(in srgb, var(--brass) 8%, var(--surface-2)) !important;
  box-shadow: inset 3px 0 0 var(--brass);
  outline: none;
}

.kiosk-staff-id-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 142px;
}

.kiosk-staff-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brass) 16%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--brass) 38%, var(--line));
  color: #6E490E;
  font-family: "Archivo", sans-serif;
  font-size: 10.8px;
  font-weight: 800;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

:root[data-theme="dark"] .kiosk-staff-avatar {
  color: #F3C978;
}

.kiosk-staff-avatar.is-onsite {
  background: rgba(5, 150, 105, 0.13);
  border-color: rgba(5, 150, 105, 0.42);
  color: #047857;
}

:root[data-theme="dark"] .kiosk-staff-avatar.is-onsite {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.45);
  color: #6EE7B7;
}

.kiosk-staff-avatar .ksa-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #10B981;
  border: 2px solid var(--surface);
}

.kiosk-staff-id-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kiosk-staff-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.kiosk-staff-name-line strong {
  font-size: 12.8px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.kiosk-row-edit-hint {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--line));
  background: color-mix(in srgb, var(--brass) 10%, var(--surface));
  color: var(--muted);
  font-size: 9.8px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0.68;
  transition: opacity 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

tr.kiosk-staff-row:hover .kiosk-row-edit-hint,
tr.kiosk-staff-row:focus-visible .kiosk-row-edit-hint {
  opacity: 1;
  color: var(--ink);
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 20%, var(--surface));
  transform: translateX(1px);
}

.kiosk-nowrap-sub {
  white-space: nowrap;
  font-size: 10.1px;
  line-height: 1.3;
  margin-top: 2px;
  color: var(--muted);
}

.kiosk-today-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.kiosk-today-pill.is-off {
  border: 1px dashed var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
}

.kiosk-bio-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
}

.kiosk-pin-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, border-color 0.14s ease, background 0.14s ease;
}

.kiosk-pin-pill:hover {
  transform: translateY(-1px);
  border-color: var(--brass);
}

.kiosk-pin-pill.is-set {
  background: rgba(5, 150, 105, 0.11);
  border: 1px solid rgba(5, 150, 105, 0.34);
  color: #047857;
}

:root[data-theme="dark"] .kiosk-pin-pill.is-set {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.42);
  color: #6EE7B7;
}

.kiosk-pin-pill.is-unset {
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  color: var(--ink-soft);
}

.kiosk-pin-pill .kpp-act {
  padding-left: 4px;
  margin-left: 1px;
  border-left: 1px solid currentColor;
  opacity: 0.78;
  font-weight: 600;
  font-size: 9.8px;
}

.kiosk-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.kiosk-modify-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* Staff Schedule & Rules Modal Interactive Header + Live Summary Strip (v19.6.66) */
.ssm-head-id {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ssm-head-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
  border-radius: 10px;
}

.ssm-head-role {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  vertical-align: middle;
}

.ssm-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ssm-staff-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.ssm-live-summary-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--line));
  background: color-mix(in srgb, var(--brass) 8%, var(--surface-2));
}

.ssm-live-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.ssm-live-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.ssm-live-kpi .ssm-lk-lbl,
.ssm-live-kpi .slk-lbl {
  font-size: 9.6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.ssm-live-kpi strong {
  font-size: 11.4px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.ssm-bio-quick-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.ssm-quick-pin-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ssm-quick-pin-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

.ssm-quick-pin-input {
  width: 78px !important;
  height: 28px !important;
  padding: 2px 8px !important;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.kiosk-late-workspace {
  display: flex;
  flex-direction: column;
}

.late-policy-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--brass-tint) 38%, var(--surface));
}

.lp-bulk-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
}

.lp-bulk-title strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink);
}

.lp-bulk-title .muted {
  font-size: 11px;
}

.lp-bulk-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
}

.lp-bulk-controls .ssm-field {
  min-width: 142px;
  margin: 0;
}

.lp-bulk-controls .ssm-field label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 3px;
}

.kiosk-inline-rule-select {
  min-width: 118px;
  max-width: 175px;
  padding: 4px 24px 4px 8px;
  font-size: 11.2px;
  font-weight: 600;
  border-radius: 6px;
}

#kioskLatenessRulesTable th,
#kioskLatenessRulesTable td {
  padding: 6px 6px;
  vertical-align: middle;
}

#kioskLatenessRulesTable td .drv-sub.mono {
  white-space: nowrap;
  font-size: 10.6px;
}

#kioskLatenessRulesTable td > .pa-select-wrap {
  min-width: 118px;
  width: 100%;
  max-width: 175px;
}

#kioskLatenessRulesTable td > .pa-select-wrap > select.kiosk-inline-rule-select {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 4px 24px 4px 8px;
  font-size: 11.2px;
}

#kioskAttendanceWorkspace .pa-select-menu,
#staffScheduleModal .pa-select-menu,
#shiftTypeModal .pa-select-menu {
  min-width: max(100%, 210px);
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  right: auto;
}

#kioskLatenessRulesTable td:nth-last-child(-n+3) .pa-select-menu {
  left: auto;
  right: 0;
}

#kioskAttendanceWorkspace .pa-select-menu .pa-suggest-label,
#staffScheduleModal .pa-select-menu .pa-suggest-label,
#shiftTypeModal .pa-select-menu .pa-suggest-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 1 0 auto;
}

.ssm-late-grid {
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
}

.ssm-penalty-grid {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.ssm-subhead-lbl {
  margin: 12px 0 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ==================== INTERACTIVE LOAN & SETTLEMENT COCKPIT (v19.6.53) ==================== */
.loan-cockpit-deck {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 2px;
}

.loan-mode-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.loan-new-side-deck {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--brass) 28%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}

.loan-new-side-deck[hidden],
#paLoanSubgridWrap[hidden],
.loan-settle-workbench[hidden] {
  display: none !important;
}

.loan-side-section-lbl {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.loan-side-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.loan-action-card,
.loan-side-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}

.loan-action-card {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
}

.loan-action-card:hover,
.loan-side-card:hover {
  border-color: color-mix(in srgb, var(--brass) 58%, var(--line));
  background: color-mix(in srgb, var(--brass-tint) 22%, var(--surface));
}

.loan-action-card.active,
.loan-side-card.active {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass-tint) 58%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 20%, transparent), 0 3px 10px rgba(15, 23, 42, 0.05);
}

.loan-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.loan-action-card.active .loan-card-icon {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
}

.loan-card-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.loan-card-title-row,
.loan-side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.loan-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.loan-card-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.loan-action-card.active .loan-card-pill {
  background: color-mix(in srgb, var(--brass) 18%, var(--surface));
  color: var(--brass-ink, var(--ink));
  border-color: color-mix(in srgb, var(--brass) 45%, var(--line));
}

.loan-card-sub {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.loan-flow-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.loan-flow-pill.is-out {
  background: color-mix(in srgb, #f59e0b 18%, var(--surface));
  color: #b45309;
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
}

.loan-flow-pill.is-in {
  background: color-mix(in srgb, #10b981 18%, var(--surface));
  color: #047857;
  border: 1px solid color-mix(in srgb, #10b981 40%, transparent);
}

.loan-wb-step-kicker {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brass);
}

.loan-wb-empty-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-soft);
}

/* Selected Loan Settlement Workbench */
.loan-settle-workbench {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--brass) 52%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass-tint) 45%, var(--surface)) 0%, var(--surface) 100%);
  margin-bottom: 4px;
}

.loan-wb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.loan-wb-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.loan-wb-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.loan-wb-tag.is-lend {
  background: color-mix(in srgb, #10b981 18%, var(--surface));
  color: #047857;
  border: 1px solid color-mix(in srgb, #10b981 40%, transparent);
}

.loan-wb-tag.is-borrow {
  background: color-mix(in srgb, #f59e0b 18%, var(--surface));
  color: #b45309;
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
}

.loan-wb-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.loan-wb-date {
  font-size: 11px;
  color: var(--ink-soft);
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-2);
}

.loan-wb-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.loan-wb-pct-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-right: 2px;
}

.loan-pct-pill {
  appearance: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
}

.loan-pct-pill:hover {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass-tint) 40%, var(--surface));
}

.loan-pct-pill.active {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
}

.loan-unlink-btn {
  appearance: none;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #ef4444 40%, var(--line));
  background: color-mix(in srgb, #ef4444 10%, var(--surface));
  color: #b91c1c;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.loan-settle-prog-track {
  display: flex;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}

.loan-prog-seg {
  height: 100%;
  transition: width 0.2s ease;
}

.loan-prog-seg.is-prior {
  background: color-mix(in srgb, var(--ink-soft) 55%, var(--surface-2));
}

.loan-prog-seg.is-now {
  background: #10b981;
}

.loan-wb-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding-top: 2px;
}

.loan-wb-metrics > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.loan-wb-metrics small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.loan-wb-metrics b {
  font-size: 12.5px;
  color: var(--ink);
}

.loan-wb-metrics b.is-accent {
  color: var(--brass);
}

.loan-wb-metrics b.is-ok {
  color: #059669;
}

/* USD Quick Chips Bar */
.loan-usd-quick-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.loan-usd-chip {
  appearance: none;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.loan-usd-chip:hover {
  border-color: var(--brass);
  color: var(--ink);
  background: color-mix(in srgb, var(--brass-tint) 35%, var(--surface));
}

.loan-usd-chip.active {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
}

/* Open Loans Subgrid Redesign (Zero Horizontal Overflow) */
.loan-open-subgrid {
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.loan-subgrid-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
  border-bottom: 1px solid var(--line);
}

.loan-subgrid-head-left {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.loan-subgrid-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.loan-subgrid-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brass);
}

.loan-subgrid-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.loan-subgrid-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.loan-subgrid-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
}

.loan-subgrid-tab b {
  font-weight: 800;
  opacity: 0.92;
}

.loan-subgrid-search-wrap {
  min-width: 210px;
  max-width: 260px;
  flex: 0 1 240px;
}

.loan-subgrid-search {
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}

.loan-subgrid-table-wrap {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.loan-subgrid-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.loan-subgrid-table th,
.loan-subgrid-table td {
  padding: 7px 9px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loan-subgrid-table th:nth-child(1),
.loan-subgrid-table td:nth-child(1) { width: 22%; }
.loan-subgrid-table th:nth-child(2),
.loan-subgrid-table td:nth-child(2) { width: 18%; }
.loan-subgrid-table th:nth-child(3),
.loan-subgrid-table td:nth-child(3) { width: 18%; }
.loan-subgrid-table th:nth-child(4),
.loan-subgrid-table td:nth-child(4) { width: 14%; }
.loan-subgrid-table th:nth-child(5),
.loan-subgrid-table td:nth-child(5) { width: 14%; }
.loan-subgrid-table th:nth-child(6),
.loan-subgrid-table td:nth-child(6) { width: 14%; }

.loan-subgrid-row {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.loan-subgrid-row:hover {
  background: color-mix(in srgb, var(--brass-tint) 30%, var(--surface));
}

.loan-subgrid-row.is-selected-loan {
  background: color-mix(in srgb, var(--brass-tint) 58%, var(--surface));
}

.loan-cell-date {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.2;
}

.loan-cell-ref {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loan-cell-party {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loan-side-tag {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loan-side-tag.is-borrow {
  background: color-mix(in srgb, #f59e0b 16%, var(--surface));
  color: #b45309;
  border: 1px solid color-mix(in srgb, #f59e0b 36%, transparent);
}

.loan-side-tag.is-lend {
  background: color-mix(in srgb, var(--brass) 16%, var(--surface));
  color: var(--brass-ink, var(--ink));
  border: 1px solid color-mix(in srgb, var(--brass) 36%, transparent);
}

.loan-cell-princ {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.loan-cell-paid {
  font-size: 10px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loan-mini-bar {
  width: 100%;
  height: 3.5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 3px;
}

.loan-mini-bar > span {
  display: block;
  height: 100%;
  background: var(--brass);
  border-radius: 999px;
}

.loan-cell-open {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}

.loan-cell-status {
  margin-top: 2px;
}

.loan-open-cap {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
}

.loan-pick-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--brass) 45%, var(--line));
  background: color-mix(in srgb, var(--brass-tint) 32%, var(--surface));
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.14s ease;
}

.loan-pick-btn:hover,
.loan-subgrid-row:hover .loan-pick-btn {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
}

.loan-pick-btn.is-active {
  background: #059669;
  color: #fff;
  border-color: #059669;
}

@media (max-width: 768px) {
  .loan-mode-switcher,
  .loan-side-grid {
    grid-template-columns: 1fr;
  }
  .loan-wb-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .loan-subgrid-search-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .loan-subgrid-table th:nth-child(3),
  .loan-subgrid-table td:nth-child(3),
  .loan-subgrid-table th:nth-child(4),
  .loan-subgrid-table td:nth-child(4) {
    display: none;
  }
  .loan-subgrid-table th:nth-child(1),
  .loan-subgrid-table td:nth-child(1) { width: 28%; }
  .loan-subgrid-table th:nth-child(2),
  .loan-subgrid-table td:nth-child(2) { width: 26%; }
  .loan-subgrid-table th:nth-child(5),
  .loan-subgrid-table td:nth-child(5) { width: 23%; }
  .loan-subgrid-table th:nth-child(6),
  .loan-subgrid-table td:nth-child(6) { width: 23%; }
}