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

/* ?? 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-icon-cluster {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.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;
}
.nscc-chrome-icon-cluster {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.28rem 0.4rem;
    border: 2px solid #000000;
    border-radius: 10px;
    background: var(--bg-raised, #d1d5db);
    box-sizing: border-box;
}
.nscc-chrome-icon-cluster .btn-icon {
    margin: 0;
}
.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: 2px solid #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: #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 #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: 2px solid #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: #000000; transform: scale(1.05); }
.icon-btn:active { transform: scale(0.95); }

.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.58rem;
    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;
    min-width: 4.55rem;
    flex: 0 0 auto;
    padding: 0.22rem 0.4rem 0.16rem;
    border: 2px solid #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.48rem;
    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.58rem;
    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;
}

:root {
    /* Logo box / brand chip gray ? shared by banner buttons, legend, ticker bar */
    --chrome-logo-box-bg: #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: #e4e4e7;
}
:root.dark,
body.dark-theme {
    --chrome-logo-box-bg: #4b5563;
    --ticker-bar-gray: var(--chrome-logo-box-bg);
    --ticker-granite: var(--chrome-logo-box-bg);
    --ticker-bar-ink: #f4f4f5;
    /* Dark-gray chips on the logo-box bar */
    --ticker-seg-fill: #374151;
    --ticker-seg-fill-dark: #374151;
    --chrome-brand-row-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: 2px solid #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;
    padding-right: 1.25rem; /* small breathing room between loop copies */
}
@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: #1c1917;
    -webkit-text-fill-color: #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: 2px solid #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: #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.sage-queue-table-wrap,
.nscc-table-fs-target.nscc-table-fs.sage-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;
}
/* 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, #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: #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,
.loc-rate-history-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; }
.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:#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: #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;
}
#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: 2px solid #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: #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 #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 {
    outline: 2px solid #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: 2px solid #000;
    border-radius: 6px;
    box-shadow: 4px 4px 0 #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: #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: 2px solid #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: 1.5px solid #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 #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: #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: #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;
}

/* ===== 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, #000000);
    box-shadow: none;
}
.cm-trip-card.is-selected {
    border-color: var(--cm-status, #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: 2px dashed #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: #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;
}
.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;
}

/* 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;
}
#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: 2px solid #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 #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;
    background: var(--bg-card);
    align-items: start;
}
#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;
}
#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-sage-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;
}
.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: #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: #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: #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: #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: #000000;
    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: #000000;
}
.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: #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; }
.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: #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; }
.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); }
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: #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: 2px solid #000000;
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
}
#communication-container .comms-contact-search:focus {
    outline: none;
    border-color: #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; }
#new-dispatch-modal .modal-content { width: min(760px, 100%); max-width: 760px; max-height: calc(100dvh - 2rem); overflow-y: auto; }
@media (max-width: 640px), (max-height: 680px) {
    #new-dispatch-modal.open { align-items: flex-start; padding: 0.5rem; }
    #new-dispatch-modal .modal-content { width: 100%; max-height: calc(100dvh - 1rem); padding: 0.75rem; }
    #new-dispatch-modal .form-grid-two { grid-template-columns: 1fr; gap: 0.75rem; }
}
.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 { height: 60px; font-size: 0.8125rem; resize: none; }
.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 #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%; 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: none; 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 #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;
}

.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) */
/* NOTE: .sim-btn.active excluded — the dark simulator bar needs light text; the
   demo shells style .sim-btn.active inline (green fill / white text). */
.btn-checkin {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 4px solid #34C759 !important;
    box-shadow: none !important;
}
.btn-checkin: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;
    height: calc(100vh - 120px);
}
.report-templates-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 2px solid var(--border);
    padding-right: 1.25rem;
    overflow-y: auto;
}

/* 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: #000000;
}
.report-template-item:hover:not(.active) {
    border-color: #000000;
}
.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: #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: #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-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);
}

/* 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: #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: #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: 2px solid #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;
}
.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: 2px solid #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,
.sage-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: 2px solid #000000;
    border-radius: 8px;
    box-shadow: none;
}
.master-data-header-box .sage-connect-title,
.master-data-header-box .master-data-title,
.master-data-header-box h2,
.nscc-ledger-head .sage-connect-title,
.nscc-ledger-head .master-data-title,
.nscc-ledger-head h2,
.view-section .sage-connect-title,
.view-section h2.sage-connect-title,
.view-section h2.master-data-title,
.nscc-chrome-synthetic-title .sage-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,
.sage-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: 2px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.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,
.sage-connect-header .nscc-view-subtitle-wrap,
.sage-connect-header .nscc-view-subtitle,
.nscc-view-subtitle-toggle {
    display: none !important;
}
/* Do not strip the title box on connect shells */
.master-data-shell--bo-connect .master-data-header-box.sage-connect-header,
.master-data-shell--bo-connect .sage-connect-header.master-data-header-box {
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.85rem;
    background: var(--bg-card, #ffffff);
    border: 2px solid #000000;
    border-radius: 8px;
}
:root.dark .master-data-header-box,
:root.dark .nscc-ledger-head,
:root.dark .sage-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 .sage-connect-header.master-data-header-box,
body.dark-theme .nscc-chrome-synthetic-title,
body.dark-theme .nscc-overview-intro__title {
    border-color: #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 (Sage 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 .sage-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.sage-connect-header {
    margin-bottom: 0.35rem;
}
#custom-export-view .sage-connect-title {
    font-size: 1.15rem;
    line-height: 1.2;
}
#custom-export-view .custom-export-panel > .sage-erp-tabs {
    margin-bottom: 0.35rem;
}
#custom-export-view .custom-export-panel > .sage-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) {
    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;
}
html.nscc-left-nav #back-office-view:has(#back-office-payroll-panel:not([hidden])) > .master-data-shell--sage-connect,
html.nscc-left-nav #back-office-view:has(#back-office-payroll-mount:not([hidden])) > .master-data-shell--sage-connect {
    display: none !important;
}
/* 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;
    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-width, 13.5rem) 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;
}
/* System Preferences lives in left Support; hide duplicate header gear on left-nav chrome. */
html.nscc-left-nav #system-settings-btn {
    display: none !important;
}
html.nscc-left-nav #nscc-app-sidebar {
    grid-row: 2 / -1;
    grid-column: 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));
    border-right: 2px solid var(--border);
    /* Above view/table fullscreen so the rail stays clickable while content is FS */
    z-index: 10060;
}
/* 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-width, 13.5rem);
    right: 0;
    width: calc(100vw - var(--nscc-app-nav-width, 13.5rem)) !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;
}
/*
 * 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: 2px solid #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: #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 .sage-erp-tab-panel.active,
html.nscc-left-nav body.nscc-bo-chrome-tabs #ops-field-view .sage-erp-tab-panel.active,
html.nscc-left-nav body.nscc-bo-chrome-tabs #back-office-payroll-panel .sage-erp-tab-panel.active,
html.nscc-left-nav body.nscc-bo-chrome-tabs #executive-dashboard-view .sage-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 .sage-erp-tab-panel.active,
html.nscc-finance-shell body.nscc-bo-chrome-tabs #accounting-view .sage-erp-tab-panel.active,
html.nscc-finance-shell body.nscc-bo-chrome-tabs #back-office-payroll-panel .sage-erp-tab-panel.active,
html.nscc-finance-shell body.nscc-bo-chrome-tabs #ops-field-view .sage-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 > .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #back-office-payroll-panel > .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs .master-data-shell--ops > .sage-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 .sage-erp-tab-btn.active,
html.nscc-left-nav #planner-header .sage-erp-tab-btn.active,
html.nscc-left-nav #nscc-chrome-folder-tabs .sage-erp-tab-btn.active,
html.nscc-left-nav #nscc-chrome-folder-tabs .sage-erp-tab-btn[aria-selected="true"],
html.nscc-left-nav #daily-pulse-folder-tabs .sage-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-width, 13.5rem) 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: 2px solid #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;
}
/* 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 > .sage-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.sage-connect-title,
body.nscc-bo-chrome-tabs .view-section.active .master-data-shell > .master-data-header-box:not(.nscc-master-actions-only) h2.sage-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 > .sage-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: 2px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
#nscc-chrome-folder-tabs > .master-data-header-box .sage-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 .sage-connect-title,
#nscc-chrome-folder-tabs > .nscc-ledger-head .master-data-title,
#nscc-chrome-folder-tabs > .nscc-ledger-head h2,
#nscc-chrome-folder-tabs > .sage-connect-header .sage-connect-title,
#nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title .sage-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 > .sage-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 > .sage-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 .sage-erp-tabs,
html.nscc-left-nav #planner-header .sage-erp-tabs,
#live-ops-header .sage-erp-tabs.nscc-tab-groups,
#planner-header .sage-erp-tabs.nscc-tab-groups,
#nscc-chrome-folder-tabs .sage-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 .sage-erp-tabs:last-child,
#nscc-chrome-folder-tabs .nscc-tab-groups:last-child {
    border-bottom: none !important;
}
/* 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-demo2-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-demo2-bo-fs .main-content,
html.nscc-left-nav.nscc-demo2-bo-fs #live-ops-container,
html.nscc-left-nav.nscc-demo2-bo-fs .view-section.active:not(.nscc-view-fs) {
    min-height: 0;
}
html.nscc-left-nav.nscc-demo2-bo-fs .app-container {
    height: 100vh;
    width: 100%;
    max-width: none;
}
html.nscc-left-nav.nscc-demo2-bo-fs .main-content {
    height: 100%;
    flex: 1 1 auto;
}
html.nscc-left-nav.nscc-demo2-bo-fs #live-ops-container {
    height: 100%;
    overflow: auto;
}
html.nscc-left-nav.nscc-demo2-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;
}
.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: 2px solid #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: #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;
    padding: 0.25rem 0.35rem 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-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;
}
html.nscc-app-nav-collapsed .nscc-app-nav-main,
body.nscc-app-nav-collapsed .nscc-app-nav-main {
    justify-content: center;
    padding: 0.5rem 0.15rem;
}
html.nscc-app-nav-collapsed #nscc-app-sidebar,
body.nscc-app-nav-collapsed #nscc-app-sidebar {
    overflow: clip;
}
html.nscc-app-nav-collapsed .nscc-app-nav-list,
body.nscc-app-nav-collapsed .nscc-app-nav-list {
    padding: 0.1rem 0.15rem 0.5rem;
}

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;
}
.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(--surface-elevated, #fff);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ========== IPS public-website theme — customer portal (/demo2/portal + in-app) ========== */
html.nscc-ips-portal-theme,
body.nscc-ips-portal-theme,
#customer-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 {
    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 {
    max-width: none;
}
.nscc-ips-portal-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    padding: 0.45rem 1.25rem;
    background: var(--ips-blue-dark, #212121);
    color: #ffffff;
    font-size: 0.72rem;
    line-height: 1.35;
}
.nscc-ips-portal-topbar a {
    color: #ffffff;
    text-decoration: none;
}
.nscc-ips-portal-topbar a:hover,
.nscc-ips-portal-topbar a:focus-visible {
    color: var(--ips-orange, #f26723);
    text-decoration: underline;
}
.nscc-ips-portal-topbar__tag {
    text-align: right;
    font-weight: 600;
    letter-spacing: 0.02em;
}
@media (max-width: 720px) {
    .nscc-ips-portal-topbar {
        grid-template-columns: 1fr;
    }
    .nscc-ips-portal-topbar__tag { text-align: left; }
}
.nscc-ips-portal-site-header {
    background: #ffffff;
    border-bottom: 3px solid var(--ips-blue, #263d88);
    box-shadow: 0 2px 8px rgba(38, 61, 136, 0.08);
}
.nscc-ips-portal-brand-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1.25rem 0.95rem;
    max-width: 72rem;
    margin: 0 auto;
}
.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-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: #ffffff;
    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;
    background: var(--ips-blue-dark, #212121);
    color: #eeeeee;
    border-top: 4px solid var(--ips-orange, #f26723);
}
.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.35rem 1.25rem 1rem;
}
.nscc-ips-portal-footer-grid h3 {
    font-family: var(--ips-font-head);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 0.5rem;
}
.nscc-ips-portal-footer-grid p {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #cccccc;
}
.nscc-ips-portal-footer-grid a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.nscc-ips-portal-footer-grid a:hover {
    color: var(--ips-orange, #f26723);
}
.nscc-ips-portal-footer-logo {
    max-width: 120px;
    height: auto;
    margin-bottom: 0.5rem;
    filter: brightness(0) invert(1);
}
.nscc-ips-portal-footer-note {
    font-size: 0.74rem !important;
    color: #aaaaaa !important;
}
.nscc-ips-portal-footer-copy {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.65rem 1.25rem 0.85rem;
    text-align: center;
    font-size: 0.72rem;
    color: #999999;
    max-width: 72rem;
    margin: 0 auto;
}
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-practice-banner {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(217, 119, 6, 0.35);
    background: rgba(251, 191, 36, 0.12);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-primary);
}
.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(--surface-elevated, #fff);
}
.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(--surface-elevated, #fff);
    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: 2px solid #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: 2px solid #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: #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: #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 + /demo2/employee-mobile) ?? */
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: 2px solid #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: 1.5px solid #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: 1.5px solid #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: 2px solid #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: 2px solid #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: 2px solid #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: 1.5px solid #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: 2px solid #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: 2px solid #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-demo2-bo-fs .dispatch-ticker,
html.nscc-finance-shell .dispatch-ticker,
html.nscc-demo2-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;
    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.sage-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 > .sage-erp-tab-panel,
#ops-field-view .master-data-shell--ops > .nscc-finance-panel,
#ops-field-view .master-data-shell--ops > .sage-erp-tab-panel,
#back-office-payroll-panel > .nscc-finance-panel,
#back-office-payroll-panel > .sage-erp-tab-panel,
#back-office-view #back-office-payroll-panel .sage-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.sage-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 .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav #back-office-payroll-panel > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav #ops-field-view .sage-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-demo2-bo-fs body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-demo2-bo-fs body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-demo2-bo-fs body.nscc-bo-chrome-tabs #back-office-payroll-panel > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #back-office-payroll-panel > .sage-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,
.sage-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: 2px solid #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 .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav body[data-active-top-tab="back-office"] #executive-dashboard-view .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav body[data-active-top-tab="back-office"] #back-office-payroll-panel .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav body[data-active-top-tab="back-office"] #ops-field-view .sage-erp-tabs.nscc-tab-groups,
html.nscc-finance-shell body[data-active-top-tab="back-office"] #accounting-view .sage-erp-tabs.nscc-tab-groups,
html.nscc-finance-shell body[data-active-top-tab="back-office"] #back-office-payroll-panel .sage-erp-tabs.nscc-tab-groups,
html.nscc-finance-shell body[data-active-top-tab="back-office"] #ops-field-view .sage-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;
    gap: 0.28rem;
    max-width: 100%;
    align-items: flex-end;
    padding-left: 0;
    margin: 0;
}
/* Folder-tab buttons ? fixed 2-line height so every tab matches */
.sage-erp-tabs .sage-erp-tab-btn,
.nscc-tab-groups .sage-erp-tab-btn {
    white-space: normal;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin: 0 0 -2px 0;
    padding: 0.22rem 0.55rem 0.28rem;
    min-width: 4.75rem;
    width: min-content;
    min-height: var(--nscc-folder-tab-h, 2.55rem);
    max-width: 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid #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;
}
.sage-erp-tab-btn .nscc-folder-tab-label {
    display: inline-block;
    white-space: normal;
    line-height: 1.1;
    text-align: center;
}
.sage-erp-tab-btn .nscc-folder-tab-label br { display: block; }
.sage-erp-tabs .sage-erp-tab-btn:first-child,
.nscc-tab-group__tabs .sage-erp-tab-btn:first-child {
    margin-left: 0;
}
.sage-erp-tabs .sage-erp-tab-btn:hover,
.nscc-tab-groups .sage-erp-tab-btn:hover {
    z-index: 2;
    background: var(--bg-raised);
    color: var(--chrome-folder-ink);
    transform: translateY(1px);
}
.sage-erp-tabs .sage-erp-tab-btn.active,
.nscc-tab-groups .sage-erp-tab-btn.active,
.sage-erp-tabs .sage-erp-tab-btn[aria-selected="true"],
.nscc-tab-groups .sage-erp-tab-btn[aria-selected="true"],
html.nscc-left-nav .sage-erp-tabs .sage-erp-tab-btn.active,
html.nscc-finance-shell .sage-erp-tabs .sage-erp-tab-btn.active {
    z-index: 4;
    color: var(--text-inverse) !important;
    background: var(--chrome-folder-active) !important;
    border: 2px solid #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;
}
.sage-erp-tabs .sage-erp-tab-btn--mode,
.nscc-tab-groups .sage-erp-tab-btn--mode,
html.nscc-left-nav .sage-erp-tabs .sage-erp-tab-btn--mode,
html.nscc-finance-shell .sage-erp-tabs .sage-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);
}
.sage-erp-tabs .sage-erp-tab-btn--mode:hover,
.nscc-tab-groups .sage-erp-tab-btn--mode:hover {
    background: #f4f4f5 !important;
    color: #18181b !important;
    border-style: solid !important;
    border-color: #3f3f46 !important;
    border-bottom: none !important;
    transform: translateY(1px);
}
.sage-erp-tabs .sage-erp-tab-btn--mode.active,
.nscc-tab-groups .sage-erp-tab-btn--mode.active,
.sage-erp-tabs .sage-erp-tab-btn--mode[aria-selected="true"],
.nscc-tab-groups .sage-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 */
.sage-erp-tab-panel.active,
.nscc-finance-panel.sage-erp-tab-panel,
#accounting-view .sage-erp-tab-panel,
#ops-field-view .sage-erp-tab-panel,
#back-office-payroll-panel .sage-erp-tab-panel,
#executive-dashboard-view .sage-erp-tab-panel,
.exec-dash-panel {
    border: 2px solid #000000;
    border-top: none;
    border-radius: 0 10px 10px 10px;
    background: var(--chrome-folder-panel-bg, var(--bg-card));
    margin-top: 0;
    padding: 0.85rem 0.9rem 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 sage-erp-tab-btn */
.nscc-tab-groups .sub-nav-btn,
.sub-nav-panel .nscc-tab-groups .sub-nav-btn,
#live-ops-header .sage-erp-tab-btn,
#planner-header .sage-erp-tab-btn {
    white-space: normal;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin: 0 0 -1px 0;
    padding: 0.22rem 0.55rem 0.28rem;
    min-width: 4.75rem;
    width: min-content;
    min-height: var(--nscc-folder-tab-h, 2.55rem);
    max-width: 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid #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 > .sage-erp-tab-btn:first-child,
#planner-header .nscc-tab-group__tabs > .sage-erp-tab-btn:first-child {
    margin-left: 0;
}
.nscc-tab-groups .sub-nav-btn:hover,
#live-ops-header .sage-erp-tab-btn:hover,
#planner-header .sage-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 .sage-erp-tab-btn.active,
#planner-header .sage-erp-tab-btn.active,
#live-ops-header .sage-erp-tab-btn[aria-selected="true"],
#planner-header .sage-erp-tab-btn[aria-selected="true"] {
    z-index: 4;
    color: #f7f1e4 !important;
    background: var(--chrome-folder-active) !important;
    border: 2px solid #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: #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 .sage-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;
}
/* Overview landing screens ? title card matches Master Data / chrome titles */
.nscc-overview-intro {
    margin: 0 0 0.85rem;
    max-width: none;
}
.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);
}
.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(--surface, #fff);
    border: 2px solid #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(--surface, #fff);
}
.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: #3f3f46;
    color: #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-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: 2px solid #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: #fafafa;
    color: #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: 2px solid #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 (auto-built from personnel reportsTo) — light default, dark override */
