/* ============================================================
   DISPATCHER DASHBOARD ? extends shared-tokens.css
   ============================================================ */

/* ?? Global focus-visible baseline ?? */
:focus-visible {
    outline: 2px solid var(--border-focus, #3f3f46);
    outline-offset: 2px;
}

/* ?? Layout ?? */
body { height: 100vh; overflow: hidden; }

.app-container { display: flex; height: 100vh; }

/* ?? Sidebar ?? */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-page, #f4f4f5);
    color: var(--text-primary);
    border-right: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: var(--nscc-pad-lg, 0.7rem) var(--nscc-pad-md, 0.5rem);
    gap: 0;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 0 0.25rem;
}

.sidebar-brand-star {
    font-size: 1.5rem;
    color: var(--text-primary);
    filter: drop-shadow(0 0 8px var(--brand-glow));
    flex-shrink: 0;
}

.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.sidebar-brand-sub {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 1px;
}

/* Nav links */
.nav-links { list-style: none; flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }

.nav-btn {
    width: 100%;
    text-align: left;
    padding: 0.625rem 0.875rem;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        padding-left var(--dur-fast) var(--ease-out);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-btn:hover {
    background: var(--bg-sunken);
    color: var(--text-primary);
    padding-left: 1.125rem;
}

.nav-btn.active {
    background: var(--chrome-folder-active, var(--brand));
    color: var(--text-inverse);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    padding-left: 0.875rem;
}

.nav-btn[data-view="patrol-view"].active,
.nav-btn.patrol-active {
    background: linear-gradient(135deg, #34C759 0%, #248a3d 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

.nav-separator { border: none; border-top: 2px solid var(--border); margin: 0.75rem 0.25rem; }

.sidebar-footer {
    padding-top: 1rem;
    border-top: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ?? Main Content ?? */
.main-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ?? Top Header ?? */
.top-header {
    flex-shrink: 0;
    background: var(--bg-card);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    position: relative;
    z-index: 2000;
    overflow: visible;
}

.header-left { display: flex; align-items: center; }


.nscc-chrome-comms-btn,
.nscc-chrome-alerts-btn {
    position: relative;
}
.nscc-chrome-comms-btn.active,
.nscc-chrome-alerts-btn.active {
    background: var(--bg-raised);
}
.nscc-header-center-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
}
.nscc-chrome-admin-btn {
    flex: 0 0 auto;
    /* Fully transparent so the banner's own paint (including the diagonal
       stripe pattern on .nscc-chrome-brand-row) shows through — the button
       reads as part of the top bar in every theme, light and dark. The
       previous background: var(--banner-bg) did not match: the brand row
       paints --banner-bg with a stripe overlay in light mode and switches
       to --bg-card entirely in dark mode, so the button always read as a
       differently-colored chip. */
    background: transparent !important;
    background-color: transparent !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    padding: 0.15rem 0.25rem !important;
}
.nscc-chrome-admin-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
}
:root.dark body .nscc-chrome-admin-btn,
body.dark-theme .nscc-chrome-admin-btn {
    background: transparent !important;
    background-color: transparent !important;
}
:root.dark body .nscc-chrome-admin-btn:hover,
body.dark-theme .nscc-chrome-admin-btn:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
}
.nscc-chrome-icon-cluster {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    align-content: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 64px;
    padding: 0.15rem 0.25rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 10px;
    background: var(--bg-raised, #d1d5db);
    box-sizing: border-box;
}
.nscc-chrome-icon-cluster .btn-icon {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 1.02rem;
}
.nscc-chrome-icon-cluster .btn-icon {
    margin: 0;
}
/* Beat the brand-row's generic round-button rule (higher specificity,
   defined later in this file) so these stay large enough to be clearly
   distinguishable — this box grows slightly past the 64px floor to fit
   them (min-height, not a hard cap). */
.nscc-chrome-brand-row .nscc-chrome-icon-cluster .btn.btn-icon,
.nscc-chrome-brand-row .nscc-chrome-icon-cluster .btn-ghost.btn-icon {
    width: 1.65rem !important;
    height: 1.65rem !important;
    font-size: 1.02rem !important;
    border-width: 2px !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
}
.nscc-chrome-comms-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: transparent;
    color: #000000;
    -webkit-text-fill-color: #000000;
    font-size: 0.65rem;
    font-weight: 800;
    border-radius: 8px;
    min-width: 15px;
    height: 15px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 3px solid #FF3B30;
    border: 2px solid var(--bg-card, #fff);
    font-family: sans-serif;
    padding: 0 3px;
    box-sizing: border-box;
    pointer-events: none;
}
.nscc-chrome-comms-badge:not([hidden]) {
    display: inline-flex;
}

.global-search { position: relative; }
.global-search input {
    padding: 0.45rem 1rem 0.45rem 2.25rem;
    border-radius: var(--radius-full);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    background: var(--bg-page);
    width: 280px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), width var(--dur-base) var(--ease-out);
}
.global-search::before {
    content: '\1F50D';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.95rem;
    pointer-events: none;
}
.global-search input:focus {
    width: 340px;
    border-color: var(--nscc-line, #000000);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.header-center { display: flex; justify-content: center; }

.top-tabs { display: flex; flex-wrap: nowrap; min-width: 0; gap: 0.125rem; background: var(--bg-sunken); border-radius: var(--radius-full); padding: 3px; }

.tab-btn {
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-full);
    transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
    white-space: nowrap;
}

.tab-btn.active {
    background: #fde047 !important; /* Vivid Yellow */
    color: var(--text-primary) !important;
    border: 2px solid var(--border) !important;
    box-shadow: 2px 2px 0px var(--border) !important;
}

.tab-btn:hover:not(.active) { color: var(--text-primary); }

.tab-dropdown { position: relative; display: inline-flex; }
.tab-dropdown.open > .tab-btn { background: var(--bg-raised); color: var(--text-primary); }
.tab-dropdown-chevron { font-size: 0.65rem; margin-left: 0.25rem; opacity: 0.7; }
.tab-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.35rem;
    z-index: 3000;
    flex-direction: column;
    gap: 0.15rem;
}
.tab-dropdown.open .tab-dropdown-menu {
    display: flex;
    border: 1px solid var(--nscc-line, #000);
}
.tab-dropdown-item {
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 0.65rem;
    text-align: left;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}
.tab-dropdown-item:hover { background: var(--bg-sunken); }

.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }

.icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    background: var(--btn-surface, #d4d4d8);
    font-size: 1rem;
    cursor: pointer;
    color: var(--btn-surface-ink, var(--text-secondary));
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
    box-shadow: var(--shadow-xs);
}
.icon-btn:hover { background: var(--btn-surface-hover, #a1a1aa); border-color: var(--nscc-line, #000000); transform: scale(1.05); }
.icon-btn:active { transform: scale(0.95); }

/* Small pill that flips a state list between "just states we operate in" and
   all 50 + DC. Sits next to the state <select> or above a state table so the
   default (operating) is quietly obvious and one click reveals the rest. */
.nscc-state-scope-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong, #52525b);
    background: var(--bg-elevated, #f4f4f5);
    color: var(--text-secondary, #3f3f46);
    font-size: 0.68rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--dur-fast, 120ms), border-color var(--dur-fast, 120ms), transform var(--dur-fast, 120ms);
    white-space: nowrap;
}
.nscc-state-scope-toggle:hover {
    background: var(--btn-surface-hover, #e4e4e7);
    border-color: var(--nscc-line, #000);
}
.nscc-state-scope-toggle:active { transform: scale(0.96); }
.nscc-state-scope-toggle[data-nscc-state-scope-current="all"] {
    background: var(--accent-soft, #dbeafe);
    border-color: var(--accent, #0f766e);
    color: var(--accent-ink, #0b3a34);
}
.nscc-state-scope-toggle__icon { font-size: 0.85rem; line-height: 1; }
.nscc-state-scope-toggle__label { font-weight: 600; letter-spacing: 0.02em; }

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.avatar-photo {
    width: 34px; height: 34px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 2px var(--border-strong);
}
.user-info { display: flex; flex-direction: column; }
.user-name  { font-weight: 700; font-size: 0.8125rem; color: var(--text-primary); line-height: 1.25; }
.user-title { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.header-sign-out-link {
    display: inline-block;
    margin-top: 0.12rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    line-height: 1.2;
}
.header-sign-out-link:hover {
    color: #ef4444;
}

/* ?? Header operational clock ? continental US zones ?? */
.nscc-header-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Wide enough for ET/CT/MT/AZ/PT without a horizontal scrollbar. */
    min-width: min(100%, 28.5rem);
    width: max-content;
    max-width: 100%;
    padding: 0.45rem 0.85rem 0.4rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.nscc-header-clock.is-simulated {
    border-color: #5856D6;
    background: rgba(88, 86, 214, 0.08);
    box-shadow: 0 0 0 1px rgba(88, 86, 214, 0.25);
}
.nscc-header-clock-zones {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.4rem;
    width: max-content;
    max-width: none;
    overflow-x: visible;
    padding-bottom: 0;
}
.nscc-header-clock-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Pin the top edge — the row centers its children, so without this a
       height change (e.g. the padding trim below) would shift the top
       down instead of only moving the bottom. */
    align-self: flex-start;
    min-width: 4.55rem;
    /* Trimmed from 64px — the box was taller than its content, reading as extra
       padding above/below. Top edge stays pinned (align-self:flex-start), so this
       only pulls the bottom up. */
    min-height: 46px;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0.02rem 0.4rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-lg);
    background: #d1d5db;
    line-height: 1.1;
    gap: 0.14rem;
}
.nscc-header-clock-zone-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.22rem;
    white-space: nowrap;
}
.nscc-header-clock-zone-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    white-space: nowrap;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.14rem 0.2rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}
.nscc-header-clock-zone-time-hour,
.nscc-header-clock-zone-time-ampm {
    color: #1a1500;
    background: #ffeb3b;
    border-radius: 0.2rem;
    padding: 0 0.12rem;
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.55);
}
.nscc-header-clock-zone-time-ampm {
    margin-left: 0.08rem;
}
.nscc-header-clock-zone-name {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.nscc-header-clock.is-simulated .nscc-header-clock-zone-time {
    color: #5856D6;
    background: transparent;
}
.nscc-header-clock.is-simulated .nscc-header-clock-zone-time-hour,
.nscc-header-clock.is-simulated .nscc-header-clock-zone-time-ampm {
    color: #1a1500;
    background: #ffeb3b;
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.55);
}
.nscc-header-clock-sub {
    margin-top: 0.18rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(100%, 28.5rem);
}
.nscc-header-clock.is-simulated .nscc-header-clock-sub {
    color: #5856D6;
}

/* ── Header widget host — non-clock widget variants ─────────────────────── */
/* The center-of-banner slot is now a widget host (nscc-header-clock.js).
   Widgets set data-widget on #nscc-header-clock so per-widget styles can
   size the frame appropriately without touching the classic timezone view.
   'off' mode uses the `hidden` attribute on both the host and the frame,
   matching the pre-widget 'clock=off' behavior — no CSS needed. */

/* World-clocks widget: same card layout as US zones, just wider abbreviations. */
.nscc-header-clock-zones.nscc-widget-world .nscc-header-clock-zone {
    min-width: 4.9rem;
}

/* Digital clock widget: one big time-of-day chip. */
.nscc-widget-digital {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.15rem 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #1a1500;
    background: #ffeb3b;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.55);
    min-height: 46px;
    line-height: 1.05;
}
.nscc-widget-digital-hour { font-size: 1.55rem; }
.nscc-widget-digital-rest { font-size: 1.25rem; }
.nscc-widget-digital-ampm { font-size: 0.8rem; margin-left: 0.2rem; }
.nscc-header-clock[data-widget="local-digital"].is-simulated .nscc-widget-digital {
    color: #ffffff;
    background: #5856D6;
    box-shadow: 0 0 0 1px rgba(88, 86, 214, 0.6);
}

/* Analog clock widget: 46-px SVG, matches the height of the timezone cards. */
.nscc-widget-analog {
    width: 46px;
    height: 46px;
    display: block;
}
.nscc-widget-analog-face {
    fill: #d1d5db;
    stroke: #000000;
    stroke-width: 2;
}
.nscc-widget-analog-tick {
    stroke: #1a1500;
    stroke-width: 1.2;
}
.nscc-widget-analog-tick.is-major {
    stroke-width: 2.4;
}
.nscc-widget-analog-hand {
    stroke: #1a1500;
    stroke-linecap: round;
}
.nscc-widget-analog-hand.is-hour { stroke-width: 3.4; }
.nscc-widget-analog-hand.is-min  { stroke-width: 2.4; }
.nscc-widget-analog-hand.is-sec  { stroke: #dc2626; stroke-width: 1.2; }
.nscc-widget-analog-pin {
    fill: #dc2626;
    stroke: #1a1500;
    stroke-width: 0.6;
}
/* Large analog clock widget: a big round face with hour numbers and minute marks (owner,
   2026-10-19 - "the clock widgets should have a large round analog option"). */
.nscc-widget-analog-lg { width: 88px; height: 88px; display: block; }
.nscc-widget-analog-lg-rim { fill: #111827; }
.nscc-widget-analog-lg-face { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 1; }
.nscc-widget-analog-lg-tick { stroke: #94a3b8; stroke-width: 0.9; stroke-linecap: round; }
.nscc-widget-analog-lg-tick.is-major { stroke: #0f172a; stroke-width: 2.2; }
.nscc-widget-analog-lg-num {
    font: 700 11px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; fill: #0f172a;
    text-anchor: middle; dominant-baseline: central;
}
.nscc-widget-analog-lg-hand { stroke: #0f172a; stroke-linecap: round; }
.nscc-widget-analog-lg-hand.is-hour { stroke-width: 4.2; }
.nscc-widget-analog-lg-hand.is-min  { stroke-width: 2.8; }
.nscc-widget-analog-lg-hand.is-sec  { stroke: #dc2626; stroke-width: 1.2; }
.nscc-widget-analog-lg-pin { fill: #dc2626; stroke: #0f172a; stroke-width: 1; }
body.dark-theme .nscc-widget-analog-lg-face { fill: #1f2937; stroke: #374151; }
body.dark-theme .nscc-widget-analog-lg-tick { stroke: #6b7280; }
body.dark-theme .nscc-widget-analog-lg-tick.is-major,
body.dark-theme .nscc-widget-analog-lg-num { stroke: #f8fafc; fill: #f8fafc; }
body.dark-theme .nscc-widget-analog-lg-num { stroke: none; }
body.dark-theme .nscc-widget-analog-lg-hand { stroke: #f8fafc; }
body.dark-theme .nscc-widget-analog-lg-hand.is-sec { stroke: #f87171; }
.nscc-header-clock[data-widget="large-analog"].is-simulated .nscc-widget-analog-lg-face { fill: #ede9fe; }
.nscc-header-clock[data-widget="local-analog"].is-simulated .nscc-widget-analog-face {
    fill: rgba(88, 86, 214, 0.15);
    stroke: #5856D6;
}
.nscc-header-clock[data-widget="local-analog"].is-simulated .nscc-widget-analog-hand.is-sec {
    stroke: #5856D6;
}

/* Date-card widget: desk-calendar look. Uses system-theme tokens so the
   header widget doesn't stay white on dark/tinted themes (Matt 2026-09-14). */
.nscc-widget-datecard {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.6rem;
    min-height: 46px;
    line-height: 1;
    background: var(--bg-card, #ffffff);
    border: 2px solid var(--border, var(--nscc-line, #000000));
    border-radius: var(--radius-md);
    color: var(--text-primary, #1a1500);
    min-width: 8rem;
}
.nscc-widget-datecard-dow {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    color: #dc2626;
    text-transform: uppercase;
}
.nscc-widget-datecard-day {
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    margin: 0.05rem 0;
}
.nscc-widget-datecard-mo {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #374151;
    text-transform: uppercase;
}

/* Shift-progress widget: label + progress bar + start/left. */
.nscc-widget-shift {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.15rem 0.5rem;
    min-height: 46px;
    min-width: 15rem;
    background: var(--bg-card, #f3f4f6);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md);
    color: #1a1500;
}
.nscc-widget-shift-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nscc-widget-shift-pct { color: #dc2626; }
.nscc-widget-shift-bar {
    height: 6px;
    background: #d1d5db;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #1a1500;
}
.nscc-widget-shift-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #22c55e 0%, #eab308 65%, #dc2626 100%);
    transition: width 0.4s ease;
}
.nscc-widget-shift-foot {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #374151;
    text-transform: uppercase;
}

/* Stopwatch widget: mono display + three buttons. */
.nscc-widget-stopwatch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0.4rem;
    min-height: 46px;
}
.nscc-widget-sw-display {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #1a1500;
    background: #ffeb3b;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md);
    padding: 0.05rem 0.5rem;
    min-width: 6.5rem;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.55);
}
.nscc-widget-sw-btns {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.nscc-widget-sw-btn {
    padding: 0.08rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-height: 0;
    line-height: 1.15;
}

/* Motto widget: single italic quote line, styled like a marquee card. */
.nscc-widget-motto {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.7rem;
    min-height: 46px;
    min-width: 16rem;
    max-width: 28rem;
    background: var(--bg-card, #f3f4f6);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md);
}
.nscc-widget-motto-quote {
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 700;
    color: #1a1500;
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.15;
    transition: opacity 0.2s ease;
}

/* The demo environment's DEMO flag is a banner widget now (nscc-banner-widgets.js). */
.nscc-header-clock-zones-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
/* Version strip: which environment + build id. Hidden by default — it slides up
   when the mouse reaches the bottom of the left menu, and only there (owner,
   2026-10-18). Anchored bottom-left so it rises out of the menu. */
#nscc-env-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    max-width: calc(100vw - 1rem);
    z-index: 2147483647;
    display: block;
    padding: 0.3rem 0.75rem;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-top-right-radius: 6px;
    box-shadow: var(--shadow-sm);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}
/* Reveal zone: the empty bottom of the left menu, one rail wide. Never a
   full-width strip — that sits above everything (z-index) and swallows the
   mousedown that starts a drag on anything docked to the bottom edge, notably
   the simulator toolbar once it is parked flush at the bottom. */
#nscc-env-footer-hitzone {
    position: fixed;
    left: 0;
    bottom: 0;
    width: var(--nscc-app-nav-rail, 48px);
    height: 1.25rem;
    z-index: 2147483646;
    pointer-events: auto;
}
#nscc-env-footer-hitzone:hover ~ #nscc-env-footer,
#nscc-env-footer:hover,
#nscc-env-footer.is-touched {
    transform: translateY(0);
    pointer-events: auto;
}

:root {
    /* Logo box / brand chip gray ? shared by banner buttons, legend, ticker bar.
       Tied to the active theme's own --bg-raised (defined per-theme, all 10, in
       shared-tokens.css) instead of a hardcoded value, so the ticker/banner
       chrome actually shifts with whichever theme is selected rather than
       looking identical across every dark rung. */
    --chrome-logo-box-bg: var(--bg-raised, #d1d5db);
    --ticker-bar-gray: var(--chrome-logo-box-bg);
    --ticker-granite: var(--chrome-logo-box-bg);
    --ticker-bar-ink: #1c1917;
    /* Ticker item chips: medium gray (not white); status color stays on border */
    --ticker-seg-fill: #9ca3af;
    --ticker-seg-fill-dark: #374151;
    --chrome-brand-row-bg: var(--banner-bg, #e4e4e7);
}
:root.dark,
body.dark-theme {
    --chrome-logo-box-bg: var(--bg-raised, #4b5563);
    --ticker-bar-gray: var(--chrome-logo-box-bg);
    --ticker-granite: var(--chrome-logo-box-bg);
    --ticker-bar-ink: var(--text-primary, #f4f4f5);
    /* Dark-gray chips on the logo-box bar */
    --ticker-seg-fill: #374151;
    --ticker-seg-fill-dark: #374151;
    --chrome-brand-row-bg: var(--banner-bg, var(--bg-card));
}

/* ?? Dispatch Ticker ?? */
.dispatch-ticker {
    --ticker-bar-height: 2.4rem;
    /* Chip must clear bar with room for border + 2px breathing room top/bottom */
    --ticker-chip-border-w: 4px;
    --ticker-chip-height: calc(var(--ticker-bar-height) - 10px);
    /* Rounded rectangle (NSCC chrome ~8px) ? not capsule / 999px pills */
    --ticker-chip-radius: 8px;
    --ticker-inner-height: var(--ticker-bar-height);
    background: var(--ticker-bar-gray, #d1d5db);
    color: var(--ticker-bar-ink, #1c1917);
    padding: 0;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: none !important;
    box-shadow: none;
    text-shadow: none;
    height: var(--ticker-bar-height);
    min-height: var(--ticker-bar-height);
    max-height: var(--ticker-bar-height);
    position: relative;
    z-index: 2;
}
.ticker-label {
    font-weight: 800;
    /* Same fill as product-name chip — no black LIVE slab */
    color: var(--ticker-bar-ink, #1c1917);
    white-space: nowrap;
    margin: 0;
    padding: 0 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    background: var(--chrome-logo-box-bg, #d1d5db);
    border-right: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
}
.dispatch-ticker marquee,
.dispatch-ticker-viewport {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    /* Vertically center inline chips inside the ticker strip */
    line-height: var(--ticker-bar-height);
    padding: 0;
    margin: 0;
    color: var(--ticker-bar-ink, #e4e4e7);
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    position: relative;
}
.dispatch-ticker-track {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    height: 100%;
    will-change: transform;
    animation-name: nscc-ticker-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 40s;
}
.dispatch-ticker-seq {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
    white-space: nowrap;
    /* No gap here — the last item of one copy must sit flush against the
       first item of the next so translateX(-50%) reads as one continuous
       ticker, not a pause-then-restart. */
}
@keyframes nscc-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.dispatch-ticker:hover .dispatch-ticker-track,
.dispatch-ticker:focus-within .dispatch-ticker-track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .dispatch-ticker-track {
        animation: none !important;
        transform: none !important;
    }
}
/* Status chips: medium gray fill; colored border carries status */
.ticker-seg {
    display: inline-flex;
    align-items: center;
    background: var(--ticker-seg-fill, #9ca3af);
    background-color: var(--ticker-seg-fill, #9ca3af);
    color: var(--ticker-bar-ink, #1c1917);
    -webkit-text-fill-color: var(--ticker-bar-ink, #1c1917);
    font-weight: 800;
    font-size: 0.72rem;
    padding: 0 0.55rem;
    margin: 0 0.28rem;
    height: var(--ticker-chip-height, 1.95rem);
    min-height: 0;
    max-height: var(--ticker-chip-height, 1.95rem);
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    border: var(--ticker-chip-border-w, 4px) solid var(--ticker-accent, currentColor);
    border-radius: var(--ticker-chip-radius, 8px);
    box-shadow: none;
    box-sizing: border-box;
    text-shadow: none;
    overflow: hidden;
    forced-color-adjust: none;
}
.ticker-seg-sep {
    display: inline-block;
    width: 0;
    height: var(--ticker-chip-height, 1.95rem);
    min-height: 0;
    max-height: var(--ticker-chip-height, 1.95rem);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    vertical-align: middle;
}

/* Top status color key ? sits above brand banner inside .top-header */
#color-legend,
.nscc-color-legend {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.55rem 1.15rem;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
    padding: 0.28rem 0.65rem;
    box-sizing: border-box;
    background: var(--ticker-bar-gray, #d1d5db) !important;
    background-color: var(--ticker-bar-gray, #d1d5db) !important;
    color: var(--ticker-bar-ink, #1c1917) !important;
    border: none !important;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}
.nscc-color-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    color: inherit;
}
.nscc-color-legend__swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 auto;
    border-radius: 3px;
    background: var(--nscc-legend-color, #94a3b8);
    border: 3px solid var(--nscc-legend-color, #94a3b8);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

/* ?? View Header ?? */
.view-header {
    padding: var(--nscc-pad-md, 0.5rem) var(--nscc-pad-lg, 0.7rem) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1999;
}
.view-header h2 {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

/* ?? Top-tab sub-nav panels (hidden unless matching main tab is active) ?? */
.sub-nav-panel[data-top-tab] {
    display: none;
    padding: var(--nscc-pad-xs, 0.2rem) var(--nscc-pad-md, 0.5rem);
    background: var(--bg-sunken);
    border-bottom: 2px solid var(--border);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.5rem;
    flex-shrink: 0;
}
.sub-nav-panel[data-top-tab].is-visible {
    display: flex;
}
/* Hard hide Dispatch submenu unless Dispatch main tab is active */
body:not([data-active-top-tab="live-ops"]) #live-ops-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}
body[data-active-top-tab="live-ops"] #live-ops-header.is-visible {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    min-height: unset !important;
    padding: 0.35rem 0.75rem !important;
    border-bottom: 2px solid var(--border) !important;
    overflow: visible !important;
}
body:not([data-active-top-tab="planner"]) #planner-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}
body[data-active-top-tab="planner"] #planner-header.is-visible {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    min-height: unset !important;
    padding: 0.35rem 0.75rem !important;
    border-bottom: 2px solid var(--border) !important;
    overflow: visible !important;
}
body:not([data-active-top-tab="back-office"]) #back-office-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}
body[data-active-top-tab="back-office"] .main-content {
    display: grid;
    grid-template-columns: var(--nscc-bo-nav-width, 240px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}
body[data-active-top-tab="back-office"] .top-header {
    grid-column: 1 / -1;
}
/* Legacy top-nav restore only: BO options as a left column. Left-nav mode hides this. */
html:not(.nscc-left-nav) body[data-active-top-tab="back-office"] #back-office-header.is-visible {
    grid-row: 2;
    grid-column: 1;
    display: flex !important;
    flex-direction: column;
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: 2px solid var(--border) !important;
    border-bottom: none !important;
    overflow: hidden !important;
    background: var(--bg-card);
    z-index: 3;
}
body[data-active-top-tab="back-office"] #live-ops-container {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    min-height: 0;
}
body.nscc-bo-nav-collapsed[data-active-top-tab="back-office"] {
    --nscc-bo-nav-width: 44px;
}
body:not([data-active-top-tab="support"]) #support-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}
body[data-active-top-tab="support"] #support-header.is-visible {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    min-height: unset !important;
    padding: 0.35rem 0.75rem !important;
    border-bottom: 2px solid var(--border) !important;
    overflow: visible !important;
}
/* Save to PDF + full-screen grouped at the trailing (far-right) edge of each toolbar */
.nscc-toolbar-actions-end {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
    margin-left: auto;
}
/* Stable dispatch toolbars ? prevent title/button jump on refresh */
.dispatch-timeline-header,
.gantt-header-line.gantt-view-toolbar,
#patrol-schedule-view .patrol-schedule-toolbar,
#guard-schedule-view .guard-schedule-toolbar,
.patrol-officers-toolbar,
.security-guards-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    min-height: 3.25rem;
    box-sizing: border-box;
}
.dispatch-timeline-header > div:first-child,
.gantt-header-line.gantt-view-toolbar > strong {
    flex: 1 1 auto;
    min-width: 0;
}
.dispatch-timeline-toolbar-actions,
.gantt-view-toolbar-actions {
    margin-left: auto;
}
/* Icon-only full-screen control (?) ? same glyph for enter and exit; no word labels */
.nscc-view-fs-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0 !important;
    font-family: inherit !important;
    font-weight: 600 !important;
}
.nscc-view-fs-btn[aria-pressed="true"] {
    color: var(--text-primary);
    border-color: var(--nscc-line, #000000);
}

/* Back Office ??? individual table full screen */
.nscc-table-fs-target {
    position: relative;
}
.nscc-table-fs-bar {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 6;
    pointer-events: none;
}
.nscc-table-fs-bar .nscc-table-fs-btn {
    pointer-events: auto;
    min-width: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
}
.nscc-table-fs-target.nscc-table-fs {
    position: fixed;
    inset: 0;
    z-index: 10050;
    max-height: none !important;
    height: 100vh;
    width: 100vw;
    margin: 0 !important;
    border-radius: 0;
    background: var(--bg-card);
    padding: var(--nscc-pad-sm, 0.35rem) var(--nscc-pad-md, 0.5rem) var(--nscc-pad-md, 0.5rem);
    box-sizing: border-box;
}
.nscc-table-fs-target.nscc-table-fs.md-dual-scroll {
    display: grid;
    max-height: none;
    height: calc(100vh - 1.25rem);
    min-height: 0;
}
.nscc-table-fs-target.nscc-table-fs .master-data-table-shell {
    max-height: none !important;
}
.nscc-table-fs-target.nscc-table-fs.nscc-table-scroll,
.nscc-table-fs-target.nscc-table-fs.erp-queue-table-wrap,
.nscc-table-fs-target.nscc-table-fs.erp-staging-table-wrap {
    max-height: none !important;
    min-height: 0;
    flex: 1;
    overflow: auto;
}
body.nscc-table-fs-active {
    overflow: hidden;
}

/* Back Office full-screen ??? NorthStar brand mark (top-left) */
.nscc-bo-fs-brand {
    position: absolute;
    top: 0.55rem;
    left: 0.65rem;
    z-index: 10070;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    pointer-events: none;
    user-select: none;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.nscc-bo-fs-brand[hidden] {
    display: none !important;
}
.nscc-bo-fs-brand img {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 6px var(--brand-glow));
}
.nscc-bo-fs-brand-word {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.nscc-bo-fs-brand-word strong {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.nscc-bo-fs-brand-word small {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.view-section.nscc-view-fs.nscc-bo-fs-brand-visible {
    padding-top: 2.85rem;
}
.nscc-table-fs-target.nscc-table-fs:has(.nscc-bo-fs-brand:not([hidden])) {
    padding-top: 2.85rem;
}

#dispatch-map-fullscreen-btn {
    display: none !important;
}

#live-ops-container .view-section.support-view.active {
    display: block;
    overflow-y: auto;
    padding: 0.75rem 1rem 1.25rem;
    height: calc(100vh - 195px);
    min-height: 420px;
    content-visibility: visible;
}

/* Support modal (legacy ??? inline Support tab is canonical) */
#support-modal .modal-content {
    max-width: 920px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#support-modal .support-modal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0 0.75rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 0.75rem;
}
#support-modal .support-modal-nav .sub-nav-btn {
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
}
#support-modal .support-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#support-modal .support-modal-panel {
    display: none;
}
#support-modal .support-modal-panel.active {
    display: block;
}
.sub-nav-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.125rem;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bg-sunken);
    padding: 2px;
    border-radius: var(--radius-full);
    scrollbar-width: thin;
}
.sub-nav-scroll .sub-nav-btn {
    flex-shrink: 0;
}

/* ?? Views Container ?? */
.views-container {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--nscc-pad-md, 0.5rem) var(--nscc-pad-lg, 0.7rem);
    overflow-y: auto;
    position: relative;
}


.view-section { display: none; height: 100%; content-visibility: hidden; }
.view-section.active {
    display: block;
    content-visibility: visible;
    animation: fadeSlideIn var(--dur-fast) var(--ease-out);
}
/* Planner fills the views container without negative-margin overlay under chrome */
#planner-view.active {
    margin: 0;
    height: 100%;
    min-height: 0;
    overflow: auto;
    box-sizing: border-box;
}
/* Full-screen Planner overlay: lifts the grid out of the app chrome to fill the viewport. */
#planner-view.nscc-planner-fs {
    position: fixed;
    inset: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    z-index: 4000;
    background: var(--bg-page, var(--bg-card, #ffffff));
    overflow: auto;
}
/* Live Ops dispatch views: fill the views container without negative-margin overlay */
#live-ops-container .view-section.active.nscc-dispatch-fs-ready {
    margin: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
/* Dispatch List: the trip table fills what is left under the widget strip. Its inline
   height (100vh - 195px) predates the taller header and folder tabs and ran ~100px
   past the bottom of the window, hiding the last rows (owner, 2026-10-18). */
#live-ops-container #primary-view.view-section.active.nscc-dispatch-fs-ready {
    display: flex;
    flex-direction: column;
}
#live-ops-container #primary-view.view-section.active.nscc-dispatch-fs-ready > * {
    flex: 0 0 auto;
}
#live-ops-container #primary-view.view-section.active.nscc-dispatch-fs-ready > #primary-left-panel {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
}
/* Unified full-screen overlay for dispatch sub-views (matches Planner) */
.view-section.nscc-view-fs {
    position: fixed;
    inset: 0;
    margin: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    z-index: 4000;
    background: var(--bg-page, var(--bg-card, #ffffff));
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    padding: 0.5rem;
    box-sizing: border-box;
}
/* Full-screen must not keep a prior Back Office / dispatch view painted on top
   after the user switches tabs ??? only the active section may stay visible. */
.view-section.nscc-view-fs:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}
body.nscc-view-fs-active {
    overflow: hidden;
}
/* Back office views in full-screen: remove max-width, allow scrolling */
.view-section.nscc-view-fs .master-data-shell {
    max-width: 100% !important;
    height: 100%;
    overflow: auto;
}
/* Quick Dispatch */
.nscc-quick-dispatch-delivery {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 10pt;
    font-family: monospace;
    padding: 0.25rem 0.35rem;
}
#primary-dispatch-table-body tr.nscc-quick-dispatch-site-row td {
    vertical-align: middle;
}
#primary-view.nscc-view-fs #primary-left-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
}
/* Trips board */
#card-view.nscc-view-fs .kanban-board {
    flex: 1 1 auto;
    min-height: 0;
}
/* Trips Gantt */
#dispatch-timeline-view.nscc-view-fs .dispatch-timeline-header {
    flex: 0 0 auto;
    margin-bottom: 0.65rem;
}
#dispatch-timeline-view.nscc-view-fs .dispatch-timeline-layout {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
}
#dispatch-timeline-view.nscc-view-fs .timeline-main-window {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
#dispatch-timeline-view.nscc-view-fs #timeline-grid-scroll {
    flex: 1 1 auto;
    height: 100%;
    max-height: none;
    overflow: auto !important;
}
/* Couriers roster */
#courier-view.nscc-view-fs .courier-horizontal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
/* Courier Gantt */
#gantt-view.nscc-view-fs .gantt-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: none;
}
#gantt-view.nscc-view-fs .gantt-fixed-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
#gantt-view.nscc-view-fs .gantt-scroll-box {
    flex: 1 1 auto;
    min-height: 0;
}
/* Courier Map */
#map-view.nscc-view-fs .map-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
}
#map-view.nscc-view-fs #dispatcher-map,
#map-view.nscc-view-fs .map-panel-shell {
    min-height: 0 !important;
    height: 100% !important;
}
#map-view.nscc-view-fs .courier-map-trip-list {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
}
#map-view.nscc-view-fs > div.no-print:first-of-type {
    flex: 0 0 auto;
}
/* Patrol Map */
#patrol-view.nscc-view-fs .patrol-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}
#patrol-view.nscc-view-fs .patrol-map-section {
    min-height: 0;
}
#patrol-view.nscc-view-fs #patrol-map {
    min-height: 280px;
}
/* JS-rendered roster / schedule views */
#patrol-officers-view.nscc-view-fs > div,
#security-guards-view.nscc-view-fs > div,
#patrol-schedule-view.nscc-view-fs,
#guard-schedule-view.nscc-view-fs {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
#patrol-schedule-view.nscc-view-fs .gantt-fixed-layout,
#guard-schedule-view.nscc-view-fs .gantt-fixed-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
#patrol-schedule-view.nscc-view-fs .gantt-scroll-box,
#guard-schedule-view.nscc-view-fs .gantt-scroll-box {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto !important;
}
/* WORM ledger */
#ledger-audit-view.nscc-view-fs > .card {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
#ledger-audit-view.nscc-view-fs .panel-header {
    flex: 0 0 auto;
}
#ledger-audit-view.nscc-view-fs .ledger-scroll-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}
@keyframes fadeSlideIn {
    from { opacity: 0.85; }
    to   { opacity: 1; }
}

/* ?? Kanban Board ?? */
.kanban-board { display: flex; gap: 1.25rem; height: 100%; }

.kanban-column {
    flex: 1;
    background: var(--bg-raised);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.column-header {
    padding: 0.875rem 1rem;
    border-bottom: 2px solid var(--border);
    background: var(--bg-card);
}
.column-header h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.column-content {
    flex-grow: 1;
    padding: 0.875rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Trip Cards */
.job-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.875rem;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition:
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast);
}
.job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.job-card-header { display: flex; justify-content: space-between; margin-bottom: 0.625rem; align-items: center; }

.bag-id {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.job-status { width: 9px; height: 9px; border-radius: var(--radius-full); flex-shrink: 0; }
.job-status.pending   { background: var(--text-muted); }
.job-status.transit   { background: var(--status-transit); box-shadow: var(--shadow-glow-amber); }
.job-status.delivered { background: var(--status-secure); box-shadow: var(--shadow-glow-green); }

.location-group { margin-bottom: 0.4rem; }
.location-group:last-child { margin-bottom: 0; }
.location-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 0.05em; }
.location-name  { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.job-card-expanded { display: none; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 2px solid var(--border); font-size: 0.8rem; }
.job-card.expanded .job-card-expanded { display: block; }

/* ?? Courier View ?? */
.courier-horizontal-scroll { display: flex; gap: 1.25rem; overflow-x: auto; height: 100%; padding-bottom: 0.75rem; }

.courier-lane {
    min-width: 280px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.courier-header {
    padding: 0.875rem 1rem;
    border-bottom: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-raised);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.courier-header h3 { font-size: 0.9375rem; font-weight: 700; }

.status {
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 0.2em 0.65em;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    color: var(--text-primary);
    border: 4px solid #64748b;
}
.status.green { background: transparent !important; color: var(--text-primary) !important; border: 4px solid #34C759 !important; }
.status.amber { background: transparent !important; color: var(--text-primary) !important; border: 4px solid #FF9500 !important; }
.status.grey  { background: transparent !important; color: var(--text-primary) !important; border: 4px solid #64748b !important; }

.courier-trips { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.75rem; overflow-y: auto; flex-grow: 1; }

/* Couriers trip list: rounded rectangles, black text, status-colored borders (not pills / fills) */
#courier-view .courier-trips .trip-card,
#courier-view .courier-trips .job-card {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border: 4px solid var(--nscc-status-border, var(--nscc-line, #000000)) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
#courier-view .courier-trips .trip-card .bag-id,
#courier-view .courier-trips .trip-card .location-label,
#courier-view .courier-trips .trip-card .location-name,
#courier-view .courier-trips .trip-card strong,
#courier-view .courier-trips .trip-card span:not(.ref-status-pill) {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
#courier-view .courier-trips .ref-status-pill,
#courier-view .courier-trips .status,
#courier-view .courier-trips .badge {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-width: 4px !important;
    border-style: solid !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

/* ?? NSCC schedule / gantt time-slot grid cells ?? */
.nscc-time-slot {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border-right: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    pointer-events: none;
}
.nscc-time-slot--interactive {
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
}
.nscc-time-slot--interactive:hover {
    background: var(--select-wash, rgba(24, 24, 27, 0.08));
}

/* ?? Gantt View ?? */
.gantt-container { padding: var(--nscc-pad-lg, 0.7rem); display: flex; flex-direction: column; gap: var(--nscc-gap-lg, 0.65rem); min-height: 0; overflow: hidden; max-height: calc(100vh - 250px); }
#gantt-view .gantt-container { flex: 1 1 auto; }
#gantt-view .gantt-header-line { flex: 0 0 auto; }
.gantt-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.gantt-label { width: 140px; font-weight: 600; font-size: 0.875rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.04em; }
.gantt-track {
    flex-grow: 1;
    height: 38px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}
.gantt-bar {
    position: absolute;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    border-radius: var(--radius-sm);
}

/* ?? Map View ?? */
.map-container { display: flex; gap: 1.25rem; height: 100%; }
.map-placeholder {
    flex-grow: 1;
    min-height: 260px;
    background: var(--bg-sunken);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 2px dashed var(--border);
}

/* ?? Dispatch Timeline View ?? */
.dispatch-timeline { display: flex; height: 100%; gap: 1.5rem; overflow: hidden; }
.timeline-trips { width: 300px; flex-shrink: 0; background: var(--bg-card); border-radius: var(--radius-lg); border: 2px solid var(--border); display: flex; flex-direction: column; }
.timeline-grid-container { flex-grow: 1; background: var(--bg-card); border-radius: var(--radius-lg); border: 2px solid var(--border); position: relative; overflow-x: auto; overflow-y: auto; }
.timeline-grid { display: grid; grid-template-columns: 100px repeat(24, 120px); grid-template-rows: auto; border-collapse: collapse; min-width: max-content; }
.timeline-cell { border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); padding: 1rem; min-height: 60px; position: relative; }
.timeline-header-cell { background: var(--bg-raised); position: sticky; top: 0; z-index: 10; font-size: 0.95rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding: 0.75rem; text-align: center; border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); }
.timeline-lane-label { background: var(--bg-card); position: sticky; left: 0; z-index: 9; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; padding-left: 1rem; border-right: 2px solid var(--border); }

.timeline-event { position: absolute; height: 36px; background: var(--brand-light); color: white; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; padding: 0 0.75rem; box-shadow: var(--shadow-sm); z-index: 5; cursor: pointer; white-space: nowrap; }


.intelligent-batching {
    width: 290px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    padding: var(--nscc-pad-lg, 0.7rem);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.batch-suggestion {
    margin-top: var(--nscc-gap-lg, 0.65rem);
    padding: var(--nscc-pad-md, 0.5rem);
    background: var(--bg-raised);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--status-secure);
}
.batch-suggestion h4 { margin-bottom: 0.25rem; font-size: 0.875rem; }
.batch-suggestion p  { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.875rem; }

/* ?? Patrol View ?? */
.patrol-container { display: flex; gap: var(--nscc-gap-lg, 0.65rem); height: 100%; }
.patrol-map-section {
    flex: 2;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    padding: var(--nscc-pad-lg, 0.7rem);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.patrol-dispatch-board {
    flex: 1;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    padding: var(--nscc-pad-lg, 0.7rem);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
}
.patrol-schedule-list { display: flex; flex-direction: column; gap: var(--nscc-gap, 0.4rem); }
/* ?? Patrol Operations View ?? */
.patrol-container {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--nscc-gap-lg, 0.65rem);
    height: 100%;
}
.patrol-map-section {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    padding: var(--nscc-pad-lg, 0.7rem);
    overflow: hidden;
}
.patrol-dispatch-board {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    padding: var(--nscc-pad-lg, 0.7rem);
    overflow: hidden;
}
.patrol-schedule-list {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--nscc-gap, 0.4rem);
}

.patrol-item {
    padding: 0.875rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    border-left: 3px solid var(--status-transit);
    transition: border-color var(--dur-fast), opacity var(--dur-fast), box-shadow var(--dur-fast);
}
.patrol-item.completed { border-left-color: var(--status-secure); opacity: 0.65; }
.patrol-item.is-selected {
    border-color: var(--nscc-line, #000000);
    box-shadow: 0 0 0 2px var(--brand-light), var(--shadow-sm);
}
.patrol-item-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; align-items: center; }
.patrol-time     { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.patrol-location { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.patrol-actions  { display: flex; gap: 0.5rem; }
.patrol-actions .btn { flex: 1; }

/* ?? Ledger / Reports panels ?? */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.data-table th { text-align: left; padding: 0.15rem 0.25rem; font-size: 0.65rem; font-weight: 800; color: var(--text-secondary); border-bottom: 2px solid var(--border); background: var(--table-head-bg, var(--bg-sunken)); }
.data-table td { padding: 0.15rem 0.25rem; border-bottom: 2px solid var(--border); font-size: 0.95rem; vertical-align: middle; text-align: left; }
.data-table tr:hover td { background: var(--bg-raised); }
.data-table tr:last-child td { border-bottom: none; }

/* Scrollable table regions ? freeze header row while body scrolls */
.nscc-table-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.nscc-table-scroll thead th,
.master-data-table-shell thead th,
.ledger-scroll-wrap thead th,
.data-table thead th,
#primary-dispatch-table thead th,
.modal .nscc-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--table-head-bg, var(--bg-sunken));
    box-shadow: 0 1px 0 var(--border);
}
#ledger-audit-view .ledger-scroll-wrap thead th {
    z-index: 4;
}
#primary-dispatch-table thead th {
    z-index: 10;
    background: var(--bg-card);
}
.master-data-table-shell thead tr.master-data-subhead-row th {
    top: 2.35rem;
    z-index: 3;
    padding-top: 0.35rem;
    padding-bottom: 0.45rem;
    vertical-align: bottom;
}

/* WORM ledger dispatcher-note column: wrap long notes instead of stretching the table. */
.ledger-note-cell {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 240px;
    min-width: 150px;
    line-height: 1.35;
}

/* Draggable items */
.dnd-item {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.dnd-item:hover { background: var(--bg-sunken); transform: scale(1.02); }
.dnd-item:active { cursor: grabbing; }

/* Reference-style operational views */
.ops-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.ops-toolbar-left, .ops-toolbar-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ops-chip { border: 2px solid var(--border); background:var(--bg-card); border-radius:6px; padding:.35rem .75rem; font-size:.75rem; color:var(--text-secondary); font-weight:700; }
.kanban-board { align-items:stretch; }

.dark .kanban-column, .dark-theme
.column-header h3 { color:var(--text-primary); text-transform:none; font-size:.875rem; letter-spacing:0; }
.job-card.ref-card { padding:0; overflow:hidden; border-radius:10px; }
.ref-card-body { padding:.875rem; }
.ref-card-menu { color:var(--text-muted); font-weight:900; letter-spacing:.1em; }
.ref-field-label { font-size:.62rem; color:var(--text-muted); font-weight:800; text-transform:uppercase; margin-top:.45rem; }
.ref-field-value { font-size:.84rem; color:var(--text-primary); font-weight:750; line-height:1.25; }
/* Trip details: what the trip bills and pays, from Accounts & Rates (app.js nsccBuildTripRateBlock). */
.nscc-trip-rate { margin-bottom:.4rem; }
.nscc-trip-rate__label { font-size:.6rem; font-weight:800; text-transform:uppercase; color:var(--text-muted); letter-spacing:.06em; margin-bottom:0; }
.nscc-trip-rate__value { font-size:.95rem; font-weight:800; color:var(--text-primary); }
.nscc-trip-rate__note { font-size:.58rem; font-weight:600; color:var(--text-muted); }
.nscc-trip-rate__pay { border:1.5px dashed var(--border); border-radius:6px; padding:.5rem .6rem; margin-bottom:.4rem; }
.nscc-trip-rate__pay-title { font-size:.62rem; font-weight:800; text-transform:uppercase; color:var(--brand-light); letter-spacing:.06em; margin-bottom:.3rem; }
.nscc-trip-rate__pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:.35rem .6rem; }
.nscc-trip-rate__pay-value { font-size:.85rem; font-weight:700; color:var(--text-primary); }
.ref-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:.35rem .75rem; margin-top:.75rem; padding-top:.7rem; border-top: 2px solid var(--border); }
.ref-status-pill { display:inline-flex; align-items:center; border-radius:8px; padding:.16rem .5rem; font-size:.66rem; font-weight:800; }
.ref-status-pill.pending { background:transparent; color: var(--text-primary); border: 4px solid #FF9500; }
.ref-status-pill.transit { background:transparent; color: var(--text-primary); border: 4px solid #007AFF; }
.ref-status-pill.delivered { background: transparent !important; color: var(--text-primary) !important; border: 4px solid #34C759 !important; }
.map-container.ref-map-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:1rem; }
.map-panel-shell { position:relative; min-height:620px; border: 2px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-sunken); }
.map-legend { position:absolute; z-index:500; top:.75rem; left:.75rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.map-legend .ops-chip { background:rgba(255,255,255,.92); color:#334155; box-shadow: var(--shadow-xs); }
.batch-card { background:var(--bg-raised); border: 2px solid var(--border); border-radius:var(--radius-md); padding:.75rem; margin-bottom:.65rem; box-shadow: var(--shadow-xs); }
.batch-card.warning { border-left:4px solid var(--status-transit); }
.batch-card.good { border-left:4px solid var(--status-secure); }
.batch-card h4 { font-size:.75rem; margin:0 0 .45rem; }
.batch-card p { margin:.2rem 0; font-size:.72rem; color:var(--text-secondary); }
.drop-courier { border:1px dashed var(--border); border-radius:var(--radius-md); padding:.65rem; margin-bottom:.5rem; background:var(--bg-raised); cursor:pointer; }
.drop-courier:hover { border-color: var(--nscc-line, #000000); background:var(--bg-sunken); }
.ref-gantt-shell { border: 2px solid var(--border); border-radius:var(--radius-lg); overflow:auto; background:var(--bg-card); }
.ref-gantt-grid { min-width:1120px; }
.ref-gantt-row { display:grid; grid-template-columns:170px repeat(10, 92px) 180px; min-height:58px; border-bottom: 2px solid var(--border); }
.ref-gantt-cell { position:relative; padding:.55rem; border-right: 2px solid rgba(148,163,184,.18); font-size:.7rem; }
.ref-gantt-header { background:var(--bg-sunken); color:var(--text-muted); font-weight:800; text-transform:uppercase; position:sticky; top:0; z-index:4; }
.ref-gantt-label { background:var(--bg-raised); position:sticky; left:0; z-index:3; font-weight:800; color:var(--text-primary); }
.ref-gantt-bar { position:absolute; top:13px; height:30px; border-radius:8px; color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); display:flex; align-items:center; padding:0 .75rem; font-size:.68rem; font-weight:850; box-shadow: none; cursor:pointer; overflow:hidden; white-space:nowrap; background:transparent; border:4px solid #FF9500; }
.ref-gantt-bar.pending { background:transparent; border-color:#FF9500; color: var(--text-primary); }
.ref-gantt-bar.transit { background:transparent; border-color:#007AFF; color: var(--text-primary); }
.ref-gantt-bar.delivered { background:transparent; border-color:#34C759; color: var(--text-primary); }
.gantt-alert-card { position:fixed; z-index:4000; width:320px; background:var(--bg-card); border: 2px solid rgba(239,68,68,.35); box-shadow: var(--shadow-lg); border-radius:var(--radius-lg); padding:1rem; }

.trip-card .job-card-expanded { display: none; }
.trip-card.expanded .job-card-expanded { display: block; }
.trip-card.expanded { border-color: var(--nscc-line, #000000) !important; box-shadow: var(--shadow-md) !important; }

/* Prevent Card View cards from compressing; scroll columns instead */
#card-view .kanban-board { min-height: 0; }
#card-view .kanban-column { min-height: 0; }
#card-view .column-content { min-height: 0; overflow-y: auto; align-content: flex-start; }
#card-view .job-card { flex: 0 0 auto; min-height: 185px; }
#card-view .job-card.expanded { min-height: 320px; }
#card-view .ref-card-body { min-height: inherit; }
#card-view .location-name { white-space: normal; overflow: visible; text-overflow: unset; }

/* Map View fullscreen ? legacy body class for floating map control */
body.map-view-fullscreen { overflow: hidden; }
body.map-view-fullscreen #map-view .map-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 0 !important;
}
body.map-view-fullscreen #dispatcher-map,
body.map-view-fullscreen #map-view .map-panel-shell {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
}
body.map-view-fullscreen #map-view .courier-map-trip-list {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    border-left: 2px solid var(--border);
    border-radius: 0 !important;
}
body.map-view-fullscreen #dispatch-map-controls {
    top: 1rem !important;
    left: 1rem !important;
    right: auto !important;
}

/* Compact floating Courier Map overlay controls */
#dispatch-map-controls.dispatch-map-controls {
    position: absolute;
    z-index: 800;
    top: 0.875rem;
    left: 0.875rem;
    right: auto;
    width: auto;
    max-width: calc(100% - 1.75rem);
    pointer-events: none;
}
#dispatch-map-controls .dispatch-map-controls__pill,
#dispatch-map-controls .dispatch-map-controls__panel {
    pointer-events: auto;
}
#dispatch-map-controls .dispatch-map-controls__panel {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    padding: 0.35rem 0.45rem 0.35rem 0.5rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 0 var(--border);
}
#dispatch-map-controls .dispatch-map-controls__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    box-shadow: 2px 2px 0 var(--border);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
#dispatch-map-controls .dispatch-map-controls__pill:hover {
    background: var(--bg-raised);
}
#dispatch-map-controls.dispatch-map-controls--minimized .dispatch-map-controls__panel {
    display: none;
}
#dispatch-map-controls:not(.dispatch-map-controls--minimized) .dispatch-map-controls__pill {
    display: none;
}
#dispatch-map-controls .dispatch-map-controls__couriers {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    margin: 0;
    white-space: nowrap;
}
#dispatch-map-controls .dispatch-map-controls__couriers input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
#dispatch-map-controls .dispatch-map-controls__couriers-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
/* Unit layer toggles — one row per unit type, with its map shape as the swatch
   so the control doubles as the legend. */
#dispatch-map-controls .nscc-unit-layers {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
    margin-top: 0.25rem;
}
#dispatch-map-controls .nscc-unit-layer-row {
    cursor: pointer;
}
#dispatch-map-controls .nscc-unit-layer-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}
#dispatch-map-controls .nscc-unit-layer-count {
    display: inline-block;
    min-width: 1.1em;
    padding: 0 0.25em;
    border-radius: 999px;
    background: var(--surface-raised, rgba(148, 163, 184, 0.22));
    color: var(--text-muted);
    font-size: 0.9em;
    text-align: center;
}

#dispatch-map-controls .nscc-unit-layers__pick {
    margin-top: 0.125rem;
    width: 100%;
    font-size: 0.62rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Per-unit picker — grouped by type, searchable. A flat list does not survive
   a full roster, so the body scrolls and the header/search stay put. */
.nscc-unit-pick-content {
    max-width: 520px;
    width: 95%;
    display: flex;
    flex-direction: column;
    max-height: min(80vh, 640px);
}
.nscc-unit-pick-search {
    margin-bottom: 0.5rem;
    flex: 0 0 auto;
}
.nscc-unit-pick-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.nscc-unit-pick-group + .nscc-unit-pick-group {
    margin-top: 0.75rem;
}
.nscc-unit-pick-group-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
}
.nscc-unit-pick-group-head h4 {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 900;
}
.nscc-unit-pick-shown {
    margin-left: auto;
    font-size: 0.66rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.nscc-unit-pick-list {
    display: flex;
    flex-direction: column;
}
.nscc-unit-pick-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.125rem;
    cursor: pointer;
    border-radius: 4px;
}
.nscc-unit-pick-row:hover {
    background: var(--surface-raised, rgba(148, 163, 184, 0.14));
}
.nscc-unit-pick-swatch {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}
.nscc-unit-pick-name {
    font-size: 0.8rem;
}
/* A ticked unit that still cannot be placed says why, rather than silently
   not appearing on the map. */
.nscc-unit-pick-note {
    margin-left: auto;
    font-size: 0.64rem;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
}
.nscc-unit-pick-row.is-unplaceable .nscc-unit-pick-name {
    color: var(--text-muted);
}
.nscc-unit-pick-empty,
.nscc-unit-pick-groupoff {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

/* Unit markers: SVG shapes sized by the adapter, never clipped or shifted. */
.nscc-unit-marker-icon,
.nscc-unit-marker-icon .nscc-unit-marker {
    display: block;
    line-height: 0;
    overflow: visible;
}
.nscc-unit-marker-icon {
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    transition: transform 0.15s ease;
}
.nscc-unit-marker-icon:hover {
    transform: scale(1.25);
}

#dispatch-map-controls .dispatch-map-controls__icon-btn {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 50%;
    border: 2px solid var(--border);
    box-shadow: 2px 2px 0 var(--border);
    flex-shrink: 0;
}
#dispatch-map-controls .dispatch-map-controls__minimize-btn {
    font-size: 0.55rem;
    color: var(--text-muted);
}
#dispatch-map-controls .dispatch-map-controls__date {
    flex-shrink: 0;
}

/* Dispatch Timeline layout */
.dispatch-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    border-radius: 4px;
}
.dispatch-timeline-layout { display:grid; grid-template-columns: minmax(0, 1fr); gap:0; height:calc(100% - 3.25rem); min-height:0; overflow:hidden; margin-top: 1rem; }
.dispatch-pending-column { width:auto; min-width:0; height:100%; overflow:hidden; }
.timeline-main-window { min-width:0; min-height:0; display:flex; overflow:hidden; }
.timeline-pending-trip {
    flex: 0 0 auto;
    background: transparent !important;
    background-color: transparent !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: 8px !important;
    padding: 0.75rem;
    margin-bottom: 0.65rem;
    cursor: grab;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}
.timeline-pending-trip:active { cursor: grabbing; }
.timeline-pending-trip strong,
.timeline-pending-trip span,
.timeline-pending-trip small {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
.dispatch-pending-column .column-content {
    background: transparent;
}
.dispatch-pending-column .column-header {
    background: transparent;
}
.timeline-drop-cell {
    min-height: 72px;
    padding: 0.45rem;
    background: rgba(255,255,255,0.01);
    border-right: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    box-sizing: border-box;
}
.timeline-drop-cell:hover { background:var(--select-wash, rgba(24, 24, 27, 0.08)); outline:1px dashed var(--brand-light); outline-offset:-4px; }
.timeline-event-inline {
    display: grid;
    gap: 0.25rem;
    width: 100%;
    min-height: 56px;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    background: transparent !important;
    background-color: transparent !important;
    border: var(--nscc-status-border-w, 4px) solid var(--nscc-status-border, #FF9500);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: grab;
    overflow: visible;
    box-shadow: none !important;
    box-sizing: border-box;
}
.timeline-event-inline.delivered {
    background: transparent !important;
    border-color: #34C759;
}
.timeline-event-inline.pending,
.timeline-event-inline.pending-pickup,
.timeline-event-inline.pickup-pending {
    border-color: #FF9500;
}
.timeline-event-inline.unassigned {
    border-color: #FF3B30;
}
.timeline-event-inline.en-route,
.timeline-event-inline.enroute {
    border-color: #5856D6;
}
.timeline-event-inline.pickup {
    border-color: #FFCC00;
}
.timeline-event-inline.transit,
.timeline-event-inline.current {
    border-color: #007AFF;
}
.timeline-event-inline.assigned {
    border-color: #AF52DE;
}
.timeline-event-inline.scheduled {
    border-color: #06b6d4;
}
.timeline-event-inline span,
.timeline-event-inline strong,
.timeline-event-inline div {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-weight: 600;
    opacity: 1;
    white-space: normal;
    overflow: visible;
    display: block;
    line-height: 1.2;
    word-break: break-word;
    font-size: 0.85rem;
}

/* Dispatch screen: remove top-right header avatar so dispatcher picture only appears once */
body.dispatch-timeline-active #header-user-avatar { display: none !important; }
body.dispatch-timeline-active .user-profile .personnel-identity img { display: none !important; }
body.dispatch-timeline-active .user-profile { gap: 0 !important; }

/* Hide duplicate top-left demo mode indicator; top-right global mode badge remains */
#sidebar-demo-notice { display: none !important; }

/* Top-right profile: keep only the main profile avatar, never add a second avatar beside the name */
.user-profile .user-info .personnel-identity > img,
.user-profile .user-info .personnel-identity img {
    display: none !important;
}
.user-profile #header-user-avatar {
    display: block !important;
}
body.dispatch-timeline-active #header-user-avatar {
    display: block !important;
}

/* Card View ? six status columns with horizontal scroll */
#card-view .kanban-board {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
#card-view .kanban-column {
    flex: 0 0 240px;
    min-width: 220px;
    max-width: 280px;
}
/* Explicit delivery-process order (Unassigned ? ? ? Delivered) */
#card-view .kanban-column.card-status-column--unassigned,
#card-view .kanban-column.card-unassigned-column { order: 1; }
#card-view .kanban-column.card-status-column--pending { order: 2; }
#card-view .kanban-column.card-status-column--en-route { order: 3; }
#card-view .kanban-column.card-status-column--pickup { order: 4; }
#card-view .kanban-column.card-status-column--transit { order: 5; }
#card-view .kanban-column.card-status-column--delivered { order: 6; }
#card-view .card-unassigned-column,
#card-view .card-status-column--unassigned,
#card-view .card-status-column--pending,
#card-view .card-status-column--en-route,
#card-view .card-status-column--pickup,
#card-view .card-status-column--transit,
#card-view .card-status-column--delivered {
    border-color: var(--nscc-line, #000000);
    background: var(--bg-sunken, var(--bg-card));
}

/* Pulse chart/badge drill-down focus on matching Today's Trips column */
#card-view .kanban-column.is-pulse-focus {
    outline: 3px solid #007AFF;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.22), 4px 4px 0 var(--nscc-hard-shadow, #000);
    z-index: 2;
    position: relative;
}
#card-view .kanban-column.is-pulse-focus .column-header {
    background: var(--bg-raised);
}

#card-view .card-col-count-badge {
    cursor: pointer;
    position: relative;
}
#card-view .card-col-count-badge:hover,
#card-view .card-col-count-badge:focus-visible {
    /* A focus ring stays 2px and high-contrast in every theme. */
    outline: 2px solid var(--text-primary, #000);
    outline-offset: 1px;
}

.nscc-card-col-hover {
    position: fixed;
    z-index: 5000;
    min-width: 280px;
    max-width: min(420px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 24px));
    overflow: auto;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 6px;
    box-shadow: 4px 4px 0 var(--nscc-hard-shadow, #000);
    padding: 0;
    font-size: 0.75rem;
}
.nscc-card-col-hover[hidden] { display: none !important; }
.nscc-card-col-hover.is-pinned {
    box-shadow: 0 12px 28px rgba(12, 35, 64, 0.18);
    border-color: var(--nscc-line, #000000);
}
.nscc-card-col-hover__head {
    position: sticky;
    top: 0;
    background: #0f172a;
    color: #f8fafc;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.75rem;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.nscc-card-col-hover__head em {
    font-style: normal;
    background: #fbbf24;
    color: var(--text-primary);
    padding: 0.1rem 0.45rem;
    border: var(--nscc-line-w, 1.5px) solid var(--nscc-line, #000);
    border-radius: 4px;
    font-weight: 900;
}
.nscc-card-col-hover__list {
    display: flex;
    flex-direction: column;
}
.nscc-card-col-hover__empty {
    padding: 0.85rem 0.75rem;
    color: #64748b;
    font-style: italic;
}
.nscc-card-col-hover__row {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--nscc-line, #000);
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    font: inherit;
}
.nscc-card-col-hover__row:last-child { border-bottom: 0; }
.nscc-card-col-hover__row:hover,
.nscc-card-col-hover__row:focus-visible {
    background: var(--table-row-hover, var(--info-wash, #f4f4f5));
    outline: none;
}
.nscc-card-col-hover__id {
    font-family: monospace;
    font-weight: 900;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}
.nscc-card-col-hover__meta {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.35rem;
    line-height: 1.3;
    margin-top: 0.15rem;
}
.nscc-card-col-hover__meta span {
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
}

/* Today's Trips ? neutral card chrome; status color only on pills */
#card-view .job-card,
#card-view .job-card[data-trip-status],
#card-view .job-card[data-trip-status="unassigned"],
#card-view .job-card[data-trip-status="pending"],
#card-view .job-card[data-trip-status="en-route"],
#card-view .job-card[data-trip-status="pickup"],
#card-view .job-card[data-trip-status="transit"],
#card-view .job-card[data-trip-status="delivered"],
#card-view .job-card[data-trip-status="assigned"],
#card-view .job-card[data-trip-status="scheduled"],
#card-view .job-card[data-trip-status="exception"] {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border-color: var(--nscc-line, #000000) !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--text-primary);
}
#card-view .job-card[data-trip-status]:hover,
#card-view .job-card[data-trip-status].expanded {
    box-shadow: none !important;
    border-color: var(--nscc-line, #000000) !important;
}
#card-view .card-assign-control select { cursor: pointer; }

/* Hide Leaflet attribution link on Map View and style courier avatar markers */
#map-view .leaflet-control-attribution { display: none !important; }
.courier-avatar-map-icon {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
}
.map-courier-avatar-marker {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 3px solid var(--brand-light) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.28) !important;
    overflow: hidden !important;
    background: var(--bg-card) !important;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), width var(--dur-base), height var(--dur-base) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.map-courier-avatar-marker img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
}
.courier-avatar-map-icon:hover .map-courier-avatar-marker {
    width: 48px !important;
    height: 48px !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 28px var(--select-glow, rgba(24, 24, 27, 0.35)), 0 0 0 4px var(--select-wash, rgba(24, 24, 27, 0.12)) !important;
    z-index: 1000 !important;
}

/* Courier Map: map + trip/site list column */
#map-view .map-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 1rem;
    align-items: stretch;
}
#map-view.active .map-container,
#patrol-view.active .patrol-container {
    min-height: calc(100vh - 360px);
    max-height: min(420px, calc(100vh - 300px));
}
#map-view #dispatcher-map,
#patrol-view #patrol-map {
    min-height: 260px;
    max-height: 360px;
    height: 320px;
}

/* ===== Draggable map splitter =====
   The fixed heights above leave the map as a band at the top of the work area.
   Once nscc-map-resizer.js installs, --nscc-map-h drives the height instead and
   the caps are lifted — otherwise dragging would have nothing to move.
   Not applied in either fullscreen mode, which already fills the viewport. */
#map-view.nscc-map-resizable:not(.nscc-view-fs) .map-container {
    height: var(--nscc-map-h, 320px);
    min-height: 0;
    max-height: none;
}
#map-view.nscc-map-resizable:not(.nscc-view-fs) #dispatcher-map {
    height: 100%;
    min-height: 0;
    max-height: none;
}
body.map-view-fullscreen #map-view.nscc-map-resizable .map-container,
body.map-view-fullscreen #map-view.nscc-map-resizable #dispatcher-map {
    height: 100%;
    max-height: none;
}
body.map-view-fullscreen .nscc-map-resizer,
#map-view.nscc-view-fs .nscc-map-resizer {
    display: none;
}

.nscc-map-resizer {
    height: 14px;
    margin: 0.25rem 0 0.5rem;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    transition: background var(--dur-fast, 120ms) ease;
    touch-action: none;          /* pointermove must not scroll the page mid-drag */
}
.nscc-map-resizer:hover,
.nscc-map-resizer:focus-visible,
.nscc-map-resizer.is-dragging {
    background: var(--surface-raised, rgba(148, 163, 184, 0.18));
}
.nscc-map-resizer:focus-visible {
    outline: 2px solid var(--brand-light, #2563eb);
    outline-offset: 1px;
}
.nscc-map-resizer__grip {
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: var(--border, rgba(148, 163, 184, 0.7));
}
.nscc-map-resizer:hover .nscc-map-resizer__grip,
.nscc-map-resizer.is-dragging .nscc-map-resizer__grip {
    background: var(--brand-light, #2563eb);
}
/* While dragging, stop the pointer selecting text or hovering map features. */
body.nscc-map-resizing {
    user-select: none;
    cursor: ns-resize;
}
body.nscc-map-resizing .leaflet-container,
body.nscc-map-resizing .mapboxgl-canvas-container {
    pointer-events: none;
}

/* ===== Courier Map trip/site list column ===== */
.courier-map-trip-list {
    width: 340px;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 0.85rem 0.85rem 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cm-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}
.cm-list-header h3 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.cm-list-date {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: monospace;
}
.cm-section-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 0.35rem;
    padding: 0.15rem 0.1rem;
}
.cm-section-label--sites {
    margin-top: 0.65rem;
    border-top: 1px dashed var(--border);
    padding-top: 0.6rem;
}
.cm-trip-group,
.cm-site-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cm-empty {
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 0.4rem 0.1rem;
    margin: 0;
}

/* Trip card */
.cm-trip-card {
    background: transparent !important;
    background-color: transparent !important;
    border: 4px solid var(--cm-status, var(--border));
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 0.6rem 0.65rem;
    cursor: pointer;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.cm-trip-card:hover {
    border-color: var(--cm-status, var(--nscc-line, #000000));
    box-shadow: none;
}
.cm-trip-card.is-selected {
    border-color: var(--cm-status, var(--nscc-line, #000000));
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.cm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.cm-trip-id {
    font-size: 0.74rem;
    font-weight: 800;
    font-family: monospace;
    color: var(--text-primary) !important;
}
.cm-status-badge {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.45rem;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background: transparent !important;
    background-color: transparent !important;
    white-space: nowrap;
    border: 4px solid var(--cm-status, #64748b) !important;
    box-shadow: none !important;
}
.cm-badge-available {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: var(--nscc-line-w, 2px) dashed var(--nscc-line, #000000) !important;
}
.cm-route {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.cm-route-pickup,
.cm-route-dest { font-weight: 600; color: var(--text-primary); }
.cm-route-arrow { color: var(--text-muted); }
.cm-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.66rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.cm-courier { font-weight: 700; color: var(--text-secondary); }

/* Inline edit fields (shown on selected trip / always on site cards) */
.cm-card-edit {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}
.cm-trip-card.is-selected .cm-card-edit,
.cm-site-card .cm-card-edit { display: flex; }
.cm-field {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.cm-field > span {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.cm-input {
    width: 100%;
    font-size: 0.72rem;
    padding: 0.32rem 0.4rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
}
.cm-create-btn {
    margin-top: 0.2rem;
    width: 100%;
    justify-content: center;
}

/* Available-site card */
.cm-site-card {
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.65rem;
    opacity: 0.92;
}
.cm-site-card:hover { opacity: 1; border-color: var(--text-muted); }
.cm-site-name {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-secondary);
}
.cm-site-hint {
    margin: 0 0 0.2rem;
    font-size: 0.66rem;
    color: var(--text-muted);
}

/* On-brand toggle switch (Show all couriers) */
.nscc-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 8px;
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.nscc-switch__knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.15s, background 0.15s;
}
.nscc-switch.is-on {
    background: var(--status-transit, #007AFF);
    border-color: var(--status-transit, #007AFF);
}
.nscc-switch.is-on .nscc-switch__knob {
    transform: translateX(16px);
    background: var(--bg-card, #fff);
}
#dispatcher-map.nscc-map-placeholder,
#patrol-map.nscc-map-placeholder {
    min-height: 260px;
}

/* Operational color legends */
.view-color-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    margin: 0 0 0.875rem 0;
    padding: 0.65rem 0.85rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.view-color-legend strong {
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    margin-right: 0.2rem;
}
.view-color-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.view-color-legend i {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 8px;
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.map-view-color-legend {
    position: absolute;
    z-index: 650;
    left: 0.875rem;
    bottom: 0.875rem;
    margin: 0;
    max-width: calc(100% - 2rem);
}
body.map-view-fullscreen .map-view-color-legend { bottom: 1rem; left: 1rem; }

.view-color-legend-top { margin-bottom: 1rem !important; }

.patrol-left-column-legend { margin: 0 0 0.875rem 0 !important; }

/* Consolidated left sidebar color legend */
.view-section .view-color-legend,
#map-view .view-color-legend,
.map-view-color-legend,
.patrol-left-column-legend { display: none !important; }
.sidebar-color-legend-panel {
    margin: 1rem 0.75rem 0.75rem;
    padding: 0.85rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: 0.45rem;
}
.sidebar-legend-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}
.sidebar-legend-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    line-height: 1.25;
    color: var(--text-secondary);
}
.sidebar-legend-item i:not(.legend-line) {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 8px;
    border: 2px solid rgba(0,0,0,0.25);
    flex: 0 0 auto;
}
.sidebar-legend-item .legend-line {
    width: 1rem;
    height: 0;
    border-top: 3px dashed var(--brand-light);
    flex: 0 0 auto;
}

/* Status badges ? rounded squares, clear fill, black text, colored borders */
.ref-status-pill,
.badge:is(.badge-secure, .badge-success, .badge-pending, .badge-pickup, .badge-transit, .badge-assigned, .badge-unassigned, .badge-scheduled, .badge-danger, .badge-en-route, .badge-current),
.ops-chip,
.status-badge,
.timeline-event-inline {
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-width: var(--nscc-status-border-w, 4px) !important;
    border-style: solid !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
/* Trips Gantt trip block: keep contents (especially the top-line status pill)
   inside the border. Without this the status label overflowed out of narrow
   blocks because both the id span and the status pill were flex-shrink: 0.
   The inline HTML now shrinks/ellipses the id first (see app.js
   RenderDispatchTimeline) and the block itself clips anything past the edge. */
.timeline-event-inline { overflow: hidden; }
.ref-status-pill.pending,
.badge-pending,
.status-pending {
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #FF9500 !important;
}
.ref-status-pill.unassigned,
.badge-unassigned,
.status-unassigned {
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #FF3B30 !important;
}
.ref-status-pill.assigned,
.badge-assigned,
.status-assigned {
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #AF52DE !important;
}
.ref-status-pill.transit,
.status-transit,
.badge-transit,
.timeline-event-inline.transit {
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #007AFF !important;
}
.ref-status-pill.delivered,
.status-delivered,
.badge-secure,
.badge-success,
.badge.green,
.status.green,
.timeline-event-inline.delivered {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #34C759 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.ref-status-pill.current,
.badge-current,
.status-current {
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #007AFF !important;
}
.ref-status-pill.exception,
.ref-status-pill.conflict,
.badge-danger,
.status-exception,
.status-conflict {
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #FF3B30 !important;
}
.ref-status-pill.scheduled,
.badge-scheduled,
.status-scheduled {
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #06b6d4 !important;
}

/* Gantt / Trips Gantt trip blocks ? clear fill, black text, colored border */
.gantt-trip-block {
    position: absolute;
    top: 8px;
    height: 52px;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0.5rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    cursor: grab;
    overflow: hidden;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: var(--nscc-status-border-w, 4px) solid var(--nscc-status-border, #FF9500) !important;
    line-height: 1.25;
    box-sizing: border-box;
}
.gantt-trip-block:active { cursor: grabbing; }
.gantt-trip-block .gantt-trip-customer,
.gantt-trip-block div,
.gantt-trip-block strong,
.gantt-trip-block span {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
.gantt-trip-block .gantt-trip-customer {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
}
.gantt-drop-row:hover { background: var(--select-wash, rgba(24, 24, 27, 0.08)); }

/* Gantt readable full labels */
.gantt-courier-row [onclick*="showEmployeeCard"] span { font-size: 0.875rem !important; }
.gantt-trip-block { text-overflow: ellipsis; }

/* Status pills ? outlined (colored border; theme ink text); trip cards keep their own rules */
.ref-status-pill.transit,
.badge.transit,
.status.transit {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    opacity: 1 !important;
    border: 4px solid #007AFF !important;
    border-color: #007AFF !important;
}
.ref-status-pill.delivered,
.badge.delivered,
.status.delivered,
.badge-secure,
.badge-success,
.badge.green,
.status.green {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    opacity: 1 !important;
    border: 4px solid #34C759 !important;
    border-color: #34C759 !important;
    box-shadow: none !important;
}
.trip-card .ref-status-pill,
.job-card .ref-status-pill,
.timeline-event-inline,
.gantt-trip-block {
    opacity: 1 !important;
    background-blend-mode: normal !important;
    backdrop-filter: none !important;
}

/* Courier Gantt conflict count + Nudge / Find slot button (nscc-gantt-collision.js):
   keep it inside the fixed courier column instead of spilling into the time grid. */
#gantt-view .gantt-fixed-courier-label .gantt-conflict-actions {
    display: block;
    max-width: 100%;
    overflow: hidden;
}
#gantt-view .gantt-fixed-courier-label .gantt-conflict-actions button {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}
/* The markup is class-only (CSP: no inline style= / onclick=); these rules carry
   what used to be inline. Specificity beats `.gantt-fixed-courier-label span span`. */
#gantt-view .gantt-fixed-courier-label .gantt-conflict-actions .gantt-conflict-title {
    color: #ef4444;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
#gantt-view .gantt-fixed-courier-label .gantt-conflict-actions .gantt-conflict-nudge {
    margin-top: 0.35rem;
    padding: 2px 6px;
    font-size: 0.62rem;
    font-weight: 800;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
#gantt-view .gantt-fixed-courier-label .gantt-conflict-actions .gantt-conflict-nudge.gantt-conflict-find {
    background: #64748b;
}
#gantt-view .gantt-fixed-courier-label .gantt-conflict-actions .gantt-conflict-more {
    font-size: 0.58rem;
    color: var(--text-muted);
}

/* Gantt courier rows: keep only the main row avatar, hide injected name avatar */
#gantt-view .gantt-courier-row .personnel-identity > img,
#gantt-view .gantt-courier-row span.personnel-identity img,
#gantt-view .gantt-courier-row [data-person-name] > img,
#gantt-view .gantt-fixed-courier-label .personnel-identity > img,
#gantt-view .gantt-fixed-courier-label .personnel-identity img,
#gantt-view .gantt-fixed-courier-label .personnel-identity .nscc-avatar-chip,
#gantt-view .gantt-fixed-courier-label .personnel-identity .nscc-avatar-img,
#gantt-view .gantt-fixed-courier-label .personnel-identity .nscc-avatar-initials,
#gantt-view .gantt-trip-block .personnel-identity img,
#gantt-view .gantt-trip-block .personnel-identity .nscc-avatar-chip {
    display: none !important;
}
#gantt-view .gantt-courier-row [onclick*="showEmployeeCard"] > div:first-child img,
#gantt-view .gantt-fixed-courier-label > img,
#gantt-view .gantt-fixed-courier-label > .nscc-avatar-chip {
    display: block !important;
}
#gantt-view .gantt-fixed-courier-label > .nscc-avatar-chip {
    display: inline-flex !important;
}

/* Separate Unassigned from Pending Pickup ? outline only (no solid fill) */
.ref-status-pill.unassigned,
.badge-unassigned,
.status-unassigned {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    opacity: 1 !important;
    border: var(--nscc-status-border-w, 4px) solid #FF3B30 !important;
    border-color: #FF3B30 !important;
    border-radius: 8px !important;
}
.ref-status-pill.assigned,
.badge-assigned,
.status-assigned {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    opacity: 1 !important;
    border: var(--nscc-status-border-w, 4px) solid #AF52DE !important;
    border-color: #AF52DE !important;
    border-radius: 8px !important;
}
.ref-status-pill.pending,
.badge-pending,
.status-pending {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    opacity: 1 !important;
    border: var(--nscc-status-border-w, 4px) solid #FF9500 !important;
    border-color: #FF9500 !important;
    border-radius: 8px !important;
}
.sidebar-legend-item i[style*="#f59e0b"] + span::after {
    content: " / Pending Pickup";
}

/* Dispatch View courier names: stack first and last name */
#dispatch-timeline-view .timeline-courier-label,
#dispatch-timeline-view [data-courier-name],
#dispatch-timeline-view .courier-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.1 !important;
    display: grid !important;
    gap: 0.05rem !important;
}
#dispatch-timeline-view .timeline-courier-label span,
#dispatch-timeline-view [data-courier-name] span,
#dispatch-timeline-view .courier-name span {
    display: block !important;
}

/* Stack first/last courier names in Dispatch and Courier views */
#dispatch-timeline-view .stacked-courier-name,
#courier-view .stacked-courier-name,
#courier-view .courier-name,
#courier-view .courier-lane h3,
#courier-view .courier-header h3,
#courier-view [data-courier-name] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.08 !important;
    display: grid !important;
    gap: 0.05rem !important;
}
#dispatch-timeline-view .stacked-courier-name span,
#courier-view .stacked-courier-name span,
#courier-view .courier-name span,
#courier-view .courier-lane h3 span,
#courier-view .courier-header h3 span,
#courier-view [data-courier-name] span {
    display: block !important;
}

/* Full-day timeline visibility */
#gantt-view .gantt-scroll-box,
#dispatch-timeline-view #timeline-grid-scroll {
    overflow-x: auto !important;
}
#gantt-view .gantt-trip-block,
#dispatch-timeline-view .timeline-event-inline {
    min-width: 64px;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-width: var(--nscc-status-border-w, 4px) !important;
    border-style: solid !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Dispatch Timeline true 24-hour grid */
#dispatch-timeline-view .timeline-grid-full-day {
    display: grid !important;
    grid-template-columns: 320px repeat(24, minmax(92px, 1fr)) !important;
    min-width: 2528px !important;
    align-items: stretch;
}
#dispatch-timeline-view .timeline-corner-cell {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-sunken);
    border-bottom: 2px solid var(--border);
    border-right: 2px solid var(--border);
    padding: 0.55rem 0.35rem;
    font-size: 0.66rem;
    font-weight: 900;
    color: var(--text-muted);
    text-align: center;
    width: 320px;
    min-width: 320px;
    box-sizing: border-box;
}
#dispatch-timeline-view .timeline-hour-label {
    position: sticky;
    top: 0;
    z-index: 9 !important;
    background: var(--bg-sunken);
    border-bottom: 2px solid var(--border);
    border-right: 2px solid var(--border);
    padding: 0.55rem 0.35rem;
    font-size: 0.66rem;
    font-weight: 900;
    color: var(--text-muted);
    text-align: center;
}
#dispatch-timeline-view .timeline-courier-label {
    position: sticky;
    left: 0;
    z-index: 8 !important;
    background: var(--bg-raised);
    border-right: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    min-height: 76px;
    display: flex !important;
    align-items: stretch;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.4rem;
    width: 320px;
    min-width: 320px;
    box-sizing: border-box;
}
#dispatch-timeline-view .timeline-courier-label img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
#dispatch-timeline-view .timeline-courier-name-text {
    display: grid !important;
    line-height: 1.08;
    font-size: 0.7rem;
    font-weight: 800;
}
#dispatch-timeline-view .timeline-event-courier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
}
#dispatch-timeline-view .timeline-event-courier img,
#dispatch-timeline-view .timeline-event-courier > .nscc-avatar-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.45);
    flex: 0 0 auto;
}
/* One face per trip bar ? hide any injected identity avatar beside the painted courier photo */
#dispatch-timeline-view .timeline-event-courier .personnel-identity img,
#dispatch-timeline-view .timeline-event-courier .personnel-identity .nscc-avatar-chip,
#dispatch-timeline-view .timeline-event-courier .personnel-identity .nscc-avatar-img,
#dispatch-timeline-view .timeline-event-courier .personnel-identity .nscc-avatar-initials {
    display: none !important;
}
#dispatch-timeline-view .timeline-event-courier-name {
    display: grid !important;
    gap: 0.05rem;
    line-height: 1.08;
    font-size: 0.68rem;
    font-weight: 800;
    min-width: 0;
    width: 100%;
}
#dispatch-timeline-view .timeline-event-courier-name span {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
/* Trips Gantt bar: one item per row — trip ID, status, courier, route — so nothing in a
   short bar overlaps (the ID and status used to share a line, and the courier name was
   split over two lines under a 22px photo, so a 1-hour bar clipped or covered them). */
#dispatch-timeline-view .timeline-event-inline .nscc-tl-bar-row {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    font-size: 0.62rem;
}
#dispatch-timeline-view .timeline-event-inline .nscc-tl-bar-id {
    font-family: monospace;
    font-weight: 800;
}
#dispatch-timeline-view .timeline-event-inline .nscc-tl-bar-status {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: top;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.58rem;
    padding: 1px 5px;
    line-height: 1.1;
}
#dispatch-timeline-view .timeline-event-inline .nscc-tl-bar-courier {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    font-weight: 800;
}
#dispatch-timeline-view .timeline-event-inline .nscc-tl-bar-courier img {
    width: 14px;
    height: 14px;
}
#dispatch-timeline-view .timeline-event-inline .nscc-tl-bar-courier span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}
#dispatch-timeline-view .timeline-event-inline .nscc-tl-bar-route {
    font-weight: 600;
}
#dispatch-timeline-view .timeline-drop-cell {
    min-height: 76px;
    border-right: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
}

.today-date-btn {
    border: 2px solid var(--border) !important;
    margin-left: 0.4rem !important;
    padding: 0.25rem 0.6rem !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
}

/* Sticky first column for Dispatch Timeline and Gantt */
#dispatch-timeline-view .timeline-corner-cell {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--bg-sunken) !important;
}
#dispatch-timeline-view .timeline-courier-label {
    position: sticky !important;
    left: 0 !important;
    z-index: 8 !important;
    background: var(--bg-raised) !important;
}
#gantt-view .gantt-scroll-box > div:first-child > div:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background: var(--bg-sunken) !important;
}
#gantt-view .gantt-courier-row > div:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 8 !important;
    background: var(--bg-raised) !important;
}
#gantt-view .gantt-scroll-box,
#dispatch-timeline-view #timeline-grid-scroll {
    position: relative !important;
}

/* FINAL Dispatch/Gantt sticky columns and clean full-day grids */
#dispatch-timeline-view .dispatch-date-control.nscc-date-nav,
#dispatch-timeline-view .nscc-date-nav.dispatch-date-control {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    height: 1.5rem;
}
#dispatch-timeline-view .dispatch-date-control.nscc-date-nav input,
#dispatch-timeline-view .nscc-date-nav.dispatch-date-control input {
    background: transparent;
    border: 0;
    color: var(--text-primary);
}
#dispatch-timeline-view .dispatch-date-control:not(.nscc-date-nav) { display:flex; align-items:center; gap:0.45rem; background:var(--bg-sunken); padding:0.35rem 0.75rem; border-radius:var(--radius-full); border: 2px solid var(--border); }
#dispatch-timeline-view .dispatch-date-control:not(.nscc-date-nav) input { background:transparent; border:0; color:var(--text-primary); }
#dispatch-timeline-view .timeline-grid-full-day { display:grid !important; grid-template-columns:320px repeat(24, 96px) !important; min-width:2624px !important; }
#gantt-view .gantt-header-line { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; padding:0.5rem 1rem; background:var(--bg-sunken); border:2px solid var(--border); border-radius:4px; color:var(--text-secondary); font-size:0.75rem; }
#gantt-view .gantt-scroll-box { overflow:auto; border: 2px solid var(--border); border-radius:var(--radius-md); background:var(--bg-card); }
#gantt-view .gantt-hours-row { display:flex; position:sticky; top:0; z-index:5; background:var(--bg-sunken); border-bottom:2px solid var(--border); }
#gantt-view .gantt-corner, #gantt-view .gantt-hour { flex:0 0 auto; padding:0.55rem 0.35rem; font-size:0.8125rem; font-weight:900; color:var(--text-muted); text-align:center; border-right: 2px solid var(--border); }
#gantt-view .gantt-corner { position:sticky; left:0; z-index:8; background:var(--bg-sunken); }
#gantt-view .gantt-courier-row { display:flex; border-bottom: 2px solid var(--border); }
#gantt-view .gantt-courier-label { position:sticky; left:0; z-index:7; flex:0 0 auto; display:flex; align-items:center; gap:0.5rem; min-height:68px; padding:0.5rem; background:var(--bg-raised); border-right: 2px solid var(--border); cursor:pointer; }
#gantt-view .gantt-courier-label img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
#gantt-view .gantt-courier-label span span { display:block; line-height:1.08; font-size:0.875rem; font-weight:800; }
#gantt-view .gantt-drop-row { position:relative; flex:0 0 auto; min-height:68px; }
.gantt-drop-row .nscc-time-slot,
.gantt-time-row .nscc-time-slot { pointer-events: none; }

.date-nav-btn,
.nscc-date-nav__btn {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    min-width: 1.5rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0 !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000) !important;
}

/* Gantt fixed courier column with scrolling time area */
#gantt-view .gantt-fixed-layout {
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    /* Defensive: `min-width: 0` on both grid tracks so a stubborn wide
       child (e.g. an unusually long courier label) can't push the whole
       grid past its parent's width and leak out to the right. Matt
       2026-09-12 D5: "Trip gantts have overflow issues." */
    min-width: 0;
    background: var(--bg-card);
    align-items: start;
}
#gantt-view .gantt-fixed-layout > * {
    min-width: 0;
}
#gantt-view .gantt-fixed-couriers {
    background: var(--bg-raised);
    border-right: 2px solid var(--border);
    z-index: 10;
    align-self: start;
}
#gantt-view .gantt-fixed-corner {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-sunken);
    border-bottom: 2px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 12;
}
#gantt-view .gantt-fixed-courier-label {
    min-height: 76px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-bottom: 2px solid var(--border);
    cursor: pointer;
    box-sizing: border-box;
}
#gantt-view .gantt-fixed-courier-label img,
#gantt-view .gantt-fixed-courier-label .nscc-avatar-chip {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
#gantt-view .gantt-fixed-courier-label .nscc-avatar-initials {
    width: 100%;
    height: 100%;
}
#gantt-view .gantt-fixed-courier-label span span {
    display: block;
    line-height: 1.08;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--text-primary);
}
#gantt-view .gantt-fixed-layout .gantt-scroll-box {
    overflow-x: auto !important;
    overflow-y: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    align-self: start;
    /* Defensive: contain the momentum scroll so a horizontal drag on a
       gantt row doesn't accidentally scroll the whole view section
       once the gantt reaches its edge. Matt 2026-09-12 D5. */
    overscroll-behavior-x: contain;
}
/* Trip blocks sit inside .gantt-time-canvas with absolute positioning.
   Long trip content (customer name, notes) inside a narrow block was
   observed to bleed past the block's right edge instead of clipping —
   force overflow: hidden on every trip block so the visible bar always
   matches its computed width. Matt 2026-09-12 D5. */
.gantt-trip-block {
    overflow: hidden;
    min-width: 0;
}
#gantt-view .gantt-time-canvas {
    position: relative;
}
#gantt-view .gantt-time-canvas .gantt-hours-row {
    display: flex;
    height: 40px;
    background: var(--bg-sunken);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 11;
}
#gantt-view .gantt-time-canvas .gantt-hour {
    flex: 0 0 auto;
    padding: 0.55rem 0.35rem;
    text-align: center;
    border-right: 2px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 900;
    color: var(--text-muted);
}
#gantt-view .gantt-time-row {
    position: relative;
    min-height: 76px;
    height: auto;
    border-bottom: 2px solid var(--border);
    box-sizing: border-box;
}
/* Per-trip lane tops are set inline; do not force a single shared top. */
#gantt-view .gantt-fixed-layout .gantt-trip-block {
    top: auto;
}

#dispatch-timeline-view .dispatch-date-control > span:first-child { display: none !important; }

/* Put next-date arrow before the native calendar picker icon */
#dispatch-timeline-view .date-control-arrow-overlay {
    position: relative !important;
}
#dispatch-timeline-view .date-control-arrow-overlay input[type="date"] {
    padding-right: 2.25rem !important;
}
#dispatch-timeline-view .date-next-before-picker {
    margin-left: -2.35rem !important;
    margin-right: 0.35rem !important;
    z-index: 3 !important;
    background: var(--bg-raised) !important;
    position: relative !important;
}

#gantt-view .gantt-header-line .dispatch-date-control.nscc-date-nav,
#gantt-view .gantt-header-line .nscc-date-nav.dispatch-date-control {
    display: flex;
    align-items: center;
    gap: 0.2rem !important;
    background: transparent;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    height: 1.5rem;
}
#gantt-view .gantt-header-line .dispatch-date-control.nscc-date-nav input[type="date"],
#gantt-view .gantt-header-line .nscc-date-nav.dispatch-date-control input[type="date"] {
    background: transparent;
    border: 0;
    color: var(--text-primary);
    padding: 0 !important;
    font-size: 0.7rem !important;
    font-weight: 800;
    height: 100%;
}
#gantt-view .gantt-header-line .dispatch-date-control:not(.nscc-date-nav) {
    display: flex;
    align-items: center;
    gap: 0.25rem !important;
    background: var(--bg-sunken);
    padding: 0.15rem 0.45rem !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border) !important;
}
#gantt-view .gantt-header-line .dispatch-date-control:not(.nscc-date-nav) input[type="date"] {
    background: transparent;
    border: 0;
    color: var(--text-primary);
    padding: 0 0.15rem !important;
    font-size: 0.72rem !important;
}
#gantt-view .gantt-header-line .dispatch-date-control .btn,
#gantt-view .gantt-header-line .dispatch-date-control button {
    padding: 0 !important;
    font-size: 0.65rem !important;
    min-width: 1.5rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    line-height: 1 !important;
}
#gantt-view .gantt-header-line .dispatch-date-control .today-date-btn,
#gantt-view .gantt-header-line .nscc-date-nav .today-date-btn {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 0.45rem !important;
    font-size: 0.6rem !important;
    margin-left: 0 !important;
    border-radius: 3px !important;
}

/* Trip-aware date calendar popover */
.trip-date-calendar-popover {
    position: absolute;
    z-index: 9000;
    width: 280px;
    padding: 0.85rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.trip-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    color: var(--text-primary);
}
.trip-calendar-header button {
    border: 2px solid var(--border);
    background: var(--bg-raised);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 900;
}
.trip-calendar-weekdays,
.trip-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}
.trip-calendar-weekdays span {
    text-align: center;
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 900;
}
.trip-calendar-day,
.trip-calendar-empty {
    height: 32px;
    border-radius: var(--radius-sm);
}
.trip-calendar-day {
    border: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 700;
}
.trip-calendar-day.has-trips {
    background: #18181b;
    color: #fff;
    border-color: rgba(0,0,0,0.35);
}
.trip-calendar-day.selected {
    outline: 2px solid var(--brand-light);
    outline-offset: 1px;
}
.trip-calendar-day:hover {
    background: var(--bg-raised);
    color: var(--text-primary);
}
.trip-calendar-day.has-trips:hover {
    background: #27272a;
    color: #fff;
}
.trip-calendar-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.trip-calendar-legend i {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #18181b;
}
.ledger-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    min-width: 150px;
}
.ledger-identity-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.ledger-identity-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ledger-identity strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ledger-identity small {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.ledger-courier-unassigned {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.82rem;
    font-style: italic;
}
.ledger-erp-employee-id {
    display: inline-block;
    font-family: monospace;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    white-space: nowrap;
}

/* WORM ledger other-party scan identity */
.ledger-other-party {
    position: relative;
    min-width: 160px;
    cursor: default;
}
.ledger-other-party strong {
    display: block;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.ledger-other-party small,
.ledger-no-photo {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.ledger-scan-hover {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 0.4rem);
    z-index: 9999;
    width: 220px;
    padding: 0.55rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}
.ledger-other-party:hover .ledger-scan-hover {
    display: block;
}
.ledger-scan-hover span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
}
.ledger-scan-hover img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}

/* WORM hover visible signature */
.ledger-hover-section {
    margin-bottom: 0.55rem;
}
.ledger-hover-section:last-child {
    margin-bottom: 0;
}
.ledger-hover-section b {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ledger-hover-section span,
.ledger-signature-text {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.ledger-signature-image {
    width: 100%;
    max-height: 72px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--bg-card, #fff);
    padding: 0.35rem;
}

/* WORM ledger horizontal/vertical scrolling */
#ledger-audit-view .ledger-scroll-wrap {
    max-height: calc(100vh - 260px);
    min-height: 340px;
    overflow: auto;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
}
#ledger-audit-view .ledger-scroll-wrap table {
    min-width: 1180px;
    width: max-content;
}
#ledger-audit-view .ledger-scroll-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bg-sunken);
}
#ledger-audit-view .ledger-scan-hover {
    display: none !important;
}
.ledger-floating-hover {
    position: absolute;
    z-index: 20000;
    width: 320px;
    max-height: min(520px, calc(100vh - 24px));
    overflow: auto;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}
.ledger-floating-hover img {
    width: 100%;
    max-height: 230px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}
.ledger-floating-hover .ledger-signature-image {
    background: var(--bg-card, #fff);
    max-height: 95px;
}

#ledger-audit-view .ledger-other-party {
    cursor: pointer;
}
#ledger-audit-view .ledger-other-party:hover .ledger-scan-hover {
    display: none !important;
}

.ledger-scan-gallery {
    display: grid;
    gap: 0.5rem;
}
.ledger-floating-hover .ledger-scan-gallery img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    border: 2px solid var(--border);
}

.ledger-barcode-scan-list {
    display: grid;
    gap: 0.65rem;
}
.ledger-barcode-scan-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    padding: 0.45rem;
}
.ledger-floating-hover .ledger-barcode-scan-card img {
    width: 100%;
    max-height: 210px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: #e5e7eb;
    margin-bottom: 0.45rem;
}
.ledger-barcode-scan-card code {
    display: block;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 900;
    word-break: break-all;
}
.ledger-barcode-scan-card span,
.ledger-barcode-scan-card small {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.ledger-missing-courier {
    cursor: default !important;
    opacity: 0.85;
}
.ledger-missing-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-sunken);
    color: var(--text-muted);
    font-weight: 900;
    font-size: 0.75rem;
}

/* Multi-bag ID display */
.multi-bag-id-list {
    display: grid;
    gap: 0.12rem;
    line-height: 1.1;
}
.multi-bag-id-list span {
    display: inline-block;
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--text-primary);
    white-space: nowrap;
}
.gantt-trip-block .multi-bag-id-list,
.timeline-event-inline .multi-bag-id-list {
    gap: 0;
}
.gantt-trip-block .multi-bag-id-list span,
.timeline-event-inline .multi-bag-id-list span {
    color: #fff;
    font-size: 0.72rem;
}

/* WORM route trace evidence */
.worm-route-trace-btn {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    color: var(--text-primary);
    padding: 0.45rem 0.55rem;
    cursor: pointer;
}
.worm-route-trace-btn strong {
    font-size: 0.76rem;
    color: var(--text-primary);
}
.worm-route-trace-btn small {
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.25;
}

/* WORM ledger list ? evidence icons (bag / signature / form / breadcrumbs) */
/* Immutable Ledger ? collapsible trip groups */
#ledger-audit-view .ledger-trip-id-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}
#ledger-audit-view .ledger-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-sunken);
    color: var(--text-primary);
    font-size: 0.55rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
#ledger-audit-view .ledger-expand-btn:hover {
    background: var(--bg-card);
    border-color: var(--nscc-line, #000);
}
#ledger-audit-view .ledger-expand-spacer {
    display: inline-block;
    width: 1.1rem;
    flex-shrink: 0;
}
#ledger-audit-view .ledger-ev-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.22rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--text-muted);
    background: var(--bg-sunken);
}
#ledger-audit-view tr.ledger-event-child td:first-child .ledger-trip-id-link {
    opacity: 0.85;
}
#ledger-audit-view tr.ledger-event-child {
    background: color-mix(in srgb, var(--bg-sunken) 55%, transparent);
}
#ledger-audit-view tr.ledger-trip-head.is-expanded {
    border-bottom-color: transparent;
}
#ledger-audit-view tr.ledger-trip-head[data-expanded="true"] {
    box-shadow: inset 3px 0 0 var(--brand-light);
}

.ledger-evidence-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.ledger-evidence-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-sunken);
    font-size: 0.72rem;
    line-height: 1;
    color: var(--text-primary);
}
button.ledger-evidence-icon.is-active {
    cursor: pointer;
    opacity: 1;
    border-color: var(--border);
    background: var(--bg-raised);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
button.ledger-evidence-icon.is-active:hover {
    border-color: var(--nscc-line, #000000);
    color: var(--text-primary);
}
.ledger-evidence-icon.is-empty {
    opacity: 0.28;
    cursor: default;
    filter: grayscale(0.4);
}

.route-trace-floating-popup {
    width: min(520px, calc(100vw - 24px));
}
.route-trace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.route-trace-header button {
    border: 2px solid var(--border);
    background: var(--bg-raised);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.route-trace-list {
    display: grid;
    gap: 0.35rem;
    max-height: 280px;
    overflow: auto;
}
.route-trace-point {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.15rem 0.5rem;
    padding: 0.45rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.route-trace-point.active {
    background: transparent;
    border: 4px solid #007AFF;
    color: var(--text-primary);
    transform: translateX(2px);
    box-shadow: none;
}
.route-trace-point code {
    grid-row: span 3;
    color: var(--text-primary);
    font-weight: 900;
}
.route-trace-point.active code,
.route-trace-point.active span,
.route-trace-point.active strong,
.route-trace-point.active small {
    color: var(--text-primary);
}
.route-trace-point span,
.route-trace-point small {
    color: var(--text-muted);
    font-size: 0.68rem;
}
.route-trace-point strong {
    color: var(--text-primary);
    font-size: 0.74rem;
}

/* Route trace mini map animation */
.route-trace-map-wrap {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: var(--bg-sunken);
}
#route-trace-mini-map {
    height: 240px;
    width: 100%;
}
#route-trace-map-status {
    padding: 0.4rem 0.55rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    border-top: 2px solid var(--border);
}
.route-trace-courier-marker {
    background: transparent !important;
    border: 0 !important;
}
.route-trace-courier-dot {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #34C759;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    font-size: 0.9rem;
}

.route-trace-courier-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #34C759;
    background: var(--bg-card, #fff);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.route-trace-courier-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worm-breadcrumb-summary {
    padding: 0.6rem 0.75rem;
    background: var(--bg-sunken);
    border-radius: 6px;
    border: 2px solid var(--border);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.worm-breadcrumb-summary:hover,
.worm-breadcrumb-summary:focus-visible {
    border-color: #007AFF;
    background: rgba(0, 122, 255, 0.1);
    transform: translateY(-1px);
    outline: none;
}

.modal-title-compact,
.modal-title-strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    text-transform: none;
    margin: 0;
}
.modal-content-sm { max-width: 400px; }
.modal-content-md { max-width: 440px; }
.modal-content-lg { max-width: 500px; }
.modal-content-scroll { max-height: 85vh; overflow-y: auto; }
/* No global "viewport ceiling" rule here on purpose. One was added and
   reverted the same day: `html body .modal-content { max-height: 92vh
   !important }` out-specifies every per-modal cap (.modal-content-scroll
   85vh, .trip-modal-content 60vh) and so RAISED them all to 92vh. Base
   .modal-content already caps at 90vh; the true safety net for oversized
   modals is the conditional clamp in nsccOpenModal (nscc-perf.js). */
/* System Configuration and the Admin Console are SCREENS (2026-09-27), not
   full-viewport modals: sections in #live-ops-container whose top-level tabs
   park in the chrome folder-tab strip, like Accounting. Until then this block
   made #system-settings-modal a full-viewport overlay with its own brand strip
   (Matt 2026-09-13). */
#system-config-view .nscc-syscfg-screen__content {
    padding: 0.75rem 1rem 1.5rem;
    box-sizing: border-box;
    max-width: 100%;
}
.identity-summary { text-align: center; margin-bottom: 2rem; }
.identity-avatar { width: 80px; height: 80px; background: var(--brand-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto 1rem; border: 4px solid var(--bg-sunken); box-shadow: var(--shadow-sm); }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.identity-name { font-size: 1.5rem; margin-bottom: 0.25rem; color: var(--text-primary); }
.identity-role { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; }
.info-strip { background: var(--bg-sunken); padding: 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.info-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }
.info-value { font-weight: 700; color: var(--text-primary); }
.modal-section-hidden { margin-bottom: 1.5rem; display: none; }
.modal-section-heading { font-size: 0.75rem; margin-bottom: 1rem; color: var(--text-muted); text-transform: uppercase; border-bottom: 2px solid var(--border); padding-bottom: 0.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.modal-section-heading-between { justify-content: space-between; margin-bottom: 0.75rem; }
.icon-xs { width: 16px; height: 16px; }
.persona-options { display: flex; flex-direction: column; gap: 0.5rem; max-height: 200px; overflow-y: auto; padding-right: 4px; }
.persona-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: var(--bg-raised); border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; }
.persona-item:hover { background: var(--bg-sunken); border-color: var(--nscc-line, #000000); }
.persona-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-light); }
.flex-grow { flex-grow: 1; }
.persona-name { font-weight: 800; font-size: 0.875rem; color: var(--text-primary); }
.persona-role { font-size: 0.65rem; color: var(--text-muted); font-weight: 600; }
.audit-trail-range { font-size: 0.6rem; font-weight: 600; opacity: 0.7; }
.audit-list { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.75rem; }
.settings-panel { display: flex; flex-direction: column; gap: 1.25rem; background: var(--bg-sunken); padding: 1.5rem; border-radius: var(--radius-md); border: 2px solid var(--border); }
.settings-row { display: flex; align-items: center; justify-content: space-between; }
.settings-row-bordered { border-top: 2px solid var(--border); padding-top: 1.25rem; }
.settings-row-disabled { opacity: 0.45; pointer-events: none; filter: grayscale(0.4); }
.settings-row-disabled input { cursor: not-allowed; }
.settings-title { display: block; font-size: 0.875rem; color: var(--text-primary); }
.settings-description { font-size: 0.7rem; color: var(--text-muted); }
.seed-progress { margin-top: 0.75rem; width: 220px; }
.seed-progress-track { height: 8px; background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-full); overflow: hidden; }
.seed-progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--brand-light), var(--status-secure)); border-radius: var(--radius-full); transition: width var(--dur-base) var(--ease-out); }
.seed-progress-label { margin-top: 0.35rem; font-size: 0.65rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.config-section { margin-top: 1.5rem; background: var(--bg-sunken); padding: 1.5rem; border-radius: var(--radius-lg); border: 2px solid var(--border); }
/* System Preferences / Admin Console / Support screens: inner boxes match NSCC cards.
   Folder tabs and the ticker stay square. */
#system-settings-modal .nscc-sys-panel,
#admin-settings-modal .nscc-sys-panel {
    border-radius: var(--radius-md);
}
#system-settings-modal .nscc-sys-panel textarea,
#admin-settings-modal .nscc-sys-panel textarea,
#system-settings-modal .select-control,
#admin-settings-modal .select-control,
#system-settings-modal .form-control-full,
#admin-settings-modal .form-control-full {
    border-radius: var(--radius-md);
}
.view-section.support-view .form-control-panel {
    border-radius: var(--radius-md);
}
.view-section.support-view .card,
.view-section.support-view .support-faq-item,
.view-section.support-view .support-faq-empty {
    border-radius: var(--radius-lg);
}
.config-section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--border); padding-bottom: 0.75rem; }
.config-section-icon { font-size: 1.25rem; }
.config-section-title { display: block; font-size: 0.875rem; color: var(--text-primary); }
.config-section-subtitle { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
/* System Configuration → Security & controls → Inactivity sign-out */
.syscfg-idle-label { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 0.65rem; }
.syscfg-idle-input { display: block; max-width: 8rem; margin-top: 0.25rem; font-weight: 600; min-height: 2rem; }
/* Inactivity warning's "Stay signed in" button (assets/nscc-session-timeout.js). A class,
   not an inline style: the global status-chip rule matches inline background colours. */
#nscc-timeout-overlay .nscc-timeout-stay { background: #2563eb; color: #fff; -webkit-text-fill-color: #fff; border: none; border-radius: 8px; padding: 0.75rem 2rem; font-size: 1rem; font-weight: 600; cursor: pointer; }
#nscc-timeout-overlay .nscc-timeout-stay:hover { background: #1d4ed8; }
.syscfg-idle-hint { font-size: 0.6rem; color: var(--text-muted); margin: 0.25rem 0 0; }
.admin-warning { display: none; background: rgba(239, 68, 68, 0.1); color: #ef4444; padding: 0.75rem; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 700; margin-bottom: 1rem; border: 2px solid rgba(239, 68, 68, 0.2); }
.form-field { margin-bottom: 1rem; }
.form-field-lg { margin-bottom: 1.25rem; }
.form-label-compact { display: block; font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.35rem; }
.form-control-full { width: 100%; font-size: 0.8125rem; }
.select-control { width: 100%; }
.form-control-panel { width: 100%; border-radius: var(--radius-sm); }
/* Report option that takes several values (e.g. Lines of work): one checkbox per value. */
.report-param-multi { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; }
.report-param-multi__opt { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer; }
input.form-control-panel,
textarea.form-control-panel {
    padding: 0.75rem;
}
/* Panel selects: shared-tokens .nscc-form-select rules; avoid stacking input padding */
select.form-control-panel,
select.nscc-form-select {
    height: auto;
    min-height: var(--nscc-select-height);
    line-height: 1.4;
    color: var(--text-primary);
    box-sizing: border-box;
}
select.form-control-panel--inline {
    padding: 0.35rem calc(0.5rem + 1.1rem) 0.35rem 0.5rem;
    font-size: 0.8rem;
    min-height: 36px;
    height: auto;
}
select.form-control-panel--filter {
    padding: 0.45rem calc(0.5rem + 1.1rem) 0.45rem 0.5rem;
    font-size: 0.8rem;
    flex: 1;
    height: auto;
    min-height: var(--nscc-select-height);
}
/* Edit/New Shift Assignment modal: sunken inputs; selects use global nscc-form-select */
#shift-assignment-modal .modal-content { box-sizing: border-box; max-height: 90vh; overflow-y: auto; }
#shift-assignment-modal input[type="date"] {
    height: auto;
    min-height: var(--nscc-select-height);
    padding: 0.5rem 0.6rem;
    color: var(--text-primary);
    background-color: var(--bg-sunken);
    box-sizing: border-box;
}
.hh2-status-msg { margin-top: 0.75rem; font-size: 0.7rem; font-weight: 700; text-align: center; display: none; }
.btn-strong { font-weight: 800; }
.settings-footer { margin-top: 1.5rem; border-top: 2px solid var(--border); padding-top: 1.5rem; }
.settings-version { margin-top: 1.5rem; font-size: 0.65rem; color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }
.message-history { height: 180px; overflow-y: auto; background: var(--bg-sunken); border-radius: var(--radius-md); padding: 0.75rem; margin-bottom: 1rem; border: 2px solid var(--border); font-size: 0.8125rem; display: flex; flex-direction: column; gap: 0.5rem; }
.message-compose { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

/* Direct message ? stack above trip modal + compact trip-context popover */
#direct-message-modal.modal--stack-top {
    z-index: 100001 !important;
}

#direct-message-modal.modal--compact-dm .modal-content {
    max-width: 340px;
    width: min(340px, 92vw);
    padding: 0.65rem 0.75rem;
}

#direct-message-modal.modal--compact-dm .modal-header {
    margin-bottom: 0.45rem;
    padding-bottom: 0.35rem;
}

#direct-message-modal.modal--compact-dm .modal-header h2 {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.03em;
}

#direct-message-modal.modal--compact-dm .message-history {
    height: 108px;
    padding: 0.45rem;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
}

#direct-message-modal.modal--compact-dm .message-compose {
    margin-bottom: 0.35rem;
    gap: 0.35rem;
}

#direct-message-modal.modal--compact-dm .message-compose .btn-primary {
    padding: 0.35rem 0.65rem;
    font-size: 0.72rem;
}

#direct-message-modal.modal--compact-dm .message-compose input {
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
}

#direct-message-modal.modal--compact-dm .dm-mic-btn {
    display: none;
}

#direct-message-modal.modal--compact-dm .dm-canned-label {
    display: none;
}

#direct-message-modal.modal--compact-dm .nscc-comms-quick-send {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
}
.input-grow { flex-grow: 1; }
.icon-button-compact { padding: 0 0.5rem; font-size: 1.2rem; }
.section-label-compact { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; }
.quick-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* ?? Comms quick responses (manageable) ?? */
.nscc-comms-quick-mount { width: 100%; }
.nscc-comms-quick-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.nscc-comms-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}
.nscc-comms-quick-send {
    border: 2px solid var(--border) !important;
    font-weight: 700;
    white-space: nowrap;
}
.nscc-comms-quick-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    flex-shrink: 0;
}
.nscc-comms-quick-manage {
    font-weight: 800;
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary) !important;
}
.nscc-comms-quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0.35rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}
.nscc-comms-quick-chip-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nscc-comms-quick-icon {
    padding: 0 0.25rem !important;
    min-width: 1.4rem;
    line-height: 1;
}
.nscc-comms-quick-icon--danger { color: #FF3B30 !important; }
.nscc-comms-quick-add { font-weight: 800; border-style: dashed !important; }
.nscc-comms-quick-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    width: 100%;
    padding: 0.35rem;
    border: 2px solid var(--brand-light);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    box-sizing: border-box;
}
.nscc-comms-quick-input {
    flex: 1 1 120px;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.75rem;
    box-sizing: border-box;
}
.nscc-comms-quick-form-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.quick-actions-grid.nscc-comms-quick-mount .nscc-comms-quick-bar { display: block; }
.quick-actions-grid.nscc-comms-quick-mount .nscc-comms-quick-buttons { margin-bottom: 0.35rem; }

/* Comms Hub ??? modern instant messaging layout */
#communication-container.view-section.active {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    margin: 0;
    width: 100%;
    max-width: none;
    overflow: hidden;
    box-sizing: border-box;
}

.comms-hub {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.comms-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-sunken);
}

.comms-sidebar__header {
    padding: 1rem 1rem 0.65rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.comms-sidebar__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.comms-sidebar__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.comms-thread-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.35rem;
}

.comms-thread-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.15rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.comms-thread-item:hover {
    background: var(--bg-raised);
}

.comms-thread-item.active,
.comms-thread-item.is-active {
    background: var(--bg-card);
    box-shadow: inset 3px 0 0 var(--brand-light);
}

.comms-thread-item__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-raised);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.comms-thread-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comms-thread-item__avatar--group {
    background: color-mix(in srgb, var(--comms-group-color, #5856D6) 18%, transparent);
    border-color: var(--comms-group-color, #5856D6);
    font-size: 1.1rem;
}

.comms-thread-item__body {
    min-width: 0;
    flex: 1 1 auto;
}

.comms-thread-item__name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comms-thread-item__subtitle {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.comms-thread-item__pending {
    display: inline-block;
    font-size: 0.62rem;
    background: transparent;
    color: #000000;
    -webkit-text-fill-color: #000000;
    padding: 1px 6px;
    border-radius: 8px;
    border: 4px solid #FF9500;
    font-weight: 800;
    vertical-align: middle;
}

.comms-chat-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-card);
}

.comms-empty-state {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.comms-empty-state[hidden],
.comms-chat-thread[hidden] {
    display: none !important;
}

.comms-empty-state__icon {
    font-size: 3.5rem;
    opacity: 0.25;
    margin-bottom: 0.75rem;
}

.comms-empty-state__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.comms-empty-state__text {
    margin: 0;
    font-size: 0.85rem;
    max-width: 22rem;
}

.comms-chat-thread {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.comms-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-raised);
    flex-shrink: 0;
}

.comms-chat-header__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.comms-chat-header__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--brand-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
}

.comms-chat-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comms-chat-header__avatar-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.comms-chat-header__name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comms-chat-header__status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.comms-chat-header__role {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.comms-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background:
        radial-gradient(circle at 20% 10%, rgba(0, 122, 255, 0.04), transparent 45%),
        var(--bg-sunken);
}

.comms-chat-empty {
    align-self: center;
    margin-top: 2.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 18rem;
}

.comms-msg-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 78%;
}

.comms-msg-row--out {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.comms-msg-row--in {
    align-self: flex-start;
}

.comms-msg-row__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    opacity: 0.85;
}

.comms-msg-row__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comms-msg-stack {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.comms-msg-row--out .comms-msg-stack {
    align-items: flex-end;
}

.comms-msg-meta {
    font-size: 0.62rem;
    color: var(--text-muted);
    padding: 0 0.35rem;
}

.comms-msg-bubble {
    padding: 0.55rem 0.85rem;
    border-radius: 18px;
    font-size: 0.875rem;
    line-height: 1.45;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.comms-msg-row--in .comms-msg-bubble {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-bottom-left-radius: 6px;
}

.comms-msg-row--out .comms-msg-bubble {
    background: var(--brand-light);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.comms-msg-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: transparent;
    color: var(--text-primary);
    border: 4px solid #64748b;
}

.comms-msg-badge--pending { background: transparent; color: var(--text-primary); border-color: #FF9500; }
.comms-msg-badge--approved { background: transparent; color: var(--text-primary); border-color: #34C759; }
.comms-msg-badge--rejected { background: transparent; color: var(--text-primary); border-color: #FF3B30; }

.comms-compose {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

.comms-compose__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comms-compose__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.comms-compose__input:focus {
    outline: none;
    border-color: var(--nscc-line, #000000);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.comms-compose__mic {
    border: none;
    background: transparent;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.35rem;
    line-height: 1;
    border-radius: 50%;
}

.comms-compose__mic:hover {
    background: var(--bg-sunken);
}

.comms-compose__send {
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.comms-quick-mount {
    margin-bottom: 0.65rem;
}

.comms-group-notice {
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.78rem;
    line-height: 1.45;
}

.comms-group-notice__muted { color: var(--text-muted); }
.comms-group-notice__members { font-size: 0.72rem; }

.comms-review-queue {
    border: 1px solid #FF9500;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bg-card, #ffffff);
}

.comms-review-queue__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    color: #FF9500;
}

.comms-review-queue__count {
    background: transparent;
    color: #000000;
    -webkit-text-fill-color: #000000;
    font-weight: 800;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 8px;
    border: 4px solid #FF9500;
}

.comms-review-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-sunken);
}

.comms-review-item__badge {
    display: inline-block;
    font-size: 0.62rem;
    background: #FF950022;
    color: #FF9500;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 0.35rem;
}

.comms-review-item__from {
    color: var(--text-muted);
    margin-top: 0.2rem;
    font-size: 0.72rem;
}

.comms-review-item__text {
    margin: 0.45rem 0;
    font-size: 0.84rem;
}

.comms-review-item__actions,
.comms-review-item__wait {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-muted);
}

#communication-container .comms-contact-group {
    margin-bottom: 0.35rem;
}
#communication-container .comms-contact-group-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.35rem 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.35rem;
}
#communication-container .comms-contact-group-label--section {
    font-size: 0.68rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-bottom: none;
    color: var(--text-secondary);
}
#communication-container .comms-contact-group .unit-id-card:last-child {
    margin-bottom: 0;
}
#communication-container .comms-contact-search-wrap {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
#communication-container .comms-contact-search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.85rem;
    font-size: 0.8125rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
}
#communication-container .comms-contact-search:focus {
    outline: none;
    border-color: var(--nscc-line, #000000);
}
#communication-container .comms-contact-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1.25rem 0.5rem;
    font-style: italic;
}
.btn-bordered { border: 2px solid var(--border); }
.modal-title-strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    text-transform: none;
    margin: 0;
}
.patrol-stops-list { display: grid; gap: 1rem; max-height: 400px; overflow-y: auto; padding: 0.5rem; }
.modal-note-footer { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--border); }
.muted-italic-note { font-size: 0.7rem; color: var(--text-muted); font-style: italic; }
.form-grid { display: grid; gap: 1.25rem; }
.form-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-label { display: block; font-size: 0.7rem; font-weight: 800; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; }
.form-control-panel { width: 100%; }
.textarea-compact { min-height: 60px; font-size: 0.8125rem; resize: vertical; }
.form-group-lg { margin-bottom: 1.25rem; }
.dashed-info-box { background: var(--bg-sunken); padding: 1rem; border-radius: var(--radius-md); border: 1px dashed var(--border); }
.info-copy { font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); margin: 0; }
.trip-modal-content { width: 95vw; max-width: 960px; box-sizing: border-box; max-height: 60vh; overflow-y: auto; padding: 0.1rem 0.85rem; margin: 0; border: 4px solid var(--nscc-line, #000000); box-shadow: var(--shadow-lg); }
.trip-modal-top-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0.8rem; margin-bottom: 0.6rem; }
.trip-modal-flex-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }
@media (max-width: 767px) {
    .trip-modal-top-grid { grid-template-columns: 1fr; gap: 1rem; }
}
.trip-modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.trip-title { margin: 0; font-size: 1.25rem; }
.close-btn-xs { width: 24px; height: 24px; font-size: 0.8rem; }
.badge-row { margin-bottom: 1rem; }
.trip-locations { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.location-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.location-name { font-weight: 600; font-size: 0.875rem; }
.trip-meta-box { background: var(--bg-raised); padding: 0.45rem; border-radius: var(--radius-sm); margin-bottom: 0.75rem; border: 2px solid var(--border); }
.trip-meta-primary { margin-bottom: 0.25rem; }
.trip-meta-muted { font-size: 0.7rem; color: var(--text-muted); }
.modal-log-section { border-top: 2px solid var(--border); padding-top: 0.6rem; }
.modal-note-history { max-height: 120px; overflow-y: auto; background: var(--bg-sunken); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem; margin-bottom: 0.6rem; }
.modal-note-input { width: 100%; min-height: 60px; padding: 0.45rem; background: var(--bg-sunken); border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--text-primary); resize: vertical; margin-bottom: 0.5rem; }
.button-row-compact { display: flex; gap: 0.5rem; }
.flex-2 { flex: 2; }
.flex-1 { flex: 1; }

/* ?? Sidebar Relocation Styles ?? */
.sidebar {
    display: none !important;
}

/* ?? Premium Top Nav Dropdown ?? */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    z-index: 1000;
    padding: 0.5rem;
    animation: dropdownFadeIn var(--dur-fast) var(--ease-out);
}

        /* nav-dropdown-content styling from shared-tokens.css */

@keyframes dropdownFadeIn {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown-content.show {
    display: block;
    border: 1px solid var(--nscc-line, #000);
}

/* Nav dropdown buttons */
.nav-dropdown-content .nav-btn {
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.85rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: none !important; /* Reset nav shadow in dropdown */
}

.nav-dropdown-content .nav-btn:hover {
    padding-left: 1.1rem !important;
}

.nav-dropdown-content .nav-btn.active {
    font-weight: 600;
    padding-left: 0.85rem !important;
}

.nav-dropdown-content .nav-btn[data-view="patrol-view"].active,
.nav-dropdown-content .nav-btn.patrol-active {
    background: linear-gradient(135deg, #34C759 0%, #248a3d 100%) !important;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.35) !important;
}

/* ?? Premium Horizontal Sub-navigation Pill Tabs ?? */
.sub-nav-btn {
    width: auto !important;
    text-align: center !important;
    padding: 0.28rem 0.5rem !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    background: none !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) !important;
    white-space: nowrap !important;
}
/* Opt-in only (added by assets/nscc-folder-tab-2line.js to buttons whose
   visible label is 2+ words) — .sub-nav-btn itself is untouched, so every
   other use of that class (filter pills, single-word tabs, etc.) is
   unaffected. */
.sub-nav-btn.nscc-folder-tab-2line {
    white-space: normal !important;
    max-width: 5.5rem !important;
}

.sub-nav-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
    padding-left: 0.5rem !important; /* Block sidebar padding shift */
    transform: translateY(-0.5px);
}

.sub-nav-btn.active {
    background: var(--chrome-folder-active) !important;
    color: var(--text-inverse) !important;
    font-weight: 800 !important;
    border: 2px solid var(--border) !important;
    box-shadow: 2px 2px 0px var(--border) !important;
    padding-left: 0.5rem !important; /* Block sidebar padding shift */
}

/* Custom indicator color if Patrol Ops is active */
.sub-nav-btn[data-view="patrol-view"].active {
    color: #34C759 !important;
}


/* SOLID STATUS OVERRIDES ? removed. Status chips use outline style
   (clear fill / black text / colored border) near end of this file.
   Wildcards like [class*="delivered"] painted kanban columns ? do not restore. */

/* Action buttons ? outline status style (clear fill / black ink / bright border) */
.btn-checkin,
.sim-btn.active {
    background: transparent !important;
    background-color: transparent !important;
    /* Transparent fill: ink must track the theme so it stays legible on
       dark-family card surfaces (was a hard #000, invisible in dark). */
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border: 4px solid #34C759 !important;
    box-shadow: none !important;
}
.btn-checkin:hover,
.sim-btn.active:hover {
    background: transparent !important;
    background-color: transparent !important;
}
.btn-warning:hover,
.btn-checkout:hover {
    background: transparent !important;
    background-color: transparent !important;
}
.btn-danger {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 4px solid #FF3B30 !important;
    box-shadow: none !important;
}
.btn-danger:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dispatch map filter bar */
#map-view .filter-select--compact { flex-shrink: 0; }

/* ?? Comms Hub Header Avatar Interaction Styles ?? */
#detail-unit-avatar {
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
    box-shadow: 0 0 0 transparent;
    border: 2px solid transparent;
}
#detail-unit-avatar[style*="cursor: pointer"]:hover,
#detail-unit-avatar[style*="cursor:pointer"]:hover {
    transform: scale(1.08);
    box-shadow: 0 0 12px var(--brand-glow, rgba(24, 24, 27, 0.35));
    border-color: var(--brand-light, #52525b);
}
#detail-unit-avatar[style*="cursor: pointer"]:active,
#detail-unit-avatar[style*="cursor:pointer"]:active {
    transform: scale(0.94);
}

/* Live Dispatch Ticker Highlight Animation */
.job-card.highlight-glow,
.patrol-shift-block.highlight-glow,
.guard-shift-block.highlight-glow,
.gantt-trip-block.highlight-glow {
    border-color: #34C759 !important;
    box-shadow: 0 0 20px rgba(52, 199, 89, 0.6) !important;
    animation: pulseGlow 1.5s infinite alternate;
    transition: opacity var(--dur-fast), box-shadow var(--dur-fast);
    z-index: 5;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px rgba(52, 199, 89, 0.4);
        border-color: #34C759;
    }
    100% {
        box-shadow: 0 0 25px rgba(52, 199, 89, 0.9);
        border-color: #248a3d;
    }
}

/* Condensed Date Selector ? uses shared nscc-date-nav compact sizing */
.condensed-date-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: transparent;
    padding: 0;
    border: none;
    font-size: 0.7rem;
    height: 1.5rem;
    box-sizing: border-box;
}
.condensed-date-selector input[type="date"] {
    background: transparent;
    border: none;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-primary, #f8fafc);
    cursor: pointer;
    outline: none;
    font-family: inherit;
    padding: 0;
    margin: 0;
    height: 100%;
}
.condensed-date-selector button {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--border, #334155);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #f8fafc);
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 800;
    outline: none;
    box-shadow: 2px 2px 0 var(--border);
}
.condensed-date-selector button:hover {
    background: var(--bg-sunken);
}
.condensed-date-selector .today-date-btn {
    width: auto;
    min-width: 0;
    font-size: 0.6rem;
    border-radius: 3px;
    padding: 0 0.45rem;
    margin-left: 0;
}
.condensed-date-selector .today-date-btn:hover {
    background: var(--bg-sunken);
}

/* ?? Custom Report Builder & Writer Styles ?? */
.reports-split-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    /* Fill the view section (which itself fills .views-container) so the
       sidebar and generator body get a bounded height and their internal
       overflow-y: auto can actually scroll. Using height: 100% instead of
       calc(100vh - 120px) — the old heuristic underestimated the app chrome
       once left-nav mode landed, which left the sidebar taller than the
       visible area and forced .views-container to scroll the whole reports
       view instead of just the template list. min-height: 0 keeps the grid
       children shrinkable so the list scrolls internally. */
    height: 100%;
    min-height: 0;
}

/* ── Direction A gallery — feature-flagged full-width tile view ──
   Hidden by default. When #reports-view carries .reports-view--gallery
   (set by assets/nscc-reports-gallery.js on load), the classic 280px
   sidebar folds away and the gallery becomes the top of the view; the
   right-hand generator pane stays visible below the gallery so
   selecting a tile still lands on the same params + Generate flow.
*/
.reports-gallery-panel { display: none; }
.reports-overview-widgets { display: none; }
#reports-view.reports-view--gallery .reports-gallery-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0 1rem 0;
}
#reports-view.reports-view--gallery .reports-overview-widgets {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* The widget grids own their own gap between children — the space
       BETWEEN the KPI grid and the chart grid comes from this parent gap. */
    padding: 0 0 0.6rem 0;
}
#reports-view.reports-view--gallery .reports-split-container {
    grid-template-columns: 1fr;
    height: auto;
}
#reports-view.reports-view--gallery .report-templates-sidebar { display: none; }
#reports-view.reports-view--gallery .report-generator-body { min-height: 0; }

/* ── Reports view folder tabs (Overview / Templates / Scheduled / Thresholds) ──
   The shell mirrors #form-management-view / .nscc-forms-shell so the two
   screens navigate the same way. Panels use the same [hidden] + .active
   pattern as .nscc-erp-tab-panel — inactive panels are simply hidden by
   the HTML attribute; the active panel picks up the nscc-erp-tab-panel
   padding from styles.css:9818. */
#reports-view .nscc-reports-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100%;
}
#reports-view .nscc-reports-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
/* Overview widgets: the base rule at :5598 sets .reports-overview-widgets to
   display:none so nothing leaks into the classic gallery layout. Inside the
   Overview tab, always render as a flex column regardless of gallery mode. */
#reports-view [data-reports-panel="overview"] .reports-overview-widgets {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 0 0.6rem 0;
}
#reports-view [data-reports-panel="overview"] .reports-overview-widgets:empty {
    display: none;
}
/* Scheduled / Thresholds tab hosts: room for the Master Data renderers'
   .master-data-shell shells they inject. Keep the tab panel itself scrollable
   so long lists don't push the tab strip off-screen. */
#reports-view .reports-tab-host {
    width: 100%;
    min-height: 0;
    overflow: auto;
}

/* Forms overview widgets — same shape as .reports-overview-widgets. Lives
   inside the Forms "Overview" tab panel; the tab-panel .hidden attribute
   handles show/hide across tabs, and the widget module clears the host to
   empty when the whole Forms view is inactive so nothing bleeds into other
   screens. */
.forms-overview-widgets {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.25rem 0 0.5rem 0;
}
.forms-overview-widgets:empty {
    display: none;
}

.reports-gallery-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.reports-gallery-header__title {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-right: 0.35rem;
}
.reports-gallery-search {
    flex: 1 1 260px;
    min-width: 220px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000);
    color: var(--text-muted);
}
.reports-gallery-search__input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: var(--text-primary);
    padding: 0.15rem 0;
}
.reports-gallery-search__input::placeholder { color: var(--text-muted); }
.reports-gallery-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.reports-gallery-header__switch { margin-left: 0.35rem; }

.reports-gallery-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.reports-gallery-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: 'IBM Plex Sans', var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    line-height: 1;
}
.reports-gallery-chip:hover { background: var(--bg-raised); }
.reports-gallery-chip.is-active {
    background: var(--text-primary);
    color: var(--text-inverse);
}
.reports-gallery-chip__count {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 800;
    opacity: 0.85;
}

.reports-gallery-recents {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.reports-gallery-recents__label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.reports-gallery-recents__label::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
}
.reports-gallery-recents__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}
.reports-gallery-recent {
    text-align: left;
    padding: 0.55rem 0.75rem;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.reports-gallery-recent:hover { background: var(--bg-raised); }
.reports-gallery-recent__cat {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
}
.reports-gallery-recent__name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.reports-gallery-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.reports-gallery-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.reports-gallery-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.reports-gallery-section__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--text-primary);
}
.reports-gallery-section__icon { font-size: 1rem; }
.reports-gallery-section__count {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.reports-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.6rem;
}

.reports-gallery-tile {
    text-align: left;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000);
    display: flex;
    flex-direction: column;
    padding: 0;
    cursor: pointer;
    color: var(--text-primary);
    font: inherit;
    transition: transform var(--dur-fast, 70ms) var(--ease-out, ease), box-shadow var(--dur-fast, 70ms);
    overflow: hidden;
}
.reports-gallery-tile:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--nscc-hard-shadow, #000000); }
.reports-gallery-tile:active { transform: translateY(0); box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000); }
.reports-gallery-tile__preview {
    height: 68px;
    background: var(--bg-raised);
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
}
.reports-gallery-tile__body {
    padding: 0.6rem 0.75rem 0.7rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.reports-gallery-tile__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.reports-gallery-tile__cat {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.reports-gallery-tile__set,
.reports-gallery-tile__badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--border-strong);
    background: var(--bg-raised);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    margin-left: auto;
}
.reports-gallery-tile__badge--custom {
    background: var(--text-primary);
    color: var(--text-inverse);
    border-color: var(--nscc-line, #000000);
}
.reports-gallery-tile__name {
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
}
.reports-gallery-tile__desc {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-muted);
    /* Two-line clamp — old browsers ignore it and simply show the whole
       description; the tile height varies a little either way. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reports-gallery-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-raised);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
}
.reports-gallery-empty__clear {
    margin-left: 0.35rem;
    padding: 0.15rem 0.55rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.report-templates-sidebar__try-gallery {
    align-self: flex-start;
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.report-templates-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 2px solid var(--border);
    padding-right: 1.25rem;
    /* Grid children default to min-height:auto, which stops the inner list
       from ever hitting an overflow boundary; force a shrinkable box here. */
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.report-templates-sidebar__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.report-templates-sidebar__title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.report-templates-sidebar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.report-templates-sidebar__actions .btn {
    flex: 0 1 auto;
    white-space: nowrap;
}
.report-templates-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Defensive: `!important` so a parent utility class can't kill the
       scroll on this list. Matt 2026-09-12 D3: "Reports left menu … does
       not scroll." */
    overflow-y: auto !important;
    overflow-x: hidden;
    /* Give the scrollbar a little breathing room so it does not sit on the
       template cards' borders. */
    padding-right: 0.25rem;
}
/* Long report names have to wrap inside their template card. The strong
   sits in a flex row (justify-content: space-between) alongside the
   favorite button + badge; without min-width: 0 on the row's children a
   long name can push the card wider than the sidebar column, then get
   clipped instead of wrapping. Matt 2026-09-12 D3: "does not show me
   whole report name." */
.report-template-item > div:first-child {
    min-width: 0;
}
.report-template-item > div:first-child > strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Report template cards ? rectangular with rounded corners (not pill/oval buttons) */
.report-template-item {
    background: var(--bg-raised);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.report-template-item.active {
    background: var(--bg-sunken);
    border-color: var(--nscc-line, #000000);
}
.report-template-item:hover:not(.active) {
    border-color: var(--nscc-line, #000000);
}

/* Row-action strip — hidden until hover / focus / active, then revealed at
   the bottom of the row. Icons are unicode glyphs so print CSS doesn't
   need to know about them. Every action stops propagation itself and
   the strip's own click handler adds a second belt so a mis-clicked
   button never triggers the row's selectReportTemplate. */
.report-template-item__actions {
    display: flex; flex-wrap: wrap; gap: 0.15rem;
    margin-top: 0.4rem;
    opacity: 0; max-height: 0; overflow: hidden;
    transition: opacity 140ms ease, max-height 140ms ease;
}
.report-template-item:hover .report-template-item__actions,
.report-template-item:focus-within .report-template-item__actions,
.report-template-item.active .report-template-item__actions {
    opacity: 1; max-height: 3rem;
}
.report-template-item__action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem;
    border: 1px solid var(--border, #d4d4d8); border-radius: 4px;
    background: var(--bg-raised, #fff); color: var(--text-primary, #111827);
    font-size: 0.95rem; line-height: 1; cursor: pointer;
    padding: 0;
}
.report-template-item__action:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    border-color: var(--nscc-line, #000000);
}
.report-template-item__action--danger:hover {
    color: #b91c1c;
    border-color: #b91c1c;
}
:root.dark .report-template-item__action,
body.dark-theme .report-template-item__action {
    background: var(--bg-raised, #1a1a1a);
    border-color: rgba(148, 163, 184, 0.5);
}
@media print {
    .report-template-item__actions { display: none !important; }
}

.report-template-item strong {
    font-size: 0.85rem;
    color: var(--text-primary);
    word-break: break-word;
    flex: 1;
}
.report-template-item .report-template-topic {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
    font-family: monospace;
}

.report-category-accordion {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-raised);
}
.report-category-accordion.is-expanded {
    border-color: var(--nscc-line, #000000);
}
.report-category-accordion__toggle {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 0;
    background: var(--bg-raised);
    color: var(--text-primary);
    cursor: pointer;
    font-family: monospace;
    text-align: left;
}
.report-category-accordion__toggle:hover,
.report-category-accordion__toggle:focus-visible {
    background: var(--bg-sunken);
    outline: none;
}
.report-category-accordion.is-expanded .report-category-accordion__toggle {
    background: var(--bg-sunken);
    border-bottom: 2px solid var(--brand-light);
}
.report-category-accordion__name,
.report-category-accordion__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.report-category-accordion__name {
    min-width: 0;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.report-category-accordion__meta {
    flex-shrink: 0;
}
.report-category-accordion__count {
    min-width: 22px;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-weight: 800;
    text-align: center;
}
.report-category-accordion__chevron {
    width: 12px;
    color: var(--text-primary);
    font-size: 0.6rem;
    text-align: center;
}
.report-category-accordion__panel {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    background: var(--bg-main);
}
.report-category-accordion__panel[hidden] {
    display: none !important;
}

.report-templates-sidebar .btn,
#report-builder-modal .btn.btn-bordered,
#template-builder-modal .btn.btn-bordered {
    border-radius: var(--radius-md) !important;
}
.report-generator-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-right: 0.5rem;
}
.report-block-wrapper {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    background: var(--bg-main);
    position: relative;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}
.report-block-wrapper:hover {
    border-color: var(--nscc-line, #000000);
}
.report-block-wrapper .block-drag-handle {
    cursor: grab;
    user-select: none;
    color: var(--text-muted);
    font-weight: 800;
}
.report-canvas-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 4rem 2rem;
    font-family: monospace;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-sunken);
}
/* Report builder options that carry a hover tip (scripts/verify-toggle-hover.mjs): their
   inline styles moved here so the tip could go on the same element (no new inline styles). */
.rb-opt-1 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.report-badge-config.rb-opt-2 { margin-top: 0.4rem; font-size: 0.72rem; }
.report-badge-config.rb-opt-3 { margin-bottom: 0.3rem; }
.report-badge-config.rb-opt-4 { font-size: 0.7rem; padding: 0.2rem 0.4rem; }
.report-badge-config.rb-opt-5 { font-size: 0.72rem; }
.report-badge-config.rb-opt-6 { font-size: 0.7rem; padding: 0.2rem 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.rb-opt-7 { font-size: 0.68rem; padding: 0 0.15rem; }
/* The findings age filter row; Report explorer's "linked" tag. */
.wt-filter-row { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; }
.nscc-explore-linked { color: var(--text-muted); font-size: 0.62rem; }
.report-badge-config {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-primary);
}
/* Report Builder Data Grid: "Join another source" (assets/nscc-report-query.js) */
.report-table-join-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    align-items: end;
}
.report-table-join-row[hidden] {
    display: none;
}
@media (max-width: 640px) {
    .report-table-join-row {
        grid-template-columns: 1fr;
    }
}
.report-joined-divider {
    flex-basis: 100%;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-top: 0.35rem;
}
.report-dryrun-join-note {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

/* Master Data ??? one vertical scroll for the whole screen (views-container) */
#master-fleet-view.view-section.active {
    height: auto;
    min-height: 100%;
    overflow: visible;
}
.md-fleet-pictures-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 4.5rem;
}
.md-fleet-pic-mini-thumb {
    width: 36px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.md-fleet-pic-count {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--text-muted);
}
.md-fleet-pic-none {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.md-fleet-picture-actions {
    display: flex;
    gap: 0.2rem;
    justify-content: center;
}
.md-fleet-pic-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.md-fleet-pic-btn:hover:not(:disabled) {
    border-color: var(--nscc-line, #000000);
    color: var(--text-primary);
}
.md-fleet-pic-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.md-fleet-assigned-select {
    max-width: 14rem;
}
.md-fleet-pictures-modal-content {
    max-width: 520px;
}
.md-fleet-pic-modal-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.md-fleet-pic-preview {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.md-fleet-pic-preview img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
}
.md-fleet-pic-preview-empty,
.md-fleet-pic-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 1rem;
    text-align: center;
}
.md-fleet-pic-thumb-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.md-fleet-pic-thumb {
    width: 56px;
    height: 42px;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card);
}
.md-fleet-pic-thumb.is-selected {
    border-color: var(--nscc-line, #000000);
}
.md-fleet-pic-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.md-fleet-pic-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}
.md-fleet-pic-upload-label {
    cursor: pointer;
    margin: 0;
}
.master-data-table--fleet th.md-fleet-pictures-col {
    text-align: center;
}
.master-data-table--fleet-accordion {
    table-layout: fixed;
    width: 100%;
}
.master-data-table--fleet-accordion th.md-fleet-unit-col,
.master-data-table--fleet-accordion td.md-fleet-unit-cell {
    width: 38%;
    min-width: 10rem;
}
.master-data-table--fleet-accordion th.md-fleet-division-col,
.master-data-table--fleet-accordion td.md-fleet-division-cell {
    width: 28%;
    min-width: 7rem;
}
.master-data-table--fleet-accordion th.md-fleet-type-col,
.master-data-table--fleet-accordion td.md-fleet-type-cell {
    width: 34%;
    min-width: 8rem;
}
.master-data-table--other-locations-accordion {
    table-layout: fixed;
    width: 100%;
}
.master-data-table--other-locations-accordion th.md-ol-name-col,
.master-data-table--other-locations-accordion td.md-ol-name-cell {
    width: 26%;
    min-width: 9rem;
}
.master-data-table--other-locations-accordion th.md-ol-type-col,
.master-data-table--other-locations-accordion td.md-ol-type-cell {
    width: 16%;
    min-width: 7rem;
}
.master-data-table--other-locations-accordion th.md-ol-address-col,
.master-data-table--other-locations-accordion td.md-ol-address-cell {
    width: 36%;
    min-width: 10rem;
}
.master-data-table--other-locations-accordion th.md-ol-phone-col,
.master-data-table--other-locations-accordion td.md-ol-phone-cell {
    width: 22%;
    min-width: 8rem;
}
.master-data-table--other-locations tr.md-ol-row {
    cursor: pointer;
}
.master-data-table--other-locations tr.md-ol-row--inactive {
    opacity: 0.72;
}
.master-data-table--other-locations tr.md-ol-row:hover {
    background: var(--bg-raised, #fafafa);
}
.master-data-table--other-locations tr.md-ol-row--expanded {
    background: var(--bg-sunken, #e4e4e7);
}
.master-data-table--other-locations tr.md-ol-row:focus-visible {
    outline: 2px solid var(--border-focus, #3f3f46);
    outline-offset: -2px;
}
.md-ol-summary-phone {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.md-ol-summary-phone .md-ol-field {
    flex: 1 1 auto;
    min-width: 0;
}
.md-ol-expand-chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted, #64748b);
    user-select: none;
}
.master-data-table--other-locations tr.md-ol-detail-row > td {
    padding: 0.65rem 0.7rem 0.85rem;
    background: var(--bg-sunken, #e4e4e7);
    border-top: none;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
}
.master-data-table--other-locations tr.md-ol-detail-row[hidden] {
    display: none !important;
}
.md-ol-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.65rem 0.75rem;
    align-items: start;
}
.md-ol-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.md-ol-detail-item--wide {
    grid-column: 1 / -1;
}
.md-ol-detail-item--actions {
    justify-content: flex-end;
}
/* Other Locations: weekly opening hours editor (app-master-data.js otherLocationHoursHtml). */
.md-ol-hours { display: grid; gap: 0.25rem; max-width: 26rem; }
.md-ol-hours-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.md-ol-hours-day { width: 2.5rem; font-weight: 700; font-size: 0.78rem; color: var(--text-primary); }
.md-ol-hours-to { font-size: 0.72rem; color: var(--text-secondary); }
/* The global input rule makes a time field a full-width block; here they sit in a row. */
.md-ol-hours .md-ol-hours-row input[type="time"] { display: inline-block; width: 7.5rem; flex: 0 0 7.5rem; height: 30px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.35rem; color: var(--text-primary); font-size: 0.78rem; }
.md-ol-hours .md-ol-hours-row input[type="time"]:disabled { opacity: 0.45; }
.md-ol-hours-closed { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--text-secondary); }
.md-ol-hours-source.md-ol-field { width: 100%; max-width: 26rem; margin-top: 0.4rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 0.4rem; color: var(--text-primary); font-size: 0.8rem; }
.md-ol-hours-note { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.25rem; }
.md-ol-detail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.md-ol-address-fields .md-ol-field {
    margin-bottom: 2px;
}
.master-data-table--fleet tr.md-fleet-row {
    cursor: pointer;
}
.master-data-table--fleet tr.md-fleet-row--retired {
    opacity: 0.82;
}
.master-data-table--fleet tr.md-fleet-row:hover {
    background: var(--bg-raised, #fafafa);
}
.master-data-table--fleet tr.md-fleet-row--expanded {
    background: var(--bg-sunken, #e4e4e7);
}
.master-data-table--fleet tr.md-fleet-row:focus-visible {
    outline: 2px solid var(--border-focus, #3f3f46);
    outline-offset: -2px;
}
.md-fleet-summary-type {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.md-fleet-summary-type .md-fleet-field,
.md-fleet-summary-type select {
    flex: 1 1 auto;
    min-width: 0;
}
.md-fleet-expand-chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted, #64748b);
    user-select: none;
}
.master-data-table--fleet tr.md-fleet-detail-row > td {
    padding: 0.65rem 0.7rem 0.85rem;
    background: var(--bg-sunken, #e4e4e7);
    border-top: none;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
}
.master-data-table--fleet tr.md-fleet-detail-row[hidden] {
    display: none !important;
}
.md-fleet-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.65rem 0.75rem;
    align-items: start;
}
.md-fleet-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.md-fleet-detail-item--wide {
    grid-column: 1 / -1;
}
.md-fleet-detail-item--actions {
    justify-content: flex-end;
}
.md-fleet-detail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.md-fleet-detail-item .md-fleet-field,
.md-fleet-detail-item .md-fleet-notes-field,
.md-fleet-detail-item .md-fleet-assigned-select,
.md-fleet-detail-item .md-fleet-division-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.master-data-shell {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
}
/* Back Office screen subtitles ??? two lines by default, expandable */
.nscc-view-subtitle-wrap {
    margin: 0.25rem 0 0;
    max-width: 42rem;
}
.nscc-view-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

/* Unified primary screen title bar ? every screen uses the same card + border + type */
.master-data-header-box,
.view-section .master-data-header-box,
.nscc-ledger-head,
.erp-connect-header.master-data-header-box,
.nscc-chrome-synthetic-title {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.85rem;
    background: var(--bg-card, #ffffff);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    box-shadow: none;
}
.master-data-header-box .erp-connect-title,
.master-data-header-box .master-data-title,
.master-data-header-box h2,
.nscc-ledger-head .erp-connect-title,
.nscc-ledger-head .master-data-title,
.nscc-ledger-head h2,
.view-section .erp-connect-title,
.view-section h2.erp-connect-title,
.view-section h2.master-data-title,
.nscc-chrome-synthetic-title .erp-connect-title,
.nscc-chrome-synthetic-title h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    text-transform: none !important;
    border: none !important;
    background: transparent !important;
    font-family: var(--font-sans, inherit) !important;
}
/* Overview / module landing titles: same black title card as Master Data */
.nscc-overview-intro__title,
h2.nscc-overview-intro__title,
.erp-connect-title.nscc-overview-intro__title {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.85rem !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    text-transform: none !important;
    font-family: var(--font-sans, inherit) !important;
    background: var(--bg-card, #ffffff) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: default;
}
.master-data-header-box .nscc-view-subtitle,
.nscc-ledger-head .nscc-view-subtitle {
    color: #334155;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Descriptions live on the title hover ? never show under-title copy */
.master-data-header-box .nscc-view-subtitle-wrap,
.master-data-header-box .nscc-view-subtitle,
.nscc-ledger-head .nscc-view-subtitle-wrap,
.nscc-ledger-head .nscc-view-subtitle,
.erp-connect-header .nscc-view-subtitle-wrap,
.erp-connect-header .nscc-view-subtitle,
.nscc-view-subtitle-toggle {
    display: none !important;
}
.erp-connect-title[title],
.master-data-title[title],
.master-data-header-box h2[title],
.nscc-ledger-head .erp-connect-title[title],
.nscc-overview-intro__title[title],
.nscc-overview-intro__title[data-nscc-desc],
.erp-connect-title[data-nscc-desc],
.master-data-title[data-nscc-desc] {
    cursor: default;
}

/* Do not strip the title box on connect shells */
.master-data-shell--bo-connect .master-data-header-box.erp-connect-header,
.master-data-shell--bo-connect .erp-connect-header.master-data-header-box {
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.85rem;
    background: var(--bg-card, #ffffff);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
}
:root.dark .master-data-header-box,
:root.dark .nscc-ledger-head,
:root.dark .erp-connect-header.master-data-header-box,
:root.dark .nscc-chrome-synthetic-title,
:root.dark .nscc-overview-intro__title,
body.dark-theme .master-data-header-box,
body.dark-theme .nscc-ledger-head,
body.dark-theme .erp-connect-header.master-data-header-box,
body.dark-theme .nscc-chrome-synthetic-title,
body.dark-theme .nscc-overview-intro__title {
    border-color: var(--nscc-line, #ffffff) !important;
}
.nscc-view-subtitle--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.nscc-view-subtitle-toggle {
    display: inline-block;
    margin: 0.12rem 0 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    line-height: 1.3;
}
.nscc-view-subtitle-toggle[hidden] {
    display: none;
}
.nscc-view-subtitle-toggle:hover {
    color: var(--text-primary);
}
.master-data-header-box .nscc-view-subtitle-wrap {
    max-width: 36rem;
}

/* Unified Back Office connect layout */
/* Normal mode: page scrolls via .views-container; main table panel scrolls inside viewport (ERP Connect pattern) */
#master-personnel-view.view-section.active:not(.nscc-view-fs),
#master-locations-view.view-section.active:not(.nscc-view-fs),
#master-other-locations-view.view-section.active:not(.nscc-view-fs),
#master-fleet-view.view-section.active:not(.nscc-view-fs),
#custom-export-view.view-section.active:not(.nscc-view-fs) {
    display: block;
    height: auto;
    min-height: calc(100vh - 8.5rem);
    overflow: visible;
}
.view-section.active:not(.nscc-view-fs) .master-data-shell--bo-connect {
    display: block;
    overflow: visible;
    flex: none;
    min-height: auto;
    height: auto;
}
.view-section.active:not(.nscc-view-fs) .master-data-shell--bo-connect .nscc-erp-panel--flat,
.view-section.active:not(.nscc-view-fs) .master-data-shell--bo-connect .bo-connect-panel,
.view-section.active:not(.nscc-view-fs) .master-data-shell--bo-connect .bo-connect-tab-panel {
    display: block;
    overflow: visible;
    flex: none;
    min-height: auto;
    height: auto;
}
/* Personnel (fullscreen): bounded viewport + table region scrolls */
#master-personnel-view.view-section.active.nscc-view-fs {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}
/* Customers (fullscreen): bounded viewport + table region scrolls */
#master-locations-view.view-section.active.nscc-view-fs {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}
/* Other Locations (fullscreen): bounded viewport + table region scrolls */
#custom-export-view.view-section.active.nscc-view-fs {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}
#custom-export-view.nscc-view-fs.view-section.active {
    min-height: 100%;
}
#custom-export-view.nscc-view-fs .master-data-shell--bo-connect,
#custom-export-view.nscc-view-fs .master-data-shell--custom-export {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-panel,
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-tab-panel {
    display: block;
    overflow: visible;
    min-height: auto;
    height: auto;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-scroll-region,
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-table-wrap {
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: clip;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-panel {
    overflow: visible;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-main {
    overflow: visible;
    flex: none;
    min-height: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-tab-panel > .custom-export-main {
    flex: none;
    min-height: auto;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-fields-wrap.custom-export-table-wrap {
    flex: none;
    min-height: 16rem;
    max-height: none;
    overflow: visible;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-fields-panel {
    min-height: auto;
    overflow: visible;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-fields-rows {
    overflow: visible;
    min-height: calc(2 * 4.5rem);
    flex: none;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-fields-row,
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-fields-row--included,
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-fields-row--excluded {
    flex: 0 0 auto;
    min-height: auto;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-fields-scroll-wrap {
    flex: 0 0 auto;
    min-height: 3.5rem;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-fields-row .custom-export-fields-scroll {
    min-height: 3.5rem;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-main > .bo-table-scroll-wrap,
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-main > .md-dual-scroll {
    flex: none;
    min-height: auto;
}
#custom-export-view.nscc-view-fs .custom-export-scroll-region,
#custom-export-view.nscc-view-fs .custom-export-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
}
#custom-export-view.nscc-view-fs .custom-export-fields-wrap,
#custom-export-view.nscc-view-fs .custom-export-fields-panel,
#custom-export-view.nscc-view-fs .custom-export-fields-rows,
#custom-export-view.nscc-view-fs .custom-export-history-shell,
#custom-export-view.nscc-view-fs .custom-export-scroll-region {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
#custom-export-view.nscc-view-fs .custom-export-fields-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}
#custom-export-view.nscc-view-fs .custom-export-fields-rows {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.3rem;
}
#custom-export-view.nscc-view-fs .custom-export-fields-row,
#custom-export-view.nscc-view-fs .custom-export-fields-row--included,
#custom-export-view.nscc-view-fs .custom-export-fields-row--excluded {
    flex: 1 1 50%;
    min-height: 4.1rem;
    max-height: none;
}
#custom-export-view.nscc-view-fs .custom-export-fields-row--excluded {
    padding-top: 0.3rem;
}
#custom-export-view.nscc-view-fs .custom-export-history-shell,
#custom-export-view.nscc-view-fs .custom-export-scroll-region {
    overflow: auto;
    overscroll-behavior: contain;
}
#custom-export-view.nscc-view-fs .custom-export-main {
    gap: 0.4rem;
}
#custom-export-view.nscc-view-fs .custom-export-main > .custom-export-fields-wrap {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#custom-export-view.nscc-view-fs .custom-export-fields-wrap.custom-export-table-wrap {
    overflow: hidden;
}

/* Custom Export ??? compact chrome so included + excluded field rows stay fully visible */
#custom-export-view .custom-export-tab-panel > .custom-export-main {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#custom-export-view .custom-export-main > .custom-export-fields-wrap {
    flex: 1 1 auto;
    /* Toolbar + two taller field-card rows (included + excluded) */
    min-height: 16rem;
}
#custom-export-view .master-data-header-box .nscc-view-subtitle-wrap {
    display: none;
}
#custom-export-view .master-data-header-box.erp-connect-header {
    margin-bottom: 0.35rem;
}
#custom-export-view .erp-connect-title {
    font-size: 1.15rem;
    line-height: 1.2;
}
#custom-export-view .custom-export-panel > .nscc-erp-tabs {
    margin-bottom: 0.35rem;
}
#custom-export-view .custom-export-panel > .nscc-erp-tabs .btn {
    padding: 0.28rem 0.55rem;
    font-size: 0.72rem;
}
#custom-export-view .custom-export-templates .form-label-compact {
    font-size: 0.68rem;
    margin: 0;
}
#custom-export-view .custom-export-templates-row {
    gap: 0.25rem 0.4rem;
    align-items: center;
}
#custom-export-view .custom-export-source-select {
    min-width: 8.5rem;
    max-width: 14rem;
    padding: 0.28rem 0.45rem;
    font-size: 0.72rem;
    min-height: 1.85rem;
}
#custom-export-view .custom-export-source-pills {
    gap: 0.25rem;
}
#custom-export-view .custom-export-source-btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.62rem;
    line-height: 1.2;
}
#custom-export-view .custom-export-template-name {
    min-width: 7rem;
    max-width: 14rem;
    padding: 0.28rem 0.45rem;
    font-size: 0.72rem;
    min-height: 1.85rem;
}
#custom-export-view .custom-export-templates .btn-sm {
    padding: 0.22rem 0.45rem;
    font-size: 0.68rem;
    line-height: 1.15;
    min-height: 1.85rem;
}
#custom-export-view .custom-export-main {
    gap: 0.3rem;
}
#custom-export-view .custom-export-actions {
    gap: 0.3rem;
    padding-top: 0;
}
#custom-export-view .custom-export-actions-label {
    font-size: 0.62rem;
    margin-right: 0.15rem;
}
#custom-export-view .custom-export-actions .btn-sm {
    padding: 0.22rem 0.5rem;
    font-size: 0.68rem;
    min-height: 1.85rem;
}
#custom-export-view .custom-export-fields-order-hint {
    display: none;
}
#custom-export-view.nscc-view-fs .master-data-shell--bo-connect {
    padding: 0.35rem 0.5rem 0.45rem;
}
#custom-export-view.nscc-view-fs .custom-export-source-pills {
    display: none;
}
#custom-export-view.nscc-view-fs .custom-export-main > .custom-export-fields-wrap {
    flex: 1 1 0;
    min-height: 0;
}
#custom-export-view.nscc-view-fs .custom-export-fields-rows {
    flex: 1 1 0;
    min-height: 0;
}
#custom-export-view.nscc-view-fs .custom-export-fields-row,
#custom-export-view.nscc-view-fs .custom-export-fields-row--included,
#custom-export-view.nscc-view-fs .custom-export-fields-row--excluded {
    flex: 1 1 0;
    min-height: 4.1rem;
    max-height: none;
}
#custom-export-view.nscc-view-fs .custom-export-fields-row .custom-export-fields-scroll {
    min-height: 3.5rem;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-main > .custom-export-fields-wrap {
    min-height: 16rem;
}
/* Other Locations (fullscreen): bounded viewport + table region scrolls */
#master-other-locations-view.view-section.active.nscc-view-fs {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}
.master-data-shell--bo-connect {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none !important;
    margin: 0;
    padding: 0.75rem 1rem 1rem;
    gap: 0;
    overflow: visible;
}
/* Finance / Payroll Connect ??? same viewport fill as master data */
.master-data-shell--finance {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-width: none !important;
    margin: 0;
    padding: 0.55rem 0.85rem 0.75rem;
    gap: 0.35rem;
    overflow: hidden;
}
#accounting-view.view-section.active:not(.nscc-view-fs),
#back-office-view.view-section.active:not(.nscc-view-fs),
#watchtower-landing-view.view-section.active:not(.nscc-view-fs),
#data-health-view.view-section.active:not(.nscc-view-fs) {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 8.5rem);
    overflow: hidden;
}
#accounting-view.view-section.active:not(.nscc-view-fs) .master-data-shell--finance,
#back-office-view.view-section.active:not(.nscc-view-fs) .back-office-payroll-mount {
    flex: 1;
    min-height: 0;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Scroll container for the Admin Console sandbox shell + Data Health.
   `.view-section { height: 100%; }` (line 1420) with the outer view constrained
   to `min-height: calc(100vh - 8.5rem)` above means the sandbox shell had no
   scroll container — content past the viewport clipped invisibly. Same pattern
   the Accounting/Back-Office/Leadership views use above: the outer view is a
   flex column with `overflow: hidden`; the tab body (the scrollable region)
   flexes to fill and scrolls itself. Applied to both Admin Console sandbox
   surfaces because they host their own tab strips subject to the same clip. */
#watchtower-landing-view.view-section.active:not(.nscc-view-fs) .watchtower-tab-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
/* Back Office left nav */
.bo-subnav-scroll {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.35rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.4rem 0.45rem 0.75rem;
    height: 100%;
    min-height: 0;
}
.bo-subnav-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.2rem 0 0.45rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.bo-subnav-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.bo-subnav-group__label {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 0.25rem 0.45rem 0.1rem;
    user-select: none;
}
.bo-subnav-group__items {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.1rem;
    align-items: stretch;
}
.nscc-bo-nav-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    flex-shrink: 0;
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    margin-bottom: 0.25rem;
}
.nscc-bo-nav-toggle:hover {
    background: var(--bg-raised);
}
.nscc-bo-nav-toggle__icon {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
.nscc-bo-nav-btn {
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    white-space: nowrap;
    padding: 0.35rem 0.5rem !important;
    border-radius: 4px;
}
.nscc-bo-nav-btn--nested {
    padding-left: 0.85rem !important;
    font-size: 0.78rem;
}
.nscc-bo-nav-btn__icon {
    flex-shrink: 0;
    min-width: 1.1rem;
    text-align: center;
}
.nscc-bo-nav-btn__label {
    overflow: hidden;
    text-overflow: ellipsis;
}
body.nscc-bo-nav-collapsed .bo-subnav-group,
body.nscc-bo-nav-collapsed .nscc-bo-nav-toggle__label,
body.nscc-bo-nav-collapsed .nscc-bo-nav-btn__label {
    display: none !important;
}
body.nscc-bo-nav-collapsed .nscc-bo-nav-toggle {
    justify-content: center;
    padding: 0.45rem 0.2rem;
}
body.nscc-bo-nav-collapsed .bo-subnav-scroll {
    padding: 0.35rem 0.2rem;
}

/* ============================================================
   System-wide left accordion (html.nscc-left-nav)
   Restore top tabs: html.nscc-top-nav-restore or localStorage nscc_use_top_nav=1
   ============================================================ */
html.nscc-left-nav {
    /* Fallback until JS sizes to longest label + ~2ch; was an oversized 288px. */
    --nscc-app-nav-width: 13.5rem;
    /* Gutter the grid always reserves — the flyout overlays past it. */
    --nscc-app-nav-rail: 48px;
    height: 100%;
    overflow: hidden;
}
html.nscc-left-nav body {
    height: 100%;
    max-height: 100vh;
    overflow: hidden;
}
html.nscc-left-nav .app-container {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
}
html.nscc-left-nav.nscc-app-nav-collapsed,
html.nscc-left-nav body.nscc-app-nav-collapsed {
    --nscc-app-nav-width: 48px;
}
html.nscc-left-nav .main-content {
    display: grid !important;
    grid-template-columns: var(--nscc-app-nav-rail, 48px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    /* Seam under ticker / beside rail matches left menu (not a different strip gray) */
    background: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5));
    background-color: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5));
}
html.nscc-left-nav .top-header {
    grid-column: 1 / -1;
    grid-row: 1;
}
html.nscc-left-nav .nscc-top-nav-row {
    display: none !important;
}
html.nscc-left-nav .nscc-top-nav--legacy,
html.nscc-left-nav nav.top-tabs {
    display: none !important;
}
html.nscc-left-nav #nscc-app-sidebar {
    grid-row: 2 / -1;
    grid-column: 1;
    /* The strip above the menu, level with the folder tabs to the right. The
       back arrow sits in it (.nscc-app-nav-back-row) and the menu starts under
       it, on the tabs' bottom edge. A one-row folder-tab strip measures exactly
       one tab tall, bottom rule included (its padding-top is zeroed in the
       left-nav chrome block); the old tab + 0.35rem + 2px left the menu 7.6px
       below the tab line. */
    --nscc-app-nav-strip-h: var(--nscc-folder-tab-h, 2.55rem);
    padding-top: var(--nscc-app-nav-strip-h);
    /* Containing block for the back-arrow cell parked in the strip. */
    position: relative;
    /* Overlay flyout: grid reserves only the 48px rail; this width overflows it. */
    width: var(--nscc-app-nav-width, 13.5rem);
    /* Pop-out animation: smoothly expand from the 48px rail to the full
       flyout width when hover opens it, and contract back down on leave
       (Matt 2026-09-12: "make the opening and closing an animated expand
       and contract, not just sudden movement out and in ... have the menu
       start closing but not abruptly"). 350 ms is long enough to read as
       a deliberate glide rather than a flicker; the box-shadow eases in
       with the same curve so the drop-shadow appears gradually. */
    transition:
        width 350ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 350ms cubic-bezier(0.2, 0.7, 0.2, 1),
        clip-path 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5));
    background-color: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5));
    /* Paint the full padding-box (per Matt 2026-09-09) so the sidebar reads as
       one solid column that starts at the top of the top icon — no visible blank
       strip above the first menu item. Menu items still start below the strip
       via padding-top. The expanded flyout must not paint over
       the folder tabs to its right — the clip-path in the expanded rule below
       trims its strip back to the 48px back-arrow cell. */
    background-clip: padding-box;
    border-right: 2px solid var(--border);
    /* Above view/table fullscreen so the rail stays clickable while content is FS */
    z-index: 10060;
}
@media (prefers-reduced-motion: reduce) {
    html.nscc-left-nav #nscc-app-sidebar { transition: none; }
}
/* Expanded flyout floats over the work area — shadow only while open so the
   resting 48px rail looks unchanged.
   The open panel starts at the folder tabs' bottom edge, not the header bar
   (Matt 2026-09-10: "have the top of the fly-out align with the bottom of the
   tabs in the main work area"). The clip keeps just the back-arrow cell in the
   strip above it, so the tabs beside the arrow stay visible and clickable; the
   flyout's border and shadow start at the tab line. The 40px past the right
   edge is room for the shadow. assets/nscc-app-nav.js (pointInClippedStrip)
   matches this for hover, so pointing at those tabs closes the flyout. */
html.nscc-left-nav:not(.nscc-app-nav-collapsed) #nscc-app-sidebar {
    box-shadow: 6px 0 16px rgba(0, 0, 0, 0.22);
    clip-path: polygon(
        0 0,
        var(--nscc-app-nav-rail, 48px) 0,
        var(--nscc-app-nav-rail, 48px) var(--nscc-app-nav-strip-h),
        calc(100% + 40px) var(--nscc-app-nav-strip-h),
        calc(100% + 40px) 100%,
        0 100%
    );
}
html.nscc-left-nav.dark:not(.nscc-app-nav-collapsed) #nscc-app-sidebar,
html.nscc-left-nav:not(.nscc-app-nav-collapsed) body.dark-theme #nscc-app-sidebar {
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.55);
}
/* Full-screen product views leave the left rail visible for switching screens */
html.nscc-left-nav .view-section.nscc-view-fs,
html.nscc-left-nav #planner-view.nscc-planner-fs,
html.nscc-left-nav .nscc-table-fs-target.nscc-table-fs {
    left: var(--nscc-app-nav-rail, 48px);
    right: 0;
    width: calc(100vw - var(--nscc-app-nav-rail, 48px)) !important;
}
html.nscc-left-nav #live-ops-container {
    grid-row: 3;
    grid-column: 2;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    /* Isolate scrolling so content never paints under the folder-tab strip */
    isolation: isolate;
    z-index: 0;
    position: relative;
    /* Never let a screen end on the bottom edge of the window: a gap under the
       panel's outline, and blank space after its last box (owner, 2026-10-18). */
    margin-bottom: var(--nscc-screen-bottom-gap, 0.6rem);
}
/* The spacer sits at the end of each screen's own flow, not the container's: many
   screens have a fixed height and let their boxes flow past it, so a spacer (or
   padding) on the container landed above the last box. The finance/HR tab panels
   scroll themselves and get the same spacer. */
html.nscc-left-nav #live-ops-container > .view-section.active:not(.nscc-view-fs)::after,
html.nscc-left-nav #live-ops-container .nscc-erp-tab-panel.active::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    height: var(--nscc-screen-bottom-space, 1.5rem);
}
/*
 * Unified folder workspace (Dispatch / Planner / Accounting / Payroll / HR / Pulse / ?):
 * light strip behind tabs + rounded content body that joins the active tab.
 */
html.nscc-left-nav body[data-active-top-tab="live-ops"] #live-ops-container,
html.nscc-left-nav body[data-active-top-tab="planner"] #live-ops-container,
html.nscc-left-nav body[data-active-top-tab="daily-pulse"] #live-ops-container,
html.nscc-left-nav body[data-active-top-tab="back-office"] #live-ops-container,
html.nscc-left-nav body[data-active-top-tab="form-management"] #live-ops-container,
html.nscc-left-nav body[data-active-top-tab="support"] #live-ops-container,
html.nscc-left-nav body[data-active-top-tab="reports"] #live-ops-container,
html.nscc-left-nav body[data-active-top-tab="ledger-audit"] #live-ops-container,
html.nscc-left-nav body[data-active-top-tab="communication"] #live-ops-container {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-top: none;
    border-radius: 0 10px 10px 10px;
    background: var(--chrome-folder-panel-bg, var(--bg-card));
    box-sizing: border-box;
}
:root.dark html.nscc-left-nav body[data-active-top-tab="live-ops"] #live-ops-container,
:root.dark html.nscc-left-nav body[data-active-top-tab="planner"] #live-ops-container,
:root.dark html.nscc-left-nav body[data-active-top-tab="daily-pulse"] #live-ops-container,
:root.dark html.nscc-left-nav body[data-active-top-tab="back-office"] #live-ops-container,
:root.dark html.nscc-left-nav body[data-active-top-tab="form-management"] #live-ops-container,
:root.dark html.nscc-left-nav body[data-active-top-tab="support"] #live-ops-container,
body.dark-theme.nscc-left-nav #live-ops-container,
html.nscc-left-nav body.dark-theme #live-ops-container {
    border-color: var(--nscc-line, #ffffff);
}
/* When folder tabs are parked in chrome, keep one folder body (do not blank panels) */
html.nscc-left-nav body.nscc-bo-chrome-tabs #accounting-view .nscc-erp-tab-panel.active,
html.nscc-left-nav body.nscc-bo-chrome-tabs #ops-field-view .nscc-erp-tab-panel.active,
html.nscc-left-nav body.nscc-bo-chrome-tabs #back-office-payroll-panel .nscc-erp-tab-panel.active,
html.nscc-left-nav body.nscc-bo-chrome-tabs #executive-dashboard-view .nscc-erp-tab-panel.active,
html.nscc-left-nav body.nscc-bo-chrome-tabs .exec-dash-panel,
html.nscc-left-nav body.nscc-bo-chrome-tabs #daily-pulse-view .nscc-erp-tab-panel.active,
html.nscc-finance-shell body.nscc-bo-chrome-tabs #accounting-view .nscc-erp-tab-panel.active,
html.nscc-finance-shell body.nscc-bo-chrome-tabs #back-office-payroll-panel .nscc-erp-tab-panel.active,
html.nscc-finance-shell body.nscc-bo-chrome-tabs #ops-field-view .nscc-erp-tab-panel.active {
    border: none !important;
    border-radius: 0 !important;
    background: var(--chrome-folder-panel-bg, var(--bg-card)) !important;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    min-height: 12rem;
}
/* Chrome-parked in-page strips stay flat (strip lives in #nscc-chrome-folder-tabs) */
html.nscc-left-nav body.nscc-bo-chrome-tabs .master-data-shell--finance > .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #back-office-payroll-panel > .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs .master-data-shell--ops > .nscc-erp-tabs {
    background: transparent !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* Active folder tab cuts into the shared panel surface */
html.nscc-left-nav #live-ops-header .nscc-erp-tab-btn.active,
html.nscc-left-nav #planner-header .nscc-erp-tab-btn.active,
html.nscc-left-nav #nscc-chrome-folder-tabs .nscc-erp-tab-btn.active,
html.nscc-left-nav #nscc-chrome-folder-tabs .nscc-erp-tab-btn[aria-selected="true"],
html.nscc-left-nav #daily-pulse-folder-tabs .nscc-erp-tab-btn.active {
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card)) !important;
}
/* Left-nav mode: Dispatch / Planner / Support / Master option bars are
   top-of-content folder tabs (not a second left column / accordion). */
html.nscc-left-nav body[data-active-top-tab="back-office"] .main-content,
html.nscc-left-nav.body[data-active-top-tab="back-office"] .main-content {
    grid-template-columns: var(--nscc-app-nav-rail, 48px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
}
html.nscc-left-nav #live-ops-header.is-visible,
html.nscc-left-nav #planner-header.is-visible,
html.nscc-left-nav #support-header.is-visible,
html.nscc-left-nav #nscc-chrome-folder-tabs.is-visible {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    visibility: visible !important;
    height: auto !important;
    /* Size to title + tabs ? do not force a tall empty strip that overlays content */
    min-height: 0 !important;
    max-height: none !important;
    padding: 0.35rem 0.55rem 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: none !important;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    /* Clip children so the strip never paints over the views grid row below */
    overflow: hidden !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    background: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5)) !important;
    background-color: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5)) !important;
    z-index: 1;
}

/* =====================================================================
   Pinnable / auto-hiding chrome folder tabs  (nscc-foldertab-pin.js)
   Pinned (default) = today's behaviour, strip in grid-row 2.
   Auto (unpinned)  = strip becomes an absolute overlay that collapses to a
   thin handle; the handle takes grid-row 2 so the content reclaims the space,
   and revealing the strip overlays the content rather than reflowing it.
   Colours are token-driven so all 10 themes stay legible.
   ===================================================================== */

/* --- top-right control anchor (nscc-foldertab-pin.js) ---
   The Pin and the strip-level Advanced switch (.nscc-mode-check, NOT the
   --inline payroll/HR variant) are each anchored independently to the
   top-right of the chrome strip via position:absolute against the host
   (position:relative), so neither moves down when the folder tabs wrap to a
   second row -- the tabs live in normal flow underneath and simply wrap
   earlier because the host reserves a fixed right-hand gutter (below).
   They are NOT DOM siblings: the Pin is injected by this file directly into
   the host, while the Advanced switch is rendered by the Accounting/Ops
   screen module inside the parked tab-strip nav and deliberately left where
   it renders (relocating it caused it to be silently destroyed on a later
   chrome resync that didn't also regenerate the tab strip -- see PR history).
   Both get identical fixed-width "chip" styling and sit on the same top/
   right baseline so they read as one intentional, matched control group.
   All colours are token-driven so the group stays legible in every theme. */
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls { position: relative; }

html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-foldertab-pin,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-foldertab-pin {
    position: absolute;
    /* Stacked with the Advanced switch (per Matt 2026-09-05: "stack the
       advanced and pinned controls … right justified"). Pin is the top
       row because it is present on every chrome strip; Advanced appears
       beneath it only on screens that have one, so the Pin never shifts.
       18px + 3px gap + ~16px Advanced = 37px inside the ~41px strip. */
    top: 0.2rem;
    z-index: 3;
    margin: 0;
    box-sizing: border-box;
    width: 6.1rem;
    height: 18px;
    min-height: 18px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid var(--border, var(--nscc-line, #000));
    border-radius: 8px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #18181b);
    font: 700 0.68rem/1 var(--font-sans, 'IBM Plex Sans', 'Segoe UI', sans-serif);
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}
/* Advanced (Easy/Advanced) switch: plain "Advanced" text + the small 14px
   checkbox, no chip chrome. It shares only the top-right anchoring with the
   Pin — per Matt 2026-09-05: "instead of advanced being a button just have
   it say Advanced with a small checkbox next to it. no border, very basic." */
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check:not(.nscc-mode-check--inline),
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check:not(.nscc-mode-check--inline) {
    position: absolute;
    top: calc(0.2rem + 21px);
    z-index: 3;
    margin: 0;
    box-sizing: border-box;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary, #18181b);
    font: 700 0.68rem/1 var(--font-sans, 'IBM Plex Sans', 'Segoe UI', sans-serif);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}
/* Both controls share the same right edge and stack: Pin on the top row,
   Advanced directly beneath it (see the `top` values above). */
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-foldertab-pin,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-foldertab-pin { right: 0.55rem; }
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check:not(.nscc-mode-check--inline),
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check:not(.nscc-mode-check--inline) { right: 0.55rem; }

html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-foldertab-pin:hover,
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check:not(.nscc-mode-check--inline):hover,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-foldertab-pin:hover,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check:not(.nscc-mode-check--inline):hover { filter: brightness(1.05); }
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-foldertab-pin:focus-visible,
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check:not(.nscc-mode-check--inline):focus-within,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-foldertab-pin:focus-visible,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check:not(.nscc-mode-check--inline):focus-within {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 1px;
}
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check__text,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls .nscc-mode-check__text { font-weight: 700; color: inherit; }
.nscc-foldertab-pin__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted, #71717a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    flex: 0 0 auto;
}
.nscc-foldertab-pin[aria-pressed="true"] .nscc-foldertab-pin__dot {
    background: var(--accent, #2563eb);
}

/* Reserve a fixed right-hand gutter on the host so wrapping tab rows never
   underlap the anchored chip(s). Two fixed sizes (pin-only vs pin+advanced) --
   both classes are simple childList-presence flags set once per chrome resync
   (see nscc-foldertab-pin.js syncControls), never a measured/layout-read
   value, so this never triggers a forced reflow on the render path. */
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls { padding-right: 7.3rem !important; }

/* Inventory quantity stepper: [-] qty [+] instead of qty and the buttons
   living in separate table cells (nscc-bo-extras.js nsccBoExtrasRenderInventory). */
.nscc-inv-stepper { display: inline-flex; align-items: center; gap: 0.35rem; }
.nscc-inv-stepper__qty { min-width: 1.6rem; text-align: center; font-weight: 700; }
html.nscc-left-nav #nscc-chrome-folder-tabs.nscc-has-chrome-controls.nscc-has-advanced-check,
#nscc-chrome-folder-tabs.nscc-has-chrome-controls.nscc-has-advanced-check { padding-right: 13.75rem !important; }

/* --- collapsed handle (auto mode only, when the chrome strip is active) --- */
#nscc-foldertab-handle { display: none; }
html.nscc-left-nav body.nscc-bo-chrome-tabs.nscc-foldertabs-auto #nscc-foldertab-handle {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    padding: 0 0.7rem;
    height: 1.6rem;
    border-bottom: 2px solid var(--border, var(--nscc-line, #000));
    background: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5));
    color: var(--text-secondary, #52525b);
    font: 800 0.62rem/1 var(--font-sans, 'IBM Plex Sans', 'Segoe UI', sans-serif);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    z-index: 2;
}
html.nscc-left-nav body.nscc-bo-chrome-tabs.nscc-foldertabs-auto #nscc-foldertab-handle:hover {
    background: var(--bg-sunken, var(--bg-page, #f4f4f5));
}
#nscc-foldertab-handle:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; }
.nscc-foldertab-handle__grip {
    width: 30px; height: 4px; border-radius: 2px; flex: 0 0 auto;
    background: var(--text-muted, #a1a1aa);
}
.nscc-foldertab-handle__lead { flex: 0 0 auto; }
.nscc-foldertab-handle__name {
    color: var(--text-primary, #18181b);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.nscc-foldertab-handle__hint {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--text-muted, #71717a);
    letter-spacing: 0.04em;
}
.nscc-foldertab-handle__chev { flex: 0 0 auto; font-size: 0.7rem; color: var(--text-muted, #71717a); }

/* --- auto mode: strip becomes a fixed overlay (left/top/width set by JS from
   the handle's rect, so revealing overlays the content without reflow) --- */
html.nscc-left-nav body.nscc-foldertabs-auto #nscc-chrome-folder-tabs.is-visible {
    position: fixed !important;
    z-index: 40 !important;
    grid-row: auto !important;
    grid-column: auto !important;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, opacity 0.18s ease, visibility 0s linear 0.18s;
}
html.nscc-left-nav body.nscc-foldertabs-auto.nscc-foldertabs-revealed #nscc-chrome-folder-tabs.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.18s ease, opacity 0.18s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    html.nscc-left-nav body.nscc-foldertabs-auto #nscc-chrome-folder-tabs.is-visible {
        transition: none !important;
    }
}

/* Folder tabs name the screen ? do not show parked/synthetic page titles in chrome. */
#nscc-chrome-folder-tabs > .master-data-header-box,
#nscc-chrome-folder-tabs > .nscc-ledger-head,
#nscc-chrome-folder-tabs > .erp-connect-header,
#nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title {
    display: none !important;
}
/* In-page duplicate titles when chrome folder tabs are visible */
body.nscc-bo-chrome-tabs .view-section.active .nscc-overview-intro__title,
body.nscc-bo-chrome-tabs .view-section.active .nscc-overview-intro > h2.erp-connect-title,
body.nscc-bo-chrome-tabs .view-section.active .master-data-shell > .master-data-header-box:not(.nscc-master-actions-only) h2.erp-connect-title,
body.nscc-bo-chrome-tabs .view-section.active .master-data-shell > .master-data-header-box:not(.nscc-master-actions-only) h2.master-data-title,
body.nscc-bo-chrome-tabs .nscc-title-hidden-for-tabs {
    display: none !important;
}
/* Legacy title-in-chrome sizing kept for any screen still without folder tabs (rare) */
#nscc-chrome-folder-tabs.nscc-chrome-has-page-title > .master-data-header-box,
#nscc-chrome-folder-tabs.nscc-chrome-has-page-title > .nscc-ledger-head,
#nscc-chrome-folder-tabs.nscc-chrome-has-page-title > .erp-connect-header,
#nscc-chrome-folder-tabs.nscc-chrome-has-page-title > .nscc-chrome-synthetic-title {
    display: block !important;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.4rem !important;
    padding: 0.5rem 0.75rem !important;
    order: -1;
    overflow: hidden;
    max-height: none;
    background: var(--bg-card, #ffffff) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
#nscc-chrome-folder-tabs > .master-data-header-box .erp-connect-title,
#nscc-chrome-folder-tabs > .master-data-header-box .master-data-title,
#nscc-chrome-folder-tabs > .master-data-header-box h2,
#nscc-chrome-folder-tabs > .nscc-ledger-head .erp-connect-title,
#nscc-chrome-folder-tabs > .nscc-ledger-head .master-data-title,
#nscc-chrome-folder-tabs > .nscc-ledger-head h2,
#nscc-chrome-folder-tabs > .erp-connect-header .erp-connect-title,
#nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title .erp-connect-title,
#nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    text-transform: none !important;
    font-family: var(--font-sans, inherit) !important;
    border: none !important;
    background: transparent !important;
}
#nscc-chrome-folder-tabs > .master-data-header-box .nscc-view-subtitle-wrap,
#nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title .nscc-view-subtitle-wrap {
    display: none !important;
}
#nscc-chrome-folder-tabs > .nscc-erp-tabs,
#nscc-chrome-folder-tabs > .nscc-tab-groups {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    align-content: flex-end !important;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    order: 0;
}
/* Daily Pulse parks its own folder tabs into #nscc-chrome-folder-tabs.
   Leftover Dispatch/Forms/BO headers must not stay clickable. */
html.nscc-left-nav body[data-active-top-tab="daily-pulse"] #live-ops-header,
html.nscc-left-nav body[data-active-top-tab="daily-pulse"] #planner-header,
html.nscc-left-nav body[data-active-top-tab="daily-pulse"] #support-header,
html.nscc-left-nav body[data-active-top-tab="daily-pulse"] #back-office-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
html.nscc-left-nav #daily-pulse-view > .nscc-erp-tabs,
html.nscc-left-nav #daily-pulse-view > .nscc-folder-tabs-placeholder {
    display: none !important;
}
#daily-pulse-view[data-pulse-line="patrol"] .daily-pulse-courier-filters,
#daily-pulse-view[data-pulse-line="guard"] .daily-pulse-courier-filters {
    display: none !important;
}
/* Dispatch / Planner / chrome strip: tabs sit on the shared light strip (no nested strip) */
html.nscc-left-nav #live-ops-header .nscc-erp-tabs,
html.nscc-left-nav #planner-header .nscc-erp-tabs,
#live-ops-header .nscc-erp-tabs.nscc-tab-groups,
#planner-header .nscc-erp-tabs.nscc-tab-groups,
#nscc-chrome-folder-tabs .nscc-erp-tabs,
#nscc-chrome-folder-tabs .nscc-tab-groups {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 0.55rem !important;
    row-gap: 0.12rem !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    /* Content-sized ? a forced 5.5rem min-height stacked under titles and overlaid screens */
    min-height: 0;
    align-content: flex-end;
    overflow: hidden;
}
html.nscc-left-nav #live-ops-header:not(.is-visible),
html.nscc-left-nav #planner-header:not(.is-visible),
html.nscc-left-nav #support-header:not(.is-visible),
html.nscc-left-nav #back-office-header:not(.is-visible),
html.nscc-left-nav #nscc-chrome-folder-tabs:not(.is-visible),
#nscc-chrome-folder-tabs[hidden] {
    display: none !important;
}
#nscc-chrome-folder-tabs .nscc-erp-tabs:last-child,
#nscc-chrome-folder-tabs .nscc-tab-groups:last-child {
    border-bottom: none !important;
}
/* Leadership chrome = exactly two rows: row 1 is the synthetic Leadership folder
   tabs (Executive Dashboard / Leadership & Finance); row 2 is the active workspace's
   sub-tabs. Executive Dashboard ships six labelled sub-tab groups that otherwise wrap
   onto a third row, so hold the parked (non-synthetic) strip to a single row and let
   it scroll horizontally when the groups exceed the width. Every tab stays reachable.
   Scoped to .nscc-chrome-leadership (set in app-nav.js) so other parked chrome
   contexts (Accounting, Ops, Master Data, Dispatch) keep their normal wrapping. */
#nscc-chrome-folder-tabs.nscc-chrome-leadership > .nscc-tab-groups:not(.nscc-chrome-synthetic-tabs) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
#nscc-chrome-folder-tabs.nscc-chrome-leadership > .nscc-tab-groups:not(.nscc-chrome-synthetic-tabs) > .nscc-tab-group {
    flex: 0 0 auto;
}
/* Left-nav: never leave Master / Support / BO option bars as a second left column
   or as a top strip under the ticker (.is-visible must not win). */
html.nscc-left-nav #back-office-header,
html.nscc-left-nav #back-office-header.is-visible,
html.nscc-left-nav body[data-active-top-tab="back-office"] #back-office-header,
html.nscc-left-nav body[data-active-top-tab="back-office"] #back-office-header.is-visible,
html.nscc-left-nav #support-header,
html.nscc-left-nav #support-header.is-visible {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
html.nscc-left-nav body[data-active-top-tab="back-office"] #live-ops-container,
html.nscc-left-nav #live-ops-container {
    grid-row: 3 !important;
    grid-column: 2 !important;
}
/* Master Data header used to be a vertical left rail ? force folder-tab wrap. */
html.nscc-left-nav #back-office-header .bo-subnav-scroll,
html.nscc-left-nav #back-office-header .sub-nav-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 0.2rem !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 0 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
html.nscc-left-nav #back-office-header .bo-subnav-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    border-bottom: none !important;
    padding: 0 !important;
}
html.nscc-left-nav #back-office-header .bo-subnav-group__items {
    flex-direction: row !important;
    flex-wrap: wrap !important;
}
html.nscc-left-nav.nscc-finance-shell .nscc-top-nav-row,
html.nscc-finance-shell.nscc-left-nav .nscc-top-nav-row,
html.nscc-left-nav.nscc-ahp-bo-fs .nscc-top-nav-row {
    display: none !important;
}

/* Demo 2 embed: left-nav finance screens use full width like full-width finance screens */
html.nscc-left-nav.nscc-ahp-bo-fs .main-content,
html.nscc-left-nav.nscc-ahp-bo-fs #live-ops-container,
html.nscc-left-nav.nscc-ahp-bo-fs .view-section.active:not(.nscc-view-fs) {
    min-height: 0;
}
html.nscc-left-nav.nscc-ahp-bo-fs .app-container {
    height: 100vh;
    width: 100%;
    max-width: none;
}
html.nscc-left-nav.nscc-ahp-bo-fs .main-content {
    height: 100%;
    flex: 1 1 auto;
}
html.nscc-left-nav.nscc-ahp-bo-fs #live-ops-container {
    height: 100%;
    overflow: auto;
}
html.nscc-left-nav.nscc-ahp-bo-fs .view-section.active:not(.nscc-view-fs) {
    height: 100%;
    max-width: none;
    margin: 0;
}

.nscc-app-sidebar {
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* The back arrow sits ABOVE the menu — not inside it — so it's the same
   compact icon whether the rail is collapsed or hover-expanded. Matt
   2026-09-09: "the back arrow should not be part of the left menu. it can
   be above it and not pop out". Since 2026-09-10 it is parked in the strip
   at the top of the rail, level with the folder tabs (Matt: "make the small
   'back' arrow tuck up at the top, above the flyout menu"), so the menu
   starts right at the tabs' bottom edge. The cell is always one rail wide and
   its divider sits on the tabs' bottom line. Its right border only shows while
   the flyout is open — collapsed, the rail clips it and its own border paints
   the same 2px. */
.nscc-app-nav-back-row {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* One rail wide so the back-arrow chip matches the collapsed rail
       (Matt 2026-09-13: "make the back arrow box the regular size i dont
       like it bigger"). The 2×rail widening from 2026-09-12 was reverted
       here and in the flyout's clip-path below. */
    width: var(--nscc-app-nav-rail, 48px);
    height: var(--nscc-app-nav-strip-h, 2.55rem);
    display: flex;
    align-items: center;
    padding: 0 0.35rem;
    box-sizing: border-box;
    border-right: 2px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.nscc-app-nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.35rem 0.2rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}
.nscc-app-nav-back:disabled {
    opacity: 0.4;
    cursor: default;
}
@media (hover: hover) and (pointer: fine) {
    .nscc-app-nav-back:not(:disabled):hover {
        background: var(--bg-raised);
        outline: 2px solid var(--brand-light);
        outline-offset: -2px;
    }
}
.nscc-app-nav-back:not(:disabled):focus-visible {
    background: var(--bg-raised);
    outline: 2px solid var(--brand-light);
    outline-offset: -2px;
}
.nscc-app-nav-back__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
}
.nscc-app-nav-back__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Label is never shown — the back arrow is always icon-only so the rail
   geometry stays identical whether collapsed or hover-expanded (it doesn't
   "pop out" alongside the pillar labels). */
.nscc-app-nav-back__label { display: none; }
.nscc-app-nav-menu-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.55rem 0.45rem 0.35rem;
    box-sizing: border-box;
}
.nscc-app-nav-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    margin: 0;
    padding: 0;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    box-sizing: border-box;
}
.nscc-app-nav-menu-btn:hover,
.nscc-app-nav-menu-btn:focus-visible {
    background: var(--bg-sunken, #e4e4e7);
    outline: none;
}
.nscc-app-nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 1.05rem;
    pointer-events: none;
}
.nscc-app-nav-hamburger > span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}
html.nscc-app-nav-collapsed .nscc-app-nav-menu-head,
body.nscc-app-nav-collapsed .nscc-app-nav-menu-head {
    justify-content: center;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
:root.dark .nscc-app-nav-menu-btn,
body.dark-theme .nscc-app-nav-menu-btn {
    border-color: var(--nscc-line, #ffffff);
    color: #ffffff;
}
.nscc-app-nav-toggle,
.nscc-bo-nav-toggle {
    display: none !important;
}
.nscc-app-nav-pin {
    display: none !important;
}
.nscc-app-nav-list {
    list-style: none;
    margin: 0;
    /* Icon-column geometry is shared with the collapsed rail — see the
       "rail and flyout share one geometry" note below. Do not fork per state. */
    padding: 0.25rem 0.15rem 5.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    /* Accordion open/close must not fight browser scroll anchoring. */
    overflow-anchor: none;
    scroll-behavior: auto;
}
.nscc-app-nav-section {
    margin: 0 0 0.1rem;
}
.nscc-app-nav-main,
.nscc-app-nav-item,
.nscc-app-nav-group-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    padding: 0.4rem 0.45rem;
    cursor: pointer;
}
.nscc-app-nav-main:focus-visible,
.nscc-app-nav-item:focus-visible,
.nscc-app-nav-group-label:focus-visible,
.nscc-app-nav-main:focus,
.nscc-app-nav-item:focus,
.nscc-app-nav-group-label:focus {
    background: var(--bg-raised);
    outline: 2px solid var(--brand-light);
    outline-offset: -2px;
}
/* Keyboard cursor on a nav row must match the selected highlight. */
.nscc-app-nav-main.is-current:focus,
.nscc-app-nav-item.is-current:focus,
.nscc-app-nav-group-label.is-current:focus,
.nscc-app-nav-main.is-current:focus-visible,
.nscc-app-nav-item.is-current:focus-visible,
.nscc-app-nav-group-label.is-current:focus-visible {
    background: var(--nav-selected-bg);
    color: var(--nav-selected-ink);
    box-shadow: inset 4px 0 0 var(--nav-selected-bar);
    outline: 2px solid var(--nav-selected-bar);
    outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
    .nscc-app-nav-main:hover,
    .nscc-app-nav-item:hover,
    .nscc-app-nav-group-label:hover {
        background: var(--bg-raised);
        outline: 2px solid var(--brand-light);
        outline-offset: -2px;
    }
}
/* While Up/Down is moving the keyboard cursor, ignore mouse :hover so only
   .is-current (the focused row) looks selected. */
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-main:hover,
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-item:hover,
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-group-label:hover {
    background: transparent;
    outline: none;
}
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-main.is-current,
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-item.is-current,
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-group-label.is-current,
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-main.is-current:hover,
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-item.is-current:hover,
#nscc-app-sidebar.nscc-nav-kbd .nscc-app-nav-group-label.is-current:hover {
    background: var(--nav-selected-bg);
    color: var(--nav-selected-ink);
    box-shadow: inset 4px 0 0 var(--nav-selected-bar);
    outline: 2px solid var(--nav-selected-bar);
    outline-offset: -2px;
}
@media (hover: none), (pointer: coarse) {
    .nscc-app-nav-main:hover,
    .nscc-app-nav-item:hover,
    .nscc-app-nav-group-label:hover {
        background: transparent;
        outline: none;
    }
}
/* Solid selection ? warm stone brand (light + dark via tokens). */
.nscc-app-nav-main.is-current,
.nscc-app-nav-item.is-current,
.nscc-app-nav-group-label.is-current {
    background: var(--nav-selected-bg);
    box-shadow: inset 4px 0 0 var(--nav-selected-bar);
    color: var(--nav-selected-ink);
    font-weight: 700;
}
.nscc-app-nav-main.is-current:hover,
.nscc-app-nav-item.is-current:hover,
.nscc-app-nav-group-label.is-current:hover {
    background: var(--nav-selected-bg);
    color: var(--nav-selected-ink);
}
.nscc-app-nav-main.is-hover-preview,
.nscc-app-nav-item.is-hover-preview {
    background: var(--bg-raised);
    box-shadow: inset 3px 0 0 var(--nav-selected-bar);
    outline: 2px solid var(--brand-light);
    outline-offset: -2px;
}
.nscc-app-nav-main.is-hover-preview .nscc-app-nav-icon,
.nscc-app-nav-item.is-hover-preview .nscc-app-nav-icon {
    opacity: 1;
    color: var(--nav-selected-ink);
}
.nscc-app-nav-icon {
    flex-shrink: 0;
    width: 1.45rem;
    min-width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    font-size: 1.15rem;
    color: var(--text-muted);
    opacity: 0.72;
}
.nscc-app-nav-glyph {
    width: 1.3rem;
    height: 1.3rem;
    display: block;
}
/* Selected menu icons use site stone ink (theme-aware) ? not status blues. */
.nscc-app-nav-main.is-current .nscc-app-nav-icon,
.nscc-app-nav-item.is-current .nscc-app-nav-icon {
    filter: none;
    opacity: 1;
    color: var(--nav-selected-ink);
}
.nscc-app-nav-section[data-nav-section="about"] > .nscc-app-nav-main.is-current .nscc-app-nav-icon { color: var(--status-scheduled); }

.nscc-industry-lead { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.45; margin: 0.75rem 0 0.85rem; }
.nscc-industry-lead--tight { margin-top: 0.35rem; }
.nscc-industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 0.5rem;
}
.nscc-industry-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left;
    padding: 0.65rem 0.7rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}
.nscc-industry-card:hover { background: var(--bg-raised); }
.nscc-industry-card.is-selected {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
    background: var(--bg-raised);
}
.nscc-industry-card__family {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.nscc-industry-card__label { font-size: 0.82rem; }
.nscc-industry-card__hint { font-size: 0.68rem; color: var(--text-secondary); line-height: 1.35; }
.nscc-industry-brand { margin-top: 1rem; display: grid; gap: 0.65rem; }
.nscc-industry-logo-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nscc-industry-logo-row img { width: 40px; height: 40px; object-fit: contain; background: var(--bg-card); border: 2px solid var(--border); border-radius: 6px; padding: 2px; }
.nscc-industry-brand-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nscc-industry-features-head {
    margin: 1.1rem 0 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.nscc-industry-feature { align-items: center; }
.nscc-app-nav-item .nscc-app-nav-icon {
    width: 1.2rem;
    min-width: 1.2rem;
    height: 1.2rem;
    font-size: 1rem;
    color: var(--text-muted);
    opacity: 0.72;
}
.nscc-app-nav-item.is-current .nscc-app-nav-icon {
    opacity: 1;
    color: var(--nav-selected-ink);
}
.nscc-app-nav-item .nscc-app-nav-glyph {
    width: 1.1rem;
    height: 1.1rem;
}
.nscc-app-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}
.nscc-app-nav-chevron {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    margin-right: 0.15rem;
}
.nscc-app-nav-section.is-open > .nscc-app-nav-main .nscc-app-nav-chevron {
    transform: rotate(45deg);
    margin-top: -0.15rem;
}
.nscc-app-nav-sub,
.nscc-app-nav-subsub {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nscc-app-nav-sub {
    padding-left: 0.85rem;
    margin: 0.05rem 0 0.35rem;
    border-left: 2px solid var(--border);
    margin-left: 0.85rem;
    /* Long Accounting / Payroll trees scroll inside the open section. */
    max-height: min(68vh, calc(100vh - 11rem));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
.nscc-app-nav-group.is-open > .nscc-app-nav-subsub {
    max-height: min(48vh, calc(100vh - 14rem));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.nscc-app-nav-group {
    margin: 0.2rem 0 0.15rem;
}
.nscc-app-nav-group-label {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    user-select: none;
}
.nscc-app-nav-group-label:hover,
.nscc-app-nav-group-label:focus-visible {
    background: var(--bg-raised);
    outline: 2px solid var(--brand-light);
    outline-offset: -2px;
}
.nscc-app-nav-section:not(.is-open) > .nscc-app-nav-sub,
.nscc-app-nav-group:not(.is-open) > .nscc-app-nav-subsub {
    display: none !important;
}
.nscc-app-nav-group.is-open > .nscc-app-nav-group-label .nscc-app-nav-chevron {
    transform: rotate(45deg);
    margin-top: -0.15rem;
}
.nscc-app-nav-subsub {
    padding-left: 0.7rem;
}
.nscc-app-nav-item {
    font-weight: 700;
    font-size: 0.82rem;
    align-items: flex-start;
    padding: 0.35rem 0.45rem;
}
.nscc-app-nav-item--nested {
    padding-left: 0.55rem;
}
html.nscc-app-nav-collapsed .nscc-app-nav-toggle__label,
html.nscc-app-nav-collapsed .nscc-app-nav-pin__label,
html.nscc-app-nav-collapsed .nscc-app-nav-label,
html.nscc-app-nav-collapsed .nscc-app-nav-chevron,
html.nscc-app-nav-collapsed .nscc-app-nav-sub,
html.nscc-app-nav-collapsed .nscc-app-nav-group-label,
body.nscc-app-nav-collapsed .nscc-app-nav-toggle__label,
body.nscc-app-nav-collapsed .nscc-app-nav-pin__label,
body.nscc-app-nav-collapsed .nscc-app-nav-label,
body.nscc-app-nav-collapsed .nscc-app-nav-chevron,
body.nscc-app-nav-collapsed .nscc-app-nav-sub,
body.nscc-app-nav-collapsed .nscc-app-nav-group-label {
    display: none !important;
}
html.nscc-app-nav-collapsed .nscc-app-nav-toggle,
html.nscc-app-nav-collapsed .nscc-app-nav-pin,
body.nscc-app-nav-collapsed .nscc-app-nav-toggle,
body.nscc-app-nav-collapsed .nscc-app-nav-pin {
    justify-content: center;
    width: calc(100% - 0.4rem);
    margin: 0.3rem 0.2rem;
    padding: 0.45rem 0.15rem;
}
/* The rail and the flyout share one geometry: collapsing hides the labels and
   nothing else. Any padding/justify override here re-positions every icon, so the
   column drifts as the flyout opens (0.1rem per row edge, compounding down the
   list). Leave the row box to the shared .nscc-app-nav-main rule above. */
html.nscc-app-nav-collapsed #nscc-app-sidebar,
body.nscc-app-nav-collapsed #nscc-app-sidebar {
    overflow: clip;
}

html.nscc-top-nav-restore #nscc-app-sidebar {
    display: none !important;
}

/* Customer portal ? isolated shell (no left-nav / phones / BO) */
html.nscc-portal-only,
body.nscc-portal-only {
    --nscc-portal-shell: 1;
}
html.nscc-portal-only #nscc-app-sidebar,
body.nscc-portal-only #nscc-app-sidebar,
html.nscc-portal-only .phone-container,
body.nscc-portal-only .phone-container,
html.nscc-portal-only .sim-controls,
body.nscc-portal-only .sim-controls {
    display: none !important;
}
html.nscc-portal-only .app-container.nscc-portal-app,
html.nscc-portal-only .main-content.nscc-portal-main {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    grid-template-columns: none;
}
.nscc-customer-portal,
.nscc-employee-portal-root,
.nscc-portal-shell,
#customer-portal-view,
#employee-portal-view {
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}
.nscc-customer-portal {
    padding: 1rem 1.25rem 2rem;
    min-height: 0;
    overflow: auto;
}
#customer-portal-view.active .nscc-customer-portal {
    max-width: 960px;
}
.nscc-portal-shell h1,
.nscc-portal-shell h2 {
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}
.nscc-portal-shell h1 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
}
.nscc-portal-shell h2 {
    margin: 1.25rem 0 0.45rem;
    font-size: 0.95rem;
}
.nscc-portal-lead,
.nscc-portal-pick-count {
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
}
.nscc-portal-lead {
    max-width: 42rem;
}
.nscc-portal-back {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    color: var(--text-primary);
}
.nscc-portal-back a,
.nscc-portal-link,
.nscc-linkish {
    color: var(--brand, #0d9488);
    -webkit-text-fill-color: var(--brand, #0d9488);
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.nscc-portal-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0.35rem 0 0.75rem;
    font-size: 0.82rem;
}
/* Customer portal folder tabs — same visual language as the console's
   folder-tab strip (nscc-erp-tabs), scoped so the portal shell can
   include them without pulling in the whole chrome-strip mounting
   pattern. Matt 2026-09-12 "create folder tabs in the customer &
   personnel portals." */
.nscc-portal-folder-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 0.35rem 0 0.85rem;
    border-bottom: 2px solid var(--border);
    padding: 0 0 0.35rem 0;
    flex-wrap: wrap;
}
.nscc-portal-folder-tabs .nscc-tab-group {
    display: flex;
    min-width: 0;
}
.nscc-portal-folder-tabs .nscc-tab-group__tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.nscc-portal-folder-tabs .nscc-erp-tab-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    border: 2px solid var(--border);
    border-radius: 6px 6px 0 0;
    background: var(--bg-raised);
    cursor: pointer;
    box-sizing: border-box;
}
.nscc-portal-folder-tabs .nscc-erp-tab-btn:hover,
.nscc-portal-folder-tabs .nscc-erp-tab-btn:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: -2px;
}
.nscc-portal-folder-tabs .nscc-erp-tab-btn.active {
    background: var(--bg-card);
    border-color: var(--nscc-line, #000000);
    border-bottom-color: var(--bg-card);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
}
.nscc-portal-tab-body {
    display: block;
}
.nscc-portal-faq { margin: 0.5rem 0 1rem; }
.nscc-portal-faq dt { font-weight: 600; margin-top: 0.75rem; }
.nscc-portal-faq dd { margin: 0.25rem 0 0 0; color: var(--text-secondary, #555); }
.nscc-portal-link-card {
    text-decoration: none;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: block;
}
.nscc-portal-link-card:hover,
.nscc-portal-link-card:focus-visible {
    border-color: var(--brand);
}
.nscc-portal-row--flash {
    animation: nscc-row-flash-pulse 1.4s ease;
}
@keyframes nscc-row-flash-pulse {
    0% { background: rgba(13, 148, 136, 0.28); }
    100% { background: transparent; }
}
.nscc-portal-actions {
    margin: 0.75rem 0 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.nscc-portal-topbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
    background: var(--bg-elevated, var(--bg-card));
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.nscc-portal-map {
    margin: 0.85rem 0 1rem;
    border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.12));
    border-radius: 8px;
    background: #eef3f9;
    overflow: hidden;
}
.nscc-portal-map svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    background: #eef3f9;
}
.nscc-portal-map__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0.85rem;
    background: #f7fafc;
    border-top: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
    font-size: 0.78rem;
    color: var(--text-primary);
}
.nscc-portal-map__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.nscc-portal-map__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
}
.nscc-portal-map__legend-note {
    margin-left: auto;
    color: var(--text-muted, #64748b);
    font-size: 0.72rem;
}
.nscc-portal-map__caption {
    margin: 0.35rem 0 0;
    padding: 0 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}

/* ========== IPS public-website theme — customer portal (in-app + standalone) ========== */
html.nscc-ips-portal-theme,
body.nscc-ips-portal-theme,
#customer-portal-view.nscc-ips-portal-theme,
#employee-portal-view.nscc-ips-portal-theme {
    --ips-blue: #263d88;
    --ips-blue-dark: #212121;
    --ips-orange: #f26723;
    --ips-page-bg: #f6f8fa;
    --ips-text: #444444;
    --ips-text-dark: #303030;
    --ips-muted: #555555;
    --ips-font-body: "Roboto", "Segoe UI", Arial, Helvetica, sans-serif;
    --ips-font-head: "Oswald", "Segoe UI", Arial, sans-serif;
}
html.nscc-ips-portal-theme body.nscc-portal-only,
html.nscc-ips-portal-theme #customer-portal-view.nscc-ips-portal-theme.active,
html.nscc-ips-portal-theme #employee-portal-view.nscc-ips-portal-theme.active {
    background: var(--ips-page-bg) !important;
    color: var(--ips-text) !important;
    -webkit-text-fill-color: var(--ips-text) !important;
    font-family: var(--ips-font-body) !important;
}
html.nscc-ips-portal-theme .nscc-customer-portal {
    padding: 0;
    max-width: none;
}
html.nscc-ips-portal-theme #customer-portal-view.active .nscc-customer-portal,
html.nscc-ips-portal-theme #employee-portal-view.active .nscc-customer-portal,
html.nscc-ips-portal-theme #employee-portal-view.active .nscc-employee-portal-root {
    max-width: none;
}
html.nscc-ips-portal-theme .nscc-employee-tab {
    border: 1px solid #dddddd;
    color: var(--ips-text, #444444);
    background: var(--bg-card);
}
html.nscc-ips-portal-theme .nscc-employee-tab.is-active,
html.nscc-ips-portal-theme .nscc-employee-tab:hover,
html.nscc-ips-portal-theme .nscc-employee-tab:focus-visible {
    border-color: var(--ips-orange, #f26723);
    color: var(--ips-blue, #263d88);
}
.nscc-ips-portal-site-header {
    background: var(--bg-card);
    border-top: 3px solid var(--ips-blue, #263d88);
    border-bottom: none;
    box-shadow: none;
    position: relative;
}
.nscc-ips-portal-header-wrap {
    position: relative;
    max-width: 72rem;
    margin: 0 auto;
}
.nscc-ips-portal-header-overlay {
    background: var(--ips-blue, #263d88);
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 55%;
    z-index: 0;
}
.nscc-ips-portal-header-overlay::before {
    border-color: var(--ips-blue, #263d88) transparent;
    border-style: solid;
    border-width: 51px 0 0 45px;
    content: "";
    left: -45px;
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}
.nscc-ips-portal-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 0.75rem 1rem;
    align-items: flex-start;
    padding: 0.85rem 1.25rem 1rem;
    position: relative;
    z-index: 1;
}
.nscc-ips-portal-logo-col {
    min-width: 0;
}
.nscc-ips-portal-header-right {
    min-width: 0;
}
.nscc-ips-portal-header-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
    color: #ffffff;
    font-size: 0.72rem;
    line-height: 1.35;
    min-height: 50px;
    padding-top: 11px;
}
.nscc-ips-portal-header-top-cell {
    text-align: center;
}
.nscc-ips-portal-header-top-cell p {
    margin: 0;
}
.nscc-ips-portal-header-top a {
    color: #ffffff;
    text-decoration: none;
}
.nscc-ips-portal-header-top a:hover,
.nscc-ips-portal-header-top a:focus-visible {
    color: var(--ips-orange, #f26723);
    text-decoration: underline;
}
.nscc-ips-portal-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.55rem;
}
@media (max-width: 900px) {
    .nscc-ips-portal-header-inner {
        grid-template-columns: 1fr;
    }
    .nscc-ips-portal-header-overlay {
        display: none;
    }
    .nscc-ips-portal-header-top {
        background: var(--ips-blue, #263d88);
        border-radius: 4px;
        padding: 0.65rem 0.85rem;
        min-height: 0;
    }
    .nscc-ips-portal-header-actions {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }
}
@media (max-width: 720px) {
    .nscc-ips-portal-header-top {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .nscc-ips-portal-header-top-cell {
        text-align: left;
    }
}
.nscc-ips-portal-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.nscc-ips-portal-logo {
    max-height: 52px;
    width: auto;
    flex: 0 0 auto;
}
.nscc-ips-portal-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.nscc-ips-portal-company-name {
    font-family: var(--ips-font-head);
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ips-blue, #263d88);
    line-height: 1.15;
}
.nscc-ips-portal-portal-label {
    font-family: var(--ips-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ips-muted, #555);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nscc-ips-portal-customer-name {
    font-family: var(--ips-font-head);
    font-size: clamp(1.05rem, 2.6vw, 1.45rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ips-text-dark, #303030);
    line-height: 1.2;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--ips-orange, #f26723);
    max-width: 22rem;
}
.nscc-ips-portal-website-link {
    font-family: var(--ips-font-head);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ips-orange, #f26723);
    border: 2px solid var(--ips-orange, #f26723);
    padding: 0.35rem 0.75rem;
    border-radius: 2px;
    white-space: nowrap;
}
.nscc-ips-portal-website-link:hover,
.nscc-ips-portal-website-link:focus-visible {
    background: var(--ips-orange, #f26723);
    color: #ffffff;
}
.nscc-ips-portal-content {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem 1.25rem 1.5rem;
}
.nscc-ips-portal-content .nscc-portal-shell {
    background: var(--bg-card);
    border: 1px solid rgba(38, 61, 136, 0.12);
    border-top: 3px solid var(--ips-orange, #f26723);
    border-radius: 0 0 6px 6px;
    padding: 1rem 1.15rem 1.5rem;
    box-shadow: 0 1px 10px rgba(15, 23, 42, 0.06);
}
html.nscc-ips-portal-theme .nscc-portal-shell h1,
html.nscc-ips-portal-theme .nscc-portal-shell h2,
html.nscc-ips-portal-theme .nscc-portal-shell h3 {
    font-family: var(--ips-font-head) !important;
    color: var(--ips-text-dark, #303030) !important;
    -webkit-text-fill-color: var(--ips-text-dark, #303030) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
html.nscc-ips-portal-theme .nscc-portal-shell h1 {
    font-size: 1.25rem;
    font-weight: 600;
}
html.nscc-ips-portal-theme .nscc-portal-back a,
html.nscc-ips-portal-theme .nscc-portal-link,
html.nscc-ips-portal-theme .nscc-linkish,
html.nscc-ips-portal-theme .nscc-portal-shell a.nscc-portal-link {
    color: var(--ips-blue, #263d88) !important;
    -webkit-text-fill-color: var(--ips-blue, #263d88) !important;
}
html.nscc-ips-portal-theme .nscc-portal-back a:hover,
html.nscc-ips-portal-theme .nscc-portal-link:hover {
    color: var(--ips-orange, #f26723) !important;
    -webkit-text-fill-color: var(--ips-orange, #f26723) !important;
}
html.nscc-ips-portal-theme .btn-primary,
html.nscc-ips-portal-theme .nscc-portal-pay-btn.btn-primary,
html.nscc-ips-portal-theme button.btn-primary {
    background: var(--ips-orange, #f26723) !important;
    border-color: var(--ips-orange, #f26723) !important;
    color: #ffffff !important;
}
html.nscc-ips-portal-theme .btn-primary:hover,
html.nscc-ips-portal-theme button.btn-primary:hover {
    background: #d9581c !important;
    border-color: #d9581c !important;
}
html.nscc-ips-portal-theme .nscc-portal-table th {
    background: var(--ips-blue, #263d88) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: var(--ips-font-head);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.68rem;
}
html.nscc-ips-portal-theme .nscc-finance-card {
    border-color: rgba(38, 61, 136, 0.18) !important;
}
html.nscc-ips-portal-theme .nscc-portal-pick,
html.nscc-ips-portal-theme button.nscc-portal-pick {
    border-color: rgba(38, 61, 136, 0.25) !important;
}
html.nscc-ips-portal-theme .nscc-portal-pick:hover {
    border-color: var(--ips-orange, #f26723) !important;
}
.nscc-ips-portal-site-footer {
    margin-top: 1.5rem;
}
.nscc-ips-portal-footer-top {
    background: #222222;
    color: #636c72;
}
.nscc-ips-portal-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 1.25rem;
}
.nscc-ips-portal-footer-col h3 {
    font-family: var(--ips-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #ffffff;
    margin: 0 0 0.65rem;
}
.nscc-ips-portal-footer-col p {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #636c72;
}
.nscc-ips-portal-footer-about {
    font-size: 0.8rem;
    line-height: 1.55;
    color: #636c72;
    margin: 0;
}
.nscc-ips-portal-footer-logos {
    margin-bottom: 0.65rem;
}
.nscc-ips-portal-footer-logos a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.nscc-ips-portal-footer-logo {
    max-width: 140px;
    height: auto;
}
.nscc-ips-portal-footer-badge {
    max-width: 72px;
    height: auto;
}
.nscc-ips-portal-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nscc-ips-portal-footer-links li {
    margin-bottom: 0.35rem;
}
.nscc-ips-portal-footer-links a {
    color: #636c72;
    text-decoration: none;
    font-size: 0.8rem;
}
.nscc-ips-portal-footer-links a:hover,
.nscc-ips-portal-footer-links a:focus-visible {
    color: #eeeeee;
}
.nscc-ips-portal-footer-newsletter {
    background: #333333;
    height: 35px;
    margin-top: 0.5rem;
    position: relative;
    max-width: 16rem;
}
.nscc-ips-portal-footer-newsletter input {
    background: transparent;
    border: none;
    color: #eeeeee;
    font-size: 0.78rem;
    height: 100%;
    left: 0;
    padding: 5px 10px;
    position: absolute;
    width: calc(100% - 40px);
    box-sizing: border-box;
}
.nscc-ips-portal-footer-newsletter input::placeholder {
    color: #999999;
}
.nscc-ips-portal-footer-newsletter button {
    background: var(--ips-orange, #f26723);
    border: none;
    color: #ffffff;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    cursor: pointer;
    font-size: 0.95rem;
}
.nscc-ips-portal-footer-newsletter button:hover {
    background: #464646;
}
.nscc-ips-portal-footer-copy {
    background: #171717;
    border-top: 1px solid #2b2b2b;
    color: #7f7f7f;
    padding: 1.1rem 1.25rem;
    text-align: center;
    font-size: 0.72rem;
    max-width: none;
    margin: 0;
}
.nscc-ips-portal-footer-copy p {
    margin: 0;
    color: #7f7f7f;
}
.nscc-ips-portal-footer-copy a {
    color: #ff7f41;
    text-decoration: none;
}
.nscc-ips-portal-footer-copy a:hover {
    text-decoration: underline;
}
html.nscc-ips-portal-theme .nscc-portal-shell .ips-doc-body th,
html.nscc-ips-portal-theme .nscc-portal-shell .ips-inv th {
    background: var(--ips-blue, #263d88) !important;
}
html.nscc-ips-portal-theme .nscc-portal-shell .ips-inv-head {
    border-bottom-color: var(--ips-blue, #263d88) !important;
}
html.nscc-ips-portal-theme body.dark-theme,
html.nscc-ips-portal-theme:root.dark,
:root.dark html.nscc-ips-portal-theme body {
    background: var(--ips-page-bg) !important;
    color: var(--ips-text) !important;
}
html.nscc-ips-portal-theme .nscc-portal-share-host {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.25rem 1.5rem;
}
.nscc-portal-share-host {
    padding: 0 1.25rem 1.5rem;
}
.nscc-portal-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-width: 36rem;
    margin: 0.35rem 0 1rem;
}
.nscc-portal-form--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem 0.85rem;
    max-width: none;
}
.nscc-portal-form-span {
    grid-column: 1 / -1;
}
.nscc-portal-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}
.nscc-portal-form input,
.nscc-portal-form select,
.nscc-portal-form textarea {
    font: inherit;
    font-weight: 400;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.15));
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    background: var(--bg-elevated, var(--bg-card));
}
.nscc-portal-form-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}
.nscc-portal-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.nscc-portal-pay-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.nscc-portal-pay-modal[hidden] {
    display: none !important;
}
.nscc-portal-pay-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.nscc-portal-pay-modal__panel {
    position: relative;
    z-index: 1;
    width: min(28rem, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 1.1rem 1.15rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.12));
    background: var(--bg-elevated, var(--bg-card));
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}
.nscc-portal-pay-modal__panel h2 {
    margin-top: 0;
}
.nscc-portal-pay-btn {
    white-space: nowrap;
}
.nscc-portal-search {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.75rem 0 0.35rem;
    max-width: 28rem;
}
.nscc-portal-search__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
}
.nscc-portal-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 8px;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font: inherit;
}
.nscc-portal-search__input:focus {
    outline: 2px solid var(--brand-light);
    outline-offset: 1px;
}
.nscc-emp-combined .nscc-emp-section-rule,
hr.nscc-emp-section-rule {
    border: 0;
    border-top: 2px solid var(--border, #d4d4d8);
    margin: 1.5rem 0;
}
.nscc-emp-combined h2 {
    margin: 0.25rem 0 0.45rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.nscc-emp-combined h3 {
    margin: 1rem 0 0.4rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.nscc-portal-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
    margin-top: 0.35rem;
}
.nscc-portal-pick,
button.nscc-portal-pick {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.nscc-portal-pick:hover,
.nscc-portal-pick:focus-visible {
    border-color: var(--nscc-line, #000000);
    filter: brightness(0.97);
    outline: none;
}
.nscc-portal-pick strong {
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}
.nscc-portal-pick span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}
.nscc-portal-table-wrap {
    overflow: auto;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
}
.nscc-portal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    color: var(--text-primary);
}
.nscc-portal-table th,
.nscc-portal-table td {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}
.nscc-portal-table th {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}
.nscc-portal-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.nscc-employee-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0 1rem;
}
.nscc-employee-tab {
    appearance: none;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
}
.nscc-employee-tab.is-active,
.nscc-employee-tab:hover,
.nscc-employee-tab:focus-visible {
    border-color: var(--nscc-line, #000000);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    outline: none;
}
.nscc-employee-portal-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.nscc-employee-portal-who {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}
.nscc-employee-form .nscc-ap-form-grid {
    margin-top: 0.5rem;
}
body.nscc-employee-portal:not(.nscc-employee-unlocked) #nscc-employee-portal-app {
    display: none !important;
}
body.nscc-employee-unlocked #nscc-auth-boot-splash {
    display: none !important;
}

/* ?? Mobile employee portal (field apps) ?? */
html.nscc-employee-portal-mobile,
body.nscc-employee-portal-mobile {
    height: 100%;
    overflow: hidden;
}
body.nscc-employee-portal-mobile .nscc-emp-mobile-app,
html.nscc-employee-portal-mobile .nscc-emp-mobile-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    overflow: hidden;
    background: var(--bg-page);
}
.nscc-emp-mobile-top {
    flex-shrink: 0;
    background: var(--bg-card);
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    padding: 0.55rem 0.75rem;
    padding-top: max(0.55rem, env(safe-area-inset-top));
}
.nscc-emp-mobile-top__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nscc-emp-mobile-back {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    border: var(--nscc-line-w, 1.5px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    background: var(--bg-raised);
    white-space: nowrap;
}
.nscc-emp-mobile-back--spacer { visibility: hidden; min-width: 3.2rem; }
.nscc-emp-mobile-top__title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.nscc-emp-mobile-top__title strong {
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}
.nscc-emp-mobile-top__title span {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nscc-emp-mobile-signout {
    appearance: none;
    border: var(--nscc-line-w, 1.5px) solid var(--nscc-line, #000000);
    background: var(--bg-raised);
    border-radius: 8px;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    cursor: pointer;
}
.nscc-emp-mobile-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.nscc-emp-mobile-root,
.nscc-emp-mobile-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.nscc-emp-mobile-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0.85rem 1rem;
}
.nscc-employee-portal-mobile .nscc-portal-shell {
    padding: 0;
    max-width: none;
}
.nscc-employee-portal-mobile .nscc-portal-shell h1 {
    font-size: 1.25rem;
    margin: 0 0 0.35rem;
}
.nscc-employee-portal-mobile .nscc-portal-lead {
    font-size: 0.8rem;
    margin-bottom: 0.85rem;
}
.nscc-emp-mobile-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.nscc-emp-mobile-cards .nscc-finance-card:last-child {
    grid-column: 1 / -1;
}
.nscc-emp-mobile-form-grid {
    display: flex !important;
    flex-direction: column;
    gap: 0.65rem;
}
.nscc-emp-mobile-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.nscc-emp-mobile-form-grid input,
.nscc-emp-mobile-form-grid select {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
    padding: 0.55rem 0.65rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    box-sizing: border-box;
}
.nscc-emp-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.85rem;
}
.nscc-emp-mobile-stub-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.nscc-emp-mobile-stub {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 10px;
    background: var(--bg-card);
    padding: 0.75rem;
}
.nscc-emp-mobile-stub__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.nscc-emp-mobile-stub__head strong { font-size: 0.95rem; }
.nscc-emp-mobile-stub__head span {
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.nscc-emp-mobile-stub__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.65rem;
}
.nscc-emp-mobile-tabs.nscc-employee-tabs {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin: 0;
    padding: 0.35rem 0.25rem;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
    border-top: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    background: var(--bg-card);
}
.nscc-emp-mobile-tabs .nscc-employee-tab {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 0.45rem 0.15rem;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}
.nscc-emp-mobile-tabs .nscc-employee-tab.is-active {
    color: var(--text-primary);
    background: var(--bg-sunken);
    border: var(--nscc-line-w, 1.5px) solid var(--nscc-line, #000000);
}
.nscc-field-portal-btn {
    display: block;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    font-weight: 800;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 10px;
    background: var(--bg-raised);
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
}
.nscc-field-portal-btn:active { transform: scale(0.98); }

.nscc-portal-shell .ips-inv {
    position: relative;
    max-width: 7.8in;
    margin: 0.75rem 0 1.5rem;
    background: #fff;
    color: #14213d;
    padding: 0.6in 0.65in;
    border-radius: 8px;
    box-shadow: 0 2px 18px rgba(15, 23, 42, 0.12);
}
.nscc-portal-shell .ips-inv-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 3px solid #18181b;
    padding-bottom: 0.75rem;
}
.nscc-portal-shell .ips-inv-logo { max-height: 54px; width: auto; }
.nscc-portal-shell .ips-inv-company {
    text-align: right;
    font-size: 0.72rem;
    color: #475569;
    line-height: 1.45;
}
.nscc-portal-shell .ips-inv-company-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #14213d;
}
.nscc-portal-shell .ips-doc-title {
    margin: 0.85rem 0 0.35rem;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    color: #18181b;
    text-transform: uppercase;
}
.nscc-portal-shell .ips-doc-subtitle {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    color: #64748b;
}
.nscc-portal-shell .ips-doc-body table,
.nscc-portal-shell .ips-inv table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.nscc-portal-shell .ips-doc-body th,
.nscc-portal-shell .ips-doc-body td,
.nscc-portal-shell .ips-inv th,
.nscc-portal-shell .ips-inv td {
    border: 1px solid #e2e8f0;
    padding: 6px 8px;
    text-align: left;
}
.nscc-portal-shell .ips-doc-body th,
.nscc-portal-shell .ips-inv th {
    background: #18181b;
    color: #fff;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nscc-portal-shell .ips-inv .num,
.nscc-portal-shell .ips-inv .c-amt {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.nscc-portal-shell .ips-inv-meta td { border: 0; padding: 0.1rem 0.3rem; }
.nscc-portal-shell .ips-inv-meta td:first-child {
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
    text-align: right;
}
.nscc-portal-shell .ips-inv-meta td:last-child { font-weight: 700; text-align: right; }
.nscc-portal-doc-parties {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
}
.nscc-portal-doc-label {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.25rem;
}
.nscc-portal-doc-right { text-align: right; }
.nscc-portal-shell .ips-inv-foot {
    margin-top: 1.25rem;
    padding-top: 0.6rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.66rem;
    color: #64748b;
}

@media print {
    html.nscc-left-nav #nscc-app-sidebar {
        display: none !important;
    }
    html.nscc-left-nav .main-content {
        display: flex !important;
        grid-template-columns: none !important;
    }
}
body[data-active-top-tab="back-office"] #new-trip-btn {
    display: none !important;
}
/* Left-nav: LIVE ticker always visible on every menu (including Accounting). */
html.nscc-left-nav .top-header {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}
html.nscc-left-nav .nscc-chrome-brand-row {
    order: 0;
    flex-shrink: 0;
}
/* Header: color legend, brand chrome, then LIVE ticker (no Accounting/HR product row). */
html.nscc-left-nav .top-header > *:not(.nscc-chrome-brand-row):not(.dispatch-ticker):not(#color-legend):not(.nscc-color-legend) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
}
html.nscc-left-nav #color-legend,
html.nscc-left-nav .nscc-color-legend {
    display: flex !important;
    order: -1;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.28rem 0.65rem !important;
    overflow: visible !important;
    border: none !important;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    background: var(--ticker-bar-gray, #d1d5db) !important;
    background-color: var(--ticker-bar-gray, #d1d5db) !important;
    color: var(--ticker-bar-ink, #e4e4e7) !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html.nscc-left-nav .dispatch-ticker,
html.nscc-left-nav body[data-active-top-tab="back-office"] .dispatch-ticker,
html.nscc-left-nav.nscc-finance-shell .dispatch-ticker,
html.nscc-finance-shell.nscc-left-nav .dispatch-ticker,
html.nscc-left-nav.nscc-ahp-bo-fs .dispatch-ticker,
html.nscc-finance-shell .dispatch-ticker,
html.nscc-ahp-bo-fs .dispatch-ticker,
body.nscc-finance-shell .dispatch-ticker,
body[data-active-top-tab="back-office"] .dispatch-ticker {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    height: var(--ticker-bar-height, 2.4rem) !important;
    min-height: var(--ticker-bar-height, 2.4rem) !important;
    max-height: var(--ticker-bar-height, 2.4rem) !important;
    opacity: 1 !important;
    order: -1; /* LIVE ticker at the very top, above the brand banner */
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
/* Page titles park into chrome above folder tabs (see nsccSyncChromePageTitle) */
.nscc-page-title-placeholder {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
html.nscc-left-nav body[data-active-top-tab="back-office"] #live-ops-container,
html.nscc-left-nav #live-ops-container {
    padding-top: 0 !important;
}
html.nscc-left-nav .master-data-shell--finance,
html.nscc-left-nav #back-office-payroll-panel.nscc-erp-panel {
    padding-top: 0.15rem !important;
    gap: 0.15rem !important;
}
/* Accounting Overview (and other tabs) must scroll inside the constrained finance shell. */
#accounting-view .master-data-shell--finance > .nscc-finance-panel,
#accounting-view .master-data-shell--finance > .nscc-erp-tab-panel,
#ops-field-view .master-data-shell--ops > .nscc-finance-panel,
#ops-field-view .master-data-shell--ops > .nscc-erp-tab-panel,
#back-office-payroll-panel > .nscc-finance-panel,
#back-office-payroll-panel > .nscc-erp-tab-panel,
#back-office-view #back-office-payroll-panel .nscc-erp-tab-panel.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}
/* Payroll / HR mount: contain height; tab body scrolls (do not clip Overview). */
html.nscc-left-nav #back-office-view.view-section.active:not(.nscc-view-fs),
html.nscc-finance-shell #back-office-view.view-section.active:not(.nscc-view-fs) {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
#back-office-payroll-mount.back-office-payroll-mount,
#back-office-view .back-office-payroll-mount {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}
#back-office-payroll-panel.nscc-erp-panel {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
/* Keep Accounting Overview usable when folder tabs wrap to two rows */
html.nscc-left-nav #accounting-view.view-section.active:not(.nscc-view-fs) {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
html.nscc-left-nav #accounting-view .master-data-shell--finance {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
html.nscc-left-nav #accounting-view .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav #back-office-payroll-panel > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav #ops-field-view .nscc-erp-tabs.nscc-tab-groups {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
}
/* Left-nav + finance layout: in-page folder tabs hide once parked under #nscc-chrome-folder-tabs */
html.nscc-left-nav.nscc-ahp-bo-fs body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-ahp-bo-fs body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-ahp-bo-fs body.nscc-bo-chrome-tabs #back-office-payroll-panel > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #back-office-payroll-panel > .nscc-erp-tabs.nscc-tab-groups {
    display: none !important;
}
/*
 * Layered file-folder tabs (Accounting / Payroll / HR / Ops / Dispatch / ?).
 * Active tab stays raised + highlighted and visually joins the panel below.
 * Do NOT put display:flex !important on #accounting-view strips here ? that
 * fights chrome parking (in-page tabs must stay display:none once parked).
 */
.nscc-tab-groups,
.nscc-erp-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-start;
    gap: 0 0.55rem;
    row-gap: 0;
    margin: 0;
    padding: 0.35rem 0.45rem 0;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    overflow: visible;
    max-width: 100%;
    flex: 0 0 auto;
    background: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5));
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
}
html.nscc-left-nav body[data-active-top-tab="back-office"] #accounting-view .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav body[data-active-top-tab="back-office"] #executive-dashboard-view .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav body[data-active-top-tab="back-office"] #back-office-payroll-panel .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav body[data-active-top-tab="back-office"] #ops-field-view .nscc-erp-tabs.nscc-tab-groups,
html.nscc-finance-shell body[data-active-top-tab="back-office"] #accounting-view .nscc-erp-tabs.nscc-tab-groups,
html.nscc-finance-shell body[data-active-top-tab="back-office"] #back-office-payroll-panel .nscc-erp-tabs.nscc-tab-groups,
html.nscc-finance-shell body[data-active-top-tab="back-office"] #ops-field-view .nscc-erp-tabs.nscc-tab-groups {
    /* Visual strip only ? display controlled by park/hide rules below */
    background: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5));
    padding: 0.35rem 0.45rem 0;
    border-radius: 10px 10px 0 0;
}
.nscc-tab-group {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.28rem;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.nscc-tab-group__label {
    display: inline-block !important;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 0 0.28rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--chrome-folder-label, #6e5843);
    white-space: nowrap;
    line-height: 1;
    align-self: flex-end;
}
.nscc-tab-group__tabs {
    display: flex;
    flex-wrap: wrap;
    /* Tighter gap between tabs so more fit before wrapping. */
    gap: 0.2rem;
    max-width: 100%;
    align-items: flex-end;
    padding-left: 0;
    margin: 0;
}
/* Folder-tab buttons ? fixed 2-line height so every tab matches */
.nscc-erp-tabs .nscc-erp-tab-btn,
.nscc-tab-groups .nscc-erp-tab-btn {
    /* Two text-rows tall: labels wrap to two lines so tabs share a uniform height. */
    white-space: normal;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin: 0 0 -2px 0;
    /* Tighter horizontal padding so more tabs fit across the strip before they
       wrap to a second row. Matt 2026-09-14: "make the padding in all of the
       folder tab in the entire system tighter so more tabs can fit." */
    padding: 0.22rem 0.42rem 0.28rem;
    min-height: var(--nscc-folder-tab-h, 2.55rem);
    /* Two-line max: wide enough that even the longest labels ("Trip & Shift
       Costing") wrap to TWO lines, not three, and clamp overflow so a tab can
       never grow to a third row. */
    max-width: 6.6rem;
    max-height: var(--nscc-folder-tab-h, 2.55rem);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--chrome-folder);
    color: var(--chrome-folder-ink);
    font-weight: 700;
    /* Matt 2026-09-12: tab font trimmed 0.72→0.68rem across every folder-tab
       surface. Leadership was reading noticeably larger because its longer
       labels ("Revenue by category", "Management pack") wrapped to two lines,
       and the older 0.72rem read heavier alongside the KPI card labels. */
    font-size: 0.68rem;
    line-height: 1.15;
    box-shadow: none;
    transform: translateY(2px);
    cursor: pointer;
    box-sizing: border-box;
}
.nscc-erp-tabs .nscc-erp-tab-btn:first-child,
.nscc-tab-group__tabs .nscc-erp-tab-btn:first-child {
    margin-left: 0;
}
.nscc-erp-tabs .nscc-erp-tab-btn:hover,
.nscc-tab-groups .nscc-erp-tab-btn:hover {
    z-index: 2;
    background: var(--bg-raised);
    color: var(--chrome-folder-ink);
    transform: translateY(1px);
}
.nscc-erp-tabs .nscc-erp-tab-btn.active,
.nscc-tab-groups .nscc-erp-tab-btn.active,
.nscc-erp-tabs .nscc-erp-tab-btn[aria-selected="true"],
.nscc-tab-groups .nscc-erp-tab-btn[aria-selected="true"],
html.nscc-left-nav .nscc-erp-tabs .nscc-erp-tab-btn.active,
html.nscc-finance-shell .nscc-erp-tabs .nscc-erp-tab-btn.active {
    z-index: 4;
    color: var(--text-inverse) !important;
    background: var(--chrome-folder-active) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card));
    min-height: var(--nscc-folder-tab-h, 2.55rem);
    padding-bottom: 0.35rem;
    transform: translateY(0);
    box-shadow: none;
}
/* Mode group ? Easy/Advanced toggle at end of Accounting / HR / Payroll strips */
.nscc-tab-group--mode {
    margin-left: 0.4rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border, #d4d4d8);
    flex: 0 0 auto;
}
.nscc-tab-group--mode .nscc-tab-group__label {
    color: var(--text-muted, #71717a);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.nscc-erp-tabs .nscc-erp-tab-btn--mode,
.nscc-tab-groups .nscc-erp-tab-btn--mode,
html.nscc-left-nav .nscc-erp-tabs .nscc-erp-tab-btn--mode,
html.nscc-finance-shell .nscc-erp-tabs .nscc-erp-tab-btn--mode {
    background: transparent !important;
    color: var(--text-secondary, #3f3f46) !important;
    border: 1.5px dashed #52525b !important;
    border-bottom: none !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none !important;
    transform: translateY(2px);
}
.nscc-erp-tabs .nscc-erp-tab-btn--mode:hover,
.nscc-tab-groups .nscc-erp-tab-btn--mode:hover {
    background: var(--bg-sunken, #f4f4f5) !important;
    color: var(--text-primary, #18181b) !important;
    border-style: solid !important;
    border-color: #3f3f46 !important;
    border-bottom: none !important;
    transform: translateY(1px);
}
.nscc-erp-tabs .nscc-erp-tab-btn--mode.active,
.nscc-tab-groups .nscc-erp-tab-btn--mode.active,
.nscc-erp-tabs .nscc-erp-tab-btn--mode[aria-selected="true"],
.nscc-tab-groups .nscc-erp-tab-btn--mode[aria-selected="true"] {
    /* Mode toggles are actions, not workspace destinations */
    background: transparent !important;
    color: var(--text-secondary, #3f3f46) !important;
    border: 1.5px dashed #52525b !important;
    border-bottom: none !important;
    transform: translateY(2px);
}
/* Folder body under the selected tab ? same on Accounting / Payroll / HR / Ops / Executive */
.nscc-erp-tab-panel.active,
.nscc-finance-panel.nscc-erp-tab-panel,
#accounting-view .nscc-erp-tab-panel,
#ops-field-view .nscc-erp-tab-panel,
#back-office-payroll-panel .nscc-erp-tab-panel,
#executive-dashboard-view .nscc-erp-tab-panel,
.exec-dash-panel {
    /* No full-window box outline around the sub-folder screen — it walled the
       whole screen in a border. The folder tabs still read as tabs from their own
       shape; the panel below is just open screen space now. */
    border: none;
    border-radius: 0;
    background: var(--chrome-folder-panel-bg, var(--bg-card));
    margin-top: 0;
    padding: 0.85rem 0 1rem;
}
/* Dispatch / Planner / Support / Master top sub-nav ? same layered folders */
html.nscc-left-nav .sub-nav-panel .sub-nav-scroll,
.sub-nav-panel .sub-nav-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    align-content: flex-start !important;
    gap: 0 0.55rem !important;
    row-gap: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    max-width: 100%;
}
/* Folder strips: Dispatch sub-nav buttons match Accounting nscc-erp-tab-btn */
.nscc-tab-groups .sub-nav-btn,
.sub-nav-panel .nscc-tab-groups .sub-nav-btn,
#live-ops-header .nscc-erp-tab-btn,
#planner-header .nscc-erp-tab-btn {
    white-space: normal;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin: 0 0 -1px 0;
    padding: 0.22rem 0.65rem 0.28rem;
    min-height: var(--nscc-folder-tab-h, 2.55rem);
    max-width: 5.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--chrome-folder);
    color: var(--chrome-folder-ink);
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1.15;
    box-shadow: none;
    transform: translateY(2px);
    cursor: pointer;
    box-sizing: border-box;
}
.nscc-tab-groups .nscc-tab-group__tabs > .sub-nav-btn:first-child,
#live-ops-header .nscc-tab-group__tabs > .nscc-erp-tab-btn:first-child,
#planner-header .nscc-tab-group__tabs > .nscc-erp-tab-btn:first-child {
    margin-left: 0;
}
.nscc-tab-groups .sub-nav-btn:hover,
#live-ops-header .nscc-erp-tab-btn:hover,
#planner-header .nscc-erp-tab-btn:hover {
    z-index: 2;
    background: var(--bg-raised);
    color: var(--chrome-folder-ink);
    transform: translateY(1px);
}
.nscc-tab-groups .sub-nav-btn.active,
.nscc-tab-groups .sub-nav-btn[aria-selected="true"],
#live-ops-header .nscc-erp-tab-btn.active,
#planner-header .nscc-erp-tab-btn.active,
#live-ops-header .nscc-erp-tab-btn[aria-selected="true"],
#planner-header .nscc-erp-tab-btn[aria-selected="true"] {
    z-index: 4;
    color: var(--chrome-folder-active-ink, #f7f1e4) !important;
    background: var(--chrome-folder-active) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card)) !important;
    padding-bottom: 0.35rem;
    transform: translateY(0);
    box-shadow: none;
}
/* Folder strips use stone chrome tokens; trip-status colors stay on ops chips */
html.nscc-left-nav .nscc-tab-groups .sub-nav-btn[data-view="patrol-view"].active,
html.nscc-left-nav .nscc-tab-groups .nav-btn[data-view="patrol-view"].active,
html.nscc-left-nav #live-ops-header .sub-nav-btn[data-view="patrol-view"].active {
    background: var(--chrome-folder-active) !important;
    color: var(--chrome-folder-active-ink, #f7f1e4) !important;
}
#form-management-view.view-section.active:not(.nscc-view-fs) {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    overflow: hidden;
}
#form-management-view .nscc-forms-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden;
}
#form-management-view .nscc-forms-panel.active {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
#form-management-view .nscc-forms-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 0.35rem;
}
html.nscc-left-nav body[data-active-top-tab="form-management"] #form-management-view .nscc-erp-tabs.nscc-tab-groups {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.nscc-acct-jump {
    flex-wrap: wrap;
    gap: 0.35rem;
}
.nscc-acct-overview-jumps {
    margin: 0 0 0.85rem;
    align-items: center;
}
/* Queue chip that rides on the right edge of a jump button. Sizes down and
   loses the badge's default heavy 4px border so it doesn't dominate the label. */
.nscc-acct-jump__chip {
    margin-left: 0.35rem;
    padding: 0.05em 0.45em;
    font-size: 0.62rem;
    border-width: 2px;
    line-height: 1.25;
    vertical-align: baseline;
}
/* Overview landing screens ? title card matches Master Data / chrome titles */
.nscc-overview-intro {
    margin: 0 0 0.85rem;
    max-width: none;
}
.nscc-overview-intro__title {
    /* Border / type from unified screen title rules above */
    cursor: default;
}
.nscc-overview-intro__lead {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary, #475569);
}
.nscc-overview-guide {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    background: var(--bg-raised, #fafafa);
    max-width: 52rem;
}
.nscc-overview-guide strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.nscc-overview-guide ol {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-secondary, #475569);
    font-size: 0.88rem;
    line-height: 1.45;
}
.nscc-overview-guide li + li {
    margin-top: 0.25rem;
}
.nscc-overview-section {
    margin: 0 0 1.15rem;
    min-width: 0;
}
.nscc-overview-section > .nscc-section-heading {
    margin: 0 0 0.45rem;
}
.nscc-overview-kpi__hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-muted, #64748b);
}

/* When a KPI card IS its own button (data-compliance-tab / data-jump), don't
 * let native <button> styling dominate the box. Card content (label + value)
 * stays the visual weight; a small arrow glyph anchored bottom-right is the
 * click affordance. Matt 2026-09-09: "in the overview and dashboard screens
 * that have boxes with buttons that take up most of the area in the box
 * change the buttons to appropriate small icons in the bottom right of the
 * box." */
button.nscc-finance-card,
button.nscc-overview-kpi {
    position: relative;
    text-align: left;
    font: inherit;
    color: inherit;
    /* Transparent so cards blend with the theme background instead of always
       reading as white on grey. Matt 2026-09-12. */
    background: transparent;
    border: 1px solid var(--border, #e2e8f0);
    padding-right: 2rem; /* room for the corner icon */
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
button.nscc-finance-card:hover,
button.nscc-overview-kpi:hover {
    /* Hover lifts a touch with a tinted overlay that still lets the theme
       show through — no bright-white flash on hover in dark themes. */
    background: color-mix(in srgb, var(--text-primary, currentColor) 6%, transparent);
    border-color: var(--brand-light, var(--brand));
}
button.nscc-finance-card:focus-visible,
button.nscc-overview-kpi:focus-visible {
    outline: 2px solid var(--border-focus, var(--brand-light));
    outline-offset: 2px;
}
button.nscc-finance-card::after,
button.nscc-overview-kpi::after {
    content: "→";
    position: absolute;
    bottom: 0.4rem;
    right: 0.55rem;
    width: 1.2rem; height: 1.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 800; line-height: 1;
    color: var(--brand, currentColor);
    background: var(--bg-raised, transparent);
    border: 1px solid var(--border, transparent);
    border-radius: 999px;
    opacity: 0.75;
    transition: opacity 0.12s ease, transform 0.12s ease;
}
button.nscc-finance-card:hover::after,
button.nscc-overview-kpi:hover::after {
    opacity: 1;
    transform: translateX(2px);
}
.nscc-overview-next__group {
    margin: 0.65rem 0 0.85rem;
}
.nscc-overview-next__title {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.nscc-hr-hub {
    align-items: stretch;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 0.75rem !important;
    min-width: 0;
    width: 100%;
}
.nscc-hr-hub-card.nscc-finance-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.65rem;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 10px;
    padding: 0.85rem 0.9rem 0.75rem;
    min-width: 0;
    max-width: 100%;
    min-height: 9.5rem;
    box-shadow: none;
}
.nscc-hr-hub-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.nscc-hr-hub-card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.nscc-hr-hub-card__label {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary, #0f172a);
}

/* HR regulatory deadline reminders (Filings tab) */
.nscc-reg-deadlines-section {
    margin-bottom: 1.25rem;
}
.nscc-reg-deadlines-section .nscc-finance-cards {
    margin: 0.75rem 0 1rem;
}
.nscc-reg-deadlines-table .nscc-reg-reminder-date {
    min-width: 9.5rem;
    font: inherit;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px;
    background: var(--bg-card);
}
.nscc-reg-deadline-row.nscc-reg-deadline--due-soon td {
    background: rgba(251, 191, 36, 0.12);
}
.nscc-reg-deadline-row.nscc-reg-deadline--overdue td {
    background: rgba(239, 68, 68, 0.1);
}
.nscc-reg-deadline-row.nscc-reg-deadline--filed td {
    opacity: 0.72;
}
.nscc-reg-deadline-actions {
    white-space: nowrap;
}
.nscc-hr-hub-card__count {
    flex: 0 0 auto;
    min-width: 1.6rem;
    padding: 0.12rem 0.45rem;
    border-radius: 8px;
    background: var(--bg-sunken, #e4e4e7);
    color: var(--text-primary, #18181b);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
}
:root.dark .nscc-hr-hub-card__count,
body.dark-theme .nscc-hr-hub-card__count {
    background: var(--table-row-selected, #3f3f46);
    color: var(--nav-selected-ink, #fafafa);
}
.nscc-hr-hub-card__desc {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 550;
    line-height: 1.4;
    color: var(--text-secondary, #475569);
}
.nscc-hr-hub-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.15rem;
}
.nscc-hr-hub-card__actions .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
/* HR Overview: comparison table + selected-state detail (StateCheck-style) */
.nscc-hr-compliance {
    margin-top: 0.85rem;
    min-width: 0;
}
.nscc-hr-compliance__header {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}
.nscc-hr-compliance__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 0.85rem;
}
.nscc-hr-compliance__header .nscc-section-heading {
    margin: 0;
}
.nscc-hr-compliance__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.nscc-hr-compliance-kpis {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important;
    margin: 0 !important;
}
.nscc-compliance-pulse-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.5rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 8px;
    background: var(--bg-sunken, #f1f5f9);
    font-size: 0.8rem;
    font-weight: 700;
}
.nscc-compliance-pulse-strip__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}
.nscc-hr-pane-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.nscc-hr-pane-label span {
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary, #64748b);
}
.nscc-hr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
    gap: 0.85rem;
    align-items: start;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.nscc-hr-state-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    background: var(--bg-card, #fff);
    max-height: min(68vh, 34rem);
    overflow: hidden;
}
.nscc-hr-state-table-wrap {
    min-width: 0;
    flex: 1 1 auto;
    overflow: auto;
    max-height: none;
    border: none;
    border-radius: 0;
    background: transparent;
}
.nscc-hr-state-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 0.75rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border, #e4e4e7);
    background: var(--bg-sunken, #e4e4e7);
    flex: 0 0 auto;
}
.nscc-hr-state-filter {
    margin: 0;
    min-width: 0;
}
.nscc-hr-state-filter input {
    width: min(14rem, 100%);
    min-width: 9rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    border-radius: 6px;
}
.nscc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.nscc-hr-state-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.nscc-hr-state-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-sunken, #e4e4e7);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    color: var(--text-muted, #64748b);
    padding: 0.55rem 0.65rem;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    white-space: nowrap;
}
.nscc-hr-state-table td {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border, #e4e4e7);
    font-size: 0.8rem;
    vertical-align: middle;
}
.nscc-hr-state-row {
    cursor: pointer;
}
.nscc-hr-state-row:hover {
    background: var(--table-row-hover, var(--info-wash, #f4f4f5));
}
.nscc-hr-state-row.is-selected {
    background: var(--table-row-selected, #e5e7eb);
    box-shadow: inset 3px 0 0 var(--nav-selected-bar, #27272a);
}
.nscc-hr-state-row:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: -2px;
}
.nscc-hr-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    background: #0f172a;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.nscc-hr-state-badge--lg {
    min-width: 2.4rem;
    font-size: 0.78rem;
    margin-right: 0.45rem;
}
.nscc-hr-state-name {
    font-weight: 650;
    color: var(--text-primary, #0f172a);
}
.nscc-hr-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nscc-hr-leave-chip {
    display: inline-flex;
    align-items: center;
    max-width: 11rem;
    padding: 0.12rem 0.45rem;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--border, #d4d4d8);
    background: var(--bg-card);
    color: var(--text-secondary, #334155);
}
.nscc-hr-leave-chip--good {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}
.nscc-hr-leave-chip--info {
    background: var(--info-wash, #f4f4f5);
    border-color: var(--info-wash-border, #a1a1aa);
    color: var(--info-wash-ink, #27272a);
}
.nscc-hr-leave-chip--muted {
    background: var(--bg-sunken, #fafafa);
    color: var(--text-muted, #64748b);
}
.nscc-hr-table-hint {
    margin: 0;
    padding: 0.45rem 0.65rem 0.55rem;
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    border-top: 1px solid var(--border, #e4e4e7);
}
.nscc-hr-reg-detail {
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    max-height: min(68vh, 34rem);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    padding: 0.65rem 0.85rem 0.9rem;
    background: var(--bg-sunken, #e4e4e7);
    box-sizing: border-box;
}
.nscc-hr-reg-detail > .nscc-hr-pane-label {
    margin-bottom: 0.45rem;
}
.nscc-hr-reg-detail__head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
}
.nscc-hr-reg-detail__head > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.nscc-hr-reg-detail__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.nscc-hr-reg-detail__agency,
.nscc-hr-reg-detail__meta {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-secondary, #475569);
}
.nscc-hr-topic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}
.nscc-hr-topic {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border, #e4e4e7);
}
.nscc-hr-topic__label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #64748b);
}
.nscc-hr-topic__value {
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.nscc-hr-reg-detail__filings-title {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nscc-hr-filing-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.nscc-hr-filing-list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border, #e4e4e7);
    font-size: 0.78rem;
}
.nscc-hr-filing-list li span {
    color: var(--text-secondary, #475569);
    font-size: 0.72rem;
}
.nscc-hr-reg-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Visual org chart — hairline borders, soft depth, hue-per-person avatars,
   segmented controls, subtle grid backdrop; light default, dark override. */
.nscc-org-shell {
    --nscc-org-accent: #4f46e5;
    --nscc-org-accent-soft: rgba(79, 70, 229, 0.12);
    --nscc-org-panel-bg: #f8fafc;
    --nscc-org-panel-border: rgba(15, 23, 42, 0.08);
    --nscc-org-panel-title: #0f172a;
    --nscc-org-kpi-bg: #ffffff;
    --nscc-org-kpi-border: rgba(15, 23, 42, 0.08);
    --nscc-org-kpi-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    --nscc-org-kpi-label: #64748b;
    --nscc-org-kpi-value: #0f172a;
    --nscc-org-seg-bg: #f1f5f9;
    --nscc-org-seg-border: rgba(15, 23, 42, 0.08);
    --nscc-org-seg-ink: #475569;
    --nscc-org-seg-active-bg: #0f172a;
    --nscc-org-seg-active-ink: #f8fafc;
    --nscc-org-card-bg: #ffffff;
    --nscc-org-card-border: rgba(15, 23, 42, 0.1);
    --nscc-org-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
    --nscc-org-card-shadow-hover: 0 4px 8px rgba(15, 23, 42, 0.08), 0 12px 24px rgba(15, 23, 42, 0.08);
    --nscc-org-card-name: #0f172a;
    --nscc-org-card-title: #475569;
    --nscc-org-card-meta: #64748b;
    --nscc-org-line: #cbd5e1;
    --nscc-org-empty-ink: #64748b;
    --nscc-org-dir-bg: #ffffff;
    --nscc-org-dir-border: rgba(15, 23, 42, 0.08);
    --nscc-org-dir-ink: #0f172a;
    --nscc-org-chip-bg: #f1f5f9;
    --nscc-org-chip-border: rgba(15, 23, 42, 0.06);
    --nscc-org-chip-ink: #475569;
    --nscc-org-chip-lead-bg: #ede9fe;
    --nscc-org-chip-lead-border: rgba(139, 92, 246, 0.25);
    --nscc-org-chip-lead-ink: #6d28d9;
    --nscc-org-ctrl-bg: #ffffff;
    --nscc-org-ctrl-border: rgba(15, 23, 42, 0.08);
    --nscc-org-ctrl-ink: #334155;
    --nscc-org-ctrl-hover-bg: #f1f5f9;
    --nscc-org-avatar-ring: #ffffff;
    --nscc-org-drop-glow: #22c55e;
    --nscc-org-viewport-bg: #fbfcfe;
    --nscc-org-viewport-grid: radial-gradient(circle, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
}
:root.dark .nscc-org-shell,
body.dark-theme .nscc-org-shell {
    --nscc-org-accent: #818cf8;
    --nscc-org-accent-soft: rgba(129, 140, 248, 0.18);
    --nscc-org-panel-bg:
        radial-gradient(ellipse at 50% -10%, rgba(129, 140, 248, 0.08), transparent 55%),
        #0b1120;
    --nscc-org-panel-border: rgba(148, 163, 184, 0.15);
    --nscc-org-panel-title: #f1f5f9;
    --nscc-org-kpi-bg: rgba(15, 23, 42, 0.6);
    --nscc-org-kpi-border: rgba(148, 163, 184, 0.15);
    --nscc-org-kpi-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --nscc-org-kpi-label: #94a3b8;
    --nscc-org-kpi-value: #f8fafc;
    --nscc-org-seg-bg: rgba(15, 23, 42, 0.7);
    --nscc-org-seg-border: rgba(148, 163, 184, 0.18);
    --nscc-org-seg-ink: #94a3b8;
    --nscc-org-seg-active-bg: #f8fafc;
    --nscc-org-seg-active-ink: #0f172a;
    --nscc-org-card-bg: #111827;
    --nscc-org-card-border: rgba(148, 163, 184, 0.2);
    --nscc-org-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
    --nscc-org-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.3);
    --nscc-org-card-name: #f1f5f9;
    --nscc-org-card-title: #cbd5e1;
    --nscc-org-card-meta: #94a3b8;
    --nscc-org-line: rgba(148, 163, 184, 0.35);
    --nscc-org-empty-ink: #94a3b8;
    --nscc-org-dir-bg: rgba(15, 23, 42, 0.6);
    --nscc-org-dir-border: rgba(148, 163, 184, 0.18);
    --nscc-org-dir-ink: #e2e8f0;
    --nscc-org-chip-bg: rgba(148, 163, 184, 0.12);
    --nscc-org-chip-border: rgba(148, 163, 184, 0.2);
    --nscc-org-chip-ink: #cbd5e1;
    --nscc-org-chip-lead-bg: rgba(139, 92, 246, 0.2);
    --nscc-org-chip-lead-border: rgba(196, 181, 253, 0.35);
    --nscc-org-chip-lead-ink: #c4b5fd;
    --nscc-org-ctrl-bg: rgba(15, 23, 42, 0.55);
    --nscc-org-ctrl-border: rgba(148, 163, 184, 0.2);
    --nscc-org-ctrl-ink: #cbd5e1;
    --nscc-org-ctrl-hover-bg: rgba(148, 163, 184, 0.12);
    --nscc-org-avatar-ring: rgba(15, 23, 42, 0.9);
    --nscc-org-drop-glow: #4ade80;
    --nscc-org-viewport-bg: rgba(2, 6, 23, 0.4);
    --nscc-org-viewport-grid: radial-gradient(circle, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
}
.nscc-org-shell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}
.nscc-org-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
/* Segmented mode switch (Leadership / Entire organization) */
.nscc-org-modes {
    display: inline-flex;
    padding: 0.2rem;
    background: var(--nscc-org-seg-bg);
    border: 1px solid var(--nscc-org-seg-border);
    border-radius: 10px;
    gap: 0.15rem;
}
.nscc-org-mode-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nscc-org-seg-ink);
    border-radius: 7px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.nscc-org-mode-btn:hover:not(.is-active) {
    color: var(--nscc-org-card-name);
}
.nscc-org-mode-btn.is-active {
    background: var(--nscc-org-seg-active-bg);
    color: var(--nscc-org-seg-active-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
/* KPI ribbon */
.nscc-org-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.15rem 0 0.75rem;
}
.nscc-org-kpi {
    border: 1px solid var(--nscc-org-kpi-border);
    border-radius: 10px;
    background: var(--nscc-org-kpi-bg);
    padding: 0.6rem 0.85rem;
    box-shadow: var(--nscc-org-kpi-shadow);
}
.nscc-org-kpi__label {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nscc-org-kpi-label);
    font-weight: 600;
}
.nscc-org-kpi__value {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nscc-org-kpi-value);
    font-variant-numeric: tabular-nums;
}
/* Interactive KPI tiles (used as filter buttons) */
button.nscc-org-kpi,
.nscc-org-kpi--btn {
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}
button.nscc-org-kpi:hover,
.nscc-org-kpi--btn:hover {
    border-color: color-mix(in srgb, var(--nscc-org-accent) 45%, var(--nscc-org-kpi-border));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
button.nscc-org-kpi:focus-visible,
.nscc-org-kpi--btn:focus-visible {
    outline: 2px solid var(--nscc-org-accent);
    outline-offset: 2px;
}
/* Chart panel + head */
.nscc-org-chart-panel {
    border: 1px solid var(--nscc-org-panel-border);
    border-radius: 14px;
    background: var(--nscc-org-panel-bg);
    padding: 0.85rem 0.85rem 1rem;
    margin-bottom: 0.75rem;
}
.nscc-org-chart-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.nscc-org-chart-panel__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nscc-org-panel-title);
}
/* Canvas controls (collapse/expand + zoom + fit) — pill group with dividers */
.nscc-org-canvas-controls {
    display: inline-flex;
    align-items: stretch;
    background: var(--nscc-org-ctrl-bg);
    border: 1px solid var(--nscc-org-ctrl-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.nscc-org-ctrl-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nscc-org-ctrl-ink);
    padding: 0.32rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nscc-org-ctrl-btn:hover {
    background: var(--nscc-org-ctrl-hover-bg);
    color: var(--nscc-org-card-name);
}
.nscc-org-ctrl-btn--icon {
    padding: 0.32rem 0.55rem;
    min-width: 1.9rem;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nscc-org-ctrl-sep {
    width: 1px;
    align-self: stretch;
    background: var(--nscc-org-ctrl-border);
    margin: 0;
}
.nscc-org-ctrl-zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--nscc-org-ctrl-ink);
    min-width: 3rem;
    padding: 0 0.4rem;
    font-variant-numeric: tabular-nums;
    background: transparent;
}
/* Viewport with soft dot grid */
.nscc-org-viewport {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    min-height: 380px;
    max-height: min(64vh, 720px);
    background:
        var(--nscc-org-viewport-grid) 0 0 / 22px 22px,
        var(--nscc-org-viewport-bg);
    border: 1px solid var(--nscc-org-panel-border);
    border-radius: 10px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.nscc-org-viewport.is-panning {
    cursor: grabbing;
}
.nscc-org-canvas {
    transform-origin: top center;
    width: max-content;
    padding: 1.5rem 2rem 2rem;
}
.nscc-org-hint {
    margin: 0.5rem 0 0;
    font-size: 0.7rem;
    color: var(--nscc-org-kpi-label);
}
/* Tree geometry */
.nscc-org-tree,
.nscc-org-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nscc-org-tree {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
    width: max-content;
}
.nscc-org-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
/* Card — hairline border, soft depth, subtle hover lift */
.nscc-org-card {
    --card-hue: 220;
    min-width: 210px;
    max-width: 260px;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    border: 1px solid var(--nscc-org-card-border);
    border-radius: 12px;
    background: var(--nscc-org-card-bg);
    padding: 0.75rem 0.8rem 0.75rem 0.85rem;
    text-align: left;
    box-shadow: var(--nscc-org-card-shadow);
    position: relative;
    z-index: 1;
    cursor: grab;
    overflow: hidden;
    transition:
        box-shadow 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease,
        opacity 0.15s ease;
}
.nscc-org-card:hover {
    box-shadow: var(--nscc-org-card-shadow-hover);
    transform: translateY(-1px);
}
.nscc-org-card:active {
    cursor: grabbing;
    transform: translateY(0);
}
/* Root card — accent top bar, slightly bolder shadow */
.nscc-org-card--root {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08),
        0 12px 32px rgba(15, 23, 42, 0.08);
}
.nscc-org-card--root::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--nscc-org-accent),
        color-mix(in srgb, var(--nscc-org-accent) 60%, transparent));
}
:root.dark .nscc-org-card--root,
body.dark-theme .nscc-org-card--root {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
        0 12px 28px rgba(0, 0, 0, 0.35);
}
.nscc-org-card--dragging {
    opacity: 0.4;
    transform: scale(0.98);
}
.nscc-org-card--drop-target {
    border-color: var(--nscc-org-drop-glow);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nscc-org-drop-glow) 35%, transparent),
        var(--nscc-org-card-shadow-hover);
    transform: translateY(-1px) scale(1.02);
}
/* Avatar — deterministic hue per person via --card-hue */
.nscc-org-card__avatar {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background:
        linear-gradient(135deg,
            hsl(var(--card-hue), 70%, 58%),
            hsl(calc(var(--card-hue) + 30), 65%, 45%));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 2px var(--nscc-org-avatar-ring),
        inset 0 0 0 3px hsla(var(--card-hue), 70%, 45%, 0.3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.nscc-org-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.nscc-org-card__name {
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--nscc-org-card-name);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nscc-org-card__title {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--nscc-org-card-title);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nscc-org-card__meta {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: var(--nscc-org-card-meta);
}
.nscc-org-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.nscc-org-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--nscc-org-chip-bg);
    border: 1px solid var(--nscc-org-chip-border);
    color: var(--nscc-org-chip-ink);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.nscc-org-chip--lead {
    background: var(--nscc-org-chip-lead-bg);
    border-color: var(--nscc-org-chip-lead-border);
    color: var(--nscc-org-chip-lead-ink);
}
.nscc-org-chip--lead::before {
    content: "★";
    font-size: 0.72rem;
    line-height: 1;
}
.nscc-org-chip--reports::before {
    content: "";
    display: inline-block;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}
/* Expand/collapse toggle — floating pill on the card corner */
.nscc-org-toggle {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border: 1px solid var(--nscc-org-ctrl-border);
    border-radius: 999px;
    background: var(--nscc-org-ctrl-bg);
    color: var(--nscc-org-ctrl-ink);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nscc-org-toggle:hover {
    background: var(--nscc-org-ctrl-hover-bg);
    color: var(--nscc-org-accent);
    border-color: var(--nscc-org-accent);
}
.nscc-org-toggle.is-collapsed {
    background: var(--nscc-org-accent-soft);
    color: var(--nscc-org-accent);
    border-color: color-mix(in srgb, var(--nscc-org-accent) 30%, transparent);
}
/* Entire-org compact variant */
.nscc-org-chart-panel--wide .nscc-org-card {
    min-width: 175px;
    max-width: 220px;
    padding: 0.6rem 0.65rem;
    gap: 0.55rem;
}
.nscc-org-chart-panel--wide .nscc-org-card__avatar {
    width: 1.95rem;
    height: 1.95rem;
    font-size: 0.7rem;
}
.nscc-org-chart-panel--wide .nscc-org-card__name {
    font-size: 0.82rem;
}
.nscc-org-chart-panel--wide .nscc-org-card__title {
    font-size: 0.7rem;
}
.nscc-org-chart-panel--wide .nscc-org-children {
    gap: 0.7rem;
}
/* Connectors — 1px hairlines, muted */
.nscc-org-children {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.4rem;
    padding-top: 1rem;
    position: relative;
}
.nscc-org-children::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 1rem;
    background: var(--nscc-org-line);
    transform: translateX(-50%);
}
.nscc-org-node:not(:only-child) {
    padding-top: 1rem;
    position: relative;
}
.nscc-org-node:not(:only-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 1rem;
    background: var(--nscc-org-line);
    transform: translateX(-50%);
}
.nscc-org-children > .nscc-org-node:not(:only-child)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--nscc-org-line);
}
.nscc-org-children > .nscc-org-node:first-child:not(:only-child)::after {
    left: 50%;
}
.nscc-org-children > .nscc-org-node:last-child:not(:only-child)::after {
    right: 50%;
}
.nscc-org-empty {
    margin: 0;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--nscc-org-empty-ink);
    font-size: 0.85rem;
}
/* Directory (collapsible table) */
.nscc-org-directory {
    margin-top: 0.5rem;
    border: 1px solid var(--nscc-org-dir-border);
    border-radius: 12px;
    padding: 0.5rem 0.85rem 0.85rem;
    background: var(--nscc-org-dir-bg);
    box-shadow: var(--nscc-org-kpi-shadow);
}
.nscc-org-directory > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--nscc-org-dir-ink);
    padding: 0.35rem 0;
    font-size: 0.85rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nscc-org-directory > summary::-webkit-details-marker { display: none; }
.nscc-org-directory > summary::before {
    content: "\25B8";
    font-size: 0.7rem;
    color: var(--nscc-org-card-meta);
    transition: transform 0.15s ease;
}
.nscc-org-directory[open] > summary::before {
    transform: rotate(90deg);
}
/* Search field */
.nscc-org-search {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    background: var(--nscc-org-ctrl-bg);
    border: 1px solid var(--nscc-org-ctrl-border);
    border-radius: 8px;
    padding: 0.15rem 0.35rem;
    min-width: 220px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.nscc-org-search::before {
    content: "";
    width: 14px;
    background:
        no-repeat center /
        contain
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    margin: 0 0.35rem 0 0.15rem;
    flex: 0 0 auto;
}
.nscc-org-search__input {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nscc-org-card-name);
    font-size: 0.82rem;
    padding: 0.3rem 0;
    outline: none;
    flex: 1 1 auto;
    min-width: 0;
}
.nscc-org-search__input::placeholder {
    color: var(--nscc-org-card-meta);
}
.nscc-org-search__clear {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nscc-org-card-meta);
    padding: 0 0.4rem;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}
.nscc-org-search__clear:hover {
    color: var(--nscc-org-card-name);
}
.nscc-org-toolbar__spacer {
    flex: 1 1 auto;
}
/* Undo / Redo group */
.nscc-org-history {
    display: inline-flex;
    background: var(--nscc-org-ctrl-bg);
    border: 1px solid var(--nscc-org-ctrl-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.nscc-org-history .nscc-org-ctrl-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.nscc-org-history .nscc-org-ctrl-btn + .nscc-org-ctrl-btn {
    border-left: 1px solid var(--nscc-org-ctrl-border);
}
/* Export menu (<details> + <summary>) */
.nscc-org-export {
    position: relative;
    display: inline-block;
}
.nscc-org-export > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.35rem 0.85rem;
    background: var(--nscc-org-seg-active-bg);
    color: var(--nscc-org-seg-active-ink);
    border: 1px solid var(--nscc-org-seg-active-bg);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nscc-org-export > summary::-webkit-details-marker { display: none; }
.nscc-org-export > summary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12);
}
.nscc-org-export__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    background: var(--nscc-org-card-bg);
    border: 1px solid var(--nscc-org-card-border);
    border-radius: 10px;
    padding: 0.35rem;
    box-shadow: var(--nscc-org-card-shadow-hover);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 20;
}
.nscc-org-export__item {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nscc-org-card-name);
    text-align: left;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    transition: background-color 0.12s ease;
}
.nscc-org-export__item span {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--nscc-org-card-meta);
}
.nscc-org-export__item:hover {
    background: var(--nscc-org-ctrl-hover-bg);
}
/* Legend */
.nscc-org-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.5rem 0.75rem;
    margin: -0.25rem 0 0.75rem;
    background: var(--nscc-org-kpi-bg);
    border: 1px solid var(--nscc-org-kpi-border);
    border-radius: 10px;
    font-size: 0.72rem;
    color: var(--nscc-org-card-meta);
    box-shadow: var(--nscc-org-kpi-shadow);
}
.nscc-org-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.nscc-org-legend__swatch {
    display: inline-block;
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nscc-org-accent), color-mix(in srgb, var(--nscc-org-accent) 60%, transparent));
}
/* Focus breadcrumb */
.nscc-org-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.75rem;
    background: var(--nscc-org-accent-soft);
    border: 1px solid color-mix(in srgb, var(--nscc-org-accent) 25%, transparent);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    color: var(--nscc-org-card-name);
}
.nscc-org-breadcrumb__back {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--nscc-org-accent) 40%, transparent);
    background: var(--nscc-org-card-bg);
    color: var(--nscc-org-accent);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.nscc-org-breadcrumb__back:hover {
    background: var(--nscc-org-accent);
    color: #ffffff;
}
/* Focused-name click affordance */
.nscc-org-card__name[data-org-focus] {
    cursor: zoom-in;
}
.nscc-org-card__name[data-org-focus]:hover {
    color: var(--nscc-org-accent);
}
/* Search-hit outline */
.nscc-org-card--hit {
    outline: 2px solid var(--nscc-org-accent);
    outline-offset: 2px;
}
/* Photo avatar — <img> overlays the initials div; on error, onerror removes
   the img and the gradient/initials show through. */
.nscc-org-card__avatar--photo {
    position: relative;
    overflow: hidden;
}
.nscc-org-card__avatar--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* Left-to-right layout — swap tree axes and rotate the connector T. */
.nscc-org-shell--lr .nscc-org-tree {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
}
.nscc-org-shell--lr .nscc-org-children {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    margin-left: 1.4rem;
    padding-top: 0;
    padding-left: 1rem;
    gap: 0.9rem;
}
.nscc-org-shell--lr .nscc-org-node {
    align-items: flex-start;
    flex-direction: row;
    padding-top: 0 !important;
}
.nscc-org-shell--lr .nscc-org-children::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1rem;
    height: 1px;
}
.nscc-org-shell--lr .nscc-org-node:not(:only-child) {
    padding-left: 1rem !important;
    padding-top: 0 !important;
}
.nscc-org-shell--lr .nscc-org-node:not(:only-child)::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1rem;
    height: 1px;
}
.nscc-org-shell--lr .nscc-org-children > .nscc-org-node:not(:only-child)::after {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
}
.nscc-org-shell--lr .nscc-org-children > .nscc-org-node:first-child:not(:only-child)::after {
    top: 50%;
    left: 0;
}
.nscc-org-shell--lr .nscc-org-children > .nscc-org-node:last-child:not(:only-child)::after {
    top: 0;
    bottom: 50%;
    left: 0;
}
/* Print — hide everything except the chart panel, drop the viewport clipping,
   restore natural sizing so the whole tree flows across pages. */
@media print {
    body.nscc-org-printing > * {
        display: none !important;
    }
    body.nscc-org-printing .nscc-org-shell,
    body.nscc-org-printing .nscc-org-shell * {
        display: revert !important;
    }
    body.nscc-org-printing {
        background: #ffffff !important;
    }
    body.nscc-org-printing .nscc-org-shell {
        position: absolute !important;
        inset: 0 !important;
        padding: 1cm !important;
        background: #ffffff !important;
    }
    body.nscc-org-printing .nscc-org-toolbar,
    body.nscc-org-printing .nscc-org-legend,
    body.nscc-org-printing .nscc-org-directory,
    body.nscc-org-printing .nscc-org-canvas-controls,
    body.nscc-org-printing .nscc-org-toggle,
    body.nscc-org-printing .nscc-org-breadcrumb {
        display: none !important;
    }
    body.nscc-org-printing .nscc-org-viewport {
        overflow: visible !important;
        max-height: none !important;
        border: 0 !important;
        background: #ffffff !important;
    }
    body.nscc-org-printing .nscc-org-canvas {
        transform: none !important;
        padding: 0 !important;
    }
    body.nscc-org-printing .nscc-org-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.nscc-org-printing .nscc-org-chart-panel__title::after {
        content: " — " attr(data-print-date);
    }
}
@media (max-width: 1100px) {
    .nscc-hr-layout {
        grid-template-columns: 1fr;
    }
    .nscc-hr-state-pane,
    .nscc-hr-state-table-wrap,
    .nscc-hr-reg-detail {
        max-height: none;
    }
    .nscc-org-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
#accounting-view .master-data-shell--finance > .nscc-erp-tabs,
#ops-field-view .master-data-shell--ops > .nscc-erp-tabs,
#back-office-payroll-panel > .nscc-erp-tabs,
#executive-dashboard-view .nscc-erp-tabs {
    display: flex;
    flex: 0 0 auto;
}
/* After any display:flex on folder strips ? in-page copies stay hidden while chrome owns tabs */
html.nscc-left-nav body.nscc-bo-chrome-tabs #accounting-view .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #ops-field-view .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #back-office-payroll-panel .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #executive-dashboard-view .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #daily-pulse-view > .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .nscc-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #back-office-payroll-panel > .nscc-erp-tabs,
html.nscc-left-nav.nscc-ahp-bo-fs body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-ahp-bo-fs body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-ahp-bo-fs body.nscc-bo-chrome-tabs #back-office-payroll-panel > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .nscc-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #back-office-payroll-panel > .nscc-erp-tabs.nscc-tab-groups {
    display: none !important;
}
/* Chrome-hosted strips must stay visible (park moves the same .nscc-erp-tabs node here) */
html.nscc-left-nav #nscc-chrome-folder-tabs.is-visible .nscc-erp-tabs,
html.nscc-left-nav #nscc-chrome-folder-tabs.is-visible .nscc-tab-groups {
    display: flex !important;
}
body[data-active-top-tab="back-office"] #live-ops-container {
    padding: 0.15rem 0.75rem 0.75rem;
}
html.nscc-left-nav body[data-active-top-tab="back-office"] #live-ops-container {
    padding: 0.1rem 0.65rem 0.65rem !important;
}
body[data-active-top-tab="back-office"] #accounting-view.view-section.active:not(.nscc-view-fs),
body[data-active-top-tab="back-office"] #executive-dashboard-view.view-section.active:not(.nscc-view-fs),
body[data-active-top-tab="back-office"] #back-office-view.view-section.active:not(.nscc-view-fs),
body[data-active-top-tab="back-office"] #master-personnel-view.view-section.active:not(.nscc-view-fs),
body[data-active-top-tab="back-office"] #master-locations-view.view-section.active:not(.nscc-view-fs),
body[data-active-top-tab="back-office"] #master-other-locations-view.view-section.active:not(.nscc-view-fs),
body[data-active-top-tab="back-office"] #master-ips-holidays-view.view-section.active:not(.nscc-view-fs),
body[data-active-top-tab="back-office"] #master-fleet-view.view-section.active:not(.nscc-view-fs),
body[data-active-top-tab="back-office"] #custom-export-view.view-section.active:not(.nscc-view-fs) {
    min-height: 100%;
    height: 100%;
}
html.nscc-ahp-bo-fs #new-trip-btn {
    display: none !important;
}
html.nscc-ahp-bo-fs,
html.nscc-finance-shell {
    height: 100%;
}
html.nscc-ahp-bo-fs body,
html.nscc-finance-shell body,
body.nscc-ahp-bo-fs,
body.nscc-finance-shell {
    height: 100vh;
    overflow: hidden;
}
html.nscc-ahp-bo-fs .app-container,
html.nscc-finance-shell .app-container,
body.nscc-ahp-bo-fs .app-container,
body.nscc-finance-shell .app-container {
    height: 100vh;
    width: 100%;
    max-width: none;
}
html.nscc-finance-shell body[data-active-top-tab="back-office"] .main-content,
html.nscc-ahp-bo-fs body[data-active-top-tab="back-office"] .main-content,
body.nscc-finance-shell[data-active-top-tab="back-office"] .main-content,
body.nscc-ahp-bo-fs[data-active-top-tab="back-office"] .main-content {
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}
html.nscc-ahp-bo-fs body[data-active-top-tab="back-office"] #live-ops-container,
html.nscc-finance-shell body[data-active-top-tab="back-office"] #live-ops-container,
body.nscc-ahp-bo-fs[data-active-top-tab="back-office"] #live-ops-container,
body.nscc-finance-shell[data-active-top-tab="back-office"] #live-ops-container {
    height: 100%;
    min-height: 0;
    overflow: auto;
}
html.nscc-ahp-bo-fs body[data-active-top-tab="back-office"] .view-section.active:not(.nscc-view-fs),
html.nscc-finance-shell body[data-active-top-tab="back-office"] .view-section.active:not(.nscc-view-fs),
body.nscc-ahp-bo-fs[data-active-top-tab="back-office"] .view-section.active:not(.nscc-view-fs),
body.nscc-finance-shell[data-active-top-tab="back-office"] .view-section.active:not(.nscc-view-fs) {
    min-height: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
}
html.nscc-ahp-bo-fs body[data-active-top-tab="back-office"] .view-section.active:not(.nscc-view-fs) .master-data-shell--finance,
html.nscc-finance-shell body[data-active-top-tab="back-office"] .view-section.active:not(.nscc-view-fs) .master-data-shell--finance,
html.nscc-ahp-bo-fs body[data-active-top-tab="back-office"] .view-section.active:not(.nscc-view-fs) .back-office-payroll-mount,
html.nscc-finance-shell body[data-active-top-tab="back-office"] .view-section.active:not(.nscc-view-fs) .back-office-payroll-mount {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-width: none;
}
/* Demo 2 / finance shell ? hide dispatch-centric top chrome only.
   Do NOT use bare [data-top-tab=?] ? left-nav accordion buttons also carry
   that attribute, and Ops/Accounting/HR toggle nscc-ahp-bo-fs, which would
   blank most of the left menu until another click cleared the class. */
html.nscc-finance-shell #tab-daily-pulse,
html.nscc-ahp-bo-fs #tab-daily-pulse,
html.nscc-finance-shell #tab-live-ops,
html.nscc-ahp-bo-fs #tab-live-ops,
html.nscc-finance-shell #tab-forms,
html.nscc-ahp-bo-fs #tab-forms,
html.nscc-finance-shell #tab-reports,
html.nscc-ahp-bo-fs #tab-reports,
html.nscc-finance-shell #tab-communication,
html.nscc-ahp-bo-fs #tab-communication,
html.nscc-finance-shell #tab-ledger-audit,
html.nscc-ahp-bo-fs #tab-ledger-audit,
html.nscc-finance-shell #tab-planner,
html.nscc-ahp-bo-fs #tab-planner,
html.nscc-finance-shell .sub-nav-panel[data-top-tab="daily-pulse"],
html.nscc-ahp-bo-fs .sub-nav-panel[data-top-tab="daily-pulse"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="live-ops"],
html.nscc-ahp-bo-fs .sub-nav-panel[data-top-tab="live-ops"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="form-management"],
html.nscc-ahp-bo-fs .sub-nav-panel[data-top-tab="form-management"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="reports"],
html.nscc-ahp-bo-fs .sub-nav-panel[data-top-tab="reports"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="communication"],
html.nscc-ahp-bo-fs .sub-nav-panel[data-top-tab="communication"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="ledger-audit"],
html.nscc-ahp-bo-fs .sub-nav-panel[data-top-tab="ledger-audit"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="planner"],
html.nscc-ahp-bo-fs .sub-nav-panel[data-top-tab="planner"],
html.nscc-finance-shell #new-trip-btn,
html.nscc-ahp-bo-fs #new-trip-btn,
html.nscc-finance-shell #sidebar-demo-notice,
html.nscc-ahp-bo-fs #sidebar-demo-notice,
html.nscc-finance-shell #primary-view,
html.nscc-ahp-bo-fs #primary-view,
html.nscc-finance-shell #card-view,
html.nscc-ahp-bo-fs #card-view,
html.nscc-finance-shell #dispatch-timeline-view,
html.nscc-ahp-bo-fs #dispatch-timeline-view,
html.nscc-finance-shell #courier-view,
html.nscc-ahp-bo-fs #courier-view,
html.nscc-finance-shell #gantt-view,
html.nscc-ahp-bo-fs #gantt-view,
html.nscc-finance-shell #map-view,
html.nscc-ahp-bo-fs #map-view,
html.nscc-finance-shell #patrol-view,
html.nscc-ahp-bo-fs #patrol-view,
html.nscc-finance-shell #patrol-officers-view,
html.nscc-ahp-bo-fs #patrol-officers-view,
html.nscc-finance-shell #patrol-schedule-view,
html.nscc-ahp-bo-fs #patrol-schedule-view,
html.nscc-finance-shell #security-guards-view,
html.nscc-ahp-bo-fs #security-guards-view,
html.nscc-finance-shell #guard-schedule-view,
html.nscc-ahp-bo-fs #guard-schedule-view,
html.nscc-finance-shell #daily-pulse-view,
html.nscc-ahp-bo-fs #daily-pulse-view,
html.nscc-finance-shell #main-daily-pulse-container,
html.nscc-ahp-bo-fs #main-daily-pulse-container {
    display: none !important;
}
/* Deprecated: in-screen Back Office quick-nav removed ??? use top sub-nav only. */
.bo-quick-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 0 0.65rem;
    margin: 0 0 0.5rem;
    border-bottom: 2px solid var(--border);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.bo-quick-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bo-quick-nav__btn:hover {
    background: var(--bg-raised);
    color: var(--text-primary);
    border-color: var(--nscc-line, #000000);
}
.bo-quick-nav__btn.is-active {
    background: var(--chrome-folder-active);
    color: var(--text-inverse);
    border-color: var(--nscc-line, #000000);
    box-shadow: 0 2px 8px var(--brand-glow);
}
.bo-quick-nav__icon {
    font-size: 0.95rem;
    line-height: 1;
}
.bo-screen-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.bo-screen-loading__spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border);
    border-top-color: var(--nscc-line, #000000);
    border-radius: 50%;
    animation: bo-spin 0.75s linear infinite;
}
@keyframes bo-spin {
    to { transform: rotate(360deg); }
}
.bo-screen-loading__text {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.9rem;
}
.bo-screen-loading__retry {
    margin-top: 0.25rem;
}
.bo-screen-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 4px solid #FF3B30;
    border-radius: 8px;
    margin: 1.5rem;
}
.bo-screen-error__text {
    margin: 0;
    color: #FF3B30;
    font-weight: 700;
    font-size: 0.9rem;
    max-width: 28rem;
}
.master-data-shell--bo-connect .erp-connect-header {
    flex: 0 0 auto;
    margin-bottom: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
}
.master-data-shell--bo-connect .erp-connect-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.master-data-shell--bo-connect .erp-connect-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}
.master-data-shell--bo-connect .nscc-erp-panel--flat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.master-data-shell--bo-connect .bo-connect-toolbar .nscc-erp-tabs {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.master-data-shell--bo-connect .bo-connect-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.master-data-shell--bo-connect .bo-connect-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.view-section.nscc-view-fs .master-data-shell--bo-connect .bo-connect-tab-panel {
    overflow: hidden;
}
.bo-connect-toolbar {
    flex: 0 0 auto;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.75rem 0.75rem;
    box-sizing: border-box;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
}
.bo-connect-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.55rem;
}
.bo-connect-toolbar-row .master-data-search-wrap {
    flex: 1 1 16rem;
    min-width: 12rem;
    margin: 0;
}
.bo-connect-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bo-connect-readonly-banner {
    margin: 0 0 0.75rem;
    padding: 0.65rem 1rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-sunken);
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.45;
    flex: 0 0 auto;
}
.bo-connect-readonly-banner strong {
    color: var(--text-primary);
}

/* Back Office ??? IPS & Other Location holidays */
.master-data-shell--bo-holidays {
    padding: 0.75rem 1rem 1.25rem;
}
.bo-holidays-toolbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
}
.bo-holidays-editable-badge {
    background: rgba(52, 199, 89, 0.15);
    color: #34C759;
    border: 1px solid rgba(52, 199, 89, 0.35);
}
.bo-holidays-readonly-badge {
    background: rgba(142, 142, 147, 0.15);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.bo-holidays-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.85rem;
}
.bo-holidays-table {
    min-width: 420px;
}
.bo-holidays-table--ips {
    min-width: 680px;
}
.bo-holidays-table .bo-holiday-svc-hdr,
.bo-holidays-table .bo-holiday-svc {
    text-align: center;
    width: 76px;
    min-width: 68px;
}
.bo-holiday-svc-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}
.bo-holiday-svc-check input {
    width: 16px;
    height: 16px;
    accent-color: #000000;
    cursor: pointer;
}
.bo-holidays-svc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.65rem;
}
.bo-holiday-svc-add {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}
.bo-holiday-svc-add input {
    width: 16px;
    height: 16px;
    accent-color: #000000;
}
.bo-holidays-table .bo-holiday-date {
    font-family: monospace;
    white-space: nowrap;
}
.bo-holidays-table .bo-holiday-actions {
    text-align: right;
    white-space: nowrap;
}
.bo-holidays-empty {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 1rem;
}
.bo-holidays-add {
    border: 2px solid var(--border);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    background: var(--bg-sunken);
}
.bo-holidays-add-title {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.55rem;
    color: var(--text-primary);
}
.bo-holidays-add-grid {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(200px, 1fr);
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}
.bo-holidays-readonly-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.bo-ol-holidays-modal-content {
    width: min(680px, 96vw);
    max-height: min(88vh, 720px);
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.bo-holidays-copy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0.65rem;
    padding: 0.5rem 0.65rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.bo-holidays-svc-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0.35rem 0 0.5rem;
}
.bo-ol-holiday-copy-from {
    min-width: 10rem;
    flex: 1 1 auto;
    max-width: 16rem;
}
.bo-ol-holidays-modal-content .modal-body {
    overflow-y: auto;
    overflow-x: visible;
    flex: 1 1 auto;
    min-height: 0;
}
.bo-ol-holidays-modal-content .bo-holidays-toolbar {
    overflow: visible;
    position: relative;
    z-index: 2;
}
.md-ol-holidays-flag {
    margin: 0;
}

.master-data-shell--bo-connect .master-data-table-shell--bo-fill,
.master-data-shell--bo-connect .master-data-table-shell--locations-fill,
.master-data-shell--bo-connect .bo-table-scroll-wrap .master-data-table-shell {
    flex: none;
    min-height: 0;
    max-height: none;
    overflow: visible;
}
/* Normal layout: page scrolls vertically via .views-container; wide tables scroll
   horizontally here. Use overflow-y: clip (not visible) so overflow-x:auto does not
   compute overflow-y to auto ? that nested vertical scrollport makes wheel scroll
   jump while arrow keys (outer scroller) still feel fine. */
.view-section.active:not(.nscc-view-fs) .bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill,
.view-section.active:not(.nscc-view-fs) .custom-export-table-wrap {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: clip;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
}
.view-section.nscc-view-fs .bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill,
.view-section.nscc-view-fs .custom-export-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill,
.master-data-shell--bo-connect .erp-queue-table-wrap--bo-fill {
    margin-top: 0;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
}
.bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill .master-data-table-shell,
.master-data-shell--bo-connect .erp-queue-table-wrap--bo-fill .master-data-table-shell,
.bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill .master-data-table-shell--locations-fill,
.bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill .master-data-table-shell--bo-fill {
    border: none;
    border-radius: 0;
    background: transparent;
    max-height: none;
    overflow: visible;
    flex: none;
}
.bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill .master-data-table thead th,
.master-data-shell--bo-connect .erp-queue-table-wrap--bo-fill .master-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Sept 4 demo, Sandy: "it's frozen, but you see the data in the background
       above it" — the wrap above sets background:transparent, so make the
       sticky header's own background explicit rather than relying on the
       less-specific .master-data-table thead th rule to fill it in. */
    background: var(--bg-sunken);
}
.bo-connect-tab-panel > .bo-table-scroll-wrap,
.bo-connect-tab-panel > .md-dual-scroll.bo-connect-dual-scroll,
.custom-export-tab-panel > .custom-export-main,
.custom-export-tab-panel > .custom-export-history-panel {
    flex: 0 0 auto;
}
#custom-export-view.nscc-view-fs .custom-export-tab-panel > .custom-export-main,
#custom-export-view.nscc-view-fs .custom-export-tab-panel > .custom-export-history-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.view-section.nscc-view-fs .bo-connect-tab-panel > .bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: auto;
}
.bo-connect-tab-panel > .bo-connect-readonly-banner,
.bo-connect-tab-panel > .master-data-empty-callout,
.bo-connect-tab-panel > .master-data-search-empty,
.custom-export-tab-panel > .custom-export-hint {
    flex: 0 0 auto;
}
.master-data-shell--bo-connect .md-dual-scroll,
.master-data-shell--bo-connect .md-dual-scroll.bo-connect-dual-scroll {
    display: none !important;
}

/* Back Office tables ? thick outline + rounded corners (match title / toolbar boxes) */
.master-data-shell--bo-connect .erp-queue-table-wrap,
.master-data-shell--bo-connect .master-data-table-shell,
.master-data-shell--bo-connect .md-dual-scroll.bo-connect-dual-scroll {
    margin-top: 0;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
    box-shadow: none;
}
.master-data-shell--bo-connect .md-dual-scroll.bo-connect-dual-scroll {
    overflow: hidden;
}
.master-data-shell--bo-connect .md-dual-scroll .master-data-table-shell {
    border: none;
    border-radius: 0;
    background: transparent;
    max-height: none;
}
.master-data-shell--bo-connect .md-dual-scroll-corner,
.master-data-shell--bo-connect .md-h-scroll,
.master-data-shell--bo-connect .md-v-scroll {
    background: var(--bg-sunken);
}
.master-data-shell--bo-connect .master-data-table,
.master-data-shell--bo-connect .erp-queue-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}
.master-data-shell--bo-connect .master-data-table th,
.master-data-shell--bo-connect .master-data-table td,
.master-data-shell--bo-connect .erp-queue-table th,
.master-data-shell--bo-connect .erp-queue-table td {
    text-align: left;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.68rem !important;
    vertical-align: top !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-top: 1px solid var(--border);
}
.master-data-shell--bo-connect .master-data-table thead th,
.master-data-shell--bo-connect .erp-queue-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    white-space: nowrap;
    background: var(--bg-sunken) !important;
    box-shadow: none !important;
    border-top: none;
}
.master-data-shell--bo-connect .master-data-table thead tr,
.master-data-shell--bo-connect .erp-queue-table thead tr {
    background: var(--bg-sunken);
}
.master-data-shell--bo-connect .master-data-table thead tr.master-data-subhead-row th {
    top: 1.75rem;
    z-index: 3;
    font-size: 0.62rem !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.35rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--text-muted) !important;
}
.master-data-shell--bo-connect .master-data-table .nscc-table-empty,
.master-data-shell--bo-connect .erp-queue-table .nscc-table-empty {
    padding: 0.65rem !important;
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    text-align: center !important;
    font-style: normal !important;
    border-top: 1px solid var(--border);
}
.master-data-shell--bo-connect .md-loc-rates-group-title,
.master-data-shell--bo-connect .md-loc-th-two-line {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
}
.master-data-shell--bo-connect .master-data-table input.form-control-panel,
.master-data-shell--bo-connect .master-data-table select.form-control-panel,
.master-data-shell--bo-connect .master-data-table textarea.form-control-panel,
.master-data-shell--bo-connect .master-data-table .md-loc-field,
.master-data-shell--bo-connect .master-data-table .md-fleet-field,
.master-data-shell--bo-connect .master-data-table .md-person-field {
    font-size: 0.68rem;
    padding: 0.3rem 0.45rem;
    border-radius: 4px;
}
.master-data-shell--bo-connect .master-data-table .btn-sm {
    font-size: 0.65rem;
    padding: 0.25rem 0.45rem;
}
.master-data-shell--bo-connect .md-person-name,
.master-data-shell--bo-connect .md-loc-customer-name {
    font-size: 0.72rem;
    font-weight: 700;
}
.master-data-shell--bo-connect .md-person-title-line,
.master-data-shell--bo-connect .md-loc-demo-plain,
.master-data-shell--bo-connect .md-person-demo-plain {
    font-size: 0.66rem;
}
.master-data-shell--bo-connect .master-data-search-empty {
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 0.72rem;
}
#master-personnel-view.nscc-view-fs .master-data-shell--bo-connect,
#master-locations-view.nscc-view-fs .master-data-shell--bo-connect,
#master-other-locations-view.nscc-view-fs .master-data-shell--bo-connect,
#master-fleet-view.nscc-view-fs .master-data-shell--bo-connect,
#custom-export-view.nscc-view-fs .master-data-shell--bo-connect {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    padding: 0.5rem 0.65rem 0.65rem;
}
#master-personnel-view.nscc-view-fs .bo-connect-tab-panel,
#master-locations-view.nscc-view-fs .bo-connect-tab-panel,
#master-other-locations-view.nscc-view-fs .bo-connect-tab-panel,
#master-fleet-view.nscc-view-fs .bo-connect-tab-panel,
#custom-export-view.nscc-view-fs .bo-connect-tab-panel,
#custom-export-view.nscc-view-fs .custom-export-panel,
#custom-export-view.nscc-view-fs .custom-export-tab-panel {
    flex: 1;
    min-height: 0;
}

/* Custom Export */
.custom-export-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.custom-export-panel > .nscc-erp-tabs {
    flex: 0 0 auto;
    margin-bottom: 0.75rem;
}
.custom-export-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.custom-export-tab-panel.active {
    display: flex;
    flex-direction: column;
}
#custom-export-view .nscc-erp-tab-panel.custom-export-tab-panel.active {
    display: flex;
    flex-direction: column;
}
/* Normal view: flex tab panels collapse to 0 height ??? stack content instead (fullscreen keeps flex above). */
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-panel {
    display: block;
    flex: none;
    min-height: auto;
    height: auto;
    overflow: visible;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .nscc-erp-tab-panel.custom-export-tab-panel,
#custom-export-view.view-section.active:not(.nscc-view-fs) .nscc-erp-tab-panel.custom-export-tab-panel.active {
    display: block;
    flex: none;
    min-height: auto;
    height: auto;
    overflow: visible;
}
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-tab-panel.active > .custom-export-main,
#custom-export-view.view-section.active:not(.nscc-view-fs) .custom-export-tab-panel.active > .custom-export-history-panel {
    flex: none;
    min-height: auto;
    height: auto;
    overflow: visible;
}
.custom-export-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.custom-export-source-select {
    min-width: 11rem;
    max-width: 20rem;
}
.custom-export-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 0.45rem;
    overflow: hidden;
}
#custom-export-view .custom-export-templates-row {
    gap: 0.35rem;
}
#custom-export-view .custom-export-hint {
    margin: 0.2rem 0 0;
    font-size: 0.65rem;
    line-height: 1.3;
}
.custom-export-main > .custom-export-templates,
.custom-export-main > .custom-export-actions {
    flex: 0 0 auto;
}
.custom-export-scroll-region {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
}
.custom-export-scroll-region .master-data-table-shell {
    overflow: visible;
    max-height: none;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.custom-export-scroll-region .master-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-sunken);
}
.custom-export-main > .md-dual-scroll,
.custom-export-main > .bo-table-scroll-wrap {
    flex: 1 1 0;
    min-height: 0;
}
.custom-export-history-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 0.5rem;
    overflow: hidden;
}
.custom-export-history-panel > .custom-export-scroll-region {
    flex: 1 1 0;
    min-height: 0;
}
.custom-export-history-panel > .md-dual-scroll,
.custom-export-history-panel > .bo-table-scroll-wrap {
    flex: 1 1 0;
    min-height: 0;
}
.custom-export-templates-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.custom-export-source-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 100%;
}
.custom-export-source-row {
    align-items: flex-end;
}
.custom-export-source-row .form-label-compact {
    margin-bottom: 0;
}
.custom-export-source-btn {
    white-space: nowrap;
}
#custom-export-view.nscc-view-fs .custom-export-main > .bo-table-scroll-wrap,
#custom-export-view.nscc-view-fs .custom-export-main > .md-dual-scroll {
    flex: 1 1 auto;
    min-height: 12rem;
}
.custom-export-template-name {
    min-width: 10rem;
    flex: 1 1 10rem;
    max-width: 18rem;
}
.custom-export-hint {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.custom-export-fields-wrap.custom-export-table-wrap {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    overflow: visible;
}
.custom-export-fields-wrap,
.custom-export-fields-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.custom-export-fields-panel {
    min-height: 100%;
}
.custom-export-fields-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.22rem 0.4rem;
    padding: 0.22rem 0.32rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sunken);
    flex: 0 0 auto;
}
.custom-export-fields-order-hint {
    font-size: 0.6rem;
    color: var(--text-secondary);
    line-height: 1.25;
    flex: 1 1 10rem;
}
.custom-export-fields-rows {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding: 0.22rem;
    background: var(--bg-card);
    overflow: hidden;
}
.custom-export-fields-row {
    flex: 1 1 50%;
    min-height: 3.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}
.custom-export-fields-row--included {
    flex: 1 1 50%;
    min-height: 3.8rem;
}
.custom-export-fields-row--excluded {
    flex: 1 1 50%;
    min-height: 3.8rem;
    border-top: 1px solid var(--border);
    padding-top: 0.22rem;
}
.custom-export-fields-row-label {
    flex: 0 0 auto;
    font-size: 0.56rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1.1;
}
.custom-export-fields-row-empty {
    margin: 0.2rem 0 0;
    font-size: 0.62rem;
    color: var(--text-secondary);
    font-style: italic;
}
.custom-export-fields-scroll-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.18rem;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}
.custom-export-fields-scroll-wrap .custom-export-fields-scroll {
    flex: 1 1 auto;
    min-width: 0;
}
.custom-export-fields-scroll-btn {
    flex: 0 0 auto;
    align-self: center;
    width: 1.8rem;
    min-height: 2.85rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.custom-export-fields-scroll-btn:hover:not(:disabled) {
    border-color: var(--nscc-line, #000000);
    color: var(--text-primary);
}
.custom-export-fields-scroll-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.custom-export-fields-scroll-wrap:not(.custom-export-fields-scroll-wrap--overflow) .custom-export-fields-scroll-btn {
    visibility: hidden;
    pointer-events: none;
}
.custom-export-fields-scroll {
    flex: 1 1 auto;
    min-height: 3.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.custom-export-fields-row .custom-export-fields-scroll {
    padding: 0.12rem 0.16rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-sunken);
}
.custom-export-fields-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.37rem;
    min-width: min-content;
}
.custom-export-field-card {
    flex: 0 0 auto;
    width: 8.65rem;
    min-height: 3.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    padding: 0.18rem 0.26rem 0.21rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-sunken);
    box-shadow: none;
    cursor: default;
    user-select: none;
    align-self: flex-start;
    transition: border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.custom-export-field-card--included {
    background: var(--bg-card);
    border-color: color-mix(in srgb, var(--brand-primary, #007AFF) 35%, var(--border));
}
.custom-export-field-card:not(.custom-export-field-card--included) {
    opacity: 0.72;
}
.custom-export-field-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
}
.custom-export-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0.08rem;
    color: var(--text-muted);
    font-size: 0.69rem;
    letter-spacing: -0.08em;
    line-height: 1;
    cursor: grab;
    user-select: none;
    touch-action: none;
    border-radius: 4px;
    transform: rotate(90deg);
    flex: 0 0 auto;
}
.custom-export-drag-handle--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    touch-action: auto;
}
.custom-export-field-card.custom-export-row-dragging {
    opacity: 0.55;
    cursor: grabbing;
    pointer-events: none;
}
.custom-export-field-card.custom-export-row-drop-target {
    box-shadow: inset 3px 0 0 var(--brand-primary, #007AFF);
    border-color: var(--brand-primary, #007AFF);
}
.custom-export-field-card.custom-export-row-dragging .custom-export-drag-handle,
.custom-export-field-card:active .custom-export-drag-handle {
    cursor: grabbing;
}
.custom-export-fields-scroll--dragging {
    cursor: grabbing;
}
.custom-export-fields-scroll--dragging .custom-export-field-card:not(.custom-export-row-dragging) {
    cursor: grabbing;
}
.custom-export-include-all-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.custom-export-include-all-text {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
}
.custom-export-field-check-all,
.custom-export-field-check {
    width: 0.96rem;
    height: 0.96rem;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.custom-export-field-label {
    font-size: 0.77rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.custom-export-field-id {
    margin-top: 0;
    font-size: 0.67rem;
    line-height: 1.08;
    color: var(--text-muted);
    font-family: ui-monospace, Consolas, monospace;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.custom-export-empty {
    margin: 0;
    padding: 1.5rem;
    color: var(--text-muted);
    font-weight: 700;
}
.custom-export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0;
}
.custom-export-actions-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}
.custom-export-history-shell {
    flex: 1 1 auto;
    min-height: 0;
}
.custom-export-history-row {
    cursor: pointer;
}
.custom-export-history-row:hover {
    background: var(--bg-sunken);
}
.custom-export-history-row--selected {
    background: var(--table-row-selected, #e5e7eb);
}
.custom-export-history-name {
    font-weight: 700;
}
.custom-export-history-actions {
    white-space: nowrap;
}

.master-data-table-shell {
    background: var(--bg-raised);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
    max-height: min(70vh, 42rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.master-data-shell--customers {
    flex: 1;
    min-height: 0;
    /* Keep a slight blank strip so the right edge (after AR Code / Billing) is not clipped */
    padding-right: 0.75rem;
    box-sizing: border-box;
}
#master-locations-view .bo-table-scroll-wrap.erp-queue-table-wrap--bo-fill {
    box-sizing: border-box;
    /* Trailing gutter inside the bordered table frame */
    padding-right: 0.65rem;
}
.md-locations-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    box-sizing: border-box;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
    margin: 0 0 0.75rem;
}
.md-customers-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}
.md-locations-toolbar .master-data-search-wrap {
    flex: 1 1 16rem;
    min-width: 12rem;
    margin: 0;
}
#master-locations-view .master-data-table-shell--locations-fill,
#master-personnel-view .master-data-table-shell--locations-fill {
    flex: none;
    min-height: 0;
    max-height: none;
    overflow: visible;
    overscroll-behavior: visible;
}
#master-locations-view.nscc-view-fs.view-section.active {
    min-height: 100%;
}
#master-personnel-view.nscc-view-fs.view-section.active {
    min-height: 100%;
}
#master-locations-view.nscc-view-fs .master-data-shell--customers {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
#master-personnel-view.nscc-view-fs .master-data-shell--customers {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
#master-locations-view.nscc-view-fs .master-data-table-shell--locations-fill {
    flex: 1;
    min-height: 0;
}
#master-personnel-view.nscc-view-fs .master-data-table-shell--locations-fill {
    flex: 1;
    min-height: 0;
}

/* Legacy personnel panel selectors ??? kept for inactive dual-scroll markup if any */

/* Personnel: scroll rails on all four sides (synced to the table shell) */
.md-dual-scroll {
    --md-dual-rail: 14px;
    display: grid;
    grid-template-columns: var(--md-dual-rail) minmax(0, 1fr) var(--md-dual-rail);
    grid-template-rows: var(--md-dual-rail) minmax(0, 1fr) var(--md-dual-rail);
    max-height: min(70vh, 42rem);
    background: var(--bg-raised);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-sizing: border-box;
}
.md-dual-scroll .master-data-table-shell {
    grid-column: 2;
    grid-row: 2;
    max-height: none;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    /* Keep overflow for wheel/touch; hide native bars ? rails are the UI */
    scrollbar-width: none;
}
.md-dual-scroll .master-data-table-shell::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.md-dual-scroll-corner {
    background: var(--bg-sunken);
}
.md-h-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--bg-sunken);
    scrollbar-width: thin;
}
.md-h-scroll-top { grid-column: 2; grid-row: 1; }
.md-h-scroll-bottom { grid-column: 2; grid-row: 3; }
.md-v-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-sunken);
    scrollbar-width: thin;
}
.md-v-scroll-left { grid-column: 1; grid-row: 2; }
.md-v-scroll-right { grid-column: 3; grid-row: 2; }
.md-scroll-spacer-h {
    height: 1px;
    pointer-events: none;
}
.md-scroll-spacer-v {
    width: 1px;
    pointer-events: none;
}
.md-dual-scroll .md-h-scroll::-webkit-scrollbar,
.md-dual-scroll .md-v-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.md-dual-scroll .md-h-scroll::-webkit-scrollbar-thumb,
.md-dual-scroll .md-v-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong, var(--border));
    border-radius: 8px;
    border: 2px solid var(--bg-sunken);
}
.md-dual-scroll .md-h-scroll::-webkit-scrollbar-track,
.md-dual-scroll .md-v-scroll::-webkit-scrollbar-track {
    background: var(--bg-sunken);
}

#master-other-locations-view.nscc-view-fs.view-section.active,
#master-fleet-view.nscc-view-fs.view-section.active,
#back-office-view.nscc-view-fs.view-section.active {
    min-height: 100%;
}
#master-personnel-view.nscc-view-fs .master-data-shell,
#master-other-locations-view.nscc-view-fs .master-data-shell,
#master-fleet-view.nscc-view-fs .master-data-shell,
#back-office-view.nscc-view-fs .master-data-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
#master-other-locations-view.nscc-view-fs .master-data-table-shell,
#master-fleet-view.nscc-view-fs .master-data-table-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* ERP Connect ? normal: scroll via views-container; fullscreen: bounded viewport + panel scroll.
   Do NOT apply to #back-office-payroll-panel (HR / Payroll) ? those must scroll inside the shell. */
#back-office-view.view-section.active:not(.nscc-view-fs):not(:has(#back-office-payroll-panel)) {
    display: block;
    height: auto;
    min-height: calc(100vh - 8.5rem);
    overflow: visible;
}
#back-office-view.view-section.active.nscc-view-fs {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}
#back-office-view .erp-connect-header {
    flex: 0 0 auto;
    margin-bottom: 0.65rem;
    min-width: 0;
}
#back-office-view .erp-connect-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}
#back-office-view .erp-connect-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}
#back-office-view .erp-connect-role-badge {
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
    align-self: center;
}
#back-office-view .nscc-erp-panel--flat .nscc-erp-tabs {
    flex: 0 0 auto;
}
#back-office-view .nscc-erp-panel--flat .nscc-erp-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
#back-office-view .nscc-erp-panel--flat .nscc-erp-tab-panel.active {
    display: flex;
    flex-direction: column;
}
#back-office-view #nscc-erp-panel-invoices .erp-invoice-types,
#back-office-view #nscc-erp-panel-admin .erp-inbound-summary,
#back-office-view #nscc-erp-panel-admin .erp-escalation-root {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
#back-office-view .erp-queue-table-wrap {
    min-width: 0;
    overflow: auto;
}
#back-office-view .erp-queue-table th,
#back-office-view .erp-queue-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}
#back-office-view .erp-queue-table .erp-queue-nowrap {
    white-space: nowrap;
}
#back-office-view .erp-bridge-health-line,
#back-office-view .erp-request-status-line,
#back-office-view .erp-queue-counts {
    overflow-wrap: anywhere;
    word-break: break-word;
}
#back-office-view .erp-connect-header-row > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}
#back-office-view .erp-connect-header-row .nscc-toolbar-actions-end {
    flex: 0 0 auto;
}
#back-office-view .erp-queue-table-wrap--compact {
    max-height: min(28vh, 240px);
    flex: 0 0 auto;
}
#back-office-view.nscc-view-fs .nscc-erp-tab-panel.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
#back-office-view.nscc-view-fs .erp-queue-table-wrap--compact {
    max-height: min(32vh, 280px);
}

/* Personnel name-cell demographics (plain text under employee name) */
.md-person-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 200px;
}
.md-person-identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.md-person-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}
.md-person-name-row .md-person-name {
    flex: 1 1 auto;
    min-width: 0;
}
.md-person-employee-id {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.md-person-title-line {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.25;
}
.md-person-title-line--edit {
    cursor: pointer;
}
.md-person-title-line--edit:hover {
    color: var(--brand-light);
    text-decoration: underline;
}
.md-person-title-line--empty {
    font-style: italic;
    color: var(--text-muted);
}
.md-person-name {
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.md-person-demo-plain {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary);
    font-weight: 500;
    max-width: 28rem;
    white-space: normal;
}
.md-person-demo-plain--empty {
    color: var(--text-muted);
    font-style: italic;
}
.md-person-demo-sep {
    color: var(--text-muted);
}
.md-person-demo-line {
    display: block;
}
.md-person-demo-addr {
    color: var(--text-primary);
    font-weight: 600;
}
.md-person-demo-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* Personnel multi-notes modal */
.md-personnel-notes-modal {
    max-width: 640px;
    width: 95vw;
}
#personnel-notes-body {
    max-height: 70vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.md-personnel-notes-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.md-personnel-notes-section-title {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.md-personnel-notes-add {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
}
.md-personnel-notes-add-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}
.md-personnel-note-input,
.md-personnel-note-edit-input {
    width: 100%;
    min-height: 4rem;
    resize: vertical;
    box-sizing: border-box;
}
.md-personnel-notes-readonly-banner {
    padding: 0.55rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.md-personnel-notes-list,
.md-personnel-notes-history {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.md-personnel-note-card,
.md-personnel-history-row {
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
}
.md-personnel-note-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}
.md-personnel-note-meta {
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.md-personnel-note-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.md-personnel-note-edit-panel {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.md-personnel-notes-empty {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}
/* Personnel pay history (AHP) */
.md-personnel-pay-modal {
    max-width: 860px;
    width: 96vw;
}
#personnel-pay-history-body {
    max-height: 72vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.md-personnel-pay-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
    font-size: 0.82rem;
    color: var(--text-primary);
}
.md-personnel-pay-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
.md-personnel-pay-table-wrap {
    overflow: auto;
    max-height: 42vh;
}
.md-personnel-pay-table-wrap td.num,
.md-personnel-pay-table-wrap th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .md-personnel-pay-summary {
        grid-template-columns: 1fr;
    }
}
.md-personnel-history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.md-personnel-history-action {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.md-personnel-history-action--added {
    color: #34C759;
    background: rgba(52, 199, 89, 0.12);
}
.md-personnel-history-action--edited {
    color: #007AFF;
    background: rgba(0, 122, 255, 0.12);
}
.md-personnel-history-action--deleted {
    color: #FF3B30;
    background: rgba(255, 59, 48, 0.12);
}
.md-personnel-history-detail {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.35;
}
.md-personnel-history-old {
    text-decoration: line-through;
    color: var(--text-muted);
}
.master-data-table--locations {
    --md-loc-rate-grid: minmax(5.75rem, auto) minmax(4.75rem, 0.85fr) minmax(6.75rem, 1fr) minmax(6.75rem, 1fr);
    min-width: 2280px;
    user-select: none;
    -webkit-user-select: none;
}
.master-data-table--locations input,
.master-data-table--locations textarea,
.master-data-table--locations .md-loc-field {
    user-select: text;
    -webkit-user-select: text;
}
.master-data-table--locations th,
.master-data-table--locations td {
    vertical-align: top;
}
.master-data-table--locations thead th {
    vertical-align: top;
}
.master-data-table--locations th.md-loc-customer-col,
.master-data-table--locations td.md-loc-customer-cell {
    min-width: 18rem;
    width: 18rem;
    max-width: 26rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.master-data-table--locations th.md-loc-customer-id-col,
.master-data-table--locations td.md-loc-customer-id-cell {
    min-width: 6.5rem;
    width: 6.5rem;
    max-width: 9rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.master-data-table--locations th.md-loc-employee-id-col,
.master-data-table--locations td.md-loc-employee-id-cell {
    min-width: 6.5rem;
    width: 6.5rem;
    max-width: 9rem;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    line-height: 1.35;
}
.master-data-table--locations-accordion {
    /* Collapsed summary is 4 columns ? do not inherit the wide expanded-table min-width */
    table-layout: fixed;
    width: 100%;
    min-width: 0 !important;
}
.master-data-table--locations-accordion th.md-loc-employee-id-col,
.master-data-table--locations-accordion td.md-loc-employee-id-cell {
    width: 12%;
    min-width: 6.5rem;
    max-width: none;
}
.master-data-table--locations-accordion th.md-loc-customer-col,
.master-data-table--locations-accordion td.md-loc-customer-cell {
    width: 34%;
    min-width: 12rem;
    max-width: none;
}
.master-data-table--locations-accordion th.md-loc-ar-code-col,
.master-data-table--locations-accordion td.md-loc-ar-code-cell {
    width: 14%;
    min-width: 6rem;
    max-width: none;
    /* Breathing room after AR Code before Billing / right edge */
    padding-right: 1rem !important;
}
.master-data-table--locations-accordion th.md-loc-billing-col,
.master-data-table--locations-accordion td.md-loc-billing-cell {
    width: 40%;
    min-width: 12rem;
    max-width: none;
    padding-right: 0.85rem !important;
}
.master-data-table--locations tr.md-loc-row {
    cursor: pointer;
}
.master-data-table--locations tr.md-loc-row--inactive {
    opacity: 0.72;
}
.master-data-table--locations tr.md-loc-row:hover {
    background: var(--bg-raised, #fafafa);
}
.master-data-table--locations tr.md-loc-row--expanded {
    background: var(--bg-sunken, #e4e4e7);
}
.master-data-table--locations tr.md-loc-row:focus-visible {
    outline: 2px solid var(--border-focus, #3f3f46);
    outline-offset: -2px;
}
.md-loc-summary-billing {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}
.md-loc-summary-billing .md-loc-info-box {
    flex: 1 1 auto;
    min-width: 0;
}
.md-loc-expand-chevron {
    flex: 0 0 auto;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted, #64748b);
    user-select: none;
}
.master-data-table--locations tr.md-loc-detail-row > td {
    padding: 0.65rem 0.7rem 0.85rem;
    background: var(--bg-sunken, #e4e4e7);
    border-top: none;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
}
.master-data-table--locations tr.md-loc-detail-row[hidden] {
    display: none !important;
}
.md-loc-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem 0.75rem;
    align-items: start;
}
.md-loc-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.md-loc-detail-item--actions {
    justify-content: flex-end;
}
.md-loc-detail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.md-loc-detail-item .md-loc-field {
    width: 100%;
    max-width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.3rem 0.4rem;
    color: var(--text-primary);
    font-size: 0.8rem;
    box-sizing: border-box;
}
.md-loc-info-box {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-sunken);
    padding: 0.5rem 0.55rem;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.md-loc-info-box__head {
    padding-bottom: 0.25rem;
    margin-bottom: 0.05rem;
    border-bottom: 1px solid var(--border);
}
.md-loc-info-box__id {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    word-break: break-word;
}
.md-loc-info-box__id--empty {
    color: var(--text-muted);
    opacity: 0.65;
    font-weight: 600;
}
.md-loc-info-box__name {
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.md-loc-info-box__sub {
    font-size: 0.62rem;
    line-height: 1.3;
}
.md-loc-info-box__demographics {
    padding-top: 0.15rem;
    border-top: 1px solid var(--border);
}
.md-loc-info-box__demographics .md-loc-demo-plain {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-primary);
    font-weight: 700;
}
.md-loc-info-box__demographics .md-loc-demo-plain--empty {
    color: var(--text-secondary);
    font-weight: 500;
    font-style: italic;
}
.md-loc-info-box__demographics .md-loc-demo-addr {
    color: var(--text-primary);
    font-weight: 700;
}
.md-loc-info-box__demographics .md-loc-demo-line {
    color: var(--text-secondary);
    font-weight: 600;
}
.md-loc-info-box__demographics .md-loc-demo-coords {
    color: var(--text-secondary);
    font-weight: 600;
}
.md-loc-info-box__demographics .md-loc-demo-link {
    color: var(--text-primary);
    font-weight: 700;
}
.md-loc-employee-id-value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.md-loc-employee-id-empty {
    color: var(--text-muted);
    opacity: 0.65;
}
.md-loc-info-box--customer-id,
.md-loc-info-box--ar-code {
    align-items: stretch;
    justify-content: center;
    min-height: 2.35rem;
}
.md-loc-info-box--customer-id .md-loc-info-box__id,
.md-loc-info-box--ar-code .md-loc-info-box__id {
    width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}
.master-data-table--locations th.md-loc-ar-code-col,
.master-data-table--locations td.md-loc-ar-code-cell {
    min-width: 6.5rem;
    width: 6.5rem;
    max-width: 9rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.master-data-table--locations th.md-loc-billing-col,
.master-data-table--locations td.md-loc-billing-cell {
    min-width: 18rem;
    width: 18rem;
    max-width: 26rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.master-data-table--locations th.md-loc-legacy-erp-col,
.master-data-table--locations td.md-loc-legacy-erp-cell {
    min-width: 11rem;
    width: 12rem;
    max-width: 16rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.md-loc-info-box--legacy-erp {
    padding: 0.4rem 0.55rem;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
    min-height: 2.2rem;
}
.md-loc-info-box--legacy-erp.md-loc-info-box--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.md-loc-customer-name {
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
}
.md-loc-customer-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    min-width: 0;
}
.md-loc-customer-name-row .md-loc-customer-name {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}
.md-loc-customer-id-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.12rem;
    flex-shrink: 0;
}
.md-loc-customer-id {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.md-loc-customer-ar-code {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0.9;
    letter-spacing: 0.02em;
}
.md-loc-customer-unique-id {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0.85;
    letter-spacing: 0.02em;
}
.md-loc-demo-plain {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: normal;
}
.md-loc-demo-plain--empty {
    color: var(--text-muted);
    font-style: italic;
}
.md-loc-demo-sep {
    color: var(--text-muted);
}
.md-loc-demo-line {
    display: block;
}
.md-loc-demo-addr {
    color: var(--text-primary);
    font-weight: 600;
}
.md-loc-demo-coords {
    font-family: monospace;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}
.md-loc-demo-link {
    color: var(--text-primary);
    text-decoration: underline;
    word-break: break-all;
}
.md-loc-demo-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
}
.master-data-table--locations th.md-loc-address-col,
.master-data-table--locations td.md-loc-address-cell {
    min-width: 22rem;
    width: 22rem;
    max-width: 32rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.md-loc-th-two-line-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}
.md-loc-th-two-line-text span {
    display: block;
}
.md-th-editable-mark::before {
    content: '\270E';
    opacity: 0.6;
    font-size: 0.85em;
}
.md-loc-service-check {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-primary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    white-space: nowrap;
    line-height: 1.3;
}
.md-loc-service-check input {
    cursor: pointer;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #000;
}
/* Personnel role checkboxes ??? black like Customers screen (not grayed brand-light) */
#master-personnel-view input[type="checkbox"].md-role,
#master-personnel-view input[type="checkbox"].md-platform-role {
    width: 16px;
    height: 16px;
    accent-color: #000;
    opacity: 1;
}
#master-personnel-view input[type="checkbox"].md-role:disabled,
#master-personnel-view input[type="checkbox"].md-platform-role:disabled {
    opacity: 1;
    accent-color: #000;
    cursor: not-allowed;
}
.master-data-table {
    width: 100%;
    border-collapse: collapse;
}
.master-data-table th,
.master-data-table td {
    text-align: left;
}
.master-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-sunken);
    box-shadow: 0 1px 0 var(--border);
}
.master-data-search-wrap {
    margin: 0 0 0.75rem;
}
.master-data-search {
    width: 100%;
    max-width: 28rem;
    box-sizing: border-box;
    padding: 0.45rem 0.65rem;
    font-size: 0.8125rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    color: var(--text-primary);
}
.master-data-search:focus {
    outline: none;
    border-color: var(--nscc-line, #000000);
}
.master-data-search-empty {
    margin: 1rem 0 0;
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-sunken);
}

/* Patrol and Guard Gantt timeline layout styling */
#patrol-schedule-view .patrol-schedule-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    box-sizing: border-box;
}

#patrol-schedule-view .patrol-schedule-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
    min-height: 3.25rem;
    box-sizing: border-box;
}

#patrol-schedule-view .patrol-schedule-toolbar-start {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

#patrol-schedule-view .patrol-schedule-toolbar-end {
    flex-shrink: 0;
    gap: 0.75rem;
}

#patrol-schedule-view .patrol-schedule-pdf-btn {
    background: var(--brand-light) !important;
    color: var(--bg-card) !important;
    font-weight: 800;
    border: 2px solid var(--border) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.75rem;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

#patrol-schedule-view .patrol-schedule-date-slot {
    flex-shrink: 0;
    min-width: 11.5rem;
}

#patrol-schedule-view .patrol-schedule-date-slot .nscc-custom-date-text {
    min-width: 5.75rem;
    text-align: center;
    display: inline-block;
}

#guard-schedule-view .guard-schedule-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    box-sizing: border-box;
}

#guard-schedule-view .guard-schedule-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
    min-height: 3.25rem;
    box-sizing: border-box;
}

#guard-schedule-view .guard-schedule-toolbar-start {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

#guard-schedule-view .guard-schedule-date-slot {
    flex-shrink: 0;
    min-width: 11.5rem;
}

#guard-schedule-view .guard-schedule-date-slot .nscc-custom-date-text {
    min-width: 5.75rem;
    text-align: center;
    display: inline-block;
}

#guard-schedule-view .guard-schedule-toolbar-end {
    flex-shrink: 0;
    gap: 0.75rem;
    margin-left: auto;
}

#guard-schedule-view .guard-schedule-pdf-btn {
    background: var(--brand-light) !important;
    color: var(--bg-card) !important;
    font-weight: 800;
    border: 2px solid var(--border) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.75rem;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

#patrol-schedule-view .gantt-fixed-layout,
#guard-schedule-view .gantt-fixed-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
}
#patrol-schedule-view .gantt-fixed-couriers,
#guard-schedule-view .gantt-fixed-couriers {
    background: var(--bg-raised);
    border-right: 2px solid var(--border);
    z-index: 10;
}
#patrol-schedule-view .gantt-fixed-corner,
#guard-schedule-view .gantt-fixed-corner {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-sunken);
    border-bottom: 2px solid var(--border);
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#patrol-schedule-view .gantt-fixed-courier-label,
#guard-schedule-view .gantt-fixed-courier-label {
    height: 98px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 2px solid var(--border);
    box-sizing: border-box;
}
#patrol-schedule-view .gantt-fixed-layout .gantt-scroll-box,
#guard-schedule-view .gantt-fixed-layout .gantt-scroll-box {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#patrol-schedule-view .gantt-time-canvas,
#guard-schedule-view .gantt-time-canvas {
    position: relative;
}
#patrol-schedule-view .gantt-time-canvas .gantt-hours-row,
#guard-schedule-view .gantt-time-canvas .gantt-hours-row {
    display: flex;
    height: 42px;
    background: var(--bg-sunken);
    border-bottom: 2px solid var(--border);
}
#patrol-schedule-view .gantt-time-canvas .gantt-hour,
#guard-schedule-view .gantt-time-canvas .gantt-hour {
    flex: 0 0 auto;
    padding: 0.7rem 0.35rem;
    text-align: center;
    border-right: 2px solid var(--border);
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--text-muted);
    box-sizing: border-box;
}
#patrol-schedule-view .gantt-time-row,
#guard-schedule-view .gantt-time-row {
    position: relative;
    height: 98px;
    border-bottom: 2px solid var(--border);
    box-sizing: border-box;
}
#patrol-schedule-view .gantt-fixed-courier-label,
#guard-schedule-view .gantt-fixed-courier-label {
    border-bottom: 2px solid var(--border);
}
#patrol-schedule-view .gantt-fixed-layout .gantt-trip-block,
#guard-schedule-view .gantt-fixed-layout .gantt-trip-block {
    top: 14px;
    height: 68px !important;
}

/* Guard Scheduler: re-enable click + drag-drop on empty time slots, and inline quick-scheduler */
#guard-schedule-view .gantt-time-row .nscc-time-slot--interactive {
    pointer-events: auto;
}
#guard-schedule-view .nscc-time-slot.nscc-slot-dragover {
    background: rgba(52, 199, 89, 0.25);
    box-shadow: inset 0 0 0 2px #34C759;
}
#guard-schedule-view .guard-quick-sched select:focus {
    outline: 2px solid var(--brand-light);
    outline-offset: 0;
}

/* Guard Scheduler ? timeline text scale (aligned with courier gantt) */
#guard-schedule-view .gantt-fixed-corner {
    font-size: 0.8125rem;
}
#guard-schedule-view .gantt-time-canvas .gantt-hour {
    font-size: 0.8125rem;
}
#guard-schedule-view .gantt-days-row > div {
    font-size: 0.875rem;
}
#guard-schedule-view .gantt-header-line {
    font-size: 0.875rem;
}
#guard-schedule-view .gantt-fixed-courier-label .guard-sched-name {
    font-size: 1rem;
}
#guard-schedule-view .gantt-fixed-courier-label .guard-sched-detail {
    font-size: 0.8125rem;
}
#patrol-schedule-view .patrol-sched-status-row,
#guard-schedule-view .guard-sched-status-row {
    margin-bottom: 0.15rem;
}
#patrol-schedule-view .patrol-sched-name,
#guard-schedule-view .guard-sched-name {
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    word-break: break-word;
}
#patrol-schedule-view .patrol-sched-name {
    font-size: 0.85rem;
}
#guard-schedule-view .guard-sched-customer-name {
    display: block;
    font-size: 1rem;
    line-height: 1.25;
    word-break: break-word;
}
#patrol-schedule-view .patrol-sched-sites,
#guard-schedule-view .guard-sched-detail {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
    word-break: break-word;
}
#patrol-schedule-view .patrol-sched-sites {
    font-size: 0.68rem;
}
/* Guard shift blocks: same 2px black border as patrol shift blocks
   (see .gantt-trip-block.patrol-shift-block below) — Matt 2026-09-12
   "even though guard schedules aren't colors they should have the
   same schedule borders just black. (patrol as well)". Pinned with the
   #guard-schedule-view id so the base .gantt-trip-block's 4px status
   border (used by courier trip blocks) can never leak through. */
#guard-schedule-view .gantt-trip-block.guard-shift-block,
#guard-schedule-view .gantt-fixed-layout .gantt-trip-block.guard-shift-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer;
    pointer-events: auto;
    box-sizing: border-box !important;
}
#guard-schedule-view .guard-shift-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #fff;
    flex: 0 0 auto;
}
#guard-schedule-view .guard-shift-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    font-weight: 700;
}
#guard-schedule-view .gantt-fixed-layout .gantt-trip-block .guard-shift-name {
    font-size: 0.875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
#guard-schedule-view .gantt-fixed-layout .gantt-trip-block .guard-shift-time {
    font-size: 0.72rem;
    opacity: 0.85;
}
#guard-schedule-view .badge-unassigned {
    font-size: 0.72rem;
}

/* Custom Date Selector ? compact nscc-date-nav pattern */
.nscc-custom-date-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    user-select: none;
    box-sizing: border-box;
    height: 1.5rem;
    position: relative;
}
.nscc-custom-date-arrow {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    border-radius: 50%;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    font-size: 0.65rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    outline: none;
    padding: 0;
    box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000);
}
.nscc-custom-date-arrow:hover {
    background: var(--bg-sunken);
    color: var(--text-primary);
}
.nscc-custom-date-text {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-primary);
    cursor: pointer;
    letter-spacing: 0.02em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
}
.nscc-custom-date-text:hover {
    color: var(--text-primary);
}
.nscc-custom-date-cal {
    background: transparent;
    border: none;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease;
    outline: none;
    color: var(--text-primary);
}
.nscc-custom-date-cal:hover {
    transform: scale(1.1);
}
.nscc-custom-date-today {
    border: 2px solid var(--border);
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0 0.45rem;
    height: 1.5rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s ease;
    outline: none;
    box-shadow: 2px 2px 0 var(--border);
    line-height: 1;
    white-space: nowrap;
}
.nscc-custom-date-today:hover {
    background: var(--bg-sunken);
}

/* Segmented Shift Layout for Patrol Loops.
   Border matches Guard shift blocks (2px black) — Matt 2026-09-12
   "even though guard schedules aren't colors they should have the same
   schedule borders just black. (patrol as well)". Pinned with the
   #patrol-schedule-view id so the base .gantt-trip-block's 4px status
   border can never leak through even if a state class changes. */
#patrol-schedule-view .gantt-trip-block.patrol-shift-block,
.gantt-trip-block.patrol-shift-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
    box-sizing: border-box !important;
}
.gantt-shift-header {
    height: 24px !important;
    width: 100% !important;
    align-self: stretch !important;
    background: #000000 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 8px !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: var(--nscc-line-w, 1.5px) solid var(--nscc-line, #000000) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    cursor: pointer;
}
.gantt-shift-loop-name {
    cursor: pointer;
    flex-shrink: 0;
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline dotted rgba(255, 255, 255, 0.35);
}
.gantt-shift-loop-name:hover {
    color: #FFCC00;
}
.gantt-shift-officer-chip {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 900;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-shift-officer-chip:hover {
    background: rgba(255, 255, 255, 0.3);
}
.gantt-shift-officer-chip img {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #fff;
    flex-shrink: 0;
}
.gantt-shift-times {
    cursor: pointer;
    font-weight: 400;
    opacity: 0.85;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.62rem;
    text-transform: none;
    letter-spacing: normal;
}
.gantt-shift-times:hover {
    opacity: 1;
    color: #FFCC00;
}
.gantt-shift-segments {
    display: flex !important;
    flex-grow: 1 !important;
    height: auto !important;
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    gap: 3px !important;
    padding: 4px 5px !important;
    align-items: stretch !important;
}
.gantt-shift-segment {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 6px !important;
    box-sizing: border-box !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.15 !important;
    text-align: center !important;
    border: 1px solid var(--nscc-line, #000000) !important;
    border-radius: 3px !important;
    cursor: pointer;
}
.gantt-shift-segment:hover {
    filter: brightness(1.1);
}
/* The patrol block borrows .gantt-trip-block only for positioning. The outlined
   status-pill theme further down ("html body .gantt-trip-block" and
   ".gantt-trip-block div/span") forces every trip block and its children onto
   the theme ink colour with !important, which turned the loop name and officer
   chip black-on-black and painted every site segment in the same ink. Pin the
   patrol block's own palette back with higher specificity: white on the black
   header bar, and each segment's own text colour (set inline via --nscc-seg-*)
   on its own background. */
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block,
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-header,
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-header div,
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-header span,
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-header strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-header {
    background: #000000 !important;
    background-color: #000000 !important;
}
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-loop-name:hover,
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-times:hover {
    color: #FFCC00 !important;
    -webkit-text-fill-color: #FFCC00 !important;
}
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-segment,
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-segment span,
html body #patrol-schedule-view .gantt-trip-block.patrol-shift-block .gantt-shift-segment div {
    background: var(--nscc-seg-bg, #7f8c8d) !important;
    background-color: var(--nscc-seg-bg, #7f8c8d) !important;
    color: var(--nscc-seg-text, #ffffff) !important;
    -webkit-text-fill-color: var(--nscc-seg-text, #ffffff) !important;
}

.print-only {
    display: none !important;
}

/* --- Daily Pulse toolbar --- */
#daily-pulse-view .daily-pulse-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    width: 100%;
}

#daily-pulse-view .daily-pulse-save-pdf {
    margin-left: auto;
    background: var(--brand-light);
    color: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, monospace);
    font-size: 10pt;
    padding: 6px 12px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

#daily-pulse-view .daily-pulse-refresh-btn {
    background: var(--brand);
    color: #fff;
    border: 2px solid var(--brand-light);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, monospace);
    font-size: 10pt;
    padding: 6px 12px;
    font-weight: 900;
    cursor: pointer;
}

/* Dispatch trip list paging (2026-10-12): the "Showing N of M · Show 100 more" row. */
#primary-dispatch-table-body tr.nscc-dispatch-more td {
    padding: 0.5rem 0.55rem;
    text-align: center;
    color: var(--text-muted);
    font-family: monospace;
    font-size: 10pt;
    font-weight: 700;
}
#primary-dispatch-table-body tr.nscc-dispatch-more button { font-weight: 800; }

#primary-dispatch-table-body tr.nscc-dispatch-row-focus {
    background: transparent !important;
    outline: 2px solid #FF9500;
    outline-offset: -2px;
}

.nscc-pulse-action-strip {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 4px;
    padding: 0.55rem 0.65rem;
    background: var(--bg-card);
}

.nscc-pulse-action-strip--active {
    background: var(--bg-sunken);
    border-color: var(--border);
}

.nscc-pulse-action-strip--clear {
    background: transparent;
    border: 4px solid #34C759;
    color: #000000;
}

.nscc-pulse-action-strip__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.45rem;
    gap: 0.5rem;
    padding: 0.35rem 0.45rem;
    background: var(--bg-raised);
    border: 2px solid var(--border);
    border-radius: 3px;
}

.nscc-pulse-action-strip__title {
    font-weight: 900;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 9.5pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nscc-pulse-action-strip--clear .nscc-pulse-action-strip__title {
    color: var(--text-primary);
    font-size: 9pt;
}

.nscc-pulse-action-strip__count {
    font-size: 8pt;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-weight: 800;
    background: var(--bg-card, #fff);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 8px;
    padding: 0.1rem 0.45rem;
}

.nscc-pulse-action-strip__clear-detail {
    font-size: 8.5pt;
    color: var(--text-primary);
    margin-top: 0.25rem;
    font-weight: 700;
    line-height: 1.35;
}

.nscc-pulse-action-strip__chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    align-items: stretch;
}

/* Collapsible strip: hide chips past the first row (4 = grid-template-columns)
   until the "Show N more" toggle sets --expanded on the strip. */
.nscc-pulse-action-strip--collapsible:not(.nscc-pulse-action-strip--expanded)
    .nscc-pulse-action-strip__chips .nscc-pulse-action-chip:nth-child(n+5) {
    display: none;
}

/* The old .nscc-pulse-action-strip__toggle button is retired — the whole
   .nscc-pulse-action-strip__header bar is now the toggle when the strip has
   overflow. Any legacy markup still styled by this selector keeps the same
   look but is no longer rendered by nscc-pulse-actions.js. */

/* Collapsible header is a click target: pointer cursor, hover feedback, and
   a keyboard focus ring. When not collapsible (nothing to expand), the
   header stays static — cursor: default. */
.nscc-pulse-action-strip--collapsible .nscc-pulse-action-strip__header {
    cursor: pointer;
    user-select: none;
}
.nscc-pulse-action-strip--collapsible .nscc-pulse-action-strip__header:hover {
    background: var(--bg-elevated, var(--bg-raised));
}
.nscc-pulse-action-strip--collapsible .nscc-pulse-action-strip__header:focus-visible {
    outline: 2px solid var(--brand-light, #4c8dff);
    outline-offset: 2px;
}

.nscc-pulse-action-strip__caret {
    font-size: 9pt;
    font-weight: 900;
    color: var(--text-primary);
    padding: 0 0.35rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.nscc-pulse-action-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    min-width: 0;
    width: 100%;
    min-height: 92px;
    height: 100%;
    padding: 0.45rem 0.55rem;
    margin: 0;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-family: monospace;
    box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000);
    color: var(--text-primary);
    /* Same neutral fill as regular rectangular boxes; status color stays on the badge */
    background: var(--bg-card);
    background-color: var(--bg-card);
    box-sizing: border-box;
}

.nscc-pulse-action-chip__status-row {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 0;
}

.nscc-pulse-action-chip__status {
    display: inline-block;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    text-align: left;
    font-size: 7pt;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 0.15rem 0.35rem;
    border-radius: 8px;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    box-sizing: border-box;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.nscc-pulse-action-chip__status.nscc-pulse-action-chip--critical,
.nscc-pulse-action-chip__status.nscc-pulse-action-chip--unassigned {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #FF3B30 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.nscc-pulse-action-chip__status.nscc-pulse-action-chip--warning {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #FF9500 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.nscc-pulse-action-chip__status.nscc-pulse-action-chip--jeopardy {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #FF3B30 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-weight: 900 !important;
}

/* Outer chip: always neutral box fill (no pink/red severity washes) */
.nscc-pulse-action-chip--critical,
.nscc-pulse-action-chip.nscc-pulse-action-chip--critical,
.nscc-pulse-action-chip--unassigned,
.nscc-pulse-action-chip.nscc-pulse-action-chip--unassigned,
.nscc-pulse-action-chip--warning,
.nscc-pulse-action-chip.nscc-pulse-action-chip--warning,
.nscc-pulse-action-chip--jeopardy,
.nscc-pulse-action-chip.nscc-pulse-action-chip--jeopardy {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border-color: var(--nscc-line, #000000) !important;
}

.nscc-pulse-action-chip--jeopardy .nscc-pulse-action-chip__status,
.nscc-pulse-action-chip.nscc-pulse-action-chip--jeopardy .nscc-pulse-action-chip__status {
    font-weight: 900 !important;
}

.nscc-pulse-action-chip--jeopardy .nscc-pulse-action-chip__status-icon,
.nscc-pulse-action-chip.nscc-pulse-action-chip--jeopardy .nscc-pulse-action-chip__status-icon {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.nscc-pulse-action-chip__category {
    font-size: 7pt;
    font-weight: 900;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nscc-pulse-action-chip__label {
    font-size: 8.5pt;
    font-weight: 800;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    line-height: 1.25;
}

.nscc-pulse-action-chip__status-icon {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.nscc-pulse-action-chip__detail {
    font-size: 7.5pt;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    line-height: 1.2;
    font-weight: 700;
}

.nscc-pulse-action-chip:hover {
    background: var(--bg-raised);
    background-color: var(--bg-raised);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--nscc-hard-shadow, #000);
}

.nscc-pulse-trip-segment {
    min-height: 6px;
}

/* Daily Pulse ? courier trip segment hover detail (wide card, modal-style) */
.nscc-pulse-segment-tip {
    position: fixed;
    /* Above the left-nav sidebar (z-index 10060) so it never renders
       underneath it near the left edge of the screen. */
    z-index: 10075;
    width: 380px;
    max-width: 95vw;
    padding: 0.65rem 0.75rem 0.7rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 4px 4px 0 var(--nscc-hard-shadow, #000);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    box-sizing: border-box;
}
.nscc-pulse-segment-tip[hidden] {
    display: none !important;
}
.nscc-pulse-segment-tip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1.5px solid var(--border);
}
.nscc-pulse-segment-tip__trip-id {
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.nscc-pulse-segment-tip__status-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 800;
    border: 4px solid var(--nscc-status-border, var(--nscc-line, #000));
    background: transparent;
    color: var(--text-primary);
    text-transform: uppercase;
    white-space: nowrap;
}
.nscc-pulse-segment-tip__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.65rem;
}
.nscc-pulse-segment-tip__block {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
.nscc-pulse-segment-tip__block--full {
    grid-column: 1 / -1;
}
.nscc-pulse-segment-tip__label {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.1;
}
.nscc-pulse-segment-tip__value {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    word-break: break-word;
}
.nscc-pulse-segment-tip__courier-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.nscc-pulse-segment-tip__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
}

.nscc-tw-dual {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}

select.nscc-tw-start,
.nscc-tw-dual .nscc-tw-start,
.nscc-tw-dual .nscc-tw-end {
    min-width: 10.5rem;
    max-width: 100%;
    font-size: 10pt;
}

.nscc-tw-sep {
    color: var(--text-muted);
    font-weight: 800;
    font-size: 10pt;
    user-select: none;
}

.nscc-dispatch-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
    border: var(--nscc-status-border-w, 4px) solid var(--nscc-status-border, var(--nscc-line, #000000));
    background: transparent;
    color: var(--text-primary);
    font-size: 9pt;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

:root.dark .nscc-pulse-action-strip--active,
body.dark-theme .nscc-pulse-action-strip--active {
    background: var(--bg-sunken);
}

:root.dark .nscc-pulse-action-strip__title,
body.dark-theme .nscc-pulse-action-strip__title,
:root.dark .nscc-pulse-action-strip__count,
body.dark-theme .nscc-pulse-action-strip__count,
:root.dark .nscc-pulse-action-strip__clear-detail,
body.dark-theme .nscc-pulse-action-strip__clear-detail,
:root.dark .nscc-pulse-action-chip,
body.dark-theme .nscc-pulse-action-chip,
:root.dark .nscc-pulse-action-chip__status,
body.dark-theme .nscc-pulse-action-chip__status,
:root.dark .nscc-pulse-action-chip__label,
body.dark-theme .nscc-pulse-action-chip__label,
:root.dark .nscc-pulse-action-chip__detail,
body.dark-theme .nscc-pulse-action-chip__detail {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.nscc-pulse-action-chip:hover .nscc-pulse-action-chip__status,
.nscc-pulse-action-chip:hover .nscc-pulse-action-chip__label,
.nscc-pulse-action-chip:hover .nscc-pulse-action-chip__detail {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.nscc-at-risk-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 1px 6px;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    background: transparent;
    border: var(--nscc-status-border-w, 4px) solid var(--status-unassigned, #FF3B30);
    border-radius: 8px;
    vertical-align: middle;
    font-family: monospace;
    box-shadow: none;
}

/* At-risk: red signal on left edge + badge only ? no pink row wash */
#primary-dispatch-table-body tr.nscc-dispatch-at-risk-row {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: inset 4px 0 0 #FF3B30;
}

.gantt-view-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1.35;
    max-width: 42rem;
}

.nscc-gantt-trip-linked,
.timeline-event-inline.nscc-gantt-trip-linked {
    outline: 3px solid #007AFF !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.25);
    z-index: 20 !important;
}

[data-timeline-trip-row].nscc-timeline-row-linked {
    background: rgba(0, 122, 255, 0.12) !important;
    box-shadow: inset 4px 0 0 #007AFF;
}

/* Dispatch alert inbox (Quick Dispatch) */
.nscc-alert-inbox__panel {
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    border-left: 4px solid #ef4444;
    border-radius: 4px;
    overflow: hidden;
}

.nscc-alert-inbox__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.nscc-alert-inbox__title {
    font-weight: 800;
    font-size: 11pt;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nscc-alert-inbox__badge {
    background: transparent;
    color: #000000;
    -webkit-text-fill-color: #000000;
    font-weight: 800;
    font-size: 0.68rem;
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #FF3B30;
}

.nscc-alert-inbox__chevron {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.nscc-alert-inbox__body {
    padding: 0 0.55rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 180px;
    overflow-y: auto;
}

.nscc-alert-inbox__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.25rem 0.15rem 0.15rem;
    border-bottom: 1px solid var(--border);
}

.nscc-alert-inbox__group-count {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 0.4rem;
    font-size: 0.62rem;
}

.nscc-alert-inbox__row {
    display: grid;
    grid-template-columns: 10px 5.5rem 1fr auto auto;
    gap: 0.35rem;
    align-items: center;
    padding: 0.3rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.68rem;
    border: 1px solid transparent;
}

.nscc-alert-inbox__row:hover {
    background: var(--bg-raised);
    border-color: var(--border);
}

.nscc-alert-inbox__row--active {
    background: rgba(0, 122, 255, 0.12);
    border-color: #007AFF;
}

.nscc-alert-inbox__sev {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nscc-alert-inbox__sev--high { background: #ef4444; }
.nscc-alert-inbox__sev--medium { background: #f59e0b; }
.nscc-alert-inbox__sev--low { background: #64748b; }

.nscc-alert-inbox__trip {
    font-family: monospace;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nscc-alert-inbox__msg {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nscc-alert-inbox__time {
    font-family: monospace;
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.nscc-alert-inbox__actions {
    display: flex;
    gap: 0.15rem;
}

.nscc-alert-inbox__btn {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0.1rem 0.25rem;
    line-height: 1.2;
}

.nscc-alert-inbox__btn--clear:hover {
    background: #ef4444;
    color: #fff;
    border-color: #b91c1c;
}

.nscc-custody-board {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    margin-bottom: 0.2rem;
    padding: 0.2rem 0.25rem;
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 149, 0, 0.35);
    border-radius: 3px;
}

.nscc-custody-board__bags {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--text-primary);
}

.nscc-custody-board__scan {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: monospace;
}

/* Trip modal (and other modals): folder tabs, not pills */
/* Admin Console tabs (see window.nsccRenderAdminConsoleTabs in app.js).
   Since 2026-09-27 the console is a screen (#admin-console-view): its
   top-level strip parks in the chrome folder-tab strip and looks exactly like
   Accounting's, and its sub-tab strip is an in-body .nscc-subfolder-nav, so
   neither needs rules of its own here. Sections not in the active tab get
   .nscc-admin-tab-hidden, and sections not in the active sub-tab of the
   active tab get .nscc-admin-subtab-hidden. A section's own env gate (the
   sample-data builder is display:none on ips) still applies underneath. */
/* Uniform tab width in System Configuration (Matt 2026-09-12:
   "make all of the menus and menu tabs in administrative console the same
   size as the first tab"). One fixed folder-tab width (2026-09-27), not a
   full-row share, so the tabs read like the main screens' folder tabs. */
#nscc-chrome-folder-tabs .nscc-syscfg-modal-tabs .nscc-erp-tab-btn,
#system-config-view .nscc-syscfg-modal-tabs .nscc-erp-tab-btn {
    flex: 0 0 7.5rem !important;
    width: 7.5rem !important;
    max-width: 7.5rem !important;
    min-width: 7.5rem !important;
    min-height: var(--nscc-folder-tab-h, 2.55rem) !important;
}
/* A launcher-only top-level tab (System Configuration, Audit runner) never
   activates in place; nudge it visually so it reads as a portal rather
   than a peer of the switchable tabs. */
.nscc-admin-modal-tabs .nscc-erp-tab-btn.is-launcher::after {
    content: " \2197";
    font-weight: 700;
    opacity: 0.75;
}
#admin-settings-modal .config-section.nscc-admin-tab-hidden,
#admin-settings-modal .config-section.nscc-admin-subtab-hidden {
    display: none !important;
}
/* Uniform Admin Console screen size — every tab reads at the same height as
   the Data & Demo screen (which is the tallest by content). Applied to the
   VISIBLE section container so the screen doesn't jump each time you switch
   tabs. Padding matches the sample-builder box. */
#admin-settings-modal .config-section:not(.nscc-admin-tab-hidden)[data-admin-group] {
    min-height: 22rem;
    box-sizing: border-box;
    padding: 0.75rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-raised);
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
}
/* System Configuration folder tabs — same shape as the Admin Console.
   Sections not in the active tab get .nscc-syscfg-tab-hidden; visible ones
   get the same uniform min-height / padded chrome so switching tabs does not
   make the modal jump. Section-level gates (menu-vis-entry hidden for
   non-admins) still hide the Menus & Tabs section underneath. */
#system-config-view .nscc-erp-tabs.nscc-syscfg-modal-tabs {
    margin: 0 0 0.75rem;
    flex: 0 0 auto;
}
#system-settings-modal .config-section.nscc-syscfg-tab-hidden {
    display: none !important;
}
#system-settings-modal .config-section:not(.nscc-syscfg-tab-hidden)[data-syscfg-group] {
    min-height: 22rem;
    box-sizing: border-box;
    padding: 0.75rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-raised);
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
}

.modal .nscc-trip-modal-tabs.nscc-erp-tabs,
.modal .nscc-erp-tabs.nscc-trip-modal-tabs {
    margin: 0 0 0;
    flex: 0 0 auto;
}
.modal .nscc-trip-modal-panel.nscc-erp-tab-panel,
.modal .nscc-trip-modal-panel {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-top: none;
    border-radius: 0 10px 10px 10px;
    background: var(--bg-page, #f4f4f5);
    margin-top: 0;
    padding: 0.65rem 0.75rem 0.75rem;
}
:root.dark .modal .nscc-trip-modal-panel,
body.dark-theme .modal .nscc-trip-modal-panel {
    border-color: var(--nscc-line, #ffffff);
}

/* Any modal tab strip uses the same folder chrome as main screens */
.modal .nscc-erp-tabs,
.modal .nscc-tab-groups,
.modal .support-modal-nav,
.modal .nscc-employee-tabs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-start;
    gap: 0 0.55rem;
    row-gap: 0;
    margin: 0;
    padding: 0 0.1rem 0;
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    overflow: visible;
    max-width: 100%;
    background: transparent !important;
    border-radius: 0 !important;
}
:root.dark .modal .nscc-erp-tabs,
:root.dark .modal .nscc-tab-groups,
:root.dark .modal .support-modal-nav,
:root.dark .modal .nscc-employee-tabs,
body.dark-theme .modal .nscc-erp-tabs,
body.dark-theme .modal .nscc-tab-groups,
body.dark-theme .modal .support-modal-nav,
body.dark-theme .modal .nscc-employee-tabs {
    border-bottom-color: var(--nscc-line, #ffffff);
}
.modal .nscc-erp-tab-btn,
.modal .nscc-trip-modal-tab,
.modal .support-modal-nav .sub-nav-btn,
.modal .nscc-employee-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 11.5rem !important;
    min-height: var(--nscc-folder-tab-h, 2.55rem) !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 -2px 0 !important;
    padding: 0.22rem 0.65rem 0.28rem !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: var(--chrome-folder) !important;
    background-color: var(--chrome-folder) !important;
    color: var(--chrome-folder-ink) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    box-shadow: none !important;
    transform: translateY(2px) !important;
    cursor: pointer;
    box-sizing: border-box !important;
}
.modal .nscc-erp-tab-btn:hover,
.modal .nscc-trip-modal-tab:hover,
.modal .support-modal-nav .sub-nav-btn:hover,
.modal .nscc-employee-tab:hover {
    z-index: 2 !important;
    background: var(--bg-raised) !important;
    color: var(--chrome-folder-ink) !important;
    transform: translateY(1px) !important;
}
.modal .nscc-erp-tab-btn.active,
.modal .nscc-erp-tab-btn[aria-selected="true"],
.modal .nscc-trip-modal-tab--active,
.modal .nscc-trip-modal-tab.active,
.modal .support-modal-nav .sub-nav-btn.active,
.modal .nscc-employee-tab.is-active {
    z-index: 4 !important;
    color: var(--chrome-folder-active-ink, #f7f1e4) !important;
    background: var(--chrome-folder-active) !important;
    background-color: var(--chrome-folder-active) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-bottom-color: var(--bg-page, #f4f4f5) !important;
    border-radius: 10px 10px 0 0 !important;
    min-height: var(--nscc-folder-tab-h, 2.55rem) !important;
    padding: 0.22rem 0.65rem 0.35rem !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
}
:root.dark .modal .nscc-erp-tab-btn,
:root.dark .modal .nscc-trip-modal-tab,
:root.dark .modal .support-modal-nav .sub-nav-btn,
:root.dark .modal .nscc-employee-tab,
body.dark-theme .modal .nscc-erp-tab-btn,
body.dark-theme .modal .nscc-trip-modal-tab,
body.dark-theme .modal .support-modal-nav .sub-nav-btn,
body.dark-theme .modal .nscc-employee-tab {
    border-color: var(--nscc-line, #ffffff) !important;
}
:root.dark .modal .nscc-erp-tab-btn.active,
:root.dark .modal .nscc-erp-tab-btn[aria-selected="true"],
:root.dark .modal .nscc-employee-tab.is-active,
body.dark-theme .modal .nscc-erp-tab-btn.active,
body.dark-theme .modal .nscc-erp-tab-btn[aria-selected="true"],
body.dark-theme .modal .nscc-employee-tab.is-active {
    border-color: var(--nscc-line, #ffffff) !important;
    border-bottom-color: var(--bg-page) !important;
}

.nscc-trip-scan-image-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    font-family: monospace;
    color: var(--text-primary);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.nscc-trip-scan-image-link:hover {
    filter: brightness(1.08);
}
.nscc-trip-scan-image-link--empty {
    color: var(--text-muted);
    text-decoration: none;
    cursor: default;
    opacity: 0.55;
    font-weight: 600;
}
.nscc-trip-scan-barcode-link {
    font-family: monospace;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: underline;
    cursor: pointer;
}
.nscc-trip-scan-image-preview {
    max-width: 100%;
    max-height: min(60vh, 420px);
    display: block;
    margin: 0 auto;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);
}

.nscc-trip-signatures-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
.nscc-trip-sig-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    padding: 0.65rem 0.75rem;
}
.nscc-trip-sig-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.nscc-trip-sig-label {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.nscc-trip-sig-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
}
.nscc-trip-sig-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.nscc-trip-sig-preview {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.45rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nscc-trip-sig-thumb-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
    width: 100%;
}
.nscc-trip-sig-thumb {
    max-width: 100%;
    max-height: 88px;
    display: block;
    margin: 0 auto;
}
.nscc-trip-sig-text {
    font-family: 'Dancing Script', 'Brush Script MT', cursive;
    font-size: 1.35rem;
    color: #1e293b;
    text-align: center;
    letter-spacing: 1px;
    padding: 0.35rem 0.5rem;
}
.nscc-trip-sig-text--large {
    font-size: 2rem;
    padding: 1rem 0.5rem;
}

.nscc-trip-form-list {
    display: grid;
    gap: 0.45rem;
}
.nscc-trip-form-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.nscc-trip-form-card:hover,
.nscc-trip-form-card:focus-visible {
    border-color: var(--nscc-line, #000000);
    background: var(--bg-raised);
    outline: none;
}
.nscc-trip-form-icon {
    font-size: 1rem;
}
.nscc-trip-form-copy {
    min-width: 0;
}
.nscc-trip-form-copy strong,
.nscc-trip-form-copy small {
    display: block;
}
.nscc-trip-form-copy strong {
    font-size: 0.75rem;
}
.nscc-trip-form-copy small {
    margin-top: 0.12rem;
    color: var(--text-muted);
    font-size: 0.65rem;
    line-height: 1.3;
}
.nscc-trip-form-open {
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: underline;
}

.nscc-trip-verification-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}
.nscc-trip-verification-summary > div {
    padding: 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}
.nscc-trip-verification-summary span,
.nscc-trip-verification-summary strong {
    display: block;
}
.nscc-trip-verification-summary span {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}
.nscc-trip-verification-summary strong {
    margin-top: 0.2rem;
    font-size: 0.72rem;
}
.nscc-trip-verification-summary .is-verified {
    color: #34C759;
}
.nscc-trip-verification-summary .is-pending {
    color: #FF9500;
}
.nscc-trip-verification-list {
    display: grid;
}
.nscc-trip-verification-row {
    display: flex;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}
.nscc-trip-verification-index {
    width: 24px;
    flex: 0 0 24px;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 900;
}
.nscc-trip-verification-copy {
    min-width: 0;
    flex: 1;
}
.nscc-trip-verification-copy > div:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.3rem 0.75rem;
}
.nscc-trip-verification-copy > div:first-child strong {
    font-size: 0.72rem;
}
.nscc-trip-verification-copy > div:first-child span,
.nscc-trip-verification-copy small {
    color: var(--text-muted);
    font-size: 0.62rem;
}
.nscc-trip-verification-copy small {
    display: block;
    margin-top: 0.25rem;
    font-family: monospace;
    overflow-wrap: anywhere;
}
.nscc-trip-verification-badge {
    margin-top: 0.3rem;
    font-size: 0.65rem;
}

.nscc-trip-telemetry .route-trace-header span {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
}
.nscc-trip-telemetry .route-trace-list {
    max-height: 190px;
}
.nscc-trip-telemetry-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    color: var(--text-muted);
    text-align: center;
}
.nscc-trip-telemetry-empty > span {
    font-size: 1.75rem;
}
.nscc-trip-telemetry-empty strong {
    color: var(--text-primary);
    font-size: 0.82rem;
}
.nscc-trip-telemetry-empty small {
    font-size: 0.68rem;
}

@media (max-width: 620px) {
    .nscc-trip-verification-summary {
        grid-template-columns: 1fr;
    }
}

/* --- Patrol Officers Status view --- */
.patrol-officers-shell {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.patrol-officers-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 1rem;
    flex-shrink: 0;
    min-height: 4.25rem;
}

.patrol-officers-toolbar-title h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.patrol-officers-toolbar-title p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0 0;
}

.patrol-officers-toolbar-actions {
    flex-shrink: 0;
}

.patrol-officers-pdf-btn {
    background: var(--brand-light) !important;
    color: var(--bg-card) !important;
    font-weight: 800;
    border: 2px solid var(--border) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}

.patrol-officers-active-count {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    flex-shrink: 0;
    min-width: 7.5rem;
    text-align: center;
    box-sizing: border-box;
}

.patrol-officers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    flex-grow: 1;
}

.patrol-officer-card {
    background: var(--bg-raised);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    box-sizing: border-box;
}

.patrol-officer-card--active {
    border-left: 4px solid var(--status-transit);
}

.patrol-officer-card--pending {
    border-left: 4px solid #f59e0b;
}

.patrol-officer-card--complete {
    border-left: 4px solid #34C759;
}

.patrol-officer-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.patrol-officer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-sunken);
    padding: 2px;
    box-sizing: border-box;
    cursor: pointer;
}

.patrol-officer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

.patrol-officer-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.patrol-officer-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
}

.patrol-officer-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
}

.patrol-officer-billing-badge {
    flex-shrink: 0;
}

.patrol-officer-status {
    font-weight: 700;
    padding: 0;
    border-radius: 0;
    font-size: 0.7rem;
    border: none;
    background: transparent;
    background-color: transparent;
    color: var(--text-primary);
    flex-shrink: 0;
}

.patrol-officer-role {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.patrol-officer-shift {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.patrol-officer-location {
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patrol-officer-notes {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patrol-officer-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: flex-end;
}

.patrol-visits-wrap {
    position: relative;
    margin-top: 0.5rem;
    width: 100%;
}

.patrol-visits-table {
    width: 100%;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-sunken);
    cursor: default;
}

.patrol-visits-header,
.patrol-visits-row {
    display: grid;
    grid-template-columns: 1fr 5.5rem 5.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.65rem;
}

.patrol-visits-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--border);
    background: var(--bg-card);
}

.patrol-visits-row {
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
}

.patrol-visits-row:last-child {
    border-bottom: none;
}

.patrol-visits-site {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.patrol-visits-time {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.patrol-visits-time--in {
    color: var(--status-transit, #007AFF);
}

.patrol-visits-time--out {
    color: #34C759;
}

.patrol-visits-by {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-muted);
    font-family: var(--font-sans, sans-serif);
    margin-top: 1px;
}

.patrol-visits-check-btn {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
}

.patrol-visits-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.65rem;
}

.patrol-visits-hover-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 120;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.85rem 1rem;
    pointer-events: none;
}

.patrol-visits-wrap:hover .patrol-visits-hover-panel,
.patrol-visits-wrap:focus-within .patrol-visits-hover-panel {
    display: block;
}

.patrol-visits-hover-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.65rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--border);
}

.patrol-visits-hover-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

.patrol-visits-hover-row:last-child {
    border-bottom: none;
}

.patrol-visits-hover-site {
    font-weight: 700;
    color: var(--text-primary);
}

.patrol-visits-hover-time {
    font-family: monospace;
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
}

.patrol-visits-hover-time--in {
    color: var(--status-transit, #007AFF);
}

.patrol-visits-hover-time--out {
    color: #34C759;
}

.patrol-visits-hover-by {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.patrol-officers-empty {
    grid-column: 1 / -1;
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
}

/* --- Security Guards Roster view --- */
.security-guards-shell {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.security-guards-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
    min-height: 3.25rem;
    box-sizing: border-box;
}

.security-guards-toolbar-title h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.security-guards-toolbar-title p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0 0;
}

.security-guards-toolbar-actions {
    flex-shrink: 0;
    gap: 0.75rem;
}

.security-guards-pdf-btn {
    background: var(--brand-light) !important;
    color: var(--bg-card) !important;
    font-weight: 800;
    border: 2px solid var(--border) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}

.security-guards-forms-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    height: 32px;
    font-family: inherit;
    flex-shrink: 0;
}

.security-guards-active-count {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    flex-shrink: 0;
    min-width: 7.5rem;
    text-align: center;
    box-sizing: border-box;
}

.security-guards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    flex-grow: 1;
}

.security-guard-card {
    background: var(--bg-raised);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-sizing: border-box;
}

.security-guard-card--active {
    border-left: 4px solid #34C759;
}

.security-guard-card--unscheduled {
    border-left: 4px solid #94a3b8;
}

.security-guard-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.security-guard-card-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-height: 1.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.security-guard-status-btn {
    flex-shrink: 0;
    font-weight: 700;
}

.security-guard-status {
    font-weight: 700;
    padding: 0;
    border-radius: 0;
    font-size: 0.7rem;
    border: none;
    background: transparent;
    background-color: transparent;
    color: var(--text-primary);
    flex-shrink: 0;
}

.security-guard-card-main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.security-guard-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-sunken);
    padding: 2px;
    box-sizing: border-box;
    cursor: pointer;
}

.security-guard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

.security-guard-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.security-guard-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
}

.security-guard-role {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.security-guard-shift {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.security-guard-location {
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-guard-form {
    font-size: 0.75rem;
    color: var(--text-primary);
}

.security-guard-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: flex-end;
}

.security-guards-empty {
    grid-column: 1 / -1;
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
}

/* --- PRINT MEDIA STYLES FOR SAVE TO PDF --- */
@media print {
    .print-only {
        display: inline-block !important;
    }

    body.print-active,
    body.print-active * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.print-active {
        background: #ffffff !important;
        color: #0d1b2a !important;

        /* Force light theme variables for printing */
        --bg-page:          #ffffff !important;
        --bg-card:          #ffffff !important;
        --bg-raised:        #fafafa !important;
        --bg-sunken:        #e4e4e7 !important;
        --bg-deep:          #d4d4d8 !important;
        --bg-overlay:       #ffffff !important;
        --table-head-bg:    #e4e4e7 !important;
        --table-row-hover:  #f4f4f5 !important;
        --table-row-selected:#e5e7eb !important;
        --text-primary:     #18181b !important;
        --text-secondary:   #3f3f46 !important;
        --text-muted:       #71717a !important;
        --border:           #d4d4d8 !important;
        --border-strong:    #a1a1aa !important;
    }
    body.print-active > *:not(.app-container):not(.print-section):not(:has(.print-section)) {
        display: none !important;
    }
    body.print-active .app-container {
        display: block !important;
        background: #ffffff !important;
        color: var(--text-primary) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    body.print-active .main-content {
        display: block !important;
        background: #ffffff !important;
        color: var(--text-primary) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    body.print-active .views-container {
        display: block !important;
        background: #ffffff !important;
        color: var(--text-primary) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    body.print-active .view-section {
        display: none !important;
    }
    body.print-active .print-section {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
        color: var(--text-primary) !important;
        padding: 1.5rem !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: 99999 !important;
    }

    body.print-active .print-section .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        background: #ffffff !important;
        color: var(--text-primary) !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.print-active #worm-detail-modal {
        position: static !important;
        inset: auto !important;
        background: #ffffff !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    body.print-active #worm-detail-print {
        max-width: 100% !important;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    body.print-active #worm-detail-print .worm-detail-body {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* WORM PDF: redact GPS / evidence when dispatcher chose Text only */
    body.print-active.worm-pdf-exclude-evidence .worm-pdf-evidence,
    body.print-active.worm-pdf-exclude-evidence .ledger-scan-hover,
    body.print-active.worm-pdf-exclude-evidence #worm-pdf-evidence-appendix {
        display: none !important;
    }
    body.print-active.worm-pdf-exclude-evidence .worm-pdf-evidence-omitted {
        display: inline !important;
    }

    /* WORM PDF: evidence appendix layout when included */
    body.print-active.worm-pdf-include-evidence #worm-pdf-evidence-appendix {
        display: block !important;
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 2px solid #d4d4d8;
        page-break-before: always;
        break-before: page;
    }
    body.print-active.worm-pdf-include-evidence .ledger-scan-hover {
        display: none !important; /* appendix carries images; avoid hover duplicates */
    }

    .worm-pdf-evidence-heading {
        margin: 0 0 0.35rem;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--text-primary);
    }
    .worm-pdf-evidence-subhead {
        margin: 1rem 0 0.45rem;
        font-size: 0.82rem;
        font-weight: 800;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border);
        padding-bottom: 0.25rem;
    }
    .worm-pdf-muted {
        font-size: 0.72rem;
        color: var(--text-muted);
    }
    .worm-pdf-contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.55rem 1rem;
        font-size: 0.78rem;
    }
    .worm-pdf-map-wrap {
        margin: 0.35rem 0 0.75rem;
    }
    .worm-pdf-route-map {
        max-width: 100%;
        height: auto;
        border: 1px solid var(--border);
        border-radius: 6px;
        display: block;
        background: #fff;
    }
    .worm-pdf-sig-grid,
    .worm-pdf-bag-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }
    .worm-pdf-evidence-card {
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.65rem 0.75rem;
        background: var(--bg-sunken, #e4e4e7);
        font-size: 0.75rem;
    }
    .worm-pdf-evidence-card-title {
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        margin-bottom: 0.35rem;
    }
    .worm-pdf-sig-wrap {
        margin-top: 0.45rem;
        padding: 0.5rem;
        background: #fff;
        border: 1px solid #d4d4d8;
        border-radius: 4px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .worm-pdf-sig-img,
    .worm-pdf-bag-img {
        max-width: 100%;
        max-height: 140px;
        display: block;
        margin: 0 auto;
    }
    .worm-pdf-barcode {
        display: block;
        margin-top: 0.4rem;
        font-size: 0.68rem;
        word-break: break-all;
        color: var(--text-primary);
    }
    .worm-pdf-evidence-empty {
        font-size: 0.75rem;
        color: var(--text-muted);
        padding: 0.4rem 0;
    }
    body.print-active .worm-pdf-evidence-card {
        background: #fafafa !important;
        border-color: #d4d4d8 !important;
        break-inside: avoid;
    }
    body.print-active .worm-pdf-sig-wrap {
        background: #ffffff !important;
    }

    /* Hide interactive elements and global chrome */
    body.print-active .top-header,
    body.print-active .dispatch-ticker,
    body.print-active .view-header,
    body.print-active .no-print,
    body.print-active button,
    body.print-active select,
    body.print-active input,
    body.print-active .close-btn,
    body.print-active .btn {
        display: none !important;
    }

    /* Expand layout wrappers for printing */
    body.print-active,
    body.print-active .app-container,
    body.print-active .main-content,
    body.print-active .views-container {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    /* Expand scrollable elements and lists for printing */
    body.print-active .gantt-scroll-box,
    body.print-active .kanban-board,
    body.print-active .timeline-grid-container,
    body.print-active .courier-horizontal-scroll,
    body.print-active .patrol-schedule-list,
    body.print-active .column-content,
    body.print-active #submitted-forms-modal-list,
    body.print-active #guard-form-modal-body,
    body.print-active #form-preview-modal-body,
    body.print-active #replay-breadcrumbs-list,
    body.print-active .modal-content-scroll {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Map Layouts */
    body.print-active #map-view .map-container,
    body.print-active #patrol-view .patrol-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        height: auto !important;
    }
    body.print-active #map-view #dispatcher-map,
    body.print-active #patrol-view #patrol-map {
        height: 500px !important;
        width: 100% !important;
        border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    }
    body.print-active #map-view .intelligent-batching,
    body.print-active #map-view .courier-map-trip-list,
    body.print-active #patrol-view .patrol-dispatch-board {
        display: none !important;
    }
    body.print-active #map-view .map-container {
        display: flex !important;
        grid-template-columns: none !important;
    }

    /* Ensure table borders and text are dark, preserving background colors */
    body.print-active table,
    body.print-active th,
    body.print-active td {
        border-color: #333333 !important;
        color: var(--text-primary) !important;
    }
    body.print-active th {
        background: #f3f4f6 !important;
        font-weight: bold !important;
    }

    /* Force dynamic containers inside printed sections to expand naturally */
    body.print-active .print-section > div,
    body.print-active .print-section div[style*="height: 100%"],
    body.print-active .print-section div[style*="height:100%"],
    body.print-active .print-section .gantt-fixed-layout,
    body.print-active .print-section #security-guards-grid,
    body.print-active .print-section #patrol-list,
    body.print-active .print-section .patrol-container,
    body.print-active .print-section .patrol-map-section,
    body.print-active .print-section #chat-messages,
    body.print-active #unit-detail-comms {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Support printing child elements inside parent view-sections */
    body.print-active .view-section:has(.print-section) {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.print-active .view-section:has(.print-section) > *:not(.print-section) {
        display: none !important;
    }

    /* Admin Console ? changelog PDF */
    body.print-active #admin-settings-modal:has(#admin-changelog-section.print-section) {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
        z-index: 99999 !important;
        overflow: visible !important;
    }
    body.print-active #admin-settings-modal:has(#admin-changelog-section.print-section) .nscc-admin-console__content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border: none !important;
        padding: 1.5rem !important;
    }
    body.print-active #admin-settings-modal:has(#admin-changelog-section.print-section) > .nscc-admin-console__content > div:not(.config-section),
    body.print-active #admin-settings-modal:has(#admin-changelog-section.print-section) .config-section:not(#admin-changelog-section) {
        display: none !important;
    }
    body.print-active #admin-changelog-section.print-section .nscc-admin-cl-filter {
        display: none !important;
    }
    body.print-active #admin-changelog-section.print-section .nscc-admin-changelog-scroll {
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
    }
    body.print-active #admin-changelog-section.print-section .nscc-welcome-list li {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Manifest + report printing — hide the folder-tab strip and its
       auto-hide handle so a paper backup shows only the tenant logo, the
       report name, the selected date, and the data itself (Matt 2026-09-14:
       "when printing a manifest do not show the folder tabs at the top.
       only show the ips logo and the report name and other pertinent info").
       These live outside the print target section and were reaching the
       page because they lack .no-print. */
    body.print-active #nscc-chrome-folder-tabs,
    body.print-active #daily-pulse-folder-tabs,
    body.print-active #nscc-foldertab-handle,
    body.print-active .nscc-foldertab-handle {
        display: none !important;
    }

    /* Print-only manifest header. Kept out of the on-screen layout and
       revealed only when a section carrying `.nscc-print-header` is being
       printed — its content is populated by the beforeprint handler in
       app.js (tenant logo + report name + selected date). */
    body.print-active .print-section .nscc-print-header {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin: 0 0 0.35rem 0;
        padding: 0 0 0.35rem 0;
        border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    }
    body.print-active .print-section .nscc-print-header__brand {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }
    body.print-active .print-section .nscc-print-header__logo {
        max-height: 44px;
        width: auto;
        display: block;
    }
    body.print-active .print-section .nscc-print-header__company {
        font-weight: 800;
        font-size: 11pt;
        color: #000000;
        letter-spacing: 0.02em;
    }
    body.print-active .print-section .nscc-print-header__meta {
        text-align: right;
        min-width: 0;
    }
    body.print-active .print-section .nscc-print-header__title {
        font-weight: 800;
        font-size: 12pt;
        color: #000000;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    body.print-active .print-section .nscc-print-header__date {
        font-size: 9pt;
        color: #000000;
    }

    /* Tight padding on the printed manifest — a paper backup should fit as
       much per page as possible (Matt 2026-09-14: "make the padding tight.
       we want to fit as much onto paper as we can. they print these as a
       backup to the system"). */
    body.print-active #primary-view.print-section {
        padding: 0 !important;
        margin: 0 !important;
    }
    body.print-active #primary-view.print-section #primary-left-panel {
        gap: 0.15rem !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    body.print-active #primary-view.print-section #primary-left-panel > div {
        padding: 0.15rem 0.25rem !important;
        margin: 0 !important;
        gap: 0.15rem !important;
    }
    body.print-active #primary-view.print-section #primary-dispatch-table {
        min-width: 0 !important;
        font-size: 8pt !important;
        border-collapse: collapse !important;
    }
    body.print-active #primary-view.print-section #primary-dispatch-table th,
    body.print-active #primary-view.print-section #primary-dispatch-table td {
        padding: 2px 4px !important;
        font-size: 8pt !important;
        line-height: 1.15 !important;
    }
    body.print-active #primary-view.print-section #primary-dispatch-table th {
        font-size: 7.5pt !important;
    }
    body.print-active #primary-view.print-section #primary-dispatch-table tbody tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    @page { margin: 0.3in; }
}

/* Print-only header — hidden on screen so the on-screen chrome stays
   unchanged. The @media print block above makes it visible only for the
   section being printed. Kept outside the @media block so the `display: none`
   applies during normal browsing. */
.nscc-print-header { display: none; }

/* ===== AI Connections (System Settings) ===== */
.nscc-ai-note {
    font-size: 0.6875rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.nscc-ai-provider {
    border: 2px solid var(--border);
    background: var(--bg-card);
    padding: 0.75rem;
    margin-top: 0.85rem;
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 0 var(--border);
}
.nscc-ai-provider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.nscc-ai-provider-name {
    font-family: monospace;
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.nscc-ai-saved-hint {
    font-family: monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.nscc-ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.nscc-ai-actions .btn {
    flex: 1 1 auto;
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 0.45rem 0.5rem;
}
.nscc-ai-status {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    min-height: 1.1em;
    line-height: 1.35;
    word-break: break-word;
}

/* ===== Mapbox connection status indicator (System Settings) ===== */
.nscc-conn-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.6rem;
}
.nscc-conn-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid var(--border);
    background: var(--bg-card);
    box-shadow: 2px 2px 0 var(--border);
    border-radius: 8px;
    padding: 0.28rem 0.6rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nscc-conn-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: 0 0 auto;
}
.nscc-conn-text {
    color: var(--text-primary);
    white-space: nowrap;
}
.nscc-conn-idle .nscc-conn-dot { background: var(--text-muted); }
.nscc-conn-checking .nscc-conn-dot {
    background: #FF9500;
    animation: nsccConnPulse 1s ease-in-out infinite;
}
.nscc-conn-checking .nscc-conn-text { color: #FF9500; }
.nscc-conn-ok .nscc-conn-dot { background: #34C759; }
.nscc-conn-ok .nscc-conn-text { color: #34C759; }
.nscc-conn-fail .nscc-conn-dot { background: #FF3B30; }
.nscc-conn-fail .nscc-conn-text { color: #FF3B30; }
.nscc-conn-btn {
    font-size: 0.6875rem;
    padding: 0.4rem 0.7rem;
    flex: 0 0 auto;
}
@keyframes nsccConnPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* ??????????????????????????????????????????????????????????????????????????
   Quick (Dispatch) screen status <select> ? fit full status labels
   The longest label is "PENDING PICKUP"; ensure DELIVERED and every other
   status render in full (no clipping/truncation). Colors are set inline by
   window.nsccQuickStatusColor() using the canonical NSCC palette
   (UNASSIGNED #FF3B30 ? PENDING PICKUP #FF9500 ? EN-ROUTE #5856D6 ?
    PICKUP #FFCC00 ? IN TRANSIT #007AFF ? DELIVERED #34C759). Appended here so
   it cascades over shared-tokens.css; scoped to .nscc-status-select so other
   screens (maps, gantt, badges) are untouched.
   ?????????????????????????????????????????????????????????????????????????? */
#primary-dispatch-table th:last-child,
#primary-dispatch-table td:last-child {
    width: 188px !important;
    min-width: 188px;
    max-width: 188px;
}
.select-inline--dispatch.nscc-status-select {
    width: 100%;
    min-width: 10.75rem;
    box-sizing: border-box;
    height: auto;
    min-height: auto;
    font-size: 9.5pt;
    letter-spacing: -0.01em;
    padding: 0.12rem 1.35rem 0.12rem 0.35rem;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border: var(--nscc-status-border-w, 4px) solid var(--nscc-status-border, var(--nscc-line, #000000)) !important;
    background-image: var(--nscc-select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 0.7rem;
}
/* Trip type ? plain text, not a colored pill */
.nscc-service-chip,
.nscc-service-badge {
    display: inline;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none !important;
}
.select-inline--dispatch.nscc-trip-type-select,
.filter-select.nscc-trip-type-select,
.nscc-trip-type-select {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-weight: 650;
    padding: 0.1rem 1.2rem 0.1rem 0 !important;
    min-height: auto;
}
.select-inline--dispatch.nscc-status-select:hover:not(:disabled),
.select-inline--dispatch.nscc-status-select:focus,
.select-inline--dispatch.nscc-status-select:active,
.select-inline--dispatch.nscc-status-select:open {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border: var(--nscc-status-border-w, 4px) solid var(--nscc-status-border, var(--nscc-line, #000000)) !important;
    box-shadow: none;
}
.select-inline--dispatch.nscc-status-select:disabled {
    opacity: 1 !important;
    cursor: not-allowed;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
.select-inline--dispatch.nscc-status-select option {
    font-weight: 700;
}

/* Support submit ? .nscc-support-select aliases global .nscc-form-select (shared-tokens.css) */
#support-submit-view .nscc-support-select,
.nscc-support-form .nscc-support-select {
    width: 100%;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: 2px 2px 0 var(--border);
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
#support-submit-view .nscc-support-select:hover,
.nscc-support-form .nscc-support-select:hover {
    transform: none;
}
#support-submit-view .nscc-support-select:focus,
.nscc-support-form .nscc-support-select:focus {
    box-shadow: 2px 2px 0 var(--border);
}

.nscc-support-field-error {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #FF3B30;
    line-height: 1.35;
}
.nscc-support-form .form-control-panel.nscc-support-invalid {
    border-color: #FF3B30 !important;
    box-shadow: 2px 2px 0 #FF3B30 !important;
}

/* Contracted shifts modal (Master Data → Customers) */
#contract-shifts-modal.modal.open {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
}
#contract-shifts-modal .modal-content.loc-rate-modal-content {
    display: flex;
    flex-direction: column;
    max-height: min(92vh, calc(100dvh - 1rem));
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
}
#contract-shifts-modal .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.loc-rate-modal-content {
    padding: 0.65rem 0.85rem 0.75rem;
}
.loc-rate-modal-content {
    max-width: min(96vw, 900px);
    width: min(96vw, 900px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.loc-rate-modal-content .modal-header {
    flex-shrink: 0;
    min-width: 0;
    margin-bottom: 0.45rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.loc-rate-modal-content .modal-header .modal-title-strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 1.05rem;
}
#contract-shifts-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.loc-rate-intro {
    font-size: 0.66rem;
    color: var(--text-secondary);
    line-height: 1.28;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.loc-rate-form-panel {
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    background: var(--bg-card);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
.loc-rate-form-panel--solo {
    width: 100%;
}
.loc-rate-form-title {
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* The contracted-shifts panel (Master Data → Customers → Patrol / Guard contracted shifts). */
.loc-contract-panel { margin-top: 1rem; }
.loc-contract-table { margin: 0.4rem 0 0.75rem; width: 100%; }
.loc-contract-table .num { text-align: right; }
.loc-contract-form { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; margin-bottom: 1rem; }
.loc-contract-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; }
.loc-contract-input { min-width: 7rem; font-size: 0.85rem; }
.loc-contract-table .loc-contract-input { min-width: 0; width: 9.5rem; display: inline-block; }
.loc-contract-days { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: center; }
.loc-contract-day { display: inline-flex; align-items: center; gap: 0.2rem; cursor: pointer; }
@media (max-width: 960px) {
    .loc-rate-modal-content,
    .loc-rate-modal-content--courier,
    .loc-rate-modal-content--service {
        width: min(96vw, 900px);
        max-width: min(96vw, 900px);
    }
}

/* Back Office ? ERP integration integration panel */
.nscc-erp-panel .erp-bo-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border);
}
.nscc-erp-panel .erp-bo-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* Legacy flat ERP tabs (non-folder). Folder strips use .nscc-tab-groups rules above. */
.nscc-erp-tabs:not(.nscc-tab-groups) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--border);
}
/* Folder tabs without nscc-tab-groups still use the same black-edge chrome standard */
.nscc-erp-tabs:not(.nscc-tab-groups) .nscc-erp-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: normal;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin: 0 0 -2px 0;
    padding: 0.22rem 0.65rem 0.28rem;
    min-height: var(--nscc-folder-tab-h, 2.55rem);
    max-width: 5.5rem;
    text-align: center;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--chrome-folder);
    color: var(--chrome-folder-ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
    box-shadow: none;
    transform: translateY(2px);
    cursor: pointer;
    box-sizing: border-box;
}
.nscc-erp-tabs:not(.nscc-tab-groups) .nscc-erp-tab-btn:hover {
    z-index: 2;
    color: var(--chrome-folder-ink);
    background: var(--bg-raised);
    transform: translateY(1px);
}
.nscc-erp-tabs:not(.nscc-tab-groups) .nscc-erp-tab-btn.active,
.nscc-erp-tabs:not(.nscc-tab-groups) .nscc-erp-tab-btn[aria-selected="true"] {
    z-index: 4;
    color: var(--chrome-folder-active-ink, #f7f1e4) !important;
    background: var(--chrome-folder-active) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card));
    min-height: var(--nscc-folder-tab-h, 2.55rem);
    padding-bottom: 0.35rem;
    transform: translateY(0);
    box-shadow: none;
}
.nscc-erp-tab-panel {
    display: none;
}
.nscc-erp-tab-panel.active {
    display: block;
}
.erp-today-actions {
    display: flex;
    justify-content: flex-end;
    margin: -0.25rem 0 0.5rem;
}
.nscc-today-hint {
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.7rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.45;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.nscc-today-hint.nscc-today-hint--small {
    font-size: 0.65rem;
}
/* Compact section heading for panels that used to open with an explanatory
   grey paragraph. The explanation now lives in the heading's hover tip
   (data-nscc-desc); only the title and live figures stay on screen. */
.nscc-panel-heading {
    margin: 0.75rem 0 0.35rem;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    cursor: help;
}
.nscc-panel-heading:first-child {
    margin-top: 0;
}
.nscc-panel-heading__meta {
    margin-left: 0.5rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.nscc-pay-today {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
}
.nscc-pay-preview-head .nscc-section-heading--inline {
    margin: 0 0 0.25rem;
}
.nscc-pay-period-end {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9em;
}
.nscc-pay-preview-scroll {
    max-height: min(52vh, 28rem);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card, #fff);
}
.nscc-pay-preview-scroll .master-data-table-shell {
    min-height: 8rem;
}
.nscc-pay-preview-scroll .nscc-table {
    margin: 0;
}
.nscc-pay-today-footer {
    margin-top: auto;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-sunken);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    /* Scrolls with the panel — no pinned bars on any screen (2026-09-07). */
    position: static;
    pointer-events: auto;
}
.nscc-pay-run-confirm {
    margin-top: 0.25rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 6px;
    background: var(--bg-card, #fff);
}
.nscc-pay-run-confirm__msg {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
}
.nscc-pay-today-footer__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
}
.nscc-pay-today-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.nscc-payroll-provider-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.nscc-payroll-provider-select {
    min-width: 11rem;
    font-size: 0.85rem;
}
.erp-export-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1200;
    min-width: 240px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--nscc-line, #000);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    padding: 0.35rem 0;
}
.erp-export-dropdown-menu[style*="display: none"] {
    border-color: transparent;
}
.erp-export-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 0.45rem 0.85rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.erp-export-dropdown-menu button:hover {
    background: var(--bg-sunken);
}
.md-save-dropdown-menu:not([style*="display: none"]) {
    border: 1px solid var(--nscc-line, #000) !important;
}
.erp-export-menu-label {
    display: block;
    padding: 0.45rem 0.85rem 0.2rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.erp-export-menu-label:not(:first-child) {
    margin-top: 0.35rem;
    border-top: 1px solid var(--border);
    padding-top: 0.55rem;
}
.erp-inbound-stats--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.erp-admin-advanced {
    margin-top: 0.5rem;
}
.erp-bo-section-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
}
.erp-bo-section-desc {
    margin: 0.2rem 0 0.65rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.45;
    max-width: 52rem;
}
.erp-sandbox-copy-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.35rem 0 0.65rem;
}
.erp-sandbox-copy-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.erp-sandbox-copy-status {
    margin: 0.55rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.erp-sandbox-copy-status--error {
    color: #b91c1c;
    font-weight: 700;
}
.erp-sandbox-copy-status--ok {
    color: #047857;
    font-weight: 700;
}
.erp-sandbox-copy-status--hint {
    color: var(--text-secondary);
    font-weight: 600;
}
.erp-sandbox-copy-preview {
    margin-top: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
}
.erp-sandbox-copy-preview-title {
    margin: 0 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-secondary);
}
.erp-sandbox-copy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}
.erp-sandbox-copy-table th,
.erp-sandbox-copy-table td {
    text-align: left;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--border);
}
.erp-sandbox-copy-table thead th {
    border-top: none;
    color: var(--text-muted);
    font-weight: 700;
}
.erp-stack-diagram {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.65rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.erp-stack-node {
    padding: 0.2rem 0.45rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.erp-stack-arrow {
    color: var(--text-muted);
    font-weight: 400;
}
.erp-bridge-health-line,
.erp-request-status-line,
.erp-action-status {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.45;
    padding: 0.5rem 0.65rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 0 0 0.5rem;
}
.erp-request-status-line:empty,
.erp-action-status--empty {
    display: none;
}
.erp-action-status--pending {
    border-color: rgba(88, 86, 214, 0.35);
    color: #5856D6;
}
.erp-action-status--ok {
    border-color: rgba(52, 199, 89, 0.35);
    color: #248A3D;
}
.erp-action-status--error {
    border-color: rgba(255, 59, 48, 0.35);
    color: #C41E16;
}
.erp-inbound-action-status.erp-action-status,
#erp-inbound-action-status.erp-action-status {
    margin-top: 0.45rem;
}
.erp-bo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}
.erp-btn-help {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.7rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-sunken);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.erp-btn-help li {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.erp-btn-help li strong {
    color: var(--text-primary);
    font-weight: 800;
}
.erp-btn-help li em {
    font-style: normal;
    font-weight: 700;
    color: var(--brand-light, var(--text-primary));
}
.erp-btn-help-note {
    margin: 0.45rem 0 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.erp-cli-details {
    margin-top: 0.65rem;
    font-size: 0.72rem;
}
.erp-cli-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-secondary);
}
.erp-cli-hint {
    margin: 0.35rem 0 0;
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.erp-inbound-summary {
    padding: 0.65rem 0.75rem;
    background: var(--bg-sunken);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 6px;
}
.erp-inbound-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.erp-inbound-summary-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
}
.erp-inbound-last-sync {
    font-size: 0.62rem;
    color: var(--text-muted);
}
.erp-inbound-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.erp-inbound-stat {
    flex: 1;
    min-width: 120px;
    padding: 0.5rem;
    background: var(--bg-card);
    border-radius: 4px;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
}
.erp-inbound-stat-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.erp-inbound-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
}
.erp-inbound-stat-hint {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.erp-inbound-result {
    margin-top: 0.5rem;
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.erp-inbound-poll-summary,
.erp-sync-report-summary-panel {
    margin: 0.35rem 0 0.55rem;
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.erp-sync-report-summary-section {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.12));
}
.erp-sync-report-summary-title {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-primary);
}
.erp-sync-report-summary-meta {
    font-size: 0.6rem;
    color: var(--text-muted);
}
.erp-sync-report-failures-wrap {
    margin-top: 0.45rem;
    overflow-x: auto;
}
.erp-sync-report-failures {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6rem;
}
.erp-sync-report-failures th,
.erp-sync-report-failures td {
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
    padding: 0.25rem 0.35rem;
    text-align: left;
    vertical-align: top;
}
.erp-sync-report-failures th {
    font-weight: 800;
    background: var(--surface-muted, rgba(0, 0, 0, 0.04));
}
.erp-queue-counts {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.65rem 0 0;
}
.erp-outbound-scope {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.erp-outbound-scope legend {
    padding: 0;
    margin-bottom: 0.35rem;
}
.erp-outbound-scope-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}
.erp-outbound-scope-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.erp-outbound-date-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.65rem 0.85rem;
    margin-top: 0.65rem;
    max-width: 36rem;
}
.erp-outbound-scope-hint {
    margin: 0.45rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.erp-outbound-scope-all-label {
    margin: 0.65rem 0 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-secondary);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 4px;
    max-width: 36rem;
}
.erp-outbound-scope-all-label strong {
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.68rem;
}
.erp-outbound-upload-hint {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.45;
    padding: 0.45rem 0.6rem;
    border-radius: 4px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
}
.erp-outbound-upload-hint--empty {
    color: var(--text-muted);
}
.erp-staging-date-breakdown {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.erp-staging-date-breakdown li {
    margin: 0.15rem 0;
}
.erp-queue-table-wrap {
    margin-top: 0.65rem;
    max-height: 260px;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.erp-queue-table {
    width: 100%;
    border-collapse: collapse;
}
.erp-queue-table th,
.erp-queue-table td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    font-size: 0.68rem;
}
.erp-queue-table thead tr {
    background: var(--bg-sunken);
}
.nscc-table-empty {
    padding: 0.65rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
}
.erp-tools-group {
    margin-bottom: 0.75rem;
}
.erp-tools-group-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.erp-connection-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.erp-connection-chip {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    background: var(--bg-sunken);
    border-radius: 4px;
    border: 1px solid var(--border);
    min-width: 0;
}
.erp-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF9500;
    flex-shrink: 0;
}
.erp-status-text {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.erp-erp-footnote {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin: 1rem 0 0;
    line-height: 1.45;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.erp-simulated-badge {
    font-size: 0.58rem;
    font-weight: 800;
    color: #b45309;
    background: transparent;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    vertical-align: middle;
    margin-left: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.erp-invoice-types {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.erp-invoice-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.65rem 0.75rem;
    background: var(--bg-sunken);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 6px;
}
.erp-invoice-type-head {
    flex: 1;
    min-width: 200px;
}
.erp-invoice-type-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
}
.erp-invoice-type-hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.4;
}
.erp-invoice-footnote {
    margin: 0.65rem 0 0;
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.erp-invoice-billable-ok {
    color: #34C759;
    font-weight: 800;
}
.erp-invoice-watermark-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
}
.erp-invoice-watermark-opt input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    accent-color: #000000;
}
.erp-staging-modal-content {
    max-width: 960px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    position: relative;
}
.erp-staging-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--bg-raised);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}
.erp-staging-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.erp-staging-preview-summary {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
}
.erp-staging-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}
.erp-staging-stat-label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
}
.erp-staging-summary-note {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.erp-staging-table-wrap {
    max-height: 340px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.erp-staging-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}
.erp-staging-table th,
.erp-staging-table td {
    text-align: left;
    padding: 0.35rem 0.5rem;
    vertical-align: top;
}
.erp-staging-table thead tr {
    background: var(--bg-sunken);
}
.erp-staging-table .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.erp-flow-label {
    display: block;
    font-weight: 700;
}
.erp-flow-id {
    display: block;
    font-size: 0.58rem;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.erp-staging-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}
.erp-staging-raw-json summary {
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.erp-staging-raw-json pre {
    margin: 0;
    padding: 0.65rem;
    font-size: 0.62rem;
    max-height: 180px;
    overflow: auto;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    white-space: pre-wrap;
}
.erp-staging-modal-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 2px solid var(--bg-raised);
    padding-top: 1rem;
}

/* ERP integration ??? escalation & troubleshooting (Admin advanced panel) */
.erp-escalation-section {
    background: linear-gradient(180deg, var(--bg-sunken) 0%, transparent 120px);
    padding-bottom: 0.5rem;
    border-radius: 6px;
}
.erp-escalation-root {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.erp-escalation-subhead {
    margin: 0.85rem 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.erp-escalation-subhead:first-child {
    margin-top: 0;
}
.erp-escalation-tree {
    margin: 0;
    padding: 0.65rem 0.75rem;
    font-size: 0.62rem;
    line-height: 1.5;
    background: var(--bg-card);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 6px;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    overflow-x: auto;
}
.erp-escalation-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}
.erp-escalation-contact-card {
    padding: 0.55rem 0.65rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 6px;
}
.erp-escalation-contact-role {
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.erp-escalation-contact-owns {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    line-height: 1.4;
}
.erp-escalation-contact-line {
    font-size: 0.65rem;
    margin-top: 0.15rem;
}
.erp-escalation-contact-line a {
    color: var(--text-primary);
    font-weight: 600;
}
.erp-escalation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.65rem;
    min-width: 640px;
}
.erp-escalation-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    background: var(--bg-sunken);
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.erp-escalation-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.erp-escalation-flow {
    margin: 0.35rem 0;
    padding: 0.5rem 0.65rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.erp-escalation-flow-title {
    cursor: pointer;
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--text-primary);
}
.erp-escalation-flow-symptom {
    margin: 0.45rem 0 0.35rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.erp-escalation-steps {
    margin: 0.35rem 0 0.5rem;
    padding-left: 0;
    list-style: none;
}
.erp-escalation-steps li {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--border);
}
.erp-esc-flow-num {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    background: #18181b;
    color: #fff;
    border-radius: 8px;
}
.erp-escalation-escalate {
    margin: 0.35rem 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-primary);
}
.erp-escalation-note {
    margin: 0.25rem 0 0.45rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.62rem;
    background: var(--bg-card, #ffffff);
    border: 1px solid #f59e0b;
    border-radius: 4px;
    color: #92400e;
}
.erp-escalation-purge-row {
    margin: 0.35rem 0;
    padding: 0.5rem 0.65rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid #FF9500;
    border-radius: 4px;
    font-size: 0.68rem;
}
.erp-escalation-purge-env {
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}
.erp-escalation-purge-never {
    margin-top: 0.25rem;
    color: #991b1b;
    font-weight: 600;
}
.erp-escalation-doc-link {
    margin: 0.75rem 0 0;
    font-size: 0.62rem;
    color: var(--text-muted);
}
.erp-sync-history-failed {
    cursor: pointer;
    background: transparent;
    box-shadow: inset 4px 0 0 #FF3B30;
}
.erp-sync-history-failed:hover,
.erp-sync-history-failed:focus {
    background: var(--bg-raised, #fafafa);
    outline: none;
}
.erp-sync-failure-warn {
    margin-left: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    color: #FF3B30;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}
.erp-sync-failure-body {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.erp-sync-failure-meta p {
    margin: 0.2rem 0;
}
.erp-sync-failure-subhead {
    margin: 0.85rem 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.erp-sync-failure-error-text {
    margin: 0;
    padding: 0.55rem 0.65rem;
    font-size: 0.68rem;
    line-height: 1.45;
    background: var(--bg-card, #ffffff);
    border: 1px solid #b91c1c;
    border-radius: 4px;
    color: #991b1b;
    white-space: pre-wrap;
    word-break: break-word;
}
.erp-sync-failure-hint-list {
    margin: 0;
    padding-left: 1.1rem;
}
.erp-sync-failure-hint-list li {
    margin: 0.2rem 0;
}
.erp-sync-failure-flow-title {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--text-primary);
}
.erp-sync-failure-contact p {
    margin: 0.2rem 0;
}
.erp-sync-failure-secondary {
    font-size: 0.68rem;
    color: var(--text-muted);
}
.erp-sync-failure-actions {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* Fix & re-send */
.erp-fix-panel {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken, rgba(0, 0, 0, 0.03));
}
.erp-fix-cards {
    display: grid;
    gap: 0.65rem;
    margin: 0.55rem 0 0.75rem;
}
.erp-fix-card {
    padding: 0.55rem 0.65rem;
    border-left: 3px solid #f59e0b;
    background: var(--bg-elevated, #fff);
}
.erp-fix-problem,
.erp-fix-where,
.erp-fix-ids,
.erp-fix-manual {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    line-height: 1.4;
}
.erp-fix-actions {
    margin-top: 0.35rem;
}

/* Fleet VIN / description */
/* Master Data ??? one vertical scroll for the whole screen (views-container) */
#master-fleet-view.view-section.active {
    height: auto;
    min-height: 100%;
    overflow: visible;
}
.md-fleet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}
.md-fleet-unit-id {
    flex: 0 0 auto;
    font-weight: 800;
    font-family: monospace;
    color: var(--text-primary);
    white-space: nowrap;
}
.md-fleet-vin {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 11rem;
    font-size: 0.65rem;
    font-family: monospace;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.12rem 0.48rem;
    border-radius: 8px;
    border: 1px solid var(--border-strong, #a1a1aa);
    background: var(--info-wash, #f4f4f5);
    color: var(--text-primary, #18181b);
}
.md-fleet-vin--empty {
    font-style: italic;
    font-weight: 500;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
}
.md-fleet-vin-field {
    flex: 1 1 9rem;
    min-width: 7.5rem;
    max-width: 11rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong, #a1a1aa);
    border-radius: 8px;
    padding: 0.12rem 0.48rem;
    color: var(--text-primary, #18181b);
    font-size: 0.65rem;
    font-family: monospace;
    font-weight: 700;
}
.md-fleet-vin-field:focus {
    outline: none;
    border-color: var(--border-focus, #3f3f46);
}
.md-fleet-unit-cell {
    min-width: 13rem;
}
.md-fleet-pictures-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 4.5rem;
}
.md-fleet-pic-mini-thumb {
    width: 36px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.md-fleet-pic-count {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--text-muted);
}
.md-fleet-pic-none {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.md-fleet-picture-actions {
    display: flex;
    gap: 0.2rem;
    justify-content: center;
}

/* Back Office Personnel ? ERP refresh status timeline */
.nscc-erp-md-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0.65rem 1rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
}
.nscc-erp-md-bar--personnel,
.nscc-erp-md-bar--locations {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
}
/* Embedded in the Personnel header box ? no second bordered card */
.nscc-erp-md-bar--in-header {
    margin: 0;
    padding: 0.5rem 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    gap: 0.4rem;
}
.nscc-erp-md-bar--in-header .nscc-erp-md-status {
    margin: 0 !important;
    font-size: 0.68rem;
    line-height: 1.35;
}
.nscc-erp-md-bar-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.nscc-erp-md-pull-status--summary {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.35;
}
.nscc-erp-md-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.nscc-erp-md-save-activity {
    font-weight: 800;
    height: 28px;
    padding: 0 0.65rem;
    border: 1px solid var(--border);
    white-space: nowrap;
    font-size: 0.68rem;
    margin-left: auto;
}
.nscc-erp-md-roster-sync-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.nscc-erp-md-roster-sync-info-toggle:hover {
    border-color: var(--text-muted);
}
.nscc-erp-md-roster-sync-info-panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
}
.nscc-erp-md-roster-sync-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.nscc-erp-md-see-activity {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.nscc-erp-md-see-activity:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.nscc-erp-md-details-toggle:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.nscc-erp-md-details-chevron {
    font-size: 0.65rem;
    line-height: 1;
}
.nscc-erp-md-refresh-btn {
    font-weight: 800;
    height: 32px;
    padding: 0 0.75rem;
    border: 2px solid var(--border);
    white-space: nowrap;
}
.nscc-erp-md-duration-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.nscc-erp-md-pull-status {
    font-size: 0.72rem;
    min-height: 1.2em;
}
.nscc-erp-md-pull-status--panel {
    width: 100%;
}
.nscc-erp-md-status-panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.72rem;
    line-height: 1.4;
}
.nscc-erp-md-now {
    color: var(--text-secondary);
}
.nscc-erp-md-now-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-right: 0.25rem;
}
.nscc-erp-md-now-text {
    font-weight: 700;
}
.nscc-erp-md-outcome--ok { color: #34C759; font-weight: 800; }
.nscc-erp-md-outcome--fail { color: #FF3B30; font-weight: 800; }
.nscc-erp-md-outcome--pending {
    display: inline-block;
    color: #000000;
    -webkit-text-fill-color: #000000;
    font-weight: 800;
    background: transparent;
    border: 4px solid #FF9500;
    border-radius: 8px;
    padding: 0.08rem 0.4rem;
    line-height: 1.25;
}
.nscc-erp-md-last { color: var(--text-secondary); font-weight: 600; }
.nscc-erp-md-timeline-wrap {
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
}
.nscc-erp-md-timeline-title,
.nscc-erp-md-issues-title {
    font-weight: 800;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.nscc-erp-md-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 9.5rem;
    overflow: auto;
}
.nscc-erp-md-timeline-item {
    display: grid;
    grid-template-columns: 0.55rem 5.8rem 1fr;
    gap: 0.2rem 0.45rem;
    align-items: start;
    padding: 0.2rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.nscc-erp-md-timeline-item:last-child { border-bottom: 0; }
.nscc-erp-md-timeline-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    margin-top: 0.28rem;
    grid-row: 1 / span 2;
}
.nscc-erp-md-timeline-when {
    color: var(--text-muted);
    font-size: 0.65rem;
    white-space: nowrap;
}
.nscc-erp-md-timeline-label {
    font-weight: 700;
    color: var(--text-secondary);
}
.nscc-erp-md-timeline-detail {
    grid-column: 2 / -1;
    color: var(--text-muted);
    font-size: 0.65rem;
}
.nscc-erp-md-timeline-empty {
    display: block;
    color: var(--text-muted);
    font-style: italic;
}
.nscc-erp-md-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.35rem;
    padding-top: 0.25rem;
}
.nscc-erp-md-pager--solo {
    justify-content: flex-start;
}
.nscc-erp-md-pager-meta {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 5.5rem;
    text-align: center;
}
.nscc-erp-md-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
}
.nscc-erp-md-pager-btn:hover:not(:disabled) {
    border-color: var(--text-muted);
    color: var(--text-primary);
}
.nscc-erp-md-pager-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.nscc-erp-md-issues {
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
}
.nscc-erp-md-issues--ok {
    color: #34C759;
    font-weight: 650;
}
.nscc-erp-md-issues-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 7rem;
    overflow: auto;
}
.nscc-erp-md-issue {
    padding: 0.15rem 0;
    color: var(--text-secondary);
}
.nscc-erp-md-issue--error { color: #FF3B30; }
.nscc-erp-md-issue--warn { color: #FF9500; }
.nscc-erp-md-issue--info { color: var(--text-muted); }
.nscc-erp-md-issue-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.nscc-erp-md-issue-more {
    color: var(--text-muted);
    font-style: italic;
}

/* Other Locations ? Add Location modal */
.md-ol-add-bar {
    display: flex;
    align-items: center;
    margin: 0 0 0.75rem;
}
.md-ol-add-open-btn {
    font-weight: 800;
    height: 32px;
    padding: 0 0.85rem;
    border: 2px solid var(--border);
}
.md-ol-add-modal-content {
    max-width: 720px;
    width: min(720px, 94vw);
}
.md-ol-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.md-ol-add-grid {
    display: grid;
    gap: 0.6rem;
    align-items: end;
}
.md-ol-add-grid--primary {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.md-ol-add-grid--secondary {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.md-ol-add-notes {
    grid-column: 1 / -1;
}
.md-ol-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
}

/* Fleet ??? Add Vehicle modal (same pattern as Other Locations) */
.md-fleet-add-modal-content {
    max-width: 780px;
    width: min(780px, 94vw);
}
.md-fleet-add-address {
    grid-column: 1 / -1;
}

/* Leadership & Finance (Back Office)
   Rebuilt 2026-09-11 to share the Accounting finance shell:
     .master-data-shell--finance      → fullwidth shell + tabs strip
     .master-data-shell--leadership   → LF-specific spacing tweaks
     .nscc-erp-tabs.nscc-tab-groups   → grouped folder tabs (Overview /
                                        Reconciliation / Insights / Reports)
     .nscc-mode-check                 → Easy/Advanced switch (parked into
                                        the top-right of the chrome strip)
   Widgets are rendered as .lf-widget cards inside .nscc-finance-panel; each
   widget uses .lf-widget__head / .lf-widget__body so the KPI row and the
   toolbar always wrap on narrow screens. */
.lf-shell { padding-bottom: 1.5rem; }
.lf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.15rem 0 1rem;
    min-width: 0;
}
.lf-toolbar__label { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.lf-toolbar__stamp { flex: 1 1 auto; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-muted { font-size: 0.72rem; color: var(--text-muted); }
.lf-error { font-size: 0.75rem; color: #b91c1c; font-weight: 700; margin: 0.5rem 0; }
.lf-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0;
}
.lf-kpi-card { border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 8px; padding: 0.65rem 0.75rem; background: transparent; }
.lf-kpi-label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.lf-kpi-value { font-size: 1.35rem; font-weight: 900; color: var(--brand, #1a2b45); margin-top: 0.15rem; }
.lf-kpi-sub { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.2rem; }
.lf-widget-kpi { min-width: 0; }
.lf-widget-kpi__hint { font-size: 0.66rem; color: var(--text-muted); margin-top: 0.15rem; display: block; }
.lf-section { margin: 1rem 0 1.25rem; }
.lf-section-title { margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 800; color: var(--text-secondary); }
.lf-table { font-size: 0.72rem; }
.lf-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.5rem 0; align-items: center; }
.lf-shortcuts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lf-details { margin-top: 0.65rem; font-size: 0.72rem; }
.lf-checklist { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.72rem; color: var(--text-muted); line-height: 1.55; }
.lf-checklist code { font-size: 0.68rem; }
.lf-inbound-poll { margin-top: 0.35rem; }
/* Widget cards — one card per section (Accounting dashboard, inner widgets). */
.lf-widget {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 10px;
    padding: 0.75rem 0.85rem 0.85rem;
    /* Blend with the theme background instead of hardcoding a white card. */
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.lf-widget__head { display: flex; flex-direction: column; gap: 0.15rem; }
.lf-widget__title { margin: 0; font-size: 0.9rem; font-weight: 800; color: var(--text-primary, #18181b); }
.lf-widget__subtitle { margin: 0; font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }
.lf-widget__body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.lf-widget__body > .lf-actions,
.lf-widget__body > .lf-shortcuts,
.lf-widget__body > .lf-toolbar { margin: 0; }
.lf-widget__body .nscc-table-scroll { overflow-x: auto; }
.lf-widget__body .lf-table { width: 100%; }

/* Leadership shell tweaks — reuse Accounting's fullwidth finance shell but
   let widgets breathe with slightly larger side padding, and let the panel
   scroll independently on tall widgets. */
.master-data-shell--leadership { padding: 0.55rem 0.85rem 0.75rem; }
.master-data-shell--leadership > .nscc-finance-panel { min-height: 0; }

/* Leadership screens: white/card boxes get a hard black border. */
#executive-dashboard-view .exec-kpi-card,
#executive-dashboard-view .exec-state-card,
#executive-dashboard-view .exec-chart-card,
#executive-dashboard-view .exec-drill-panel,
#executive-dashboard-view .exec-widget,
#executive-dashboard-view .master-data-header-box,
#executive-dashboard-view .nscc-ledger-table-wrap,
#executive-dashboard-view .nscc-ledger-kpi,
#executive-dashboard-view .exec-dash-filter select {
    border-color: var(--nscc-line, #000000) !important;
}
#executive-dashboard-view .master-data-header-box {
    border-style: solid;
    border-width: 2px;
}
#executive-dashboard-view .nscc-ledger-table-wrap,
#executive-dashboard-view .nscc-ledger-kpi {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
}

/* Dense ledgers (Accounting / Payroll / HR reports) */
.nscc-table--dense { font-size: 0.72rem; }
/* Fleet Management → Vehicles / Mileage Log (nscc-ops-field-ui.js) */
.nscc-ops-fleet-unit { font-weight: 800; padding: 0; }
.nscc-ops-fleet-sub { color: var(--text-muted); font-size: 0.7rem; }
.nscc-ops-fleet-mono { font-family: monospace; white-space: nowrap; }
.nscc-ops-fleet-strong { font-weight: 800; }
.nscc-ops-fleet-phase { text-transform: uppercase; font-weight: 800; }
.nscc-table--dense th,
.nscc-table--dense td { padding: 0.22rem 0.42rem; white-space: nowrap; }
.nscc-ledger-table-wrap { overflow: auto; max-height: min(70vh, 640px); border: 1px solid var(--border, #d4d4d8); border-radius: 6px; }
.nscc-ledger-head { margin-bottom: 0.75rem; }
.nscc-ledger-head__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.nscc-ledger-period { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.nscc-ledger-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; margin-top: 0.65rem; }
.nscc-ledger-kpi { border: 1px solid var(--border, #d4d4d8); border-radius: 6px; padding: 0.45rem 0.55rem; background: transparent; }
.nscc-ledger-kpi__label { display: block; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.nscc-ledger-kpi__value { font-size: 1.05rem; font-weight: 800; }
.nscc-ledger-kpi__hint { display: block; font-size: 0.62rem; color: var(--text-muted); }
.nscc-chip { display: inline-block; font-size: 0.62rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 8px; background: transparent; color: var(--text-primary); border: 4px solid #64748b; }
.nscc-chip--ok { background: transparent; color: var(--text-primary); border-color: #34C759; }
.nscc-chip--warn { background: transparent; color: var(--text-primary); border-color: #FF9500; }
.nscc-chip--bad { background: transparent; color: var(--text-primary); border-color: #FF3B30; }
.nscc-chip--neutral { background: transparent; color: var(--text-primary); border-color: #64748b; }
.nscc-train-row--active { background: rgba(13, 148, 136, 0.10); }

/* Advanced immersive LMS */
.nscc-train-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.85rem 0 0.5rem;
}
.nscc-train-immersive {
  border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
  border-radius: 10px;
  background: var(--bg-card, #fff);
  overflow: hidden;
}
.nscc-train-immersive__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), transparent 60%);
}
.nscc-train-immersive__course { font-size: 1.05rem; }
.nscc-train-immersive__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.nscc-train-immersive__grid {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  min-height: 28rem;
}
@media (max-width: 800px) {
  .nscc-train-immersive__grid { grid-template-columns: 1fr; }
}
.nscc-train-immersive__rail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.65rem;
  border-right: 1px solid var(--border, #d1d5db);
  background: var(--bg-muted, #f4f4f5);
  max-height: 70vh;
  overflow: auto;
}
.nscc-train-immerse-lesson {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 0.4rem 0.45rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.nscc-train-immerse-lesson.is-active {
  border-color: var(--nscc-line, #000);
  background: var(--bg-card, #fff);
  box-shadow: 0 1px 0 #000;
}
.nscc-train-immerse-num {
  flex: 0 0 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nscc-train-immerse-title { flex: 1; font-size: 0.72rem; line-height: 1.3; }
.nscc-train-immersive__stage { padding: 0.85rem 1rem 1.1rem; }
.nscc-train-immerse-summary {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted, #52525b);
  margin: 0 0 0.75rem;
}
.nscc-train-resource-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.nscc-train-resource {
  border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  background: var(--bg-card, #fff);
}
.nscc-train-resource header {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
}
.nscc-train-res-type {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6rem;
  font-weight: 800;
  color: #0f766e;
}
.nscc-train-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  border-radius: 6px;
  overflow: hidden;
}
.nscc-train-video iframe,
.nscc-train-video-el {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.nscc-train-video--empty {
  aspect-ratio: auto;
  background: transparent;
  padding: 0;
}
.nscc-train-img,
.nscc-train-poster,
.nscc-train-graph {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}
.nscc-train-immersive__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, #d1d5db);
}

/* Keyboard data entry ??? visible focus on high-volume forms */
[data-nscc-entry] input:focus,
[data-nscc-entry] select:focus,
[data-nscc-entry] textarea:focus,
[data-nscc-entry] button:focus-visible,
.nscc-mje-line input:focus,
.nscc-mje-line select:focus,
.nscc-pay-hours:focus,
.nscc-budget-amt:focus,
.nscc-bank-match-gl:focus {
    outline: 2px solid var(--brand-light);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22);
}
.nscc-entry-kbd-hint { font-size: 0.68rem; margin: 0.25rem 0 0.5rem; }
.nscc-mje-line { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.25rem 0; }
.nscc-mje-line select,
.nscc-mje-line input { min-width: 6rem; }

/* ============================================================
   HARBOR OPS ??? Dispatcher console redesign (2026-08)
   Soft chrome, brand-first header, teal accent, motion
   ============================================================ */

@keyframes nscc-chrome-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes nscc-view-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes nscc-brand-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.0); }
    50% { box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.12); }
}

.app-container {
    background: transparent;
}

.main-content {
    background: transparent;
}

.top-header {
    border-bottom: none !important;
    background: color-mix(in srgb, var(--bg-raised) 88%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
    animation: nscc-chrome-in var(--dur-slow) var(--ease-out);
}

.nscc-chrome-brand-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    padding: var(--nscc-pad-sm, 0.35rem) var(--nscc-pad-lg, 0.7rem);
    /* Very thin dark-gray diagonal stripe pattern over the base banner color. */
    background:
        repeating-linear-gradient(45deg,
            rgba(63, 63, 70, 0.09) 0, rgba(63, 63, 70, 0.09) 1px,
            transparent 1px, transparent 7px),
        var(--banner-bg, var(--chrome-brand-row-bg, #e4e4e7));
    /* Thin square border around the banner. */
    border: 1px solid #9ca3af;
    gap: var(--nscc-gap, 0.4rem);
    column-gap: 1rem;
    color: var(--banner-fg, var(--text-primary));
}
.nscc-chrome-brand-row > :first-child {
    justify-self: start;
    min-width: 0;
}
.nscc-chrome-brand-row > :last-child {
    justify-self: end;
    min-width: 0;
}

.nscc-chrome-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.65rem 0 0.5rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    background: var(--bg-sunken, #f3f4f6);
    color: var(--text-primary, #111827);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
    max-width: min(100%, 14rem);
    box-sizing: border-box;
}
.nscc-chrome-nav-back:hover,
.nscc-chrome-nav-back:focus-visible {
    background: #e5e7eb;
    outline: 2px solid var(--brand, #2563eb);
    outline-offset: 1px;
}
.nscc-chrome-nav-back__icon {
    font-size: 0.95rem;
    line-height: 1;
}
.nscc-chrome-nav-back__label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.nscc-chrome-nav-back[hidden] {
    display: none !important;
}

.nscc-chrome-brand-mark {
    display: flex;
    align-items: center;
    gap: var(--nscc-gap, 0.4rem);
}
button.nscc-chrome-brand-mark {
    /* Same chip as username + avatar — the banner's own chip token */
    background: var(--banner-chip-bg, #d1d5db);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    padding: 0.2rem 0.45rem 0.2rem 0.3rem;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    box-sizing: border-box;
    min-height: 64px;
}
button.nscc-chrome-brand-mark:hover .nscc-chrome-brand-name,
button.nscc-chrome-brand-mark:focus-visible .nscc-chrome-brand-name {
    color: var(--chrome-folder-active);
}
button.nscc-chrome-brand-mark:focus-visible {
    outline: 2px solid var(--chrome-folder-active);
    outline-offset: 2px;
}

.nscc-chrome-brand-mark img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    /* Light mode: same as window/page background; OAuth gate keeps its own white tile */
    background: var(--bg-page, #f4f4f5) !important;
    padding: 4px;
    animation: nscc-brand-pulse 4.5s var(--ease-out) infinite;
    filter: none !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    box-sizing: border-box;
}

.nscc-chrome-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.nscc-chrome-brand-name {
    font-family: var(--brand-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--banner-fg, var(--text-primary));
}

/* BEACON: same display face and weight as NORTHSTAR, shorter, and exactly as
   wide. The word is SVG text with textLength = the full column width and
   lengthAdjust = spacingAndGlyphs, so the letters themselves are drawn wider
   (not taller) until the word fills the width the NORTHSTAR line gives the
   column; the natural tight spacing of the face is kept. No measuring, no JS. */
.nscc-chrome-brand-sub {
    display: block;
    line-height: 0;
    color: var(--banner-muted, var(--text-secondary));
    text-transform: uppercase;
    margin-top: 0.14rem;
}
.nscc-chrome-brand-sub svg {
    display: block;
    width: 100%;
    height: 0.6rem;
    overflow: visible;
}
.nscc-chrome-brand-sub text {
    font-family: var(--brand-display);
    font-size: 12.5px;
    font-weight: 800;
    fill: currentColor;
}

.nscc-chrome-brand-row .user-name,
.nscc-chrome-brand-row .user-role,
.nscc-chrome-brand-row .header-sign-out-link {
    color: var(--banner-fg, var(--text-primary)) !important;
}

.nscc-chrome-brand-row .nscc-header-clock-host,
.nscc-chrome-brand-row #nscc-header-clock-host {
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    padding: 0 0.35rem;
}
.nscc-chrome-brand-row .nscc-header-center-cluster {
    gap: 0.55rem;
}

.nscc-chrome-brand-row .nscc-header-clock {
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: min(100%, 28.5rem);
    margin-left: 0;
    padding: 0;
    color: var(--banner-fg, var(--text-primary)) !important;
}

.nscc-chrome-brand-row .nscc-header-clock-zone {
    background: var(--banner-chip-bg, #d1d5db) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: var(--radius-lg);
}

.nscc-chrome-brand-row .nscc-header-clock-zone-time,
.nscc-chrome-brand-row .nscc-header-clock-zone-name {
    color: var(--banner-fg, var(--text-primary)) !important;
}

.nscc-chrome-brand-row .btn-ghost {
    background: var(--chrome-logo-box-bg, #d1d5db);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-color: var(--nscc-line, #000000);
    color: var(--banner-fg, var(--text-primary));
    font-weight: 800;
}

.nscc-chrome-brand-row .btn-ghost:hover {
    background: var(--chrome-logo-box-bg, #d1d5db);
    border-color: var(--nscc-line, #000000);
    color: var(--banner-fg, var(--text-primary));
    filter: brightness(0.96);
}

/* Round banner utility buttons ? logo-box gray fill + bold black ring */
.nscc-chrome-brand-row .btn.btn-icon,
.nscc-chrome-brand-row .btn-ghost.btn-icon {
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    border-radius: 8px !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-color: var(--nscc-line, #000000) !important;
    background: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !important;
    color: var(--banner-fg, var(--text-primary)) !important;
    -webkit-text-fill-color: var(--banner-fg, var(--text-primary)) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
.nscc-chrome-brand-row .btn.btn-icon:hover,
.nscc-chrome-brand-row .btn-ghost.btn-icon:hover {
    background: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !important;
    border-color: var(--nscc-line, #000000) !important;
    color: var(--banner-fg, var(--text-primary)) !important;
    filter: brightness(0.96);
}

/* Employee name + avatar cluster ? same gray chip as timezone zones */
.nscc-chrome-brand-row .user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0.55rem 0.3rem 0.65rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 64px;
    background: var(--banner-chip-bg, #d1d5db) !important;
    background-color: var(--banner-chip-bg, #d1d5db) !important;
}
/* Light mode: keep user chip locked to timezone zone fill */
html:not(.dark) body:not(.dark-theme) .nscc-chrome-brand-row .user-profile,
html body:not(.dark-theme) .nscc-chrome-brand-row .user-profile {
    background: var(--banner-chip-bg, #d1d5db) !important;
    background-color: var(--banner-chip-bg, #d1d5db) !important;
    border-color: var(--nscc-line, #000000) !important;
}
html:not(.dark) body:not(.dark-theme) .nscc-chrome-brand-row .nscc-header-clock-zone,
html body:not(.dark-theme) .nscc-chrome-brand-row .nscc-header-clock-zone {
    background: var(--banner-chip-bg, #d1d5db) !important;
    background-color: var(--banner-chip-bg, #d1d5db) !important;
}
.nscc-chrome-brand-row .user-profile .user-avatar,
.nscc-chrome-brand-row #header-user-avatar {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    box-shadow: none !important;
}

:root.dark .nscc-chrome-brand-row button.nscc-chrome-brand-mark,
body.dark-theme .nscc-chrome-brand-row button.nscc-chrome-brand-mark {
    background: var(--banner-chip-bg, #4b5563) !important;
    border-color: #9ca3af !important;
}
:root.dark .nscc-chrome-brand-row .user-profile,
body.dark-theme .nscc-chrome-brand-row .user-profile {
    background: var(--banner-chip-bg, #4b5563) !important;
    border-color: #9ca3af !important;
}
:root.dark .nscc-chrome-brand-row .btn.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon,
:root.dark .nscc-chrome-brand-row .btn-ghost.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon,
:root.dark .nscc-chrome-brand-row .user-profile .user-avatar,
body.dark-theme .nscc-chrome-brand-row .user-profile .user-avatar,
:root.dark .nscc-chrome-brand-row #header-user-avatar,
body.dark-theme .nscc-chrome-brand-row #header-user-avatar {
    border-color: #9ca3af !important;
}
:root.dark .nscc-chrome-brand-row .btn.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon,
:root.dark .nscc-chrome-brand-row .btn-ghost.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon,
:root.dark .nscc-chrome-brand-row .btn-ghost,
body.dark-theme .nscc-chrome-brand-row .btn-ghost {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
:root.dark .nscc-chrome-brand-row .btn.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon,
:root.dark .nscc-chrome-brand-row .btn-ghost.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon,
:root.dark .nscc-chrome-brand-row .btn-ghost,
body.dark-theme .nscc-chrome-brand-row .btn-ghost {
    background: var(--chrome-logo-box-bg, #4b5563) !important;
    background-color: var(--chrome-logo-box-bg, #4b5563) !important;
}
:root.dark .nscc-chrome-brand-row .btn.btn-icon:hover,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon:hover,
:root.dark .nscc-chrome-brand-row .btn-ghost.btn-icon:hover,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon:hover,
:root.dark .nscc-chrome-brand-row .btn-ghost:hover,
body.dark-theme .nscc-chrome-brand-row .btn-ghost:hover {
    background: var(--chrome-logo-box-bg, #4b5563) !important;
    background-color: var(--chrome-logo-box-bg, #4b5563) !important;
    filter: brightness(1.08);
}

.nscc-chrome-nav-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--nscc-gap, 0.4rem);
    padding: var(--nscc-pad-sm, 0.35rem) var(--nscc-pad-lg, 0.7rem) var(--nscc-pad-md, 0.5rem);
    flex-wrap: nowrap;
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
}

.top-tabs {
    background: var(--bg-sunken) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md) !important;
    padding: 3px !important;
    gap: 0.15rem !important;
}

.tab-btn {
    border-radius: var(--radius-sm) !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em;
    color: var(--text-secondary) !important;
    padding: 0.28rem 0.55rem !important;
}

.tab-btn.active {
    background: var(--brand) !important;
    color: #f8fafc !important;
    border: 1px solid var(--brand) !important;
    box-shadow: var(--shadow-sm) !important;
}

.tab-btn:hover:not(.active) {
    background: color-mix(in srgb, var(--brand-light) 12%, transparent);
    color: var(--text-primary) !important;
}

.tab-dropdown-menu {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.tab-dropdown.open .tab-dropdown-menu {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
}

:root.dark .tab-dropdown-menu,
body.dark-theme .tab-dropdown-menu,
:root.dark .tab-dropdown.open .tab-dropdown-menu,
body.dark-theme .tab-dropdown.open .tab-dropdown-menu {
    border-color: var(--nscc-line, #ffffff) !important;
}

.dispatch-ticker {
    border: none !important;
    box-shadow: none !important;
    background: var(--ticker-bar-gray, #d1d5db) !important;
    color: var(--ticker-bar-ink, #e4e4e7) !important;
    padding: 0 !important;
    box-sizing: border-box;
    align-items: center !important;
}

.dispatch-ticker .ticker-label {
    color: var(--ticker-bar-ink, #1c1917) !important;
    -webkit-text-fill-color: var(--ticker-bar-ink, #1c1917) !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !important;
    border-right: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
    padding: 0 0.85rem;
}

.dispatch-ticker marquee,
.dispatch-ticker-viewport {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    line-height: var(--ticker-bar-height, 2.4rem) !important;
    overflow: hidden !important;
}

.dispatch-ticker .ticker-seg,
.dispatch-ticker .ticker-seg.ticker-seg--trip,
.dispatch-ticker .ticker-seg.ticker-seg--announce,
.dispatch-ticker .ticker-seg.ticker-seg--empty,
.dispatch-ticker .ticker-seg.ticker-seg--action,
.ticker-seg,
.ticker-seg.ticker-seg--trip,
.ticker-seg.ticker-seg--announce,
.ticker-seg.ticker-seg--empty,
.ticker-seg.ticker-seg--action {
    background: var(--ticker-seg-fill, #9ca3af) !important;
    background-color: var(--ticker-seg-fill, #9ca3af) !important;
    color: var(--ticker-bar-ink, #1c1917) !important;
    -webkit-text-fill-color: var(--ticker-bar-ink, #1c1917) !important;
    height: var(--ticker-chip-height, calc(var(--ticker-bar-height, 2.4rem) - 10px)) !important;
    min-height: 0 !important;
    max-height: var(--ticker-chip-height, calc(var(--ticker-bar-height, 2.4rem) - 10px)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: var(--ticker-chip-radius, 8px) !important;
    border-width: var(--ticker-chip-border-w, 4px) !important;
    border-style: solid !important;
    border-color: var(--ticker-accent, currentColor) !important;
    box-shadow: none !important;
    filter: none !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}
.dispatch-ticker .ticker-seg.ticker-seg--trip,
.ticker-seg.ticker-seg--trip {
    border-radius: var(--ticker-chip-radius, 8px) !important;
    cursor: pointer !important;
    gap: 0.35rem;
    padding-right: 0.35rem !important;
}
.dispatch-ticker .ticker-seg.ticker-seg--trip:hover,
.ticker-seg.ticker-seg--trip:hover {
    filter: none !important;
    box-shadow: none !important;
    background: var(--ticker-seg-fill, #9ca3af) !important;
    background-color: var(--ticker-seg-fill, #9ca3af) !important;
}
:root.dark .dispatch-ticker .ticker-seg,
body.dark-theme .dispatch-ticker .ticker-seg,
:root.dark .ticker-seg,
body.dark-theme .ticker-seg {
    background: var(--ticker-seg-fill-dark, #374151) !important;
    background-color: var(--ticker-seg-fill-dark, #374151) !important;
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
    box-shadow: none !important;
    filter: none !important;
}
:root.dark .dispatch-ticker .ticker-seg.ticker-seg--trip:hover,
body.dark-theme .dispatch-ticker .ticker-seg.ticker-seg--trip:hover,
:root.dark .ticker-seg.ticker-seg--trip:hover,
body.dark-theme .ticker-seg.ticker-seg--trip:hover {
    box-shadow: none !important;
}
.ticker-seg-text {
    display: inline-block;
    max-width: 42rem;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    max-height: 100%;
}
.ticker-seg-close {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    padding: 0;
    border: 1.5px solid currentColor;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.ticker-seg-close:hover {
    background: var(--bg-card, #ffffff);
    border-color: #b91c1c;
    color: #b91c1c;
}
:root.dark .ticker-seg-close,
body.dark-theme .ticker-seg-close {
    background: rgba(28, 28, 27, 0.9);
}
:root.dark .ticker-seg-close:hover,
body.dark-theme .ticker-seg-close:hover {
    background: rgba(127, 29, 29, 0.85);
    border-color: #fca5a5;
    color: #fecaca;
}
/* "Hidden (n)" at the end of the LIVE bar, and its list of alerts to show again
   (assets/nscc-live-ops.js). Dismissals are shared by every dispatcher for the day. */
.ticker-hidden-btn {
    appearance: none;
    flex-shrink: 0;
    align-self: stretch;
    margin: 0;
    /* extra right room: the bar's hover control (.nscc-bw-ctl) sits over its top-right corner */
    padding: 0 1.4rem 0 0.75rem;
    border: 0;
    border-left: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    background: var(--chrome-logo-box-bg, #d1d5db);
    color: var(--ticker-bar-ink, #1c1917);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
}
.ticker-hidden-btn[hidden] { display: none; }
.ticker-hidden-btn:hover,
.ticker-hidden-btn:focus-visible { background: var(--bg-card, #ffffff); }
.ticker-hidden-panel {
    position: fixed;
    z-index: 10050;
    width: min(26rem, calc(100vw - 16px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #1c1917);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    box-shadow: 2px 2px 0 var(--nscc-line, #000000);
    font-size: 0.78rem;
    box-sizing: border-box;
}
.ticker-hidden-panel__head {
    font-weight: 800;
    margin-bottom: 0.35rem;
}
.ticker-hidden-panel__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--border-color, #d4d4d8);
}
.ticker-hidden-panel__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ticker-hidden-panel__meta {
    color: var(--text-muted, #71717a);
    font-size: 0.68rem;
    margin-top: 0.1rem;
}
.ticker-hidden-panel__unhide,
.ticker-hidden-panel__all {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    background: var(--bg-raised, #f4f4f5);
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}
.ticker-hidden-panel__all {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
}

.nav-btn {
    border-radius: var(--radius-sm);
}

.nav-btn.active {
    background: var(--chrome-folder-active, var(--brand)) !important;
    color: var(--text-inverse, #fafaf9) !important;
    box-shadow: var(--shadow-sm) !important;
}

.nav-btn[data-view="patrol-view"].active,
.nav-btn.patrol-active {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    box-shadow: var(--shadow-sm) !important;
}

.sub-nav-btn.active,
.nav-btn.sub-nav-btn.active {
    background: var(--chrome-folder-active) !important;
    color: var(--chrome-folder-active-ink, #f7f1e4) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
        -3px 0 0 var(--bg-card),
        3px 0 0 var(--bg-card) !important;
}

.view-section.active,
.view-section.is-visible {
    animation: nscc-view-in var(--dur-slow) var(--ease-out);
}

.view-header h2,
.erp-connect-title,
.master-data-header-box h2 {
    font-family: var(--brand-display);
    letter-spacing: -0.02em;
}

.icon-btn {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.global-search input {
    border-radius: var(--radius-md);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
}

/* Hard box borders ? black (light) / white (dark); folder tabs stay bold */
.master-data-shell,
.nscc-erp-panel,
.nscc-table-scroll,
.modal-content {
    border-color: var(--nscc-line, #000000);
}
:root.dark .master-data-shell,
:root.dark .nscc-erp-panel,
:root.dark .nscc-table-scroll,
:root.dark .modal-content,
body.dark-theme .master-data-shell,
body.dark-theme .nscc-erp-panel,
body.dark-theme .nscc-table-scroll,
body.dark-theme .modal-content {
    border-color: var(--nscc-line, #ffffff);
}
.top-header,
.nscc-chrome-brand-row {
    border: none !important;
    box-shadow: none !important;
}
/* Keep primary screen title bars hard black (do not soften) */
.master-data-header-box,
.nscc-ledger-head,
.master-data-shell--bo-connect .erp-connect-header {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-color: var(--nscc-line, #000000) !important;
}
.dispatch-ticker {
    border: none !important;
    box-shadow: none !important;
}

#global-mode-badge {
    border-radius: var(--radius-sm) !important;
    border-width: 3px !important;
    border-style: solid !important;
    background: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !important;
    box-shadow: none !important;
}

/* Flat console borders: theme hairline (light + dark) ? selects keep black/white below */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html body textarea,
html body .form-control:not(select),
html body .form-control-panel:not(select),
html body .select-toolbar,
html body .nscc-search-input,
html body .search-input,
html body [contenteditable="true"] {
    border: 1px solid var(--border) !important;
}

/* Native + custom dropdowns: black border (white in dark), theme text */
html body select,
html body .nscc-select,
html body .form-select,
html body .nscc-form-select,
html body .nscc-support-select,
html body .select-control,
html body .filter-select,
html body select.form-control-panel,
html body .select-inline,
html body .select-inline--dispatch,
html body .select-inline--ghost,
html body .select-compact,
html body .nscc-location-combobox,
html body .nscc-location-combobox__panel,
html body .nscc-location-combobox__search,
html body .tab-dropdown-menu,
html body .nav-dropdown-content,
html body .md-save-dropdown-menu,
html body .erp-export-dropdown-menu,
html body .dropdown-menu {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary);
    background-color: var(--bg-card);
    font-family: var(--font-sans);
}

html body select,
html body .nscc-select,
html body .form-select,
html body .nscc-form-select,
html body .nscc-support-select,
html body .select-control,
html body .filter-select,
html body select.form-control-panel {
    color-scheme: light;
}

:root.dark body select,
:root.dark body .nscc-select,
:root.dark body .form-select,
:root.dark body .nscc-form-select,
:root.dark body .nscc-support-select,
:root.dark body .select-control,
:root.dark body .filter-select,
:root.dark body select.form-control-panel,
:root.dark body .select-inline,
:root.dark body .nscc-location-combobox,
:root.dark body .nscc-location-combobox__panel,
:root.dark body .nscc-location-combobox__search,
:root.dark body .tab-dropdown-menu,
:root.dark body .nav-dropdown-content,
:root.dark body .md-save-dropdown-menu,
:root.dark body .erp-export-dropdown-menu,
:root.dark body .dropdown-menu,
body.dark-theme select,
body.dark-theme .nscc-select,
body.dark-theme .form-select,
body.dark-theme .nscc-form-select,
body.dark-theme .nscc-support-select,
body.dark-theme .select-control,
body.dark-theme .filter-select,
body.dark-theme select.form-control-panel,
body.dark-theme .select-inline,
body.dark-theme .nscc-location-combobox,
body.dark-theme .nscc-location-combobox__panel,
body.dark-theme .nscc-location-combobox__search,
body.dark-theme .tab-dropdown-menu,
body.dark-theme .nav-dropdown-content,
body.dark-theme .md-save-dropdown-menu,
body.dark-theme .erp-export-dropdown-menu,
body.dark-theme .dropdown-menu {
    border-color: var(--nscc-line, #ffffff) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary);
    color-scheme: dark;
}

html body select option,
html body .form-select option,
html body .nscc-form-select option,
html body .nscc-support-select option,
html body .select-control option,
html body .filter-select option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

html body .status,
html body .status-chip,
html body .status-badge,
html body .badge,
html body .chip,
html body .tag,
html body .pill,
html body .nscc-chip,
html body .nscc-tag,
html body .nscc-badge,
html body .mode-badge,
html body .trip-status,
html body .job-status,
html body .ref-status-pill,
html body .nscc-dispatch-status-pill,
html body .nscc-fp-badge,
html body .ops-chip,
html body .nscc-pulse-action-chip__status,
html body .cm-status-badge {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-width: var(--nscc-status-border-w, 4px) !important;
    border-style: solid !important;
    border-color: var(--cm-status, #64748b) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
html body .cm-trip-card {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-width: 4px !important;
    border-style: solid !important;
    border-color: var(--cm-status, var(--nscc-line, #000000)) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

html body .nscc-pulse-action-chip,
html body .nscc-pulse-action-chip.nscc-pulse-action-chip--critical,
html body .nscc-pulse-action-chip.nscc-pulse-action-chip--unassigned,
html body .nscc-pulse-action-chip.nscc-pulse-action-chip--warning,
html body .nscc-pulse-action-chip.nscc-pulse-action-chip--jeopardy {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-color: var(--nscc-line, #000000) !important;
    border-radius: 8px !important;
    box-sizing: border-box;
}
html body .nscc-pulse-action-chip:hover {
    background: var(--bg-raised) !important;
    background-color: var(--bg-raised) !important;
}
/* Modals: thick frame (stronger than cards/panels) */
html body .modal-content,
html body .modal .modal-content,
html body .trip-modal-content,
html body .welcome-modal .modal-content,
html body #nscc-welcome-modal .modal-content,
html body #system-settings-modal .modal-content,
html body #admin-settings-modal .modal-content,
html body #support-modal .modal-content,
html body #trip-details-modal .modal-content,
html body #employee-card-modal .modal-content,
html body #new-dispatch-modal .modal-content {
    border: 4px solid var(--nscc-line, #000000) !important;
    border-width: 4px !important;
    border-style: solid !important;
    border-color: var(--nscc-line, #000000) !important;
}
:root.dark body .modal-content,
:root.dark body .modal .modal-content,
:root.dark body .trip-modal-content,
body.dark-theme .modal-content,
body.dark-theme .modal .modal-content,
body.dark-theme .trip-modal-content {
    border: 4px solid var(--nscc-line, #ffffff) !important;
    border-width: 4px !important;
    border-color: var(--nscc-line, #ffffff) !important;
}
:root.dark body .card,
:root.dark body .panel,
:root.dark body .box,
:root.dark body .nscc-card,
:root.dark body .nscc-panel,
:root.dark body .nscc-box,
:root.dark body .modal-content,
:root.dark body .drawer,
:root.dark body .popover,
:root.dark body .dropdown-menu,
:root.dark body .menu-panel,
:root.dark body .well,
:root.dark body .surface-box,
:root.dark body .info-box,
:root.dark body .alert,
:root.dark body .callout,
:root.dark body .stat-card,
:root.dark body .kpi-card,
:root.dark body .tile,
:root.dark body .nscc-tile,
:root.dark body .list-panel,
:root.dark body .table-wrap,
:root.dark body .nscc-table-scroll,
:root.dark body .data-table-wrap,
:root.dark body .master-data-shell,
:root.dark body .nscc-erp-panel,
:root.dark body .view-header,
:root.dark body .sub-nav-panel,
:root.dark body .section-box,
:root.dark body .form-section,
:root.dark body .job-card:not([data-trip-status]),
:root.dark body .courier-card,
:root.dark body .kanban-column,
:root.dark body .courier-lane,
:root.dark body .batch-card,
:root.dark body .timeline-trips,
:root.dark body .timeline-grid-container,
:root.dark body .nscc-dash-kpi,
:root.dark body .nscc-dash-chart-card,
:root.dark body .nscc-kpi-card,
:root.dark body .exec-kpi-card,
:root.dark body .lf-kpi-card,
:root.dark body .lf-widget,
:root.dark body .finance-card,
:root.dark body .overview-card,
:root.dark body .nscc-pulse-action-chip,
:root.dark body .nscc-pulse-action-chip__status,
:root.dark body .nscc-dispatch-status-pill,
:root.dark body .nscc-fp-badge,
:root.dark body .status,
:root.dark body .status-chip,
:root.dark body .status-badge,
:root.dark body .badge,
:root.dark body .chip,
:root.dark body .tag,
:root.dark body .pill,
:root.dark body .nscc-chip,
:root.dark body .nscc-tag,
:root.dark body .nscc-badge,
:root.dark body .mode-badge,
:root.dark body .trip-status,
:root.dark body .job-status,
:root.dark body .ref-status-pill,
:root.dark body .master-data-header-box,
:root.dark body .nscc-ledger-head,
:root.dark body .nscc-erp-tab-panel.active,
:root.dark body .exec-dash-panel,
body.dark-theme .card,
body.dark-theme .panel,
body.dark-theme .box,
body.dark-theme .nscc-card,
body.dark-theme .nscc-panel,
body.dark-theme .nscc-box,
body.dark-theme .modal-content,
body.dark-theme .drawer,
body.dark-theme .popover,
body.dark-theme .dropdown-menu,
body.dark-theme .menu-panel,
body.dark-theme .well,
body.dark-theme .surface-box,
body.dark-theme .info-box,
body.dark-theme .alert,
body.dark-theme .callout,
body.dark-theme .stat-card,
body.dark-theme .kpi-card,
body.dark-theme .tile,
body.dark-theme .nscc-tile,
body.dark-theme .list-panel,
body.dark-theme .table-wrap,
body.dark-theme .nscc-table-scroll,
body.dark-theme .data-table-wrap,
body.dark-theme .master-data-shell,
body.dark-theme .nscc-erp-panel,
body.dark-theme .view-header,
body.dark-theme .sub-nav-panel,
body.dark-theme .section-box,
body.dark-theme .form-section,
body.dark-theme .job-card:not([data-trip-status]),
body.dark-theme .courier-card,
body.dark-theme .kanban-column,
body.dark-theme .courier-lane,
body.dark-theme .batch-card,
body.dark-theme .timeline-trips,
body.dark-theme .timeline-grid-container,
body.dark-theme .nscc-dash-kpi,
body.dark-theme .nscc-dash-chart-card,
body.dark-theme .nscc-kpi-card,
body.dark-theme .exec-kpi-card,
body.dark-theme .lf-kpi-card,
body.dark-theme .lf-widget,
body.dark-theme .finance-card,
body.dark-theme .overview-card,
body.dark-theme .nscc-pulse-action-chip,
body.dark-theme .nscc-pulse-action-chip__status,
body.dark-theme .nscc-dispatch-status-pill,
body.dark-theme .nscc-fp-badge,
body.dark-theme .status,
body.dark-theme .status-chip,
body.dark-theme .status-badge,
body.dark-theme .badge,
body.dark-theme .chip,
body.dark-theme .tag,
body.dark-theme .pill,
body.dark-theme .nscc-chip,
body.dark-theme .nscc-tag,
body.dark-theme .nscc-badge,
body.dark-theme .mode-badge,
body.dark-theme .trip-status,
body.dark-theme .job-status,
body.dark-theme .ref-status-pill,
body.dark-theme .master-data-header-box,
body.dark-theme .nscc-ledger-head,
body.dark-theme .nscc-erp-tab-panel.active,
body.dark-theme .exec-dash-panel {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #ffffff) !important;
    border-color: var(--nscc-line, #ffffff) !important;
    border-radius: 8px !important;
}

/* Folder panels keep no top border so selected tab cuts into the body */
html body .nscc-erp-tab-panel.active,
html body .exec-dash-panel {
    border-top: none !important;
}
:root.dark body .nscc-erp-tab-panel.active,
:root.dark body .exec-dash-panel,
body.dark-theme .nscc-erp-tab-panel.active,
body.dark-theme .exec-dash-panel {
    border-top: none !important;
}

/* Folder tabs: bold black (white in dark) on every tab */
:root.dark .nscc-erp-tabs .nscc-erp-tab-btn,
:root.dark .nscc-tab-groups .nscc-erp-tab-btn,
:root.dark .nscc-tab-groups .sub-nav-btn,
:root.dark #nscc-chrome-folder-tabs .nscc-erp-tab-btn,
:root.dark #nscc-chrome-folder-tabs .sub-nav-btn,
:root.dark #daily-pulse-folder-tabs .nscc-erp-tab-btn,
:root.dark #live-ops-header .nscc-erp-tab-btn,
:root.dark #live-ops-header .sub-nav-btn,
:root.dark #planner-header .nscc-erp-tab-btn,
:root.dark #planner-header .sub-nav-btn,
body.dark-theme .nscc-erp-tabs .nscc-erp-tab-btn,
body.dark-theme .nscc-tab-groups .nscc-erp-tab-btn,
body.dark-theme .nscc-tab-groups .sub-nav-btn,
body.dark-theme #nscc-chrome-folder-tabs .nscc-erp-tab-btn,
body.dark-theme #nscc-chrome-folder-tabs .sub-nav-btn,
body.dark-theme #daily-pulse-folder-tabs .nscc-erp-tab-btn,
body.dark-theme #live-ops-header .nscc-erp-tab-btn,
body.dark-theme #live-ops-header .sub-nav-btn,
body.dark-theme #planner-header .nscc-erp-tab-btn,
body.dark-theme #planner-header .sub-nav-btn {
    border-color: var(--nscc-line, #ffffff) !important;
}
:root.dark .nscc-erp-tabs .nscc-erp-tab-btn.active,
:root.dark .nscc-tab-groups .nscc-erp-tab-btn.active,
:root.dark .nscc-tab-groups .sub-nav-btn.active,
:root.dark #nscc-chrome-folder-tabs .nscc-erp-tab-btn.active,
:root.dark #nscc-chrome-folder-tabs .sub-nav-btn.active,
:root.dark #daily-pulse-folder-tabs .nscc-erp-tab-btn.active,
body.dark-theme .nscc-erp-tabs .nscc-erp-tab-btn.active,
body.dark-theme .nscc-tab-groups .nscc-erp-tab-btn.active,
body.dark-theme .nscc-tab-groups .sub-nav-btn.active,
body.dark-theme #nscc-chrome-folder-tabs .nscc-erp-tab-btn.active,
body.dark-theme #nscc-chrome-folder-tabs .sub-nav-btn.active,
body.dark-theme #daily-pulse-folder-tabs .nscc-erp-tab-btn.active {
    border-color: var(--nscc-line, #ffffff) !important;
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card)) !important;
}

body.dark-theme .nscc-chrome-brand-row,
:root.dark .nscc-chrome-brand-row {
    background: var(--bg-card);
    color: var(--text-secondary);
}
body.dark-theme .nscc-chrome-brand-name,
:root.dark .nscc-chrome-brand-name {
    color: var(--text-secondary);
}
body.dark-theme .nscc-chrome-brand-sub,
:root.dark .nscc-chrome-brand-sub {
    color: var(--text-muted);
}
body.dark-theme .nscc-chrome-brand-row .user-name,
body.dark-theme .nscc-chrome-brand-row .user-role,
body.dark-theme .nscc-chrome-brand-row .header-sign-out-link,
:root.dark .nscc-chrome-brand-row .user-name,
:root.dark .nscc-chrome-brand-row .user-role,
:root.dark .nscc-chrome-brand-row .header-sign-out-link {
    color: var(--text-secondary) !important;
}
body.dark-theme .nscc-chrome-brand-mark img,
:root.dark .nscc-chrome-brand-mark img {
    /* White logo tile; gray chip behind name matches user avatar chip */
    background: #ffffff !important;
    filter: none !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: 8px;
}
body.dark-theme .nscc-chrome-brand-row .nscc-header-clock,
:root.dark .nscc-chrome-brand-row .nscc-header-clock {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-primary);
}
body.dark-theme .nscc-chrome-brand-row .nscc-header-clock-zone,
:root.dark .nscc-chrome-brand-row .nscc-header-clock-zone {
    background: var(--banner-chip-bg, #4b5563) !important;
    border: 2px solid #9ca3af !important;
}
body.dark-theme .nscc-chrome-brand-row .nscc-header-clock-zone-time,
body.dark-theme .nscc-chrome-brand-row .nscc-header-clock-zone-name,
:root.dark .nscc-chrome-brand-row .nscc-header-clock-zone-time,
:root.dark .nscc-chrome-brand-row .nscc-header-clock-zone-name {
    color: var(--text-primary) !important;
}

@media (max-width: 900px) {
    .nscc-chrome-brand-name { font-size: 1.1rem; }
    .nscc-chrome-brand-mark img { width: 34px; height: 34px; }
    .nscc-chrome-nav-row { flex-wrap: wrap; }
}

.view-header.sub-nav-panel {
    background: color-mix(in srgb, var(--bg-raised) 92%, var(--brand-light));
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.sub-nav-scroll {
    gap: 0.25rem;
    padding: 0.4rem 1rem;
}

/* ?? Left-nav chrome: ticker + folder tabs (Accounting and all menus) ?? */
html.nscc-left-nav {
    /* Tight gap under the LIVE ticker to the folder tabs / left menu / screen
       top — enough to not clip, without dead space (was 1.25rem). */
    --nscc-ticker-clearance: 0.45rem;
}
html.nscc-left-nav .top-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}
html.nscc-left-nav .dispatch-ticker {
    display: flex !important;
    align-items: stretch !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: var(--ticker-bar-height, 1.85rem) !important;
    min-height: var(--ticker-bar-height, 1.85rem) !important;
    max-height: var(--ticker-bar-height, 1.85rem) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    margin: 0 0 var(--nscc-ticker-clearance, 1.25rem) 0 !important;
}
/* The LIVE label is exactly one rail wide, so its divider continues the left
   rail's right edge (Matt 2026-09-10: "make the little divider at the top on
   the ticker align with the width of the flyout"). */
html.nscc-left-nav .dispatch-ticker .ticker-label {
    flex: 0 0 var(--nscc-app-nav-rail, 48px);
    width: var(--nscc-app-nav-rail, 48px);
    padding: 0;
    justify-content: center;
}
html.nscc-left-nav #nscc-chrome-folder-tabs.is-visible,
html.nscc-left-nav #live-ops-header.is-visible,
html.nscc-left-nav #planner-header.is-visible {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: hidden !important;
    z-index: 1;
}
/* Parked-tab / title placeholders must not leave a gap under the ticker */
.nscc-folder-tabs-placeholder,
.nscc-page-title-placeholder {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
/* Fullscreen views must not cover brand/ticker/folder-tab chrome */
html.nscc-left-nav .view-section.nscc-view-fs,
html.nscc-left-nav #planner-view.nscc-planner-fs {
    top: calc(var(--nscc-left-nav-fs-top, 6.75rem) + var(--nscc-ticker-clearance, 1.25rem)) !important;
    left: var(--nscc-app-nav-rail, 48px) !important;
    width: calc(100vw - var(--nscc-app-nav-rail, 48px)) !important;
    height: calc(100vh - var(--nscc-left-nav-fs-top, 6.75rem) - var(--nscc-ticker-clearance, 1.25rem)) !important;
    inset: auto auto 0 var(--nscc-app-nav-rail, 48px);
}

/* ?? Admin configure-menus overlay (does not change folder-tab row height) ?? */
html.nscc-menu-config .nscc-app-nav-main.nscc-menu-vis-host,
html.nscc-menu-config .nscc-erp-tab-btn.nscc-menu-vis-host,
html.nscc-menu-config .sub-nav-btn.nscc-menu-vis-host {
    position: relative;
}
.nscc-menu-vis-check {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 8;
    display: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}
html.nscc-menu-config .nscc-menu-vis-check { display: block; }
.nscc-menu-vis-check input {
    position: absolute;
    opacity: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}
.nscc-menu-vis-check__box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 3px;
    background: var(--bg-card, #fff);
    box-sizing: border-box;
    font-size: 9px;
    line-height: 10px;
    text-align: center;
}
.nscc-menu-vis-check input:checked + .nscc-menu-vis-check__box:not(.is-locked) {
    background: #16a34a;
    border-color: var(--nscc-line, #000);
}
/* On a folder tab the theme layer clears the background of everything inside the
   tab with !important (shared-tokens.css, ".nscc-erp-tab-btn *"), which left a
   ticked box there with no fill. Only an !important declaration outranks that. */
html[data-nscc-theme] body:not(#_) .nscc-erp-tab-btn .nscc-menu-vis-check input:checked + .nscc-menu-vis-check__box:not(.is-locked) {
    background-color: #16a34a !important;
}
.nscc-menu-vis-check input:checked + .nscc-menu-vis-check__box:not(.is-locked)::after {
    content: '';
    display: block;
    width: 7px;
    height: 4px;
    margin: 2px auto 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}
.nscc-menu-vis-check__box.is-locked {
    background: var(--bg-sunken, #e4e4e7);
    color: var(--text-secondary, #3f3f46);
    font-size: 8px;
}
.nscc-menu-vis-check input:disabled {
    cursor: not-allowed;
}
html.nscc-menu-config .nscc-menu-vis-off {
    opacity: 0.42;
    filter: grayscale(0.55);
}
html:not(.nscc-menu-config) .nscc-menu-vis-hidden {
    display: none !important;
}
#nscc-menu-vis-toolbar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 12000;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: calc(100vw - 2rem);
    padding: 0.65rem 0.9rem;
    background: var(--bg-card, #fff);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.nscc-menu-vis-toolbar__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.nscc-menu-vis-toolbar__text strong {
    font-size: 0.82rem;
    font-weight: 800;
}
.nscc-menu-vis-toolbar__text span {
    font-size: 0.68rem;
    color: var(--text-muted, #64748b);
}
.nscc-menu-vis-toolbar__actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Demo 2 / native books: never paint ERP Connect or ERP-labeled chrome. */
html.nscc-native-finance .nscc-erp-only,
html.nscc-native-finance .nscc-erp-copy,
html.nscc-native-finance #nscc-chrome-folder-tabs [data-chrome-view="back-office-view"]:not([data-payroll-tab]):not([data-acct-tab]) {
    display: none !important;
}
html.nscc-native-finance .nscc-native-copy {
    display: revert !important;
}
html:not(.nscc-native-finance) .nscc-native-copy {
    display: none !important;
}

/* NSCC: Dispatch folder tabs must match Daily Pulse (override pill .sub-nav-btn !important) */
.nscc-tab-groups .sub-nav-btn,
.nscc-tab-groups .nav-btn.sub-nav-btn,
.sub-nav-panel .nscc-tab-groups .sub-nav-btn,
#live-ops-header .nscc-erp-tab-btn,
#live-ops-header .sub-nav-btn,
#planner-header .nscc-erp-tab-btn,
#planner-header .sub-nav-btn,
#support-header .nscc-erp-tab-btn,
#support-header .sub-nav-btn,
#back-office-header .nscc-erp-tab-btn,
#back-office-header .sub-nav-btn,
#nscc-chrome-folder-tabs .nscc-erp-tab-btn,
#nscc-chrome-folder-tabs .sub-nav-btn,
#daily-pulse-folder-tabs .nscc-erp-tab-btn,
#executive-dashboard-view .nscc-erp-tab-btn,
#form-management-view .nscc-erp-tab-btn,
#reports-view .nscc-erp-tab-btn,
#custom-export-view .nscc-erp-tab-btn,
.modal .nscc-erp-tab-btn,
.modal .nscc-trip-modal-tab,
.modal .support-modal-nav .sub-nav-btn,
.modal .nscc-employee-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    white-space: normal !important;
    flex: 0 0 auto !important;
    width: auto !important;
    /* Narrow enough that a 2+ word label wraps to two lines instead of
       stretching wide for one — this rule's own !important + broad
       selector list was silently overriding every earlier narrowing
       attempt made elsewhere in this file today. */
    max-width: 5.75rem !important;
    min-height: var(--nscc-folder-tab-h, 2.55rem) !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 -2px 0 !important;
    padding: 0.22rem 0.55rem 0.28rem !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: var(--chrome-folder) !important;
    background-color: var(--chrome-folder) !important;
    color: var(--chrome-folder-ink) !important;
    font-weight: 700 !important;
    /* Matched to the shared folder-tab rule (~line 9383) — 0.68rem so
       Leadership / Accounting / Payroll / Exec Dashboard all sit at the same
       compact-but-readable size. Any earlier 0.72rem !important overrides
       here won without this. */
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
    transform: translateY(2px) !important;
    text-transform: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.nscc-tab-groups .nscc-tab-group__tabs > .sub-nav-btn:first-child,
.nscc-tab-groups .nscc-tab-group__tabs > .nscc-erp-tab-btn:first-child,
#live-ops-header .nscc-tab-group__tabs > .nscc-erp-tab-btn:first-child,
#live-ops-header .nscc-tab-group__tabs > .sub-nav-btn:first-child,
#daily-pulse-folder-tabs .nscc-tab-group__tabs > .nscc-erp-tab-btn:first-child,
#nscc-chrome-folder-tabs .nscc-tab-group__tabs > .nscc-erp-tab-btn:first-child {
    margin-left: 0 !important;
}
.nscc-tab-groups .sub-nav-btn:hover,
.nscc-tab-groups .nscc-erp-tab-btn:hover,
#live-ops-header .nscc-erp-tab-btn:hover,
#live-ops-header .sub-nav-btn:hover,
#planner-header .nscc-erp-tab-btn:hover,
#support-header .nscc-erp-tab-btn:hover,
#back-office-header .nscc-erp-tab-btn:hover,
#nscc-chrome-folder-tabs .nscc-erp-tab-btn:hover,
#nscc-chrome-folder-tabs .sub-nav-btn:hover,
#daily-pulse-folder-tabs .nscc-erp-tab-btn:hover,
#executive-dashboard-view .nscc-erp-tab-btn:hover,
#form-management-view .nscc-erp-tab-btn:hover,
#reports-view .nscc-erp-tab-btn:hover,
#custom-export-view .nscc-erp-tab-btn:hover,
.modal .nscc-erp-tab-btn:hover,
.modal .nscc-trip-modal-tab:hover,
.modal .support-modal-nav .sub-nav-btn:hover,
.modal .nscc-employee-tab:hover {
    z-index: 2 !important;
    background: var(--bg-raised) !important;
    color: var(--chrome-folder-ink) !important;
    transform: translateY(1px) !important;
}
.nscc-tab-groups .sub-nav-btn.active,
.nscc-tab-groups .sub-nav-btn[aria-selected="true"],
.nscc-tab-groups .nscc-erp-tab-btn.active,
.nscc-tab-groups .nscc-erp-tab-btn[aria-selected="true"],
#live-ops-header .nscc-erp-tab-btn.active,
#live-ops-header .nscc-erp-tab-btn[aria-selected="true"],
#live-ops-header .sub-nav-btn.active,
#live-ops-header .sub-nav-btn[aria-selected="true"],
#planner-header .nscc-erp-tab-btn.active,
#planner-header .sub-nav-btn.active,
#support-header .nscc-erp-tab-btn.active,
#support-header .sub-nav-btn.active,
#back-office-header .nscc-erp-tab-btn.active,
#back-office-header .sub-nav-btn.active,
#nscc-chrome-folder-tabs .nscc-erp-tab-btn.active,
#nscc-chrome-folder-tabs .sub-nav-btn.active,
#daily-pulse-folder-tabs .nscc-erp-tab-btn.active,
#daily-pulse-folder-tabs .nscc-erp-tab-btn[aria-selected="true"],
#executive-dashboard-view .nscc-erp-tab-btn.active,
#executive-dashboard-view .nscc-erp-tab-btn[aria-selected="true"],
#form-management-view .nscc-erp-tab-btn.active,
#reports-view .nscc-erp-tab-btn.active,
#reports-view .nscc-erp-tab-btn[aria-selected="true"],
#custom-export-view .nscc-erp-tab-btn.active,
.modal .nscc-erp-tab-btn.active,
.modal .nscc-erp-tab-btn[aria-selected="true"],
.modal .nscc-trip-modal-tab--active,
.modal .nscc-employee-tab.is-active,
.modal .support-modal-nav .sub-nav-btn.active,
.nscc-tab-groups .sub-nav-btn[data-view="patrol-view"].active,
#live-ops-header .sub-nav-btn[data-view="patrol-view"].active {
    z-index: 4 !important;
    color: var(--chrome-folder-active-ink, #f7f1e4) !important;
    background: var(--chrome-folder-active) !important;
    background-color: var(--chrome-folder-active) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card)) !important;
    border-radius: 10px 10px 0 0 !important;
    min-height: var(--nscc-folder-tab-h, 2.55rem) !important;
    padding: 0.22rem 0.65rem 0.35rem !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
}
.modal .nscc-erp-tab-btn.active,
.modal .nscc-erp-tab-btn[aria-selected="true"],
.modal .nscc-trip-modal-tab--active,
.modal .nscc-employee-tab.is-active,
.modal .support-modal-nav .sub-nav-btn.active {
    border-bottom-color: var(--bg-page, #f4f4f5) !important;
}

/* NSCC: folder-tab active = Daily Pulse moss (never trip-status green / blue pills) */
.nscc-tab-groups .nscc-erp-tab-btn.active,
.nscc-tab-groups .nscc-erp-tab-btn[aria-selected="true"],
.nscc-tab-groups .sub-nav-btn.active,
#live-ops-header .nscc-erp-tab-btn.active,
#live-ops-header .sub-nav-btn.active,
#daily-pulse-folder-tabs .nscc-erp-tab-btn.active,
#nscc-chrome-folder-tabs .nscc-erp-tab-btn.active,
#planner-header .nscc-erp-tab-btn.active,
#support-header .nscc-erp-tab-btn.active,
#back-office-header .nscc-erp-tab-btn.active {
    background: var(--chrome-folder-active) !important;
    background-color: var(--chrome-folder-active) !important;
    color: var(--chrome-folder-active-ink, #f7f1e4) !important;
}


/* ==========================================================================
   Outlined action buttons (save / submit / cancel / print / exit)
   Transparent fill; theme tokens drive text + border. Wins over older solids.
   ========================================================================== */
html body .btn.btn-primary,
html body .btn.btn-secondary,
html body .btn.btn-ghost,
html body .btn.btn-success,
html body .btn.btn-warning,
html body .btn.btn-danger,
html body .btn.btn-frost,
html body .btn.btn-submit-schedule,
html body .btn.btn-outline-primary,
html body .btn.btn-strong,
html body .view-section .btn-primary,
html body .view-section .nscc-action-btn,
html body .view-section .st-pdf-btn,
html body .view-section .btn[class*="pdf"],
html body button.btn[onclick*="saveToPdf"],
html body button.btn[onclick*="print"],
html body button.btn[onclick*="Print"],
html body button.btn[onclick*="cancel"],
html body button.btn[onclick*="Cancel"],
html body button.btn[onclick*="submit"],
html body button.btn[onclick*="Submit"],
html body button.btn[onclick*="signOut"],
html body button.btn[onclick*="SignOut"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
html body .btn.btn-primary,
html body .btn.btn-secondary,
html body .btn.btn-ghost,
html body .btn.btn-outline-primary,
html body .btn.btn-strong,
html body .view-section .btn-primary,
html body .view-section .nscc-action-btn,
html body .view-section .st-pdf-btn,
html body .view-section .btn[class*="pdf"],
html body button.btn[onclick*="saveToPdf"],
html body button.btn[onclick*="print"],
html body button.btn[onclick*="Print"] {
    color: var(--text-primary) !important;
    border: 2.5px solid var(--border-strong) !important;
}
html body .btn.btn-success {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 4px solid #34C759 !important;
}
html body .btn.btn-warning {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 4px solid #FF9500 !important;
}
html body .btn.btn-danger,
html body button.btn[onclick*="signOut"],
html body button.btn[onclick*="Cancel"],
html body button.btn[onclick*="cancel"] {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 4px solid #FF3B30 !important;
}
html body .btn.btn-frost,
html body .btn.btn-submit-schedule {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 4px solid #007AFF !important;
}
/* Restore focus indicators killed by the box-shadow: none !important above */
html body .btn:focus-visible,
html body .view-section .btn-primary:focus-visible,
html body .view-section .nscc-action-btn:focus-visible,
html body button.btn:focus-visible {
    outline: 2px solid var(--border-focus, #3f3f46) !important;
    outline-offset: 2px !important;
}
:root.dark .btn.btn-success,
body.dark-theme .btn.btn-success {
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
    border-color: #34C759 !important;
}
:root.dark .btn.btn-danger,
body.dark-theme .btn.btn-danger {
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
    border-color: #FF3B30 !important;
}
:root.dark .btn.btn-warning,
body.dark-theme .btn.btn-warning {
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
    border-color: #FF9500 !important;
}
:root.dark .btn.btn-frost,
body.dark-theme .btn.btn-frost,
:root.dark .btn.btn-submit-schedule,
body.dark-theme .btn.btn-submit-schedule {
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
    border-color: #007AFF !important;
}

/* ==========================================================================
   Status chips ? no fill, black text, status-colored border (everywhere)
   Wins over older solid fills and black-border box chrome.
   ========================================================================== */
html body .ref-status-pill,
html body .status-badge,
html body .status-chip,
html body .ops-chip,
html body .trip-status,
html body .job-status,
html body .nscc-dispatch-status-pill,
html body .nscc-fp-badge,
html body .nscc-pulse-action-chip__status,
html body .nscc-pulse-segment-tip__status-pill,
html body .badge-secure,
html body .badge-success,
html body .badge-pending,
html body .badge-pickup,
html body .badge-transit,
html body .badge-assigned,
html body .badge-unassigned,
html body .badge-scheduled,
html body .badge-danger,
html body .badge-en-route,
html body .badge-current,
html body .badge.green,
html body .badge.amber,
html body .badge.transit,
html body .badge.delivered,
html body .status-secure,
html body .status-pending,
html body .status-pickup,
html body .status-transit,
html body .status-assigned,
html body .status-unassigned,
html body .status-scheduled,
html body .status-exception,
html body .status-conflict,
html body .status-en-route,
html body .status-current,
html body .timeline-event-inline,
html body .gantt-trip-block,
html body .timeline-pending-trip,
html body .cm-status-badge,
html body .select-inline--dispatch.nscc-status-select {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-width: var(--nscc-status-border-w, 4px) !important;
    border-style: solid !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html body .ref-status-pill.delivered,
html body .ref-status-pill.secure,
html body .ref-status-pill.success,
html body .ref-status-pill.accepted,
html body .badge-secure,
html body .badge-success,
html body .badge.green,
html body .badge.delivered,
html body .status-secure,
html body .status.green,
html body .timeline-event-inline.delivered,
html body .gantt-trip-block.delivered,
html body [data-status="delivered"].ref-status-pill,
html body .ref-status-pill[data-status="delivered"],
html body .nscc-dispatch-status-pill[data-status="delivered"],
html body .select-inline--dispatch.nscc-status-select[data-status="delivered"] {
    border-color: #34C759 !important;
}

html body .ref-status-pill.pending,
html body .ref-status-pill.pending-pickup,
html body .ref-status-pill.pickup-pending,
html body .badge-pending,
html body .status-pending,
html body .badge.amber,
html body .status.amber,
html body .nscc-pulse-action-chip__status.nscc-pulse-action-chip--warning,
html body .nscc-dispatch-status-pill[data-status="pending"],
html body .nscc-dispatch-status-pill[data-status="pending pickup"],
html body .select-inline--dispatch.nscc-status-select[data-status="pending"],
html body .select-inline--dispatch.nscc-status-select[data-status="pending pickup"] {
    border-color: #FF9500 !important;
}

html body .ref-status-pill.pickup,
html body .badge-pickup,
html body .status-pickup,
html body .nscc-dispatch-status-pill[data-status="pickup"],
html body .select-inline--dispatch.nscc-status-select[data-status="pickup"] {
    border-color: #FFCC00 !important;
}

html body .ref-status-pill.transit,
html body .badge-transit,
html body .status-transit,
html body .badge.transit,
html body .timeline-event-inline.transit,
html body .gantt-trip-block.transit,
html body .ref-status-pill.current,
html body .badge-current,
html body .status-current,
html body .nscc-dispatch-status-pill[data-status="transit"],
html body .nscc-dispatch-status-pill[data-status="in transit"],
html body .select-inline--dispatch.nscc-status-select[data-status="transit"],
html body .select-inline--dispatch.nscc-status-select[data-status="in transit"] {
    border-color: #007AFF !important;
}

html body .ref-status-pill.en-route,
html body .ref-status-pill.enroute,
html body .badge-en-route,
html body .status-en-route,
html body .nscc-dispatch-status-pill[data-status="en-route"],
html body .select-inline--dispatch.nscc-status-select[data-status="en-route"] {
    border-color: #5856D6 !important;
}

html body .ref-status-pill.assigned,
html body .badge-assigned,
html body .status-assigned,
html body .nscc-dispatch-status-pill[data-status="assigned"] {
    border-color: #AF52DE !important;
}

html body .ref-status-pill.unassigned,
html body .badge-unassigned,
html body .status-unassigned,
html body .ref-status-pill.exception,
html body .ref-status-pill.conflict,
html body .badge-danger,
html body .status-exception,
html body .status-conflict,
html body .nscc-pulse-action-chip__status.nscc-pulse-action-chip--critical,
html body .nscc-pulse-action-chip__status.nscc-pulse-action-chip--unassigned,
html body .nscc-pulse-action-chip__status.nscc-pulse-action-chip--jeopardy,
html body .nscc-dispatch-status-pill[data-status="unassigned"],
html body .select-inline--dispatch.nscc-status-select[data-status="unassigned"] {
    border-color: #FF3B30 !important;
}

html body .ref-status-pill.scheduled,
html body .badge-scheduled,
html body .status-scheduled {
    border-color: #06b6d4 !important;
}

/* Today's Trips kanban: no status color on cards or columns ? color lives on pills only */
html body #card-view .job-card,
html body #card-view .job-card.ref-card,
html body #card-view .job-card[data-trip-status],
html body #card-view .kanban-column,
html body #card-view .card-status-column--unassigned,
html body #card-view .card-status-column--pending,
html body #card-view .card-status-column--en-route,
html body #card-view .card-status-column--pickup,
html body #card-view .card-status-column--transit,
html body #card-view .card-status-column--delivered,
html body #card-view .card-unassigned-column {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border-color: var(--nscc-line, #000000) !important;
    box-shadow: none !important;
}
html body #card-view .kanban-column {
    background: var(--bg-sunken, var(--bg-card)) !important;
    background-color: var(--bg-sunken, var(--bg-card)) !important;
}

/* Force thick width on any status-colored outline (inline or class) */
html body .nscc-dispatch-status-pill,
html body .nscc-pulse-segment-tip__status-pill,
html body .nscc-pulse-action-chip__status,
html body .select-inline--dispatch.nscc-status-select,
html body [style*="--nscc-status-border"] {
    border-width: var(--nscc-status-border-w, 4px) !important;
}
/* Ticker chips stay thinner so they fit the bar height */
html body .dispatch-ticker .ticker-seg,
html body .ticker-seg {
    border-width: var(--ticker-chip-border-w, 4px) !important;
}

/* Dark mode: keep outline style; use light ink on dark surfaces */
:root.dark body .ref-status-pill,
:root.dark body .status-badge,
:root.dark body .status-chip,
:root.dark body .ops-chip,
:root.dark body .trip-status,
:root.dark body .job-status,
:root.dark body .nscc-dispatch-status-pill,
:root.dark body .nscc-fp-badge,
:root.dark body .nscc-pulse-action-chip__status,
:root.dark body .nscc-pulse-segment-tip__status-pill,
:root.dark body .cm-status-badge,
:root.dark body .select-inline--dispatch.nscc-status-select,
body.dark-theme .ref-status-pill,
body.dark-theme .status-badge,
body.dark-theme .status-chip,
body.dark-theme .ops-chip,
body.dark-theme .trip-status,
body.dark-theme .job-status,
body.dark-theme .nscc-dispatch-status-pill,
body.dark-theme .nscc-fp-badge,
body.dark-theme .nscc-pulse-action-chip__status,
body.dark-theme .nscc-pulse-segment-tip__status-pill,
body.dark-theme .cm-status-badge,
body.dark-theme .select-inline--dispatch.nscc-status-select {
    background: transparent !important;
    background-color: transparent !important;
    color: #fafaf9 !important;
    -webkit-text-fill-color: #fafaf9 !important;
}

/* Trips/Courier Gantt boxes: always clear fill + black ink + colored border */
html body .timeline-pending-trip {
    border-color: var(--nscc-line, #000000) !important;
    border-width: 2px !important;
}
html body .timeline-event-inline,
html body .gantt-trip-block,
html body .timeline-pending-trip,
:root.dark body .timeline-event-inline,
:root.dark body .gantt-trip-block,
:root.dark body .timeline-pending-trip,
body.dark-theme .timeline-event-inline,
body.dark-theme .gantt-trip-block,
body.dark-theme .timeline-pending-trip {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
html body .timeline-event-inline.pending,
html body .timeline-event-inline.pending-pickup,
html body .gantt-trip-block.pending,
html body .nscc-dispatch-status-pill[data-status="pending"] {
    border-color: #FF9500 !important;
}
html body .timeline-event-inline.en-route,
html body .timeline-event-inline.enroute,
html body .gantt-trip-block.en-route {
    border-color: #5856D6 !important;
}
html body .timeline-event-inline.pickup,
html body .gantt-trip-block.pickup {
    border-color: #FFCC00 !important;
}
html body .timeline-event-inline.unassigned,
html body .gantt-trip-block.unassigned {
    border-color: #FF3B30 !important;
}
html body .timeline-event-inline.assigned,
html body .gantt-trip-block.assigned {
    border-color: #AF52DE !important;
}

/* ========== Theme surfaces: sidebar + modals (page gray, not white) ========== */
html body .sidebar,
html body .sidebar-footer,
html body #nscc-app-sidebar,
html body .nscc-app-sidebar,
html body .modal-content,
html body .modal .modal-content,
html body .drawer,
html body .popover,
html body .menu-panel,
html body .dropdown-menu,
html body .nscc-options-menu,
html body .nscc-combobox-menu,
html body .loc-combo-menu,
html body .welcome-modal .modal-content,
html body #nscc-welcome-modal .modal-content,
html body #system-settings-modal .modal-content,
html body #admin-settings-modal .modal-content,
html body #support-modal .modal-content {
    background: var(--bg-page, #f4f4f5) !important;
    background-color: var(--bg-page, #f4f4f5) !important;
    color: var(--text-primary);
}
html body .sidebar .nav-btn:not(.active),
html body .sidebar .nav-item:not(.active) {
    color: var(--text-primary);
}
html body .sidebar .nav-btn:hover:not(.active),
html body .sidebar .nav-item:hover:not(.active) {
    background: var(--bg-sunken);
    color: var(--text-primary);
}
html body .modal-header h2,
html body .modal-content h2,
html body .modal-content label {
    color: var(--text-primary);
}

/* ========== Ticker chips: shared medium gray fill, dark ink, fit bar height ========== */
html body .dispatch-ticker .ticker-seg,
html body .dispatch-ticker .ticker-seg.ticker-seg--trip,
html body .dispatch-ticker .ticker-seg.ticker-seg--announce,
html body .dispatch-ticker .ticker-seg.ticker-seg--empty,
html body .dispatch-ticker .ticker-seg.ticker-seg--action,
html body .ticker-seg {
    background: var(--ticker-seg-fill, #9ca3af) !important;
    background-color: var(--ticker-seg-fill, #9ca3af) !important;
    color: var(--ticker-bar-ink, #1c1917) !important;
    -webkit-text-fill-color: var(--ticker-bar-ink, #1c1917) !important;
    height: var(--ticker-chip-height, calc(var(--ticker-bar-height, 2.4rem) - 10px)) !important;
    min-height: 0 !important;
    max-height: var(--ticker-chip-height, calc(var(--ticker-bar-height, 2.4rem) - 10px)) !important;
    border-width: var(--ticker-chip-border-w, 4px) !important;
    overflow: hidden !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    filter: none !important;
}
html body .dispatch-ticker marquee {
    line-height: var(--ticker-bar-height, 2.4rem) !important;
    overflow: hidden !important;
}
:root.dark .dispatch-ticker .ticker-seg,
body.dark-theme .dispatch-ticker .ticker-seg,
:root.dark .ticker-seg,
body.dark-theme .ticker-seg {
    background: var(--ticker-seg-fill-dark, #374151) !important;
    background-color: var(--ticker-seg-fill-dark, #374151) !important;
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
}
html body #global-mode-badge {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-width: 3px !important;
    border-style: solid !important;
    background: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !important;
}
:root.dark #global-mode-badge,
body.dark-theme #global-mode-badge {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

/* Thicker borders on action buttons */
html body .btn,
html body button.btn,
html body .view-section .btn,
html body .view-section .nscc-action-btn,
html body .view-section .st-pdf-btn,
html body .btn.btn-primary,
html body .btn.btn-secondary,
html body .btn.btn-ghost,
html body .btn.btn-success,
html body .btn.btn-warning,
html body .btn.btn-danger,
html body .btn.btn-frost,
html body .btn.btn-submit-schedule,
html body .btn.btn-outline-primary,
html body .btn.btn-strong {
    border-width: 2.5px !important;
    border-style: solid !important;
}

/* ========== Dark mode: outline over thick light fills ==========
   Prefer white/soft outlines on transparent (or page-matched) surfaces
   instead of bright filled slabs. */
:root.dark,
body.dark-theme {
    --nscc-outline: rgba(245, 245, 244, 0.68);
}
:root.dark .card,
:root.dark .panel,
:root.dark .drawer,
:root.dark .popover,
:root.dark .dropdown-menu,
:root.dark .batch-card,
:root.dark .trip-card,
:root.dark .job-card:not([data-trip-status]),
:root.dark .gantt-alert-card,
:root.dark .timeline-pending-trip,
:root.dark .nscc-kpi-card,
:root.dark .finance-card,
:root.dark .overview-card,
:root.dark .master-data-shell,
:root.dark .nscc-erp-panel,
:root.dark .nscc-table-scroll,
:root.dark .master-data-header-box,
:root.dark .nscc-ledger-head,
:root.dark .master-data-shell--bo-connect .erp-connect-header,
:root.dark .tab-dropdown-menu,
:root.dark .nav-dropdown-content,
:root.dark .md-save-dropdown-menu,
:root.dark .erp-export-dropdown-menu,
body.dark-theme .card,
body.dark-theme .panel,
body.dark-theme .drawer,
body.dark-theme .popover,
body.dark-theme .dropdown-menu,
body.dark-theme .batch-card,
body.dark-theme .trip-card,
body.dark-theme .job-card:not([data-trip-status]),
body.dark-theme .gantt-alert-card,
body.dark-theme .timeline-pending-trip,
body.dark-theme .nscc-kpi-card,
body.dark-theme .finance-card,
body.dark-theme .overview-card,
body.dark-theme .master-data-shell,
body.dark-theme .nscc-erp-panel,
body.dark-theme .nscc-table-scroll,
body.dark-theme .master-data-header-box,
body.dark-theme .nscc-ledger-head,
body.dark-theme .master-data-shell--bo-connect .erp-connect-header,
body.dark-theme .tab-dropdown-menu,
body.dark-theme .nav-dropdown-content,
body.dark-theme .md-save-dropdown-menu,
body.dark-theme .erp-export-dropdown-menu {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--nscc-outline) !important;
    box-shadow: none !important;
}
/* Dark modals: opaque panels (override outline-transparent surfaces) */
:root.dark .modal,
body.dark-theme .modal {
    background: rgba(0, 0, 0, 0.55) !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
}
:root.dark .modal-content,
:root.dark .modal .modal-content,
:root.dark .trip-modal-content,
:root.dark .welcome-modal .modal-content,
:root.dark #nscc-welcome-modal .modal-content,
:root.dark #system-settings-modal .modal-content,
:root.dark #admin-settings-modal .modal-content,
:root.dark #support-modal .modal-content,
:root.dark #trip-details-modal .modal-content,
:root.dark #employee-card-modal .modal-content,
:root.dark #new-dispatch-modal .modal-content,
:root.dark .modal-header,
:root.dark .erp-staging-modal-header,
body.dark-theme .modal-content,
body.dark-theme .modal .modal-content,
body.dark-theme .trip-modal-content,
body.dark-theme .welcome-modal .modal-content,
body.dark-theme #nscc-welcome-modal .modal-content,
body.dark-theme #system-settings-modal .modal-content,
body.dark-theme #admin-settings-modal .modal-content,
body.dark-theme #support-modal .modal-content,
body.dark-theme #trip-details-modal .modal-content,
body.dark-theme #employee-card-modal .modal-content,
body.dark-theme #new-dispatch-modal .modal-content,
body.dark-theme .modal-header,
body.dark-theme .erp-staging-modal-header {
    background: var(--bg-card, #1c1c1b) !important;
    background-color: var(--bg-card, #1c1c1b) !important;
    border-color: var(--nscc-outline, rgba(245, 245, 244, 0.68)) !important;
    box-shadow: none !important;
}
:root.dark .top-header,
:root.dark .master-data-shell,
:root.dark .nscc-erp-panel,
:root.dark .nscc-table-scroll,
:root.dark .modal-content,
body.dark-theme .top-header,
body.dark-theme .master-data-shell,
body.dark-theme .nscc-erp-panel,
body.dark-theme .nscc-table-scroll,
body.dark-theme .modal-content {
    border-color: var(--nscc-outline);
}
:root.dark select,
:root.dark .nscc-select,
:root.dark .form-select,
:root.dark .nscc-form-select,
:root.dark .nscc-support-select,
:root.dark .select-control,
:root.dark .filter-select,
:root.dark select.form-control-panel,
:root.dark .select-inline,
:root.dark .nscc-location-combobox,
:root.dark .nscc-location-combobox__panel,
:root.dark .nscc-location-combobox__search,
body.dark-theme select,
body.dark-theme .nscc-select,
body.dark-theme .form-select,
body.dark-theme .nscc-form-select,
body.dark-theme .nscc-support-select,
body.dark-theme .select-control,
body.dark-theme .filter-select,
body.dark-theme select.form-control-panel,
body.dark-theme .select-inline,
body.dark-theme .nscc-location-combobox,
body.dark-theme .nscc-location-combobox__panel,
body.dark-theme .nscc-location-combobox__search {
    background-color: var(--bg-card) !important;
    background: var(--bg-card) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #ffffff) !important;
    border-color: var(--nscc-line, #ffffff) !important;
}
:root.dark .dispatch-ticker,
body.dark-theme .dispatch-ticker {
    background: var(--ticker-bar-gray, #4b5563) !important;
    color: var(--ticker-bar-ink, #f4f4f5) !important;
}
:root.dark .dispatch-ticker .ticker-label,
body.dark-theme .dispatch-ticker .ticker-label {
    color: var(--ticker-bar-ink, #f4f4f5) !important;
    -webkit-text-fill-color: var(--ticker-bar-ink, #f4f4f5) !important;
    background: var(--chrome-logo-box-bg, #4b5563) !important;
    background-color: var(--chrome-logo-box-bg, #4b5563) !important;
    border-right-color: var(--nscc-line, #ffffff) !important;
}
:root.dark .nscc-brand-logo,
:root.dark .brand-star img,
:root.dark .sidebar-brand-star img,
:root.dark .topbar-brand img,
:root.dark .nscc-bo-fs-brand img,
body.dark-theme .nscc-brand-logo,
body.dark-theme .brand-star img,
body.dark-theme .sidebar-brand-star img,
body.dark-theme .topbar-brand img,
body.dark-theme .nscc-bo-fs-brand img {
    background: #d4d4d8 !important;
    filter: invert(1) brightness(0.72) !important;
    border: 2px solid #9ca3af !important;
    border-radius: 8px;
}
:root.dark .nscc-auth-logo,
body.dark-theme .nscc-auth-logo {
    background: #ffffff !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: 8px;
    filter: none !important;
}
:root.dark .nscc-chrome-brand-mark img,
body.dark-theme .nscc-chrome-brand-mark img {
    /* Keep white logo tile in dark; chip behind name stays zone gray */
    background: #ffffff !important;
    filter: none !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
}
:root.dark .nscc-chrome-brand-row .nscc-header-clock-zone,
body.dark-theme .nscc-chrome-brand-row .nscc-header-clock-zone {
    background: var(--banner-chip-bg, #4b5563) !important;
    border: 2px solid #9ca3af !important;
}

/* Brand + user chips: same dark fill as timezone zones */
:root.dark .nscc-chrome-brand-row button.nscc-chrome-brand-mark,
body.dark-theme .nscc-chrome-brand-row button.nscc-chrome-brand-mark,
:root.dark .nscc-chrome-brand-row .user-profile,
body.dark-theme .nscc-chrome-brand-row .user-profile {
    background: var(--banner-chip-bg, #4b5563) !important;
    border-color: #9ca3af !important;
}

/* ========== Hidden scrollbars + edge scroll arrows ========== */
html.nscc-hide-scrollbars,
html.nscc-hide-scrollbars * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
html.nscc-hide-scrollbars *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}
.nscc-scroll-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}
.nscc-scroll-shell > .nscc-scroll-host {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
}
.nscc-scroll-host.nscc-scroll-dragging {
    cursor: grabbing;
    user-select: none;
}
.nscc-scroll-edges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 40;
}
.nscc-scroll-edge {
    pointer-events: auto;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--nscc-line-w, 2.5px) solid var(--nscc-line, #000000);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    z-index: 41;
}
:root.dark .nscc-scroll-edge,
body.dark-theme .nscc-scroll-edge {
    background: rgba(28, 28, 27, 0.92);
    color: #f5f5f4;
    border-color: rgba(245, 245, 244, 0.75);
}
.nscc-scroll-edge:hover {
    filter: brightness(0.96);
}
.nscc-scroll-edge--up,
.nscc-scroll-edge--down {
    left: 50%;
    transform: translateX(-50%);
    min-width: 2.4rem;
    height: 1.55rem;
    padding: 0 0.65rem;
}
.nscc-scroll-edge--up { top: 0.35rem; border-radius: 0 0 8px 8px; }
.nscc-scroll-edge--down { bottom: 0.35rem; border-radius: 8px 8px 0 0; }
.nscc-scroll-edge--left,
.nscc-scroll-edge--right {
    top: 50%;
    transform: translateY(-50%);
    width: 1.55rem;
    min-height: 2.4rem;
    padding: 0.35rem 0;
}
.nscc-scroll-edge--left { left: 0.35rem; border-radius: 0 8px 8px 0; }
.nscc-scroll-edge--right { right: 0.35rem; border-radius: 8px 0 0 8px; }
.nscc-scroll-edge[hidden] {
    display: none !important;
}

/* ========== Hover descriptions (folder tabs + menus) ========== */
.nscc-hover-desc {
    position: fixed;
    /* Above the left-nav sidebar (z-index 10060) so hover windows near
       the left edge of the screen show on top of the menu, not under it. */
    z-index: 10075;
    max-width: min(26rem, calc(100vw - 1.5rem));
    padding: 0.55rem 0.75rem 0.6rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 8px;
    background: var(--bg-card, #ffffff);
    color: #111827;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.nscc-hover-desc.nscc-hover-desc--has-doc {
    pointer-events: auto;
}
.nscc-hover-desc__text {
    display: block;
}
.nscc-hover-desc__p {
    margin: 0 0 0.35rem;
}
.nscc-hover-desc__p:last-child {
    margin-bottom: 0;
}
.nscc-hover-desc__p strong {
    font-weight: 800;
    color: #0f172a;
}
.nscc-hover-desc__list {
    margin: 0.15rem 0 0.35rem;
    padding-left: 1.1rem;
}
.nscc-hover-desc__list li {
    margin: 0.12rem 0;
}
.nscc-hover-desc__list li:last-child {
    margin-bottom: 0;
}
.nscc-hover-desc__doc {
    display: inline-block;
    margin-top: 0.4rem;
    font-weight: 800;
    color: var(--text-link, #27272a);
    text-decoration: underline;
    cursor: pointer;
}
.nscc-hover-desc__shortcuts { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid currentColor; font-size: 0.67rem; font-weight: 700; }
.nscc-hover-desc__shortcuts span,
.nscc-hover-desc__shortcut { display: inline-flex; align-items: center; gap: 0.25rem; }
.nscc-hover-desc__shortcuts kbd { min-width: 1.25rem; padding: 0.08rem 0.25rem; border: 1px solid currentColor; background: transparent; color: inherit; font: 800 0.65rem/1.2 var(--font-mono, monospace); text-align: center; }
/* Clickable shortcut chips (Matt 2026-09-12): the D / V / F letter boxes
   are real <button>s that run the same jump the keyboard shortcut would,
   so pointer users get the shortcut too. Styled to read the same as the
   plain span variant, with hover/focus feedback added. */
.nscc-hover-desc__shortcut { padding: 0; background: transparent; border: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; border-radius: 4px; }
.nscc-hover-desc__shortcut:hover,
.nscc-hover-desc__shortcut:focus-visible { outline: none; text-decoration: underline; }
.nscc-hover-desc__shortcut:hover kbd,
.nscc-hover-desc__shortcut:focus-visible kbd { background: rgba(127, 127, 127, 0.18); }
.nscc-shortcuts-list { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.nscc-shortcuts-list li { display: flex; align-items: center; gap: 0.85rem; }
.nscc-shortcuts-keys { display: inline-flex; align-items: center; gap: 0.2rem; min-width: 8.5rem; flex: 0 0 auto; }
.nscc-shortcuts-list kbd { min-width: 1.6rem; padding: 0.15rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-surface, var(--bg-card)); box-shadow: 0 1px 0 var(--border); color: var(--text-primary); font: 800 0.72rem/1.2 var(--font-mono, monospace); text-align: center; }
/* A shortcut whose area the person's roles do not open (nscc-shortcuts.js). */
.nscc-shortcuts-list li.nscc-shortcuts-off { opacity: 0.45; cursor: not-allowed; }
.nscc-shortcuts-off-note { color: var(--text-secondary, var(--text-primary)); font-size: 0.85em; }
:root.dark .nscc-hover-desc__doc,
body.dark-theme .nscc-hover-desc__doc {
    color: var(--text-link, #e4e4e7);
}
:root.dark .nscc-hover-desc__p strong,
body.dark-theme .nscc-hover-desc__p strong {
    color: #fafaf9;
}
.nscc-hover-desc.nscc-hover-desc--left {
    max-width: min(30rem, calc(100vw - 12rem));
    font-weight: 600;
}
.nscc-hover-desc.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hover descriptions use the nscc-hover-desc panel — no Windows help (?) cursor */
:root.dark .nscc-hover-desc,
body.dark-theme .nscc-hover-desc {
    background: var(--bg-sunken, #1c1917);
    color: var(--text-primary, #fafaf9);
    border-color: rgba(245, 245, 244, 0.75);
}

/* ============================================================
   Global tight density ? shrink shell padding without overflow
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.main-content,
.views-container,
.view-section.active,
.modal-content,
.nscc-table-scroll,
.master-data-table-shell,
.ledger-scroll-wrap,
.gantt-container,
.patrol-map-section,
.patrol-dispatch-board {
    min-width: 0;
    min-height: 0;
}

.info-strip {
    padding: var(--nscc-pad-md, 0.5rem) !important;
    margin-bottom: var(--nscc-gap-lg, 0.65rem) !important;
    gap: var(--nscc-gap, 0.4rem) !important;
}

.timeline-cell {
    padding: var(--nscc-pad-md, 0.5rem) !important;
}

.timeline-header-cell {
    padding: var(--nscc-pad-sm, 0.35rem) !important;
}

.timeline-pending-trip {
    padding: var(--nscc-pad-md, 0.5rem) !important;
    margin-bottom: var(--nscc-gap, 0.4rem) !important;
}

.master-data-header-box,
.nscc-ledger-head,
.master-data-shell--bo-connect .erp-connect-header,
.panel-header,
.section-header {
    padding-top: var(--nscc-pad-sm, 0.35rem) !important;
    padding-bottom: var(--nscc-pad-sm, 0.35rem) !important;
    padding-left: var(--nscc-pad-md, 0.5rem) !important;
    padding-right: var(--nscc-pad-md, 0.5rem) !important;
}

.btn:not(.btn-icon):not(.btn-xs):not(.btn-sm) {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.btn-sm {
    padding: 0.28rem 0.7rem;
}

.btn-xs {
    padding: 0.2rem 0.55rem;
}

/* Keep interactive controls usable; avoid clipping text */
button,
.btn,
select,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
    min-height: 0;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="date"]):not([type="hidden"]) {
    height: auto;
    min-height: 1.9rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.nscc-dash-recent-table tbody td,
.nscc-ar-lines-table tbody td {
    padding-top: 0.22rem !important;
    padding-bottom: 0.22rem !important;
}

.view-section .panel,
.view-section .card,
.view-section .nscc-panel,
.nscc-today-card,
.master-data-shell > .panel,
.modal .panel {
    padding: var(--nscc-pad-md, 0.5rem);
}

/* Flex/grid children must shrink so tight shells don't overflow */
.views-container > *,
.view-section.active > *,
.nscc-chrome-brand-row > *,
.nscc-chrome-nav-row > *,
.header-right > *,
.patrol-container > * {
    min-width: 0;
}

/* ========== Status chips everywhere: clear fill, black text, colored border ========== */
html body .nscc-chip,
html body .nscc-chip--ok,
html body .nscc-chip--warn,
html body .nscc-chip--bad,
html body .comms-msg-badge,
html body .ref-gantt-bar,
html body .erp-rpt-badge,
html body .erp-rpt-badge--ok,
html body .erp-rpt-badge--fail,
html body .erp-rpt-badge--warn,
html body .nscc-at-risk-badge,
html body .badge-warn,
html body .badge-breach {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-width: 4px !important;
    border-style: solid !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
html body .nscc-chip--ok,
html body .erp-rpt-badge--ok { border-color: #34C759 !important; }
html body .nscc-chip--warn,
html body .badge-warn,
html body .erp-rpt-badge--warn { border-color: #FF9500 !important; }
html body .nscc-chip--bad,
html body .badge-breach,
html body .erp-rpt-badge--fail,
html body .comms-msg-badge--rejected { border-color: #FF3B30 !important; }
html body .comms-msg-badge--pending { border-color: #FF9500 !important; }
html body .comms-msg-badge--approved { border-color: #34C759 !important; }
html body .ref-gantt-bar.pending { border-color: #FF9500 !important; }
html body .ref-gantt-bar.transit { border-color: #007AFF !important; }
html body .ref-gantt-bar.delivered { border-color: #34C759 !important; }

/* ========== Customer / Personnel portals: readable ink in light + dark (not IPS public theme) ========== */
html:not(.nscc-ips-portal-theme) body #customer-portal-view,
html:not(.nscc-ips-portal-theme) body #employee-portal-view,
html:not(.nscc-ips-portal-theme) body .nscc-customer-portal,
html:not(.nscc-ips-portal-theme) body .nscc-employee-portal-root,
html:not(.nscc-ips-portal-theme) body .nscc-portal-shell {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
html:not(.nscc-ips-portal-theme) body .nscc-portal-shell h1,
html:not(.nscc-ips-portal-theme) body .nscc-portal-shell h2,
html:not(.nscc-ips-portal-theme) body .nscc-emp-combined h2,
html:not(.nscc-ips-portal-theme) body .nscc-emp-combined h3,
html:not(.nscc-ips-portal-theme) body .nscc-portal-table,
html:not(.nscc-ips-portal-theme) body .nscc-portal-table td,
html:not(.nscc-ips-portal-theme) body .nscc-finance-card__value,
html:not(.nscc-ips-portal-theme) body .nscc-portal-pick,
html:not(.nscc-ips-portal-theme) body .nscc-portal-pick strong,
html:not(.nscc-ips-portal-theme) body button.nscc-portal-pick {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
html:not(.nscc-ips-portal-theme) body .nscc-portal-lead,
html:not(.nscc-ips-portal-theme) body .nscc-portal-pick-count,
html:not(.nscc-ips-portal-theme) body .nscc-portal-search__label,
html:not(.nscc-ips-portal-theme) body .nscc-finance-card__label,
html:not(.nscc-ips-portal-theme) body .nscc-employee-portal-who,
html:not(.nscc-ips-portal-theme) body .nscc-portal-table th {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
}
html:not(.nscc-ips-portal-theme) body .nscc-portal-pick span {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}
html:not(.nscc-ips-portal-theme) body .nscc-portal-back a,
html:not(.nscc-ips-portal-theme) body .nscc-portal-link,
html:not(.nscc-ips-portal-theme) body .nscc-linkish,
html:not(.nscc-ips-portal-theme) body .nscc-portal-shell a.nscc-portal-link {
    color: var(--brand, #0d9488) !important;
    -webkit-text-fill-color: var(--brand, #0d9488) !important;
}
/* Portal cards, pills, and table shell when the portal is viewed INSIDE the
   main app (any theme except the standalone .nscc-ips-portal-theme) —
   transparent so they blend with the active theme's background instead of
   painting a bright white rectangle. Matt 2026-09-12:
   "the customer and personnel portals should not have white backgrounds. make
   their backgrounds match the theme (except when the personnel or customer
   access the portals remotely. you can leave the colors the same there.)"
   Form inputs still get a solid card background so the entered text is
   legible on top of the fill; only card-shaped surfaces go transparent. */
html:not(.nscc-ips-portal-theme) body .nscc-portal-pick,
html:not(.nscc-ips-portal-theme) body button.nscc-portal-pick {
    background: transparent !important;
    border-color: var(--nscc-line, #000000) !important;
}
html:not(.nscc-ips-portal-theme) body .nscc-portal-table-wrap,
html:not(.nscc-ips-portal-theme) body .nscc-customer-portal .nscc-portal-shell,
html:not(.nscc-ips-portal-theme) body .nscc-employee-portal-root .nscc-portal-shell {
    background: transparent !important;
}
html:not(.nscc-ips-portal-theme) body .nscc-portal-search__input,
html:not(.nscc-ips-portal-theme) body .nscc-employee-form input,
html:not(.nscc-ips-portal-theme) body .nscc-employee-form select,
html:not(.nscc-ips-portal-theme) body .nscc-ap-form-grid input,
html:not(.nscc-ips-portal-theme) body .nscc-ap-form-grid select {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background: var(--bg-card) !important;
}
html:not(.nscc-ips-portal-theme) body .nscc-employee-tab {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    background: transparent !important;
}
html:not(.nscc-ips-portal-theme) body .nscc-employee-tab.is-active,
html:not(.nscc-ips-portal-theme) body .nscc-employee-tab:hover,
html:not(.nscc-ips-portal-theme) body .nscc-employee-tab:focus-visible {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: var(--nscc-line, #000000) !important;
}
:root.dark html:not(.nscc-ips-portal-theme) body #customer-portal-view,
:root.dark html:not(.nscc-ips-portal-theme) body #employee-portal-view,
:root.dark html:not(.nscc-ips-portal-theme) body .nscc-customer-portal,
:root.dark html:not(.nscc-ips-portal-theme) body .nscc-employee-portal-root,
:root.dark html:not(.nscc-ips-portal-theme) body .nscc-portal-shell,
body.dark-theme html:not(.nscc-ips-portal-theme) #customer-portal-view,
body.dark-theme html:not(.nscc-ips-portal-theme) #employee-portal-view,
body.dark-theme html:not(.nscc-ips-portal-theme) .nscc-customer-portal,
body.dark-theme html:not(.nscc-ips-portal-theme) .nscc-employee-portal-root,
body.dark-theme html:not(.nscc-ips-portal-theme) .nscc-portal-shell {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
/* Dark: keep the border strong but let the card blend with the theme —
   no bright-white flash on dark portal cards. */
:root.dark html:not(.nscc-ips-portal-theme) body .nscc-portal-pick,
:root.dark html:not(.nscc-ips-portal-theme) body button.nscc-portal-pick,
body.dark-theme html:not(.nscc-ips-portal-theme) .nscc-portal-pick,
body.dark-theme html:not(.nscc-ips-portal-theme) button.nscc-portal-pick {
    border-color: var(--nscc-line, #ffffff) !important;
    background: transparent !important;
}
:root.dark html.nscc-ips-portal-theme body .nscc-portal-pick,
:root.dark html.nscc-ips-portal-theme body button.nscc-portal-pick,
body.dark-theme html.nscc-ips-portal-theme .nscc-portal-pick,
body.dark-theme html.nscc-ips-portal-theme button.nscc-portal-pick {
    border-color: var(--nscc-line, #ffffff) !important;
    background: var(--bg-card) !important;
}
:root.dark body .nscc-employee-tab.is-active,
:root.dark body .nscc-employee-tab:hover,
:root.dark body .nscc-employee-tab:focus-visible,
body.dark-theme .nscc-employee-tab.is-active,
body.dark-theme .nscc-employee-tab:hover,
body.dark-theme .nscc-employee-tab:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--nscc-line, #ffffff) !important;
}
:root.dark body .nscc-portal-search__input,
body.dark-theme .nscc-portal-search__input {
    border-color: var(--nscc-line, #ffffff) !important;
}
/* Printed invoice/statement docs stay dark ink on white paper in both themes */
html body .nscc-portal-shell .ips-inv,
html body .nscc-portal-shell .ips-inv * {
    color: inherit;
}
html body .nscc-portal-shell .ips-inv {
    color: #14213d !important;
    -webkit-text-fill-color: #14213d !important;
    background: #ffffff !important;
}
html body .nscc-portal-shell .ips-inv-company-name,
html body .nscc-portal-shell .ips-doc-title {
    color: #18181b !important;
    -webkit-text-fill-color: #18181b !important;
}
html body .nscc-portal-shell .ips-inv th {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ========== Page menus + modal headers: one shared chrome everywhere ========== */
html body .master-data-header-box,
html body .nscc-ledger-head,
html body .erp-connect-header.master-data-header-box,
html body .nscc-chrome-synthetic-title,
html body #nscc-chrome-folder-tabs > .master-data-header-box,
html body #nscc-chrome-folder-tabs > .nscc-ledger-head,
html body #nscc-chrome-folder-tabs > .erp-connect-header,
html body #nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title {
    background: var(--bg-card, #ffffff) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 0.55rem 0.85rem !important;
    box-sizing: border-box !important;
}
html body .master-data-header-box .erp-connect-title,
html body .master-data-header-box h2,
html body .nscc-ledger-head .erp-connect-title,
html body .nscc-ledger-head h2,
html body .erp-connect-title,
html body .nscc-chrome-synthetic-title .erp-connect-title,
html body .nscc-chrome-synthetic-title h2,
html body #nscc-chrome-folder-tabs .erp-connect-title,
html body #nscc-chrome-folder-tabs h2 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    text-transform: none !important;
    margin: 0 !important;
}
html body .modal-header,
html body .erp-staging-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    margin-bottom: 0.85rem !important;
    padding: 0.55rem 0.85rem !important;
    background: var(--bg-card, #ffffff) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}
html body .modal-header h2,
html body .modal-title-compact,
html body .modal-title-strong,
html body .erp-staging-modal-header h2 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    text-transform: none !important;
    margin: 0 !important;
}
html body .nscc-erp-tabs .nscc-erp-tab-btn,
html body .nscc-tab-groups .nscc-erp-tab-btn,
html body #nscc-chrome-folder-tabs .nscc-erp-tab-btn,
html body .sub-nav-panel .sub-nav-btn,
html body #live-ops-header .nscc-erp-tab-btn,
html body #planner-header .nscc-erp-tab-btn,
html body #support-header .sub-nav-btn,
html body #back-office-header .sub-nav-btn {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    min-height: var(--nscc-folder-tab-h, 2.55rem) !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: var(--chrome-folder, var(--bg-card)) !important;
    color: var(--chrome-folder-ink, #000000) !important;
    -webkit-text-fill-color: var(--chrome-folder-ink, #000000) !important;
    box-shadow: none !important;
}
html body .nscc-erp-tabs .nscc-erp-tab-btn.active,
html body .nscc-erp-tabs .nscc-erp-tab-btn[aria-selected="true"],
html body .nscc-tab-groups .nscc-erp-tab-btn.active,
html body .nscc-tab-groups .nscc-erp-tab-btn[aria-selected="true"],
html body #nscc-chrome-folder-tabs .nscc-erp-tab-btn.active,
html body #nscc-chrome-folder-tabs .nscc-erp-tab-btn[aria-selected="true"],
html body .sub-nav-panel .sub-nav-btn.active,
html body #support-header .sub-nav-btn.active,
html body #back-office-header .sub-nav-btn.active {
    background: var(--chrome-folder-active, #292524) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--nscc-line, #000000) !important;
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card)) !important;
}
html body .nscc-tab-group__label {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--chrome-folder-label, #3f3f46) !important;
    -webkit-text-fill-color: var(--chrome-folder-label, #3f3f46) !important;
}
html body .sub-nav-panel,
html body #live-ops-header.is-visible,
html body #planner-header.is-visible,
html body #support-header.is-visible,
html body #nscc-chrome-folder-tabs.is-visible {
    background: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5)) !important;
    background-color: var(--chrome-folder-panel-bg, var(--bg-page, #f4f4f5)) !important;
}
:root.dark body .master-data-header-box,
:root.dark body .nscc-ledger-head,
:root.dark body .nscc-chrome-synthetic-title,
:root.dark body #nscc-chrome-folder-tabs > .master-data-header-box,
:root.dark body #nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title,
:root.dark body .modal-header,
:root.dark body .erp-staging-modal-header,
body.dark-theme .master-data-header-box,
body.dark-theme .nscc-ledger-head,
body.dark-theme .nscc-chrome-synthetic-title,
body.dark-theme #nscc-chrome-folder-tabs > .master-data-header-box,
body.dark-theme #nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title,
body.dark-theme .modal-header,
body.dark-theme .erp-staging-modal-header {
    background: var(--bg-card) !important;
    border-color: var(--nscc-line, #ffffff) !important;
}
:root.dark body .master-data-header-box .erp-connect-title,
:root.dark body .master-data-header-box h2,
:root.dark body .nscc-ledger-head h2,
:root.dark body .nscc-chrome-synthetic-title .erp-connect-title,
:root.dark body #nscc-chrome-folder-tabs .erp-connect-title,
:root.dark body #nscc-chrome-folder-tabs h2,
:root.dark body .modal-header h2,
:root.dark body .modal-title-compact,
:root.dark body .modal-title-strong,
:root.dark body .erp-staging-modal-header h2,
body.dark-theme .master-data-header-box .erp-connect-title,
body.dark-theme .master-data-header-box h2,
body.dark-theme .nscc-ledger-head h2,
body.dark-theme .nscc-chrome-synthetic-title .erp-connect-title,
body.dark-theme #nscc-chrome-folder-tabs .erp-connect-title,
body.dark-theme #nscc-chrome-folder-tabs h2,
body.dark-theme .modal-header h2,
body.dark-theme .modal-title-compact,
body.dark-theme .modal-title-strong,
body.dark-theme .erp-staging-modal-header h2 {
    color: #fafaf9 !important;
    -webkit-text-fill-color: #fafaf9 !important;
}
:root.dark body .nscc-erp-tabs .nscc-erp-tab-btn,
:root.dark body .nscc-tab-groups .nscc-erp-tab-btn,
:root.dark body .sub-nav-panel .sub-nav-btn,
body.dark-theme .nscc-erp-tabs .nscc-erp-tab-btn,
body.dark-theme .nscc-tab-groups .nscc-erp-tab-btn,
body.dark-theme .sub-nav-panel .sub-nav-btn {
    border-color: var(--nscc-line, #ffffff) !important;
}

/* ========== Entry fields + dropdowns: black border (white in dark) ========== */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
html body textarea,
html body select:not(.nscc-status-select):not(.nscc-dispatch-status-pill),
html body .input,
html body .form-control-panel,
html body .nscc-form-select,
html body .nscc-select,
html body .form-select,
html body .select-control,
html body .filter-select,
html body .nscc-support-select,
html body .select-inline:not(.nscc-status-select),
html body .select-inline--dispatch:not(.nscc-status-select),
html body .select-inline--ghost,
html body .select-compact,
html body .nscc-planner-person-select,
html body .md-search-input,
html body .st-search,
html body .master-data-search,
html body .comms-contact-search,
html body .nscc-portal-search__input,
html body .nscc-location-combobox__search,
html body .nscc-date-nav__field,
html body .nscc-date-nav__btn,
html body .nscc-date-nav__today,
html body .date-nav-btn,
html body .nscc-custom-date-arrow,
html body .dispatch-date-control:not(.nscc-date-nav) {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-color: var(--nscc-line, #000000) !important;
    box-sizing: border-box;
}
html body .nscc-date-nav__field input[type="date"],
html body .nscc-date-nav__hidden,
html body .nscc-date-nav input[type="date"] {
    border: none !important;
}
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
html body textarea:focus,
html body select:focus,
html body .form-control-panel:focus,
html body .nscc-form-select:focus,
html body .md-search-input:focus,
html body input[type="search"]:focus,
html body input[type="date"]:focus {
    border-color: var(--nscc-line, #000000) !important;
    outline: none;
}
:root.dark body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
:root.dark body textarea,
:root.dark body select:not(.nscc-status-select):not(.nscc-dispatch-status-pill),
:root.dark body .input,
:root.dark body .form-control-panel,
:root.dark body .nscc-form-select,
:root.dark body .nscc-select,
:root.dark body .form-select,
:root.dark body .select-control,
:root.dark body .filter-select,
:root.dark body .nscc-support-select,
:root.dark body .select-inline:not(.nscc-status-select),
:root.dark body .select-inline--dispatch:not(.nscc-status-select),
:root.dark body .select-inline--ghost,
:root.dark body .select-compact,
:root.dark body .nscc-planner-person-select,
:root.dark body .md-search-input,
:root.dark body .st-search,
:root.dark body .master-data-search,
:root.dark body .comms-contact-search,
:root.dark body .nscc-portal-search__input,
:root.dark body .nscc-location-combobox__search,
:root.dark body .nscc-date-nav__field,
:root.dark body .nscc-date-nav__btn,
:root.dark body .nscc-date-nav__today,
:root.dark body .date-nav-btn,
:root.dark body .nscc-custom-date-arrow,
:root.dark body .dispatch-date-control:not(.nscc-date-nav),
body.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
body.dark-theme textarea,
body.dark-theme select:not(.nscc-status-select):not(.nscc-dispatch-status-pill),
body.dark-theme .input,
body.dark-theme .form-control-panel,
body.dark-theme .nscc-form-select,
body.dark-theme .nscc-select,
body.dark-theme .form-select,
body.dark-theme .select-control,
body.dark-theme .filter-select,
body.dark-theme .nscc-support-select,
body.dark-theme .select-inline:not(.nscc-status-select),
body.dark-theme .select-inline--dispatch:not(.nscc-status-select),
body.dark-theme .select-inline--ghost,
body.dark-theme .select-compact,
body.dark-theme .nscc-planner-person-select,
body.dark-theme .md-search-input,
body.dark-theme .st-search,
body.dark-theme .master-data-search,
body.dark-theme .comms-contact-search,
body.dark-theme .nscc-portal-search__input,
body.dark-theme .nscc-location-combobox__search,
body.dark-theme .nscc-date-nav__field,
body.dark-theme .nscc-date-nav__btn,
body.dark-theme .nscc-date-nav__today,
body.dark-theme .date-nav-btn,
body.dark-theme .nscc-custom-date-arrow,
body.dark-theme .dispatch-date-control:not(.nscc-date-nav) {
    border-color: var(--nscc-line, #ffffff) !important;
}
:root.dark body .nscc-date-nav__field input[type="date"],
:root.dark body .nscc-date-nav input[type="date"],
body.dark-theme .nscc-date-nav__field input[type="date"],
body.dark-theme .nscc-date-nav input[type="date"] {
    border: none !important;
}

/* ========== Dark mode: no near-black text on dark surfaces ========== */
:root.dark body,
body.dark-theme {
    color: var(--text-primary);
}
:root.dark body :is(
    h1, h2, h3, h4, h5, h6, p, span, label, strong, em, small, li, td, th, a, button, div, section, article, aside, header, footer, nav, summary, legend, figcaption
):where(
    [style*="color:#000"],
    [style*="color: #000"],
    [style*="color:#000000"],
    [style*="color: #000000"],
    [style*="color:#0f172a"],
    [style*="color: #0f172a"],
    [style*="color:#111827"],
    [style*="color: #111827"],
    [style*="color:#1c1917"],
    [style*="color: #1c1917"],
    [style*="color:#18181b"],
    [style*="color: #18181b"]
) {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
/* Dark mode ticker chips match timezone zone fill (#4b5563) ? use light ink */
:root.dark body .ticker-seg,
:root.dark body .dispatch-ticker .ticker-seg,
body.dark-theme .ticker-seg,
body.dark-theme .dispatch-ticker .ticker-seg {
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
}
:root.dark body .tab-btn.active,
body.dark-theme .tab-btn.active {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
:root.dark body :is(
    [style*="background:#fbbf24"],
    [style*="background: #fbbf24"],
    [style*="background:#fde047"],
    [style*="background: #fde047"],
    [style*="background:#fef08a"],
    [style*="background: #fef08a"],
    [style*="background:#34C759"],
    [style*="background: #34C759"],
    [style*="background:#f59e0b"],
    [style*="background: #f59e0b"],
    [style*="background:#FFCC00"],
    [style*="background: #FFCC00"]
) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
:root.dark body .ref-gantt-bar,
:root.dark body .cm-trip-id,
:root.dark body .cm-list-header h3,
:root.dark body .column-header h3,
:root.dark body .modal-title-strong,
:root.dark body .nscc-hover-desc,
body.dark-theme .ref-gantt-bar,
body.dark-theme .cm-trip-id,
body.dark-theme .cm-list-header h3,
body.dark-theme .column-header h3,
body.dark-theme .modal-title-strong,
body.dark-theme .nscc-hover-desc {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* ========== No capsule pills outside LIVE ticker ========== */
html body .badge,
html body .chip,
html body .pill,
html body .tag,
html body .nscc-chip,
html body .nscc-tag,
html body .nscc-badge,
html body .ops-chip,
html body .status-chip,
html body .status-badge,
html body .ref-status-pill,
html body .nscc-dispatch-status-pill,
html body .cm-status-badge,
html body .nscc-fp-badge,
html body .mode-badge,
html body #global-mode-badge,
html body .banner-pill-label,
html body .nscc-switch,
html body .filter-select,
html body .btn:not(.btn-icon),
html body .tab-btn,
html body .nav-btn,
html body .pulse-date-picker-pill,
html body .nscc-date-nav,
html body .top-tabs,
html body .seed-progress-track,
html body .seed-progress-fill,
html body .nscc-dash-aging-bar,
html body .nscc-dash-cust-bar,
html body .nscc-dash-cust-fill {
    border-radius: 8px !important;
}
html body .nscc-switch,
html body .nscc-switch__knob {
    border-radius: 8px !important;
}
/* LIVE ticker chips: rounded rectangles (same chrome radius as other controls) */
html body .dispatch-ticker .ticker-seg,
html body .ticker-seg {
    border-radius: var(--ticker-chip-radius, 8px) !important;
}
html body .dispatch-ticker .ticker-seg-close {
    border-radius: 8px !important;
}

/* Dark mode modals: always solid (last so outline-transparent rules cannot clear them) */
:root.dark body .modal,
body.dark-theme .modal {
    background: rgba(0, 0, 0, 0.55) !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
}
:root.dark body .modal-content,
:root.dark body .modal .modal-content,
:root.dark body .trip-modal-content,
body.dark-theme .modal-content,
body.dark-theme .modal .modal-content,
body.dark-theme .trip-modal-content {
    background: var(--bg-card, #1c1c1b) !important;
    background-color: var(--bg-card, #1c1c1b) !important;
}

/* Light mode banner: user chip = timezone zone fill (final lock) */
html:not(.dark) body:not(.dark-theme) .nscc-chrome-brand-row .user-profile,
html body:not(.dark-theme) .nscc-chrome-brand-row .user-profile {
    background: var(--banner-chip-bg, #d1d5db) !important;
    background-color: var(--banner-chip-bg, #d1d5db) !important;
}
/* Brand name chip matches user chip; logo tile is white + black border */
html:not(.dark) body:not(.dark-theme) .nscc-chrome-brand-row button.nscc-chrome-brand-mark,
html body:not(.dark-theme) .nscc-chrome-brand-row button.nscc-chrome-brand-mark {
    background: var(--banner-chip-bg, #d1d5db) !important;
    background-color: var(--banner-chip-bg, #d1d5db) !important;
    border-color: var(--nscc-line, #000000) !important;
}
html body .nscc-chrome-brand-row .nscc-chrome-brand-mark img,
html body .nscc-chrome-brand-mark img {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    filter: none !important;
}

/* Ticker + LIVE label + legend: exact same fill as product-name box */
html body .dispatch-ticker,
html body .dispatch-ticker .ticker-label {
    background: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !important;
}
html body .dispatch-ticker {
    color: var(--ticker-bar-ink, #1c1917) !important;
}
html body .dispatch-ticker .ticker-label {
    color: var(--ticker-bar-ink, #1c1917) !important;
    -webkit-text-fill-color: var(--ticker-bar-ink, #1c1917) !important;
    border-right: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
}
:root.dark body .dispatch-ticker,
:root.dark body .dispatch-ticker .ticker-label,
body.dark-theme .dispatch-ticker,
body.dark-theme .dispatch-ticker .ticker-label {
    background: var(--chrome-logo-box-bg, #4b5563) !important;
    background-color: var(--chrome-logo-box-bg, #4b5563) !important;
    color: var(--ticker-bar-ink, #f4f4f5) !important;
    -webkit-text-fill-color: var(--ticker-bar-ink, #f4f4f5) !important;
}
:root.dark body .dispatch-ticker .ticker-label,
body.dark-theme .dispatch-ticker .ticker-label {
    border-right-color: var(--nscc-line, #ffffff) !important;
}

/* Status color legend always visible above brand banner ? same strip as LIVE ticker */
html.nscc-left-nav body .top-header > #color-legend,
html.nscc-left-nav body .top-header > .nscc-color-legend,
html body .top-header > #color-legend,
html body .top-header > .nscc-color-legend,
html body #color-legend,
html body .nscc-color-legend {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: var(--ticker-bar-gray, #d1d5db) !important;
    background-color: var(--ticker-bar-gray, #d1d5db) !important;
    color: var(--ticker-bar-ink, #1c1917) !important;
}
:root.dark body .top-header > #color-legend,
:root.dark body .top-header > .nscc-color-legend,
:root.dark body #color-legend,
:root.dark body .nscc-color-legend,
body.dark-theme .top-header > #color-legend,
body.dark-theme .top-header > .nscc-color-legend,
body.dark-theme #color-legend,
body.dark-theme .nscc-color-legend {
    background: var(--ticker-bar-gray, #4b5563) !important;
    background-color: var(--ticker-bar-gray, #4b5563) !important;
    color: var(--ticker-bar-ink, #f4f4f5) !important;
}
/* ==========================================================================
   GLOBAL: status + info chips/boxes ? clear fill, black ink, bright border
   Catches leftover solid fills from CSS classes and inline styles.
   Excludes: legend swatches, map markers, chart bars, tiny dots, progress fills.
   ========================================================================== */
:root {
    --nscc-status-border-w: 4px;
}

html body .badge,
html body .chip,
html body .tag,
html body .pill,
html body .mode-badge,
html body .nscc-chip,
html body .nscc-tag,
html body .nscc-badge,
html body .nscc-info-box,
html body .nscc-status-box,
html body .info-chip,
html body .info-badge,
html body .alert-chip,
html body .severity-badge,
html body .nscc-chrome-comms-badge,
html body .nscc-alert-inbox__badge,
html body .comms-thread-item__pending,
html body .comms-review-queue__count,
html body .nscc-erp-md-outcome--pending,
html body .nscc-pulse-action-strip--clear,
html body .connectivity-banner,
html body #primary-merge-resolution,
html body #primary-conflict-resolution {
    background: transparent !important;
    background-color: transparent !important;
    /* Chip fill is transparent, so text sits on the card/table surface behind it.
       Its colour MUST track the theme's text token (dark ink in light families,
       light ink in dark families) — never a hard #000, which is invisible on the
       dark-family card surfaces (Dark/Slate/Dim/Graphite/Umber/Onyx). */
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-style: solid !important;
    border-width: var(--nscc-status-border-w, 4px) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

html body #primary-merge-resolution {
    border-color: #FF9500 !important;
}
html body #primary-conflict-resolution,
html body .connectivity-banner,
html body .nscc-alert-inbox__badge,
html body .nscc-chrome-comms-badge {
    border-color: #FF3B30 !important;
}
html body .nscc-pulse-action-strip--clear {
    border-color: #34C759 !important;
}
html body .comms-thread-item__pending,
html body .comms-review-queue__count,
html body .nscc-erp-md-outcome--pending {
    border-color: #FF9500 !important;
}

/* Inline solid status/info fills ? outline (text chips & info boxes) */
html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#FF3B30"],
    [style*="background: #FF3B30"],
    [style*="background:#ef4444"],
    [style*="background: #ef4444"],
    [style*="background:#dc2626"],
    [style*="background: #dc2626"],
    [style*="background:#FF9500"],
    [style*="background: #FF9500"],
    [style*="background:#f59e0b"],
    [style*="background: #f59e0b"],
    [style*="background:#fbbf24"],
    [style*="background: #fbbf24"],
    [style*="background:#fde047"],
    [style*="background: #fde047"],
    [style*="background:#FFCC00"],
    [style*="background: #FFCC00"],
    [style*="background:#34C759"],
    [style*="background: #34C759"],
    [style*="background:#22c55e"],
    [style*="background: #22c55e"],
    [style*="background:#007AFF"],
    [style*="background: #007AFF"],
    [style*="background:#2563eb"],
    [style*="background: #2563eb"],
    [style*="background:#5856D6"],
    [style*="background: #5856D6"],
    [style*="background:#AF52DE"],
    [style*="background: #AF52DE"],
    [style*="background:#8b5cf6"],
    [style*="background: #8b5cf6"],
    [style*="background:#7c3aed"],
    [style*="background: #7c3aed"],
    [style*="background:#06b6d4"],
    [style*="background: #06b6d4"]
):not(.sidebar-legend-item i):not(.nscc-color-legend__swatch):not(.nscc-conn-dot):not(.pulse-dot):not(.erp-status-dot):not(.nscc-alert-inbox__sev):not([class*="legend__swatch"]):not([class*="progress"]):not([class*="chart"]):not([class*="bar-fill"]):not([class*="gantt-shift"]):not(.map-courier-avatar-marker):not(.route-trace-courier-dot) {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border-style: solid !important;
    border-width: var(--nscc-status-border-w, 4px) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#FF3B30"], [style*="background: #FF3B30"],
    [style*="background:#ef4444"], [style*="background: #ef4444"],
    [style*="background:#dc2626"], [style*="background: #dc2626"]
) {
    border-color: #FF3B30 !important;
}
html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#FF9500"], [style*="background: #FF9500"],
    [style*="background:#f59e0b"], [style*="background: #f59e0b"],
    [style*="background:#fbbf24"], [style*="background: #fbbf24"]
) {
    border-color: #FF9500 !important;
}
html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#FFCC00"], [style*="background: #FFCC00"],
    [style*="background:#fde047"], [style*="background: #fde047"]
) {
    border-color: #FFCC00 !important;
}
html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#34C759"], [style*="background: #34C759"],
    [style*="background:#22c55e"], [style*="background: #22c55e"]
) {
    border-color: #34C759 !important;
}
html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#007AFF"], [style*="background: #007AFF"],
    [style*="background:#2563eb"], [style*="background: #2563eb"]
) {
    border-color: #007AFF !important;
}
html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#5856D6"], [style*="background: #5856D6"]
) {
    border-color: #5856D6 !important;
}
html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#AF52DE"], [style*="background: #AF52DE"],
    [style*="background:#8b5cf6"], [style*="background: #8b5cf6"],
    [style*="background:#7c3aed"], [style*="background: #7c3aed"]
) {
    border-color: #AF52DE !important;
}
html body :is(span, div, label, a, strong, em, p, button):where(
    [style*="background:#06b6d4"], [style*="background: #06b6d4"]
) {
    border-color: #06b6d4 !important;
}

/* Bright borders on every status chip class */
html body .ref-status-pill,
html body .status-badge,
html body .status-chip,
html body .ops-chip,
html body .badge,
html body .nscc-dispatch-status-pill,
html body .nscc-fp-badge,
html body .cm-status-badge,
html body .nscc-pulse-action-chip__status,
html body .nscc-pulse-segment-tip__status-pill,
html body .timeline-event-inline,
html body .gantt-trip-block,
html body .select-inline--dispatch.nscc-status-select {
    border-width: 4px !important;
    border-style: solid !important;
}

:root.dark body .badge,
:root.dark body .chip,
:root.dark body .tag,
:root.dark body .pill,
:root.dark body .connectivity-banner,
:root.dark body #primary-merge-resolution,
:root.dark body #primary-conflict-resolution,
body.dark-theme .badge,
body.dark-theme .chip,
body.dark-theme .tag,
body.dark-theme .pill,
body.dark-theme .connectivity-banner,
body.dark-theme #primary-merge-resolution,
body.dark-theme #primary-conflict-resolution {
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
}

/* ==========================================================================
   DROPDOWNS: 2px black border everywhere (white in dark). Final kill-switch.
   ========================================================================== */
html body select,
html body select.form-control,
html body select.form-control-panel,
html body .nscc-select,
html body .form-select,
html body .nscc-form-select,
html body .nscc-support-select,
html body .select-control,
html body .filter-select,
html body .select-inline,
html body .select-inline--dispatch,
html body .select-inline--ghost,
html body .select-compact,
html body .nscc-planner-person-select,
html body .nscc-payroll-provider-select,
html body .md-fleet-assigned-select,
html body .md-fleet-division-select,
html body .custom-export-source-select,
html body .nscc-location-combobox,
html body .nscc-location-combobox__panel,
html body .nscc-location-combobox__search {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-color: var(--nscc-line, #000000) !important;
    box-sizing: border-box;
}
html body select:focus,
html body select:open,
html body .nscc-form-select:focus,
html body .form-select:focus,
html body .select-control:focus,
html body .filter-select:focus,
html body .select-inline:focus {
    border-color: var(--nscc-line, #000000) !important;
    outline: none;
}
:root.dark body select,
:root.dark body select.form-control,
:root.dark body select.form-control-panel,
:root.dark body .nscc-select,
:root.dark body .form-select,
:root.dark body .nscc-form-select,
:root.dark body .nscc-support-select,
:root.dark body .select-control,
:root.dark body .filter-select,
:root.dark body .select-inline,
:root.dark body .select-inline--dispatch,
:root.dark body .select-inline--ghost,
:root.dark body .select-compact,
:root.dark body .nscc-planner-person-select,
:root.dark body .nscc-payroll-provider-select,
:root.dark body .md-fleet-assigned-select,
:root.dark body .md-fleet-division-select,
:root.dark body .custom-export-source-select,
:root.dark body .nscc-location-combobox,
:root.dark body .nscc-location-combobox__panel,
:root.dark body .nscc-location-combobox__search,
body.dark-theme select,
body.dark-theme select.form-control,
body.dark-theme select.form-control-panel,
body.dark-theme .nscc-select,
body.dark-theme .form-select,
body.dark-theme .nscc-form-select,
body.dark-theme .nscc-support-select,
body.dark-theme .select-control,
body.dark-theme .filter-select,
body.dark-theme .select-inline,
body.dark-theme .select-inline--dispatch,
body.dark-theme .select-inline--ghost,
body.dark-theme .select-compact,
body.dark-theme .nscc-planner-person-select,
body.dark-theme .nscc-payroll-provider-select,
body.dark-theme .md-fleet-assigned-select,
body.dark-theme .md-fleet-division-select,
body.dark-theme .custom-export-source-select,
body.dark-theme .nscc-location-combobox,
body.dark-theme .nscc-location-combobox__panel,
body.dark-theme .nscc-location-combobox__search {
    border-color: var(--nscc-line, #ffffff) !important;
}
:root.dark body select:focus,
:root.dark body select:open,
body.dark-theme select:focus,
body.dark-theme select:open {
    border-color: var(--nscc-line, #ffffff) !important;
}

/* ========== FINAL LOCK: banner chrome boxes are transparent ==========
   Every box/icon container in the top banner (.nscc-chrome-brand-row) paints
   nothing of its own, so the banner's own paint — including the diagonal
   stripe overlay in light mode and the --bg-card fill in dark mode — shows
   through unchanged. Chip identity comes from the 2px border on each box,
   not a gray fill on top of the banner. Applies to icon buttons, ghost
   buttons, the icon cluster, timezone zones, the user-profile chip, the
   brand-mark button and #global-mode-badge; the "← Back" button and the
   logo image tile are handled in the block just below. */
html body .nscc-chrome-brand-row .btn.btn-icon,
html body .nscc-chrome-brand-row .btn-ghost.btn-icon,
html body .nscc-chrome-brand-row .btn.btn-ghost,
html body .nscc-chrome-brand-row .btn-ghost,
html body .nscc-chrome-brand-row .nscc-chrome-icon-cluster,
html body .nscc-chrome-brand-row .nscc-header-clock-zone,
html body .nscc-chrome-brand-row .user-profile,
html body .nscc-chrome-brand-row button.nscc-chrome-brand-mark,
html body .nscc-chrome-brand-row #global-mode-badge,
html body #global-mode-badge {
    background: transparent !important;
    background-color: transparent !important;
}
html body .nscc-chrome-brand-row .btn.btn-icon:hover,
html body .nscc-chrome-brand-row .btn-ghost.btn-icon:hover,
html body .nscc-chrome-brand-row .btn.btn-ghost:hover,
html body .nscc-chrome-brand-row .btn-ghost:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
}
:root.dark body .nscc-chrome-brand-row .btn.btn-icon,
:root.dark body .nscc-chrome-brand-row .btn-ghost.btn-icon,
:root.dark body .nscc-chrome-brand-row .btn.btn-ghost,
:root.dark body .nscc-chrome-brand-row .btn-ghost,
:root.dark body .nscc-chrome-brand-row .nscc-chrome-icon-cluster,
:root.dark body .nscc-chrome-brand-row .nscc-header-clock-zone,
:root.dark body .nscc-chrome-brand-row .user-profile,
:root.dark body .nscc-chrome-brand-row button.nscc-chrome-brand-mark,
:root.dark body .nscc-chrome-brand-row #global-mode-badge,
:root.dark body #global-mode-badge,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn.btn-ghost,
body.dark-theme .nscc-chrome-brand-row .btn-ghost,
body.dark-theme .nscc-chrome-brand-row .nscc-chrome-icon-cluster,
body.dark-theme .nscc-chrome-brand-row .nscc-header-clock-zone,
body.dark-theme .nscc-chrome-brand-row .user-profile,
body.dark-theme .nscc-chrome-brand-row button.nscc-chrome-brand-mark,
body.dark-theme .nscc-chrome-brand-row #global-mode-badge,
body.dark-theme #global-mode-badge {
    background: transparent !important;
    background-color: transparent !important;
}
:root.dark body .nscc-chrome-brand-row .btn.btn-icon:hover,
:root.dark body .nscc-chrome-brand-row .btn-ghost.btn-icon:hover,
:root.dark body .nscc-chrome-brand-row .btn.btn-ghost:hover,
:root.dark body .nscc-chrome-brand-row .btn-ghost:hover,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon:hover,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon:hover,
body.dark-theme .nscc-chrome-brand-row .btn.btn-ghost:hover,
body.dark-theme .nscc-chrome-brand-row .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
}

/* Back button + logo image tile: same transparency as the rest of the banner
   chrome. FINAL LOCK does not name these, so overriding their own base rules
   (.nscc-chrome-nav-back at ~line 19467, .nscc-chrome-brand-mark img at
   ~line 19531) is done here. */
html body .nscc-chrome-brand-row .nscc-chrome-nav-back,
html body .nscc-chrome-nav-back {
    background: transparent !important;
    background-color: transparent !important;
}
html body .nscc-chrome-brand-row .nscc-chrome-nav-back:hover,
html body .nscc-chrome-brand-row .nscc-chrome-nav-back:focus-visible,
html body .nscc-chrome-nav-back:hover,
html body .nscc-chrome-nav-back:focus-visible {
    background: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
}
:root.dark body .nscc-chrome-brand-row .nscc-chrome-nav-back:hover,
:root.dark body .nscc-chrome-brand-row .nscc-chrome-nav-back:focus-visible,
body.dark-theme .nscc-chrome-brand-row .nscc-chrome-nav-back:hover,
body.dark-theme .nscc-chrome-brand-row .nscc-chrome-nav-back:focus-visible {
    background: rgba(255, 255, 255, 0.10) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
}
html body .nscc-chrome-brand-row .nscc-chrome-brand-mark img,
html body .nscc-chrome-brand-mark img {
    background: transparent !important;
    background-color: transparent !important;
}
:root.dark body .nscc-chrome-brand-row .nscc-chrome-brand-mark img,
:root.dark body .nscc-chrome-brand-mark img,
body.dark-theme .nscc-chrome-brand-row .nscc-chrome-brand-mark img,
body.dark-theme .nscc-chrome-brand-mark img {
    background: transparent !important;
    background-color: transparent !important;
}
html body .dispatch-ticker .ticker-seg,
html body .ticker-seg {
    background: var(--ticker-seg-fill, #9ca3af) !important;
    background-color: var(--ticker-seg-fill, #9ca3af) !important;
}
:root.dark body .dispatch-ticker .ticker-seg,
:root.dark body .ticker-seg,
body.dark-theme .dispatch-ticker .ticker-seg,
body.dark-theme .ticker-seg {
    background: var(--ticker-seg-fill-dark, #374151) !important;
    background-color: var(--ticker-seg-fill-dark, #374151) !important;
    color: #fafafa !important;
    -webkit-text-fill-color: #fafafa !important;
}

/* ========== Banner icon ink: readable mid-zinc (not solid black silhouettes) ==========
   Pure brightness(0) made Comms/Admin/theme/audio unreadable blobs. Soft gray keeps
   shape detail while staying quieter than the old colorful emoji. */
html body .nscc-chrome-brand-row .btn.btn-icon,
html body .nscc-chrome-brand-row .btn-ghost.btn-icon,
html body .nscc-chrome-brand-row .nscc-chrome-admin-btn {
    color: var(--banner-muted, #52525b) !important;
    -webkit-text-fill-color: var(--banner-muted, #52525b) !important;
    font-variant-emoji: text;
}
html body .nscc-chrome-brand-row .btn.btn-icon .nscc-chrome-glyph,
html body .nscc-chrome-brand-row .btn-ghost.btn-icon .nscc-chrome-glyph,
html body .nscc-chrome-brand-row .btn.btn-icon > span:not(.nscc-chrome-comms-badge),
html body .nscc-chrome-brand-row .btn-ghost.btn-icon > span:not(.nscc-chrome-comms-badge),
html body .nscc-chrome-brand-row .btn.btn-icon svg,
html body .nscc-chrome-brand-row .btn-ghost.btn-icon svg {
    color: var(--banner-muted, #52525b) !important;
    -webkit-text-fill-color: var(--banner-muted, #52525b) !important;
    stroke: currentColor;
    fill: none;
    width: 1.28rem;
    height: 1.28rem;
    max-width: 1.28rem;
    max-height: 1.28rem;
    font-size: 1.18rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Soft mono — keep glyph edges visible (no brightness(0) crush) */
    filter: grayscale(1) contrast(0.92) opacity(0.88) !important;
    font-variant-emoji: text;
}
html body .nscc-chrome-brand-row .btn.btn-icon svg,
html body .nscc-chrome-brand-row .btn-ghost.btn-icon svg {
    width: 1.28rem !important;
    height: 1.28rem !important;
    max-width: 1.28rem !important;
    max-height: 1.28rem !important;
    filter: none !important;
    opacity: 0.9;
}
:root.dark body .nscc-chrome-brand-row .btn.btn-icon,
:root.dark body .nscc-chrome-brand-row .btn-ghost.btn-icon,
:root.dark body .nscc-chrome-brand-row .nscc-chrome-admin-btn,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon,
body.dark-theme .nscc-chrome-brand-row .nscc-chrome-admin-btn {
    color: var(--banner-muted, #d4d4d8) !important;
    -webkit-text-fill-color: var(--banner-muted, #d4d4d8) !important;
}
:root.dark body .nscc-chrome-brand-row .btn.btn-icon .nscc-chrome-glyph,
:root.dark body .nscc-chrome-brand-row .btn-ghost.btn-icon .nscc-chrome-glyph,
:root.dark body .nscc-chrome-brand-row .btn.btn-icon > span:not(.nscc-chrome-comms-badge),
:root.dark body .nscc-chrome-brand-row .btn-ghost.btn-icon > span:not(.nscc-chrome-comms-badge),
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon .nscc-chrome-glyph,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon .nscc-chrome-glyph,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon > span:not(.nscc-chrome-comms-badge),
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon > span:not(.nscc-chrome-comms-badge) {
    color: var(--banner-muted, #d4d4d8) !important;
    -webkit-text-fill-color: var(--banner-muted, #d4d4d8) !important;
    filter: grayscale(1) contrast(0.95) opacity(0.92) !important;
}
:root.dark body .nscc-chrome-brand-row .btn.btn-icon svg,
:root.dark body .nscc-chrome-brand-row .btn-ghost.btn-icon svg,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon svg,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon svg {
    color: #d4d4d8 !important;
    stroke: currentColor;
    filter: none !important;
    opacity: 0.92;
}
/* Keep unread badges readable (not ink-forced) */
html body .nscc-chrome-brand-row .nscc-chrome-comms-badge {
    filter: none !important;
    opacity: 1 !important;
}

/* Admin Console button — win the FINAL LOCK above. That block forces every
   .btn.btn-icon in the banner row onto --chrome-logo-box-bg, which paints
   the standalone admin button as a chip that stands out from the banner
   strip. Keep it fully transparent so the banner's own paint (including
   its diagonal stripe overlay in light mode, and the --bg-card fill it
   uses in dark mode) shows through unchanged — the button always matches
   whatever the banner is painting. Selector ties the final-lock's
   specificity and comes later, so it wins. */
html body .nscc-chrome-brand-row .btn.btn-icon.nscc-chrome-admin-btn,
html body .nscc-chrome-brand-row .btn-ghost.btn-icon.nscc-chrome-admin-btn {
    background: transparent !important;
    background-color: transparent !important;
}
html body .nscc-chrome-brand-row .btn.btn-icon.nscc-chrome-admin-btn:hover,
html body .nscc-chrome-brand-row .btn-ghost.btn-icon.nscc-chrome-admin-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    filter: brightness(0.96);
}
:root.dark body .nscc-chrome-brand-row .btn.btn-icon.nscc-chrome-admin-btn,
:root.dark body .nscc-chrome-brand-row .btn-ghost.btn-icon.nscc-chrome-admin-btn,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon.nscc-chrome-admin-btn,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon.nscc-chrome-admin-btn {
    background: transparent !important;
    background-color: transparent !important;
}
:root.dark body .nscc-chrome-brand-row .btn.btn-icon.nscc-chrome-admin-btn:hover,
:root.dark body .nscc-chrome-brand-row .btn-ghost.btn-icon.nscc-chrome-admin-btn:hover,
body.dark-theme .nscc-chrome-brand-row .btn.btn-icon.nscc-chrome-admin-btn:hover,
body.dark-theme .nscc-chrome-brand-row .btn-ghost.btn-icon.nscc-chrome-admin-btn:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
}

/* ==========================================================================
   DROPDOWN BORDER LOCK v3 — absolute last rule in file; hover/focus included.
   ========================================================================== */
html body select,
html body select:hover,
html body select:focus,
html body select:active,
html body select:open,
html body .nscc-select,
html body .nscc-select:hover,
html body .form-select,
html body .form-select:hover,
html body .nscc-form-select,
html body .nscc-form-select:hover,
html body .nscc-support-select,
html body .select-control,
html body .filter-select,
html body .select-inline,
html body .select-inline--ghost,
html body .select-inline--dispatch,
html body .select-compact,
html body .nscc-planner-person-select,
html body .nscc-payroll-provider-select,
html body .md-fleet-assigned-select,
html body .md-fleet-division-select,
html body .custom-export-source-select,
html body .nscc-location-combobox,
html body .nscc-location-combobox__panel,
html body .nscc-location-combobox__search,
html body .nscc-ap-form-grid select,
html body .nscc-reg-search-bar select,
html body .nscc-reg-history-bar select,
html body label select {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important;
    border-color: var(--nscc-line, #000000) !important;
    box-sizing: border-box !important;
}
:root.dark body select,
:root.dark body select:hover,
:root.dark body select:focus,
:root.dark body select:active,
:root.dark body select:open,
:root.dark body .nscc-form-select,
:root.dark body .select-inline--ghost,
:root.dark body .nscc-location-combobox,
body.dark-theme select,
body.dark-theme select:hover,
body.dark-theme select:focus,
body.dark-theme select:active,
body.dark-theme select:open,
body.dark-theme .nscc-form-select,
body.dark-theme .select-inline--ghost,
body.dark-theme .nscc-location-combobox {
    border-color: var(--nscc-line, #ffffff) !important;
}

/* HR Offers — NSCC Secure Sign (native e-sign, not DocuSign) */
.nscc-offer-draft-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.nscc-offer-actions { white-space: nowrap; }
.nscc-offer-actions .btn { margin: 0 0.15rem 0.15rem 0; }
.nscc-offer-sign-overlay {
    position: fixed; inset: 0; z-index: 12050;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.nscc-offer-sign-dialog {
    width: min(920px, 100%); max-height: 92vh;
    /* The document preview below has a fixed height, so switching document
       tabs never resizes the dialog; on a very short screen the dialog
       scrolls instead of the frame changing size. */
    overflow-y: auto;
    background: var(--bg-card);
    border: 2px solid #18181b;
    border-radius: 0.5rem;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 48px rgba(0,0,0,0.25);
}
.nscc-offer-sign-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; padding: 0.85rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle, #e4e4e7);
}
.nscc-offer-sign-head h2 { margin: 0; font-size: 1.05rem; }
.nscc-offer-sign-sub { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--text-secondary, #64748b); }
.nscc-offer-sign-meta {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
    padding: 0.5rem 1rem; font-size: 0.75rem;
    background: var(--surface-secondary, #fafafa);
    border-bottom: 1px solid var(--border-subtle, #e4e4e7);
}
/* Document tabs are the shared folder tabs (nscc-erp-tabs / nscc-erp-tab-btn),
   same as the main screens; this only insets the strip inside the dialog. */
.nscc-offer-sign-dialog .nscc-offer-doc-tabs {
    flex: 0 0 auto;
    margin: 0.5rem 1rem 0;
}
.nscc-offer-doc-preview {
    margin: 0 1rem 0.5rem; padding: 0.5rem;
    flex: 0 0 auto;
    height: 34vh; max-height: 34vh; overflow: auto;
    border: 2px solid #18181b; background: #f4f4f5;
}
.nscc-offer-doc-preview .ips-inv { margin: 0; box-shadow: none; max-width: none; padding: 0.45in 0.5in; }
.nscc-offer-sign-form {
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--border-subtle, #e4e4e7);
    display: grid; gap: 0.45rem;
}
.nscc-offer-check { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.78rem; }
.nscc-offer-check input { margin-top: 0.15rem; }
.nscc-offer-sig-block { margin-top: 0.25rem; }
.nscc-offer-sig-label { font-size: 0.72rem; font-weight: 700; margin-bottom: 0.25rem; }
.nscc-offer-sig-canvas {
    width: 100%; height: 96px; display: block;
    border: 2px solid #18181b; background: var(--bg-card, #fff);
    border-radius: 0.25rem; touch-action: none;
}
.nscc-offer-sign-actions {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.65rem 1rem 0.85rem;
    border-top: 1px solid var(--border-subtle, #e4e4e7);
}
html[data-theme="dark"] .nscc-offer-sign-dialog { background: #18181b; border-color: #71717a; }
html[data-theme="dark"] .nscc-offer-doc-preview { background: #27272a; border-color: #71717a; }
html[data-theme="dark"] .nscc-offer-sig-canvas { background: #fafafa; }

/* E-sign trust chain verify view (Phase 3) */
.nscc-esign-verdict {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.nscc-esign-verdict.is-ok   { background: #dcfce7; color: #166534; }
.nscc-esign-verdict.is-bad  { background: #fee2e2; color: #991b1b; }
.nscc-esign-verdict.is-warn { background: #fef9c3; color: #854d0e; }
.nscc-esign-verify-overlay .nscc-offer-doc-preview code { font-size: 0.72rem; word-break: break-all; }
html[data-theme="dark"] .nscc-esign-verdict.is-ok   { background: #14532d; color: #bbf7d0; }
html[data-theme="dark"] .nscc-esign-verdict.is-bad  { background: #7f1d1d; color: #fecaca; }
html[data-theme="dark"] .nscc-esign-verdict.is-warn { background: #713f12; color: #fde68a; }

/* Sales & Contracts pipeline (Ops Advanced) */
.nscc-sales-pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem;
    margin: 1rem 0;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.nscc-sales-col {
    border: 2px solid var(--border-subtle, #e4e4e7);
    border-radius: 0.35rem;
    background: var(--bg-sunken, #fafafa);
    min-height: 8rem;
}
.nscc-sales-col__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-subtle, #e4e4e7);
    background: var(--bg-elevated, var(--bg-card, #fff));
    color: var(--text-primary);
}
.nscc-sales-col__count {
    font-size: 0.62rem;
    color: var(--text-muted, #71717a);
}
.nscc-sales-col__body {
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.nscc-sales-col__empty {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted, #71717a);
    text-align: center;
}
.nscc-sales-card {
    border: 1px solid var(--border-subtle, #e4e4e7);
    border-radius: 0.3rem;
    padding: 0.45rem 0.5rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
}
.nscc-sales-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.78rem;
}
.nscc-sales-card__meta {
    font-size: 0.68rem;
    color: var(--text-secondary, #64748b);
    margin-top: 0.15rem;
}
.nscc-sales-card__actions {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.nscc-ctr-link-banner {
    margin: 0.75rem 0;
    padding: 0.65rem 0.75rem;
    border: 2px solid #263d88;
    border-radius: 0.35rem;
    background: #f0f4ff;
    font-size: 0.78rem;
}
.nscc-contract-doc-preview {
    max-height: 42vh;
    overflow: auto;
    margin: 0.75rem 0;
    border: 1px solid var(--border-subtle, #e4e4e7);
    border-radius: 0.35rem;
    padding: 0.5rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
}
html[data-theme="dark"] .nscc-sales-col { background: #18181b; border-color: #52525b; }
html[data-theme="dark"] .nscc-sales-card { background: #27272a; border-color: #52525b; }

.nscc-syscfg-bg-detail {
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 2px solid #18181b;
    border-radius: 0.35rem;
    background: var(--bg-sunken, #fafafa);
}

/* Bill + pay readiness (controller dashboard) */
.nscc-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.65rem;
    margin-top: 0.5rem;
}
.nscc-readiness-card {
    border: 2px solid #18181b;
    border-radius: 0.35rem;
    padding: 0.55rem 0.65rem;
    background: var(--bg-sunken, #fafafa);
}
.nscc-readiness-card__label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #71717a);
}
.nscc-readiness-card__badge { margin: 0.35rem 0; }
.nscc-readiness-card__sub {
    display: block;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text-primary, #18181b);
}
.nscc-readiness-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 2px solid #18181b;
}
.nscc-readiness--green { background: #dcfce7; color: #166534; }
.nscc-readiness--yellow { background: #fef9c3; color: #854d0e; }
.nscc-readiness--red { background: #fee2e2; color: #991b1b; }
.nscc-reg-source-badge { margin-left: 0.35rem; font-size: 0.58rem; vertical-align: middle; }
.nscc-dup-pay-shield { margin: 0.75rem 0; }
/* Compliance vault: the Upload to vault form (was an inline style) and the one-line
   note for a permanent admin who may change rows but not add files (ACCESS-5). */
.nscc-vault-entry-form { margin: 0.75rem 0; }
.nscc-vault-upload-note { margin: 0.75rem 0; }

/* Journal entries — manual JE grid + expandable lines */
.nscc-gl-section { margin-top: 1rem; }
.nscc-gl-row--has-lines { cursor: pointer; }
.nscc-gl-row--has-lines:hover td { background: rgba(38, 61, 136, 0.04); }
.nscc-gl-line-toggle { font-size: 0.72rem; color: var(--brand-light, #0d9488); }
.nscc-gl-lines-table { width: 100%; margin: 0.35rem 0; font-size: 0.78rem; }
.nscc-gl-lines-table th,
.nscc-gl-lines-table td { padding: 0.25rem 0.45rem !important; }
.nscc-fa-section { margin-top: 1rem; }
.nscc-fa-row--expandable { cursor: pointer; }
.nscc-fa-row--expandable:hover td { background: rgba(38, 61, 136, 0.04); }
.nscc-fa-line-toggle { font-size: 0.72rem; color: var(--brand-light, #0d9488); white-space: nowrap; }
.nscc-fa-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.45rem 0.75rem;
    padding: 0.35rem 0.15rem;
    font-size: 0.78rem;
}
.nscc-fa-detail-label { display: block; font-size: 0.65rem; opacity: 0.72; text-transform: uppercase; letter-spacing: 0.03em; }
.nscc-fa-detail-actions { grid-column: 1 / -1; margin-top: 0.25rem; }
.nscc-fa-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}
.nscc-fa-add-grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; }
.nscc-fa-add-grid input,
.nscc-fa-add-grid select { font-size: 0.82rem; }
.nscc-fa-add-form { margin-top: 1rem; }
.nscc-fa-dep-preview { margin-top: 0.75rem; }
/* Add / edit bank account form (Accounting -> Bank). Mirrors the fixed-asset add form. */
.nscc-bank-form { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--border, #d7dbe6); border-radius: 8px; background: rgba(38, 61, 136, 0.03); }
.nscc-bank-form .nscc-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem 0.85rem;
    margin: 0.35rem 0 0.6rem;
}
.nscc-bank-form .nscc-form-grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; }
.nscc-bank-form .nscc-form-grid input,
.nscc-bank-form .nscc-form-grid select,
.nscc-bank-form .nscc-form-grid textarea { font-size: 0.82rem; }
.nscc-bank-form .nscc-form-check { flex-direction: row !important; align-items: center; gap: 0.4rem; }
.nscc-bank-form .nscc-form-wide { grid-column: 1 / -1; }
.nscc-bank-form .nscc-field-error { color: var(--danger, #c0392b); font-size: 0.68rem; min-height: 0.7rem; }
.nscc-bank-form .nscc-form-error { color: var(--danger, #c0392b); font-size: 0.75rem; margin: 0.25rem 0; }
.nscc-bank-form .nscc-form-error:empty { display: none; }
.nscc-bank-actions { white-space: nowrap; }
tr.nscc-row-inactive td { opacity: 0.6; }
.nscc-cf-row--expandable { cursor: pointer; }
.nscc-cf-row--expandable:hover td { background: rgba(38, 61, 136, 0.04); }
.nscc-cf-week-toggle { display: inline-block; width: 1rem; color: var(--brand-light, #0d9488); }
.nscc-cf-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    padding: 0.35rem 0.15rem;
}
@media (max-width: 720px) {
    .nscc-cf-detail-grid { grid-template-columns: 1fr; }
}
.nscc-cf-detail-col .nscc-section-heading { font-size: 0.82rem; margin: 0 0 0.35rem; }
.nscc-cf-detail-table { width: 100%; font-size: 0.76rem; }
.nscc-cf-line--drill { cursor: pointer; }
.nscc-cf-line--drill:hover td { background: rgba(38, 61, 136, 0.06); }
.nscc-cf-line-open { font-size: 0.72rem; color: var(--brand-light, #0d9488); white-space: nowrap; }
.nscc-cf-kpi { cursor: pointer; text-align: left; border: 2px solid transparent; }
.nscc-cf-kpi:hover { border-color: rgba(38, 61, 136, 0.25); }
.nscc-cf-report-wrap .nscc-cf-forecast-table { margin-top: 0.5rem; }
.nscc-budget-section { margin-top: 1rem; }
.nscc-budget-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    margin: 0.75rem 0;
}
.nscc-budget-view-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.nscc-budget-view-tab.active { background: rgba(38, 61, 136, 0.1); border-color: var(--brand-light, #0d9488); }
.nscc-budget-grid-wrap { overflow-x: auto; max-width: 100%; }
.nscc-budget-grid-table { min-width: 56rem; }
.nscc-budget-month-col { font-size: 0.68rem !important; white-space: nowrap; }
.nscc-budget-month-cell { vertical-align: top; min-width: 4.75rem; }
.nscc-budget-month-act { font-size: 0.62rem; opacity: 0.72; margin-top: 0.1rem; }
.nscc-budget-cell--var { background: rgba(234, 88, 12, 0.06); }
.nscc-budget-detail-table input.nscc-budget-amt { text-align: right; }
.nscc-manual-je-form { margin-top: 0.5rem; }
.nscc-mje-line {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 6.5rem 6.5rem;
    gap: 0.45rem;
    align-items: center;
    margin: 0.35rem 0;
}
.nscc-mje-line--head {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #71717a);
    margin-top: 0.5rem;
}
.nscc-mje-line--head .r { text-align: right; }
.nscc-mje-line select { min-width: 0; width: 100%; }
.nscc-mje-line input { width: 100%; text-align: right; }
/* Intercompany entity fields under a journal line (flag intercompanyMatching). */
.nscc-mje-ic { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: flex-end; }
.nscc-mje-ic label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.72rem; min-width: 11rem; flex: 0 1 14rem; }
.nscc-mje-ic label[hidden] { display: none; }
.nscc-mje-ic input { text-align: left; }
@media (max-width: 720px) {
    .nscc-mje-line { grid-template-columns: 1fr; }
    .nscc-mje-line--head { display: none; }
}

.nscc-reconciliation-alert {
    border: 4px solid #FF9500;
    border-radius: 10px;
    background: transparent;
    padding: 0.65rem 0.85rem;
    margin: 0 0 0.85rem;
}
.nscc-reconciliation-alert p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.nscc-reconciliation-alert__list {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    color: var(--text-secondary, var(--text-primary));
    font-variant-numeric: tabular-nums;
}
.nscc-reconciliation-alert__list li {
    margin: 0.1rem 0;
}
/* Collapsible variant — the alert is a <details> and the summary holds the
   headline; the list becomes hide/show. Default browser marker replaced with
   a chevron rotated 90° when open. Cursor: pointer to signal the whole
   summary bar is clickable. */
.nscc-reconciliation-alert--collapsible {
    display: block;
}
.nscc-reconciliation-alert__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    outline: none;
    user-select: none;
}
.nscc-reconciliation-alert__summary::-webkit-details-marker { display: none; }
.nscc-reconciliation-alert__summary::before {
    content: '▸';
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-secondary, var(--text-primary));
    flex: 0 0 auto;
    transition: transform 120ms ease;
    display: inline-block;
}
.nscc-reconciliation-alert[open] > .nscc-reconciliation-alert__summary::before {
    transform: rotate(90deg);
}
.nscc-reconciliation-alert__summary p {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.nscc-reconciliation-alert__summary:focus-visible {
    box-shadow: 0 0 0 2px var(--brand, #007AFF);
    border-radius: 4px;
}

.nscc-weekly-digest {
    border: 4px solid #FF9500;
    border-radius: 10px;
    background: transparent;
    padding: 0.75rem 0.95rem;
    margin: 0 0 0.85rem;
}
.nscc-weekly-digest--clean {
    border-color: #34C759;
}
.nscc-weekly-digest__headline {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
}
.nscc-weekly-digest__label {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 4px solid currentColor;
    border-radius: 8px;
    padding: 1px 7px;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.nscc-weekly-digest--clean .nscc-weekly-digest__label { color: #34C759; }
.nscc-weekly-digest:not(.nscc-weekly-digest--clean) .nscc-weekly-digest__label { color: #FF9500; }
.nscc-weekly-digest__issues {
    margin: 0.45rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.8rem;
    color: var(--text-secondary, var(--text-primary));
}
.nscc-weekly-digest__issues li {
    margin: 0.15rem 0;
}

/* Company Overview modular widgets
   Matt 2026-09-11: "company overview only needs the advanced screen. also
   make it modular with the moveable widgets" — replaces the old Easy/Advanced
   .exec-mode-toggle. Every section is a draggable .exec-widget card; layout
   (order + hidden) persists to localStorage. */
.exec-overview-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.35rem 0 0.85rem;
    padding: 0.4rem 0.55rem;
    border: 1px dashed var(--border, #d4d4d8);
    border-radius: 8px;
    /* Clear banner — the little widget-control buttons sit on the page
       background, not a raised card. Matt 2026-09-12. */
    background: transparent;
}
.exec-overview-controls__hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex: 1 1 240px;
    min-width: 0;
}
.exec-overview-controls__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.exec-overview-controls__label--muted { color: var(--text-muted); font-weight: 500; }
.exec-overview-controls select {
    font-size: 0.75rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 4px;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
}

.exec-overview-widgets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 0.85rem;
}
@media (max-width: 1024px) {
    .exec-overview-widgets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .exec-overview-widgets { grid-template-columns: 1fr; }
}
.exec-widget--sz-sm { grid-column: span 1; }
.exec-widget--sz-md { grid-column: span 2; }
.exec-widget--sz-lg { grid-column: span 3; }
.exec-widget--sz-xl { grid-column: span 4; }
@media (max-width: 1024px) {
    .exec-widget--sz-lg,
    .exec-widget--sz-xl { grid-column: span 2; }
}
@media (max-width: 640px) {
    .exec-widget--sz-sm,
    .exec-widget--sz-md,
    .exec-widget--sz-lg,
    .exec-widget--sz-xl { grid-column: span 1; }
}
.exec-widget {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 10px;
    /* Blend with the theme background — no white rectangles on non-white
       themes. Matt 2026-09-12. */
    background: transparent;
    padding: 0.15rem 0.85rem 0.85rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
    min-width: 0;
}
.exec-widget[draggable="true"] { cursor: grab; }
.exec-widget[draggable="true"]:active { cursor: grabbing; }
.exec-widget--dragging {
    opacity: 0.55;
    transform: scale(0.995);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.exec-widget--drag-over {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
.exec-widget--hidden { display: none !important; }
.exec-widget-group--dragging {
    opacity: 0.55;
    transform: scale(0.995);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.exec-widget-group--drag-over {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
.exec-widget-group__handle {
    align-self: flex-start;
    margin-bottom: 0.15rem;
}
.exec-widget__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0 0.45rem;
    border-bottom: 1px solid var(--border, #d4d4d8);
    margin-bottom: 0.6rem;
}
.exec-widget__handle {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    cursor: grab;
    flex: 0 0 auto;
}
.exec-widget__handle:hover { color: var(--text-primary); background: var(--bg-hover, rgba(0, 0, 0, 0.05)); }
.exec-widget__handle:active { cursor: grabbing; }
.exec-widget__title {
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary, #18181b);
    cursor: help;
    min-width: 0;
}
/* A small card has no room for a title and a row of controls side by side:
   the title takes its own line above the controls, and the "just now" text
   goes (the ↻ stays). Leadership's scorecard tiles used to overlap. */
.exec-widget.exec-widget--sz-sm:not(.exec-widget--compact) > .exec-widget__head {
    flex-wrap: wrap;
    row-gap: 0.15rem;
    gap: 0.15rem 0.35rem;
}
.exec-widget.exec-widget--sz-sm:not(.exec-widget--compact) > .exec-widget__head > .exec-widget__title:not(.exec-widget__title--sr) {
    order: -1;
    flex: 1 1 100%;
}
.exec-widget.exec-widget--sz-sm:not(.exec-widget--compact) .exec-widget__refresh time { display: none; }
.exec-widget__hide {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
}
.exec-widget__hide:hover { color: #b91c1c; background: var(--bg-hover, rgba(0, 0, 0, 0.05)); }
.exec-widget__body { min-width: 0; }
.exec-widget__body .exec-kpi-grid { margin-top: 0; }
/* Every dashboard-overview KPI strip renders its tiles inside `.exec-kpi-grid`
   (Sales Pipeline health, Payroll Current pay run, HR / Accounting overviews).
   Without a grid rule the tiles fall back to block-level children and stack,
   which is what shipped on Sales Overview → Pipeline health. Mirror the
   `.nscc-dash-kpi-grid` shape in shared-tokens.css so they lay out side-by-side
   with an auto-fit wrap at phone width. */
.exec-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--nscc-gap, 0.4rem);
}

:root.dark .exec-widget,
body.dark-theme .exec-widget {
    border-color: var(--nscc-line, #ffffff);
    background: var(--bg-raised, #1a1a1a);
}
:root.dark .exec-overview-controls,
body.dark-theme .exec-overview-controls {
    border-color: rgba(148, 163, 184, 0.35);
}

/* Group box — wraps a run of consecutive same-group widgets under one header.
   Uses the same border/background tokens as .exec-widget so the group reads as
   a "shelf" of tiles from the same theme (Enterprise scorecard, etc.). Inner
   widgets keep their own frame so drag/hide affordances still land on the child
   card. Matt 2026-09-12: "boxes that hold several can be changed and the items
   within can be changed but should be part of a group theme". */
.exec-widget-group {
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 12px;
    background: var(--bg-raised, #fff);
    padding: 0.15rem 0.85rem 0.85rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    min-width: 0;
    grid-column: span 4;
}
.exec-widget-group--empty { display: none; }
.exec-widget-group--span-2 { grid-column: span 2; }
.exec-widget-group--span-3 { grid-column: span 3; }
@media (max-width: 1024px) {
    .exec-widget-group { grid-column: span 2; }
    .exec-widget-group--span-2 { grid-column: span 2; }
    .exec-widget-group--span-3 { grid-column: span 2; }
}
@media (max-width: 640px) {
    .exec-widget-group { grid-column: span 1; }
    .exec-widget-group--span-2 { grid-column: span 1; }
    .exec-widget-group--span-3 { grid-column: span 1; }
}
.exec-widget-group__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    padding: 0.35rem 0 0.45rem;
    border-bottom: 1px solid var(--border, #d4d4d8);
    margin-bottom: 0.6rem;
}
/* Title takes the free space; the subtitle drops to its own row so the
   control cluster stays on the title line. */
.exec-widget-group__head .exec-widget-group__title { flex: 1 1 auto; }
.exec-widget-group__head .exec-widget-group__subtitle { flex: 1 1 100%; }

/* Outer group-box controls — the same cluster an individual widget carries. */
.exec-widget-group__controls {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    flex: 0 0 auto;
}
.exec-widget-group--collapsed .exec-widget-group__body { display: none; }
.exec-widget-group--collapsed .exec-widget-group__head {
    border-bottom: 0;
    margin-bottom: 0;
}
.exec-widget-group--collapsed .exec-widget-group__collapse span { transform: rotate(-90deg); }
.exec-widget-group__collapse span {
    display: inline-block;
    transition: transform 0.12s ease;
}
.exec-widget-group--hidden { display: none; }

/* Explicit group spans, overriding the automatic visible-count span. */
.exec-widget-group--sz-sm { grid-column: span 1; }
.exec-widget-group--sz-md { grid-column: span 2; }
.exec-widget-group--sz-lg { grid-column: span 3; }
.exec-widget-group--sz-xl { grid-column: span 4; }
@media (max-width: 1024px) {
    .exec-widget-group--sz-lg,
    .exec-widget-group--sz-xl { grid-column: span 2; }
}
@media (max-width: 640px) {
    .exec-widget-group--sz-sm,
    .exec-widget-group--sz-md,
    .exec-widget-group--sz-lg,
    .exec-widget-group--sz-xl { grid-column: span 1; }
}

/* Group highlights tint the box border and header rather than inverting the
   whole card the way an individual widget highlight does — the group's own
   widgets keep their colours and stay readable inside it. */
.exec-widget-group--hl-y { border-color: #eab308; }
.exec-widget-group--hl-y .exec-widget-group__head { background: rgba(250, 204, 21, 0.16); }
.exec-widget-group--hl-r { border-color: #dc2626; }
.exec-widget-group--hl-r .exec-widget-group__head { background: rgba(239, 68, 68, 0.14); }
.exec-widget-group--hl-b { border-color: #2563eb; }
.exec-widget-group--hl-b .exec-widget-group__head { background: rgba(59, 130, 246, 0.14); }
.exec-widget-group--hl-g { border-color: #15803d; }
.exec-widget-group--hl-g .exec-widget-group__head { background: rgba(21, 128, 61, 0.14); }
.exec-widget-group--hl-k { border-color: #18181b; }
.exec-widget-group--hl-k .exec-widget-group__head { background: rgba(24, 24, 27, 0.12); }
body.dark-theme .exec-widget-group--hl-y .exec-widget-group__head { background: rgba(250, 204, 21, 0.22); }
body.dark-theme .exec-widget-group--hl-r .exec-widget-group__head { background: rgba(239, 68, 68, 0.22); }
body.dark-theme .exec-widget-group--hl-b .exec-widget-group__head { background: rgba(59, 130, 246, 0.22); }
body.dark-theme .exec-widget-group--hl-g .exec-widget-group__head { background: rgba(21, 128, 61, 0.24); }
body.dark-theme .exec-widget-group--hl-k .exec-widget-group__head { background: rgba(255, 255, 255, 0.14); }
.exec-widget-group__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary, #18181b);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: help;
}
.exec-widget-group__subtitle {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    text-transform: none;
}
.exec-widget-group__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
}
/* Side-by-side row of group boxes (Accounting: Cash cycle, Month-end close,
   Tax & filings; HR Overview: Risk & safety, Credentials & compliance, People
   ops). Wraps to stacked on narrow screens. */
.nscc-widget-group-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}
@media (max-width: 760px) {
    .nscc-widget-group-row { grid-template-columns: 1fr; }
}
.exec-widget-group__body .exec-widget {
    /* Sub-tiles inside a group ride the group's frame instead of stacking a
       second heavy border on top of it. */
    border-width: 1px;
    border-color: var(--border, #d4d4d8);
    padding: 0.1rem 0.7rem 0.7rem;
}
:root.dark .exec-widget-group,
body.dark-theme .exec-widget-group {
    border-color: var(--nscc-line, #ffffff);
    background: var(--bg-raised, #1a1a1a);
}
:root.dark .exec-widget-group__body .exec-widget,
body.dark-theme .exec-widget-group__body .exec-widget {
    border-color: rgba(148, 163, 184, 0.5);
}

@media print {
    .exec-overview-controls,
    .exec-widget__handle,
    .exec-widget__hide { display: none !important; }
    .exec-overview-widgets { grid-template-columns: repeat(2, 1fr); }
    .exec-widget { border: 1px solid var(--nscc-line, #000); break-inside: avoid; }
    .exec-widget--sz-lg,
    .exec-widget--sz-xl { grid-column: span 2; }
    .exec-widget-group { border: 1px solid var(--nscc-line, #000); break-inside: avoid; grid-column: span 2; }
}

/* ── Widget enhancements: collapse, fullscreen, pin, badge, quick-filter,
      refresh indicator, presets — 2026-09-18. ── */

.exec-widget__collapse {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.15rem 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform var(--dur-base, 120ms) var(--ease-out, ease);
}
.exec-widget__collapse:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}
.exec-widget--collapsed .exec-widget__collapse { transform: rotate(-90deg); }
.exec-widget--collapsed .exec-widget__body,
.exec-widget--collapsed .exec-widget__filters { display: none; }
.exec-widget--collapsed { padding-bottom: 0.15rem; }
.exec-widget--collapsed .exec-widget__head {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0.15rem;
}

.exec-widget__expand {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
}
.exec-widget__expand:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

/* 2026-09-30: a widget body waiting to be built (off screen, collapsed or
   hidden) keeps some height so the grid doesn't jump when it fills. */
.exec-widget__body--pending { min-height: 7rem; }
.exec-widget--collapsed .exec-widget__body--pending { min-height: 0; }
.exec-widget__pending {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* More (⋯): Copy / CSV — listed only on widgets that hold a chart, a table
   or KPI tiles — and Show on another dashboard. */
.exec-widget__export-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.exec-widget__export-menu .exec-widget__export-item { display: none; }
.exec-widget--exportable .exec-widget__export-menu .exec-widget__export-item { display: block; }
.exec-widget__from { font-weight: 400; font-size: 0.75em; color: var(--text-muted); }
.exec-widget__export {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    cursor: pointer;
}
.exec-widget__export:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}
.exec-widget__export-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    flex-direction: column;
    min-width: 9rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    z-index: var(--z-popup, 100);
    padding: 3px 0;
}
.exec-widget__export-wrap--open .exec-widget__export-menu { display: flex; }
.exec-widget__export-menu button {
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}
.exec-widget__export-menu button:hover,
.exec-widget__export-menu button:focus-visible { background: var(--bg-hover, rgba(0, 0, 0, 0.05)); }
.nscc-offscreen-copy { position: fixed; left: -9999px; top: 0; opacity: 0; }
/* Move to top / up / down sit first in the ⋯ menu, set off from the rest. */
.exec-widget__export-menu [data-nscc-dash-widgets-move="down"] {
    border-bottom: 1px solid var(--border, #e4e4e7);
    margin-bottom: 2px;
    padding-bottom: 0.4rem;
}

/* Undo after ✕ or Reset layout */
.exec-widget-undo {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: var(--z-toast, 10000);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem 0.6rem 0.5rem 0.9rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
}
.exec-widget-undo__close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.15rem 0.3rem;
}

/* Add widget panel */
.exec-widget-panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 9000);
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: flex-end;
}
.exec-widget-panel__inner {
    width: min(26rem, 100vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    border-left: 1px solid var(--border, #d4d4d8);
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.15);
}
.exec-widget-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem 0.4rem;
}
.exec-widget-panel__head h3 { margin: 0; font-size: 1rem; }
.exec-widget-panel__close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
}
.exec-widget-panel__intro { margin: 0 1rem 0.6rem; font-size: 0.8rem; color: var(--text-muted); }
.exec-widget-panel__find { margin: 0 1rem 0.6rem; }
.exec-widget-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 0 1rem 1rem; }
.exec-widget-panel__list { list-style: none; margin: 0; padding: 0; }
.exec-widget-panel__item label,
.exec-widget-panel__group-head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.55rem;
    align-items: start;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border, #e4e4e7);
    cursor: pointer;
}
.exec-widget-panel__item input,
.exec-widget-panel__group-head input { margin-top: 0.2rem; }
.exec-widget-panel__name { font-weight: 600; font-size: 0.85rem; }
.exec-widget-panel__name em { font-weight: 400; color: var(--text-muted); }
.exec-widget-panel__hint { grid-column: 2; font-size: 0.78rem; color: var(--text-muted); }
.exec-widget-panel__group { margin-top: 0.6rem; }
.exec-widget-panel__group .exec-widget-panel__list { padding-left: 1.2rem; }
.exec-widget-panel__note {
    margin: 0.6rem 0 0;
    padding: 0.45rem 0.6rem;
    border-radius: 4px;
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    font-size: 0.8rem;
}
.exec-widget-panel__roles {
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border, #e4e4e7);
}
.exec-widget-panel__roles h4 { margin: 0 0 0.3rem; font-size: 0.9rem; }
.exec-widget-panel__roles .exec-widget-panel__list { margin-top: 0.5rem; }
.exec-widget-panel__role {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}
.exec-widget-panel__foot {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border, #e4e4e7);
    font-size: 0.8rem;
    color: var(--text-muted);
}
:root.dark .exec-widget__export-menu,
body.dark-theme .exec-widget__export-menu {
    background: #27272a;
    border-color: #3f3f46;
}

.exec-widget__pin {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.15rem 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
}
.exec-widget__pin:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}
.exec-widget__pin--active { color: var(--text-primary); }

.exec-widget__resize {
    border: 1px solid var(--border, #d4d4d8);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.12rem 0.3rem;
    border-radius: 3px;
    cursor: pointer;
    flex: 0 0 auto;
    letter-spacing: 0.02em;
    font-family: inherit;
}
.exec-widget__resize:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    border-color: var(--text-muted);
}

.exec-widget__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}
.exec-widget__badge:empty { display: none; }

.exec-widget__refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.58rem;
    color: var(--text-muted);
    flex: 0 0 auto;
    white-space: nowrap;
}
.exec-widget__refresh-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 0.1rem 0.2rem;
    cursor: pointer;
    border-radius: 3px;
    line-height: 1;
}
.exec-widget__refresh-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}
@keyframes exec-widget-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.exec-widget__refresh--loading .exec-widget__refresh-btn {
    animation: exec-widget-pulse 1.2s ease-in-out infinite;
}

.exec-widget__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3rem 0 0.15rem;
}
.exec-widget__filter-pill {
    font: inherit;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border: 1.5px solid var(--border, #d4d4d8);
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast, 70ms), color var(--dur-fast, 70ms);
}
.exec-widget__filter-pill:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}
.exec-widget__filter-pill--active {
    background: var(--text-primary, #18181b);
    color: var(--text-inverse, #fafafa);
    border-color: var(--text-primary, #18181b);
}

.exec-widget-fullscreen {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 9000);
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: exec-widget-fade-in 120ms ease;
}
@keyframes exec-widget-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.exec-widget-fullscreen__inner {
    background: var(--bg-card, #fff);
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000);
    border-radius: 12px;
    padding: 1rem 1.5rem 1.5rem;
    max-width: 96vw;
    max-height: 92vh;
    overflow: auto;
    width: 100%;
    position: relative;
}
.exec-widget-fullscreen__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    line-height: 1;
}
.exec-widget-fullscreen__close:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}
.exec-widget-fullscreen__title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    padding-right: 2.5rem;
}

.exec-overview-controls__presets {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.exec-sparkline-tooltip {
    position: fixed;
    z-index: var(--z-tooltip, 11000);
    padding: 0.25rem 0.45rem;
    border: 1.5px solid var(--border-strong, #a1a1aa);
    border-radius: 5px;
    background: var(--bg-card, #fff);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 80ms;
}
.exec-sparkline-tooltip--visible { opacity: 1; }
.exec-sparkline__crosshair {
    stroke: var(--text-muted, #52525b);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    pointer-events: none;
}
.exec-sparkline__hover-dot {
    fill: var(--text-primary, #18181b);
    stroke: #fff;
    stroke-width: 1.5;
    pointer-events: none;
}

:root.dark .exec-widget__badge,
body.dark-theme .exec-widget__badge { background: #ef4444; }
:root.dark .exec-widget-fullscreen__inner,
body.dark-theme .exec-widget-fullscreen__inner {
    background: var(--bg-card, #1c1c1b);
    border-color: var(--nscc-line, #ffffff);
}
:root.dark .exec-widget__filter-pill--active,
body.dark-theme .exec-widget__filter-pill--active {
    background: var(--text-primary, #c9c9c7);
    color: var(--bg-card, #1c1c1b);
    border-color: var(--text-primary, #c9c9c7);
}
:root.dark .exec-sparkline-tooltip,
body.dark-theme .exec-sparkline-tooltip {
    background: var(--bg-card, #1c1c1b);
    border-color: var(--border-strong, #52525b);
}

@media print {
    .exec-widget__collapse,
    .exec-widget__expand,
    .exec-widget__export-wrap,
    .exec-widget-undo,
    .exec-widget-panel,
    .exec-widget__pin,
    .exec-widget__badge,
    .exec-widget__filters,
    .exec-widget__refresh,
    .exec-widget-fullscreen,
    .exec-overview-controls__presets { display: none !important; }
    .exec-widget--collapsed .exec-widget__body { display: block; }
    .exec-widget--collapsed .exec-widget__head {
        border-bottom: 1px solid var(--nscc-line, #000);
        margin-bottom: 0.6rem;
    }
}

/* ── Widget highlight: toggle, color picker, highlight states — 2026-09-19 ── */

.exec-widget__highlight-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.exec-widget__highlight-toggle {
    border: 1.5px solid var(--text-muted, #71717a);
    background: none;
    color: var(--text-muted, #71717a);
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
    font-family: inherit;
    transition: color 120ms, border-color 120ms;
}
.exec-widget__highlight-toggle:hover {
    color: var(--text-primary, #18181b);
    border-color: var(--text-primary, #18181b);
}
.exec-widget__color-picker {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    gap: 3px;
    align-items: center;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 4px;
    padding: 3px 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    z-index: var(--z-popup, 100);
    white-space: nowrap;
}
.exec-widget__color-picker--open { display: inline-flex; }
.exec-widget__color-picker::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--border, #d4d4d8);
}
.exec-widget__color-picker::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: var(--bg-card, #fff);
}
.exec-widget__color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    cursor: pointer;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    padding: 0;
    transition: transform 120ms;
}
.exec-widget__color-swatch:hover { transform: scale(1.2); }
.exec-widget__color-swatch--clear {
    background: var(--bg-card, #fff);
    position: relative;
}
.exec-widget__color-swatch--clear::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -1px;
    right: -1px;
    height: 1.5px;
    background: #ef4444;
    transform: rotate(-45deg);
}

/* Yellow highlight */
.exec-widget--hl-y {
    background: #facc15 !important;
    border-color: #eab308 !important;
    --text-primary: #1a1500;
    --text-muted: #6b5300;
    --text-secondary: #6b5300;
    --border: rgba(0, 0, 0, 0.1);
    --bg-hover: rgba(0, 0, 0, 0.08);
}
.exec-widget--hl-y .exec-widget__highlight-toggle { color: rgba(0, 0, 0, 0.45); border-color: rgba(0, 0, 0, 0.35); }
.exec-widget--hl-y .exec-widget__highlight-toggle:hover { color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.6); }
.exec-widget--hl-y .exec-widget__badge { background: rgba(0, 0, 0, 0.15) !important; color: #1a1500 !important; }
.exec-widget--hl-y .nscc-dash-kpi--warn .nscc-dash-kpi__value { color: #b45309 !important; }

/* Red highlight */
.exec-widget--hl-r {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    --text-primary: #fff;
    --text-muted: rgba(255, 255, 255, 0.55);
    --text-secondary: rgba(255, 255, 255, 0.65);
    --border: rgba(255, 255, 255, 0.15);
    --bg-hover: rgba(255, 255, 255, 0.1);
}
.exec-widget--hl-r .exec-widget__highlight-toggle { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.4); }
.exec-widget--hl-r .exec-widget__highlight-toggle:hover { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.7); }
.exec-widget--hl-r .exec-widget__badge { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
.exec-widget--hl-r .nscc-dash-kpi--warn .nscc-dash-kpi__value { color: #fbbf24 !important; }

/* Blue highlight */
.exec-widget--hl-b {
    background: #3b82f6 !important;
    border-color: #2563eb !important;
    --text-primary: #fff;
    --text-muted: rgba(255, 255, 255, 0.55);
    --text-secondary: rgba(255, 255, 255, 0.65);
    --border: rgba(255, 255, 255, 0.15);
    --bg-hover: rgba(255, 255, 255, 0.1);
}
.exec-widget--hl-b .exec-widget__highlight-toggle { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.4); }
.exec-widget--hl-b .exec-widget__highlight-toggle:hover { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.7); }
.exec-widget--hl-b .exec-widget__badge { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
.exec-widget--hl-b .nscc-dash-kpi--warn .nscc-dash-kpi__value { color: #fbbf24 !important; }

/* Green highlight */
.exec-widget--hl-g {
    background: #22c55e !important;
    border-color: #16a34a !important;
    --text-primary: #002a0e;
    --text-muted: #0a4a1e;
    --text-secondary: #0a4a1e;
    --border: rgba(0, 0, 0, 0.08);
    --bg-hover: rgba(0, 0, 0, 0.08);
}
.exec-widget--hl-g .exec-widget__highlight-toggle { color: rgba(0, 0, 0, 0.45); border-color: rgba(0, 0, 0, 0.35); }
.exec-widget--hl-g .exec-widget__highlight-toggle:hover { color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.6); }
.exec-widget--hl-g .exec-widget__badge { background: rgba(0, 0, 0, 0.1) !important; color: #002a0e !important; }
.exec-widget--hl-g .nscc-dash-kpi--warn .nscc-dash-kpi__value { color: #b45309 !important; }

/* Black highlight */
.exec-widget--hl-k {
    background: #18181b !important;
    border-color: #09090b !important;
    --text-primary: #fafafa;
    --text-muted: rgba(255, 255, 255, 0.55);
    --text-secondary: rgba(255, 255, 255, 0.65);
    --border: rgba(255, 255, 255, 0.1);
    --bg-hover: rgba(255, 255, 255, 0.08);
}
.exec-widget--hl-k .exec-widget__highlight-toggle { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.4); }
.exec-widget--hl-k .exec-widget__highlight-toggle:hover { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.7); }
.exec-widget--hl-k .exec-widget__badge { background: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.8) !important; }
.exec-widget--hl-k .nscc-dash-kpi--warn .nscc-dash-kpi__value { color: #fbbf24 !important; }

/* Dark theme: color picker and toggle */
:root.dark .exec-widget__color-picker,
body.dark-theme .exec-widget__color-picker {
    background: #27272a;
    border-color: #3f3f46;
}
:root.dark .exec-widget__color-picker::after,
body.dark-theme .exec-widget__color-picker::after {
    border-bottom-color: #27272a;
}
:root.dark .exec-widget__color-swatch,
body.dark-theme .exec-widget__color-swatch {
    border-color: rgba(255, 255, 255, 0.12);
}
:root.dark .exec-widget__color-swatch--clear,
body.dark-theme .exec-widget__color-swatch--clear {
    background: #27272a;
}
:root.dark .exec-widget__highlight-toggle,
body.dark-theme .exec-widget__highlight-toggle {
    color: var(--text-muted, #9a9aa6);
    border-color: var(--text-muted, #9a9aa6);
}
:root.dark .exec-widget__highlight-toggle:hover,
body.dark-theme .exec-widget__highlight-toggle:hover {
    color: var(--text-primary, #f0f0f2);
    border-color: var(--text-primary, #f0f0f2);
}

@media print {
    .exec-widget__highlight-wrap { display: none !important; }
    .exec-widget--hl-y,
    .exec-widget--hl-r,
    .exec-widget--hl-b,
    .exec-widget--hl-g,
    .exec-widget--hl-k {
        background: #fff !important;
        border-color: var(--nscc-line, #000) !important;
        color: #000 !important;
    }
}

/* Compact Easy/Advanced control for folder-tab strips (Accounting, HR, Payroll,
   Ops). A tiny checkbox with a single "Advanced" label — checked = Advanced (all
   modules), unchecked = Easy. It's a display setting, not a screen to navigate to,
   so it reads as a distinct control pinned to the end of the strip. Replaced the
   older segmented pill (.nscc-mode-switch) per owner request. */
.nscc-mode-check{display:inline-flex;align-items:center;gap:.32rem;margin-left:auto;font-size:.7rem;font-weight:700;color:var(--text-secondary);cursor:pointer;user-select:none;white-space:nowrap;flex:0 0 auto}
.nscc-mode-check--inline{margin-left:.5rem}
/* P-410 (round-83 audit): the control-account override reason field on the
   manual-journal / prior-period-adjustment forms — a class instead of an inline
   style so a new occurrence doesn't trip the no-new-inline-CSS ratchet. */
.nscc-ctl-override-reason{margin-left:.5rem;max-width:16rem}
/* Easy/Advanced checkbox: transparent when unchecked so it takes the theme
   background, accent-filled when checked. Matt 2026-09-12: "even the
   background of check boxes should be clear or theme color not bright white". */
.nscc-mode-check__box{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;border:2px solid var(--border-strong,#a1a1aa);border-radius:4px;background:transparent;cursor:pointer;position:relative;flex:0 0 auto;transition:background .12s,border-color .12s}
.nscc-mode-check__box:checked{background:var(--accent,#2563eb);border-color:var(--accent,#2563eb)}
.nscc-mode-check__box:checked::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.nscc-mode-check__box:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:2px}
.nscc-mode-check__text{line-height:1}
:root.dark .nscc-mode-check__box,body.dark-theme .nscc-mode-check__box{border-color:rgba(148,163,184,.55)}

/* ============================================================
   Hub layouts (Customers / Vendors hubs) and the Employee picker.
   The hub list markup shipped 2026-08-27 with no stylesheet, so every hub
   rendered its whole roster as a run of unstyled buttons across the top.
   ============================================================ */
.nscc-hub-layout {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}
.nscc-hub-layout.nscc-employee-center { grid-template-columns: minmax(0, 1fr); }
.nscc-hub-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 70vh;
    overflow: auto;
    padding: 0.35rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 10px;
    background: var(--bg-card);
    box-sizing: border-box;
}
.nscc-hub-list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.nscc-hub-list-item:hover { background: rgba(0, 0, 0, 0.06); }
.nscc-hub-list-item.active { border-color: var(--nscc-line, #000000); background: var(--bg-page); }
.nscc-hub-list-item strong { font-size: 0.86rem; }
.nscc-hub-list-item span { font-size: 0.7rem; color: var(--text-muted); }
.nscc-hub-detail { min-width: 0; }

.nscc-emp-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.65rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 10px;
    background: var(--bg-card);
    box-sizing: border-box;
}
.nscc-emp-picker__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 50%;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    flex: 0 0 auto;
}
.nscc-emp-picker__who { display: flex; flex-direction: column; min-width: 0; }
.nscc-emp-picker__name {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 800;
    font-size: 1rem;
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}
.nscc-emp-picker__name:hover, .nscc-emp-picker__avatar:hover { filter: brightness(1.08); }
.nscc-emp-picker__meta { font-size: 0.72rem; color: var(--text-muted); }
.nscc-emp-picker__select {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.nscc-emp-picker__select select {
    min-width: 17rem;
    max-width: 100%;
    padding: 0.3rem 0.45rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: 6px;
    background: var(--bg-page, #ffffff);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
}
.nscc-emp-picker__count { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
body.dark-theme .nscc-hub-list,
body.dark-theme .nscc-hub-list-item.active,
body.dark-theme .nscc-emp-picker,
body.dark-theme .nscc-emp-picker__avatar,
body.dark-theme .nscc-emp-picker__select select { border-color: var(--nscc-line, #ffffff); }
body.dark-theme .nscc-hub-list-item:hover { background: rgba(255, 255, 255, 0.08); }

/* Finance toolbars (Statements, Pay profiles …): give the buttons room so a
   taller primary button's bottom border is never clipped by the strip. */
#accounting-view .nscc-finance-toolbar,
#back-office-payroll-panel .nscc-finance-toolbar {
    padding: 0.4rem 0.35rem 0.5rem;
    min-height: 2.8rem;
    row-gap: 0.4rem;
    overflow: visible;
}
#accounting-view .nscc-finance-toolbar .btn,
#back-office-payroll-panel .nscc-finance-toolbar .btn {
    flex: 0 0 auto;
    margin: 0;
    line-height: 1.2;
}

/* Sample-data pointer row on ips — visible-but-disabled so the feature card
   still shows in the Admin Console but is clearly greyed out and inert.
   nsccRenderDemoBuilderAdminUI toggles this class based on
   nsccSeedingAllowed() so it only applies on ips (never dev/qa/demo). */
.nscc-sample-data-disabled {
    opacity: 0.45;
    background: repeating-linear-gradient(
        135deg,
        var(--bg-raised) 0 10px,
        var(--bg-sunken) 10px 20px
    );
    cursor: not-allowed;
}
.nscc-sample-data-disabled .settings-title,
.nscc-sample-data-disabled .settings-description {
    color: var(--text-muted);
}
.nscc-sample-data-disabled button,
.nscc-sample-data-disabled button[disabled] {
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}

/* Generic movable-widgets framework — nscc-dashboard-widgets.js paints a grid
   of .exec-widget cards inside .nscc-dash-widget-mount. The Executive
   Dashboard's own overview grid uses these classes too, so styling stays in
   sync. Matt 2026-09-14: extend the exec-dashboard movable-widget pattern to
   every dashboard, and make sure backgrounds ride the system theme. */
.nscc-dash-widget-mount {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
}
.nscc-dash-widget-mount:empty { display: none; }
/* A chart card served as a widget body (Accounting overview charts): the
   widget already draws the frame and the title, so the card drops its own and
   keeps only the graph-view button. !important beats the dark-theme card
   rules, which are more specific. Not in a tile row (nscc-customize.js),
   where the card is the widget and keeps its frame and title. */
.nscc-dash-widget-mount:where(:not(.nscc-tile-widget-mount)) .exec-widget__body > .nscc-dash-chart-card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.nscc-dash-widget-mount:where(:not(.nscc-tile-widget-mount)) .exec-widget__body > .nscc-dash-chart-card > .nscc-dash-chart-card__head {
    justify-content: flex-end;
    margin-bottom: 0.2rem;
}
.nscc-dash-widget-mount:where(:not(.nscc-tile-widget-mount)) .exec-widget__body > .nscc-dash-chart-card .nscc-dash-chart-card__title { display: none; }
/* "Move widgets below" — the mount now follows the screen's content, so the gap
   goes on top. !important beats the inline margin-bottom each screen writes. */
.nscc-dash-widget-mount.nscc-dash-widget-mount--below {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
}
.nscc-dash-widget-mount .exec-overview-widgets {
    gap: 0.65rem;
}
/* When a dashboard renders a widget mount + its own legacy KPI grid below,
   drop the mount's bottom margin so the two areas don't stack twice. */
.nscc-dash-widget-mount .exec-overview-widgets:last-child { margin-bottom: 0; }
/* The .exec-widget-group__body is a grid — inside the mount, keep it flexible. */
.nscc-dash-widget-mount .exec-widget-group__body {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Themed background on the widget cards. .exec-widget already uses
   transparent + var(--border) tokens in styles.css above, but we belt-and-brace
   the fallback here for tinted rungs whose --bg-raised is a colored surface —
   the widgets stay legible without over-riding the exec dashboard's own look. */
.nscc-dash-widget-mount .exec-widget {
    background: var(--bg-raised, transparent);
    color: var(--text-primary);
}
.nscc-dash-widget-mount .exec-widget-group {
    background: var(--bg-raised, var(--bg-card, #fff));
    color: var(--text-primary);
}
/* Reset the nscc-dash-kpi color inheritance so widget bodies stay readable
   on the themed card behind them — a tinted rung's --bg-card can be a mid
   tone; the kpi text token is the source of truth. Not in a tile row
   (nscc-customize.js), where the tile itself is the widget and keeps its
   own look. */
.nscc-dash-widget-mount:where(:not(.nscc-tile-widget-mount)) .nscc-dash-kpi {
    color: var(--text-primary);
    background: var(--bg-card);
}


/* Access Review: people holding roles who are not on the personnel roster.
   A class rather than an inline style, so the CSP ratchet
   (scripts/verify-no-new-inline-csp.mjs) can keep counting down toward dropping
   unsafe-inline from hosting/firebase.json. */
.nscc-ar-off-roster { color: #b42318; }

/* Access Review → Control exceptions: unreviewed badge, filter, review status and the
   small review dialog (assets/nscc-access-review.js). Classes, not inline styles —
   same CSP ratchet as above. */
.nscc-ar-ce-badge { display: inline-block; margin-left: 0.5rem; padding: 1px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; vertical-align: middle; background: var(--bg-muted, #e5e7eb); color: var(--text-secondary, #374151); }
.nscc-ar-ce-badge--open { background: #fde68a; color: #8a5a00; }
.nscc-ar-ce-filter { margin: 0 0 0.5rem; }
.nscc-ar-ce-status { font-size: 0.76rem; font-weight: 700; }
.nscc-ar-ce-status--open { color: #8a5a00; }
.nscc-ar-ce-status--ok { color: #1a7f52; }
.nscc-ar-ce-status--follow { color: #b42318; }
.nscc-ar-ce-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 42, 0.55); }
.nscc-ar-ce-dialog { width: 100%; max-width: 30rem; padding: 1.25rem 1.35rem; border-radius: 10px; background: var(--bg-card, #fff); color: var(--text-primary, #0f172a); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.nscc-ar-ce-dialog-title { margin: 0 0 0.5rem; font-size: 1.05rem; }
.nscc-ar-ce-dialog-what { margin: 0 0 0.75rem; font-size: 0.85rem; }
.nscc-ar-ce-dialog-label { display: block; margin: 0.5rem 0 0.25rem; font-size: 0.8rem; font-weight: 600; }
.nscc-ar-ce-dialog-input { width: 100%; box-sizing: border-box; font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; }
.nscc-ar-ce-dialog-error { min-height: 1em; margin: 0.5rem 0 0; font-size: 0.8rem; color: #b42318; }
.nscc-ar-ce-dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }

/* ==========================================================================
   MODAL FOLDER TABS = MAIN-SCREEN FOLDER TABS, IN A FIXED-SIZE FRAME
   (Matt 2026-09-27: "make sure that modals with folder tabs the folder tabs
   have the same look as the main screens. also when a modal opens and has
   multiple sized folder tabs the outside modal screen changes size and this
   can be very distracting. make sure the outside size can handle all of the
   screen sizes.")

   1. Look. Every modal tab strip uses the shared nscc-erp-tabs /
      nscc-erp-tab-btn markup (Trip Details, Person detail, Admin Console,
      System Configuration), so the shape, colours, type and two-row height
      come from the same rules as the main screens. Two things still made them
      read differently:
        - Admin Console / System Configuration tabs stretched to share the
          whole row (up to ~200px wide each). They keep one uniform width —
          the 2026-09-12 ask — but at a folder-tab size, not a full-row share
          (edited in place, in the "Uniform tab width" rule above).
        - On the dark themes the main-screen strip outlines every tab in white
          (an id-scoped rule in the "Folder tabs: bold black (white in dark)"
          block), while modal tabs fell back to the theme's grey
          --border-strong. They now take the same white outline.
   2. Size. A tabbed modal (.modal-content.nscc-modal-tabbed) has ONE width
      and ONE height whichever tab is open: the frame is a flex column, the
      header and strip keep their natural height, and the tab panel
      (.nscc-modal-tabbed__panel) takes the rest and scrolls inside itself.
      Both dimensions clamp to the viewport (0.75rem gutter each side) so the
      same frame fits a phone, a laptop and a wall display. Set per modal with
      --nscc-tabbed-modal-w / --nscc-tabbed-modal-h.
   The Admin Console and System Configuration are already full-screen (fixed
   100vw x 100vh), so their outer size never moved.
   ========================================================================== */
.modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 860px;
    --nscc-tabbed-modal-h: 640px;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: min(var(--nscc-tabbed-modal-w), calc(100vw - var(--nscc-modal-inset-left, 0px) - 1.5rem)) !important;
    max-width: calc(100vw - var(--nscc-modal-inset-left, 0px) - 1.5rem) !important;
    height: min(var(--nscc-tabbed-modal-h), calc(100vh - 1.5rem)) !important;
    height: min(var(--nscc-tabbed-modal-h), calc(100dvh - 1.5rem)) !important;
    max-height: calc(100vh - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.modal .modal-content.nscc-modal-tabbed > * {
    flex: 0 0 auto;
}
.modal .modal-content.nscc-modal-tabbed > .nscc-modal-tabbed__panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}
/* Trip Details: the 640px-wide window it always had, now at one height. */
#trip-details-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 640px;
    --nscc-tabbed-modal-h: 560px;
}
/* Person detail. */
#person-detail-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 860px;
    --nscc-tabbed-modal-h: 600px;
}
#person-detail-modal .nscc-person-modal-tabs.nscc-erp-tabs {
    margin: 0.65rem 0 0;
}
#person-detail-modal .nscc-modal-tabbed__panel {
    padding-top: 0.65rem;
}

/* Dark themes: white tab outlines, exactly like #nscc-chrome-folder-tabs.
   body:not(#_) supplies the id-level specificity the themed surface layer
   (shared-tokens.css) uses, so this wins over its --border-strong outline. */
:root.dark body:not(#_) .modal .nscc-erp-tabs .nscc-erp-tab-btn,
body.dark-theme:not(#_) .modal .nscc-erp-tabs .nscc-erp-tab-btn {
    border-color: #ffffff !important;
}
:root.dark body:not(#_) .modal .nscc-erp-tabs .nscc-erp-tab-btn.active,
body.dark-theme:not(#_) .modal .nscc-erp-tabs .nscc-erp-tab-btn.active {
    border-bottom-color: var(--chrome-folder-panel-bg, var(--bg-card)) !important;
}

/* ==========================================================================
   NO MODAL UNDER THE LEFT MENU (Matt 2026-09-27: "no modals should show under
   the left menu. that is too wide for example the admin console")
   With the left rail on (html.nscc-left-nav), every modal / dialog overlay
   starts at the rail's right edge instead of the viewport's left edge, so
   the rail stays visible and usable and a full-screen window (System
   Configuration, ERP Invoices, a widget blown up to full screen) is only as
   wide as the work area — the same rule the full-screen product views
   already follow (.view-section.nscc-view-fs, left: --nscc-app-nav-rail).
   Overlays built in JS with an inline `inset: 0` are covered too: a
   stylesheet !important beats a non-important inline style. Overlays with
   no stable id or class carry .nscc-overlay-scrim. Sizes that were written
   against the whole viewport subtract --nscc-modal-inset-left
   (.nscc-modal-tabbed above); nsccOpenModal (nscc-perf.js) places
   click-positioned windows inside the overlay's box, not the viewport's.
   The expanded flyout still opens over the work area as it always has.
   ========================================================================== */
html.nscc-left-nav {
    --nscc-modal-inset-left: var(--nscc-app-nav-rail, 48px);
}
html.nscc-left-nav .modal,
html.nscc-left-nav .nscc-offer-sign-overlay,
html.nscc-left-nav .nscc-int-modal-host,
html.nscc-left-nav .nscc-portal-pay-modal,
html.nscc-left-nav .exec-widget-fullscreen,
html.nscc-left-nav .nscc-rev-overlay,
html.nscc-left-nav .nscc-share-overlay,
html.nscc-left-nav .nscc-overlay-scrim,
html.nscc-left-nav .nscc-invoice-table-wrap.nscc-inv-fullscreen,
html.nscc-left-nav #nscc-email-preview-modal,
html.nscc-left-nav #worm-detail-modal,
html.nscc-left-nav #nscc-watchtower-detail-modal,
html.nscc-left-nav #nscc-spreadsheet-source-modal,
html.nscc-left-nav #ledger-integrity-modal,
html.nscc-left-nav #employee-card-modal,
html.nscc-left-nav #patrol-site-modal {
    left: var(--nscc-modal-inset-left) !important;
    right: 0 !important;
    /* index.html's inline <style> pins .modal to width: 100vw. */
    width: auto !important;
    max-width: none !important;
}

/* Admin Console screen (#admin-console-view). Its top-level tabs are parked
   in the chrome folder-tab strip; the sub-tab strip and the sections read as
   an ordinary work-area screen, like Accounting. */
#admin-console-view .nscc-admin-console__content {
    padding: 0.75rem 1rem 1.5rem;
    box-sizing: border-box;
    max-width: 100%;
}
#admin-console-view .nscc-admin-modal-subtabs {
    margin: 0 0 0.75rem;
}
/* Parked Admin Console tabs keep one uniform width (Matt 2026-09-12: "make
   all of the menus and menu tabs in administrative console the same size as
   the first tab"). 7.5rem fits every label, including "System Configuration" in
   the bold selected weight, on two lines; the shared 5.75rem cap did not. */
#nscc-chrome-folder-tabs .nscc-admin-modal-tabs .nscc-erp-tab-btn {
    flex: 0 0 7.5rem !important;
    width: 7.5rem !important;
    min-width: 7.5rem !important;
    max-width: 7.5rem !important;
}

/* BANNER CLOCK (assets/nscc-banner-widgets.js, 2026-09-27). The clock is a
   widget like the others: clicking it opens its style picker. Its "No clock"
   style sets [hidden] on the host, which the brand-row display:flex rule used
   to override — leaving an empty box in the banner. */
html body:not(#_) #nscc-header-clock-host[data-bw] { cursor: pointer; }
html body:not(#_) #nscc-header-clock-host[hidden],
.nscc-chrome-brand-row #nscc-header-clock-host[hidden] {
    display: none !important;
}

/* The tile rows' own in-tile controls (.nscc-tw-*, assets/nscc-customize.js,
   2026-09-27) were removed 2026-10-05: every tile row is a widget area on the
   shared framework or a box grid inside a widget now. */

/* Dispatch ops strip (assets/nscc-ops-widgets.js): S/M/L/XL resize and
   keyboard access to ☰ / ✕ (2026-09-27, Controls standard). */
.nscc-ops-tile__size {
    position: absolute; top: -5px; right: 12px;
    min-width: 14px; height: 14px; padding: 0 2px; line-height: 1;
    font: inherit; font-size: 0.55rem; font-weight: 800;
    border: 1.5px solid var(--border, var(--nscc-line, #000)); border-radius: 7px;
    background: var(--bg-card, #f7f3ea); color: var(--text-muted, #5c5648);
    cursor: pointer; opacity: 0; transition: opacity 0.1s ease;
}
.nscc-ops-tile-wrap:hover .nscc-ops-tile__size,
.nscc-ops-tile-wrap:focus-within .nscc-ops-tile__size,
.nscc-ops-tile-wrap:focus-within .nscc-ops-tile__hide,
.nscc-ops-tile-wrap:focus-within .nscc-ops-tile__handle { opacity: 1; }
@media (hover: none) {
    .nscc-ops-tile__size { opacity: 1; }
}
.nscc-ops-tile-wrap--md .nscc-ops-tile { min-width: 176px; }
.nscc-ops-tile-wrap--lg .nscc-ops-tile { min-width: 264px; }
.nscc-ops-tile-wrap--xl .nscc-ops-tile { min-width: 352px; }

/* 2026-09-30: the Operations strip on the shared widget framework (scope
   'ops-<screen>', variant 'compact'). Same one-row strip and tile look as
   before: each tile's ☰ / size / ⋯ / ✕ appear on hover over its corner, and
   the widget bar folds into a "Widgets" menu at the end of the row. */
.nscc-ops-strip .nscc-ops-widget-mount {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* Shares the row with the action buttons and the ▲ toggle (a widget
       mount is otherwise a full-width block). */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0 !important;
}
.nscc-dash-widget-mount .exec-overview-widgets.nscc-dash-widgets-grid--compact,
.exec-overview-widgets.nscc-dash-widgets-grid--compact {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
.exec-widget.exec-widget--compact {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.exec-widget--compact .exec-widget__body { min-height: 0; }
.exec-widget--compact .exec-widget__body--pending { min-height: 2.4rem; min-width: 88px; }
.exec-widget--compact .exec-widget__pending { padding: 0.5rem; }
.exec-widget--compact .exec-widget__head {
    position: absolute;
    top: -7px;
    left: -5px;
    right: -5px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}
.exec-widget--compact:hover .exec-widget__head,
.exec-widget--compact:focus-within .exec-widget__head { opacity: 1; }
.exec-widget--compact .exec-widget__head > * { pointer-events: auto; }
.exec-widget--compact .exec-widget__handle,
.exec-widget--compact .exec-widget__resize,
.exec-widget--compact .exec-widget__export,
.exec-widget--compact .exec-widget__expand,
.exec-widget--compact .exec-widget__hide {
    height: 14px;
    min-width: 14px;
    padding: 0 3px;
    font-size: 0.55rem;
    line-height: 11px;
    border: 1.5px solid var(--border, var(--nscc-line, #000));
    border-radius: 3px;
    background: var(--bg-card, #f7f3ea);
    color: var(--text-muted, #5c5648);
}
.exec-widget--compact .exec-widget__handle { margin-right: auto; }
@media (hover: none) {
    .exec-widget--compact .exec-widget__head { opacity: 1; }
}
.exec-widget--compact.exec-widget--sz-md .nscc-ops-tile { min-width: 176px; }
.exec-widget--compact.exec-widget--sz-lg .nscc-ops-tile { min-width: 264px; }
.exec-widget--compact.exec-widget--sz-xl .nscc-ops-tile { min-width: 352px; }

/* 2026-10-01: the tile rows (nscc-customize.js) on the shared widget
   framework. The grid element is the mount; its own grid classes moved to
   the widget grid inside, which stays a grid (not the compact strip's flex
   row) so the tiles keep their columns and S/M/L/XL spans them. The tile is
   the card: the widget around it draws nothing, and its ☰ / size / ⋯ / ⛶ / ✕
   show on hover over the tile's corner, as on the Operations strip. */
.nscc-dash-widget-mount.nscc-tile-widget-mount {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.nscc-dash-widget-mount.nscc-tile-widget-mount > .exec-overview-widgets.nscc-dash-widgets-grid--compact {
    display: grid !important;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
}
.nscc-tile-widget-mount .exec-widget.exec-widget--compact {
    display: flex;
    min-width: 0;
}
.nscc-tile-widget-mount .exec-widget--compact > .exec-widget__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}
.nscc-tile-widget-mount .exec-widget--compact > .exec-widget__body > .nscc-dash-kpi,
.nscc-tile-widget-mount .exec-widget--compact > .exec-widget__body > .nscc-dash-chart-card {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}
.nscc-tile-widget-mount .exec-widget.nscc-tile-widget--anchor { grid-column: 1 / -1; }
.nscc-tile-widget-mount .exec-widget__body > .nscc-dash-kpi.nscc-tw-static { cursor: default; }
.nscc-tile-widget-mount .exec-widget__body > .nscc-dash-kpi.nscc-tw-static:hover { transform: none; }
.nscc-tile-widget-mount > .exec-overview-controls--compact { margin-top: 0.15rem; }
/* The row's own columns and gap (shared-tokens.css), over the dashboards'
   four-column widget grid. */
.nscc-dash-widget-mount.nscc-tile-widget-mount > .exec-overview-widgets.nscc-dash-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--nscc-gap, 0.4rem);
}
.nscc-dash-widget-mount.nscc-tile-widget-mount > .exec-overview-widgets.nscc-finance-cards {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}
.nscc-dash-widget-mount.nscc-tile-widget-mount > .exec-overview-widgets.nscc-dash-chart-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--nscc-gap, 0.4rem);
}
.exec-overview-controls.exec-overview-controls--compact {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: none;
}
.exec-overview-controls--compact > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    border: 1.5px solid transparent;
    border-radius: 5px;
    color: var(--text-muted, #5c5648);
    white-space: nowrap;
}
.exec-overview-controls--compact > summary::-webkit-details-marker { display: none; }
.exec-overview-controls--compact > summary::after { content: ' \25BE'; }
.exec-overview-controls--compact > summary:hover { color: var(--text-primary, #111); border-color: var(--border, var(--nscc-line, #000)); }
.exec-overview-controls--compact > .exec-overview-controls__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: var(--z-popup, 100);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 15rem;
    padding: 0.6rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.exec-overview-controls--compact .exec-overview-controls__hint { display: none; }
/* Cards that draw their own title (variant 'framed'): the widget title is
   for screen readers only, and the card is the frame. */
.exec-widget__title--sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.exec-widget.exec-widget--framed {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.exec-widget--framed .exec-widget__head {
    justify-content: flex-end;
    margin: 0 0 0.2rem;
    padding: 0;
    border-bottom: none;
}

/* Hire wizard: the Social Security number field (the SSN vault's capture row).
   Classes rather than inline styles, for the same CSP ratchet as above. */
.nscc-hw-ssn-field { display: flex; flex-direction: column; gap: 0.25rem; }
.nscc-hw-ssn-gap { margin-bottom: 0.6rem; }
.nscc-hw-ssn-confirm { margin-top: 0.35rem; }
.nscc-hw-ssn-label { font-size: 0.78rem; font-weight: 600; }
.nscc-hw-ssn-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nscc-hw-ssn-note { font-size: 0.72rem; color: var(--text-secondary); }
.nscc-hw-ssn-hint { margin-top: 0.3rem; }

/* Employee portal → Direct deposit: up to four account slots (nscc-employee-portal.js
   ddSlotHtml). Slots are shown / hidden in place, so [hidden] must win over any
   display rule a theme puts on fieldsets or labels. */
.nscc-emp-dd-slot { border: 1px solid var(--border-color, #d0d7de); border-radius: 8px; padding: 0.6rem 0.8rem 0.7rem; margin: 0 0 0.75rem; }
.nscc-emp-dd-slot > legend { font-weight: 700; font-size: 0.85rem; padding: 0 0.3rem; }
.nscc-emp-dd-slot[hidden], .nscc-emp-dd-value[hidden], #nscc-emp-dd-add[hidden] { display: none !important; }
.nscc-emp-dd-onfile { margin: 0 0 0.5rem; font-weight: 600; }
.nscc-emp-dd-alloc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; margin-top: 0.5rem; }
.nscc-emp-dd-alloc > label { display: flex; flex-direction: column; gap: 0.2rem; min-width: 10rem; }
.nscc-dd-split-list { margin: 0.35rem 0 0 1.1rem; padding: 0; font-size: 0.85rem; }

/* Field Payroll — possible double pay (clocked in while running flat-rate trips).
   Red status frame, theme surface behind it; Post pay stays locked until __ack is ticked. */
.nscc-fp-fraud {
    margin: 0.5rem 0 0.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--status-unassigned-ink, #bf2419);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
}
.nscc-fp-fraud__title { margin: 0 0 0.3rem; font-size: 0.9rem; font-weight: 700; color: var(--status-unassigned-ink, #bf2419); }
.nscc-fp-fraud__hint { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--text-secondary); }
.nscc-fp-fraud__ack { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.55rem; font-size: 0.8rem; font-weight: 600; }
.nscc-fp-note { margin: 0.35rem 0 0.6rem; font-size: 0.78rem; color: var(--text-secondary); }

/* I-9 badge section dates (nsccHrI9Badge) — shown in every Easy/Advanced mode. */
.nscc-i9-why { display: block; font-size: 0.68rem; margin-top: 0.15rem; }

/* Master Data > Personnel list (app-master-data.js RenderMasterPersonnelView).
   The shell carries .md-pl plus one of .md-pl--s / --m / --l — the A A A text-size
   control — and every size below is multiplied by --md-pl-k, so text, buttons and
   column widths scale together. Medium is the designed size. Selectors lead with
   .master-data-shell--bo-connect.md-pl so they outrank the shared master-data
   table rules (which top-align cells with !important). No inline styles: see
   scripts/verify-no-new-inline-csp.mjs. */
.md-pl { --md-pl-k: 1; }
.md-pl--s { --md-pl-k: 0.85; }
.md-pl--l { --md-pl-k: 1.15; }
.master-data-shell--bo-connect.md-pl .master-data-table td { vertical-align: middle !important; }
.master-data-shell--bo-connect.md-pl .md-pl-td { padding: 0.5rem 0.7rem; border-top: 1px solid var(--border); }
.master-data-shell--bo-connect.md-pl .md-person-name { font-size: calc(0.9rem * var(--md-pl-k)); }
.master-data-shell--bo-connect.md-pl .md-person-title-line { font-size: calc(0.76rem * var(--md-pl-k)); }
.master-data-shell--bo-connect.md-pl .md-pl-text {
    font-size: calc(0.76rem * var(--md-pl-k));
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.master-data-shell--bo-connect.md-pl .md-pl-text--email { max-width: calc(240px * var(--md-pl-k)); }
.master-data-shell--bo-connect.md-pl .md-pl-text--phone { max-width: calc(140px * var(--md-pl-k)); }
.master-data-shell--bo-connect.md-pl .md-pl-text--id { max-width: calc(120px * var(--md-pl-k)); }
/* One control size for every button in a row. */
.master-data-shell--bo-connect.md-pl .md-pl-ctl {
    box-sizing: border-box;
    height: calc(30px * var(--md-pl-k));
    margin: 0;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: calc(0.8rem * var(--md-pl-k));
    background: transparent;
}
.master-data-shell--bo-connect.md-pl .md-pl-notes {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    width: calc(200px * var(--md-pl-k));
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.master-data-shell--bo-connect.md-pl .md-pl-notes-count { font-weight: 800; color: var(--brand-light); flex-shrink: 0; }
.master-data-shell--bo-connect.md-pl .md-pl-notes-preview { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Actions sit side by side so a second button widens the cell, never the row. */
.master-data-shell--bo-connect.md-pl .md-pl-actions { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; }
.master-data-shell--bo-connect.md-pl .md-pl-act { display: block; flex: 0 0 auto; width: calc(92px * var(--md-pl-k)); font-weight: 700; }
.master-data-shell--bo-connect.md-pl .md-pl-act--deactivate { color: #FF9500; }
.master-data-shell--bo-connect.md-pl .md-pl-act--reactivate,
.master-data-shell--bo-connect.md-pl .md-pl-act--rehire { color: #34C759; }
.master-data-shell--bo-connect.md-pl .md-pl-act--terminate { color: #FF3B30; }
.master-data-shell--bo-connect.md-pl .md-pl-act-note {
    display: block;
    line-height: calc(30px * var(--md-pl-k));
    font-size: calc(0.75rem * var(--md-pl-k));
    color: var(--text-muted);
}
/* Toolbar: Sort by + the A A A text-size buttons. */
.md-pl-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}
.md-pl-sort select.form-control-panel { height: 32px; width: auto; padding: 0 0.5rem; font-size: 0.8rem; }
.md-pl-size { display: inline-flex; align-items: center; gap: 2px; }
.md-pl-size .md-pl-size-btn {
    height: 32px;
    min-width: 28px;
    margin: 0;
    padding: 0 0.35rem;
    font-weight: 800;
    line-height: 1;
    background: transparent;
    color: var(--text-primary);
}
.md-pl-size .md-pl-size-btn[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-card); }
.md-pl-size .md-pl-size-btn--s { font-size: 0.7rem; }
.md-pl-size .md-pl-size-btn--m { font-size: 0.85rem; }
.md-pl-size .md-pl-size-btn--l { font-size: 1.05rem; }

/* Person-detail modal (assets/nscc-person-modal.js): HR record button and the
   editable Overview rows (phone, alt email). */
#person-detail-modal .nscc-person-modal-hr { align-self: center; }
#person-detail-modal .nscc-person-modal-hr[hidden] { display: none !important; }
#person-detail-modal .nscc-person-modal-edit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
#person-detail-modal .nscc-person-modal-edit-row > label {
    width: 170px;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
#person-detail-modal .nscc-person-modal-edit-row > input { max-width: 280px; height: 32px; }
/* Change name… (personRename): the header button and its small dialog. Classes, not
   inline styles — the CSP ratchet (scripts/verify-no-new-inline-csp.mjs). */
#person-detail-modal .nscc-person-modal-rename { align-self: center; white-space: nowrap; }
#person-detail-modal .nscc-person-modal-rename[hidden] { display: none !important; }
#person-detail-modal .nscc-person-modal-rename-note { align-self: center; max-width: 15rem; margin: 0; font-size: 0.78rem; line-height: 1.3; }
#person-detail-modal .nscc-person-modal-rename-note[hidden] { display: none !important; }
.nscc-person-rename-modal .nscc-person-rename-dialog { max-width: 30rem; }
.nscc-person-rename-current { margin: 0 0 0.75rem; font-size: 0.9rem; }
.nscc-person-rename-label { display: block; margin: 0.6rem 0 0.25rem; font-size: 0.82rem; font-weight: 600; }
.nscc-person-rename-input { display: block; width: 100%; box-sizing: border-box; }
.nscc-person-rename-note { margin: 0.75rem 0 0; font-size: 0.8rem; }
.nscc-person-rename-confirm { margin: 0.75rem 0 0; padding: 0.5rem 0.65rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; background: var(--bg-sunken, #f1f5f9); border: 1px solid var(--border-strong, #94a3b8); }
.nscc-person-rename-confirm[hidden] { display: none; }
.nscc-person-rename-error { min-height: 1em; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--danger, #b42318); }
.nscc-person-rename-error:empty { display: none; }
.nscc-person-rename-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
/* System Configuration → Company profile fields added without inline styles. */
.nscc-syscfg-field { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 0.45rem; }
.nscc-syscfg-field select, .nscc-syscfg-field input { display: block; width: 100%; margin-top: 0.2rem; text-transform: none; font-weight: 600; letter-spacing: 0; min-height: 1.9rem; }
.nscc-syscfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1rem; }
/* System Configuration → Beacon AI usage (nscc-system-config.js renderBeaconAi). */
.nscc-syscfg-subhead { margin: 1rem 0 0.4rem; font-size: 0.9rem; font-weight: 700; }
.nscc-syscfg-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.nscc-syscfg-table th, .nscc-syscfg-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--nscc-line, #e4e4e7); text-align: left; }
.nscc-syscfg-table th:not(:first-child), .nscc-syscfg-table td:not(:first-child) { text-align: right; }
.nscc-beacon-ai-progress { width: 100%; height: 0.6rem; margin: 0.4rem 0; accent-color: #2563eb; }
.nscc-syscfg-section-gap { margin-top: 0.9rem; }
/* System Configuration → Company: the jump list to its sections. */
.nscc-syscfg-jump { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.55rem 0 0.2rem; }
.nscc-syscfg-jump__link { font-size: 0.62rem; font-weight: 700; padding: 0.2rem 0.55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.nscc-syscfg-jump__link:hover, .nscc-syscfg-jump__link:focus-visible { color: var(--text-primary); border-color: var(--text-secondary); }
[id^="syscfg-co-"], #syscfg-industry-profile, #syscfg-departments, #syscfg-data-retention { scroll-margin-top: 4.5rem; }
/* System Configuration → Payroll & Labor Law (nscc-system-config.js PLAW_TOPICS). */
.nscc-plaw-setting { margin: 0.5rem 0 0.75rem; padding: 0.55rem 0.75rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
.nscc-plaw-setting__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; }
.nscc-plaw-setting__title { font-size: 0.78rem; color: var(--text-primary); }
.nscc-plaw-cite { font-size: 0.62rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-sunken, rgba(127, 127, 127, 0.12)); border-radius: 999px; padding: 0.05rem 0.45rem; }
.nscc-plaw-setting__why { font-size: 0.68rem; line-height: 1.45; color: var(--text-secondary); margin: 0.3rem 0 0.1rem; }
.nscc-plaw-setting__meta { font-size: 0.62rem; line-height: 1.45; color: var(--text-muted); margin: 0.45rem 0 0; }
.nscc-plaw-check input[type="checkbox"] { display: inline-block; width: auto; min-height: 0; margin: 0 0.35rem 0 0; vertical-align: middle; }
.nscc-plaw-open { font-weight: 700; color: var(--status-pending-ink, #975400); }
.nscc-plaw-note { font-size: 0.65rem; line-height: 1.45; color: var(--text-muted); margin: 0.4rem 0; }
.nscc-plaw-errors { margin: 0.6rem 0 0; padding: 0.5rem 0.7rem; border: 1px solid var(--status-error-ink, #b42318); border-left-width: 4px; border-radius: 6px; font-size: 0.7rem; color: var(--status-error-ink, #b42318); background: var(--bg-card); }
.nscc-plaw-toolbar { margin-top: 0.75rem; }
/* Payroll → Tax Setup: tax rates and effective dates (nscc-tax-rate-history.js) */
.nscc-taxrate-panel { margin-bottom: 1.25rem; }
.nscc-taxrate-intro { font-size: 0.72rem; color: var(--text-muted); margin: 0.25rem 0 0.6rem; line-height: 1.45; }
.nscc-taxrate-alert { font-size: 0.74rem; font-weight: 700; color: var(--warning, #b45309); margin: 0.4rem 0; }
.nscc-taxrate-h { font-size: 0.78rem; font-weight: 800; margin: 0.9rem 0 0.35rem; }
.nscc-taxrate-sub { font-size: 0.62rem; color: var(--text-muted); margin-top: 0.1rem; }
.nscc-taxrate-chip { display: inline-block; font-size: 0.62rem; font-weight: 800; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--surface-2, #eef2f7); }
.nscc-taxrate-chip--ready { background: #dcfce7; color: #166534; }
.nscc-taxrate-chip--due { background: #fee2e2; color: #991b1b; }
.nscc-taxrate-chip--entered { background: #fef3c7; color: #92400e; }
.nscc-taxrate-current td { font-weight: 700; }
.nscc-taxrate-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; align-items: end; }
.nscc-taxsignoff { margin-bottom: 1rem; }
.nscc-taxsignoff-year { border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 0.55rem 0.7rem; margin: 0.45rem 0; font-size: 0.74rem; }
.nscc-taxsignoff-year--todo { border-color: var(--warning, #b45309); }
.nscc-taxsignoff-year--ok { border-color: #86efac; }
.nscc-taxsignoff-list { margin: 0.2rem 0 0.4rem 1.1rem; font-size: 0.68rem; }
.nscc-taxsignoff-confirm { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.7rem; margin: 0.5rem 0; line-height: 1.4; }
.nscc-taxnews-disclaimer { font-size: 0.66rem; color: var(--text-muted); margin: 0 0 0.45rem; line-height: 1.4; }
.nscc-taxnews-h { font-size: 0.7rem; font-weight: 800; margin: 0.5rem 0 0.25rem; }
.nscc-taxnews-item { font-size: 0.72rem; margin: 0 0 0.45rem; line-height: 1.4; }
.nscc-taxnews-chip { display: inline-block; font-size: 0.6rem; font-weight: 800; padding: 0.02rem 0.4rem; border-radius: 999px; margin-right: 0.3rem; }
.nscc-taxnews-chip--official { background: #dcfce7; color: #166534; }
.nscc-taxnews-chip--notfinal { background: #fef3c7; color: #92400e; }
.nscc-taxnews-domain { font-size: 0.62rem; color: var(--text-muted); }
.nscc-syscfg-field__hint { display: block; font-size: 0.58rem; font-weight: 500; text-transform: none; letter-spacing: 0; margin-top: 0.1rem; }
/* Field Payroll — work not paid on this run (no rate / no hours / held). */
.nscc-fp-unpaid { margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid var(--status-pending-ink, #975400); border-left-width: 4px; border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
.nscc-fp-unpaid__title { margin: 0 0 0.3rem; font-size: 0.9rem; font-weight: 700; color: var(--status-pending-ink, #975400); }

/* Payroll → Tax Setup → Regulatory sources (assets/nscc-regulatory-watch.js). */
.nscc-regwatch { margin: 0 0 1.25rem; }
.nscc-regwatch-toolbar { align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nscc-regwatch-summary { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-right: auto; }
.nscc-regwatch-h { margin: 0.9rem 0 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.nscc-regwatch-empty { margin: 0.3rem 0 0.6rem; font-size: 0.8rem; color: var(--text-secondary); }
.nscc-regwatch-msg { margin: 0.4rem 0; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.78rem; background: var(--bg-card); border: 1px solid var(--border-color, #d0d7de); color: var(--text-primary); }
.nscc-regwatch-msg--error { border-color: var(--status-unassigned-ink, #bf2419); color: var(--status-unassigned-ink, #bf2419); }
.nscc-regwatch-sub { font-size: 0.7rem; color: var(--text-secondary); margin-top: 0.15rem; }
.nscc-regwatch-dash-list { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.78rem; }
.nscc-regwatch-dash-list li { padding: 0.25rem 0; border-top: 1px solid var(--border-color, #d0d7de); }
.nscc-regwatch-syscfg-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: 0.6rem; }
.nscc-regwatch-table td { vertical-align: top; }
.nscc-regwatch-actions { white-space: nowrap; }
.nscc-regwatch-review { min-width: 14rem; }
.nscc-regwatch-review .nscc-regwatch-input { display: block; width: 100%; margin-bottom: 0.3rem; }
.nscc-regwatch-input { min-height: 1.8rem; font-size: 0.78rem; }
.nscc-regwatch-link { font-size: 0.75rem; font-weight: 600; }
.nscc-regwatch-hash { font-family: monospace; font-size: 0.72rem; }
.nscc-regwatch-row--focus { outline: 2px solid var(--status-pending-ink, #975400); outline-offset: -2px; }
.nscc-regwatch-chip { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; border: 1px solid var(--border-color, #d0d7de); color: var(--text-primary); background: var(--bg-card); }
.nscc-regwatch-chip--changed, .nscc-regwatch-chip--unreachable, .nscc-regwatch-chip--source_unreachable { border-color: var(--status-unassigned-ink, #bf2419); color: var(--status-unassigned-ink, #bf2419); }
.nscc-regwatch-chip--first_capture, .nscc-regwatch-chip--not-checked-yet { border-color: var(--status-pending-ink, #975400); color: var(--status-pending-ink, #975400); }
.nscc-regwatch-edit td, .nscc-regwatch-history td { background: var(--bg-card); }
.nscc-regwatch-add, .nscc-regwatch-edit td { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.nscc-regwatch-add { margin: 0.5rem 0; padding: 0.6rem; border: 1px solid var(--border-color, #d0d7de); border-radius: 6px; }
.nscc-regwatch-field { display: flex; flex-direction: column; font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); min-width: 12rem; }
.nscc-regwatch-check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; }

/* MA Form M-4 / CT Form CT-W4 — employee portal and pay-profile editor
   (nscc-tax-form-rules.js nsccTaxFormStateCertFieldsHtml). */
.nscc-cert-heading { margin: 1rem 0 0.25rem; }
.nscc-cert-note { margin: 0.25rem 0 0.5rem; font-size: 0.78rem; color: var(--text-secondary); }
.nscc-cert-note--warn { color: var(--warning, #8a5a00); font-weight: 600; }
.nscc-cert-grid { align-items: end; }
.nscc-cert-check { display: flex; align-items: center; gap: 0.5rem; }
.nscc-cert-sign { grid-column: 1 / -1; }

/* Fleet → Mileage log: phase cell and the "not yet synced" flag on readings queued on the device */
.nscc-fleet-mileage-phase { padding: 0.3rem; text-transform: uppercase; font-weight: 800; }
.nscc-fleet-mileage-unsynced { display: block; text-transform: none; font-weight: 600; color: var(--text-muted); }
/* Area Reports place (assets/nscc-module-reports.js nsccRenderAreaReports) and the
   "No areas assigned" landing — classes instead of inline styles (CSP). */
.nscc-area-reports__params { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; }
.nscc-area-reports__param { display: flex; flex-direction: column; font-size: 0.72rem; }
.nscc-area-reports__bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
.nscc-area-reports__title { margin-right: auto; }
.nscc-area-reports__group { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.5rem 0 0.2rem; }
.nscc-area-reports__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.3rem 0; }
.nscc-area-reports__date { font-size: 0.72rem; }
.nscc-area-reports__save { float: right; font-size: 0.7rem; margin-right: 0.4rem; }
.nscc-no-area-msg { max-width: 560px; margin: 14vh auto 0; padding: 24px; text-align: center; }
.nscc-no-area-msg__title { margin: 0 0 8px; font-size: 1.35rem; }
.nscc-no-area-msg__note { margin: 0; color: var(--text-muted, #64748b); }
.nscc-sub-name { font-weight: 800; padding: 0; }

/* HR → Discipline log: the "By" column (was an inline style; CSP no-new-inline gate) */
.nscc-hr-disc-by { font-size: 0.72rem; }

th.nscc-num { text-align: right; }

/* Master Data read-only ERP column headers, the empty-customers callout text and the
   System Configuration vendor-picker notes (were inline styles; CSP no-new-inline gate). */
/* !important keeps the precedence the inline style had over the table's own th rules. */
.md-erp-th { text-align: left !important; padding: 0.55rem 0.7rem !important; white-space: nowrap !important; color: var(--text-secondary) !important; font-weight: 800 !important; font-size: 0.7rem !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; }
.md-erp-th__lock { opacity: 0.6; }
.md-empty-callout__text { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.syscfg-vendor-note { font-size: 0.6rem; color: var(--text-muted); text-transform: none; font-weight: 500; letter-spacing: 0; }
/* System Configuration → Security & controls → Payroll approval (preparer ≠ approver, 2026-10-09). */
.syscfg-field-label { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 0.65rem; }
.syscfg-field-select { display: block; width: 100%; max-width: 28rem; margin-top: 0.25rem; font-weight: 600; min-height: 2rem; }
.planner-pto-empty { font-size: 0.82rem; color: var(--text-muted); margin: 0.5rem 0; }

/* Trip modal — bank dropoff (flag multiTripBankDropoff): current branch when it was
   moved, and the same-bank branch picker. */
.nscc-trip-dropoff {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
}
.nscc-trip-dropoff__now {
    line-height: 1.4;
}
.nscc-trip-dropoff__change {
    font-size: 0.72rem;
    max-width: 100%;
}
.nscc-trip-dropoff--history ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

/* System Configuration → Notifications → Delivery alerts (assets/nscc-delivery-alerts-settings.js). */
.nscc-da-rule {
    border: var(--nscc-line-w, 2px) solid var(--border);
    border-radius: var(--radius-sm, 6px);
    padding: 0.6rem 0.7rem;
    margin: 0.65rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.nscc-da-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.nscc-da-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: 0.35rem;
}
.nscc-da-check {
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.nscc-da-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
    line-height: 1.45;
}
.md-ol-closes {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.3rem 0.4rem;
    color: var(--text-primary);
    font-size: 0.8rem;
}
.nscc-trip-dropoff__reason {
    font-size: 0.72rem;
    margin-bottom: 0.3rem;
}

/* Feature flags tab: points at the hover help a flag carries. */
.nscc-flag-help-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ==========================================================================
   Master Data -> Customer Accounts (assets/nscc-customer-accounts.js).
   Always on since 2026-10-16. Theme variables only, so every theme works;
   the markup carries no inline styles (CSP).
   ========================================================================== */
/* The Show choice beside the search box (feature flag masterDataAccountsRatesLook). */
.cacct-show-label {
    margin-left: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.cacct-show {
    width: auto;
    min-width: 7rem;
    margin-left: 0.4rem;
}
.cacct-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}
.cacct-readonly-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-sunken);
    color: var(--text-secondary);
}
.cacct-banner {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-sunken);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 0 0 auto;
}
.cacct-banner--error {
    border-color: var(--danger, #b42318);
    color: var(--danger, #b42318);
}
.cacct-table th:first-child,
.cacct-table td:first-child {
    width: 40%;
}
.cacct-cell-name {
    font-weight: 700;
}
tr.cacct-row {
    cursor: pointer;
}
tr.cacct-row:hover,
tr.cacct-row:focus-visible {
    background: var(--bg-sunken);
    outline: none;
}
tr.cacct-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--brand-light);
}
tr.cacct-row--inactive td {
    opacity: 0.6;
}

/* Map position of a location (design doc section 9): the status column on the Locations tab and the
   map review in the location editor. Green = verified, amber = rough match to review, red = none. */
.cacct-subtable .cacct-geo-col {
    width: 3.5rem;
    text-align: center;
}
.cacct-geo-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
}
.cacct-geo-sort.is-active {
    text-decoration: underline;
}
.cacct-geo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    color: #fff;
}
.cacct-geo--ok { background: #16a34a; }
.cacct-geo--review { background: #d97706; }
.cacct-geo--none { background: #dc2626; }
.cacct-geo-status {
    margin: 0.25rem 0 0.5rem;
}
.cacct-loc-map {
    height: 260px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.cacct-geo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.cacct-geo-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-right: auto;
}

/* Pop-overs: the customer, and the location and group editors on top of it. */
#cacct-cust-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 900px;
    --nscc-tabbed-modal-h: 700px;
}
#cacct-loc-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 780px;
    --nscc-tabbed-modal-h: 700px;
}
#cacct-grp-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 780px;
    --nscc-tabbed-modal-h: 720px;
}
/* Master Data -> Accounts & Rates -> Locations (owner, 2026-10-20): the customer picker of Add location and the
   small map of a row. */
#cacct-pick-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 560px;
    --nscc-tabbed-modal-h: 600px;
}
#cacct-map-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 640px;
    --nscc-tabbed-modal-h: 560px;
}
.cacct-pick,
.cacct-mapview {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
}
.cacct-pick-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 380px;
    overflow-y: auto;
}
.cacct-pick-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.cacct-pick-option:hover,
.cacct-pick-option:focus-visible {
    border-color: var(--brand-light);
    outline: none;
}
.cacct-mapview-addr {
    margin: 0;
    font-weight: 600;
}
.cacct-mapview-map {
    height: 320px;
}
/* The Customer Accounts table gives its first column 40% (the name); here the first column is Map, and the name is
   the second. */
.cloc-table th:first-child,
.cloc-table td:first-child {
    width: 6.5rem;
    white-space: nowrap;
}
.cloc-table th:nth-child(2),
.cloc-table td:nth-child(2) {
    width: 28%;
}
.cloc-map-btn {
    margin-left: 0.35rem;
    padding: 0.1rem 0.5rem;
}
.cloc-grp-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--brand-light);
    text-decoration: underline;
    cursor: pointer;
}
.cloc-grp-gone {
    color: var(--text-muted);
}
/* What still uses a location, listed when deactivating it is refused. */
.cacct-blockers {
    border: 1px solid #d97706;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}
.cacct-blockers-lead {
    margin: 0 0 0.35rem;
    font-weight: 600;
}
.cacct-blockers-list {
    margin: 0 0 0.35rem 1.1rem;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
}
.cacct-modal-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.cacct-modal-content .cacct-modal-tabs.nscc-erp-tabs {
    margin: 0.65rem 0 0;
}
.cacct-modal-content .nscc-modal-tabbed__panel {
    padding: 0.75rem 1rem 0;     /* the sticky footer carries the bottom gap, so nothing shows below it */
}
.cacct-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.cacct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem 0.9rem;
}
.cacct-field {
    min-width: 0;
}
.cacct-field--wide {
    grid-column: 1 / -1;
}
.cacct-field .form-label {
    margin-bottom: 0.25rem;
}
.cacct-req {
    color: var(--danger, #b42318);
}
textarea.form-control-panel.cacct-textarea {
    resize: vertical;
    min-height: 4rem;
    background-color: var(--bg-card);
}
.cacct-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 1.4rem;
}
.cacct-readonly-value {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0.35rem 0;
}
.cacct-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}
.cacct-section-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-light);
}
.cacct-optblock {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
}
.cacct-optblock .cacct-grid,
.cacct-optblock .cacct-section-head {
    align-self: stretch;
}
/* Error line and buttons stay in view at the bottom of a long form while it scrolls. */
.cacct-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0 0.9rem;
    background: var(--bg-page, #f4f4f5);
    border-top: 1px solid var(--border);
}
.cacct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.cacct-error {
    margin: 0;
}
.cacct-tab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.cacct-sublist {
    overflow-x: auto;
}
.cacct-subtable {
    width: 100%;
}
.cacct-empty,
.cacct-gone {
    padding: 0.9rem 0.5rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.cacct-member-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.cacct-member-filter {
    flex: 1 1 14rem;
    min-width: 10rem;
}
.cacct-members {
    display: flex;
    flex-direction: column;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-card);
}
.cacct-member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
}
.cacct-member:last-child {
    border-bottom: none;
}
.cacct-member[hidden] {
    display: none;
}
.cacct-member:hover {
    background: var(--bg-sunken);
}
.cacct-member-meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Master Data -> PICK Review (assets/nscc-pick-review.js).
   Always on since 2026-10-16. Theme variables only, so every theme works;
   the markup carries no inline styles (CSP). The review pop-over reuses the Customer
   Accounts form classes (cacct-*) above.
   ========================================================================== */
.pkrv-plain-line {
    padding: 1.25rem 1rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.pkrv-switch {
    display: inline-flex;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    background: var(--bg-card);
}
.pkrv-switch-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
}
.pkrv-switch-btn + .pkrv-switch-btn {
    border-left: 1px solid var(--border);
}
.pkrv-switch-btn:hover,
.pkrv-switch-btn:focus-visible {
    background: var(--bg-sunken);
    color: var(--text-primary);
    outline: none;
}
.pkrv-switch-btn.active {
    background: var(--bg-sunken);
    color: var(--text-primary);
    box-shadow: inset 0 -3px 0 var(--brand-light);
}
.pkrv-table th:nth-child(1),
.pkrv-table td:nth-child(1) {
    width: 9rem;
}
.pkrv-cell-code {
    font-weight: 700;
    white-space: nowrap;
}
tr.pkrv-row {
    cursor: pointer;
}
tr.pkrv-row:hover,
tr.pkrv-row:focus-visible {
    background: var(--bg-sunken);
    outline: none;
}
tr.pkrv-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--brand-light);
}
tr.pkrv-row--done td {
    opacity: 0.65;
}
.pkrv-status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-md, 10px);
    white-space: nowrap;
}
.pkrv-status--open {
    color: var(--warning, #b45309);
}
.pkrv-status--done {
    color: var(--success, #15803d);
}
.pkrv-note-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.pkrv-stack {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
#pkrv-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 820px;
    --nscc-tabbed-modal-h: 720px;
}

/* Editor titles (the Customer Accounts editors and the PICK Review dialog). A name with no spaces - the
   box accepts 200 characters - ran past the title bar and under the X. The title may now be narrower
   than its longest word and breaks anywhere; the bar stays inside the dialog and the X keeps its size. */
.cacct-modal-content .modal-header {
    min-width: 0;
    max-width: 100%;
}
.cacct-modal-content .modal-header .cacct-modal-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.cacct-modal-content .modal-header .close-btn {
    flex: 0 0 auto;
}

/* Payroll → Liabilities → Approved, not posted: the void confirmation's reason box. */
.nscc-liab-void-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

/* ==========================================================================
   Customer Accounts editors: the Details tab in rows (the owner's layout, 2026-10-09).
   These rules are scoped to div.cacct-row ON PURPOSE: the customer, location and group lists are
   <tr class="cacct-row">, and a bare .cacct-row rule turns every table row into a flex line.
   A row is one line of fields, left to right; when the dialog is too narrow for them they wrap
   onto the next line, so on a phone they simply stack. The same address component (four rows:
   three street lines, then city | state | postal code | country) draws the customer's main,
   mailing and billing addresses and the location's address. Theme variables only.
   ========================================================================== */
div.cacct-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
}
div.cacct-row > .cacct-field {
    flex: 1 1 11rem;
    min-width: 0;
}
/* Row 1: the name takes the room, the account code a share of it, the Active box what it needs. */
div.cacct-row--id {
    align-items: flex-end;
}
div.cacct-row > .cacct-field--name {
    flex: 3 1 14rem;
}
div.cacct-row > .cacct-field--code {
    flex: 1 1 9rem;
}
div.cacct-row > .cacct-field--active {
    flex: 0 0 auto;
}
/* The box sits at the height of the text boxes beside it, not below an absent label. */
div.cacct-row--id .cacct-check {
    margin-top: 0;
    padding: 0.75rem 0;
}
/* The address: street lines one per row, then city | state | postal code | country. */
.cacct-addr {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-self: stretch;
    min-width: 0;
}
div.cacct-row > .cacct-field--city {
    flex: 2 1 9rem;
}
div.cacct-row > .cacct-field--state {
    flex: 1 1 6rem;
}
div.cacct-row > .cacct-field--postalcode {
    flex: 1 1 6rem;
}
div.cacct-row > .cacct-field--country {
    flex: 1.5 1 8rem;
}

/* ==========================================================================
   Customer Accounts editors: the History tab / pane (the audit logs, owner 2026-10-09).
   Owner, sys-admin and leadership read one record's audit rows here. The pane is a column of
   a head line (count + Refresh), the table, a Show older button and two plain notes; the
   location and group editors switch between their form and this pane with the hidden
   attribute, so the form keeps what was typed. Theme variables only.
   ========================================================================== */
.cacct-pane[hidden] {
    display: none;
}
/* Both lose to a display rule that is stronger than the browser's hidden: ".modal .nscc-erp-tabs { display: flex !important }"
   keeps a tab strip with no tabs on screen, and ".btn { display: inline-flex }" a Show older button with nothing older. */
.modal .cacct-modal-tabs[hidden],
.cacct-hist [hidden] {
    display: none !important;
}
.cacct-hist {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding-bottom: 0.9rem;
}
.cacct-hist .cacct-tab-head {
    margin-bottom: 0;
}
.cacct-hist-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-card);
}
.cacct-hist-list:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--brand-light);
}
.cacct-hist-table th,
.cacct-hist-table td {
    vertical-align: top;
}
/* E-mails, names and values are typed text: they wrap anywhere rather than widen the table past the dialog. Only the
   time and the one-word action keep to one line (anywhere would split "Changed"), and the Past retention badge sits
   under the time so it never widens that column. */
.cacct-hist-table td {
    overflow-wrap: anywhere;
}
.cacct-hist-when,
.cacct-hist-table td:nth-child(3) {
    white-space: nowrap;
}
.cacct-hist-past td {
    color: var(--text-muted);
}
.cacct-hist-badge {
    display: block;
    width: fit-content;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-sunken);
    color: var(--text-secondary);
}
.cacct-hist-more {
    display: flex;
    justify-content: center;
}
.cacct-hist [aria-disabled="true"] {
    opacity: 0.6;
    cursor: default;
}
.cacct-hist-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
/* The line the retention job's marker becomes: where a record's older changes used to be. */
.cacct-hist-removed {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
/* On a phone five columns only fit as a sideways swipe that hides Field and Before -> After. Each line becomes a small
   block instead: time and action, then who, then the field, then what changed. The header row stays for readers. */
@media (max-width: 640px) {
    .cacct-hist-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .cacct-hist-table,
    .cacct-hist-table tbody {
        display: block;
    }
    .cacct-hist-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.1rem 0.6rem;
        padding: 0.1rem 0.6rem;
    }
    .cacct-hist-table tr.cacct-hist-lead {
        margin-top: 0.4rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
    }
    .cacct-hist-table tr.cacct-hist-lead:first-child {
        margin-top: 0;
        border-top: 0;
    }
    .cacct-hist-table td {
        display: block;
        padding: 0;
        border: 0;
    }
    .cacct-hist-table td:empty {
        display: none;
    }
    .cacct-hist-table td:nth-child(1) {
        order: 1;
        flex: 1 1 auto;
    }
    .cacct-hist-table td:nth-child(3) {
        order: 2;
    }
    .cacct-hist-table td:nth-child(2) {
        order: 3;
        flex: 1 1 100%;
    }
    .cacct-hist-table td:nth-child(4) {
        order: 4;
        flex: 1 1 100%;
        font-weight: 700;
    }
    .cacct-hist-table td:nth-child(5) {
        order: 5;
        flex: 1 1 100%;
    }
}

/* ==== BEGIN Master Data -> Jobs, Tasks, Billing Rates and PICK Rate Review (always on since 2026-10-16) ==== */
/* One block for the screens of the three files - Jobs; Tasks, Task Categories, Billing Rates and
   Billing Exceptions; Rate Review. They reuse the
   Customer Accounts (cacct-*) and PICK Review (pkrv-*) classes above for everything that looks the same; only what
   those do not give is here. Rules for this block, learnt from the list-layout regression of 2026-10-09 (a bare
   .cacct-row rule turned every list row into a flex line):
     - every selector carries one of the new prefixes (rcat-, cjob-, pkrr-) or one of the new dialog ids;
     - a shared class (cacct-*, pkrv-*, modal, btn) is only ever targeted UNDER one of those;
     - a class used on a table row is written tr.<class>, one used on a line of fields div.<class>;
     - what the hidden attribute hides gets its own [hidden] rule wherever a display rule would beat it;
     - theme variables only; no inline styles in the markup (CSP). */

/* ==========================================================================
   Master Data -> Tasks, Task Categories, Billing Rates and Billing Exceptions
   (assets/nscc-rates-catalog.js). Always on since 2026-10-16.
   Theme variables only, so every theme works; the markup carries no
   inline styles (CSP). Four screens with one list each (no switch between lists since 2026-10-13)
   and four editors; they reuse the Customer Accounts form classes (cacct-*) and PICK Review's
   plain line (pkrv-plain-line) above; only what those do not give is here.
   ========================================================================== */
/* The name column takes a steady share of the width in all four lists (they have 3 to 6 columns). */
table.rcat-table th:first-child,
table.rcat-table td:first-child {
    width: 30%;
}

/* Pop-overs: a task, a category (it holds a list of tasks to tick), a bill rate and an exception. */
#rcat-task-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 720px;
    --nscc-tabbed-modal-h: 640px;
}
#rcat-cat-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 780px;
    --nscc-tabbed-modal-h: 720px;
}
#rcat-rate-modal .modal-content.nscc-modal-tabbed,
#rcat-exc-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 720px;
    --nscc-tabbed-modal-h: 600px;
}

/* The task editor's "New bill rate" line: the amount and billing type of the bill rate that is made with
   the task. It is one row of fields (div.cacct-row lays it out) set apart as a box, and it is shown only
   while "New bill rate" is chosen - the hidden attribute alone loses to div.cacct-row's display: flex, so
   this rule (more specific, no !important needed) puts it back. */
div.rcat-newrate {
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-sunken);
}
div.rcat-newrate[hidden] {
    display: none;
}

/* Planner: a courier trip card's billing job (app-planner.js plannerBilljobSelectCompact), sized like the person select. */
select.nscc-planner-billjob-select {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 4px;
    color: var(--text-secondary);
    font-size: 0.66rem;
}

/* Tasks -> "Billing job order": the courier tasks in pick-list order, each with an up and a down arrow. */
details.rcat-order {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-sunken);
}
details.rcat-order[hidden] {
    display: none;
}
details.rcat-order > summary {
    cursor: pointer;
    font-weight: 600;
}
.rcat-order-hint {
    margin: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
ol.rcat-order-list {
    margin: 0;
    padding-left: 1.5rem;
}
li.rcat-order-item {
    padding: 0.15rem 0;
}
li.rcat-order-item > .rcat-order-name {
    display: inline-block;
    min-width: 14rem;
    margin-right: 0.4rem;
}
li.rcat-order-item > .rcat-order-move + .rcat-order-move {
    margin-left: 0.25rem;
}

/* ==========================================================================
   Master Data -> Jobs (assets/nscc-jobs.js).
   Always on since 2026-10-16. The list, the job editor
   and the Jobs tab of the customer pop-over reuse the Customer Accounts / PICK Review classes
   (cacct-*, pkrv-*) for everything that looks the same; only what is new is here. Theme variables
   only, so every theme works; the markup carries no inline styles (CSP).
   ========================================================================== */
/* The list: the job name takes the room; money sits right-aligned on one line. */
.cjob-table th:first-child,
.cjob-table td:first-child {
    width: 26%;
}
.cjob-table .cjob-cell-amount,
.cjob-subtable .cjob-cell-amount {
    text-align: right;
    white-space: nowrap;
}
/* A long list of locations or tasks wraps inside its cell instead of widening the table. */
.cjob-table td,
.cjob-subtable td {
    overflow-wrap: anywhere;
}

/* The job editor. Two tick lists share the dialog, so each is shorter than the group editor's one. */
#cjob-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 860px;
    --nscc-tabbed-modal-h: 780px;
}
#cjob-modal .cacct-members {
    max-height: 11rem;
}
/* Row 1: the name takes the room, the customer a share of it. The selector STARTS with div.cacct-row, as every rule
   that names that class must (the list rows are tr.cacct-row; scripts/test-customer-accounts-ui.mjs checks it); the
   cjob- class keeps it to the job editor, and coming after the Customer Accounts rule of the same weight it wins. */
div.cacct-row > .cjob-field--name {
    flex: 2 1 16rem;
}
/* A task of another billing type cannot be ticked while the ticked tasks fix the job's type. */
.cjob-member.cjob-member--off {
    cursor: not-allowed;
    color: var(--text-muted);
}
.cjob-member.cjob-member--off:hover {
    background: transparent;
}
/* A location or task the job still lists but that no longer exists (or is another customer's): it has to be unticked. */
.cjob-member.cjob-member--gone > span:first-of-type {
    color: var(--danger, #b42318);
    font-weight: 700;
}
/* What will be billed is the answer the whole form works towards. */
#cjob-billed {
    color: var(--brand-light);
}

/* ==========================================================================
   Master Data -> PICK Rate Review (assets/nscc-pick-rate-review.js).
   Always on since 2026-10-16. Theme variables only,
   so every theme works; the markup carries no inline styles (CSP). The list and the review
   pop-over reuse the Customer Accounts (cacct-*) and PICK Review (pkrv-*) classes above.
   ========================================================================== */
/* The two short columns: site code and line number. */
.pkrr-table th:nth-child(1),
.pkrr-table td:nth-child(1) {
    width: 8rem;
}
.pkrr-table th:nth-child(2),
.pkrr-table td:nth-child(2) {
    width: 4rem;
}
/* PICK's own text for the amount ("1,250.00", "N/A"): kept on one line. */
.pkrr-cell-amount {
    white-space: nowrap;
}
/* A line somebody has dealt with (reconciled, or not a job) reads fainter than an open one. */
tr.pkrr-row--done td {
    opacity: 0.65;
}
/* The third status, beside the PICK Review badge's open and done colours. */
.pkrr-status--notjob {
    color: var(--text-secondary);
}
/* Why a line was held: one sentence per reason. */
.pkrr-reasons {
    margin: 0;
    padding: 0.35rem 0 0.35rem 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}
.pkrr-reasons li + li {
    margin-top: 0.2rem;
}
#pkrr-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 860px;
    --nscc-tabbed-modal-h: 760px;
}

/* --------------------------------------------------------------------------
   Text with no spaces in it (all three screens). PICK descriptions are often words joined by slashes -
   "TRANSPORT/COIN/CURRENCY/DEPOSIT" - and a browser does not break a line after a slash, so such a value
   ran out of its field, over the field beside it, and made the window scroll sideways. Wherever these
   windows show text somebody typed beside something else, it may break inside a word and stays in its
   own box: the read-only values and the reasons of the review window, and the rows of the tick lists
   (a task or location name on the left, what is known about it on the right).
   -------------------------------------------------------------------------- */
#pkrr-modal .cacct-readonly-value,
#pkrr-modal .pkrr-reasons li {
    overflow-wrap: anywhere;
}
#rcat-cat-modal .cacct-member > span,
#cjob-modal .cacct-member > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* The note on the right keeps its own width while it is short ("Hourly"), and never takes more than half the row. */
#rcat-cat-modal .cacct-member > .cacct-member-meta,
#cjob-modal .cacct-member > .cacct-member-meta {
    flex: 0 0 auto;
    max-width: 50%;
    text-align: right;
}

/* --------------------------------------------------------------------------
   Narrow screens (added when the three screens were wired in, after they were looked at in a real
   browser at 375 px). The shared table rules let a cell break inside any word, so on a phone a list
   of five to eight columns squeezed its name column to a strip one or two letters wide, with rows
   hundreds of pixels tall. Each list keeps a width at which its words stay whole and scrolls sideways
   inside its own frame instead (the frames already scroll: .bo-table-scroll-wrap for a screen's list,
   .cacct-sublist for the Jobs tab of the customer pop-over). On a desktop nothing changes: each floor
   is below the width the list has there. The three-column category list needs none.
   -------------------------------------------------------------------------- */
table.cjob-table {
    min-width: 40rem;
}
table.cjob-subtable {
    min-width: 36rem;
}
table.rcat-table:has(thead th:nth-child(5)) {
    min-width: 34rem;
}
table.pkrr-table {
    min-width: 52rem;
}
/* ==== END Master Data -> Jobs, Tasks, Billing Rates and PICK Rate Review ==== */

/* ==== BEGIN Master Data -> Pay Rates (assets/nscc-pay-rates.js; always on since 2026-10-16) ====
   Three screens with one list each - Pay Rates, Pay Exceptions, Stipends (no switch between lists since 2026-10-13) -
   and three pop-over editors. They reuse the Customer Accounts form classes (cacct-*) and PICK Review's plain line
   (pkrv-plain-line) for everything that looks the same; only what those do not give is here. The three screens share
   every class below, so none of them needs a rule of its own. The same rules as the block above:
     - every selector starts with the cpay- prefix or one of the three dialog ids;
     - a shared class (cacct-*, btn) is only ever targeted UNDER one of those;
     - what the hidden attribute hides gets its own [hidden] rule wherever a display rule would beat it;
     - theme variables only; no inline styles in the markup (CSP). */

/* The list: the person's name takes a steady share of the width in all three lists (4 to 6 columns), and a long
   list of locations wraps inside its cell instead of widening the table. */
table.cpay-table th:first-child,
table.cpay-table td:first-child {
    width: 24%;
}
table.cpay-table td {
    overflow-wrap: anywhere;
}

/* "3 people on the roster have no person ID ..." above the list: the sentence, the Show names button and, on
   request, their names. It is a neutral notice (cacct-banner without the error colour) laid out as a wrapping line. */
.cpay-noid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}
.cpay-noid-names {
    flex: 1 1 100%;
    margin: 0;
    padding: 0 0 0 1.2rem;
    max-height: 9rem;
    overflow-y: auto;
    font-weight: 400;
}
.cpay-noid-names .cacct-member-meta {
    margin-left: 0.35rem;
}

/* Pop-overs: a pay rate, an exception (it also holds a list of locations) and a stipend. */
#cpay-rate-modal .modal-content.nscc-modal-tabbed,
#cpay-stip-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 760px;
    --nscc-tabbed-modal-h: 720px;
}
#cpay-exc-modal .modal-content.nscc-modal-tabbed {
    --nscc-tabbed-modal-w: 820px;
    --nscc-tabbed-modal-h: 780px;
}

/* A quiet line under a field: the normal rate, PICK's pay figures. */
.cpay-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.cpay-hint[hidden] {
    display: none;
}

/* A picker (a person, a task, a location, a group): what is chosen with its Change button, or a search box over a
   short list of names. The list is the Customer Accounts member list (cacct-members) with buttons for rows. */
.cpay-pick-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.cpay-pick-chosen[hidden],
.cpay-pick-find[hidden],
.cpay-chosen-list[hidden] {
    display: none;
}
.cpay-pick-value {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.cpay-pick-value .cacct-member-meta {
    margin-left: 0.4rem;
    font-weight: 400;
}
.cpay-pick-find {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cpay-pick-list {
    max-height: 11rem;
}
.cpay-chosen-list {
    max-height: 9rem;
    margin-bottom: 0.35rem;
}
/* A name to choose is a button that looks like a row of the list. It keeps its own height: a button in a column
   that has a height limit would otherwise be squeezed to fit, and the list would never scroll. */
.cpay-option {
    appearance: none;
    flex: 0 0 auto;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    font: inherit;
    text-align: left;
}
.cpay-option:focus-visible {
    outline: none;
    background: var(--bg-sunken);
    box-shadow: inset 0 0 0 2px var(--brand-light);
}
/* The name takes the room and may break inside a word; what is known about it (a customer, "(inactive)") and the
   Remove button keep to the right. */
.cpay-option > span:first-child,
.cpay-chosen > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.cpay-option > .cacct-member-meta,
.cpay-chosen > .cacct-member-meta {
    flex: 0 1 auto;
    max-width: 50%;
    margin-left: 0;
    text-align: right;
}
/* A chosen location is a line with a Remove button, not something to press. */
.cpay-chosen {
    flex: 0 0 auto;
    cursor: default;
}
.cpay-chosen:hover {
    background: transparent;
}
.cpay-chosen > .btn {
    flex: 0 0 auto;
}
/* "Showing the first 50 of 312 ..." and "No people match ..." inside the list. */
.cpay-pick-note {
    flex: 0 0 auto;
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
}

/* A stipend is for a location OR a location group: the two-way choice above the picker. Its caption is a span (it
   names two boxes, not one), so it is given the colour every other field's label has in a dialog. */
#cpay-stip-for-label {
    color: var(--text-primary);
}
.cpay-for {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    padding: 0.35rem 0;
}
.cpay-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
}

/* Narrow screens: as the lists above, this one keeps a width at which its words stay whole and scrolls sideways
   inside its own frame (.bo-table-scroll-wrap). On a desktop nothing changes. */
table.cpay-table {
    min-width: 40rem;
}
/* ==== END Master Data -> Pay Rates ==== */

/* ==== BEGIN Master Data -> PICK Import: the row of sub-tabs (assets/nscc-pick-import-tabs.js) ====
   One row above whichever of the eleven PICK import screens is showing: Customer Accounts, Jobs, Tasks, Task
   Categories, Billing Rates, Billing Exceptions, Pay Rates, Pay Exceptions, Stipends, Site Review, Rate Review. It sits
   in the page just before those eleven view sections, inside the frame that scrolls them, and lines up with a screen's
   own toolbar (the shell's 1.5rem side padding). It is ONE line whatever its length: it never wraps (the row is sticky
   and the screens below give back exactly its height), and scrolls sideways inside itself when it does not fit.

   Three levels can be on screen at once, so each has its own look: the Master Data folder tabs above (boxed tabs), this
   row (plain text tabs on one line), and a review screen's own switch below (.pkrv-switch, a boxed pair). The selected
   sub-tab carries the underline the switch uses for its pressed side; the open-count pill is the review screens' own
   "open" pill (.pkrv-status), reused as it is.

   Every rule here starts with .nscc-pickimp, so none can reach another element - with ONE exception, the last rule,
   which is there so the eleven screens do NOT change: see its comment. Theme variables only; no inline styles (CSP). */
.nscc-pickimp-row {
    display: flex;
    box-sizing: border-box;
    height: 2.25rem;
    margin: 0.6rem 1.5rem 0;
    border-bottom: 1px solid var(--border);
    /* It stays at the top of the frame while a long list scrolls under it, as the six tabs stayed on the strip. The
       background is the frame's own colour: at rest nothing looks different, and the list does not show through.
       z-index 3 is inside the frame's own stacking context (it isolates): above a screen's table heading cells (2),
       far below a full-screen view (4000); the screens' dialogs are on the page body, above the whole frame. */
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--chrome-folder-panel-bg, var(--bg-page));
    /* A stuck row stops under the frame's own top padding (a few pixels), where the list would show as a sliver:
       the same colour is painted over that strip. It reaches 0.5rem up, inside the row's own 0.6rem top margin. */
    box-shadow: 0 -0.5rem 0 var(--chrome-folder-panel-bg, var(--bg-page));
    /* A phone: the row scrolls sideways inside itself; the page is never pushed wider. */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}
/* display:flex above would otherwise beat the hidden attribute. */
.nscc-pickimp-row[hidden] {
    display: none;
}
/* More sub-tabs than fit: the edge that has more beyond it fades into the frame's colour (the app hides scroll bars,
   so this is what says "there is more"). The row's file sets the two classes from where the row is scrolled to. Each
   fade rides along at its edge inside the row, takes no room (the margin gives its width back) and lets a tap through. */
.nscc-pickimp-row--more-left::before,
.nscc-pickimp-row--more-right::after {
    content: "";
    position: sticky;
    z-index: 1;
    flex: 0 0 1.75rem;
    pointer-events: none;
}
.nscc-pickimp-row--more-left::before {
    left: 0;
    margin-right: -1.75rem;
    background: linear-gradient(to right, var(--chrome-folder-panel-bg, var(--bg-page)), transparent);
}
.nscc-pickimp-row--more-right::after {
    right: 0;
    margin-left: -1.75rem;
    background: linear-gradient(to left, var(--chrome-folder-panel-bg, var(--bg-page)), transparent);
}
.nscc-pickimp-tabs {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 0.15rem;
}
.nscc-pickimp-tab {
    appearance: none;
    position: relative;      /* holds the screen-reader word of the count inside the tab, so inside the row's scroll */
    flex: 0 0 auto;
    margin: 0;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.nscc-pickimp-tab:hover {
    background: var(--bg-sunken);
    color: var(--text-primary);
}
/* Inside the tab: the row clips what is outside it, and a ring drawn outside would lose its top and bottom. */
.nscc-pickimp-tab:focus-visible {
    outline: 2px solid var(--border-focus, #3f3f46);
    outline-offset: -2px;
}
.nscc-pickimp-tab[aria-selected="true"] {
    background: var(--bg-sunken);
    color: var(--text-primary);
    box-shadow: inset 0 -3px 0 var(--brand-light);
}
/* Feature flag masterDataAccountsRatesLook (owner, 2026-10-14): the same row drawn as Master Data's folder tabs
   (.nscc-erp-tabs .nscc-erp-tab-btn above) - boxed tabs with rounded tops on the row's own line. The row's file puts a
   --folder class on the row, the list and every sub-tab while the flag is on. The row keeps its height (2.25rem), so
   the room the screens below give back is unchanged. Only colours, borders and shapes; flag off, the classes are not
   there and the plain row above is what shows. */
.nscc-pickimp-row--folder {
    border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
}
.nscc-pickimp-tabs--folder {
    align-items: flex-end;
    gap: 0.35rem;
}
.nscc-pickimp-tab--folder {
    height: calc(100% - 0.15rem);
    padding: 0 0.7rem;
    border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--chrome-folder);
    color: var(--chrome-folder-ink);
    font-size: 0.72rem;
    box-shadow: none;
}
.nscc-pickimp-tab--folder:hover {
    background: var(--bg-raised);
    color: var(--chrome-folder-ink);
}
/* The selected tab is the panel's own colour and joins the panel below it, as the selected tab on the strip above does. */
.nscc-pickimp-tab--folder[aria-selected="true"] {
    height: calc(100% + var(--nscc-line-w, 2px));
    margin-bottom: calc(-1 * var(--nscc-line-w, 2px));
    background: var(--chrome-folder-panel-bg, var(--bg-card));
    color: var(--chrome-folder-ink);
    box-shadow: none;
}
/* "open", read out after the number and never drawn. */
.nscc-pickimp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* The one rule that is not about the row itself. A view section is as tall as the frame around it (.view-section:
   height 100%), and the row now stands above the section inside that frame - so, left alone, the section would reach
   past the bottom of the frame by exactly the row's height and a list too short to need scrolling would scroll by that
   much. While the row is showing, the screen under it gives that height back: 2.85rem = the row's 2.25rem + its 0.6rem
   top margin. Nothing a person sees of the eleven screens changes (they have no box of their own; their content is laid
   out from the top as before). It names the eleven sections by id - a screen left out of the list stands 2.85rem too
   tall under the row - applies only while the row is shown, and leaves a full-screen view alone. The height changes at
   once, never over a transition: with animations switched off the app gives every element a 0.01ms transition, which
   landed the new height one frame late - long enough for the frame to look 45px too tall and flash a scroll arrow each
   time PICK Import was opened. */
.nscc-pickimp-row:not([hidden]) ~ #master-customer-accounts-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-coll-locations-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-location-groups-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-requirements-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-jobs-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-tasks-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-task-categories-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-billing-rates-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-billing-exceptions-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-pay-rates-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-pay-exceptions-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-stipends-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-pay-bill-check-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-pick-review-view.view-section.active:not(.nscc-view-fs),
.nscc-pickimp-row:not([hidden]) ~ #master-pick-rate-review-view.view-section.active:not(.nscc-view-fs) {
    height: calc(100% - 2.85rem);
    transition-property: none;
}
/* ==== END Master Data -> PICK Import: the row of sub-tabs ==== */
/* The eleven screens under Master Data -> PICK Import in full screen, which they have only while feature flag
   masterDataAccountsRatesLook is on (assets/nscc-view-fullscreen.js): the screen fills the width, as Customers does. */
#master-customer-accounts-view.view-section.nscc-view-fs > .master-data-shell,
#master-coll-locations-view.view-section.nscc-view-fs > .master-data-shell,
#master-location-groups-view.view-section.nscc-view-fs > .master-data-shell,
#master-jobs-view.view-section.nscc-view-fs > .master-data-shell,
#master-tasks-view.view-section.nscc-view-fs > .master-data-shell,
#master-task-categories-view.view-section.nscc-view-fs > .master-data-shell,
#master-billing-rates-view.view-section.nscc-view-fs > .master-data-shell,
#master-billing-exceptions-view.view-section.nscc-view-fs > .master-data-shell,
#master-pay-rates-view.view-section.nscc-view-fs > .master-data-shell,
#master-pay-exceptions-view.view-section.nscc-view-fs > .master-data-shell,
#master-stipends-view.view-section.nscc-view-fs > .master-data-shell,
#master-pay-bill-check-view.view-section.nscc-view-fs > .master-data-shell,
#master-pick-review-view.view-section.nscc-view-fs > .master-data-shell,
#master-pick-rate-review-view.view-section.nscc-view-fs > .master-data-shell {
    align-self: stretch;
    width: 100%;
}

/* Shift modal: the Archive Assignment button sits at the left of the footer (app-gantt.js). */
.nscc-shift-archive-btn { margin-right: auto; }

/* Trips Gantt paging (2026-10-12): the "Showing N of M rows · Show 100 more" line,
   across the whole grid below the last drawn row. */
#timeline-grid-body .nscc-dt-more {
    grid-column: 1 / -1;
    position: sticky;
    left: 0;
    padding: 0.6rem;
    text-align: left;
    color: var(--text-muted);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    border-bottom: 2px solid var(--border);
    background: var(--bg-card);
}
#timeline-grid-body select.nscc-dt-dest-select { width: 100%; margin-bottom: 6px; }
#timeline-grid-body select.nscc-dt-loc-select { flex: 1; min-width: 0; }
/* Master Data → Customers: the services a customer buys, and the A&R chip on Service Pay's trip items. */
.md-loc-services { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.md-loc-services-note { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--text-secondary); }
.nscc-payx-src--acr { font-size: 0.55rem; padding: 0 0.3rem; border-radius: 999px; color: #fff; background: var(--brand-light); }

/* Automations (owner 2026-10-16): the reason under a suggested bank match, and the suggested
   invoice matches for a customer payment (nscc-finance-tier1.js, nscc-finance-reversals.js). */
.nscc-bank-match-why { font-size: 0.68rem; color: var(--text-muted); }
.nscc-bank-match-why--exact { color: var(--success, #15803d); }
.nscc-cash-match { font-size: 0.78rem; margin: 0.35rem 0 0.5rem; }
.nscc-cash-match__list { margin: 0.25rem 0 0 1rem; padding: 0; }
.nscc-cash-match__list li { margin-bottom: 0.3rem; }
.nscc-cash-match__why { font-size: 0.68rem; color: var(--text-muted); }

/* Admin Console → Experimental (assets/nscc-experimental.js) */
.nscc-experimental-results { margin-top: 1.5rem; }
.nscc-table td.nscc-num { text-align: right; font-variant-numeric: tabular-nums; }
.nscc-experimental-total td { font-weight: 600; border-top: 2px solid var(--border-color, #d0d0d0); }


/* Admin Console → User Monitor (assets/nscc-user-monitor.js) */
.nscc-um-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0 0.5rem; }
.nscc-um-toolbar #nscc-user-monitor-search { min-width: 14rem; flex: 1 1 14rem; max-width: 24rem; }
.nscc-um-days { display: inline-flex; align-items: center; gap: 0.35rem; }
.nscc-um-days[hidden] { display: none; }
.nscc-um-days input { width: 4.5rem; }
.nscc-um-status { color: var(--text-secondary, #666); font-size: 0.9em; }
.nscc-um-counts { margin: 0.25rem 0 0.5rem; color: var(--text-secondary, #666); }
.nscc-um-light { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; vertical-align: middle; }
.nscc-um-light.is-online { background: #1e9e4a; box-shadow: 0 0 0 2px rgba(30, 158, 74, 0.25); }
.nscc-um-light.is-stalled { background: #e0a100; box-shadow: 0 0 0 2px rgba(224, 161, 0, 0.25); }
.nscc-um-light.is-offline { background: #c62828; box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.2); }

/* Customer canceled (D-28): the trip window's banner for a trip the customer called off (nscc-trip-modal.js). */
.nscc-trip-cancel-banner { margin: 0.35rem 0; padding: 0.5rem 0.6rem; border-radius: 6px; border: 2px solid #8E8E93; background: rgba(142, 142, 147, 0.14); font-size: 0.72rem; color: var(--text-primary); }
.nscc-trip-cancel-banner__muted { color: var(--text-muted); }

/* Planner card actions (app-planner.js): Holiday Override / Undo, Remove (a patrol or guard
   shift: the person off, the shift stays open) and Delete shift (the whole shift). */
.nscc-planner-card-acts { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.nscc-planner-card-acts .nscc-planner-card-act { padding: 0 5px; font-size: 0.62rem; }
.nscc-planner-card-acts .nscc-planner-card-act--first { margin-left: auto; }