/* ============================================================ NORTHSTAR COMMAND — SHARED DESIGN SYSTEM Flat / data-dense console. Twelve neutral themes, light to dark: whites, silvers, greys, tans, browns and blacks. Colour on the page stays reserved for status · alerts · graphs · maps. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* ── Visual accounting dashboard (nscc-acct-dashboard.js) ── */ .nscc-dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nscc-gap, 0.4rem); margin: 0 0 var(--nscc-pad-md, 0.5rem); } .nscc-dash-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: var(--nscc-pad-sm, 0.35rem) var(--nscc-pad-md, 0.5rem); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 8px; background: transparent; cursor: pointer; text-align: left; font: inherit; color: var(--text-primary); transition: transform var(--dur-fast, 70ms) var(--ease-out, ease), box-shadow var(--dur-fast, 70ms); box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000); } .nscc-dash-kpi:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--nscc-hard-shadow, #000000); } .nscc-dash-kpi:active { transform: translateY(0); } .nscc-dash-kpi--warn { border-color: var(--nscc-line, #000000); } .nscc-dash-kpi--positive .nscc-dash-kpi__value { color: #15803d; } .nscc-dash-kpi--negative .nscc-dash-kpi__value { color: #b91c1c; } .nscc-dash-kpi__label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .nscc-dash-kpi__value { font-size: 1.25rem; font-weight: 900; line-height: 1.15; } .nscc-dash-kpi__sub { font-size: 0.66rem; color: var(--text-muted); } /* Anchor tiles — carry data-nscc-customize-anchor. Grow across the full row and hide-affordance; a small lock in the label calls out "required". Matt 2026-09-12: "we wouldnt allow someone to remove a function like journal entry. you need journal entry to perform a duty." */ .nscc-dash-kpi[data-nscc-customize-anchor] { grid-column: 1 / -1; cursor: default; } .nscc-dash-kpi[data-nscc-customize-anchor]:hover { transform: none; box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000); } .nscc-dash-kpi__label--anchor { display: inline-flex; align-items: center; gap: 0.35rem; } .nscc-dash-kpi__lock { font-size: 0.75rem; opacity: 0.8; } /* Actions widget — a row of primary buttons instead of a big number. */ .nscc-dash-kpi--actions { flex-direction: column; gap: 0.4rem; padding: var(--nscc-pad-md, 0.5rem); } .nscc-dash-actions__row { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; } .nscc-dash-actions__btn { flex: 0 0 auto; } /* Ops strip — compact single-row header used on Dispatch views. Sits above the row list without pushing content down, collapsible per-user, each tile opens a glance modal when it carries data-nscc-glance. */ .nscc-ops-strip { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.35rem 0.5rem; margin: 0 0 0.35rem; background: var(--bg-sunken, #f4efe4); border: 2px solid var(--border, var(--nscc-line, #000)); border-radius: 6px; } .nscc-ops-strip__anchor { display: flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; padding-right: 0.5rem; border-right: 1.5px solid var(--border-subtle, rgba(0,0,0,0.15)); } .nscc-ops-strip__btn { font: inherit; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 0.55rem; border: 1.5px solid var(--border, var(--nscc-line, #000)); border-radius: 5px; cursor: pointer; background: var(--brand, #4a6b52); color: var(--bg-card, #f7f3ea); box-shadow: 1px 1px 0 var(--border, #000); letter-spacing: 0.01em; white-space: nowrap; } .nscc-ops-strip__btn:hover { filter: brightness(1.08); } .nscc-ops-strip__btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--border, #000); } .nscc-ops-strip__tiles { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; } .nscc-ops-tile { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; padding: 0.3rem 0.55rem; border: 1.5px solid var(--border, var(--nscc-line, #000)); border-radius: 5px; background: var(--bg-card, #f7f3ea); box-shadow: 1px 1px 0 var(--border, #000); font: inherit; text-align: left; line-height: 1.1; min-width: 88px; color: var(--text-primary, #111); } .nscc-ops-tile[data-nscc-glance] { cursor: pointer; } .nscc-ops-tile[data-nscc-glance]:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--border, #000); } .nscc-ops-tile__label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #5c5648); } .nscc-ops-tile__value { font-size: 0.95rem; font-weight: 800; } .nscc-ops-tile__sub { font-size: 0.6rem; color: var(--text-muted, #5c5648); } .nscc-ops-tile--warn { border-color: #b8631a; } .nscc-ops-tile--warn .nscc-ops-tile__value { color: #b8631a; } /* Per-tile hide, plus a restore control once anything on this screen is hidden. The strip deliberately stays one row — a tile cannot nest a button, so the hide sits beside the tile in a wrapper and overlays its corner. */ .nscc-ops-tile-wrap { position: relative; display: inline-flex; flex: 0 0 auto; } .nscc-ops-tile__hide { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; padding: 0; line-height: 1; font: inherit; font-size: 0.6rem; font-weight: 800; border: 1.5px solid var(--border, var(--nscc-line, #000)); border-radius: 50%; background: var(--bg-card, #f7f3ea); color: var(--text-muted, #5c5648); cursor: pointer; opacity: 0; transition: opacity 0.1s ease; } .nscc-ops-tile-wrap:hover .nscc-ops-tile__hide, .nscc-ops-tile__hide:focus { opacity: 1; } .nscc-ops-tile__hide:hover { color: #b8631a; border-color: #b8631a; } .nscc-ops-strip__restore { font: inherit; font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.45rem; border: 1.5px solid var(--border, var(--nscc-line, #000)); border-radius: 5px; background: transparent; color: var(--text-muted, #5c5648); cursor: pointer; flex: 0 0 auto; white-space: nowrap; } .nscc-ops-strip__restore:hover { color: var(--text-primary, #111); background: rgba(0, 0, 0, 0.05); } html body:not(#_) select.nscc-ops-strip__restore { width: auto !important; max-width: 12rem !important; flex: 0 0 auto !important; margin: 0 !important; } .nscc-ops-strip__reset { font: inherit; font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.45rem; border: 1.5px solid transparent; border-radius: 5px; background: transparent; color: var(--text-muted, #5c5648); cursor: pointer; flex: 0 0 auto; white-space: nowrap; } .nscc-ops-strip__reset:hover { color: var(--text-primary, #111); border-color: var(--border, var(--nscc-line, #000)); } /* ☰ drag handle, shown with the ✕ on hover (the dashboards' widget controls). */ .nscc-ops-tile__handle { position: absolute; top: -5px; left: -5px; z-index: 1; width: 14px; height: 14px; line-height: 12px; text-align: center; font-size: 0.55rem; border: 1.5px solid var(--border, var(--nscc-line, #000)); border-radius: 3px; background: var(--bg-card, #f7f3ea); color: var(--text-muted, #5c5648); cursor: grab; opacity: 0; transition: opacity 0.1s ease; user-select: none; } .nscc-ops-tile-wrap:hover .nscc-ops-tile__handle { opacity: 1; } .nscc-ops-tile-wrap.is-dragging { opacity: 0.45; } @media (hover: none) { /* No hover on touch — keep the hide reachable. */ .nscc-ops-tile__hide, .nscc-ops-tile__handle { opacity: 1; } } .nscc-ops-strip__toggle { margin-left: auto; font: inherit; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.45rem; border: 1.5px dashed var(--border, var(--nscc-line, #000)); border-radius: 5px; background: transparent; color: var(--text-primary, #111); cursor: pointer; flex: 0 0 auto; } .nscc-ops-strip__toggle:hover { background: rgba(0, 0, 0, 0.05); } /* Collapsed strip: toggle button pins to the RIGHT, matching where the ▲ collapse button sits when the strip is expanded (▲ on the right of the expanded row, ▼ on the right of the collapsed row). Requested by Matt 2026-09-16 for consistency across Dispatch / Patrol / Courier / Guards. */ .nscc-ops-strip--collapsed { justify-content: flex-end; padding: 0.15rem 0.5rem; } .nscc-ops-strip--collapsed .nscc-ops-strip__toggle { border-style: solid; } @media print { .nscc-ops-strip { display: none !important; } } /* Mini-list widget — top-N rows, each a click-through button. */ .nscc-dash-kpi--list { align-items: stretch; gap: 0.3rem; padding: var(--nscc-pad-md, 0.5rem); cursor: default; } .nscc-dash-kpi--list:hover { transform: none; } .nscc-dash-list__body { display: flex; flex-direction: column; gap: 0.2rem; } .nscc-dash-list__row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name value" "sub sub"; row-gap: 0.05rem; column-gap: 0.5rem; padding: 0.3rem 0.4rem; border: 1px solid var(--border, #d4d4d8); border-radius: 4px; background: transparent; color: var(--text-primary); text-align: left; font: inherit; cursor: pointer; } .nscc-dash-list__row:hover { background: var(--bg-hover, rgba(0, 0, 0, 0.04)); } .nscc-dash-list__name { grid-area: name; font-size: 0.78rem; font-weight: 700; } .nscc-dash-list__value { grid-area: value; font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums; } .nscc-dash-list__sub { grid-area: sub; font-size: 0.65rem; color: var(--text-muted); } .nscc-dash-list__empty { font-size: 0.75rem; color: var(--text-muted); padding: 0.3rem 0.2rem; } .nscc-dash-list__footer { margin-top: 0.3rem; display: flex; justify-content: flex-end; } :root.dark .nscc-dash-list__row, body.dark-theme .nscc-dash-list__row { border-color: rgba(148, 163, 184, 0.5); } .nscc-dash-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--nscc-gap, 0.4rem); margin-bottom: var(--nscc-pad-md, 0.5rem); } .nscc-dash-chart-card { border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 0; padding: var(--nscc-pad-sm, 0.35rem) var(--nscc-pad-md, 0.5rem); background: var(--bg-card); box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000); } .nscc-dash-chart-card__title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0; } .nscc-dash-chart-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; margin-bottom: 0.4rem; } .nscc-dash-chart-card__body { min-width: 0; } .nscc-dash-chart-card__note { font-size: 0.6rem; color: var(--text-muted); margin-top: 0.2rem; } .nscc-chart-view-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; padding: 0; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 6px; background: var(--btn-surface, #d4d4d8); color: var(--btn-surface-ink, #0f172a); cursor: pointer; font-size: 0.85rem; line-height: 1; } .nscc-chart-view-btn:hover, .nscc-chart-view-btn:focus-visible { background: var(--btn-surface-hover, #a1a1aa); outline: none; } :root.dark .nscc-chart-view-btn, body.dark-theme .nscc-chart-view-btn { background: var(--btn-surface, #0c0c0b); color: var(--btn-surface-ink, #f8fafc); border-color: var(--nscc-line, #ffffff); } .exec-chart-card.nscc-dash-chart-card .nscc-dash-chart-card__title, .exec-chart-card .nscc-dash-chart-card__title { margin: 0; } .nscc-dash-chart-svg { width: 100%; height: auto; display: block; shape-rendering: geometricPrecision; } .nscc-dash-chart-label { font-size: 8px; fill: var(--text-muted, #64748b); font-family: monospace; } .nscc-dash-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.66rem; color: var(--text-muted); } .nscc-dash-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; } .nscc-dash-swatch { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--border); display: inline-block; } .nscc-dash-aging-bar { display: flex; height: 14px; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-sunken); } .nscc-dash-aging--current { background: #16a34a; } .nscc-dash-aging--overdue { background: #dc2626; } .nscc-dash-aging--paid { background: #64748b; } .nscc-dash-cust-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 0.5rem; margin: 0.2rem 0; font-size: 0.78rem; } .nscc-dash-cust-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nscc-dash-cust-bar { height: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sunken); overflow: hidden; } .nscc-dash-cust-fill { height: 100%; background: var(--brand-light, #3f3f46); border-radius: 8px; } .nscc-dash-cust-amt { font-weight: 800; font-family: var(--font-mono, monospace); font-size: 0.72rem; } .nscc-dash-recent-table td.r, .nscc-dash-recent-table th.r { text-align: right; } /* ── AR line breakdown + toolbar labels (IPS billing) ── */ .nscc-ar-row--has-lines { cursor: pointer; } .nscc-ar-row--has-lines:hover { background: var(--bg-sunken); } .nscc-ar-lines-row td { padding: 0 !important; background: var(--bg-raised, #fafafa); } .nscc-ar-lines-table { margin: 0; border: none; } .nscc-ar-lines-table thead th { font-size: 0.66rem !important; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: transparent !important; } .nscc-ar-lines-table tbody td { padding: 0.3rem 0.55rem !important; font-size: 0.74rem !important; } .nscc-ar-line-meta { display: block; color: var(--text-muted); font-size: 0.7rem; } .nscc-ar-line-extras { display: block; color: var(--text-muted); font-size: 0.66rem; font-style: italic; } .nscc-finance-toolbar__label { display: inline-flex; flex-direction: column; gap: 0.15rem; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .nscc-finance-toolbar__label input[type="date"] { padding: 0.3rem 0.45rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 6px; font-size: 0.8rem; font-weight: 700; } .nscc-dash-recent-table tbody td { padding: 0.35rem 0.5rem !important; font-size: 0.78rem !important; } /* ——— Field Payroll panel: pay-basis badges + per-role hour table ——— */ .nscc-fp-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 8px; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; } .nscc-fp-badge--hourly { background: var(--info-wash, #f4f4f5); color: var(--info-wash-ink, #27272a); } .nscc-fp-badge--salary { background: var(--info-wash, #f4f4f5); color: var(--info-wash-ink, #27272a); } .nscc-fp-badge--trips { background: transparent; color: #92400e; border: 2px solid #f59e0b; } .nscc-fp-table tbody td { font-size: 0.82rem !important; } .nscc-fp-table tbody tr:hover { background: var(--bg-raised, #fafafa); } /* ——— Colour Tokens (light) — cool neutral gray (no pink / peach / cream washes) ——— */ :root { /* Surfaces — cool zinc neutrals */ --bg-page: #f4f4f5; --bg-card: #ffffff; --bg-raised: #fafafa; --bg-sunken: #e4e4e7; --bg-overlay: #ffffff; --bg-atmosphere: none; --bg-grid: none; /* Muted action fill — darker than info/card boxes so buttons do not look like labels */ --btn-surface: #d4d4d8; --btn-surface-hover:#a1a1aa; --btn-surface-ink: #18181b; /* Text */ --text-primary: #18181b; --text-secondary: #3f3f46; --text-muted: #52525b; --text-inverse: #fafafa; --text-link: #27272a; /* Brand — charcoal (no purple / blue chrome) */ --brand: #18181b; --brand-light: #52525b; --brand-accent: #3f3f46; --brand-glow: rgba(24, 24, 27, 0.14); --brand-display: 'IBM Plex Sans', 'Segoe UI', sans-serif; /* Office chrome — cool tabs (match muted button surface, darker than info cards). --chrome-folder-active-ink is the text color on an active (selected) folder tab. Default light theme's active bg is dark (#27272a), so light ink reads. Each color theme overrides this in its own block so the active-tab text contrasts against that theme's --chrome-folder-active — Matt 2026-09-12: "make the font colors theme colors. but if they are highlighted fonts don't make them black because black is not a highlight for black. same thing with white". */ --chrome-folder: var(--btn-surface); --chrome-folder-deep: var(--btn-surface-hover); --chrome-folder-ink: var(--btn-surface-ink); --chrome-folder-active: #27272a; --chrome-folder-active-ink: #f7f1e4; --chrome-folder-label: #52525b; /* Strip behind folder tabs (under LIVE ticker) — same as left menu rail */ --chrome-folder-strip-bg: var(--chrome-folder-panel-bg, var(--bg-page)); --chrome-folder-panel-bg: var(--bg-page); /* Left-nav / menu selection — cool gray (never pink/peach) */ --nav-selected-bg: #e4e4e7; --nav-selected-ink: #18181b; --nav-selected-bar: #27272a; /* Top banner (the brand row: logo, NORTHSTAR/BEACON, clock, user chip). --banner-bg matches --bg-page so the banner blends with the page background. --banner-fg / -muted are solved for >= 4.5:1 on --banner-bg, --banner-chip-bg AND --bg-raised (the icon buttons keep riding --bg-raised). Each rung declares its own hex copy of --bg-page (not a var()) so the token test's distance check can parse it. */ --banner-bg: #f4f4f5; --banner-fg: #18181b; --banner-muted: #52525b; --banner-chip-bg: #d1d5db; /* Theme identity (every data-nscc-theme block overrides these). The defaults reproduce the unthemed look: zinc chrome, near-black accent. */ --accent: #18181b; --accent-ink: #ffffff; --accent-soft: #e4e4e7; --chrome-bg: #f4f4f5; --chrome-bg-2: #e4e4e7; --chrome-line: #d4d4d8; --chrome-ink: #18181b; --chrome-muted: #52525b; --chrome-accent: #18181b; --chrome-icon-filter: none; /* Folder tabs (and in-body sub-tabs) are TWO text-rows tall — labels wrap to a consistent two-line height so tabs read as uniform folder tabs. */ --nscc-folder-tab-h: 2.55rem; --nscc-folder-strip-h: calc((2 * var(--nscc-folder-tab-h)) + 0.4rem); /* Primary action / schedule CTAs — charcoal (frost-* kept for CSS compat) */ --frost-blue: #3f3f46; --frost-blue-hover: #292524; --frost-blue-deep: #1c1917; --frost-blue-glow: rgba(28, 25, 23, 0.18); /* Trip lifecycle — KEEP (status / alerts / maps / charts only) UNASSIGNED #FF3B30 · PENDING #FF9500 · EN-ROUTE #5856D6 · PICKUP #FFCC00 IN TRANSIT #007AFF · DELIVERED #34C759 · ASSIGNED #AF52DE */ --status-unassigned: #FF3B30; --status-unassigned-bg: #FF3B30; --status-assigned: #AF52DE; --status-assigned-bg: #AF52DE; --status-secure: #34C759; --status-secure-bg: #34C759; --status-transit: #007AFF; --status-transit-bg: #007AFF; --status-breach: #FF3B30; --status-breach-bg: #FF3B30; --status-pending: #FF9500; --status-pending-bg: #FF9500; --status-scheduled: #06b6d4; --status-scheduled-bg: #06b6d4; --status-enroute: #5856D6; --status-enroute-bg: #5856D6; --status-pickup: #FFCC00; --status-pickup-bg: #FFCC00; /* Alert banner — muted amber (readable, not purple/blue) */ --alert-banner-bg: var(--bg-card, #ffffff); --alert-banner-fg: #78350f; --alert-banner-border: #fcd34d; /* Soft info / selection washes — zinc only (no baby / powder / sky blue) */ --info-wash: #f4f4f5; --info-wash-border: #a1a1aa; --info-wash-ink: #27272a; --select-wash: rgba(24, 24, 27, 0.08); --select-glow: rgba(24, 24, 27, 0.22); /* Table / panel surfaces — cool zinc (no slate/sky blue) */ --bg-elevated: #fafafa; --table-head-bg: #e4e4e7; --table-row-hover: #f4f4f5; --table-row-selected: #e5e7eb; --table-stripe: #f4f4f5; /* Borders — cool zinc hairlines (no warm stone / peach) */ --border: #d4d4d8; --border-strong: #a1a1aa; --border-focus: #3f3f46; /* Chart neutrals — six categorical shades of the palette's own zinc scale for stacked bars, category-mix charts and legend swatches. Not the trip-lifecycle status colors (red/amber/green/blue); metadata reads as neutral. Every rung below inherits these unless it redefines them, and the .dark block flips them so no shade merges into a dark card. */ --chart-neutral-1: #18181b; --chart-neutral-2: #3f3f46; --chart-neutral-3: #52525b; --chart-neutral-4: #71717a; --chart-neutral-5: #a1a1aa; --chart-neutral-6: #d4d4d8; /* Elevation — nearly flat */ --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-glow-brand:0 0 0 2px rgba(28, 25, 23, 0.2); --shadow-glow-green:0 0 0 2px rgba(52, 199, 89, 0.28); --shadow-glow-amber:0 0 0 2px rgba(255, 149, 0, 0.28); /* Radius — tight, console-like (no capsule pills; ticker chips use their own radius) */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-full: 8px; /* Typography — compact sans for density */ --font-sans: 'IBM Plex Sans', 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'Cascadia Mono', monospace; /* Type scale — 7 steps, minimum 0.7rem (~11.2px) for readability */ --text-2xs: 0.7rem; /* ~11.2px — smallest allowed */ --text-xs: 0.75rem; /* ~12px — labels, badges, captions */ --text-sm: 0.8125rem; /* ~13px — table cells, dense body */ --text-base: 0.875rem; /* ~14px — default body */ --text-md: 1rem; /* ~16px — emphasized, nav items */ --text-lg: 1.125rem; /* ~18px — section headings */ --text-xl: 1.375rem; /* ~22px — modal/page titles */ /* Z-index layers — use these instead of arbitrary numbers */ --z-base: 1; --z-sticky: 10; --z-header: 2000; --z-dropdown: 3000; --z-overlay: 5000; --z-modal: 9000; --z-toast: 10000; --z-tooltip: 11000; --z-splash: 50000; /* Spacing — tight default rhythm (keep usable hit targets) */ --space-1: 0.15rem; --space-2: 0.3rem; --space-3: 0.45rem; --space-4: 0.6rem; --space-5: 0.8rem; --space-6: 1rem; --space-8: 1.35rem; --space-10: 1.65rem; --space-12: 2rem; /* Density helpers */ --dense-row-h: 1.55rem; --dense-pad-y: 0.2rem; --dense-pad-x: 0.4rem; --dense-font: 0.8125rem; --dense-font-sm: 0.75rem; /* Global layout padding scale */ --nscc-pad-xs: 0.2rem; --nscc-pad-sm: 0.35rem; --nscc-pad-md: 0.5rem; --nscc-pad-lg: 0.7rem; --nscc-gap: 0.4rem; --nscc-gap-lg: 0.65rem; /* Status / accent outline chips — thick colored border */ --nscc-status-border-w: 4px; /* Docs chrome (library / Support Documentation cards) */ --docs-ink-border: #000000; --docs-ink-shadow: #000000; --docs-logo-tile: #ffffff; --docs-title: #18181b; --docs-link: #1d4ed8; --docs-code-bg: #e4e4e7; --docs-code-fg: #18181b; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1); --dur-instant: 0ms; --dur-fast: 70ms; --dur-base: 120ms; --dur-slow: 200ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ——— Dark Theme — soft charcoal (12-hour shift friendly) ——— */ :root.dark, body.dark-theme { --bg-page: #151514; --bg-card: #1d1d1b; --bg-raised: #222220; --bg-sunken: #080808; --bg-overlay: #222220; --bg-atmosphere: none; --bg-grid: none; /* Darker than info/card surfaces so muted buttons stay distinct */ --btn-surface: #0c0c0b; --btn-surface-hover:#050504; --btn-surface-ink: #f5f5f4; --text-primary: #c9c9c7; --text-secondary: #d4d4d8; --text-muted: #a1a1aa; --text-inverse: #141413; --text-link: #e4e4e7; /* Chart neutrals invert so none of the six shades merges into --bg-card (#1c1c1b). Ordered darkest→lightest for parity with the light rung so the same segment index reads the same rank of contrast in both themes. */ --chart-neutral-1: #f5f5f4; --chart-neutral-2: #d4d4d8; --chart-neutral-3: #a1a1aa; --chart-neutral-4: #71717a; --chart-neutral-5: #52525b; --chart-neutral-6: #3f3f46; --brand: #0c0c0b; --brand-light: #a1a1aa; --brand-accent: #d4d4d8; --brand-glow: rgba(228, 228, 231, 0.14); /* Inactive tabs lighter than page; selected stays mid-zinc (not lightened) */ --chrome-folder: #71717a; --chrome-folder-deep: #52525b; --chrome-folder-ink: #fafafa; --chrome-folder-active: #3f3f46; --chrome-folder-active-ink: #fafafa; --chrome-folder-label: #a1a1aa; --chrome-folder-strip-bg: var(--chrome-folder-panel-bg, var(--bg-page)); --chrome-folder-panel-bg: var(--bg-page); --nav-selected-bg: #3f3f46; --nav-selected-ink: #fafafa; --nav-selected-bar: #a1a1aa; /* Top banner — matches --bg-page so the banner blends with the page. */ --banner-bg: #151514; --banner-fg: #fafafa; --banner-muted: #d4d4d8; --banner-chip-bg: #2a2a28; --frost-blue: #a1a1aa; --frost-blue-hover: #d4d4d8; --frost-blue-deep: #e4e4e7; --frost-blue-glow: rgba(228, 228, 231, 0.16); --status-unassigned: #FF3B30; --status-unassigned-bg: #FF3B30; --status-assigned: #AF52DE; --status-assigned-bg: #AF52DE; --status-secure: #34C759; --status-secure-bg: #34C759; --status-transit: #007AFF; --status-transit-bg: #007AFF; --status-breach: #FF3B30; --status-breach-bg: #FF3B30; --status-pending: #FF9500; --status-pending-bg: #FF9500; --status-scheduled: #06b6d4; --status-scheduled-bg: #06b6d4; --status-enroute: #5856D6; --status-enroute-bg: #5856D6; --status-pickup: #FFCC00; --status-pickup-bg: #FFCC00; --alert-banner-bg: #422006; --alert-banner-fg: #fde68a; --alert-banner-border: #a16207; --info-wash: #2b2b26; --info-wash-border: #3f3f36; --info-wash-ink: #e4e4e7; --select-wash: rgba(228, 228, 231, 0.1); --select-glow: rgba(228, 228, 231, 0.22); --bg-elevated: #222220; --table-head-bg: #0d0d0d; --table-row-hover: #1d1d1b; --table-row-selected: #3f3f46; --table-stripe: #1a1a19; --border: #424242; --border-strong: #545454; --border-focus: #a1a1aa; --docs-ink-border: #fafafa; --docs-ink-shadow: #fafafa; --docs-logo-tile: #ffffff; --docs-title: #f5f5f4; --docs-link: #93c5fd; --docs-code-bg: #52525b; --docs-code-fg: #fafafa; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* ============================================================================ THEME LADDER — 12 neutral themes, light to dark. Rebuilt 2026-09-26. Whites, silvers, greys, tans, browns and blacks only: no blue, pink or red chrome, and a neutral accent (charcoal, graphite, brown, silver) for the primary action, selected-nav bar and focus ring. Every earlier theme is retired; assets/nscc-theme-cycle.js migrates a saved one to the closest neutral theme. # theme page banner accent ink 1 White #ffffff #ffffff #27272a dark 2 Silver #f3f4f6 #e2e4e8 #374151 dark 3 Linen #faf7f2 #e6d8c2 #6f5238 dark 4 Pewter #e7e8ea #c9ccd1 #3f4046 dark 5 Sand #efe7da #d6c3a5 #6b4f33 dark 6 Slate #f4f4f5 #3f3f46 #3f3f46 dark 7 Walnut #f6f1ea #4a3526 #6b4a2e dark 8 Stone #c8c9cc #2e2f33 #2e2f33 dark 9 Mocha #bcae9e #3b2c21 #3b2c21 dark 10 Graphite #2e3033 #1d1e21 #c9ccd1 light <- dark family 11 Espresso #33251a #1a130e #d2ae84 light <- dark family 12 Onyx #0f0f10 #000000 #e4e4e7 light <- dark family GENERATED, NOT HAND-PICKED — scripts/gen-theme-ladder.mjs is the source of truth and `--emit` reprints everything below this comment. Each theme pins page, card, banner and accent; every other token is solved. Invariants the script re-checks: - every pair of themes differs by >= 25 Euclidean RGB on banner OR page - every ink token clears its floor on every surface it sits on The dark-family themes carry .dark / .dark-theme so the dark-mode widget rules keep applying; see the selector note in the generator. Status colours are NOT part of this. The lifecycle hexes and the chip treatment are untouched. ============================================================================ */ /* Theme 1 — White: white page, white banner. hue 0 · sat 0% · L 100% · dark ink */ html[data-nscc-theme="white"] { --bg-page: #ffffff; --bg-card: #ffffff; --bg-raised: #fbfbfb; --bg-sunken: #f2f2f2; --bg-overlay: #ffffff; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #f0f0f0; --btn-surface-hover: #e8e8e8; --btn-surface-ink: #333333; --text-primary: #1f1f1f; --text-secondary: #555555; --text-muted: #717171; --text-inverse: #faf9f9; --text-link: #6f6f77; --brand: #343434; --brand-light: #717171; --brand-accent: #27272a; --brand-glow: rgba(39, 39, 42, 0.18); --chrome-folder-active: #ffffff; --chrome-folder-active-ink: #1f1f1f; --chrome-folder-label: #717171; --nav-selected-bg: #efeff0; --nav-selected-ink: #1f1f1f; --nav-selected-bar: #27272a; --banner-bg: #ffffff; --banner-fg: #343434; --banner-muted: #6a6a6a; --banner-chip-bg: #f2f2f2; --frost-blue: #27272a; --frost-blue-hover: #27272a; --frost-blue-deep: #27272a; --frost-blue-glow: rgba(39, 39, 42, 0.18); --alert-banner-bg: #fbfbfb; --alert-banner-fg: #9d6627; --alert-banner-border: #da8a2f; --info-wash: #efeff0; --info-wash-border: #e6e6e6; --info-wash-ink: #1f1f1f; --select-wash: rgba(39, 39, 42, 0.12); --select-glow: rgba(39, 39, 42, 0.28); --bg-elevated: #fbfbfb; --table-head-bg: #f7f7f7; --table-row-hover: #fbfbfb; --table-row-selected: #efeff0; --table-stripe: #ffffff; --border: #e6e6e6; --border-strong: #cccccc; --border-focus: #27272a; --docs-ink-border: #1f1f1f; --docs-ink-shadow: #1f1f1f; --docs-logo-tile: #ffffff; --docs-title: #1f1f1f; --docs-link: #6f6f77; --docs-code-bg: #f2f2f2; --docs-code-fg: #1f1f1f; --accent: #27272a; --accent-ink: #ffffff; --accent-soft: #efeff0; --chrome-bg: #ffffff; --chrome-bg-2: #f2f2f2; --chrome-line: #dedede; --chrome-ink: #343434; --chrome-muted: #6a6a6a; --chrome-accent: #686870; --chrome-icon-filter: brightness(0) opacity(0.72); } /* Theme 2 — Silver: pale silver, silver banner. hue 219.99999999999963 · sat 14.285714285714382% · L 95.88235294117646% · dark ink */ html[data-nscc-theme="silver"] { --bg-page: #f3f4f6; --bg-card: #ffffff; --bg-raised: #f8f8f9; --bg-sunken: #e4e7eb; --bg-overlay: #ffffff; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #e2e4e9; --btn-surface-hover: #d9dce2; --btn-surface-ink: #2c313a; --text-primary: #1a1d23; --text-secondary: #4a5263; --text-muted: #636e84; --text-inverse: #f9fafa; --text-link: #5d6e89; --brand: #202228; --brand-light: #636e84; --brand-accent: #374151; --brand-glow: rgba(55, 65, 81, 0.18); --chrome-folder-active: #ffffff; --chrome-folder-active-ink: #1a1d23; --chrome-folder-label: #636e84; --nav-selected-bg: #edeff3; --nav-selected-ink: #1a1d23; --nav-selected-bar: #374151; --banner-bg: #e2e4e8; --banner-fg: #202228; --banner-muted: #525967; --banner-chip-bg: #d4d7dd; --frost-blue: #374151; --frost-blue-hover: #374151; --frost-blue-deep: #374151; --frost-blue-glow: rgba(55, 65, 81, 0.18); --alert-banner-bg: #f8f8f9; --alert-banner-fg: #9b6527; --alert-banner-border: #da8a2f; --info-wash: #edeff3; --info-wash-border: #d6d9e0; --info-wash-ink: #1a1d23; --select-wash: rgba(55, 65, 81, 0.12); --select-glow: rgba(55, 65, 81, 0.28); --bg-elevated: #f8f8f9; --table-head-bg: #eaecef; --table-row-hover: #f8f8f9; --table-row-selected: #edeff3; --table-stripe: #f6f7f8; --border: #d6d9e0; --border-strong: #b9bfca; --border-focus: #374151; --docs-ink-border: #1a1d23; --docs-ink-shadow: #1a1d23; --docs-logo-tile: #ffffff; --docs-title: #1a1d23; --docs-link: #5d6e89; --docs-code-bg: #e4e7eb; --docs-code-fg: #1a1d23; --accent: #374151; --accent-ink: #ffffff; --accent-soft: #edeff3; --chrome-bg: #e2e4e8; --chrome-bg-2: #d4d7dd; --chrome-line: #bdc2cb; --chrome-ink: #202228; --chrome-muted: #525967; --chrome-accent: #4c5a70; --chrome-icon-filter: brightness(0) opacity(0.72); } /* Theme 3 — Linen: warm white, linen banner. hue 37.50000000000008 · sat 44.444444444444464% · L 96.4705882352941% · dark ink */ html[data-nscc-theme="linen"] { --bg-page: #faf7f2; --bg-card: #fffdf9; --bg-raised: #fcfaf8; --bg-sunken: #f3ece0; --bg-overlay: #fffdf9; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #f0e9dd; --btn-surface-hover: #ece2d2; --btn-surface-ink: #423724; --text-primary: #282115; --text-secondary: #635235; --text-muted: #836c46; --text-inverse: #fafaf9; --text-link: #906a49; --brand: #1e1a12; --brand-light: #836c46; --brand-accent: #6f5238; --brand-glow: rgba(111, 82, 56, 0.18); --chrome-folder-active: #fffdf9; --chrome-folder-active-ink: #282115; --chrome-folder-label: #836c46; --nav-selected-bg: #f5efeb; --nav-selected-ink: #282115; --nav-selected-bar: #6f5238; --banner-bg: #e6d8c2; --banner-fg: #1e1a12; --banner-muted: #5e5341; --banner-chip-bg: #dfccb0; --frost-blue: #6f5238; --frost-blue-hover: #6f5238; --frost-blue-deep: #6f5238; --frost-blue-glow: rgba(111, 82, 56, 0.18); --alert-banner-bg: #fcfaf8; --alert-banner-fg: #9d6627; --alert-banner-border: #da8a2f; --info-wash: #f5efeb; --info-wash-border: #e3ded6; --info-wash-ink: #282115; --select-wash: rgba(111, 82, 56, 0.12); --select-glow: rgba(111, 82, 56, 0.28); --bg-elevated: #fcfaf8; --table-head-bg: #f6f0e7; --table-row-hover: #fcfaf8; --table-row-selected: #f5efeb; --table-stripe: #fbf9f6; --border: #e3ded6; --border-strong: #cfc6b7; --border-focus: #6f5238; --docs-ink-border: #282115; --docs-ink-shadow: #282115; --docs-logo-tile: #ffffff; --docs-title: #282115; --docs-link: #906a49; --docs-code-bg: #f3ece0; --docs-code-fg: #282115; --accent: #6f5238; --accent-ink: #ffffff; --accent-soft: #f5efeb; --chrome-bg: #e6d8c2; --chrome-bg-2: #dfccb0; --chrome-line: #cab89c; --chrome-ink: #1e1a12; --chrome-muted: #5e5341; --chrome-accent: #694e35; --chrome-icon-filter: brightness(0) opacity(0.72); } /* Theme 4 — Pewter: light grey, pewter banner. hue 220 · sat 6.666666666666638% · L 91.17647058823529% · dark ink */ html[data-nscc-theme="pewter"] { --bg-page: #e7e8ea; --bg-card: #f6f6f7; --bg-raised: #ebeced; --bg-sunken: #d9dbde; --bg-overlay: #f6f6f7; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #d7d8db; --btn-surface-hover: #cfd1d4; --btn-surface-ink: #303236; --text-primary: #1d1e21; --text-secondary: #494c53; --text-muted: #626770; --text-inverse: #f9fafa; --text-link: #676872; --brand: #050506; --brand-light: #626770; --brand-accent: #3f4046; --brand-glow: rgba(63, 64, 70, 0.18); --chrome-folder-active: #f6f6f7; --chrome-folder-active-ink: #1d1e21; --chrome-folder-label: #626770; --nav-selected-bg: #efeff1; --nav-selected-ink: #1d1e21; --nav-selected-bar: #3f4046; --banner-bg: #c9ccd1; --banner-fg: #050506; --banner-muted: #454951; --banner-chip-bg: #bbbfc5; --frost-blue: #3f4046; --frost-blue-hover: #3f4046; --frost-blue-deep: #3f4046; --frost-blue-glow: rgba(63, 64, 70, 0.18); --alert-banner-bg: #ebeced; --alert-banner-fg: #915e24; --alert-banner-border: #da8a2f; --info-wash: #efeff1; --info-wash-border: #ccced2; --info-wash-ink: #1d1e21; --select-wash: rgba(63, 64, 70, 0.12); --select-glow: rgba(63, 64, 70, 0.28); --bg-elevated: #ebeced; --table-head-bg: #dfe0e3; --table-row-hover: #ebeced; --table-row-selected: #efeff1; --table-stripe: #eaebec; --border: #ccced2; --border-strong: #b1b4ba; --border-focus: #3f4046; --docs-ink-border: #1d1e21; --docs-ink-shadow: #1d1e21; --docs-logo-tile: #ffffff; --docs-title: #1d1e21; --docs-link: #676872; --docs-code-bg: #d9dbde; --docs-code-fg: #1d1e21; --accent: #3f4046; --accent-ink: #ffffff; --accent-soft: #efeff1; --chrome-bg: #c9ccd1; --chrome-bg-2: #bbbfc5; --chrome-line: #a5aab3; --chrome-ink: #050506; --chrome-muted: #454951; --chrome-accent: #47484f; --chrome-icon-filter: brightness(0) opacity(0.72); } /* Theme 5 — Sand: sand, tan banner. hue 37.14285714285716 · sat 39.622641509433976% · L 89.60784313725489% · dark ink */ html[data-nscc-theme="sand"] { --bg-page: #efe7da; --bg-card: #faf6ef; --bg-raised: #f0eae1; --bg-sunken: #e7dbc8; --bg-overlay: #faf6ef; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #e4d9c6; --btn-surface-hover: #dfd2bc; --btn-surface-ink: #423724; --text-primary: #282115; --text-secondary: #58492f; --text-muted: #796441; --text-inverse: #fafaf9; --text-link: #85623f; --brand: #000000; --brand-light: #796441; --brand-accent: #6b4f33; --brand-glow: rgba(107, 79, 51, 0.18); --chrome-folder-active: #faf6ef; --chrome-folder-active-ink: #282115; --chrome-folder-label: #796441; --nav-selected-bg: #f5f0ea; --nav-selected-ink: #282115; --nav-selected-bar: #6b4f33; --banner-bg: #d6c3a5; --banner-fg: #000000; --banner-muted: #4e4436; --banner-chip-bg: #ceb793; --frost-blue: #6b4f33; --frost-blue-hover: #6b4f33; --frost-blue-deep: #6b4f33; --frost-blue-glow: rgba(107, 79, 51, 0.18); --alert-banner-bg: #f0eae1; --alert-banner-fg: #8f5d24; --alert-banner-border: #da8a2f; --info-wash: #f5f0ea; --info-wash-border: #d5cdc1; --info-wash-ink: #282115; --select-wash: rgba(107, 79, 51, 0.12); --select-glow: rgba(107, 79, 51, 0.28); --bg-elevated: #f0eae1; --table-head-bg: #eae0cf; --table-row-hover: #f0eae1; --table-row-selected: #f5f0ea; --table-stripe: #f1e9de; --border: #d5cdc1; --border-strong: #c1b5a2; --border-focus: #6b4f33; --docs-ink-border: #282115; --docs-ink-shadow: #282115; --docs-logo-tile: #ffffff; --docs-title: #282115; --docs-link: #85623f; --docs-code-bg: #e7dbc8; --docs-code-fg: #282115; --accent: #6b4f33; --accent-ink: #ffffff; --accent-soft: #f5f0ea; --chrome-bg: #d6c3a5; --chrome-bg-2: #ceb793; --chrome-line: #baa37f; --chrome-ink: #000000; --chrome-muted: #4e4436; --chrome-accent: #5a422b; --chrome-icon-filter: brightness(0) opacity(0.72); } /* Theme 6 — Slate: near-white, dark grey banner. hue 240 · sat 4.761904761904756% · L 95.88235294117648% · dark ink */ html[data-nscc-theme="slate"] { --bg-page: #f4f4f5; --bg-card: #ffffff; --bg-raised: #f8f8f9; --bg-sunken: #e7e7e9; --bg-overlay: #ffffff; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #e4e4e6; --btn-surface-hover: #dcdcdf; --btn-surface-ink: #313135; --text-primary: #1d1d20; --text-secondary: #52525b; --text-muted: #6d6d78; --text-inverse: #f9f9fa; --text-link: #6d6d79; --brand: #3f3f46; --brand-light: #6d6d78; --brand-accent: #3f3f46; --brand-glow: rgba(63, 63, 70, 0.18); --chrome-folder-active: #ffffff; --chrome-folder-active-ink: #1d1d20; --chrome-folder-label: #6d6d78; --nav-selected-bg: #efeff1; --nav-selected-ink: #1d1d20; --nav-selected-bar: #3f3f46; --banner-bg: #3f3f46; --banner-fg: #ffffff; --banner-muted: #b0b0b8; --banner-chip-bg: #313136; --frost-blue: #3f3f46; --frost-blue-hover: #3f3f46; --frost-blue-deep: #3f3f46; --frost-blue-glow: rgba(63, 63, 70, 0.18); --alert-banner-bg: #f8f8f9; --alert-banner-fg: #9b6527; --alert-banner-border: #da8a2f; --info-wash: #efeff1; --info-wash-border: #d9d9dd; --info-wash-ink: #1d1d20; --select-wash: rgba(63, 63, 70, 0.12); --select-glow: rgba(63, 63, 70, 0.28); --bg-elevated: #f8f8f9; --table-head-bg: #ececee; --table-row-hover: #f8f8f9; --table-row-selected: #efeff1; --table-stripe: #f7f7f7; --border: #d9d9dd; --border-strong: #bfbfc4; --border-focus: #3f3f46; --docs-ink-border: #1d1d20; --docs-ink-shadow: #1d1d20; --docs-logo-tile: #ffffff; --docs-title: #1d1d20; --docs-link: #6d6d79; --docs-code-bg: #e7e7e9; --docs-code-fg: #1d1d20; --accent: #3f3f46; --accent-ink: #ffffff; --accent-soft: #efeff1; --chrome-bg: #3f3f46; --chrome-bg-2: #313136; --chrome-line: #222226; --chrome-ink: #ffffff; --chrome-muted: #b0b0b8; --chrome-accent: #b0b0b8; --chrome-icon-filter: brightness(0) invert(0.93); } /* Theme 7 — Walnut: warm white, walnut banner. hue 34.99999999999998 · sat 40.00000000000007% · L 94.11764705882352% · dark ink */ html[data-nscc-theme="walnut"] { --bg-page: #f6f1ea; --bg-card: #fffcf8; --bg-raised: #f8f4f0; --bg-sunken: #eee5d8; --bg-overlay: #fffcf8; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #ece3d6; --btn-surface-hover: #e7dbcb; --btn-surface-ink: #423624; --text-primary: #282015; --text-secondary: #614e34; --text-muted: #826946; --text-inverse: #fafaf9; --text-link: #92653f; --brand: #4a3526; --brand-light: #826946; --brand-accent: #6b4a2e; --brand-glow: rgba(107, 74, 46, 0.18); --chrome-folder-active: #fffcf8; --chrome-folder-active-ink: #282015; --chrome-folder-label: #826946; --nav-selected-bg: #f6efea; --nav-selected-ink: #282015; --nav-selected-bar: #6b4a2e; --banner-bg: #4a3526; --banner-fg: #ffffff; --banner-muted: #cfbfb4; --banner-chip-bg: #624632; --frost-blue: #6b4a2e; --frost-blue-hover: #6b4a2e; --frost-blue-deep: #6b4a2e; --frost-blue-glow: rgba(107, 74, 46, 0.18); --alert-banner-bg: #f8f4f0; --alert-banner-fg: #996326; --alert-banner-border: #da8a2f; --info-wash: #f6efea; --info-wash-border: #dfd8ce; --info-wash-ink: #282015; --select-wash: rgba(107, 74, 46, 0.12); --select-glow: rgba(107, 74, 46, 0.28); --bg-elevated: #f8f4f0; --table-head-bg: #f1eadf; --table-row-hover: #f8f4f0; --table-row-selected: #f6efea; --table-stripe: #f8f3ee; --border: #dfd8ce; --border-strong: #cabfb0; --border-focus: #6b4a2e; --docs-ink-border: #282015; --docs-ink-shadow: #282015; --docs-logo-tile: #ffffff; --docs-title: #282015; --docs-link: #92653f; --docs-code-bg: #eee5d8; --docs-code-fg: #282015; --accent: #6b4a2e; --accent-ink: #ffffff; --accent-soft: #f6efea; --chrome-bg: #4a3526; --chrome-bg-2: #624632; --chrome-line: #79573e; --chrome-ink: #ffffff; --chrome-muted: #cfbfb4; --chrome-accent: #d9bda6; --chrome-icon-filter: brightness(0) invert(0.93); } /* Theme 8 — Stone: light grey, charcoal banner. hue 225 · sat 6.06060606060604% · L 87.05882352941177% · dark ink */ html[data-nscc-theme="stone"] { --bg-page: #dcdde0; --bg-card: #eaebed; --bg-raised: #e0e1e3; --bg-sunken: #ced0d4; --bg-overlay: #eaebed; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #cccdd1; --btn-surface-hover: #c4c6ca; --btn-surface-ink: #303136; --text-primary: #1d1e20; --text-secondary: #43454c; --text-muted: #5c5f68; --text-inverse: #f9fafa; --text-link: #60626a; --brand: #2e2f33; --brand-light: #5c5f68; --brand-accent: #2e2f33; --brand-glow: rgba(46, 47, 51, 0.18); --chrome-folder-active: #eaebed; --chrome-folder-active-ink: #1d1e20; --chrome-folder-label: #5c5f68; --nav-selected-bg: #efeff0; --nav-selected-ink: #1d1e20; --nav-selected-bar: #2e2f33; --banner-bg: #2e2f33; --banner-fg: #ffffff; --banner-muted: #b0b2b8; --banner-chip-bg: #3f4046; --frost-blue: #2e2f33; --frost-blue-hover: #2e2f33; --frost-blue-deep: #2e2f33; --frost-blue-glow: rgba(46, 47, 51, 0.18); --alert-banner-bg: #e0e1e3; --alert-banner-fg: #875822; --alert-banner-border: #da8a2f; --info-wash: #efeff0; --info-wash-border: #c1c3c8; --info-wash-ink: #1d1e20; --select-wash: rgba(46, 47, 51, 0.12); --select-glow: rgba(46, 47, 51, 0.28); --bg-elevated: #e0e1e3; --table-head-bg: #d4d5d9; --table-row-hover: #e0e1e3; --table-row-selected: #efeff0; --table-stripe: #dfe0e2; --border: #c1c3c8; --border-strong: #a6a8b0; --border-focus: #2e2f33; --docs-ink-border: #1d1e20; --docs-ink-shadow: #1d1e20; --docs-logo-tile: #ffffff; --docs-title: #1d1e20; --docs-link: #60626a; --docs-code-bg: #ced0d4; --docs-code-fg: #1d1e20; --accent: #2e2f33; --accent-ink: #ffffff; --accent-soft: #efeff0; --chrome-bg: #2e2f33; --chrome-bg-2: #3f4046; --chrome-line: #505259; --chrome-ink: #ffffff; --chrome-muted: #b0b2b8; --chrome-accent: #b0b1b8; --chrome-icon-filter: brightness(0) invert(0.93); } /* Theme 9 — Mocha: light tan, dark brown banner. hue 33.59999999999996 · sat 23.364485981308416% · L 79.01960784313727% · dark ink */ html[data-nscc-theme="mocha"] { --bg-page: #d6cbbd; --bg-card: #e5ddd2; --bg-raised: #d7cfc3; --bg-sunken: #ccbfad; --bg-overlay: #e5ddd2; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #c9bcac; --btn-surface-hover: #c3b4a2; --btn-surface-ink: #31291e; --text-primary: #261f17; --text-secondary: #44382a; --text-muted: #63533e; --text-inverse: #fafaf9; --text-link: #6e523d; --brand: #3b2c21; --brand-light: #63533e; --brand-accent: #3b2c21; --brand-glow: rgba(59, 44, 33, 0.18); --chrome-folder-active: #e5ddd2; --chrome-folder-active-ink: #261f17; --chrome-folder-label: #63533e; --nav-selected-bg: #f4efeb; --nav-selected-ink: #261f17; --nav-selected-bar: #3b2c21; --banner-bg: #3b2c21; --banner-fg: #ffffff; --banner-muted: #c2afa0; --banner-chip-bg: #523d2e; --frost-blue: #3b2c21; --frost-blue-hover: #3b2c21; --frost-blue-deep: #3b2c21; --frost-blue-glow: rgba(59, 44, 33, 0.18); --alert-banner-bg: #d7cfc3; --alert-banner-fg: #784e1e; --alert-banner-border: #da8a2f; --info-wash: #f4efeb; --info-wash-border: #c0b2a0; --info-wash-ink: #261f17; --select-wash: rgba(59, 44, 33, 0.12); --select-glow: rgba(59, 44, 33, 0.28); --bg-elevated: #d7cfc3; --table-head-bg: #d0c4b4; --table-row-hover: #d7cfc3; --table-row-selected: #f4efeb; --table-stripe: #d8cdc0; --border: #c0b2a0; --border-strong: #ab9982; --border-focus: #3b2c21; --docs-ink-border: #261f17; --docs-ink-shadow: #261f17; --docs-logo-tile: #ffffff; --docs-title: #261f17; --docs-link: #6e523d; --docs-code-bg: #ccbfad; --docs-code-fg: #261f17; --accent: #3b2c21; --accent-ink: #ffffff; --accent-soft: #f4efeb; --chrome-bg: #3b2c21; --chrome-bg-2: #523d2e; --chrome-line: #694e3b; --chrome-ink: #ffffff; --chrome-muted: #c2afa0; --chrome-accent: #c7ae9b; --chrome-icon-filter: brightness(0) invert(0.93); } /* Theme 10 — Graphite: dark grey, silver accent. hue 216 · sat 5.154639175257736% · L 19.019607843137255% · light ink · DARK FAMILY (also carries .dark) */ html.dark[data-nscc-theme="graphite"], html[data-nscc-theme="graphite"], html[data-nscc-theme="graphite"] body.dark-theme { --bg-page: #2e3033; --bg-card: #383a3e; --bg-raised: #414347; --bg-sunken: #27282b; --bg-overlay: #383a3e; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #44474b; --btn-surface-hover: #4f5257; --btn-surface-ink: #f2f2f3; --text-primary: #f4f5f5; --text-secondary: #d8dadc; --text-muted: #afb2b6; --text-inverse: #101418; --text-link: #aeb2ba; --brand: #1d1e21; --brand-light: #afb2b6; --brand-accent: #c9ccd1; --brand-glow: rgba(201, 204, 209, 0.18); --chrome-folder-active: #383a3e; --chrome-folder-active-ink: #f4f5f5; --chrome-folder-label: #afb2b6; --nav-selected-bg: #3d4148; --nav-selected-ink: #f4f5f5; --nav-selected-bar: #c9ccd1; --banner-bg: #1d1e21; --banner-fg: #e9eaec; --banner-muted: #989ba5; --banner-chip-bg: #2e2f34; --frost-blue: #c9ccd1; --frost-blue-hover: #c9ccd1; --frost-blue-deep: #c9ccd1; --frost-blue-glow: rgba(201, 204, 209, 0.18); --alert-banner-bg: #414347; --alert-banner-fg: #dba86e; --alert-banner-border: #dd923c; --info-wash: #3d4148; --info-wash-border: #4b4e53; --info-wash-ink: #f4f5f5; --select-wash: rgba(201, 204, 209, 0.12); --select-glow: rgba(201, 204, 209, 0.28); --bg-elevated: #414347; --table-head-bg: #3f4246; --table-row-hover: #414347; --table-row-selected: #3d4148; --table-stripe: #333538; --border: #4b4e53; --border-strong: #63686e; --border-focus: #c9ccd1; --docs-ink-border: #f4f5f5; --docs-ink-shadow: #f4f5f5; --docs-logo-tile: #414347; --docs-title: #f4f5f5; --docs-link: #aeb2ba; --docs-code-bg: #27282b; --docs-code-fg: #f4f5f5; --accent: #c9ccd1; --accent-ink: #131416; --accent-soft: #3d4148; --chrome-bg: #1d1e21; --chrome-bg-2: #2e2f34; --chrome-line: #3e4147; --chrome-ink: #e9eaec; --chrome-muted: #989ba5; --chrome-accent: #969ca6; --chrome-icon-filter: brightness(0) invert(0.93); } /* Theme 11 — Espresso: dark brown, tan accent. hue 26.400000000000002 · sat 32.467532467532465% · L 15.098039215686276% · light ink · DARK FAMILY (also carries .dark) */ html.dark[data-nscc-theme="espresso"], html[data-nscc-theme="espresso"], html[data-nscc-theme="espresso"] body.dark-theme { --bg-page: #33251a; --bg-card: #3d2e22; --bg-raised: #4a382a; --bg-sunken: #291e15; --bg-overlay: #3d2e22; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #4f3b2b; --btn-surface-hover: #5e4634; --btn-surface-ink: #ede5de; --text-primary: #f4efeb; --text-secondary: #dcccbf; --text-muted: #c0a18a; --text-inverse: #181410; --text-link: #caa06f; --brand: #1a130e; --brand-light: #c0a18a; --brand-accent: #d2ae84; --brand-glow: rgba(210, 174, 132, 0.18); --chrome-folder-active: #3d2e22; --chrome-folder-active-ink: #f4efeb; --chrome-folder-label: #c0a18a; --nav-selected-bg: #493a27; --nav-selected-ink: #f4efeb; --nav-selected-bar: #d2ae84; --banner-bg: #1a130e; --banner-fg: #e5dbd4; --banner-muted: #a98d79; --banner-chip-bg: #31241a; --frost-blue: #d2ae84; --frost-blue-hover: #d2ae84; --frost-blue-deep: #d2ae84; --frost-blue-glow: rgba(210, 174, 132, 0.18); --alert-banner-bg: #4a382a; --alert-banner-fg: #d69d5c; --alert-banner-border: #dd923c; --info-wash: #493a27; --info-wash-border: #534337; --info-wash-ink: #f4efeb; --select-wash: rgba(210, 174, 132, 0.12); --select-glow: rgba(210, 174, 132, 0.28); --bg-elevated: #4a382a; --table-head-bg: #4b3626; --table-row-hover: #4a382a; --table-row-selected: #493a27; --table-stripe: #3a2a1d; --border: #534337; --border-strong: #725c4c; --border-focus: #d2ae84; --docs-ink-border: #f4efeb; --docs-ink-shadow: #f4efeb; --docs-logo-tile: #4a382a; --docs-title: #f4efeb; --docs-link: #caa06f; --docs-code-bg: #291e15; --docs-code-fg: #f4efeb; --accent: #d2ae84; --accent-ink: #181510; --accent-soft: #493a27; --chrome-bg: #1a130e; --chrome-bg-2: #31241a; --chrome-line: #483527; --chrome-ink: #e5dbd4; --chrome-muted: #a98d79; --chrome-accent: #c29057; --chrome-icon-filter: brightness(0) invert(0.93); } /* Theme 12 — Onyx: near-black, silver accent. hue 240 · sat 3.225806451612903% · L 6.078431372549019% · light ink · DARK FAMILY (also carries .dark) */ html.dark[data-nscc-theme="onyx"], html[data-nscc-theme="onyx"], html[data-nscc-theme="onyx"] body.dark-theme { --bg-page: #0f0f10; --bg-card: #1a1a1c; --bg-raised: #222224; --bg-sunken: #080808; --bg-overlay: #1a1a1c; --bg-atmosphere: none; --bg-grid: none; --btn-surface: #252528; --btn-surface-hover: #303033; --btn-surface-ink: #dfdfe1; --text-primary: #efeff0; --text-secondary: #acacb1; --text-muted: #8a8a91; --text-inverse: #101018; --text-link: #93939f; --brand: #000000; --brand-light: #8a8a91; --brand-accent: #e4e4e7; --brand-glow: rgba(228, 228, 231, 0.18); --chrome-folder-active: #1a1a1c; --chrome-folder-active-ink: #efeff0; --chrome-folder-label: #8a8a91; --nav-selected-bg: #1f1f23; --nav-selected-ink: #efeff0; --nav-selected-bar: #e4e4e7; --banner-bg: #000000; --banner-fg: #d9d9d9; --banner-muted: #818181; --banner-chip-bg: #121212; --frost-blue: #e4e4e7; --frost-blue-hover: #e4e4e7; --frost-blue-deep: #e4e4e7; --frost-blue-glow: rgba(228, 228, 231, 0.18); --alert-banner-bg: #222224; --alert-banner-fg: #d69d5c; --alert-banner-border: #dd923c; --info-wash: #1f1f23; --info-wash-border: #2d2d30; --info-wash-ink: #efeff0; --select-wash: rgba(228, 228, 231, 0.12); --select-glow: rgba(228, 228, 231, 0.28); --bg-elevated: #222224; --table-head-bg: #202022; --table-row-hover: #222224; --table-row-selected: #1f1f23; --table-stripe: #141415; --border: #2d2d30; --border-strong: #45454a; --border-focus: #e4e4e7; --docs-ink-border: #efeff0; --docs-ink-shadow: #efeff0; --docs-logo-tile: #222224; --docs-title: #efeff0; --docs-link: #93939f; --docs-code-bg: #080808; --docs-code-fg: #efeff0; --accent: #e4e4e7; --accent-ink: #131316; --accent-soft: #1f1f23; --chrome-bg: #000000; --chrome-bg-2: #121212; --chrome-line: #242424; --chrome-ink: #d9d9d9; --chrome-muted: #818181; --chrome-accent: #868693; --chrome-icon-filter: brightness(0) invert(0.93); } /* ============================================================ BASE RESETS & BODY ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.35; color: var(--text-primary); background-color: var(--bg-page); background-image: none; background-attachment: scroll; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out); } /* ============================================================ BUTTON SYSTEM (unified across all apps) ============================================================ */ /* Base */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.32rem 0.7rem; border: 2.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,0); transition: background var(--dur-fast) var(--ease-out); } .btn:hover::after { background: rgba(255,255,255,0.06); } .btn:active { transform: translateY(1px); } .btn:active::after { background: rgba(0,0,0,0.05); } .btn:focus-visible { outline: none; box-shadow: var(--shadow-glow-brand); } /* Primary — muted fill (darker than info/card boxes) */ .btn-primary { background: var(--btn-surface); color: var(--btn-surface-ink); border: var(--nscc-line-w, 2.5px) solid var(--nscc-line, #000000); box-shadow: none; } .btn-primary:hover { background: var(--btn-surface-hover); color: var(--btn-surface-ink); border-color: var(--nscc-line, #000000); box-shadow: none; transform: translateY(-1px); } /* Frost / schedule — outlined accent */ .btn-frost, .btn-submit-schedule { background: transparent !important; background-color: transparent !important; color: var(--text-primary) !important; border: 2.5px solid var(--frost-blue-deep, #1c1917) !important; box-shadow: none !important; } .btn-frost:hover:not(:disabled):not([aria-disabled="true"]), .btn-submit-schedule:hover:not(:disabled):not([aria-disabled="true"]) { background: transparent !important; background-color: transparent !important; color: var(--text-primary) !important; border-color: var(--frost-blue-deep, #1c1917) !important; box-shadow: none !important; transform: translateY(-1px); } .btn-frost:disabled, .btn-frost[aria-disabled="true"], .btn-submit-schedule:disabled, .btn-submit-schedule[aria-disabled="true"] { opacity: 0.55; transform: none; box-shadow: none !important; } /* Secondary — muted fill */ .btn-secondary { background: var(--btn-surface); color: var(--btn-surface-ink); border: var(--nscc-line-w, 2.5px) solid var(--nscc-line, #000000); box-shadow: none; } .btn-secondary:hover { background: var(--btn-surface-hover); color: var(--btn-surface-ink); border-color: var(--nscc-line, #000000); box-shadow: none; transform: translateY(-1px); } /* Ghost — same muted fill as other gray/black actions */ .btn-ghost { background: var(--btn-surface); color: var(--btn-surface-ink); border: var(--nscc-line-w, 2.5px) solid var(--nscc-line, #000000); box-shadow: none; } .btn-ghost:hover { background: var(--btn-surface-hover); color: var(--btn-surface-ink); border-color: var(--nscc-line, #000000); } :root.dark .btn-ghost, body.dark-theme .btn-ghost { background: var(--btn-surface); color: var(--btn-surface-ink); border-color: var(--nscc-line, #ffffff); } :root.dark .btn-ghost:hover, body.dark-theme .btn-ghost:hover { background: var(--btn-surface-hover); color: var(--btn-surface-ink); } /* Success — outlined green */ .btn-success { background: transparent !important; background-color: transparent !important; color: var(--text-primary) !important; border: var(--nscc-status-border-w, 4px) solid var(--status-secure, #16a34a) !important; box-shadow: none !important; } :root.dark .btn-success, body.dark-theme .btn-success { color: #ffffff !important; border-color: var(--status-secure, #22c55e) !important; } .btn-success:hover { background: transparent !important; background-color: transparent !important; transform: translateY(-1px); box-shadow: none !important; } /* Warning — outlined amber */ .btn-warning { background: transparent !important; background-color: transparent !important; color: var(--text-primary) !important; border: var(--nscc-status-border-w, 4px) solid var(--status-pending, #d97706) !important; box-shadow: none !important; } :root.dark .btn-warning, body.dark-theme .btn-warning { color: #ffffff !important; border-color: #fbbf24 !important; } .btn-warning:hover { background: transparent !important; background-color: transparent !important; transform: translateY(-1px); box-shadow: none !important; } /* Danger — outlined red */ .btn-danger { background: transparent !important; background-color: transparent !important; color: var(--text-primary) !important; border: var(--nscc-status-border-w, 4px) solid var(--status-breach, #dc2626) !important; box-shadow: none !important; } :root.dark .btn-danger, body.dark-theme .btn-danger { color: #ffffff !important; border-color: #f87171 !important; } .btn-danger:hover { background: transparent !important; background-color: transparent !important; transform: translateY(-1px); box-shadow: none !important; } /* Outline variant — muted gray fill like other black/gray actions */ .btn-outline-primary { background: var(--btn-surface); color: var(--btn-surface-ink); border: var(--nscc-line-w, 2.5px) solid var(--nscc-line, #000000); box-shadow: none; } .btn-outline-primary:hover { background: var(--btn-surface-hover); color: var(--btn-surface-ink); border-color: var(--nscc-line, #000000); } /* Sizes */ .btn-xs { padding: 0.3rem 0.75rem; font-size: 0.75rem; } .btn-sm { padding: 0.4rem 1rem; font-size: 0.8125rem; } .btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; } .btn-xl { padding: 1rem 2rem; font-size: 1.125rem; letter-spacing: 0.02em; } .btn-block { width: 100%; } /* Disabled */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } /* Icon-only circular */ .btn-icon { padding: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); font-size: 1rem; } .btn-icon.btn-sm { width: 1.875rem; height: 1.875rem; font-size: 0.875rem; } .btn-icon.btn-lg { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; } /* ============================================================ BADGE / STATUS CHIPS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.65em; border-radius: 8px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; background: transparent; color: var(--text-primary); border: 4px solid #64748b; box-shadow: none; } .badge-unassigned { background: transparent; color: var(--text-primary); border: 4px solid #FF3B30; } .badge-assigned { background: transparent; color: var(--text-primary); border: 4px solid #AF52DE; } .badge-secure { background: transparent; color: var(--text-primary); border: 4px solid #34C759; } .badge-transit { background: transparent; color: var(--text-primary); border: 4px solid #007AFF; } .badge-breach { background: transparent; color: var(--text-primary); border: 4px solid #FF3B30; } .badge-pending { background: transparent; color: var(--text-primary); border: 4px solid #FF9500; } .badge-scheduled { background: transparent; color: var(--text-primary); border: 4px solid #06b6d4; } .badge-pickup { background: transparent; color: var(--text-primary); border: 4px solid #FFCC00; } .badge-neutral { background: transparent; color: var(--text-primary); border: 4px solid #64748b; } .badge-primary { background: transparent; color: var(--text-primary); border: 4px solid var(--brand-light, #0d9488); } /* Legacy aliases for backward compat */ .badge.green { background: transparent; color: var(--text-primary); border: 4px solid #34C759; } .badge.amber { background: transparent; color: var(--text-primary); border: 4px solid #FF9500; } /* Dark mode: outline chips keep light ink (not white-on-fill) */ :root.dark .badge, body.dark-theme .badge, :root.dark [class*="badge-"], body.dark-theme [class*="badge-"] { color: #fafaf9 !important; background: transparent !important; } /* ============================================================ CARD BASE ============================================================ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .card-interactive { cursor: pointer; } .card-interactive:hover { transform: translateY(-2px); } .card-interactive:active { transform: translateY(0); } /* ============================================================ FORM ELEMENTS ============================================================ */ input[type="search"] { display: block; width: 100%; padding: 0.55rem 0.875rem; background: var(--bg-card); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-primary); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast); } .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea { display: block; width: 100%; padding: 0.55rem 0.875rem; background: var(--bg-card); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-primary); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast); } .input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-glow-brand); } input[type="search"]:focus { outline: none; border-color: var(--nscc-line, #000000); box-shadow: var(--shadow-sm); } .input:hover:not(:disabled):not(:focus), input[type="text"]:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { background: var(--bg-sunken); } input[type="search"]:hover:not(:disabled):not(:focus) { background: var(--bg-sunken); border-color: var(--nscc-line, #000000); } .input::placeholder { color: var(--text-muted); } /* ============================================================ DROPDOWN / SELECT SYSTEM ============================================================ */ :root { --nscc-select-height: 32px; --nscc-select-padding-x: 0.4rem; --nscc-select-padding-y: 0.2rem; --nscc-select-font-size: 0.8125rem; --nscc-select-radius: var(--radius-sm); --nscc-select-chevron-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6573' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --nscc-select-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8b0bc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --nscc-select-chevron: var(--nscc-select-chevron-light); } :root.dark, body.dark-theme { --nscc-select-chevron: var(--nscc-select-chevron-dark); } select, .nscc-select, .form-select, .nscc-form-select, .nscc-support-select, .select-control, .form-control-panel, .filter-select { display: block; width: 100%; min-height: var(--nscc-select-height); height: auto; padding: var(--nscc-select-padding-y) calc(var(--nscc-select-padding-x) + 1.1rem) var(--nscc-select-padding-y) var(--nscc-select-padding-x); background-color: var(--bg-card); background-image: var(--nscc-select-chevron); background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 0.75rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--nscc-select-radius); box-shadow: none; font-family: var(--font-sans); font-size: var(--nscc-select-font-size); font-weight: 600; line-height: 1.4; color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); color-scheme: light; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; transition: background-color 60ms linear; } :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 .form-control-panel, :root.dark .filter-select, 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 .form-control-panel, body.dark-theme .filter-select { border-color: var(--nscc-line, #ffffff); color-scheme: dark; color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); } select:active, select:focus, .nscc-select:active, .nscc-select:focus, .form-select:active, .form-select:focus, .filter-select:active, .filter-select:focus { transform: none; } select:hover:not(:disabled), .nscc-select:hover:not(:disabled), .form-select:hover:not(:disabled), .nscc-form-select:hover:not(:disabled), .nscc-support-select:hover:not(:disabled), .select-control:hover:not(:disabled), .filter-select:hover:not(:disabled) { background-color: var(--bg-raised); box-shadow: none; border-color: var(--nscc-line, #000000); } :root.dark select:hover:not(:disabled), body.dark-theme select:hover:not(:disabled), :root.dark .nscc-select:hover:not(:disabled), body.dark-theme .nscc-select:hover:not(:disabled), :root.dark .form-select:hover:not(:disabled), body.dark-theme .form-select:hover:not(:disabled), :root.dark .nscc-form-select:hover:not(:disabled), body.dark-theme .nscc-form-select:hover:not(:disabled), :root.dark .select-control:hover:not(:disabled), body.dark-theme .select-control:hover:not(:disabled), :root.dark .filter-select:hover:not(:disabled), body.dark-theme .filter-select:hover:not(:disabled) { border-color: var(--nscc-line, #ffffff); } input.form-control-panel:hover:not(:disabled), textarea.form-control-panel:hover:not(:disabled) { background-color: var(--bg-sunken); box-shadow: none; } select:focus, .nscc-select:focus, .form-select:focus, .nscc-form-select:focus, .nscc-support-select:focus, .select-control:focus, .form-control-panel:focus, .filter-select:focus, select:active, select:open, .nscc-select:active, .nscc-select:open, .form-select:active, .form-select:open, .nscc-form-select:active, .nscc-form-select:open, .select-inline--ghost:focus, .select-inline--ghost:active, .select-inline--ghost:open, .select-compact:focus, .select-compact:active, .select-compact:open { outline: none; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; box-shadow: none; color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); } :root.dark select:focus, :root.dark select:active, :root.dark select:open, body.dark-theme select:focus, body.dark-theme select:active, body.dark-theme select:open, :root.dark .nscc-select:focus, :root.dark .nscc-form-select:focus, :root.dark .select-control:focus, :root.dark .filter-select:focus, body.dark-theme .nscc-select:focus, body.dark-theme .nscc-form-select:focus, body.dark-theme .select-control:focus, body.dark-theme .filter-select:focus { border-color: var(--nscc-line, #ffffff) !important; } select:disabled, .nscc-select:disabled, .form-select:disabled, .select-control:disabled, .form-control-panel:disabled, .filter-select:disabled { opacity: 0.55; cursor: not-allowed; color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); box-shadow: none; } select option, .form-select option, .nscc-form-select option, .nscc-support-select option { background: var(--bg-card); color: var(--text-primary); font-weight: 600; } /* Panel selects ΓÇö card surface (Reports, Batch, Planner, Support); not sunken gray */ select.form-control-panel, select.select-control, .nscc-form-select, .nscc-support-select { background-color: var(--bg-card); -webkit-text-fill-color: var(--text-primary); opacity: 1; text-overflow: ellipsis; max-width: 100%; } /* Sunken background variant ΓÇö text inputs only (forms, modals, batch tools) */ input.form-control-panel, textarea.form-control-panel { background-color: var(--bg-sunken); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); } /* Compact toolbar / planner week pickers */ select.nscc-form-select--compact, select.form-control-panel.nscc-form-select--compact { min-height: 32px; padding: 0.35rem calc(0.5rem + 1.1rem) 0.35rem 0.5rem; font-size: 0.8rem; line-height: 1.35; } /* Compact map / toolbar filters */ .filter-select { width: auto; font-size: 0.8125rem; font-weight: 700; } .filter-select--compact { min-height: 30px; height: auto; padding: 0.25rem 1.75rem 0.25rem 0.5rem !important; line-height: 1.35; font-size: 0.75rem; } .filter-select--wide { width: 100%; } /* Pill-shaped toolbar filters (card view, ops toolbar) */ .select-toolbar { width: auto; min-height: 32px; height: auto; padding: 0.4rem 1.75rem 0.4rem 0.65rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; } .select-toolbar--branch { max-width: 220px; } /* Dispatch table inline selects */ .select-inline { width: 100%; min-height: auto; height: auto; padding: 0.2rem 1.25rem 0.28rem 0.35rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; line-height: 1.35; border-radius: var(--radius-xs); box-shadow: var(--shadow-md); } .select-inline--dispatch { font-size: 11pt; font-weight: 700; padding: 0.15rem 1.25rem 0.22rem 0.25rem; line-height: 1.35; } .select-inline--dispatch.select-inline--ghost { font-size: 11pt; padding-right: 1.1rem; } .select-inline--ghost { background-color: transparent; background-image: var(--nscc-select-chevron); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); box-shadow: none; padding-left: 0.2rem; padding-right: 1.1rem; font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono); min-height: auto; height: auto; } .select-inline--ghost:hover:not(:disabled) { background-color: var(--bg-sunken); box-shadow: none; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); } .select-inline--ghost:focus, .select-inline--ghost:active, .select-inline--ghost:open { background-color: var(--bg-sunken); box-shadow: none; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; border-radius: var(--radius-xs); } :root.dark .select-inline--ghost, body.dark-theme .select-inline--ghost { border-color: var(--nscc-line, #ffffff); } :root.dark .select-inline--ghost:hover:not(:disabled), :root.dark .select-inline--ghost:focus, :root.dark .select-inline--ghost:active, :root.dark .select-inline--ghost:open, body.dark-theme .select-inline--ghost:hover:not(:disabled), body.dark-theme .select-inline--ghost:focus, body.dark-theme .select-inline--ghost:active, body.dark-theme .select-inline--ghost:open { border-color: var(--nscc-line, #ffffff) !important; } /* Gantt / timeline compact selects */ .select-compact { min-height: auto; height: auto; padding: 0.2rem 1.1rem 0.28rem 0.3rem; font-size: 0.68rem; font-weight: 600; line-height: 1.35; border-radius: var(--radius-xs); background-color: var(--bg-sunken); box-shadow: none; } .select-compact--flex { flex: 1; min-width: 0; } .select-compact--block { width: 100%; margin-bottom: 6px; } .select-compact:hover:not(:disabled) { background-color: var(--bg-card); box-shadow: var(--shadow-md); } /* Primary dispatch table filter row */ .select-filter-row { flex: 1 1 auto; max-width: 140px; min-height: auto; height: auto; padding: 0.25rem 1.25rem 0.3rem 0.4rem; font-size: 0.75rem; font-weight: 800; line-height: 1.35; border-radius: var(--radius-xs); } .nscc-location-combobox { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; max-width: 140px; min-width: 0; padding: 0; background: var(--bg-card); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-xs); box-shadow: var(--shadow-md); box-sizing: border-box; } :root.dark .nscc-location-combobox, body.dark-theme .nscc-location-combobox { border-color: var(--nscc-line, #ffffff); } .nscc-location-combobox.select-filter-row { min-height: auto; height: auto; } .nscc-location-combobox__trigger { width: 100%; min-height: 0; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; font-weight: 800; line-height: 1.35; padding: 0.25rem 0.4rem; margin: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .nscc-location-combobox__trigger.has-value { color: var(--text-primary); } .nscc-location-combobox__trigger:hover, .nscc-location-combobox__trigger:focus { color: var(--text-primary); outline: none; } .nscc-location-combobox__panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 120; min-width: 220px; width: max-content; max-width: min(320px, 85vw); padding: 0.35rem; background: var(--bg-card); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-xs); box-shadow: var(--shadow-lg); box-sizing: border-box; color: var(--text-primary); } :root.dark .nscc-location-combobox__panel, body.dark-theme .nscc-location-combobox__panel { border-color: var(--nscc-line, #ffffff); } .nscc-location-combobox__search { width: 100%; box-sizing: border-box; margin: 0 0 0.3rem; padding: 0.25rem 0.4rem; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); background: var(--bg-card); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-xs); outline: none; } :root.dark .nscc-location-combobox__search, body.dark-theme .nscc-location-combobox__search { border-color: var(--nscc-line, #ffffff); } .nscc-location-combobox__search:focus { border-color: var(--nscc-line, #000000); } :root.dark .nscc-location-combobox__search:focus, body.dark-theme .nscc-location-combobox__search:focus { border-color: var(--nscc-line, #ffffff); } .nscc-location-combobox__menu { max-height: 220px; overflow-y: auto; margin: 0; padding: 0; list-style: none; } .nscc-location-combobox__option { padding: 0.35rem 0.55rem; font-size: 0.75rem; font-weight: 700; color: var(--text-primary); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nscc-location-combobox__option:hover, .nscc-location-combobox__option.is-active { background: rgba(88, 86, 214, 0.14); color: var(--text-primary); } .nscc-location-combobox__empty { padding: 0.45rem 0.55rem; font-size: 0.72rem; color: var(--text-muted); font-style: italic; } .nscc-location-combobox.is-open { border-color: var(--border-focus); box-shadow: var(--shadow-glow-brand); } .nscc-location-combobox:hover { background-color: var(--bg-raised); box-shadow: 3px 3px 0 var(--border); } /* Pulse / analytics monospace selects */ .select-pulse { font-family: var(--font-mono); font-size: 0.625rem; padding: 0.375rem 1.75rem 0.375rem 0.5rem; border-radius: var(--radius-xs); } /* Chart metric micro-select */ .select-chart-metric { min-height: auto; height: auto; padding: 0.05rem 1rem 0.05rem 0.25rem; font-family: var(--font-mono); font-size: 0.47rem; font-weight: 800; border-radius: 2px; background-color: var(--bg-sunken); box-shadow: none; } /* Form switcher inside bordered header bar (mobile apps) */ .form-switcher { flex: 1; width: auto; min-height: auto; height: auto; padding: 0; padding-right: 1rem; background: transparent; border: none; box-shadow: none; font-size: 0.875rem; font-weight: 600; border-radius: 0; } .form-switcher:hover, .form-switcher:focus { background: transparent; box-shadow: none; border: none; } /* Custom nav dropdown panel */ .nav-dropdown-content { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-dropdown-content .nav-btn { color: var(--text-secondary); } .nav-dropdown-content .nav-btn:hover { background: var(--bg-sunken) !important; color: var(--text-primary) !important; } .nav-dropdown-content .nav-btn.active { background: var(--brand-light) !important; color: var(--text-inverse) !important; border: 2px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } /* Toggle Switch */ .switch { position: relative; display: inline-block; width: 48px; height: 26px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-sunken); border: 1.5px solid var(--border-strong); border-radius: var(--radius-full); transition: background var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base); } .slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: var(--text-muted); border-radius: var(--radius-full); transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base); } input:checked + .slider { background: var(--brand-light); border-color: var(--nscc-line, #000000); box-shadow: 0 0 0 3px var(--brand-glow); } input:checked + .slider::before { transform: translateX(22px); background: var(--bg-card, #fff); } /* ============================================================ MODAL ============================================================ */ .modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.35); overflow: auto; } .modal.open { display: flex; align-items: center; justify-content: center; } .modal-content { background: var(--bg-page, #f4f4f5); border: 4px solid var(--nscc-line, #000000); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--space-5); width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; animation: modalIn var(--dur-base) var(--ease-out); position: relative; margin: 0; will-change: opacity, transform; color: var(--text-primary); } @keyframes modalIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: var(--space-6); padding: 0.55rem 0.85rem; background: var(--bg-card, #ffffff); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 8px; box-sizing: border-box; } .modal-header h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; text-transform: none; } .close-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); border: none; background: var(--bg-sunken); color: var(--text-secondary); font-size: 1.125rem; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); line-height: 1; } .close-btn:hover { background: var(--bg-sunken); color: var(--text-primary); } .setting-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--border); } .setting-row:first-of-type { border-top: none; } /* ============================================================ TOPBAR (Mobile Apps) ============================================================ */ .topbar { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 0.875rem 1rem 0.625rem; padding-top: max(0.875rem, env(safe-area-inset-top, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; position: sticky; top: 0; z-index: 10000 !important; box-shadow: var(--shadow-xs); min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; } .topbar-brand { display: flex; align-items: center; gap: 0.5rem; flex: 0 1 auto; min-width: 0; max-width: 48%; overflow: hidden; } .brand-star { font-size: 1.375rem; color: var(--text-primary); filter: drop-shadow(0 0 6px var(--brand-glow)); flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; } .brand-name { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-unit { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-end { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex: 1 1 auto; min-width: 0; max-width: 58%; overflow: hidden; } .topbar-user { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; min-width: 0; flex: 1 1 auto; justify-content: flex-end; overflow: hidden; } .topbar .user-info { display: flex; flex-direction: column; text-align: right; min-width: 0; flex: 1 1 auto; overflow: hidden; } .topbar .user-name { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } .topbar .user-role { font-size: 0.58rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } .topbar-user > :last-child { flex-shrink: 0; } /* Base (non-topbar) ΓÇö kept for any legacy field-app usage */ .user-info { display: flex; flex-direction: column; text-align: right; } .user-name { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); line-height: 1.25; } .user-role { font-size: 0.6rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } /* Keep topbar clear of demo phone notch / Dynamic Island overlays */ html.nscc-demo-phone-viewport .topbar, html.nscc-in-phone-frame .topbar { padding-top: 2.85rem; } .avatar { 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); } /* ============================================================ BOTTOM NAVIGATION (Mobile Apps) ============================================================ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000 !important; display: flex; justify-content: space-around; align-items: stretch; background: var(--bg-card); border-top: 1px solid var(--border); padding: 0.5rem 0 max(1.25rem, env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(13,27,42,0.06); } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.35rem 0.5rem; cursor: pointer; color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; border-radius: var(--radius-md); transition: color var(--dur-fast), background var(--dur-fast); user-select: none; } .nav-item .nav-icon { font-size: 1.35rem; transition: transform var(--dur-fast) var(--ease-spring); } .nav-item:hover { color: var(--text-secondary); } .nav-item.active { color: var(--text-primary); } .nav-item.active .nav-icon { transform: scale(1.15); filter: drop-shadow(0 0 4px var(--brand-glow)); } /* ============================================================ STATUS INDICATOR (Pulse Dot) ============================================================ */ .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); position: relative; } .pulse-dot::after { content: ''; position: absolute; inset: -3px; border-radius: var(--radius-full); animation: pulse 2.5s infinite; opacity: 0.5; } .pulse-dot.green { background: var(--status-secure); } .pulse-dot.green::after { background: var(--status-secure); box-shadow: 0 0 0 3px var(--status-secure); } .pulse-dot.amber { background: var(--status-pending); } .pulse-dot.amber::after { background: var(--status-pending); box-shadow: 0 0 0 3px var(--status-pending); } .pulse-dot.blue { background: var(--status-transit); } .pulse-dot.blue::after { background: var(--status-transit); box-shadow: 0 0 0 3px var(--status-transit); } .pulse-dot.red { background: var(--status-breach); } .pulse-dot.red::after { background: var(--status-breach); box-shadow: 0 0 0 3px var(--status-breach); } .pulse-dot.purple { background: var(--status-unassigned); } .pulse-dot.purple::after { background: var(--status-unassigned); box-shadow: 0 0 0 3px var(--status-unassigned); } @keyframes pulse { 0% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0; transform: scale(2); } 100% { opacity: 0; transform: scale(2); } } /* ============================================================ VIEWS / ANIMATIONS ============================================================ */ .view { display: none; } .view.active { display: block; animation: fadeSlideIn var(--dur-fast) var(--ease-out); } @keyframes fadeSlideIn { from { opacity: 0.85; } to { opacity: 1; } } /* ============================================================ SCROLLBAR STYLING ============================================================/* --- LAYOUT UTILS & OVERFLOW FIXES --- */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex-wrap { flex-wrap: wrap; } .card { overflow: hidden; display: flex; flex-direction: column; } .btn { white-space: nowrap; flex-shrink: 0; } input:not([type="checkbox"]):not([type="radio"]):not([type="date"]):not([type="hidden"]) { height: 38px; padding: 0 12px; background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; width: 100%; box-shadow: var(--shadow-md); } .modal-content { max-height: 90vh; overflow-y: auto; } @media (max-width: 1200px) { .kanban-board { grid-template-columns: 1fr; } } /* ============================================================ UTILITY HELPERS ============================================================ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } .text-mono { font-family: var(--font-mono); } .text-brand { color: var(--text-primary); } .text-secure { color: var(--text-primary); } .text-transit { color: var(--status-transit); } .text-breach { color: var(--status-breach); } .text-muted { color: var(--text-muted); } .text-secondary{ color: var(--text-secondary); } .text-upper { text-transform: uppercase; letter-spacing: 0.06em; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .font-bold { font-weight: 700; } .font-black { font-weight: 800; } .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .w-full { width: 100%; } .mt-auto { margin-top: auto; } /* ============================================================ BRANDING & LOGO UTILS ============================================================ */ .sidebar-brand-star img, .brand-star img, .topbar-brand img, .sim-label img { object-fit: contain; filter: brightness(0); /* Force absolute black in light mode */ transition: filter var(--dur-base); } .dark .sidebar-brand-star img, .dark-theme .sidebar-brand-star img, .dark .brand-star img, .dark-theme .brand-star img, .dark .topbar-brand img, .dark-theme .topbar-brand img, .dark .sim-label img { filter: brightness(0) invert(1); /* Absolute white in dark mode */ } /* ============================================================ CONNECTIVITY BANNER (Store & Forward) ============================================================ */ .connectivity-banner { background: transparent; color: #000000; -webkit-text-fill-color: #000000; padding: var(--space-2) var(--space-4); text-align: center; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; z-index: 9999; position: relative; border: 4px solid #FF3B30; box-shadow: none; transition: all var(--dur-normal, 0.3s) ease; } .connectivity-banner.hidden { display: none; } .connectivity-banner.minimized { position: fixed; top: 0; right: var(--space-4); left: auto; width: auto; max-width: calc(100vw - var(--space-8)); padding: var(--space-2) var(--space-3); border-radius: 0 0 var(--radius-md) var(--radius-md); cursor: pointer; box-shadow: var(--shadow-md); } .connectivity-banner.minimized .banner-text, .connectivity-banner.minimized .banner-icon { display: none; } .connectivity-banner:not(.minimized) .banner-pill-label { display: none; } .banner-content { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; position: relative; } .connectivity-banner:not(.minimized) .banner-content { padding-right: 2rem; } .banner-icon { font-size: 1rem; flex-shrink: 0; } .banner-pill-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; } .banner-toggle-btn { background: rgba(255, 255, 255, 0.2); border: none; color: var(--text-inverse, #ffffff); cursor: pointer; padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); font-size: 0.65rem; line-height: 1; flex-shrink: 0; transition: background var(--dur-fast, 0.15s) ease; } .connectivity-banner:not(.minimized) .banner-toggle-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .banner-toggle-btn:hover, .banner-toggle-btn:focus-visible { background: rgba(255, 255, 255, 0.35); outline: none; } /* Compact sync badge ΓÇö queued / syncing / synced / offline */ .nscc-sync-badge { display: inline-flex; align-items: center; gap: 0.35rem; height: 26px; padding: 0 0.65rem; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; line-height: 1; box-sizing: border-box; transition: background-color var(--dur-fast, 70ms), border-color var(--dur-fast, 70ms); } .nscc-sync-badge:hover { background: var(--bg-raised); } .nscc-sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nscc-sync-color, #34C759); flex-shrink: 0; } .nscc-sync-badge[data-state="syncing"] .nscc-sync-dot { animation: nscc-sync-pulse 1s ease-in-out infinite; } .nscc-sync-badge[data-state="queued"] .nscc-sync-dot, .nscc-sync-badge[data-state="offline"] .nscc-sync-dot { animation: nscc-sync-pulse 1.4s ease-in-out infinite; } @keyframes nscc-sync-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } @media (max-width: 640px) { .nscc-sync-label { max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; } } /* ========================================================= */ /* MOBILE & TABLET RESPONSIVENESS */ /* ========================================================= */ @media (max-width: 900px) { #main-layout { display: flex; flex-direction: column; } #app-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 2px solid var(--border); flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0.5rem; } #sidebar-nav { display: flex; flex-direction: row; gap: 0.5rem; } #primary-view { grid-template-columns: 1fr; } #primary-right-panel { display: none; /* Hide batching and side pulse on mobile */ } .top-tabs { flex-wrap: wrap; } .stats-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .stats-row { grid-template-columns: 1fr; } .table-container { overflow-x: auto; } } /* ============================================================ STATUS CHIPS — clear fill, black text, colored border, rounded square (Do NOT use [class*="status"] wildcards — they paint kanban columns.) ============================================================ */ .ref-status-pill, .status-badge, .status-chip, .ops-chip, .trip-status, .nscc-dispatch-status-pill, .nscc-pulse-action-chip__status, .nscc-pulse-segment-tip__status-pill, .nscc-fp-badge, .cm-status-badge, .badge-secure, .badge-success, .badge-pending, .badge-pickup, .badge-transit, .badge-assigned, .badge-unassigned, .badge-scheduled, .badge-danger, .badge-en-route, .badge-current, .badge.green, .badge.amber, .badge.transit, .badge.delivered, .status-secure, .status-pending, .status-pickup, .status-transit, .status-assigned, .status-unassigned, .status-scheduled, .status-exception, .status-conflict, .status-en-route, .status-current, .status.green, .status.amber, .timeline-event-inline { 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; font-weight: 800 !important; opacity: 1 !important; } .ref-status-pill.delivered, .ref-status-pill.secure, .ref-status-pill.success, .ref-status-pill.accepted, .badge-secure, .badge-success, .badge.green, .badge.delivered, .status-secure, .status.green, .timeline-event-inline.delivered, .nscc-dispatch-status-pill[data-status="delivered"] { border-color: #34C759 !important; } .ref-status-pill.pending, .ref-status-pill.pending-pickup, .ref-status-pill.pickup-pending, .badge-pending, .status-pending, .badge.amber, .status.amber, .nscc-dispatch-status-pill[data-status="pending"], .nscc-dispatch-status-pill[data-status="pending pickup"] { border-color: #FF9500 !important; } .ref-status-pill.pickup, .badge-pickup, .status-pickup, .nscc-dispatch-status-pill[data-status="pickup"] { border-color: #FFCC00 !important; } .ref-status-pill.transit, .ref-status-pill.current, .badge-transit, .badge-current, .status-transit, .status-current, .badge.transit, .timeline-event-inline.transit, .nscc-dispatch-status-pill[data-status="transit"], .nscc-dispatch-status-pill[data-status="in transit"] { border-color: #007AFF !important; } .ref-status-pill.en-route, .ref-status-pill.enroute, .badge-en-route, .status-en-route, .nscc-dispatch-status-pill[data-status="en-route"] { border-color: #5856D6 !important; } .ref-status-pill.assigned, .badge-assigned, .status-assigned, .nscc-dispatch-status-pill[data-status="assigned"] { border-color: #AF52DE !important; } .ref-status-pill.unassigned, .badge-unassigned, .status-unassigned, .ref-status-pill.exception, .ref-status-pill.conflict, .badge-danger, .status-exception, .status-conflict, .nscc-dispatch-status-pill[data-status="unassigned"] { border-color: #FF3B30 !important; } .ref-status-pill.scheduled, .badge-scheduled, .status-scheduled { border-color: #06b6d4 !important; } /* Action buttons — outline status style (clear fill / black ink / bright border) */ .btn-success, .btn-checkin, .sim-btn.active { 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-success:hover, .btn-checkin:hover, .sim-btn.active:hover { background: transparent !important; background-color: transparent !important; filter: brightness(1.05); } .btn-warning, .btn-checkout { background: transparent !important; background-color: transparent !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 4px solid #FF9500 !important; box-shadow: none !important; } .btn-warning:hover, .btn-checkout:hover { background: transparent !important; background-color: transparent !important; filter: brightness(1.05); } .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; filter: brightness(1.05); } /* Card assign control uses standard filter-select styling */ .card-assign-control select { cursor: pointer; } /* ΓöÇΓöÇ NSCC Compact Date Navigation (shared across all screens) ΓöÇΓöÇ */ .nscc-date-nav { display: inline-flex; align-items: center; gap: 0.2rem; background: transparent; padding: 0; border: none; height: 1.5rem; box-sizing: border-box; flex-shrink: 0; position: relative; } .nscc-date-nav__btn, .nscc-date-nav .date-nav-btn, .nscc-date-nav .nscc-custom-date-arrow, .nscc-date-nav .date-nav-arrow { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; flex-shrink: 0; border-radius: 50%; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); background: var(--bg-card, #fff); color: var(--text-primary); font-size: 0.65rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000); transition: background 0.15s ease; outline: none; } .nscc-date-nav__btn:hover, .nscc-date-nav .date-nav-btn:hover, .nscc-date-nav .nscc-custom-date-arrow:hover, .nscc-date-nav .date-nav-arrow:hover { background: var(--bg-sunken); } .nscc-date-nav__field { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--bg-card, #fff); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 3px; height: 1.5rem; padding: 0 0.35rem; box-sizing: border-box; cursor: pointer; flex-shrink: 0; box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000); } .nscc-date-nav__field input[type="date"] { background: transparent; border: none; font-size: 0.7rem; font-weight: 800; color: var(--text-primary); cursor: pointer; outline: none; padding: 0; margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; width: auto; min-width: 6.5rem; -webkit-appearance: none; appearance: none; } .nscc-date-nav__text, .nscc-date-nav .nscc-custom-date-text { font-size: 0.7rem; font-weight: 800; color: var(--text-primary); cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1; } .nscc-date-nav__text:hover, .nscc-date-nav .nscc-custom-date-text:hover { color: var(--text-primary); } .nscc-date-nav__cal, .nscc-date-nav .nscc-custom-date-cal { background: transparent; border: none; font-size: 0.7rem; cursor: pointer; padding: 0; display: inline-flex; align-items: center; line-height: 1; color: var(--text-primary); outline: none; } .nscc-date-nav__cal:hover, .nscc-date-nav .nscc-custom-date-cal:hover { transform: scale(1.1); } .nscc-date-nav__today, .nscc-date-nav .nscc-custom-date-today, .nscc-date-nav .today-date-btn { height: 1.5rem; padding: 0 0.45rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 3px; background: var(--bg-card, #fff); color: var(--text-primary); font-size: 0.6rem; font-weight: 800; cursor: pointer; box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000); white-space: nowrap; outline: none; line-height: 1; } .nscc-date-nav__today:hover, .nscc-date-nav .nscc-custom-date-today:hover, .nscc-date-nav .today-date-btn:hover { background: var(--bg-sunken); } .nscc-date-nav__hidden { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; border: none; padding: 0; margin: 0; } /* Legacy aliases ΓÇö map old class names to compact nav */ .nscc-custom-date-selector, .condensed-date-selector, .pulse-date-picker-pill { display: inline-flex; align-items: center; gap: 0.2rem; background: transparent; padding: 0; border: none; height: 1.5rem; box-sizing: border-box; } .dispatch-date-control.nscc-date-nav, .nscc-date-nav.dispatch-date-control { background: transparent; padding: 0; border: none; border-radius: 0; gap: 0.2rem; height: 1.5rem; } /* ΓöÇΓöÇ 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)); } .nscc-schedule-hour-grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); border: 2px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); } .nscc-schedule-hour-grid .nscc-schedule-hour-cell { min-height: 2.5rem; padding: 0.35rem 0.2rem; font-size: 0.6rem; font-weight: 800; text-align: center; color: var(--text-muted); border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); box-sizing: border-box; } .nscc-schedule-hour-grid .nscc-schedule-hour-cell:nth-child(24n) { border-right: none; } .nscc-schedule-hour-grid--scroll { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); margin-bottom: 1rem; } .nscc-schedule-hour-grid--scroll .nscc-schedule-hour-cell { flex: 0 0 3.25rem; min-height: 2.75rem; border-right: 2px solid var(--border); border-bottom: none; } .nscc-schedule-hour-grid--scroll .nscc-schedule-hour-cell:last-child { border-right: none; } /* ΓöÇΓöÇ Demo phone viewport (standalone mobile apps on desktop) ΓöÇΓöÇ */ :root { --nscc-phone-width: 390px; --nscc-phone-height: 844px; } html.nscc-demo-phone-viewport { background: #05080f; min-height: 100%; } html.nscc-demo-phone-viewport body { min-height: 100vh; margin: 0; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; box-sizing: border-box; background: radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.18) 0%, transparent 100%), radial-gradient(1px 1px at 78% 35%, rgba(255,255,255,0.15) 0%, transparent 100%), #05080f; overflow: auto; } html.nscc-demo-phone-viewport .nscc-phone-shell { position: relative; width: var(--nscc-phone-width); max-width: 100%; height: var(--nscc-phone-height); max-height: calc(100vh - 48px); flex-shrink: 0; background: #000; border-radius: 44px; box-shadow: 0 30px 60px rgba(0,0,0,0.75), inset 0 0 0 2px #2a2a2a, inset 0 0 0 10px #111, inset 0 0 0 12px #222; overflow: hidden; transform: translateZ(0); } html.nscc-demo-phone-viewport .nscc-phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 126px; height: 28px; background: #000; border-radius: 0 0 18px 18px; z-index: 10000001; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.5); pointer-events: none; } html.nscc-demo-phone-viewport .nscc-phone-notch::after { content: ''; position: absolute; right: 18px; top: 7px; width: 10px; height: 10px; background: #1a1a1a; border-radius: 50%; box-shadow: 0 0 0 2px #111, 0 0 4px rgba(100,200,255,0.2); } html.nscc-demo-phone-viewport .mobile-container { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 34px; overflow: hidden; } /* ============================================================ DARK MODE ΓÇö GLOBAL BLACK-TEXT / BLACK-ICON OVERRIDES Ensures no hardcoded black survives into dark theme. ============================================================ */ /* Transit wildcard also sets color:#000 ΓÇö override in dark */ :root.dark [class*="transit"]:not(.connectivity-banner), body.dark-theme [class*="transit"]:not(.connectivity-banner) { color: #ffffff !important; } /* Any non-brand img that was forced to black in light mode should be white in dark mode (covers icon sets, illustrations). Not a Leaflet map's own images (class leaflet-tile, leaflet-marker-icon, leaflet-marker-shadow): the map tiles and the pin are pictures, and whitened they left the location map blank (owner, 2026-10-22). */ :root.dark img:not([class*="avatar"]):not([class*="photo"]):not([class*="pravatar"]):not([src*="pravatar"]):not([class*="leaflet-"]), body.dark-theme img:not([class*="avatar"]):not([class*="photo"]):not([class*="pravatar"]):not([src*="pravatar"]):not([class*="leaflet-"]) { filter: brightness(0) invert(1); } /* Brand logos: stone tile in light; invert tile + gray star in dark (see rules below). */ :root.dark .sim-label img, body.dark-theme .sim-label img { filter: invert(1) brightness(0.72) !important; background: #d4d4d8 !important; border: 1.5px solid #9ca3af; } /* Consistent NorthStar mark (stone tile) across chrome, apps, FS banner */ .nscc-brand-logo, .brand-star img, .sidebar-brand-star img, .topbar-brand img, .nscc-bo-fs-brand img { background: #d4d4d8 !important; border-radius: 8px; padding: 3px; box-sizing: border-box; filter: none !important; } /* Header chrome logo: match page/window background in light mode (not a white tile). OAuth gate logo stays on a white tile — do not fold .nscc-auth-logo into this rule. */ .nscc-chrome-brand-mark img, .nscc-chrome-brand-row .nscc-chrome-brand-mark img { background: var(--bg-page, #f4f4f5) !important; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; border-radius: 8px; padding: 3px; box-sizing: border-box; filter: none !important; } /* OAuth gate logo: white tile + black border (unchanged) */ .nscc-auth-logo { background: #ffffff !important; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; border-radius: 8px; padding: 3px; box-sizing: border-box; filter: none !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; } :root.dark .nscc-chrome-brand-mark img, :root.dark .nscc-chrome-brand-row .nscc-chrome-brand-mark img, body.dark-theme .nscc-chrome-brand-mark img, body.dark-theme .nscc-chrome-brand-row .nscc-chrome-brand-mark img { /* Dark chrome: keep white tile so the mark reads on dark page */ background: #ffffff !important; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; filter: none !important; } :root.dark .nscc-auth-logo, body.dark-theme .nscc-auth-logo { background: #ffffff !important; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; filter: none !important; } :root.dark .nscc-chrome-brand-mark, body.dark-theme .nscc-chrome-brand-mark, :root.dark button.nscc-chrome-brand-mark, body.dark-theme button.nscc-chrome-brand-mark { border-color: #9ca3af !important; } :root.dark .nscc-chrome-brand-row button.nscc-chrome-brand-mark, body.dark-theme .nscc-chrome-brand-row button.nscc-chrome-brand-mark { background: var(--banner-chip-bg, #4b5563) !important; } /* Inline SVG fill/stroke: catch svg elements rendered black */ :root.dark svg path[fill="#000000"], :root.dark svg path[fill="black"], :root.dark svg rect[fill="#000000"], :root.dark svg circle[fill="#000000"], body.dark-theme svg path[fill="#000000"], body.dark-theme svg path[fill="black"], body.dark-theme svg rect[fill="#000000"], body.dark-theme svg circle[fill="#000000"] { fill: #ffffff; } :root.dark svg path[stroke="#000000"], :root.dark svg path[stroke="black"], body.dark-theme svg path[stroke="#000000"], body.dark-theme svg path[stroke="black"] { stroke: #ffffff; } /* ============================================================ UI CONSISTENCY NORMALIZATION LAYER Enforces uniform heading sizes, button styles, table headers, container spacing, and input styling across all view sections. ============================================================ */ /* Primary screen titles — match chrome title bar (1.15rem / 800 / black box in styles.css). Do not force 1.5rem on erp-connect / master-data / overview screen titles. */ .view-section h2.section-title, .view-section h2.panel-title { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--text-primary) !important; margin: 0 !important; text-transform: none; line-height: 1.25; } .view-section h2:first-of-type:not(.erp-connect-title):not(.master-data-title):not(.nscc-overview-intro__title):not(.modal-title-strong), .view-section .master-data-shell > div > h2:not(.erp-connect-title):not(.master-data-title) { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--text-primary) !important; margin: 0 !important; text-transform: none; line-height: 1.25; } /* Secondary headings (h3 within view sections): uniform 1.1rem / 800 / brand-light */ .view-section h3, .view-section h3.section-subtitle, .view-section .panel-header h3 { font-size: 1.1rem !important; font-weight: 800 !important; color: var(--text-primary) !important; margin: 0 !important; text-transform: none; line-height: 1.2; } /* Gantt/timeline header bars ΓÇö normalize to consistent 1rem / 700 */ .view-section .gantt-header, .view-section .timeline-header, .view-section .scheduler-header { font-size: 1rem !important; font-weight: 700 !important; color: var(--text-primary) !important; padding: 0.5rem 1rem !important; margin: 0 0 1rem !important; background: var(--bg-sunken); border: 2px solid var(--border); border-radius: var(--radius-md); } /* ΓöÇΓöÇ "Save to PDF" Buttons ΓöÇΓöÇ */ /* All PDF export buttons: muted fill darker than info boxes */ .view-section .st-pdf-btn, .view-section button[class*="pdf"], .view-section .btn[class*="pdf"] { background: var(--btn-surface) !important; color: var(--btn-surface-ink) !important; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; border-radius: var(--radius-sm) !important; padding: 0.4rem 1rem !important; font-size: 0.8125rem !important; font-weight: 800 !important; box-shadow: none !important; cursor: pointer; } .view-section .st-pdf-btn:hover, .view-section button[class*="pdf"]:hover, .view-section .btn[class*="pdf"]:hover { background: var(--btn-surface-hover) !important; border-color: var(--nscc-line, #000000) !important; transform: translateY(-1px); box-shadow: none !important; } /* ΓöÇΓöÇ Action Buttons ("+ New", "Manage Groups", etc.) ΓöÇΓöÇ */ /* All primary action buttons in view sections: muted fill, darker than cards */ .view-section .btn-primary, .view-section button[class*="new-template"], .view-section button[class*="manage"], .view-section .nscc-action-btn { background: var(--btn-surface) !important; color: var(--btn-surface-ink) !important; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; border-radius: var(--radius-sm) !important; padding: 0.4rem 1rem !important; font-size: 0.8125rem !important; font-weight: 700 !important; box-shadow: none !important; } .view-section .btn-primary:hover, .view-section button[class*="new-template"]:hover, .view-section button[class*="manage"]:hover, .view-section .nscc-action-btn:hover { background: var(--btn-surface-hover) !important; border-color: var(--nscc-line, #000000) !important; transform: translateY(-1px); box-shadow: none !important; } /* Submit schedule stays frost blue even under view-section primary overrides */ .view-section .btn-frost, .view-section .btn-submit-schedule, .view-section button[onclick*="nsccPlannerSubmit"] { background: transparent !important; background-color: transparent !important; color: var(--text-primary) !important; border: 2.5px solid var(--frost-blue-deep, #1c1917) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; } .view-section .btn-frost:hover:not(:disabled):not([aria-disabled="true"]), .view-section .btn-submit-schedule:hover:not(:disabled):not([aria-disabled="true"]), .view-section button[onclick*="nsccPlannerSubmit"]:hover:not(:disabled):not([aria-disabled="true"]) { background: transparent !important; background-color: transparent !important; color: var(--text-primary) !important; border-color: var(--frost-blue-deep, #1c1917) !important; box-shadow: none !important; } /* ΓöÇΓöÇ Table Headers ΓöÇΓöÇ */ /* All tables in view sections: uniform header background, font, padding */ .view-section table thead th, .view-section .table thead th, .view-section .data-table thead th { background: var(--table-head-bg, var(--bg-sunken)) !important; color: var(--text-primary) !important; font-size: 0.8125rem !important; font-weight: 800 !important; padding: 0.55rem 0.7rem !important; text-align: left; border-bottom: 2px solid var(--border); white-space: nowrap; text-transform: none; letter-spacing: 0; position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--border); } /* Table body cells: consistent padding */ .view-section table tbody td, .view-section .table tbody td, .view-section .data-table tbody td { padding: 0.5rem 0.7rem !important; font-size: 0.8125rem !important; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left; } /* ΓöÇΓöÇ Master Data Shell Containers ΓöÇΓöÇ */ /* All Back Office / master-data screens: uniform padding (Master Data keeps capped width) */ .view-section .master-data-shell { padding: 1.25rem 1.5rem 2rem !important; max-width: 1400px !important; margin: 0 auto !important; } /* Accounting / HR / Payroll / Forms permanently use the full available width */ #accounting-view .master-data-shell, #accounting-view .master-data-shell--finance, #accounting-view .nscc-bo-fullwidth, #back-office-view .master-data-shell--finance, #back-office-view .back-office-payroll-mount, #back-office-payroll-mount.master-data-shell, #back-office-payroll-panel, #back-office-payroll-panel.nscc-bo-fullwidth, #ops-field-view .master-data-shell--ops, #form-management-view .master-data-shell, #form-management-view .master-data-shell--finance, #form-management-view .nscc-forms-shell { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #accounting-view .nscc-finance-panel, #accounting-view .nscc-erp-tab-panel, #back-office-payroll-panel .nscc-finance-panel, #back-office-payroll-panel .nscc-erp-tab-panel, #form-management-view .nscc-forms-panel, #form-management-view .nscc-erp-tab-panel { width: 100% !important; max-width: none !important; } #accounting-view .nscc-table, #accounting-view .master-data-table, #back-office-payroll-panel .nscc-table, #back-office-payroll-panel .master-data-table, #accounting-view .bo-table-scroll-wrap, #back-office-payroll-panel .bo-table-scroll-wrap, #accounting-view .erp-queue-table-wrap--bo-fill, #back-office-payroll-panel .erp-queue-table-wrap--bo-fill, #accounting-view .master-data-table-shell, #back-office-payroll-panel .master-data-table-shell { width: 100% !important; max-width: none !important; } #accounting-view .nscc-finance-cards, #back-office-payroll-panel .nscc-finance-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } @media (min-width: 1400px) { #accounting-view .nscc-finance-cards, #back-office-payroll-panel .nscc-finance-cards { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } /* Sticky table headers are intentionally OFF for Accounting / HR / Payroll. These screens stack several tables in one scrolling panel; with each table's thead sticking at top:0 in the same scroll container, the headers collided and overlapped while scrolling ("a row that freezes and the info behind it moves but doesn't work right"). A correct sticky header needs each table in its own overflow-scroll wrapper — a larger change for a future enhancement. Until then, let the finance tables scroll normally. */ /* Screen tools: compact density + find */ .nscc-bo-screen-chrome { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; /* No boxed border/background — it read as an unnecessary card around the screen tools. Just a plain inline row that sits below the pills. */ padding: 0; margin: 0 0 0.55rem; border: none; background: transparent; /* Not sticky — it froze at the top while content scrolled behind it. */ position: static; box-sizing: border-box; } /* In-body sub-folder tabs (AP Bills / POs / Runs / Vendors, Ops folders, etc.). These deliberately EMULATE the top chrome folder tabs — same tab shape, colors, and active/hover behavior — so nested navigation reads as the same tab metaphor, just one level down. The nav's bottom border is the baseline the tabs sit on. */ .nscc-subfolder-nav { display: flex; flex-wrap: wrap; gap: 0 2px; align-items: flex-end; margin: 0 0 0.7rem; border-bottom: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); } .nscc-subfolder-nav .nscc-erp-tab-btn { position: relative; z-index: 1; margin: 0 0 -2px 0; padding: 0.26rem 0.6rem 0.3rem !important; font-size: 0.72rem !important; font-weight: 700; /* Two text-rows tall, matching the top folder tabs: labels wrap to two lines and every tab shares a uniform two-row height. */ white-space: normal; max-width: 7rem; min-height: var(--nscc-folder-tab-h, 2.55rem) !important; max-height: var(--nscc-folder-tab-h, 2.55rem) !important; overflow: hidden; height: auto !important; line-height: 1.15 !important; text-align: center; align-items: center; justify-content: center; display: inline-flex; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; border-bottom: none !important; border-radius: 10px 10px 0 0 !important; background: var(--chrome-folder, #e8eef4) !important; color: var(--chrome-folder-ink, #0d1b2a) !important; transform: translateY(2px); } .nscc-subfolder-nav .nscc-erp-tab-btn:hover { z-index: 2; background: var(--bg-raised, #f1f5f9) !important; transform: translateY(1px); } .nscc-subfolder-nav .nscc-erp-tab-btn.active, .nscc-subfolder-nav .nscc-erp-tab-btn[aria-selected="true"] { z-index: 4; color: var(--text-inverse, #fff) !important; background: var(--chrome-folder-active, #1a2b45) !important; border-bottom: 2px solid var(--chrome-folder-panel-bg, var(--bg-card, #fff)) !important; transform: translateY(0); } /* Max screen space: once the user drills into a sub-folder (a .nscc-subnav-row is visible in the active back-office screen), body gets .nscc-bo-drilled and the top pillar folder-tab strip collapses. The breadcrumb "‹ Back" and the left menu stay as pillar switchers; the strip returns at each pillar's overview. Toggled by nsccSyncBoStripCollapse() in app-nav.js. */ body.nscc-bo-drilled #nscc-chrome-folder-tabs { display: none !important; } /* One-row Apple-style sub-nav: back breadcrumb + folder-tab-styled sub-folder tabs (+ optional right-aligned mode control). Baseline-aligned so the crumb and the folder tabs share the same bottom edge. */ .nscc-subnav-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; /* Space reserved on the right so an absolutely-pinned mode control (.nscc-crumb-mode) never overlaps the pills — they wrap under it instead. */ position: relative; padding-right: 4rem; } /* When there's no pinned mode control, don't leave dead right-padding. */ .nscc-subnav-row:not(:has(.nscc-crumb-mode)) { padding-right: 0; } .nscc-subnav-row .nscc-subfolder-nav { margin: 0; } /* Folder-tab strips are capped at two ROWS OF TABS tall on every screen (each tab is itself two text-rows), then scroll rather than growing and eating the screen. */ .nscc-subfolder-nav { max-height: var(--nscc-folder-strip-h, 5.5rem); overflow-y: auto; overflow-x: hidden; } #nscc-chrome-folder-tabs { max-height: calc(var(--nscc-folder-strip-h, 5.5rem) + 0.5rem); overflow-y: auto; } /* Ops / back-office screens: the written screen descriptions ("Inventory — bulk stock…") are redundant with the folder-tab hover, so hide them in daily-use screens. The info lives on the tab's hover tooltip (data-nscc-desc). */ #ops-field-view .nscc-today-hint, #accounting-view .nscc-today-hint, #back-office-payroll-panel .nscc-today-hint, #executive-dashboard-view .nscc-today-hint { display: none !important; } .nscc-crumb-back { border: 2px solid var(--border, #0f172a); background: var(--bg-card, #fff); color: var(--text-primary, #0d1b2a); border-radius: 999px; padding: 0.28rem 0.7rem; font-size: 0.72rem; font-weight: 800; cursor: pointer; line-height: 1.2; } .nscc-crumb-back:hover { background: var(--bg-sunken, #e8eef4); } .nscc-crumb-here { font-size: 0.72rem; font-weight: 800; color: var(--text-secondary, #475569); } .nscc-crumb-sep { color: var(--text-muted, #94a3b8); font-weight: 800; } /* Compact, non-intrusive Advanced/Easy control at the far right of a one-row sub-nav (Ops). Reuses the tab click handler (data-ops-tab) but reads as a small mode switch, not a peer tab. */ .nscc-crumb-mode { /* Pinned to the far right of the sub-nav row and never displaced: it is absolutely positioned, and the row reserves right padding so the pills wrap to the next line rather than pushing or overlapping this control. */ position: absolute; top: 0; right: 0; border: 1px dashed var(--border, #0f172a); background: var(--bg-card, #fff); color: var(--text-secondary, #475569); border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 0.68rem; font-weight: 700; cursor: pointer; line-height: 1.2; white-space: nowrap; } .nscc-crumb-mode:hover { background: var(--bg-sunken, #e8eef4); color: var(--text-primary, #0d1b2a); } .nscc-bo-dense-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; user-select: none; } .nscc-bo-screen-find { min-width: 12rem; flex: 1 1 14rem; max-width: 22rem; padding: 0.35rem 0.55rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-md, 10px); background: var(--bg-card); color: var(--text-primary); font-size: 0.8rem; } :root.dark .nscc-bo-screen-find, body.dark-theme .nscc-bo-screen-find { border-color: rgba(245, 245, 244, 0.68); background: transparent; } /* Find-on-this-screen match rows — cleared on click/type elsewhere */ tr.nscc-bo-find-hit, .nscc-bo-find-hit { outline: 2px solid #ca8a04; outline-offset: -2px; background: rgba(250, 204, 21, 0.28) !important; } :root.dark tr.nscc-bo-find-hit, :root.dark .nscc-bo-find-hit, body.dark-theme tr.nscc-bo-find-hit, body.dark-theme .nscc-bo-find-hit { outline-color: #facc15; background: rgba(250, 204, 21, 0.18) !important; } .nscc-bo-screen-chrome__hint { font-size: 0.65rem; color: var(--text-muted); margin-left: auto; } html.nscc-bo-dense #accounting-view .nscc-table td, html.nscc-bo-dense #accounting-view .nscc-table th, html.nscc-bo-dense #back-office-payroll-panel .nscc-table td, html.nscc-bo-dense #back-office-payroll-panel .nscc-table th, .nscc-bo-dense .nscc-table td, .nscc-bo-dense .nscc-table th { padding-top: 0.22rem !important; padding-bottom: 0.22rem !important; font-size: 0.74rem !important; } html.nscc-bo-dense #accounting-view .nscc-finance-card, html.nscc-bo-dense #back-office-payroll-panel .nscc-finance-card, .nscc-bo-dense .nscc-finance-card { padding: 0.35rem 0.5rem !important; } html.nscc-bo-dense #accounting-view .nscc-overview-section, html.nscc-bo-dense #back-office-payroll-panel .nscc-overview-section { margin-bottom: 0.65rem; } /* Day-to-day action bars scroll with the page. They were sticky, which left the Accounting Overview "Open:" row pinned while everything under it scrolled (Matt 2026-09-07: no bar on any screen stays put). */ #accounting-view .nscc-finance-toolbar, #back-office-payroll-panel .nscc-finance-toolbar { position: static; background: var(--bg-page, var(--bg-card)); padding: 0.35rem 0; } /* All search/filter inputs: black border */ .md-search-input, .st-search, .master-data-search, .comms-contact-search, .nscc-portal-search__input, .global-search input, .nscc-location-combobox__search, input[type="search"], input[type="text"].master-data-search, input[type="text"].md-search-input, input[type="text"].st-search, .view-section .md-search-input, .view-section .st-search, .view-section input[type="search"], .view-section input[type="text"].master-data-search { border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000) !important; border-radius: var(--radius-md) !important; background: var(--bg-card) !important; box-shadow: none !important; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .md-search-input:focus, .st-search:focus, .master-data-search:focus, .comms-contact-search:focus, .nscc-portal-search__input:focus, .global-search input:focus, .nscc-location-combobox__search:focus, input[type="search"]:focus, input[type="text"].master-data-search:focus, input[type="text"].md-search-input:focus, input[type="text"].st-search:focus, .view-section .md-search-input:focus, .view-section .st-search:focus, .view-section input[type="search"]:focus, .view-section input[type="text"].master-data-search:focus { outline: none; border-color: var(--nscc-line, #000000) !important; box-shadow: var(--shadow-sm) !important; } /* ΓöÇΓöÇ Filter/Toolbar Bars ΓöÇΓöÇ */ /* Consistent filter bar spacing and alignment */ .view-section .filter-bar, .view-section .toolbar-filters, .view-section .form-control-panel-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } /* ΓöÇΓöÇ Status Badge Consistency ΓöÇΓöÇ */ /* Count badges in support tickets and similar: uniform style */ .view-section .count-badge, .view-section .status-pill { font-size: 0.72rem !important; font-weight: 700 !important; border-radius: 8px !important; padding: 0.2rem 0.7rem !important; border-width: 2px !important; border-style: solid !important; border-color: var(--nscc-line, #000000) !important; display: inline-flex; align-items: center; gap: 0.3em; } /* ΓöÇΓöÇ Back Office Panel Headers ΓöÇΓöÇ */ /* Uniform header bar for all BO panels */ .view-section .panel-header, .view-section .master-data-header { padding: 0.75rem 1rem !important; background: var(--bg-sunken) !important; border: 2px solid var(--border) !important; border-radius: var(--radius-md) !important; margin-bottom: 1.25rem !important; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; } .view-section .panel-header p, .view-section .master-data-header p { font-size: 0.85rem !important; color: var(--text-secondary) !important; margin: 0.35rem 0 0 !important; max-width: 42rem; } /* ΓöÇΓöÇ Section Description Text ΓöÇΓöÇ */ .view-section .section-description { font-size: 0.85rem !important; color: var(--text-secondary) !important; margin: 0.35rem 0 0 !important; } /* ΓöÇΓöÇ Card Panels in Back Office ΓöÇΓöÇ */ .view-section .card.panel-card, .view-section .card.bo-card { padding: 1rem 1.15rem !important; margin-bottom: 1.25rem !important; border: 2px solid var(--border) !important; border-radius: var(--radius-md) !important; } /* ΓöÇΓöÇ Date Navigation Controls ΓöÇΓöÇ */ /* Consistent date nav styling across schedule screens */ .view-section .nscc-date-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .view-section .nscc-date-nav button { background: var(--bg-card); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-full); padding: 0.3rem 0.75rem; font-size: 0.8125rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .view-section .nscc-date-nav button:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* ΓöÇΓöÇ Planner Tab Pills ΓöÇΓöÇ */ /* Active vs inactive planner sub-tabs */ .view-section .planner-tab-pill { padding: 0.3rem 0.75rem !important; font-size: 0.75rem !important; font-weight: 700 !important; border-radius: var(--radius-full) !important; border: 2px solid var(--border) !important; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .view-section .planner-tab-pill.active { background: var(--brand-light) !important; color: #ffffff !important; } .view-section .planner-tab-pill:not(.active) { background: var(--bg-card) !important; color: var(--text-primary) !important; } .view-section .planner-tab-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } /* Native finance (AHP) — kept from mainline */ /* Native finance (AHP) */ .nscc-finance-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; margin: 0 0 0.65rem; } .nscc-finance-card { background: var(--bg-card); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-md, 10px); padding: 0.5rem 0.65rem; } button.nscc-finance-card.nscc-overview-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform var(--dur-fast, 70ms) var(--ease-out, ease), box-shadow var(--dur-fast, 70ms); box-shadow: 2px 2px 0 var(--nscc-hard-shadow, #000000); } button.nscc-finance-card.nscc-overview-kpi:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--nscc-hard-shadow, #000000); } button.nscc-finance-card.nscc-overview-kpi:active { transform: translateY(0); } /* Two classes so this outranks the plain .modal-content-lg (500px) cap that ships in styles.css and loads after this file — same specificity would otherwise let load order decide, silently shrinking every glance drill-down (HR active people / states / leave pending / expenses pending, etc.). */ .modal-content-lg.nscc-glance-modal__content { max-width: min(720px, 96vw); } .nscc-glance-modal__sub { margin: 0 1rem 0.5rem; } .nscc-glance-modal__summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 1rem 0.75rem; } .nscc-glance-modal__stat { display: flex; flex-direction: column; gap: 0.1rem; min-width: 7rem; padding: 0.4rem 0.55rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 8px; background: var(--bg-card); } .nscc-glance-modal__stat span { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .nscc-glance-modal__stat strong { font-size: 1.05rem; font-weight: 900; } .nscc-glance-modal__stat--warn { border-color: #b45309; } .nscc-glance-modal__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 1rem 0.65rem; padding: 0.45rem 0.55rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 8px; background: var(--bg-card); } .nscc-glance-modal__filters[hidden] { display: none !important; } .nscc-glance-modal__filters label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .nscc-glance-modal__filters select { padding: 0.3rem 0.45rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 6px; font-size: 0.85rem; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--text); } .nscc-glance-modal__body { margin: 0 1rem 0.75rem; max-height: min(50vh, 420px); overflow: auto; } .nscc-glance-modal__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 1rem 1rem; } .nscc-glance-row-click { cursor: pointer; } .nscc-glance-row-click:hover { background: var(--bg-elevated, var(--bg-card)); } .nscc-glance-modal__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; margin: 0.5rem 0 0; padding: 0.5rem; border-top: 2px dashed var(--border); align-items: end; } .nscc-glance-modal__form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .nscc-glance-modal__form input, .nscc-glance-modal__form select, .nscc-glance-modal__form textarea { padding: 0.35rem 0.5rem; border: 2px solid var(--border); border-radius: 6px; font-size: 0.85rem; } .nscc-glance-modal__form button[type="submit"] { grid-column: 1 / -1; justify-self: end; } .nscc-finance-card__label { display: block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .nscc-finance-card__value { font-size: 1.05rem; font-weight: 900; line-height: 1.2; } .nscc-finance-card__value--compact { font-size: 1rem; } .nscc-finance-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.65rem; padding: 0.5rem 0.65rem; box-sizing: border-box; background: var(--bg-card); border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: var(--radius-md, 10px); } .nscc-finance-ap-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 900px) { .nscc-finance-ap-grid { grid-template-columns: 1fr 1fr; } } .nscc-finance-ap-section h3 { margin: 0 0 0.5rem; font-size: 0.95rem; } .nscc-ap-form-grid, .nscc-ar-new-form .nscc-ap-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; margin: 0.5rem 0 1rem; align-items: end; } .nscc-ap-form-grid label, .nscc-ar-new-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .nscc-ap-form-grid input, .nscc-ap-form-grid select, .nscc-ar-new-form input { padding: 0.35rem 0.5rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 6px; font-size: 0.85rem; } .nscc-ap-new-bill, .nscc-ar-new-form, .nscc-gl-manual-je { margin: 0 0 0.75rem; } .nscc-manual-je-form label { display: block; margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .nscc-manual-je-form input[type="text"] { width: 100%; padding: 0.35rem 0.5rem; border: 2px solid var(--border); border-radius: 6px; font-size: 0.85rem; } .nscc-mje-line { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.5rem; margin: 0 0 0.35rem; } .nscc-mje-line select, .nscc-mje-line input { padding: 0.35rem 0.5rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 6px; font-size: 0.85rem; } .nscc-finance-reports-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 900px) { .nscc-finance-reports-grid { grid-template-columns: 1fr 1fr; } } .nscc-report-total td { border-top: 2px solid var(--border); } .nscc-report-runner { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; } @media (max-width: 800px) { .nscc-report-runner { grid-template-columns: 1fr; } } .nscc-report-catalog h3 { margin: 0 0 0.5rem; font-size: 0.9rem; } .nscc-report-catalog-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 0.5rem 0.65rem; margin: 0 0 0.35rem; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-card); cursor: pointer; } .nscc-report-catalog-item.active { border-color: var(--brand); background: var(--bg-elevated, var(--bg-card)); } .nscc-report-catalog-item__name { font-weight: 800; font-size: 0.82rem; } .nscc-report-catalog-item__group { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .nscc-report-asof { display: block; margin-top: 0.75rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); } .nscc-report-asof input { display: block; width: 100%; margin-top: 0.25rem; padding: 0.35rem; border: 2px solid var(--border); border-radius: 6px; } .nscc-report-preview-pane { min-width: 0; } .nscc-report-preview-scroll { overflow: auto; max-height: 60vh; border: 2px solid var(--border); border-radius: 8px; padding: 0.5rem; background: var(--bg-card); } .nscc-report-preview-head h3 { margin: 0 0 0.25rem; font-size: 1rem; } .nscc-report-preview-table { font-size: 0.75rem; } .nscc-roundtrip-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; padding: 0.5rem; border: 2px dashed var(--brand); border-radius: 8px; background: var(--bg-raised); } .nscc-roundtrip-toolbar .nscc-file-btn { margin: 0; cursor: pointer; } .nscc-roundtrip-preview { margin: 0.5rem 0 1rem; padding: 0.75rem; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-card); } .nscc-roundtrip-preview h4 { margin: 0 0 0.5rem; font-size: 0.95rem; } .nscc-roundtrip-preview--error { border-color: #dc2626; background: rgba(220,38,38,0.06); } .nscc-sod-override-box { margin: 0.5rem 0 0.75rem; padding: 0.65rem 0.75rem; border: 2px dashed var(--border); border-radius: 8px; background: var(--bg-card); } .nscc-sod-override-label { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.82rem; cursor: pointer; } .nscc-sod-override-active { margin: 0.35rem 0 0.65rem; font-size: 0.78rem; } .badge-warn { background: transparent; color: var(--text-primary); border: 4px solid #FF9500; border-radius: 8px; } /* Global rule — every screen that renders a KPI tile row (Sales pipeline health, HR risks, Compliance credentials, Payroll, Acct dashboard, Executive Dashboard) uses .exec-kpi-grid and expects side-by-side tiles. Previously scoped to .exec-dash-shell, which left every other consumer stacking vertically. The .exec-dash-shell rule stays for its slightly tighter margin-bottom / gap tuning inside the Exec Dash. */ .exec-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; } .exec-dash-shell .exec-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; } /* Cards blend with the theme background instead of forcing a bright white rectangle. Matt 2026-09-12: "none of the screens that have boxes should have the bright white backgrounds. they need to match the themes." Transparent lets each card inherit whatever its container / theme paints beneath. */ /* overflow:hidden so a colored child (sparkline area fill, colored value text, a nested colored border) can't bleed past the 8px rounded corners of the box. Same pattern used on .nscc-dash-aging-bar / .nscc-dash-cust-bar above. */ .exec-kpi-card { border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 8px; padding: 0.55rem 0.65rem; background: transparent; overflow: hidden; min-width: 0; } .exec-kpi-card--brand { border-color: var(--nscc-line, #000000); } .exec-kpi-card--positive .exec-kpi-card__value { color: #15803d; } .exec-kpi-card--negative .exec-kpi-card__value { color: #b91c1c; } .exec-kpi-card--accent-green .exec-kpi-card__value { color: #15803d; } .exec-kpi-card--accent-blue .exec-kpi-card__value { color: #1d4ed8; } .exec-kpi-card--warn { border-color: var(--nscc-line, #000000); } .exec-kpi-card--link { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .exec-kpi-card--link:hover, .exec-kpi-card--link:focus-visible { border-color: var(--nscc-line, #000000); box-shadow: 0 0 0 1px #000000; outline: none; } .exec-kpi-card--active { border-color: var(--nscc-line, #000000); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2); background: rgba(13, 148, 136, 0.06); } .exec-kpi-card__hint { margin-top: 0.3rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--brand); } .exec-kpi-card__label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); overflow-wrap: anywhere; min-width: 0; } .exec-kpi-card__value { font-size: 1.35rem; font-weight: 900; line-height: 1.2; margin-top: 0.15rem; overflow-wrap: anywhere; min-width: 0; } .exec-kpi-card__sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; overflow-wrap: anywhere; min-width: 0; } .nscc-linkish { background: none; border: none; padding: 0; margin: 0; color: var(--brand); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .nscc-linkish:hover, .nscc-linkish:focus-visible { color: var(--brand-light, #14b8a6); outline: none; } .nscc-row-flash, .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; } } .exec-dash-section { margin: 0 0 1rem; } .exec-dash-section__title { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 800; } .exec-dash-shortcuts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 1rem; } .exec-dash-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; } .exec-dash-filter label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); } .exec-dash-filter select { margin-left: 0.35rem; padding: 0.3rem 0.45rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 6px; } .exec-state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem; } .exec-state-card { border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 8px; padding: 0.55rem 0.65rem; background: transparent; font-size: 0.78rem; overflow: hidden; min-width: 0; } .exec-state-card__head { font-weight: 800; margin-bottom: 0.25rem; } .exec-state-card__stats { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--text-muted); font-size: 0.7rem; margin-bottom: 0.25rem; } .exec-state-card__meta { font-size: 0.68rem; color: var(--text-muted); } .exec-kpi-card__value-row { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; min-width: 0; } .nscc-payroll-estimate-banner { margin: 0 0 0.75rem; padding: 0.55rem 0.75rem; border: 2px solid var(--alert-banner-border, #fcd34d); border-radius: 8px; background: var(--alert-banner-bg, #fffbeb); color: var(--alert-banner-fg, #78350f); font-size: 0.78rem; line-height: 1.4; } .nscc-payroll-estimate-banner strong { font-weight: 800; } .exec-pillar-ready { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; margin: 0.5rem 0 1rem; } .exec-pillar-ready__card { border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000); border-radius: 8px; padding: 0.55rem 0.65rem; background: var(--bg-card); overflow: hidden; min-width: 0; } .exec-pillar-ready__name { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .exec-pillar-ready__status { font-size: 0.95rem; font-weight: 900; margin-top: 0.15rem; } .exec-pillar-ready__status--ready { color: #15803d; } .exec-pillar-ready__status--partial { color: #a16207; } .exec-pillar-ready__note { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.2rem; } .exec-sparkline-wrap { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0.1rem 0.15rem 0; border-radius: 4px; background: rgba(0, 0, 0, 0.03); } .exec-sparkline { width: 160px; height: 48px; display: block; shape-rendering: geometricPrecision; } .exec-sparkline__area { fill-opacity: 0.18; } .exec-sparkline__line { stroke-width: 2; } .exec-sparkline__end { stroke: #fff; stroke-width: 1; } .exec-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.65rem; } .exec-chart-card { border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 8px; padding: 0.5rem 0.6rem; background: transparent; overflow: hidden; min-width: 0; } .exec-chart-card__title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.35rem; } .exec-chart-card--link { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .exec-chart-card--link:hover, .exec-chart-card--link:focus-visible { border-color: var(--brand, #1c1917); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #1c1917) 25%, transparent); outline: none; } .exec-chart-card__hint { margin-top: 0.35rem; font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .exec-chart-svg { width: 100%; height: auto; display: block; shape-rendering: geometricPrecision; } .exec-chart-label { font-size: 10px; fill: var(--text-muted, #64748b); font-family: monospace; } .exec-chart-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.65rem; color: var(--text-muted); } .exec-chart-legend-item { display: inline-flex; align-items: center; gap: 0.25rem; } .exec-drill-panel { margin-top: 1rem; padding: 0.85rem 1rem 1rem; border: var(--nscc-line-w, 2px) solid var(--nscc-line, #000000); border-radius: 10px; background: var(--bg-card, #fff); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); } .exec-drill-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .exec-drill-panel__title { margin: 0; font-size: 1rem; font-weight: 800; } .exec-drill-panel__lead { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--text-muted); } .exec-drill-panel__subtitle { margin: 0.85rem 0 0.4rem; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .exec-drill-panel__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; } /* ============================================================ FLAT / DATA-DENSE CONSOLE OVERRIDES (light + dark) Color stays on status chips, alerts, charts, graphs, maps. ============================================================ */ html, body, .app-container, .main-content, .top-header, .nscc-chrome-brand-row { background-image: none !important; } .card, .panel, .modal, .modal-content, .drawer, .popover, .dropdown-menu, .job-card:not([data-trip-status]), .trip-card, .batch-card, .gantt-alert-card, .timeline-pending-trip, .nscc-kpi-card, .finance-card, .overview-card { box-shadow: none !important; border-radius: 0 !important; border-width: 2px !important; border-style: solid !important; border-color: var(--nscc-line, #000000) !important; } /* Modals: thicker frame than cards/panels */ .modal-content, .trip-modal-content { border-width: 4px !important; } :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, 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 { border-color: rgba(245, 245, 244, 0.68) !important; background: transparent !important; background-color: transparent !important; } /* Dark modals: solid panel + dimmed scrim (never clear glass) */ :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 .trip-modal-content, body.dark-theme .modal-content, body.dark-theme .trip-modal-content { border-width: 4px !important; border-color: rgba(245, 245, 244, 0.68) !important; background: var(--bg-card, #1c1c1b) !important; background-color: var(--bg-card, #1c1c1b) !important; } .job-card:hover, .trip-card:hover, .batch-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--nscc-line, #000000) !important; } :root.dark .job-card:hover, :root.dark .trip-card:hover, :root.dark .batch-card:hover, body.dark-theme .job-card:hover, body.dark-theme .trip-card:hover, body.dark-theme .batch-card:hover { border-color: rgba(245, 245, 244, 0.85) !important; } /* Tables — denser rows, hairline rules */ table, .data-table, .nscc-table, .master-table, .nscc-table { border-collapse: collapse; font-size: var(--dense-font); } table th, table td, .data-table th, .data-table td, .nscc-table th, .nscc-table td, .master-table th, .master-table td, .nscc-table th, .nscc-table td { padding: var(--dense-pad-y) var(--dense-pad-x) !important; border-color: var(--border) !important; line-height: 1.25; } table th, .data-table th, .nscc-table th, .master-table th, .nscc-table th { font-size: var(--dense-font-sm); font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; background: var(--table-head-bg, var(--bg-sunken)) !important; color: var(--text-secondary); } /* Chrome / nav — flat zinc, not earth folder gold */ .nscc-folder-tab, .folder-tab, .pulse-folder-tab, [class*="folder-tab"] { background: var(--chrome-folder) !important; color: var(--chrome-folder-ink) !important; border-color: var(--border) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; box-shadow: none !important; } .nscc-folder-tab.active, .folder-tab.active, .pulse-folder-tab.active, [class*="folder-tab"].active { background: var(--bg-card) !important; color: var(--text-primary) !important; border-bottom-color: var(--bg-card) !important; } /* Inputs — 1px theme hairline. Native