.nscc-org-shell {
    --nscc-org-panel-bg: var(--bg-sunken, #f4f4f5);
    --nscc-org-panel-border: #000000;
    --nscc-org-panel-title: var(--text-primary, #18181b);
    --nscc-org-kpi-bg: var(--bg-card, #ffffff);
    --nscc-org-kpi-border: #000000;
    --nscc-org-kpi-label: var(--text-muted, #71717a);
    --nscc-org-kpi-value: var(--text-primary, #18181b);
    --nscc-org-mode-bg: var(--bg-card, #ffffff);
    --nscc-org-mode-border: #000000;
    --nscc-org-mode-ink: var(--text-primary, #18181b);
    --nscc-org-mode-active-bg: var(--nav-selected-bg, #e4e4e7);
    --nscc-org-mode-active-border: #000000;
    --nscc-org-mode-active-ink: var(--text-primary, #18181b);
    --nscc-org-card-bg: var(--bg-card, #ffffff);
    --nscc-org-card-border: #000000;
    --nscc-org-card-shadow: 2px 2px 0 #000000;
    --nscc-org-card-name: var(--text-primary, #18181b);
    --nscc-org-card-title: var(--text-secondary, #52525b);
    --nscc-org-card-meta: var(--text-muted, #71717a);
    --nscc-org-line: var(--border-strong, #a1a1aa);
    --nscc-org-empty-ink: var(--text-muted, #71717a);
    --nscc-org-dir-bg: var(--bg-card, #ffffff);
    --nscc-org-dir-border: #000000;
    --nscc-org-dir-ink: var(--text-primary, #18181b);
    --nscc-org-lead-border: #7c3aed;
    --nscc-org-root-glow: rgba(24, 24, 27, 0.08);
}
:root.dark .nscc-org-shell,
body.dark-theme .nscc-org-shell {
    --nscc-org-panel-bg:
        radial-gradient(ellipse at top, rgba(228, 228, 231, 0.08), transparent 55%),
        rgba(2, 6, 23, 0.35);
    --nscc-org-panel-border: rgba(148, 163, 184, 0.28);
    --nscc-org-panel-title: #e2e8f0;
    --nscc-org-kpi-bg: rgba(15, 23, 42, 0.45);
    --nscc-org-kpi-border: rgba(148, 163, 184, 0.28);
    --nscc-org-kpi-label: #94a3b8;
    --nscc-org-kpi-value: #f8fafc;
    --nscc-org-mode-bg: rgba(15, 23, 42, 0.55);
    --nscc-org-mode-border: rgba(148, 163, 184, 0.45);
    --nscc-org-mode-ink: #e2e8f0;
    --nscc-org-mode-active-bg: rgba(228, 228, 231, 0.14);
    --nscc-org-mode-active-border: rgba(228, 228, 231, 0.55);
    --nscc-org-mode-active-ink: #f4f4f5;
    --nscc-org-card-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.92));
    --nscc-org-card-border: rgba(148, 163, 184, 0.4);
    --nscc-org-card-shadow: 0 8px 20px rgba(2, 6, 23, 0.35);
    --nscc-org-card-name: #f8fafc;
    --nscc-org-card-title: #cbd5e1;
    --nscc-org-card-meta: #94a3b8;
    --nscc-org-line: rgba(148, 163, 184, 0.55);
    --nscc-org-empty-ink: #94a3b8;
    --nscc-org-dir-bg: rgba(15, 23, 42, 0.35);
    --nscc-org-dir-border: rgba(148, 163, 184, 0.28);
    --nscc-org-dir-ink: #e2e8f0;
    --nscc-org-lead-border: rgba(167, 139, 250, 0.5);
    --nscc-org-root-glow: rgba(228, 228, 231, 0.12);
}
.nscc-org-shell {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
}
.nscc-org-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.nscc-org-modes {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0.15rem 0 0.35rem;
}
.nscc-org-mode-btn {
    border: 2px solid var(--nscc-org-mode-border);
    background: var(--nscc-org-mode-bg);
    color: var(--nscc-org-mode-ink);
    border-radius: 8px;
    padding: 0.28rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.nscc-org-mode-btn.is-active {
    border-color: var(--nscc-org-mode-active-border);
    background: var(--nscc-org-mode-active-bg);
    color: var(--nscc-org-mode-active-ink);
}
.nscc-org-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.35rem 0 0.75rem;
}
.nscc-org-kpi {
    border: 2px solid var(--nscc-org-kpi-border);
    border-radius: 10px;
    background: var(--nscc-org-kpi-bg);
    padding: 0.55rem 0.7rem;
    box-shadow: 2px 2px 0 #000000;
}
:root.dark .nscc-org-kpi,
body.dark-theme .nscc-org-kpi {
    box-shadow: none;
}
.nscc-org-kpi__label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nscc-org-kpi-label);
}
.nscc-org-kpi__value {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--nscc-org-kpi-value);
}
.nscc-org-chart-panel {
    border: 2px solid var(--nscc-org-panel-border);
    border-radius: 12px;
    background: var(--nscc-org-panel-bg);
    padding: 0.85rem 0.75rem 1rem;
    margin-bottom: 0.75rem;
    overflow-x: auto;
    max-height: min(62vh, 720px);
    overflow-y: auto;
}
.nscc-org-chart-panel__title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--nscc-org-panel-title);
}
.nscc-org-viewport {
    min-width: 100%;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}
.nscc-org-tree,
.nscc-org-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nscc-org-tree {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    min-width: min(100%, 720px);
    padding: 0.25rem 0.5rem 0.5rem;
    width: max-content;
    margin-inline: auto;
}
.nscc-org-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.nscc-org-card {
    min-width: 150px;
    max-width: 210px;
    border: 2px solid var(--nscc-org-card-border);
    border-radius: 10px;
    background: var(--nscc-org-card-bg);
    padding: 0.55rem 0.65rem 0.6rem;
    text-align: center;
    box-shadow: var(--nscc-org-card-shadow);
    position: relative;
    z-index: 1;
}
.nscc-org-card--root {
    border-color: var(--nscc-org-card-border);
    box-shadow: 0 0 0 1px var(--nscc-org-root-glow), var(--nscc-org-card-shadow);
}
.nscc-org-card--lead {
    border-color: var(--nscc-org-lead-border);
}
.nscc-org-card__name {
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--nscc-org-card-name);
    line-height: 1.25;
}
.nscc-org-card__title {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--nscc-org-card-title);
    line-height: 1.3;
}
.nscc-org-card__meta {
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--nscc-org-card-meta);
}
.nscc-org-chart-panel--wide .nscc-org-card {
    min-width: 128px;
    max-width: 168px;
    padding: 0.45rem 0.5rem 0.5rem;
}
.nscc-org-chart-panel--wide .nscc-org-card__name {
    font-size: 0.78rem;
}
.nscc-org-chart-panel--wide .nscc-org-children {
    gap: 0.55rem;
}
.nscc-org-children {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    position: relative;
}
.nscc-org-children::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 0.85rem;
    background: var(--nscc-org-line);
    transform: translateX(-50%);
}
.nscc-org-node:not(:only-child) {
    padding-top: 0.85rem;
    position: relative;
}
.nscc-org-node:not(:only-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 0.85rem;
    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: 2px;
    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: 1.25rem;
    text-align: center;
    color: var(--nscc-org-empty-ink);
}
.nscc-org-directory {
    margin-top: 0.35rem;
    border: 2px solid var(--nscc-org-dir-border);
    border-radius: 10px;
    padding: 0.45rem 0.65rem 0.65rem;
    background: var(--nscc-org-dir-bg);
}
.nscc-org-directory > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--nscc-org-dir-ink);
    padding: 0.25rem 0;
}
:root.dark .nscc-org-kpi,
:root.dark .nscc-org-chart-panel,
:root.dark .nscc-org-card,
:root.dark .nscc-org-directory,
body.dark-theme .nscc-org-kpi,
body.dark-theme .nscc-org-chart-panel,
body.dark-theme .nscc-org-card,
body.dark-theme .nscc-org-directory {
    border-width: 1px;
}
@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 > .sage-erp-tabs,
#ops-field-view .master-data-shell--ops > .sage-erp-tabs,
#back-office-payroll-panel > .sage-erp-tabs,
#executive-dashboard-view .sage-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 .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #ops-field-view .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #back-office-payroll-panel .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #executive-dashboard-view .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #daily-pulse-view > .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .sage-erp-tabs,
html.nscc-left-nav body.nscc-bo-chrome-tabs #back-office-payroll-panel > .sage-erp-tabs,
html.nscc-left-nav.nscc-demo2-bo-fs body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-demo2-bo-fs body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-demo2-bo-fs body.nscc-bo-chrome-tabs #back-office-payroll-panel > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #accounting-view .master-data-shell--finance > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #ops-field-view .master-data-shell--ops > .sage-erp-tabs.nscc-tab-groups,
html.nscc-left-nav.nscc-finance-shell body.nscc-bo-chrome-tabs #back-office-payroll-panel > .sage-erp-tabs.nscc-tab-groups {
    display: none !important;
}
/* Chrome-hosted strips must stay visible (park moves the same .sage-erp-tabs node here) */
html.nscc-left-nav #nscc-chrome-folder-tabs.is-visible .sage-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"] #leadership-finance-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-demo2-bo-fs #new-trip-btn {
    display: none !important;
}
html.nscc-demo2-bo-fs,
html.nscc-finance-shell {
    height: 100%;
}
html.nscc-demo2-bo-fs body,
html.nscc-finance-shell body,
body.nscc-demo2-bo-fs,
body.nscc-finance-shell {
    height: 100vh;
    overflow: hidden;
}
html.nscc-demo2-bo-fs .app-container,
html.nscc-finance-shell .app-container,
body.nscc-demo2-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-demo2-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-demo2-bo-fs[data-active-top-tab="back-office"] .main-content {
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}
html.nscc-demo2-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-demo2-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-demo2-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-demo2-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-demo2-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-demo2-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-demo2-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-demo2-bo-fs #tab-daily-pulse,
html.nscc-finance-shell #tab-live-ops,
html.nscc-demo2-bo-fs #tab-live-ops,
html.nscc-finance-shell #tab-forms,
html.nscc-demo2-bo-fs #tab-forms,
html.nscc-finance-shell #tab-reports,
html.nscc-demo2-bo-fs #tab-reports,
html.nscc-finance-shell #tab-communication,
html.nscc-demo2-bo-fs #tab-communication,
html.nscc-finance-shell #tab-ledger-audit,
html.nscc-demo2-bo-fs #tab-ledger-audit,
html.nscc-finance-shell #tab-planner,
html.nscc-demo2-bo-fs #tab-planner,
html.nscc-finance-shell .sub-nav-panel[data-top-tab="daily-pulse"],
html.nscc-demo2-bo-fs .sub-nav-panel[data-top-tab="daily-pulse"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="live-ops"],
html.nscc-demo2-bo-fs .sub-nav-panel[data-top-tab="live-ops"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="form-management"],
html.nscc-demo2-bo-fs .sub-nav-panel[data-top-tab="form-management"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="reports"],
html.nscc-demo2-bo-fs .sub-nav-panel[data-top-tab="reports"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="communication"],
html.nscc-demo2-bo-fs .sub-nav-panel[data-top-tab="communication"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="ledger-audit"],
html.nscc-demo2-bo-fs .sub-nav-panel[data-top-tab="ledger-audit"],
html.nscc-finance-shell .sub-nav-panel[data-top-tab="planner"],
html.nscc-demo2-bo-fs .sub-nav-panel[data-top-tab="planner"],
html.nscc-finance-shell #new-trip-btn,
html.nscc-demo2-bo-fs #new-trip-btn,
html.nscc-finance-shell #sidebar-demo-notice,
html.nscc-demo2-bo-fs #sidebar-demo-notice,
html.nscc-finance-shell #primary-view,
html.nscc-demo2-bo-fs #primary-view,
html.nscc-finance-shell #card-view,
html.nscc-demo2-bo-fs #card-view,
html.nscc-finance-shell #dispatch-timeline-view,
html.nscc-demo2-bo-fs #dispatch-timeline-view,
html.nscc-finance-shell #courier-view,
html.nscc-demo2-bo-fs #courier-view,
html.nscc-finance-shell #gantt-view,
html.nscc-demo2-bo-fs #gantt-view,
html.nscc-finance-shell #map-view,
html.nscc-demo2-bo-fs #map-view,
html.nscc-finance-shell #patrol-view,
html.nscc-demo2-bo-fs #patrol-view,
html.nscc-finance-shell #patrol-officers-view,
html.nscc-demo2-bo-fs #patrol-officers-view,
html.nscc-finance-shell #patrol-schedule-view,
html.nscc-demo2-bo-fs #patrol-schedule-view,
html.nscc-finance-shell #security-guards-view,
html.nscc-demo2-bo-fs #security-guards-view,
html.nscc-finance-shell #guard-schedule-view,
html.nscc-demo2-bo-fs #guard-schedule-view,
html.nscc-finance-shell #daily-pulse-view,
html.nscc-demo2-bo-fs #daily-pulse-view,
html.nscc-finance-shell #main-daily-pulse-container,
html.nscc-demo2-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: #000000;
}
.bo-quick-nav__btn.is-active {
    background: var(--chrome-folder-active);
    color: var(--text-inverse);
    border-color: #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: #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 .sage-connect-header {
    flex: 0 0 auto;
    margin-bottom: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--bg-card);
    border: 2px solid #000000;
    border-radius: var(--radius-md, 10px);
}
.master-data-shell--bo-connect .sage-connect-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.master-data-shell--bo-connect .sage-connect-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}
.master-data-shell--bo-connect .sage-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 .sage-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: 2px solid #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: 2px solid #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.sage-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.sage-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.sage-queue-table-wrap--bo-fill,
.master-data-shell--bo-connect .sage-queue-table-wrap--bo-fill {
    margin-top: 0;
    background: var(--bg-card);
    border: 2px solid #000000;
    border-radius: var(--radius-md, 10px);
}
.bo-table-scroll-wrap.sage-queue-table-wrap--bo-fill .master-data-table-shell,
.master-data-shell--bo-connect .sage-queue-table-wrap--bo-fill .master-data-table-shell,
.bo-table-scroll-wrap.sage-queue-table-wrap--bo-fill .master-data-table-shell--locations-fill,
.bo-table-scroll-wrap.sage-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.sage-queue-table-wrap--bo-fill .master-data-table thead th,
.master-data-shell--bo-connect .sage-queue-table-wrap--bo-fill .master-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.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.sage-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 .sage-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: 2px solid #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 .sage-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 .sage-queue-table th,
.master-data-shell--bo-connect .sage-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 .sage-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 .sage-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 .sage-table-empty,
.master-data-shell--bo-connect .sage-queue-table .sage-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 .md-loc-rates-group-title {
    font-size: 0.68rem !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 > .sage-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 .sage-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) .sage-erp-tab-panel.custom-export-tab-panel,
#custom-export-view.view-section.active:not(.nscc-view-fs) .sage-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: 2px solid #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: #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: 2px solid #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.sage-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: 2px solid #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;
}

/* Sage 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:not(.nscc-view-fs) .master-data-shell--sage-connect,
#back-office-view.view-section.active:not(.nscc-view-fs) #back-office-sage-panel,
#back-office-view.view-section.active:not(.nscc-view-fs) #back-office-sage-panel .sage-erp-tab-panel.active,
#back-office-view.view-section.active:not(.nscc-view-fs) #sage-erp-panel-today.active,
#back-office-view.view-section.active:not(.nscc-view-fs) #sage-erp-panel-today .sage-bo-section--upload {
    overflow: visible;
    flex: none;
    min-height: auto;
    min-width: 0;
}
#back-office-view.view-section.active:not(.nscc-view-fs) #sage-erp-panel-today .sage-bo-section--upload {
    display: block;
}
#back-office-view.view-section.active:not(.nscc-view-fs) #sage-erp-panel-today .sage-queue-table-wrap--fill {
    flex: none;
    max-height: min(50vh, 28rem);
    min-height: 8rem;
    overflow: auto;
}
#back-office-view.view-section.active.nscc-view-fs {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}
#back-office-view .master-data-shell--sage-connect {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: none !important;
    margin: 0;
    padding: 0.75rem 1rem 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#back-office-view .sage-connect-header {
    flex: 0 0 auto;
    margin-bottom: 0.65rem;
    min-width: 0;
}
#back-office-view .sage-connect-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}
#back-office-view .sage-connect-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}
#back-office-view .sage-connect-role-badge {
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
    align-self: center;
}
#back-office-view #back-office-sage-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}
#back-office-view .sage-erp-panel--flat .sage-erp-tabs {
    flex: 0 0 auto;
}
#back-office-view .sage-erp-panel--flat .sage-erp-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
#back-office-view .sage-erp-panel--flat .sage-erp-tab-panel.active {
    display: flex;
    flex-direction: column;
}
#back-office-view #sage-erp-panel-today.active {
    min-width: 0;
    min-height: 0;
    overflow: auto;
}
#back-office-view #sage-erp-panel-today .sage-bridge-health-line,
#back-office-view #sage-erp-panel-today .sage-request-status-line,
#back-office-view #sage-erp-panel-today .sage-today-actions,
#back-office-view #sage-erp-panel-today .sage-today-hint,
#back-office-view #sage-erp-panel-today .sage-bo-section:not(.sage-bo-section--upload),
#back-office-view #sage-erp-panel-today .sage-erp-footnote {
    flex: 0 0 auto;
    min-width: 0;
}
#back-office-view #sage-erp-panel-today .sage-bo-section--upload {
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
#back-office-view #sage-erp-panel-today .sage-bo-section-head,
#back-office-view #sage-erp-panel-today .sage-outbound-controls,
#back-office-view #sage-erp-panel-today .sage-bo-actions {
    flex: 0 0 auto;
    min-width: 0;
}
#back-office-view #sage-erp-panel-today .sage-outbound-controls,
#back-office-view #sage-erp-panel-invoices .sage-invoice-types,
#back-office-view #sage-erp-panel-admin .sage-inbound-summary,
#back-office-view #sage-erp-panel-admin .sage-cli-block,
#back-office-view #sage-erp-panel-admin .sage-escalation-root {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
#back-office-view #sage-erp-panel-today .sage-queue-table-wrap--fill {
    flex: 0 0 auto;
    min-height: 8rem;
    max-height: min(42vh, 24rem);
    min-width: 0;
    overflow: auto;
}
#back-office-view .sage-queue-table-wrap {
    min-width: 0;
    overflow: auto;
}
#back-office-view .sage-queue-table th,
#back-office-view .sage-queue-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}
#back-office-view .sage-queue-table .sage-queue-nowrap {
    white-space: nowrap;
}
#back-office-view .sage-bridge-health-line,
#back-office-view .sage-request-status-line,
#back-office-view .sage-queue-counts {
    overflow-wrap: anywhere;
    word-break: break-word;
}
#back-office-view .sage-connect-header-row > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}
#back-office-view .sage-connect-header-row .nscc-toolbar-actions-end {
    flex: 0 0 auto;
}
#back-office-view .sage-queue-table-wrap--compact {
    max-height: min(28vh, 240px);
    flex: 0 0 auto;
}
#back-office-view.nscc-view-fs .master-data-shell--sage-connect {
    height: 100%;
    padding: 0.5rem 0.65rem 0.65rem;
}
#back-office-view.nscc-view-fs #back-office-sage-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
#back-office-view.nscc-view-fs .sage-erp-tab-panel.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
#back-office-view.nscc-view-fs #sage-erp-panel-today.active {
    overflow: auto;
}
#back-office-view.nscc-view-fs #sage-erp-panel-today .sage-queue-table-wrap--fill {
    min-height: 10rem;
    max-height: min(38vh, 22rem);
}
#back-office-view.nscc-view-fs .sage-queue-table-wrap--compact {
    max-height: min(32vh, 280px);
}
#back-office-view #sage-erp-panel-admin .sage-cli-block {
    overflow-x: auto;
    white-space: pre-wrap;
}

/* 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-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 (Demo2) */
.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);
}
.md-loc-service-col {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
}
.md-loc-service-box {
    border: 2px solid #000000;
    border-radius: var(--radius-md, 10px);
    background: var(--bg-sunken);
    padding: 0.5rem 0.55rem;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
}
.md-loc-service-box.is-muted {
    opacity: 0.55;
}
.md-loc-service-box--courier.is-collapsed {
    min-height: 0;
}
.md-loc-courier-head {
    margin-bottom: 0.15rem;
}
.md-loc-courier-collapsed-note {
    display: none;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-secondary);
    padding: 0.1rem 0 0.05rem;
}
.md-loc-service-box--courier.is-collapsed .md-loc-courier-collapsed-note {
    display: block;
}
.md-loc-courier-details {
    display: none;
}
.md-loc-service-box--courier.is-expanded .md-loc-courier-details {
    display: block;
}
.md-loc-rate-sheet-trip-hdr {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.md-loc-rates-group-th {
    text-align: center;
    vertical-align: bottom;
    padding: 0.55rem 0.5rem !important;
    min-width: 0;
}
.md-loc-rates-group-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}
.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;
}
.md-loc-rate-sheet-head {
    display: grid;
    grid-template-columns: var(--md-loc-rate-grid);
    gap: 0.15rem 0.4rem;
    align-items: end;
    padding-bottom: 0.3rem;
    margin-bottom: 0.1rem;
    border-bottom: 1px solid var(--border);
}
.md-loc-rate-sheet-head.is-muted {
    opacity: 0.55;
}
.md-loc-rate-col-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.2;
    min-width: 0;
}
.md-loc-rate-sheet-check--empty {
    min-height: 1.1rem;
}
.master-data-table td.md-loc-rates-cell {
    vertical-align: top;
    padding: 0.55rem 0.6rem !important;
}
.master-data-table td.md-loc-rates-cell--courier,
.master-data-table th.md-loc-rates-group-th--courier,
.master-data-table td.md-loc-rates-cell--patrol,
.master-data-table th.md-loc-rates-group-th--patrol,
.master-data-table td.md-loc-rates-cell--guard,
.master-data-table th.md-loc-rates-group-th--guard {
    min-width: 24rem;
    width: 24rem;
}
.md-loc-service-col.is-muted,
.md-loc-trip-types.is-muted {
    opacity: 0.55;
}
.md-loc-trip-types {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-left: 1rem;
    margin-top: 0.15rem;
}
.md-loc-rate-sheet {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.md-loc-rate-sheet.is-muted {
    opacity: 0.55;
}
.md-loc-rate-sheet-row {
    display: grid;
    grid-template-columns: var(--md-loc-rate-grid);
    grid-template-rows: auto auto;
    gap: 0.15rem 0.4rem;
    align-items: start;
}
.md-loc-rate-sheet-row.is-muted {
    opacity: 0.55;
}
.md-loc-rate-sheet-row--trip .md-loc-rate-sheet-check {
    padding-left: 1rem;
}
.md-loc-rate-sheet-check {
    min-width: 0;
    padding-top: 0.05rem;
}
.md-loc-rate-meta-field {
    display: block;
    min-width: 0;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-primary);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.md-loc-rate-meta-field--desc {
    grid-column: 2 / -1;
    grid-row: 2;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.66rem;
    line-height: 1.35;
    font-variant-numeric: normal;
}
.md-loc-rate-desc-prefix {
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-right: 0.2rem;
}
.md-loc-rate-sheet-row--courier .md-loc-rate-meta-field {
    font-size: 0.72rem;
}
.md-loc-rate-sheet-row--trip .md-loc-rate-meta-field {
    font-size: 0.68rem;
}
.md-loc-rate-sheet-row--courier-pay .md-loc-rate-sheet-check {
    padding-left: 1.75rem;
}
.md-loc-rate-sheet-check--sub {
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
}
.md-loc-rate-sheet-row--courier-pay .md-loc-rate-meta-field {
    font-size: 0.66rem;
}
.md-loc-rate-meta-stack {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.md-loc-rate-meta-inline-desc {
    font-size: 0.62rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.3;
    overflow-wrap: anywhere;
    font-variant-numeric: normal;
}
.md-loc-rate-sheet--service .md-loc-rate-meta-field {
    font-size: 0.72rem;
    font-weight: 800;
}
.md-loc-rate-meta-field--desc,
.md-loc-rate-sheet--service .md-loc-rate-meta-field--desc,
.md-loc-rate-sheet-row--courier .md-loc-rate-meta-field--desc,
.md-loc-rate-sheet-row--trip .md-loc-rate-meta-field--desc {
    font-weight: 400;
}
.md-loc-rate-meta-label {
    display: none;
}
.md-loc-rate-meta-val {
    min-width: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: inherit;
}
.md-loc-service-rate-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
    padding-top: 0.15rem;
}
.md-loc-rate-action-btn {
    white-space: nowrap;
}
.md-loc-courier-rate-label {
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.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: 2px solid #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--rates {
    grid-column: span 1;
    min-width: 240px;
}
.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: 2px solid #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-sage-col,
.master-data-table--locations td.md-loc-legacy-sage-cell {
    min-width: 11rem;
    width: 12rem;
    max-width: 16rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.md-loc-info-box--legacy-sage {
    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-sage.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-trip-type {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
    cursor: pointer;
}
.md-loc-trip-rate {
    flex-shrink: 0;
}
.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-rates-group-th .md-th-editable-mark::before {
    font-size: 1em;
}
.md-loc-rate-split-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
    gap: 0.4rem 0.55rem;
    align-items: start;
    padding: 0.15rem 0;
}
.md-loc-rate-split-row--service {
    margin-bottom: 0.1rem;
}
.md-loc-rate-check-col {
    padding-top: 0.2rem;
}
.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;
}
.md-loc-trip-type--display {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    cursor: default;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.md-loc-trip-type--display input:disabled {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    opacity: 1;
    accent-color: #000;
    cursor: default;
    pointer-events: none;
}
/* 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;
}
.md-loc-rate-display {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.3;
}
.md-loc-rate-display.is-muted {
    opacity: 0.55;
}
.md-loc-rate-display--detail {
    padding-left: 1.15rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.md-loc-rate-display--readonly {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}
.md-loc-rate-display--readonly .md-loc-rate-display-val {
    cursor: default;
}
.md-loc-rate-display-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 0;
}
.md-loc-rate-display-label {
    flex-shrink: 0;
    color: var(--text-muted);
    font-weight: 600;
}
.md-loc-rate-display-val {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: 600;
}
.md-loc-rate-fields-col {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.md-loc-rate-fields-col.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.md-loc-svc-rate-current {
    font-size: 0.68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}
.md-loc-svc-rate-row {
    display: grid;
    grid-template-columns: minmax(3.5rem, 1fr) minmax(5.5rem, 1.1fr) minmax(5.5rem, 1.1fr);
    gap: 0.3rem;
    align-items: center;
}
.md-loc-svc-rate-field {
    width: 100%;
    min-width: 0;
    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.68rem;
    box-sizing: border-box;
}
.md-loc-svc-rate-field.md-loc-svc-rate-desc {
    width: 100%;
}
.md-loc-svc-rate-save {
    align-self: flex-start;
    padding: 2px 8px;
    font-size: 0.66rem;
    border: 1.5px solid var(--border);
}
.md-loc-svc-rate-summary {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding: 0.35rem 0.15rem 0.15rem 1rem;
    margin-top: 0.1rem;
}
.md-loc-svc-rate-summary-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.66rem;
    line-height: 1.35;
    color: var(--text-secondary);
    min-width: 0;
}
.md-loc-svc-rate-summary-line span:last-child,
.md-loc-svc-rate-summary-line strong {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}
.md-loc-svc-rate-summary-label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    flex-shrink: 0;
}
.md-loc-svc-rate-summary-line strong {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.loc-rate-grid-head--service,
.loc-rate-grid-row--service {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.75fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1fr);
}
.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: static;
    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: 2px solid #000000;
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    color: var(--text-primary);
}
.master-data-search:focus {
    outline: none;
    border-color: #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-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: 1px solid #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: 2px solid #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 #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 */
.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: 2px solid #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: 1.5px solid #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 #000000 !important;
    border-radius: 3px !important;
    cursor: pointer;
}
.gantt-shift-segment:hover {
    filter: brightness(1.1);
}

.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;
}

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

.nscc-pulse-action-strip {
    border: 2px solid #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: #fff;
    border: 2px solid #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;
}

.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: 2px solid #000;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-family: monospace;
    box-shadow: 2px 2px 0 #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: 2px solid #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: #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 #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;
    z-index: 11080;
    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 #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, #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, #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 */
.modal .nscc-trip-modal-tabs.sage-erp-tabs,
.modal .sage-erp-tabs.nscc-trip-modal-tabs {
    margin: 0 0 0;
    flex: 0 0 auto;
}
.modal .nscc-trip-modal-panel.sage-erp-tab-panel,
.modal .nscc-trip-modal-panel {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    border: 2px solid #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: #ffffff;
}

/* Any modal tab strip uses the same folder chrome as main screens */
.modal .sage-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: 2px solid #000000;
    overflow: visible;
    max-width: 100%;
    background: transparent !important;
    border-radius: 0 !important;
}
:root.dark .modal .sage-erp-tabs,
:root.dark .modal .nscc-tab-groups,
:root.dark .modal .support-modal-nav,
:root.dark .modal .nscc-employee-tabs,
body.dark-theme .modal .sage-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: #ffffff;
}
.modal .sage-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: 2px solid #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 .sage-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 .sage-erp-tab-btn.active,
.modal .sage-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: #f7f1e4 !important;
    background: var(--chrome-folder-active) !important;
    background-color: var(--chrome-folder-active) !important;
    border: 2px solid #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 .sage-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 .sage-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: #ffffff !important;
}
:root.dark .modal .sage-erp-tab-btn.active,
:root.dark .modal .sage-erp-tab-btn[aria-selected="true"],
:root.dark .modal .nscc-employee-tab.is-active,
body.dark-theme .modal .sage-erp-tab-btn.active,
body.dark-theme .modal .sage-erp-tab-btn[aria-selected="true"],
body.dark-theme .modal .nscc-employee-tab.is-active {
    border-color: #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: 2px solid #000;
    border-radius: 6px;
    background: #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: #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: #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: #000000;
    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: #000000;
    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: 2px solid #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) .modal-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) .modal-header,
    body.print-active #admin-settings-modal:has(#admin-changelog-section.print-section) > .modal-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;
    }
}

/* ===== 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, #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, #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;
}

/* ?? Location rate modal (Back Office ? Customers) ?? */
#location-rates-modal.modal.open,
#location-rates-history-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));
}
#location-rates-modal .modal-content.loc-rate-modal-content,
#location-rates-history-modal .modal-content.loc-rate-history-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;
}
#location-rates-modal .modal-body,
#location-rates-history-modal .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.loc-rate-modal-content,
.loc-rate-history-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--service {
    max-width: min(96vw, 640px);
    width: min(96vw, 640px);
}
.loc-rate-modal-content--courier {
    max-width: min(96vw, 760px);
    width: min(96vw, 760px);
}
.loc-rate-modal-content--courier .form-control-panel {
    padding: 0.28rem 0.38rem;
    font-size: 0.74rem;
    min-height: 0;
    width: 100%;
    max-width: 100%;
}
/* Courier Set Rates: one card per trip type ??? 2-col + 5-col grid overflowed Same-Day Bundled etc. */
.loc-rate-modal-content--courier .loc-rate-grid-head {
    display: none;
}
.loc-rate-modal-content--courier .loc-rate-grid-body--courier {
    grid-template-columns: 1fr;
    gap: 0.28rem;
}
.loc-rate-modal-content--courier .loc-rate-grid-block {
    overflow: hidden;
}
.loc-rate-modal-content--courier .loc-rate-grid-row,
.loc-rate-modal-content--courier .loc-rate-grid-row--courier-pay {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "type type type"
        "rate effective expiration"
        "desc desc desc";
    gap: 0.22rem 0.32rem;
    align-items: start;
}
.loc-rate-modal-content--courier .loc-rate-grid-type { grid-area: type; min-width: 0; }
.loc-rate-modal-content--courier .loc-rate-grid-rate { grid-area: rate; min-width: 0; }
.loc-rate-modal-content--courier .loc-rate-grid-effective { grid-area: effective; min-width: 0; }
.loc-rate-modal-content--courier .loc-rate-grid-expiration { grid-area: expiration; min-width: 0; }
.loc-rate-modal-content--courier .loc-rate-grid-description { grid-area: desc; min-width: 0; }
.loc-rate-modal-content--courier .loc-rate-grid-rate::before,
.loc-rate-modal-content--courier .loc-rate-grid-effective::before,
.loc-rate-modal-content--courier .loc-rate-grid-expiration::before,
.loc-rate-modal-content--courier .loc-rate-grid-description::before {
    display: block;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 0.12rem;
    line-height: 1.2;
}
.loc-rate-modal-content--courier .loc-rate-grid-rate::before { content: 'Rate'; }
.loc-rate-modal-content--courier .loc-rate-grid-effective::before { content: 'Effective'; }
.loc-rate-modal-content--courier .loc-rate-grid-expiration::before { content: 'Expiration'; }
.loc-rate-modal-content--courier .loc-rate-grid-description::before { content: 'Description'; }
.loc-rate-modal-content--courier .loc-rate-type-label--courier-pay {
    padding-left: 0;
}
.loc-rate-modal-content--courier .loc-rate-courier-pay-item .loc-rate-grid-row--courier-pay {
    padding-top: 0.12rem;
}
.loc-rate-history-modal-content {
    max-width: min(96vw, 960px);
    width: min(96vw, 960px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.loc-rate-modal-content .modal-header,
.loc-rate-history-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-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.loc-rate-history-btn {
    font-weight: 800;
    white-space: nowrap;
}
.loc-rate-modal-content .modal-header .modal-title-strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 1.05rem;
}
#location-rates-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;
}
#location-rates-history-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.05rem 0.1rem 0.15rem;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}
.loc-rate-history-intro {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
    flex-shrink: 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,
.loc-rate-history-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-history-panel {
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
}
.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;
}
.loc-rate-none-note {
    font-size: 0.72rem;
    color: #FF9500;
    margin-bottom: 0.5rem;
}
.loc-rate-grid-head,
.loc-rate-grid-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.72fr) minmax(0, 0.82fr) minmax(0, 0.82fr) minmax(0, 1fr);
    gap: 0.28rem 0.35rem;
    align-items: center;
    min-width: 0;
}
.loc-rate-grid-head {
    font-size: 0.58rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.15rem 0.22rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.22rem;
}
.loc-rate-grid-head span:last-child {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.loc-rate-grid-body {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}
.loc-rate-grid-body--courier {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.22rem 0.32rem;
}
.loc-rate-grid-body--courier .loc-rate-grid-block--span-all {
    grid-column: 1 / -1;
}
.loc-rate-grid-block {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.28rem 0.36rem 0.3rem;
    background: var(--bg-sunken);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
.loc-rate-grid-block.is-disabled { opacity: 0.55; }
.loc-rate-courier-pay {
    margin-top: 0.18rem;
    padding-top: 0.22rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}
.loc-rate-courier-pay-item.is-disabled { opacity: 0.55; }
.loc-rate-type-label--courier-pay {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding-left: 1.35rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.loc-rate-grid-row--courier-pay .loc-rate-input-rate,
.loc-rate-grid-row--courier-pay .loc-rate-input-date,
.loc-rate-grid-desc--courier-pay .loc-rate-input-note {
    font-size: 0.68rem;
}
.loc-rate-grid-desc--courier-pay {
    margin-top: 0.3rem;
}
.loc-rate-grid-desc {
    grid-column: 1 / -1;
    margin-top: 0.45rem;
    padding: 0 0.1rem;
}
.loc-rate-type-label {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.loc-rate-input-date,
.loc-rate-input-note {
    font-size: 0.74rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.loc-rate-type-label--plain {
    display: block;
    padding-left: 1.35rem;
    cursor: default;
    overflow-wrap: anywhere;
}
.loc-rate-type-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #000000;
    flex-shrink: 0;
}
.loc-rate-input-rate { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.loc-rate-two-person-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0 0 0.25rem;
}
.loc-rate-two-person-toggle input { width: 16px; height: 16px; accent-color: #000000; }
.loc-rate-two-person-note {
    font-size: 0.66rem;
    color: var(--text-secondary);
    margin: 0 0 0.3rem;
    line-height: 1.3;
}
.loc-rate-save-btn {
    margin-top: 0.28rem;
    flex-shrink: 0;
}
.loc-rate-modal-content--courier .loc-rate-save-btn {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.loc-rate-history-wrap {
    flex: 0 0 auto;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 6px;
}
#location-rates-history-body .loc-rate-history-wrap {
    max-height: none;
}
.loc-rate-history-wrap thead th {
    position: static;
    z-index: 1;
    background: var(--bg-sunken);
    box-shadow: none;
}
.loc-rate-history-table { width: 100%; border-collapse: collapse; }
.loc-rate-history-table--courier,
.loc-rate-history-table--service {
    table-layout: fixed;
}
.loc-rate-history-table--courier {
    min-width: min(100%, 48rem);
}
.loc-rate-history-table--courier th:nth-child(1) { width: 12%; }
.loc-rate-history-table--courier th:nth-child(2) { width: 8%; }
.loc-rate-history-table--courier th:nth-child(3),
.loc-rate-history-table--courier th:nth-child(5),
.loc-rate-history-table--courier th:nth-child(7) { width: 18%; }
.loc-rate-history-table--courier th:nth-child(4),
.loc-rate-history-table--courier th:nth-child(6),
.loc-rate-history-table--courier th:nth-child(8) { width: 10%; }
.loc-rate-history-table--service th:nth-child(1) { width: 16%; }
.loc-rate-history-table--service th:nth-child(2) { width: 10%; }
.loc-rate-history-table--service th:nth-child(3) { width: 44%; }
.loc-rate-history-table--service th:nth-child(4) { width: 12%; }
.loc-rate-history-table th {
    text-align: left;
    padding: 0.45rem 0.6rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-sunken);
    white-space: nowrap;
}
.loc-rate-hist-cell {
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    vertical-align: top;
}
.loc-rate-hist-type {
    font-weight: 700;
    color: var(--text-primary);
    white-space: normal;
    overflow-wrap: anywhere;
}
.loc-rate-hist-rate { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.loc-rate-hist-date { font-family: monospace; font-size: 0.76rem; white-space: nowrap; }
.loc-rate-hist-effective-block { min-width: 9rem; }
.loc-rate-hist-effective-line {
    font-family: monospace;
    font-size: 0.76rem;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.loc-rate-hist-desc-toggle {
    flex-shrink: 0;
    min-width: 1.25rem;
    padding: 0 0.2rem;
    margin-left: auto;
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--text-secondary);
}
.loc-rate-hist-effective-block.has-desc .loc-rate-hist-effective-line {
    padding-right: 0.15rem;
}
.loc-rate-hist-desc-line {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-secondary);
    font-weight: 400;
}
.loc-rate-hist-desc-label {
    flex-shrink: 0;
    font-weight: 400;
    color: var(--text-muted);
}
.loc-rate-hist-desc-val {
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 400;
}
.loc-rate-hist-desc-val.loc-rate-hist-desc-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.loc-rate-hist-desc-chunk {
    display: block;
    max-width: 10ch;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-height: 1.35;
}
.loc-rate-hist-note {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.loc-rate-hist-row--pickup td,
.loc-rate-hist-row--delivery td {
    border-top: 1px dashed var(--border);
}
.loc-rate-hist-row--two-person-trip td {
    border-bottom: none;
}
.loc-rate-hist-pay-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-right: 0.15rem;
}
.loc-rate-hist-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); }
.loc-rate-current-badge {
    display: inline-block;
    margin-left: 0.35rem;
    background: #34C75922;
    color: #34C759;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
}
@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);
    }
    .loc-rate-grid-body--courier {
        grid-template-columns: 1fr;
    }
    .loc-rate-history-modal-content {
        width: min(96vw, 900px);
        max-width: min(96vw, 900px);
    }
}

/* Back Office ? Sage ERP integration panel */
.sage-erp-panel .sage-bo-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border);
}
.sage-erp-panel .sage-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. */
.sage-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 */
.sage-erp-tabs:not(.nscc-tab-groups) .sage-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.55rem 0.28rem;
    min-width: 4.75rem;
    width: min-content;
    min-height: var(--nscc-folder-tab-h, 2.55rem);
    max-width: 8rem;
    text-align: center;
    border: 2px solid #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;
}
.sage-erp-tabs:not(.nscc-tab-groups) .sage-erp-tab-btn:hover {
    z-index: 2;
    color: var(--chrome-folder-ink);
    background: var(--bg-raised);
    transform: translateY(1px);
}
.sage-erp-tabs:not(.nscc-tab-groups) .sage-erp-tab-btn.active,
.sage-erp-tabs:not(.nscc-tab-groups) .sage-erp-tab-btn[aria-selected="true"] {
    z-index: 4;
    color: #f7f1e4 !important;
    background: var(--chrome-folder-active) !important;
    border: 2px solid #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;
}
.sage-erp-tab-panel {
    display: none;
}
.sage-erp-tab-panel.active {
    display: block;
}
.sage-today-actions {
    display: flex;
    justify-content: flex-end;
    margin: -0.25rem 0 0.5rem;
}
.sage-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-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 .sage-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;
    position: sticky;
    bottom: 0;
    z-index: 8;
    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;
}
.sage-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 #000;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    padding: 0.35rem 0;
}
.sage-export-dropdown-menu[style*="display: none"] {
    border-color: transparent;
}
.sage-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;
}
.sage-export-dropdown-menu button:hover {
    background: var(--bg-sunken);
}
.md-save-dropdown-menu:not([style*="display: none"]) {
    border: 1px solid #000 !important;
}
.sage-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);
}
.sage-export-menu-label:not(:first-child) {
    margin-top: 0.35rem;
    border-top: 1px solid var(--border);
    padding-top: 0.55rem;
}
.sage-inbound-stats--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sage-admin-advanced {
    margin-top: 0.5rem;
}
.sage-bo-section-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
}
.sage-bo-section-desc {
    margin: 0.2rem 0 0.65rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.45;
    max-width: 52rem;
}
.sage-sandbox-copy-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.35rem 0 0.65rem;
}
.sage-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;
}
.sage-sandbox-copy-status {
    margin: 0.55rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.sage-sandbox-copy-status--error {
    color: #b91c1c;
    font-weight: 700;
}
.sage-sandbox-copy-status--ok {
    color: #047857;
    font-weight: 700;
}
.sage-sandbox-copy-status--hint {
    color: var(--text-secondary);
    font-weight: 600;
}
.sage-sandbox-copy-preview {
    margin-top: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
}
.sage-sandbox-copy-preview-title {
    margin: 0 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-secondary);
}
.sage-sandbox-copy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}
.sage-sandbox-copy-table th,
.sage-sandbox-copy-table td {
    text-align: left;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--border);
}
.sage-sandbox-copy-table thead th {
    border-top: none;
    color: var(--text-muted);
    font-weight: 700;
}
.sage-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);
}
.sage-stack-node {
    padding: 0.2rem 0.45rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.sage-stack-arrow {
    color: var(--text-muted);
    font-weight: 400;
}
.sage-bridge-health-line,
.sage-request-status-line,
.sage-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;
}
.sage-request-status-line:empty,
.sage-action-status--empty {
    display: none;
}
.sage-action-status--pending {
    border-color: rgba(88, 86, 214, 0.35);
    color: #5856D6;
}
.sage-action-status--ok {
    border-color: rgba(52, 199, 89, 0.35);
    color: #248A3D;
}
.sage-action-status--error {
    border-color: rgba(255, 59, 48, 0.35);
    color: #C41E16;
}
.sage-inbound-action-status.sage-action-status,
#sage-inbound-action-status.sage-action-status {
    margin-top: 0.45rem;
}
.sage-bo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}
.sage-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;
}
.sage-btn-help li {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.sage-btn-help li strong {
    color: var(--text-primary);
    font-weight: 800;
}
.sage-btn-help li em {
    font-style: normal;
    font-weight: 700;
    color: var(--brand-light, var(--text-primary));
}
.sage-btn-help-note {
    margin: 0.45rem 0 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.sage-cli-details {
    margin-top: 0.65rem;
    font-size: 0.72rem;
}
.sage-cli-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-secondary);
}
.sage-cli-block {
    margin: 0.5rem 0 0;
    padding: 0.65rem;
    font-size: 0.62rem;
    line-height: 1.45;
    max-height: 200px;
    overflow: auto;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sage-cli-hint {
    margin: 0.35rem 0 0;
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.sage-inbound-summary {
    padding: 0.65rem 0.75rem;
    background: var(--bg-sunken);
    border: 2px solid #000;
    border-radius: 6px;
}
.sage-inbound-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sage-inbound-summary-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
}
.sage-inbound-last-sync {
    font-size: 0.62rem;
    color: var(--text-muted);
}
.sage-inbound-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.sage-inbound-stat {
    flex: 1;
    min-width: 120px;
    padding: 0.5rem;
    background: var(--bg-card);
    border-radius: 4px;
    border: 2px solid #000;
}
.sage-inbound-stat-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sage-inbound-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
}
.sage-inbound-stat-hint {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.sage-inbound-result {
    margin-top: 0.5rem;
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.sage-inbound-poll-summary,
.sage-sync-report-summary-panel {
    margin: 0.35rem 0 0.55rem;
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.sage-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));
}
.sage-sync-report-summary-title {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-primary);
}
.sage-sync-report-summary-meta {
    font-size: 0.6rem;
    color: var(--text-muted);
}
.sage-sync-report-failures-wrap {
    margin-top: 0.45rem;
    overflow-x: auto;
}
.sage-sync-report-failures {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6rem;
}
.sage-sync-report-failures th,
.sage-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;
}
.sage-sync-report-failures th {
    font-weight: 800;
    background: var(--surface-muted, rgba(0, 0, 0, 0.04));
}
.sage-queue-counts {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.65rem 0 0;
}
.sage-outbound-scope {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.sage-outbound-scope legend {
    padding: 0;
    margin-bottom: 0.35rem;
}
.sage-outbound-scope-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}
.sage-outbound-scope-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.sage-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;
}
.sage-outbound-scope-hint {
    margin: 0.45rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.sage-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;
}
.sage-outbound-scope-all-label strong {
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.68rem;
}
.sage-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);
}
.sage-outbound-upload-hint--empty {
    color: var(--text-muted);
}
.sage-staging-date-breakdown {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.sage-staging-date-breakdown li {
    margin: 0.15rem 0;
}
.sage-queue-table-wrap {
    margin-top: 0.65rem;
    max-height: 260px;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.sage-queue-table {
    width: 100%;
    border-collapse: collapse;
}
.sage-queue-table th,
.sage-queue-table td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    font-size: 0.68rem;
}
.sage-queue-table thead tr {
    background: var(--bg-sunken);
}
.sage-table-empty {
    padding: 0.65rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
}
.sage-tools-group {
    margin-bottom: 0.75rem;
}
.sage-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;
}
.sage-connection-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.sage-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;
}
.sage-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF9500;
    flex-shrink: 0;
}
.sage-status-text {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.sage-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);
}
.sage-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;
}
.sage-invoice-types {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.sage-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: 2px solid #000;
    border-radius: 6px;
}
.sage-invoice-type-head {
    flex: 1;
    min-width: 200px;
}
.sage-invoice-type-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
}
.sage-invoice-type-hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.4;
}
.sage-invoice-footnote {
    margin: 0.65rem 0 0;
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.sage-invoice-billable-hint {
    margin: 0 0 0.65rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--text-secondary);
    background: var(--bg-sunken);
    border: 2px solid #000;
    border-radius: 6px;
}
.sage-invoice-billable-ok {
    color: #34C759;
    font-weight: 800;
}
.sage-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;
}
.sage-invoice-watermark-opt input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    accent-color: #000000;
}
.sage-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;
}
.sage-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;
}
.sage-staging-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.sage-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;
}
.sage-staging-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}
.sage-staging-stat-label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
}
.sage-staging-summary-note {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.sage-staging-table-wrap {
    max-height: 340px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.sage-staging-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}
.sage-staging-table th,
.sage-staging-table td {
    text-align: left;
    padding: 0.35rem 0.5rem;
    vertical-align: top;
}
.sage-staging-table thead tr {
    background: var(--bg-sunken);
}
.sage-staging-table .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sage-flow-label {
    display: block;
    font-weight: 700;
}
.sage-flow-id {
    display: block;
    font-size: 0.58rem;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sage-staging-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}
.sage-staging-raw-json summary {
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.sage-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;
}
.sage-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;
}

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

/* Fix & re-send */
.sage-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));
}
.sage-fix-cards {
    display: grid;
    gap: 0.65rem;
    margin: 0.55rem 0 0.75rem;
}
.sage-fix-card {
    padding: 0.55rem 0.65rem;
    border-left: 3px solid #f59e0b;
    background: var(--bg-elevated, #fff);
}
.sage-fix-problem,
.sage-fix-where,
.sage-fix-ids,
.sage-fix-manual {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    line-height: 1.4;
}
.sage-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 ? Sage refresh status timeline */
.nscc-sage-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-sage-md-bar--personnel,
.nscc-sage-md-bar--locations {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
}
/* Embedded in the Personnel header box ? no second bordered card */
.nscc-sage-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-sage-md-bar--in-header .nscc-sage-md-status {
    margin: 0 !important;
    font-size: 0.68rem;
    line-height: 1.35;
}
.nscc-sage-md-bar-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.nscc-sage-md-pull-status--summary {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.35;
}
.nscc-sage-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-sage-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-sage-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-sage-md-roster-sync-info-toggle:hover {
    border-color: var(--text-muted);
}
.nscc-sage-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-sage-md-roster-sync-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.nscc-sage-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-sage-md-see-activity:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.nscc-sage-md-details-toggle:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.nscc-sage-md-details-chevron {
    font-size: 0.65rem;
    line-height: 1;
}
.nscc-sage-md-refresh-btn {
    font-weight: 800;
    height: 32px;
    padding: 0 0.75rem;
    border: 2px solid var(--border);
    white-space: nowrap;
}
.nscc-sage-md-duration-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.nscc-sage-md-pull-status {
    font-size: 0.72rem;
    min-height: 1.2em;
}
.nscc-sage-md-pull-status--panel {
    width: 100%;
}
.nscc-sage-md-status-panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.72rem;
    line-height: 1.4;
}
.nscc-sage-md-now {
    color: var(--text-secondary);
}
.nscc-sage-md-now-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-right: 0.25rem;
}
.nscc-sage-md-now-text {
    font-weight: 700;
}
.nscc-sage-md-outcome--ok { color: #34C759; font-weight: 800; }
.nscc-sage-md-outcome--fail { color: #FF3B30; font-weight: 800; }
.nscc-sage-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-sage-md-last { color: var(--text-secondary); font-weight: 600; }
.nscc-sage-md-timeline-wrap {
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
}
.nscc-sage-md-timeline-title,
.nscc-sage-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-sage-md-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 9.5rem;
    overflow: auto;
}
.nscc-sage-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-sage-md-timeline-item:last-child { border-bottom: 0; }
.nscc-sage-md-timeline-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    margin-top: 0.28rem;
    grid-row: 1 / span 2;
}
.nscc-sage-md-timeline-when {
    color: var(--text-muted);
    font-size: 0.65rem;
    white-space: nowrap;
}
.nscc-sage-md-timeline-label {
    font-weight: 700;
    color: var(--text-secondary);
}
.nscc-sage-md-timeline-detail {
    grid-column: 2 / -1;
    color: var(--text-muted);
    font-size: 0.65rem;
}
.nscc-sage-md-timeline-empty {
    display: block;
    color: var(--text-muted);
    font-style: italic;
}
.nscc-sage-md-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.35rem;
    padding-top: 0.25rem;
}
.nscc-sage-md-pager--solo {
    justify-content: flex-start;
}
.nscc-sage-md-pager-meta {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 5.5rem;
    text-align: center;
}
.nscc-sage-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-sage-md-pager-btn:hover:not(:disabled) {
    border-color: var(--text-muted);
    color: var(--text-primary);
}
.nscc-sage-md-pager-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.nscc-sage-md-issues {
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
}
.nscc-sage-md-issues--ok {
    color: #34C759;
    font-weight: 650;
}
.nscc-sage-md-issues-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 7rem;
    overflow: auto;
}
.nscc-sage-md-issue {
    padding: 0.15rem 0;
    color: var(--text-secondary);
}
.nscc-sage-md-issue--error { color: #FF3B30; }
.nscc-sage-md-issue--warn { color: #FF9500; }
.nscc-sage-md-issue--info { color: var(--text-muted); }
.nscc-sage-md-issue-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.nscc-sage-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) */
.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; }
.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(140px, 1fr)); gap: 0.65rem; margin-bottom: 1rem; }
.lf-kpi-card { border: 2px solid #000000; border-radius: 8px; padding: 0.65rem 0.75rem; background: var(--bg-raised, #fff); }
.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-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; }
.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; }

/* 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 .master-data-header-box,
#executive-dashboard-view .nscc-ledger-table-wrap,
#executive-dashboard-view .nscc-ledger-kpi,
#executive-dashboard-view .exec-dash-filter select,
#leadership-finance-view .lf-kpi-card,
#leadership-finance-view .master-data-header-box,
#leadership-finance-view .nscc-table-scroll,
#leadership-finance-view .nscc-ledger-table-wrap,
#leadership-finance-view .nscc-ledger-kpi,
#leadership-finance-view .lf-inbound-poll,
#leadership-finance-view .lf-clearback,
#leadership-finance-view .lf-details,
#leadership-finance-view .sage-cli-block,
#leadership-finance-view .select-control {
    border-color: #000000 !important;
}
#executive-dashboard-view .master-data-header-box,
#leadership-finance-view .master-data-header-box,
#leadership-finance-view .lf-clearback,
#leadership-finance-view .lf-inbound-poll,
#leadership-finance-view .lf-details,
#leadership-finance-view .nscc-table-scroll {
    border-style: solid;
    border-width: 2px;
}
#executive-dashboard-view .nscc-ledger-table-wrap,
#executive-dashboard-view .nscc-ledger-kpi,
#leadership-finance-view .nscc-ledger-table-wrap,
#leadership-finance-view .nscc-ledger-kpi {
    border: 2px solid #000000 !important;
}

/* Dense ledgers (Accounting / Payroll / HR reports) */
.sage-table--dense { font-size: 0.72rem; }
.sage-table--dense th,
.sage-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: var(--bg-raised, #fff); }
.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-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: 2px solid #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: 2px solid #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: #000;
  background: #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: 2px solid #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);
    background: var(--chrome-brand-row-bg, #e4e4e7);
    border: none;
    border-bottom: none;
    gap: var(--nscc-gap, 0.4rem);
    color: 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-brand-mark {
    display: flex;
    align-items: center;
    gap: var(--nscc-gap, 0.4rem);
}
button.nscc-chrome-brand-mark {
    /* Same gray chip as username + avatar */
    background: #d1d5db;
    border: 2px solid #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;
}
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: 40px;
    height: 40px;
    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: 2px solid #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(--text-primary);
}

.nscc-chrome-brand-sub {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 0.15rem;
}

.nscc-chrome-brand-row .user-name,
.nscc-chrome-brand-row .user-role,
.nscc-chrome-brand-row .header-sign-out-link {
    color: 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(--text-primary) !important;
}

.nscc-chrome-brand-row .nscc-header-clock-zone {
    background: #d1d5db !important;
    border: 2px solid #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(--text-primary) !important;
}

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

.nscc-chrome-brand-row .btn-ghost:hover {
    background: var(--chrome-logo-box-bg, #d1d5db);
    border-color: #000000;
    color: 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: 2.35rem;
    height: 2.35rem;
    border-radius: 8px !important;
    border: 2px solid #000000 !important;
    border-color: #000000 !important;
    background: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: 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: #000000 !important;
    color: 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: 2px solid #000000;
    border-radius: 8px;
    box-sizing: border-box;
    background: #d1d5db !important;
    background-color: #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: #d1d5db !important;
    background-color: #d1d5db !important;
    border-color: #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: #d1d5db !important;
    background-color: #d1d5db !important;
}
.nscc-chrome-brand-row .user-profile .user-avatar,
.nscc-chrome-brand-row #header-user-avatar {
    border: 2px solid #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: #4b5563 !important;
    border-color: #9ca3af !important;
}
:root.dark .nscc-chrome-brand-row .user-profile,
body.dark-theme .nscc-chrome-brand-row .user-profile {
    background: #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: 2px solid #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: 2px solid #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: #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: 2px solid #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: #1c1917 !important;
    -webkit-text-fill-color: #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;
}

.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: #f7f1e4 !important;
    border: 2px solid #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,
.sage-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: 2px solid #000000;
}

/* Hard box borders ? black (light) / white (dark); folder tabs stay bold */
.master-data-shell,
.sage-erp-panel,
.nscc-table-scroll,
.modal-content {
    border-color: #000000;
}
:root.dark .master-data-shell,
:root.dark .sage-erp-panel,
:root.dark .nscc-table-scroll,
:root.dark .modal-content,
body.dark-theme .master-data-shell,
body.dark-theme .sage-erp-panel,
body.dark-theme .nscc-table-scroll,
body.dark-theme .modal-content {
    border-color: #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 .sage-connect-header {
    border: 2px solid #000000 !important;
    border-color: #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 .sage-export-dropdown-menu,
html body .dropdown-menu {
    border: 2px solid #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 .sage-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 .sage-export-dropdown-menu,
body.dark-theme .dropdown-menu {
    border-color: #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, #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: 2px solid #000000 !important;
    border-color: #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 #000000 !important;
    border-width: 4px !important;
    border-style: solid !important;
    border-color: #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 #ffffff !important;
    border-width: 4px !important;
    border-color: #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 .sage-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 .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 .sage-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 .sage-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 .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 .sage-erp-tab-panel.active,
body.dark-theme .exec-dash-panel {
    border: 2px solid #ffffff !important;
    border-color: #ffffff !important;
    border-radius: 8px !important;
}

/* Folder panels keep no top border so selected tab cuts into the body */
html body .sage-erp-tab-panel.active,
html body .exec-dash-panel {
    border-top: none !important;
}
:root.dark body .sage-erp-tab-panel.active,
:root.dark body .exec-dash-panel,
body.dark-theme .sage-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 .sage-erp-tabs .sage-erp-tab-btn,
:root.dark .nscc-tab-groups .sage-erp-tab-btn,
:root.dark .nscc-tab-groups .sub-nav-btn,
:root.dark #nscc-chrome-folder-tabs .sage-erp-tab-btn,
:root.dark #nscc-chrome-folder-tabs .sub-nav-btn,
:root.dark #daily-pulse-folder-tabs .sage-erp-tab-btn,
:root.dark #live-ops-header .sage-erp-tab-btn,
:root.dark #live-ops-header .sub-nav-btn,
:root.dark #planner-header .sage-erp-tab-btn,
:root.dark #planner-header .sub-nav-btn,
body.dark-theme .sage-erp-tabs .sage-erp-tab-btn,
body.dark-theme .nscc-tab-groups .sage-erp-tab-btn,
body.dark-theme .nscc-tab-groups .sub-nav-btn,
body.dark-theme #nscc-chrome-folder-tabs .sage-erp-tab-btn,
body.dark-theme #nscc-chrome-folder-tabs .sub-nav-btn,
body.dark-theme #daily-pulse-folder-tabs .sage-erp-tab-btn,
body.dark-theme #live-ops-header .sage-erp-tab-btn,
body.dark-theme #live-ops-header .sub-nav-btn,
body.dark-theme #planner-header .sage-erp-tab-btn,
body.dark-theme #planner-header .sub-nav-btn {
    border-color: #ffffff !important;
}
:root.dark .sage-erp-tabs .sage-erp-tab-btn.active,
:root.dark .nscc-tab-groups .sage-erp-tab-btn.active,
:root.dark .nscc-tab-groups .sub-nav-btn.active,
:root.dark #nscc-chrome-folder-tabs .sage-erp-tab-btn.active,
:root.dark #nscc-chrome-folder-tabs .sub-nav-btn.active,
:root.dark #daily-pulse-folder-tabs .sage-erp-tab-btn.active,
body.dark-theme .sage-erp-tabs .sage-erp-tab-btn.active,
body.dark-theme .nscc-tab-groups .sage-erp-tab-btn.active,
body.dark-theme .nscc-tab-groups .sub-nav-btn.active,
body.dark-theme #nscc-chrome-folder-tabs .sage-erp-tab-btn.active,
body.dark-theme #nscc-chrome-folder-tabs .sub-nav-btn.active,
body.dark-theme #daily-pulse-folder-tabs .sage-erp-tab-btn.active {
    border-color: #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: 2px solid #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: #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 {
    /* One content line under the LIVE ticker so screens/tabs are not clipped. */
    --nscc-ticker-clearance: 1.25rem;
}
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;
}
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-width, 13.5rem) !important;
    width: calc(100vw - var(--nscc-app-nav-width, 13.5rem)) !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-width, 13.5rem);
}

/* ?? 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 .sage-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: 2px solid #000;
    border-radius: 3px;
    background: #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: #000;
}
.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: 2px solid #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 Sage Connect or Sage-labeled chrome. */
html.nscc-native-finance #bo-subnav-sage-item,
html.nscc-native-finance #back-office-sage-panel,
html.nscc-native-finance .master-data-shell--sage-connect,
html.nscc-native-finance .nscc-sage-only,
html.nscc-native-finance #sage-status-msg,
html.nscc-native-finance #sidebar-uplink-status,
html.nscc-native-finance .nscc-sage-copy,
html.nscc-native-finance .nscc-tab-group--sage-connect,
html.nscc-native-finance [data-nscc-sage-connect],
html.nscc-native-finance #nscc-chrome-folder-tabs [data-chrome-view="back-office-view"]:not([data-payroll-tab]):not([data-acct-tab]),
html.nscc-native-finance .bo-subnav-group[data-bo-group="connect"] {
    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 .sage-erp-tab-btn,
#live-ops-header .sub-nav-btn,
#planner-header .sage-erp-tab-btn,
#planner-header .sub-nav-btn,
#support-header .sage-erp-tab-btn,
#support-header .sub-nav-btn,
#back-office-header .sage-erp-tab-btn,
#back-office-header .sub-nav-btn,
#nscc-chrome-folder-tabs .sage-erp-tab-btn,
#nscc-chrome-folder-tabs .sub-nav-btn,
#daily-pulse-folder-tabs .sage-erp-tab-btn,
#executive-dashboard-view .sage-erp-tab-btn,
#leadership-finance-view .sage-erp-tab-btn,
#form-management-view .sage-erp-tab-btn,
#custom-export-view .sage-erp-tab-btn,
.modal .sage-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;
    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: 2px solid #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;
    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 > .sage-erp-tab-btn:first-child,
#live-ops-header .nscc-tab-group__tabs > .sage-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 > .sage-erp-tab-btn:first-child,
#nscc-chrome-folder-tabs .nscc-tab-group__tabs > .sage-erp-tab-btn:first-child {
    margin-left: 0 !important;
}
.nscc-tab-groups .sub-nav-btn:hover,
.nscc-tab-groups .sage-erp-tab-btn:hover,
#live-ops-header .sage-erp-tab-btn:hover,
#live-ops-header .sub-nav-btn:hover,
#planner-header .sage-erp-tab-btn:hover,
#support-header .sage-erp-tab-btn:hover,
#back-office-header .sage-erp-tab-btn:hover,
#nscc-chrome-folder-tabs .sage-erp-tab-btn:hover,
#nscc-chrome-folder-tabs .sub-nav-btn:hover,
#daily-pulse-folder-tabs .sage-erp-tab-btn:hover,
#executive-dashboard-view .sage-erp-tab-btn:hover,
#leadership-finance-view .sage-erp-tab-btn:hover,
#form-management-view .sage-erp-tab-btn:hover,
#custom-export-view .sage-erp-tab-btn:hover,
.modal .sage-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 .sage-erp-tab-btn.active,
.nscc-tab-groups .sage-erp-tab-btn[aria-selected="true"],
#live-ops-header .sage-erp-tab-btn.active,
#live-ops-header .sage-erp-tab-btn[aria-selected="true"],
#live-ops-header .sub-nav-btn.active,
#live-ops-header .sub-nav-btn[aria-selected="true"],
#planner-header .sage-erp-tab-btn.active,
#planner-header .sub-nav-btn.active,
#support-header .sage-erp-tab-btn.active,
#support-header .sub-nav-btn.active,
#back-office-header .sage-erp-tab-btn.active,
#back-office-header .sub-nav-btn.active,
#nscc-chrome-folder-tabs .sage-erp-tab-btn.active,
#nscc-chrome-folder-tabs .sub-nav-btn.active,
#daily-pulse-folder-tabs .sage-erp-tab-btn.active,
#daily-pulse-folder-tabs .sage-erp-tab-btn[aria-selected="true"],
#executive-dashboard-view .sage-erp-tab-btn.active,
#executive-dashboard-view .sage-erp-tab-btn[aria-selected="true"],
#leadership-finance-view .sage-erp-tab-btn.active,
#form-management-view .sage-erp-tab-btn.active,
#custom-export-view .sage-erp-tab-btn.active,
.modal .sage-erp-tab-btn.active,
.modal .sage-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: #f7f1e4 !important;
    background: var(--chrome-folder-active) !important;
    background-color: var(--chrome-folder-active) !important;
    border: 2px solid #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 .sage-erp-tab-btn.active,
.modal .sage-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 .sage-erp-tab-btn.active,
.nscc-tab-groups .sage-erp-tab-btn[aria-selected="true"],
.nscc-tab-groups .sub-nav-btn.active,
#live-ops-header .sage-erp-tab-btn.active,
#live-ops-header .sub-nav-btn.active,
#daily-pulse-folder-tabs .sage-erp-tab-btn.active,
#nscc-chrome-folder-tabs .sage-erp-tab-btn.active,
#planner-header .sage-erp-tab-btn.active,
#support-header .sage-erp-tab-btn.active,
#back-office-header .sage-erp-tab-btn.active {
    background: var(--chrome-folder-active) !important;
    background-color: var(--chrome-folder-active) !important;
    color: #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;
}
: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;
}

/* ==========================================================================
   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: #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: #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: #1c1917 !important;
    -webkit-text-fill-color: #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 .sage-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 .sage-connect-header,
:root.dark .tab-dropdown-menu,
:root.dark .nav-dropdown-content,
:root.dark .md-save-dropdown-menu,
:root.dark .sage-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 .sage-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 .sage-connect-header,
body.dark-theme .tab-dropdown-menu,
body.dark-theme .nav-dropdown-content,
body.dark-theme .md-save-dropdown-menu,
body.dark-theme .sage-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 .sage-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 .sage-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 .sage-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 .sage-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: 2px solid #ffffff !important;
    border-color: #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: #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: 2px solid #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: 2px solid #000000 !important;
}
:root.dark .nscc-chrome-brand-row .nscc-header-clock-zone,
body.dark-theme .nscc-chrome-brand-row .nscc-header-clock-zone {
    background: #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: #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: 2.5px solid #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;
    z-index: 11080;
    max-width: min(26rem, calc(100vw - 1.5rem));
    padding: 0.55rem 0.75rem 0.6rem;
    border: 2px solid #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 { 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; }
: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 — keep normal cursors (no Windows ? help cursor) */
#nscc-app-sidebar [data-nscc-desc],
#nscc-chrome-folder-tabs [data-nscc-desc],
.sage-erp-tab-btn[data-nscc-desc],
.sub-nav-btn[data-nscc-desc],
.nscc-tab-group__label[data-nscc-desc],
button[data-nscc-desc],
.nscc-app-nav-item[data-nscc-desc],
.tab-btn[data-nscc-desc] {
    cursor: pointer;
}
.form-label[data-nscc-desc],
.form-label-compact[data-nscc-desc],
.settings-row[data-nscc-desc],
.settings-title[data-nscc-desc],
label[data-nscc-desc],
.nscc-finance-card__label[data-nscc-desc],
.nscc-ledger-kpi__label[data-nscc-desc],
.nscc-hr-pane-label[data-nscc-desc],
.nscc-overview-intro__title[data-nscc-desc],
.sage-connect-title[data-nscc-desc],
.master-data-title[data-nscc-desc] {
    cursor: default;
}
:root.dark .nscc-hover-desc,
body.dark-theme .nscc-hover-desc {
    background: #1c1917;
    color: #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 .sage-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,
.sage-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 .sage-rpt-badge,
html body .sage-rpt-badge--ok,
html body .sage-rpt-badge--fail,
html body .sage-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 .sage-rpt-badge--ok { border-color: #34C759 !important; }
html body .nscc-chip--warn,
html body .badge-warn,
html body .sage-rpt-badge--warn { border-color: #FF9500 !important; }
html body .nscc-chip--bad,
html body .badge-breach,
html body .sage-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 ========== */
html body #customer-portal-view,
html body #employee-portal-view,
html body .nscc-customer-portal,
html body .nscc-employee-portal-root,
html body .nscc-portal-shell {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
html body .nscc-portal-shell h1,
html body .nscc-portal-shell h2,
html body .nscc-emp-combined h2,
html body .nscc-emp-combined h3,
html body .nscc-portal-table,
html body .nscc-portal-table td,
html body .nscc-finance-card__value,
html body .nscc-portal-pick,
html body .nscc-portal-pick strong,
html body button.nscc-portal-pick {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
html body .nscc-portal-lead,
html body .nscc-portal-pick-count,
html body .nscc-portal-search__label,
html body .nscc-finance-card__label,
html body .nscc-employee-portal-who,
html body .nscc-portal-table th {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
}
html body .nscc-portal-pick span {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}
html body .nscc-portal-back a,
html body .nscc-portal-link,
html body .nscc-linkish,
html body .nscc-portal-shell a.nscc-portal-link {
    color: var(--brand, #0d9488) !important;
    -webkit-text-fill-color: var(--brand, #0d9488) !important;
}
html body .nscc-portal-pick,
html body button.nscc-portal-pick {
    background: var(--bg-card) !important;
    border-color: #000000 !important;
}
html body .nscc-portal-search__input,
html body .nscc-employee-form input,
html body .nscc-employee-form select,
html body .nscc-ap-form-grid input,
html 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 body .nscc-employee-tab {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    background: var(--bg-card) !important;
}
html body .nscc-employee-tab.is-active,
html body .nscc-employee-tab:hover,
html body .nscc-employee-tab:focus-visible {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: #000000 !important;
}
:root.dark body #customer-portal-view,
:root.dark body #employee-portal-view,
:root.dark body .nscc-customer-portal,
:root.dark body .nscc-employee-portal-root,
:root.dark body .nscc-portal-shell,
body.dark-theme #customer-portal-view,
body.dark-theme #employee-portal-view,
body.dark-theme .nscc-customer-portal,
body.dark-theme .nscc-employee-portal-root,
body.dark-theme .nscc-portal-shell {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
:root.dark body .nscc-portal-pick,
:root.dark body button.nscc-portal-pick,
body.dark-theme .nscc-portal-pick,
body.dark-theme button.nscc-portal-pick {
    border-color: #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: #ffffff !important;
}
:root.dark body .nscc-portal-search__input,
body.dark-theme .nscc-portal-search__input {
    border-color: #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 .sage-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 > .sage-connect-header,
html body #nscc-chrome-folder-tabs > .nscc-chrome-synthetic-title {
    background: var(--bg-card, #ffffff) !important;
    border: 2px solid #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 .sage-connect-title,
html body .master-data-header-box h2,
html body .nscc-ledger-head .sage-connect-title,
html body .nscc-ledger-head h2,
html body .sage-connect-title,
html body .nscc-chrome-synthetic-title .sage-connect-title,
html body .nscc-chrome-synthetic-title h2,
html body #nscc-chrome-folder-tabs .sage-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 .sage-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: 2px solid #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 .sage-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 .sage-erp-tabs .sage-erp-tab-btn,
html body .nscc-tab-groups .sage-erp-tab-btn,
html body #nscc-chrome-folder-tabs .sage-erp-tab-btn,
html body .sub-nav-panel .sub-nav-btn,
html body #live-ops-header .sage-erp-tab-btn,
html body #planner-header .sage-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: 2px solid #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 .sage-erp-tabs .sage-erp-tab-btn.active,
html body .sage-erp-tabs .sage-erp-tab-btn[aria-selected="true"],
html body .nscc-tab-groups .sage-erp-tab-btn.active,
html body .nscc-tab-groups .sage-erp-tab-btn[aria-selected="true"],
html body #nscc-chrome-folder-tabs .sage-erp-tab-btn.active,
html body #nscc-chrome-folder-tabs .sage-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: #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 .sage-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 .sage-staging-modal-header {
    background: var(--bg-card) !important;
    border-color: #ffffff !important;
}
:root.dark body .master-data-header-box .sage-connect-title,
:root.dark body .master-data-header-box h2,
:root.dark body .nscc-ledger-head h2,
:root.dark body .nscc-chrome-synthetic-title .sage-connect-title,
:root.dark body #nscc-chrome-folder-tabs .sage-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 .sage-staging-modal-header h2,
body.dark-theme .master-data-header-box .sage-connect-title,
body.dark-theme .master-data-header-box h2,
body.dark-theme .nscc-ledger-head h2,
body.dark-theme .nscc-chrome-synthetic-title .sage-connect-title,
body.dark-theme #nscc-chrome-folder-tabs .sage-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 .sage-staging-modal-header h2 {
    color: #fafaf9 !important;
    -webkit-text-fill-color: #fafaf9 !important;
}
:root.dark body .sage-erp-tabs .sage-erp-tab-btn,
:root.dark body .nscc-tab-groups .sage-erp-tab-btn,
:root.dark body .sub-nav-panel .sub-nav-btn,
body.dark-theme .sage-erp-tabs .sage-erp-tab-btn,
body.dark-theme .nscc-tab-groups .sage-erp-tab-btn,
body.dark-theme .sub-nav-panel .sub-nav-btn {
    border-color: #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: 2px solid #000000 !important;
    border-color: #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: #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: #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: #d1d5db !important;
    background-color: #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: #d1d5db !important;
    background-color: #d1d5db !important;
    border-color: #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: 2px solid #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: 2px solid #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: #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-sage-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;
    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 #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-sage-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(.sage-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: 2px solid #000000 !important;
    border-color: #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: #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: #ffffff !important;
}
:root.dark body select:focus,
:root.dark body select:open,
body.dark-theme select:focus,
body.dark-theme select:open {
    border-color: #ffffff !important;
}

/* ========== FINAL LOCK: banner chrome + ticker use logo-box gray family ========== */
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: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !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: var(--chrome-logo-box-bg, #d1d5db) !important;
    background-color: var(--chrome-logo-box-bg, #d1d5db) !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: var(--chrome-logo-box-bg, #4b5563) !important;
    background-color: var(--chrome-logo-box-bg, #4b5563) !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: #52525b !important;
    -webkit-text-fill-color: #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: #52525b !important;
    -webkit-text-fill-color: #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: #d4d4d8 !important;
    -webkit-text-fill-color: #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: #d4d4d8 !important;
    -webkit-text-fill-color: #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;
}

/* ==========================================================================
   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: 2px solid #000000 !important;
    border-color: #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: #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, 96vw); max-height: 92vh;
    background: var(--surface-primary, #fff);
    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);
}
.nscc-offer-doc-tabs {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding: 0.5rem 1rem 0;
}
.nscc-offer-doc-tab {
    border: 2px solid #18181b; background: #fff;
    padding: 0.25rem 0.55rem; font-size: 0.72rem; font-weight: 700;
    cursor: pointer; border-radius: 0.25rem;
}
.nscc-offer-doc-tab.is-active { background: #3f3f46; color: #fff; }
.nscc-offer-doc-preview {
    margin: 0.5rem 1rem; padding: 0.5rem;
    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: #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-doc-tab { background: #27272a; color: #fafafa; border-color: #71717a; }
html[data-theme="dark"] .nscc-offer-doc-tab.is-active { background: #52525b; }
html[data-theme="dark"] .nscc-offer-sig-canvas { background: #fafafa; }

/* 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-panel, #fff);
}
.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-panel, #fff);
}
.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: #fff;
}
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-explainer-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
@media (max-width: 900px) {
    .nscc-explainer-split { grid-template-columns: 1fr; }
}
tr.nscc-explainer-delta td { background: rgba(242, 103, 35, 0.08); }
.nscc-reg-source-badge { margin-left: 0.35rem; font-size: 0.58rem; vertical-align: middle; }
.nscc-dup-pay-shield { 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; }
.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; }
@media (max-width: 720px) {
    .nscc-mje-line { grid-template-columns: 1fr; }
    .nscc-mje-line--head { display: none; }
}