@import url('/vendor/fonts.css');

/* OptimaOS — Design System v2.1 Premium Redesign */

:root {
    /* Map legacy variables to OptimaOS Design Language Tokens */











    /* Glassmorphism & Transition Tokens */
    --glass-blur: blur(24px); /* Aether Nav rule 2: heavy backdrop blur */
    --transition-premium: all var(--dur) var(--ease);

    /* Shape — mapped to Design Language tokens */

    /* Elevation */

    /* Layout */
    --sidebar-w: 240px;
    --topbar-h: 60px;
    --t: var(--dur) var(--ease);
    --t-spring: var(--dur) var(--ease);

    /* ── Spacing scale ─────────────────────────────────────────────────────
       --space-1..6, 8, 10 come straight from optimaos-tokens.css. The old
       self-referential aliases (--space-5: var(--space-5)) made the whole
       scale INVALID per the CSS custom-property cycle rule — every fos-*
       padding/gap computed to nothing. Never alias a token to itself.
       Legacy-only steps 7 and 9 map onto the FOS scale: */

    /* ── Type scale mapped to FOS tokens ── */
    --text-xs: calc(var(--type-xs) * var(--density-type));
    --text-sm: calc(var(--type-sm) * var(--density-type));
    --text-base: calc(var(--type-base) * var(--density-type));
    --text-md: calc(var(--type-md) * var(--density-type));
    --text-lg: calc(var(--type-lg) * var(--density-type));
    --text-xl: calc(var(--type-xl) * var(--density-type));
    --text-2xl: calc(var(--type-2xl) * var(--density-type));

    /* ── Line heights ── */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ── Z-index scale ── */
    --z-base: 1;
    --z-topbar: 30;
    --z-sidebar-backdrop: 35;
    --z-sidebar: 40;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-sheet-backdrop: 200;
    --z-sheet: 201;
    --z-dialog: 400;
    --z-toast: 500;

    /* ── Brand ── */
    --brand-primary: #9742ff;
}

/* fadeUp consolidated into fadeSlideIn — see A+ UX layer */
@keyframes scaleIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }

*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: var(--space-0);
    margin: calc(-1 * var(--space-0));
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    margin: var(--space-0);
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: calc(var(--type-base) * var(--density-type));
    line-height: 1.45;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p { margin: var(--space-0); }
h1 { font-size: calc(var(--type-2xl) * var(--density-type)); line-height: 1.15; letter-spacing: 0; }
h2 { font-size: calc(var(--type-lg) * var(--density-type)); line-height: 1.2; letter-spacing: 0; }
h3 { font-size: calc(var(--type-base) * var(--density-type)); line-height: 1.25; }
h4 { font-size: calc(var(--type-sm) * var(--density-type)); }
a { color: var(--c-info); text-decoration: none; }
a:hover { text-decoration: underline; }
button,
input,
select,
textarea { font: inherit; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
img { display: block; max-width: 100%; }
small,
.muted { color: var(--c-text-3); }
/* <small> defaults to 0.83em (~11.7px) — below the 13px legibility floor. */
small { font-size: calc(var(--type-sm) * var(--density-type)); }
.eyebrow {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 800;
    color: var(--c-text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
}

:focus-visible {
    outline: 3px solid rgba(151, 66, 255, .24);
    outline-offset: 2px;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    background:
        radial-gradient(circle at 78% 18%, rgba(6,111,134,.14), transparent 30%),
        radial-gradient(circle at 12% 82%, rgba(180,83,9,.10), transparent 30%),
        linear-gradient(90deg, rgba(16,17,20,.03) 1px, transparent 1px),
        linear-gradient(rgba(16,17,20,.03) 1px, transparent 1px),
        var(--c-page);
    background-size: auto, auto, 42px 42px, 42px 42px, auto;
}
.auth-layout { width: min(1120px, 100%); }
.auth-panel {
    min-height: min(720px, calc(100vh - 48px));
    display: grid;
    place-items: center;
}
.auth-entry {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(340px, 430px);
    gap: var(--space-6);
    align-items: stretch;
    min-height: 520px;
    min-width: 0;
}
.auth-product {
    min-height: 520px;
    padding: var(--space-8);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,243,247,.96));
    display: grid;
    align-content: space-between;
    box-shadow: var(--elev-2);
    overflow: hidden;
    position: relative;
    min-width: 0;
}
.auth-product::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border: 1px dashed var(--c-border-2);
    border-radius: 50%;
    pointer-events: none;
}
.auth-kicker {
    margin: var(--space-6) var(--space-0) var(--space-2);
    color: var(--c-info);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.auth-product h2 {
    max-width: 500px;
    margin-bottom: var(--space-3);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.04;
    letter-spacing: 0;
}
.auth-product p:not(.auth-kicker) {
    max-width: 500px;
    color: var(--c-text-2);
    font-size: calc(var(--type-md) * var(--density-type));
    line-height: 1.7;
}
.auth-assurance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin: var(--space-5) var(--space-0);
}
.auth-assurance-grid span {
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-success);
    border-radius: var(--radius-sm);
    background: var(--c-success);
    color: var(--c-success);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 900;
}
.auth-flow {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
    counter-reset: auth-flow;
}
.auth-flow li {
    counter-increment: auth-flow;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--c-border);
    border-left: 5px solid var(--c-info);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.82);
}
.auth-flow li::before {
    content: counter(auth-flow, decimal-leading-zero);
    display: grid;
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: var(--radius-sm);
    color: var(--c-chrome-text);
    background: var(--c-accent);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 900;
}
.auth-flow strong,
.auth-flow span {
    grid-column: 2;
}
.auth-flow strong {
    font-size: calc(var(--type-sm) * var(--density-type));
}
.auth-flow span {
    color: var(--c-text-3);
    font-size: calc(var(--type-sm) * var(--density-type));
}
.auth-error-state {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-left: 5px solid var(--c-danger);
    border-radius: var(--radius-md);
    background: var(--c-danger-weak);
    color: var(--c-danger);
}
.auth-error-state strong {
    color: var(--c-text);
}
.auth-error-state p {
    color: var(--c-text-2);
}
.auth-error-state small {
    overflow-wrap: anywhere;
}
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-text);
    font-weight: 800;
    text-decoration: none;
}
.brand-lockup:hover { text-decoration: none; }
.brand-lockup.compact { min-width: 0; }
.brand-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--c-accent);
    color: var(--c-accent-text);
    flex: 0 0 auto;
}
.auth-product p { margin-top: var(--space-2); color: var(--c-text-3); }
.auth-card {
    width: 100%;
    padding: var(--space-8);
    border: 1px solid var(--c-glass-border);
    border-radius: var(--radius-lg);
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: grid;
    gap: var(--space-4);
    align-self: stretch;
    align-content: center;
    box-shadow: var(--elev-2);
    transition: var(--transition-premium);
}
#loadingCard {
    min-height: 464px;
}
.auth-card h1 {
    font-size: calc(var(--type-3xl) * var(--density-type));
    line-height: 1.08;
}
.auth-card label,
.dialog-fields label,
.space-field {
    display: grid;
    gap: var(--space-1);
    color: var(--c-text-2);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
}
input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    color: var(--c-text);
    padding: var(--space-2) var(--space-3);
    outline: 0;
    transition: all 0.2s var(--ease);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}
textarea { min-height: 92px; resize: vertical; }
input:focus,
select:focus,
textarea:focus {
    border-color: var(--c-accent);
    background: var(--c-surface);
    box-shadow: 0 0 0 4px rgba(151, 66, 255, 0.12), var(--elev-1);
}
select option {
    background-color: var(--c-surface);
    color: var(--c-text);
}
.bootstrap-help,
.recovery-notice,
.info {
    padding: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-info-weak);
    color: var(--c-info);
    font-size: calc(var(--type-sm) * var(--density-type));
}
.recovery-notice { display: flex; gap: var(--space-2); align-items: flex-start; }
.simple-list { list-style: none; margin: var(--space-0) var(--space-0) var(--space-2); padding: var(--space-0); display: flex; flex-direction: column; gap: var(--space-1); }
.simple-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2); background: var(--c-surface-2, var(--c-surface-2)); border-radius: var(--radius-sm, 6px); }
.simple-list-row .row-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.qr-action-choice { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) var(--space-0); }
.qr-action-choice .muted { margin-bottom: var(--space-1); }

/* QR activity summary — scanner result for location QRs */
.qr-activity-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-2) var(--space-0);
}
.qr-dept-section {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}
.qr-dept-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-3);
}
.qr-dept-header .ti { font-size: calc(var(--type-base) * var(--density-type)); color: var(--c-accent); }
.qr-activity-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-2);
    margin-bottom: var(--space-1);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--t), background var(--t);
}
.qr-activity-btn:last-child { margin-bottom: var(--space-0); }
.qr-activity-btn:hover { border-color: var(--c-accent); background: var(--c-accent-weak); }
.qr-activity-btn.active-work { border-color: var(--c-warning); background: var(--c-warning-weak); }
.qr-activity-name { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 600; color: var(--c-text); }
.qr-activity-type { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-3); padding: var(--space-0) var(--space-2); background: var(--c-surface-3); border-radius: var(--radius-lg); white-space: nowrap; }
.qr-activity-type.status-in_progress { background: var(--c-warning-weak); color: var(--c-warning); }
.qr-activity-type.status-completed { background: var(--c-success-weak); color: var(--c-success); }

/* QR management dialog — tab bar */
.tab-bar {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--c-border);
    padding-bottom: var(--space-0);
}
.tab-button {
    padding: var(--space-2) var(--space-3);
    border: none;
    background: none;
    cursor: pointer;
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    color: var(--c-text-3);
    border-bottom: 2px solid transparent;
    margin-bottom: calc(-1 * var(--space-0));
    transition: color var(--t);
}
.tab-button.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.tab-button:hover:not(.active) { color: var(--c-text); }

/* Flat admin tab strip (Master Framework administration tools) */
.simple-tabs { display: flex; flex-direction: column; gap: var(--space-4); }
.section-eyebrow-tabs .tab-button { display: inline-flex; align-items: center; gap: var(--space-1); }
.simple-tab-body { animation: fadeSlideIn .15s ease; }

/* QR management — section eyebrow */
.section-eyebrow {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text-3);
}

/* Info chips row */
.info-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mfa-qr {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}
.mfa-secret,
.recovery-codes {
    font-family: var(--font-mono);
    font-size: calc(var(--type-sm) * var(--density-type));
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    padding: var(--space-2);
    overflow: auto;
}
.mfa-secret {
    display: block;
    margin-top: var(--space-1);
    text-align: center;
    white-space: nowrap;
}
.mfa-secret-label {
    font-size: calc(var(--type-sm) * var(--density-type));
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text-3);
    margin-bottom: var(--space-0);
}
.mfa-manual-details {
    margin-top: var(--space-4);
    text-align: left;
}
.mfa-manual-summary {
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--brand-primary);
    cursor: pointer;
    user-select: none;
    text-align: center;
    display: block;
}
.mfa-manual-summary::-webkit-details-marker {
    display: none;
}
.mfa-manual-summary::before {
    content: "🔑 ";
}
.mfa-manual-details[open] .mfa-manual-summary {
    margin-bottom: var(--space-3);
}
#mfaEnrollment {
    display: grid;
    gap: var(--space-4);
    width: 100%;
}
/* Structured object/array cell values (escalation levels,
widget lists,
etc.) —
   was wrongly sharing monospace styling with MFA secret display; that made
   every multi-line value across the app read as a cramped wall of text. */
.structured-value {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-2);
    line-height: 1.4;
}
.structured-value span {
    display: block;
}

.danger-button,
.text-button,
.icon-button,
.table-action,
.dropdown-item,
.sidebar-logout {
    min-height: 36px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-0) var(--space-4);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    white-space: nowrap;
    transition: var(--transition-premium);
}
.table-action,
.dropdown-item {
    background: var(--c-surface);
    color: var(--c-text);
    border: 1.5px solid var(--c-border);
}
.table-action:hover,
.dropdown-item:hover { background: var(--c-surface-2); border-color: var(--c-border-3); text-decoration: none; }
.text-button {
    color: var(--c-text-3);
    text-decoration: underline;
    justify-content: flex-start;
    padding: var(--space-0);
}
.icon-button {
    width: 44px;
    min-height: 44px;
    padding: var(--space-0);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-2);
    position: relative;
}
.icon-button:hover { background: var(--c-surface-3); }
.danger { color: var(--c-danger); }
.danger-button {
    background: var(--c-surface);
    color: var(--c-danger);
    border: 1.5px solid var(--c-border, rgba(220,38,38,.35));
}
.danger-button:hover:not(:disabled) { background: var(--c-danger-weak, rgba(220,38,38,.06)); border-color: var(--c-danger); }
.form-message { min-height: 18px; color: var(--c-danger); font-size: calc(var(--type-sm) * var(--density-type)); }
.success { background: var(--c-success-weak); border: 1px solid var(--c-border); color: var(--c-success); }
.warning { background: var(--c-warning-weak); border: 1px solid var(--c-border); color: var(--c-warning); }
.critical { color: var(--c-danger); }
.amber { color: var(--c-warning); }
.blue { color: var(--c-info); }


/* ── New 5-item primary nav ── */
/* nav-primary-item/icon: see A+ UX layer below (line ~2070) */
.nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 800;
    padding: var(--space-0) var(--space-1);
    background: var(--c-danger);
    color: var(--c-chrome-text);
}
.nav-badge.amber { background: var(--c-warning); color: var(--c-chrome-text); }
.nav-badge.blue { background: var(--c-info); color: var(--c-chrome-text); }
.nav-primary-item.active .nav-badge { background: rgba(255,255,255,.25); color: var(--c-chrome-text); }

/* Legacy flat-nav system (.nav-sub-group/.nav-link/.nav-module-icon/.nav-section)
   removed 2026-07-21 — superseded by the recursive token-based fos-nav tree
   (renderNavNode() -> .fos-nav-node in optimaos-tokens.css §9). All unreferenced. */
/* .nav-search base — see canonical definition at L2685+ */
/* Aether Nav: violet is THE one accent. Module identity never introduces new
   hues — every legacy accent class resolves to the violet accent,
with the
   electric-cyan highlight as the only permitted secondary emphasis. */
.accent-blue {
}

.sidebar-logout {
    margin-top: auto;
    width: 100%;
    justify-content: flex-start;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-danger);
    background: var(--c-surface);
    padding: var(--space-0) var(--space-3);
    transition: background var(--t), border-color var(--t);
}
.sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.06);
    border-color: var(--c-danger);
}
.app-main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}
#pageContent { min-height: 100%; }
.page-header p:not(.eyebrow) { color: var(--c-text-3); margin-top: var(--space-1); }

/* Command Centre dashboard components — these had zero CSS at all,
so label/value/note
   text rendered with no spacing ("Open work1951 missed schedules") and cards had no
   padding or internal layout. Found by actually looking at a live screenshot. */
.management-metric {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    text-align: left;
    cursor: pointer;
    transition: transform var(--t), box-shadow var(--t);
}
.management-metric-copy small { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-4); }
.management-metric-copy strong { font-size: calc(var(--type-xl) * var(--density-type)); font-weight: 700; color: var(--c-text); }
.management-metric-copy span { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-3); }
.module-status-copy strong { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text); }
.module-status-copy small { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-4); }
.module-status-value strong { font-size: calc(var(--type-lg) * var(--density-type)); font-weight: 700; color: var(--c-text); }
.module-status-value small { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-4); }
.module-health.active,
.module-health.clear { background: var(--c-success-weak); color: var(--c-success); }
.module-health.warning { background: var(--c-warning-weak); color: var(--c-warning); }
.module-health.critical { background: var(--c-danger-weak); color: var(--c-danger); }
.event-row > i { flex: none; font-size: calc(var(--type-md) * var(--density-type)); color: var(--c-text-3); }
.event-row > div { display: flex; flex-direction: column; gap: var(--space-0); min-width: 0; }
.event-row strong { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text); text-transform: capitalize; }
.event-row span { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-4); }
.location-performance-name strong { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text); }
.location-performance-name small { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-4); }
.location-performance-row > span:not(.location-node-icon):not(.location-performance-name):not(.module-health) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-0);
    min-width: 44px;
}
.location-performance-row > span strong { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text); }
.location-performance-row > span small { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-4); }
.location-performance-row .module-health.clear { background: var(--c-success-weak); color: var(--c-success); }
.location-performance-row .module-health:not(.clear) { background: var(--c-warning-weak); color: var(--c-warning); }
.ai-digest-card strong { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text); line-height: 1.35; }
.ai-digest-card small { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-3); line-height: 1.4; }
.record-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mobile-records { display: none; }

.record-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--elev-1);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    animation: fadeSlideIn .25s ease both;
}
.record-card:hover {
    box-shadow: var(--elev-2);
    border-color: var(--c-text-4);
}
.record-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    font-size: calc(var(--type-sm) * var(--density-type));
    border-bottom: 1px solid var(--c-border-2);
    padding-bottom: var(--space-2);
}
.record-field:last-of-type {
    border-bottom: 0;
    padding-bottom: var(--space-0);
}
.record-label {
    /* was a hardcoded 11px — below the 13px legibility floor on every mobile record row */
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-3);
}
.record-value {
    color: var(--c-text-2);
    font-weight: 500;
    text-align: right;
}

.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); }
.data-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.data-table th,
.data-table td {
    min-height: var(--density-control);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border-2);
    text-align: left;
    vertical-align: middle;
    font-size: calc(var(--type-sm) * var(--density-type));
}
.data-table td:has(.structured-value) { vertical-align: top; padding-top: var(--space-2); }
.data-table th {
    background: var(--c-surface-2);
    color: var(--c-text-4);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.data-table tr:hover td { background: var(--c-surface-2); }
/* empty-state: see A+ UX layer below */
.status-pill,
.framework-chip,
.ticket-prefill-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 22px;
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-2);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
    color: var(--c-text-3);
    background: var(--c-surface-2);
}
.status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
/* green — success states */
.status-pill.active,
.status-pill.completed,
.status-pill.approved,
.status-pill.resolved,
.status-pill.done,
.status-pill.success,
.status-pill.checked_in,
.status-pill.fulfilled { color: var(--c-success); background: var(--c-success-weak); border-color: var(--c-border); }
/* amber — in-progress / warning states */
.status-pill.pending,
.status-pill.in_progress,
.status-pill.on_hold,
.status-pill.warning,
.status-pill.pending_approval,
.status-pill.scheduled,
.status-pill.assigned { color: var(--c-warning); background: var(--c-warning-weak); border-color: var(--c-border); }
/* red — failure / blocked states */
.status-pill.critical,
.status-pill.rejected,
.status-pill.failed,
.status-pill.blocked,
.status-pill.overdue,
.status-pill.danger,
.status-pill.cancelled,
.status-pill.denied { color: var(--c-danger); background: var(--c-danger-weak); border-color: var(--c-border); }
/* blue — informational states */
.status-pill.info,
.status-pill.invited,
.status-pill.draft,
.status-pill.open,
.status-pill.submitted { color: var(--c-info); background: var(--c-info-weak); border-color: var(--c-border); }
/* neutral — inactive / terminal states */
.status-pill.neutral,
.status-pill.checked_out,
.status-pill.expired,
.status-pill.inactive,
.status-pill.missed,
.status-pill.locked { color: var(--c-text-3); background: var(--c-surface-3); border-color: var(--c-border); }
.blueprint-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: var(--space-4);
    align-items: stretch;
    padding: var(--space-5);
    border-bottom: 1px solid var(--c-border);
    background: rgba(255,255,255,.94);
}
.blueprint-command h1,
.blueprint-hero h2 { margin-top: var(--space-1); }
.blueprint-command p:not(.eyebrow),
.blueprint-hero p:not(.eyebrow) {
    color: var(--c-text-3);
    margin-top: var(--space-1);
    max-width: 760px;
}
.blueprint-publish-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
}
.blueprint-command-meter strong,
.blueprint-publish-card strong { font-size: calc(var(--type-xl) * var(--density-type)); line-height: 1; }
.blueprint-publish-card .ready { color: var(--c-success); font-weight: 800; }
.blueprint-publish-card .blocked { color: var(--c-warning); font-weight: 800; }
.setup-progress-track {
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--c-border-2);
    overflow: hidden;
}
.setup-progress-track span,
.setup-progress-track::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: var(--c-accent);
    border-radius: inherit;
}
/* Stage tab rows. Previously flex-wrap:nowrap + overflow-x:auto + a HIDDEN
   scrollbar,
so on a six-stage flow the last stages ("5 Billing run",
"6 SAP
   export") scrolled out of view with no affordance saying more existed — they
   simply looked cut off at the edge. They wrap now,
and the colours are tokens
   rather than hardcoded hex with legacy var fallbacks. */
.journey-tabs,
.ticket-stage-tabs,
.space-stage-tabs,
.visitor-stage-tabs,
.tanker-stage-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space-2) * var(--density-space));
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    padding: calc(var(--space-2) * var(--density-space)) calc(var(--space-3) * var(--density-space));
    margin-bottom: calc(var(--space-4) * var(--density-space));
}
.framework-stage-tabs::-webkit-scrollbar,
.journey-tabs::-webkit-scrollbar { display: none; }
.journey-tab,
.ticket-stage-tab,
.space-stage-tab,
.visitor-stage-tab,
.tanker-stage-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    color: var(--text-secondary, var(--c-text-3));
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.journey-tab:hover,
.ticket-stage-tab:hover,
.space-stage-tab:hover {
    color: var(--text-primary, var(--c-chrome-text));
    background: rgba(255, 255, 255, 0.03);
}
.framework-stage-tab.active,
.journey-tab.active,
.ticket-stage-tab.active,
.space-stage-tab.active,
.visitor-stage-tab.active,
.tanker-stage-tab.active,
.permit-stage-tab.active {
    color: var(--c-accent, var(--c-accent));
    background: rgba(99, 102, 241, 0.08);
    font-weight: 700;
}
.framework-stage-tab.complete { color: var(--c-success); }
.framework-stage-tab.complete .framework-stage-number {
    color: white;
    background: var(--c-success);
    border-color: var(--c-success);
}

/* Tanker meter reconciliation cards */
.tanker-meter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-3);
    padding: var(--space-3) var(--space-0);
}
.tanker-meter-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.tanker-meter-card.exception { border-color: var(--c-danger); }
.tanker-meter-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}
.tanker-meter-card > header p { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-4); margin-top: var(--space-0); }
.tanker-meter-readings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
.tanker-meter-reading {
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
    padding: var(--space-2);
    background: var(--bg);
    border-radius: var(--radius-sm);
}
.tanker-meter-reading-label {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--c-text-4);
}
.tanker-meter-reading strong { font-size: calc(var(--type-sm) * var(--density-type)); }
.tanker-meter-card > footer { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-3); }
.tanker-variance.exceeded { color: var(--c-danger); }
.framework-breadcrumb { color: var(--c-text-4); font-size: calc(var(--type-sm) * var(--density-type)); margin-bottom: var(--space-1); }
.framework-heading-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.framework-stage-pane.active { display: block; }
.framework-screen-content { display: grid; gap: var(--space-3); max-width: 1120px; }
.framework-stage-card,
.framework-hierarchy-card,
.framework-scope-card,
.framework-applications-callout,
.framework-golive-header {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
}
.framework-stage-card,
.framework-hierarchy-card { overflow: hidden; }
.framework-scope-card,
.framework-global-root,
.framework-vendor-registration,
.framework-screen-content,
.ticket-records-details,
.space-stage-body,
.journey-stage-body { padding: var(--space-3); }
.framework-applications-callout {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-3);
    border-color: var(--c-border);
    background: var(--c-info-weak);
    color: var(--c-info);
}
.framework-module-grid,
.setup-tools-grid {
    display: grid;
    gap: var(--space-3);
}
.framework-module-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.framework-module-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    padding: var(--space-3);
}
.framework-module-card.enabled { box-shadow: inset 3px 0 0 var(--c-success); }
.framework-module-card-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--c-surface-2);
    color: var(--c-info);
}
.framework-module-card-body { min-width: 0; flex: 1; }
.framework-module-card-body strong { display: block; }
.framework-module-subtitle { display: block; color: var(--c-text-4); font-size: calc(var(--type-sm) * var(--density-type)); }
.framework-module-status {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    padding: var(--space-0) var(--space-2);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 800;
}
.status-enabled { color: var(--c-success); background: var(--c-success-weak); border-color: var(--c-border); }
.status-disabled { color: var(--c-text-4); background: var(--c-surface-2); }
.framework-chip-placeholder { display: flex; flex-wrap: wrap; gap: var(--space-1); color: var(--c-text-4); }
.framework-union-note,
.framework-annotation {
    color: var(--c-text-3);
    background: var(--c-surface-2);
    border-left: 3px solid var(--c-info);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: calc(var(--type-sm) * var(--density-type));
}
.framework-golive-checklist { display: grid; gap: var(--space-2); padding: var(--space-3); }
.framework-golive-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: var(--c-surface);
}
.framework-golive-item.done { color: var(--c-success); background: var(--c-success-weak); border-color: var(--c-border); }
.golive-item-badge { margin-left: auto; font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 800; }
.framework-golive-incomplete {
    margin: var(--space-0) var(--space-3) var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-warning-weak);
    color: var(--c-warning);
}
.framework-golive-launch {
    margin: var(--space-0) var(--space-3) var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--c-accent);
    color: white;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
}
.blueprint-overview { padding: var(--space-3); display: grid; gap: var(--space-3); }
.blueprint-canvas {
    min-height: 260px;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
}
.blueprint-node {
    min-height: 118px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--space-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.94);
    padding: var(--space-3);
    text-align: left;
    box-shadow: var(--elev-1);
    position: relative;
}
.blueprint-node::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    width: 15px;
    border-top: 1px solid var(--c-border);
}
.blueprint-node:nth-child(4n)::after,
.blueprint-node:last-child::after { display: none; }
.blueprint-node.complete { border-color: var(--c-border); box-shadow: inset 0 3px 0 var(--c-success); }
.blueprint-node.pending { border-color: var(--c-border); box-shadow: inset 0 3px 0 var(--c-warning); }
.blueprint-node-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--c-surface-2);
    color: var(--c-info);
}
.blueprint-node.complete .blueprint-node-icon { color: var(--c-success); background: var(--c-success-weak); }
.blueprint-node.pending .blueprint-node-icon { color: var(--c-warning); background: var(--c-warning-weak); }
.blueprint-node small { color: var(--c-text-4); }
.setup-step-group h3 {
    padding: var(--space-2) var(--space-3);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border-2);
}
.setup-step-grid { display: grid; }
.setup-step {
    min-height: 52px;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--c-border-2);
    text-align: left;
}
.setup-step:hover { background: var(--c-surface-3); }
.setup-step:last-child { border-bottom: 0; }
.setup-step-index {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    border: 1px solid var(--c-border);
    color: var(--c-text-4);
    flex: 0 0 auto;
}
.setup-step.complete .setup-step-index { color: white; background: var(--c-success); border-color: var(--c-success); }
.setup-step strong { display: block; }
.setup-step small { display: block; color: var(--c-text-4); margin-top: var(--space-0); }
.setup-gate {
    padding: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-warning-weak);
    color: var(--c-warning);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin: var(--space-3) var(--space-3) var(--space-0);
}
/* Prerequisite nudge — shown inside a section when prior steps are incomplete */
.prereq-nudge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-warning-weak);
    color: var(--c-warning);
    font-size: 0.875rem;
    margin-bottom: var(--space-5);
}
.prereq-nudge .link-button {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--c-info);
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
    padding: var(--space-0);
    text-decoration: underline;
    white-space: nowrap;
}
.setup-readiness-details {
    margin: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    overflow: hidden;
}
.setup-readiness-details summary {
    padding: var(--space-3) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.setup-readiness-details summary span { display: grid; }
.setup-tools {
    margin: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    padding: var(--space-3);
}
.setup-tools summary { cursor: pointer; font-weight: 800; }
.setup-tools-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: var(--space-2); }

dialog {
    border: 0;
    padding: var(--space-0);
    background: transparent;
    margin: auto;
    max-width: min(920px, calc(100vw - 28px));
    width: max-content;
}
dialog::backdrop { background: rgba(16,17,20,.46); }
.dialog-card {
    /* Dark glassmorphic dialog: remap the muted text tokens to the light chrome scale so
       field labels/hints read on the dark surface (--c-text is already handled elsewhere;
       --c-text-2/-3 were still the light-theme greys → low contrast). */
    --c-text-2: var(--c-chrome-text);
    --c-text-3: var(--c-chrome-text-2);
    --c-text-4: var(--c-chrome-text-2);
    width: min(760px, calc(100vw - 28px));
    max-height: min(840px, calc(100vh - 28px));
    overflow: auto;
    border: 1px solid var(--c-glass-border);
    border-radius: var(--radius-lg);
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--elev-2);
    transition: var(--transition-premium);
}
.dialog-card > header,
.dialog-card > footer {
    padding: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--c-border-2);
}
.dialog-card > footer {
    border-bottom: 0;
    border-top: 1px solid var(--c-border-2);
    justify-content: flex-end;
}
.dialog-fields {
    padding: var(--space-3);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.dialog-fields .full,
.full { grid-column: 1 / -1; }
.scanner-body,
.work-dialog-body,
.notification-list,
.setup-dialog-body { padding: var(--space-3); }

.location-tree,
.execution-structure-panel,
.ticket-blueprint-workspace,
.permit-section,
.logsheet-execution-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    overflow: hidden;
}
.location-tree-node,
.notification-row,
.roster-row,
.journey-action-row,
.ticket-queue-item,
.discrepancy-operation,
.logsheet-builder-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-border-2);
}
.location-tree-node:hover,
.ticket-queue-item:hover,
.notification-row:hover { background: var(--c-surface-3); }
.location-tree-icon { color: var(--c-text-4); }
.location-tree-copy { min-width: 0; flex: 1; display: flex; gap: var(--space-2); align-items: baseline; }
.location-tree-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-tree-copy span { color: var(--c-text-4); font-family: var(--font-mono); font-size: calc(var(--type-sm) * var(--density-type)); }
.location-tree-node[data-level="1"] { padding-left: var(--space-6); }
.location-tree-node[data-level="2"] { padding-left: var(--space-10); }
.location-tree-node[data-level="3"] { padding-left: var(--space-12); }
.location-tree-node[data-level="4"] { padding-left: var(--space-12); }
.location-tree-kebab {
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
}
.location-tree-node > button:not(.location-tree-kebab) { display: none; }

.blueprint-journey,
.ticket-stage-body,
.journey-stage-body,
.space-screen-stack,
.checklist-dual-execution,
.ticket-detail-grid,
.permit-dynamic-sections,
.challan-comparison,
.shortfall-choice-grid,
.bulk-hub-columns {
    display: grid;
    gap: var(--space-3);
}
.ticket-detail-grid,
.checklist-dual-execution,
.challan-comparison,
.permit-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.space-floor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--space-2); }
.parking-capacity-banner { display: flex; align-items: stretch; gap: var(--space-0); border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); margin-bottom: var(--space-3); overflow: hidden; }
.parking-capacity-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0); padding: var(--space-3) var(--space-5); flex: 1; border-right: 1px solid var(--c-border); }
.parking-capacity-stat:last-child { border-right: none; }
.parking-capacity-stat strong { font-size: calc(var(--type-xl) * var(--density-type)); font-weight: 800; color: var(--c-text); line-height: 1; }
.parking-capacity-stat span { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 500; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .05em; }
.setting-choice-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-3); }
.setting-choice-card span { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 500; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .05em; }
.setting-choice-card strong { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 700; color: var(--c-text); }
.visitor-approval-alert { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1.5px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-warning-weak); flex-wrap: wrap; }
.visitor-approval-info { display: flex; flex-direction: column; gap: var(--space-1); }
.visitor-approval-info strong { font-size: calc(var(--type-md) * var(--density-type)); font-weight: 700; color: var(--c-text); }
.visitor-approval-info span { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-2); }
.visitor-approval-info small { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-4); }
.visitor-approval-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.space-field:not(label),
.activity-builder-grid,
.permit-section-grid,
.space-booker,
.bulk-error-section,
.settings-journey-grid { padding: var(--space-3); }
.offline-approval-card {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border-color: var(--c-border);
    background: var(--c-warning-weak);
    color: var(--c-warning);
}
.ticket-star-row,
.ticket-category-chips,
.ticket-parallel-actions,
.hierarchy-level-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ticket-photo-box {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text-4);
}
.scanner-result,
.bulk-error-table-wrap { overflow: auto; }
.centered { display: grid; place-items: center; min-height: 200px; }
.desktop-only { display: initial; }
.mobile-only { display: none; }

@media (max-width: 920px) {
    :root { --sidebar-w: 0px; --topbar-h: 56px; }
    .mobile-records { display: block; }
    .table-wrap { display: none; }
    .app-shell { grid-template-columns: 0 minmax(0, 1fr); }
    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 280px;
        z-index: var(--z-sidebar);
        transform: translateX(-100%);
        box-shadow: var(--elev-2);
    }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(16,17,20,.4);
        z-index: var(--z-sidebar-backdrop);
    }
    .mobile-only { display: inline-flex; }
    .desktop-only { display: none; }
    .auth-entry,
.blueprint-hero,
.ticket-detail-grid,
.checklist-dual-execution,
.challan-comparison,
.permit-section-grid { grid-template-columns: 1fr; }
    .auth-layout,
.auth-panel,
.auth-entry {
        width: 100%;
        max-width: calc(100vw - 24px);
    }
    .auth-entry { min-height: 0; gap: var(--space-3); }
    .auth-card,
.auth-product {
        width: 100%;
        max-width: calc(100vw - 24px);
    }
    .auth-product { min-height: 220px; }
    .auth-assurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-product p:not(.auth-kicker) { overflow-wrap: anywhere; }
    .dialog-fields { grid-template-columns: 1fr; }
    .dialog-card { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    dialog { align-items: end; }
    .topbar-context { display: none; }
    .connection-state span { display: none; }
}

@media (max-width: 560px) {
    body { font-size: calc(var(--type-sm) * var(--density-type)); }
    .auth-page { padding: var(--space-3); overflow-x: hidden; }
    .auth-layout,
.auth-panel,
.auth-entry {
        width: 100%;
        max-width: calc(100vw - 24px);
    }
    .auth-entry { gap: var(--space-3); }
    .auth-card,
.auth-product {
        width: 100%;
        max-width: calc(100vw - 24px);
        padding: var(--space-5);
    }
    .auth-product h2 { font-size: calc(var(--type-3xl) * var(--density-type)); }
    .auth-product p:not(.auth-kicker) {
        font-size: calc(var(--type-base) * var(--density-type));
        overflow-wrap: anywhere;
    }
    .auth-assurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-flow li { grid-template-columns: 32px minmax(0, 1fr); }
    .auth-flow li::before { width: 30px; height: 30px; }
    .app-topbar { padding: var(--space-0) var(--space-2); gap: var(--space-2); }
    .brand-lockup strong { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .blueprint-hero,
.blueprint-overview,
.panel-grid,
.module-panel-gap { padding: var(--space-3); }
    .journey-tabs,
.ticket-stage-tabs,
.space-stage-tabs { padding: var(--space-0) var(--space-1); }
    .journey-tab,
.ticket-stage-tab,
.space-stage-tab { min-height: 46px; padding: var(--space-0) var(--space-2); }
    .blueprint-canvas { grid-template-columns: 1fr; }
    .blueprint-node::after { display: none; }
    .topbar-actions { gap: var(--space-1); }
    .icon-button { width: 44px; }
}

@media print {
    .app-topbar,
.app-sidebar,
.topbar-actions,
.page-actions,
.icon-button { display: none; }
    .app-shell { display: block; }
    .app-main { overflow: visible; }
    body { background: white; }
}

/* =============================================================================
   NEW UX v2 -- Hub screens,
exception inbox,
site view
   ============================================================================= */

.app-topbar { box-shadow: var(--elev-1); }
.brand-icon { width: 32px; height: 32px; border-radius: var(--radius-md); }


/* Primary hub nav items */
.nav-primary-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--density-control); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 700; color: var(--c-text-2); cursor: pointer; position: relative; transition: background var(--t), color var(--t); text-align: left; }
.nav-primary-item:hover { background: var(--c-surface-3); color: var(--c-text); }
.nav-primary-item.active { background: var(--c-accent); color: var(--c-chrome-text); }
.nav-primary-icon { width: 28px; height: 28px; display: grid; place-items: center; font-size: calc(var(--type-md) * var(--density-type)); border-radius: var(--radius-sm); flex-shrink: 0; }
.nav-primary-item.active .nav-primary-icon { color: rgba(255,255,255,.85); }

/* =============================================================================
   A+ UX LAYER — tabs, side sheet, motion, KPI strip, table upgrades
   ============================================================================= */

/* ── Motion ──────────────────────────────────────────────────────────────── */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}
#pageContent > * { animation: fadeSlideIn .18s ease both; }
@keyframes skeletonPulse { 0%,
100% { opacity: 1; } 50% { opacity: .45; } }
.skeleton { animation: skeletonPulse 1.6s ease infinite; }

.module-tab-content {
    flex: 1;
    overflow-y: auto;
    background: var(--c-bg);
}
.module-tab-content > .panel,
.module-tab-content > section {
    margin: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: var(--elev-1);
    overflow: hidden;
}

/* ── Module tab bar ──────────────────────────────────────────────────────── */
.module-tab-bar {
    display: flex;
    padding: var(--space-0) var(--space-6);
    border-bottom: 1.5px solid var(--c-border);
    background: var(--c-surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}
.module-tab-bar::-webkit-scrollbar { display: none; }
.module-tab-btn.active { color: var(--c-text); border-bottom-color: var(--c-accent); }
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: var(--space-0) var(--space-1);
    border-radius: var(--radius-md);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 800;
    background: var(--c-surface-3);
    color: var(--c-text-4);
    transition: background 120ms, color 120ms;
}
.module-tab-btn.active .tab-badge { background: var(--c-accent); color: var(--c-chrome-text); }
.tab-badge.red { background: var(--c-danger); color: var(--c-chrome-text); }
.tab-badge.amber { background: var(--c-warning); color: var(--c-chrome-text); }

/* Legacy .module-kpi-strip/.module-kpi-item/.module-kpi-num KPI system removed
   2026-07-21 — superseded by the token-based .fos-kpi-strip + .fos-kpi cards
   (moduleKpiStrip() in app.js). Was unreferenced and its twin below
   fought the fos grid,
leaving a phantom empty card. */

/* ── Detail side sheet ───────────────────────────────────────────────────── */
.detail-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26,27,37,.22);
    z-index: var(--z-sheet-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
}
.detail-sheet-backdrop.open { opacity: 1; pointer-events: all; }
.detail-sheet {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(540px, 100vw);
    background: var(--c-surface);
    box-shadow: var(--elev-3);
    z-index: var(--z-sheet);
    transform: translateX(100%);
    transition: transform 250ms var(--ease-spring);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail-sheet.open { transform: translateX(0); }
.detail-sheet-hdr {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}
.detail-sheet-hdr-body { flex: 1; min-width: 0; }
.detail-sheet-hdr-body h2 { font-size: calc(var(--type-md) * var(--density-type)); font-weight: 800; line-height: 1.2; }
.detail-sheet-hdr-body p { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-3); margin-top: var(--space-1); }
.detail-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.detail-sheet-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--c-border);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* Field grid inside sheet */
.sheet-section-title {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-text-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--c-border-2);
}
.sheet-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
}
.sheet-field-group.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.sheet-field { display: flex; flex-direction: column; gap: var(--space-1); }
.sheet-field.full { grid-column: 1 / -1; }
.sheet-field-label {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text-4);
}
.sheet-field-value {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.4;
}
.sheet-field-value.muted { color: var(--c-text-3); font-weight: 400; }
.sheet-action-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Table breathing room upgrade ────────────────────────────────────────── */
table.records-table,
.panel table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
table.records-table thead th,
.panel table thead th {
    padding: var(--space-3) var(--space-4);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-text-2, var(--c-text-3));
    background: var(--c-surface-2, var(--c-chrome));
    border-bottom: 1.5px solid var(--c-border, rgba(255, 255, 255, 0.08));
    text-align: left;
    white-space: nowrap;
}
table.records-table tbody td,
.panel table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    font-size: 13.5px;
    color: var(--c-text, var(--c-chrome-text));
    vertical-align: middle;
}
table.records-table tbody tr,
.panel table tbody tr {
    transition: background 100ms;
    cursor: pointer;
}
table.records-table tbody tr:hover,
.panel table tbody tr:hover { background: var(--c-surface-3, var(--c-chrome-2)); }
table.records-table tbody tr:last-child td,
.panel table tbody tr:last-child td { border-bottom: 0; }

/* ── Sparkline chip ──────────────────────────────────────────────────────── */
.sparkline-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--c-surface-3);
    border-radius: var(--radius-md);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
}
.sparkline-chip.up { color: var(--c-success); }

/* ── Improved empty state ────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-10);
    color: var(--c-text-2);
    text-align: center;
    font-size: calc(var(--type-base) * var(--density-type));
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1);
    max-width: 480px;
    margin: var(--space-10) auto;
}
.empty-state p { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-3); max-width: 340px; line-height: 1.5; }

/* ── pill-* aliases map to the same status-pill colour tokens ────────────── */
.pill-success {
    background: var(--c-success-weak); color: var(--c-success); border-color: var(--c-border);
}

/* -- Data visualization & chart additions ----------------------------------- */


.analytics-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 680px) { .analytics-panel { grid-template-columns: 1fr; } }
.analytics-chart-block { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4); }
.analytics-chart-title { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--c-text-4); margin-bottom: var(--space-3); }

/* -- Mobile execution redesign ---------------------------------------------- */
.work-dialog-card { max-width: 640px; width: 100%; }
.work-dialog-body { padding: var(--space-0); display: flex; flex-direction: column; gap: var(--space-0); overflow-y: auto; max-height: calc(85vh - 120px); }

.work-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); background: var(--c-surface-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin: var(--space-3) var(--space-4) var(--space-0); }
.work-detail-grid > div { display: flex; flex-direction: column; gap: var(--space-0); }
.work-detail-grid > div > span { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-4); }
.work-detail-grid > div > strong { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 600; color: var(--c-text); }

.execution-section { padding: var(--space-4); border-top: 1px solid var(--c-border-2); }
.execution-section:first-of-type { border-top: none; }
.execution-section h3 { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 800; color: var(--c-text); margin-bottom: var(--space-1); }
.execution-section p { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-3); margin-bottom: var(--space-3); line-height: 1.5; }.execution-section .fos-btn { min-height: 48px; font-size: calc(var(--type-base) * var(--density-type)); width: 100%; justify-content: center; border-radius: var(--radius-md); }

.execution-section.qr-required-callout { background: var(--c-warning); border-left: 4px solid var(--c-warning); }
.execution-section.danger-zone { background: var(--c-danger); border-left: 4px solid var(--c-danger); }
.offline-approval-card { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-3) var(--space-4) var(--space-0); }
.offline-approval-card i { font-size: calc(var(--type-xl) * var(--density-type)); color: var(--c-text-3); flex-shrink: 0; }
.offline-approval-card strong { display: block; font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 800; margin-bottom: var(--space-1); }
.offline-approval-card p { font-size: calc(var(--type-sm) * var(--density-type)); color: var(--c-text-3); margin: var(--space-0); }

.execution-structure-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.execution-structure-tabs .fos-btn { flex: 1; min-height: 44px; justify-content: center; font-size: calc(var(--type-sm) * var(--density-type)); }

.checklist-grid { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.checklist-response { display: flex; flex-direction: column; gap: var(--space-1); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3); }
.checklist-response > span { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-4); }
.checklist-response input,
.checklist-response select,
.checklist-response textarea { font-size: calc(var(--type-base) * var(--density-type)); padding: var(--space-2) var(--space-3); min-height: 44px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text); }
.work-remarks { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.work-remarks > span { font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-4); }
.work-remarks textarea { min-height: 72px; font-size: calc(var(--type-sm) * var(--density-type)); padding: var(--space-2) var(--space-3); border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text); width: 100%; box-sizing: border-box; }

.capture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }

/* ── Design Language v2 — Motion Layer ────────────────────────────────────── */
.work-module-tile,
.analytics-chart-block {
    transition: transform var(--t-spring), box-shadow var(--t);
}

.work-screen,
.reports-screen,
.people-screen,
.now-screen,



@keyframes statusPulse {
    0%,
100% { opacity: 1; }
    50% { opacity: .65; }
}
.badge.pulsing,
.status-badge.pulsing { animation: statusPulse 1.4s ease-in-out infinite; }

/* Custom Styled Checkbox & Radio Controls */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--c-surface);
    margin: var(--space-0);
    font: inherit;
    color: var(--c-accent);
    width: 20px;
    min-height: 20px;
    height: 20px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    display: inline-grid;
    place-content: center;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}
input[type="radio"] {
    border-radius: 50%;
}
input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: currentColor;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked::before {
    transform: scale(1);
}
input[type="checkbox"]:checked {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-accent-text);
}
input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: currentColor;
}
input[type="radio"]:checked::before {
    transform: scale(1);
}
input[type="radio"]:checked {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background-color: var(--c-surface);
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(151, 66, 255, 0.15);
    border-color: var(--c-accent);
}

/* Platform Owner Interface Styling */
.platform-owner-workspace {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6);
    display: grid;
    gap: var(--space-8);
}
.platform-enterprise-create {
    border: 1px solid var(--c-glass-border);
    border-radius: var(--radius-lg);
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--elev-2);
    padding: var(--space-8);
    display: grid;
    gap: var(--space-6);
}
.platform-choice-fieldset {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.platform-choice-fieldset legend {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text-3);
    padding: var(--space-0) var(--space-2);
}
.platform-choice-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-2);
}
.platform-choice-card {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    background: var(--c-surface);
    transition: var(--transition-premium);
    box-shadow: var(--elev-1);
}
/* Grid children stretch by default — keep the submit button its natural size */
.platform-enterprise-create > .fos-btn {
    justify-self: end;
    min-width: 180px;
}
.platform-choice-card:hover {
    border-color: var(--c-accent);
    background: var(--c-surface-3);
}
.platform-choice-card span {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: left;
}
.platform-choice-card strong {
    font-size: calc(var(--type-md) * var(--density-type));
    font-weight: 700;
    color: var(--c-text);
}
.platform-choice-card small {
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-3);
    line-height: 1.4;
}
.platform-queue-section {
    border: 1px solid var(--c-glass-border);
    border-radius: var(--radius-lg);
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--elev-2);
    padding: var(--space-8);
}
.platform-queue-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
}
.platform-enterprise-queue {
    display: grid;
    gap: var(--space-4);
}
.platform-enterprise-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    background: var(--c-surface);
    /* Stacked, not a side-by-side row. The actions used to be icon-only and hover-
       revealed, so a row worked; they are now five LABELLED buttons and in a row they
       consumed most of the width, squeezing the caption into a narrow column whose text
       wrapped straight through the buttons. Copy on top, actions on their own row. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--space-3) * var(--density-space));
    transition: var(--transition-premium);
}
.platform-enterprise-card:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--elev-1);
}
.platform-enterprise-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: left;
    flex: 1;            /* take available width so the name isn't squeezed by the hover-actions */
    min-width: 0;
}
.platform-enterprise-copy div {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;    /* if space is tight, drop the status badge below — never break the name */
}
.platform-enterprise-copy strong {
    font-size: calc(var(--type-md) * var(--density-type));
    color: var(--c-text);
    white-space: nowrap;   /* enterprise name stays on one line ("Titan Logistics", not "Titan / Logistics") */
}

/* ── Accessibility ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
*::before,
*::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* Skip navigation link */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: var(--space-3) var(--space-6);
    background: var(--c-accent);
    color: var(--c-accent-text);
    border-radius: var(--radius-md);
    font-size: calc(var(--type-base) * var(--density-type));
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-nav:focus {
    top: 16px;
}

/* Improved contrast for amber text */
.status-pill.pending,
.status-pill.in_progress,
.status-pill.on_hold,
.status-pill.warning,
.status-pill.pending_approval,
.status-pill.scheduled,
.status-pill.assigned { color: var(--c-warning); }

/* ── Theme toggle button group ─────────────────────────────────────────── */
.theme-toggle-group {
    display: flex;
    gap: var(--space-0);
    padding: var(--space-0);
    background: var(--c-surface-3);
    border-radius: var(--radius-full);
    margin: var(--space-1) var(--space-0);
}
.theme-toggle-btn.active {
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: var(--elev-1);
}
.theme-toggle-btn i {
    font-size: calc(var(--type-base) * var(--density-type));
}

/* ── Navigation search ───────────────────────────────────────────────────── */
.nav-search {
    display: block;
    width: calc(100% - 16px);
    margin: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 24 24'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14ZM21 21l-6-6'/%3E%3C/svg%3E") 10px center no-repeat;
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text);
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
}
.nav-search::placeholder { color: var(--c-text-4); }

/* ── Collapsible more section ───────────────────────────────────────────── */
.nav-more-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-3);
    font-weight: 700;
    padding: var(--space-1) var(--space-4);
    margin-top: var(--space-2);
}
.nav-more-list[hidden] { display: none; }

/* Recently used indicator */
.nav-recent { opacity: 0.85; }

/* ── Checkbox chip groups (replaces native multi-select listboxes) ───────── */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-0);
}
.chip-option,
.dialog-fields label.chip-option,
.form-grid label.chip-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    color: var(--c-text-2);
    background: var(--c-surface);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.chip-option:hover { border-color: var(--c-accent); }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option:has(input:checked) {
    background: var(--c-accent-weak);
    border-color: var(--c-accent);
    color: var(--c-accent);
}
.chip-option:has(input:checked)::before {
    content: '✓';
    font-weight: 800;
}
.chip-group.field-error { outline: 1px solid var(--c-danger); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Compact object summary (e.g. role permissions column) */
.count-pill {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--c-info-weak);
    color: var(--c-info);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    white-space: nowrap;
    cursor: default;
}

/* ── Form validation ─────────────────────────────────────────────────────── */
.field-error {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
label:has(.field-error) span:first-child::after {
    content: ' ⚠';
    color: var(--c-danger);
}
/* Required field indicator */
label:has([required]) > span:first-child::after {
    content: ' *';
    color: var(--c-danger);
    font-weight: 700;
}
/* Unsaved changes indicator */
.dialog-card.has-unsaved-changes footer {
    position: relative;
}
.dialog-card.has-unsaved-changes footer::before {
    content: 'Unsaved changes';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-warning);
    font-weight: 600;
}

/* ── View transitions (F13) ──────────────────────────────────────────────── */
@keyframes viewEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes viewExit {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-8px); }
}
.page-transition-enter {
    animation: viewEnter 0.25s var(--ease-spring) both;
}
.page-transition-exit {
    animation: viewExit 0.15s ease both;
}

/* ── Status pill colorblind accessibility (F5) ───────────────────────────── */
/* Green pills: circle dot (default) — ● */
/* Amber pills: diamond dot — ◆ */
.status-pill.pending::before,
.status-pill.in_progress::before,
.status-pill.on_hold::before,
.status-pill.warning::before,
.status-pill.pending_approval::before,
.status-pill.scheduled::before,
.status-pill.assigned::before {
    border-radius: var(--radius-sm);
    transform: rotate(45deg);
}
/* Red pills: square dot — ■ */
.status-pill.critical::before,
.status-pill.rejected::before,
.status-pill.failed::before,
.status-pill.blocked::before,
.status-pill.overdue::before,
.status-pill.danger::before,
.status-pill.cancelled::before,
.status-pill.denied::before {
    border-radius: var(--radius-sm);
}
/* Blue pills: triangle-ish — ▲ */
.status-pill.info::before,
.status-pill.invited::before,
.status-pill.draft::before,
.status-pill.open::before,
.status-pill.submitted::before {
    width: 0; height: 0;
    background: none;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-bottom: 6px solid currentColor;
    border-radius: 0;
}
/* Grey pills: horizontal bar — ─ */
.status-pill.neutral::before,
.status-pill.checked_out::before,
.status-pill.expired::before,
.status-pill.inactive::before,
.status-pill.missed::before,
.status-pill.locked::before {
    width: 8px;
    height: 2px;
    border-radius: var(--radius-sm);
}

/* ── Side sheet responsive width (F10) ───────────────────────────────────── */
@media (max-width: 600px) {
    .detail-sheet {
        width: 100vw;
    }
    .detail-sheet-hdr {
        padding: var(--space-3) var(--space-4) var(--space-3);
    }
    .detail-sheet-body {
        padding: var(--space-4);
    }
}

/* ── Missing tablet breakpoint (F10) ─────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 920px) {
    .detail-sheet {
        width: min(480px, 85vw);
    }
    .dialog-card {
        width: min(500px, 90vw);
    }
}

/* ── Micro-interactions (F13) ────────────────────────────────────────────── */
.nav-primary-item:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

/* ── Premium Visual Upgrades ── */

/* 1. Custom Checkbox & Radio Card Highlights */
.platform-choice-card:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-weak);
    box-shadow: 0 0 0 1px var(--c-accent);
}

/* 2. Platform Module Details & Grid Styling */
.platform-module-choice {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    padding: var(--space-4);
    margin: var(--space-4) var(--space-0);
    transition: var(--transition-premium);
}
.platform-module-choice[open] {
    box-shadow: var(--elev-1);
}
.platform-module-choice summary {
    font-weight: 700;
    font-size: calc(var(--type-base) * var(--density-type));
    color: var(--c-text);
    cursor: pointer;
    outline: none;
    user-select: none;
    padding: var(--space-1) var(--space-0);
}
.platform-module-choice summary::-webkit-details-marker {
    color: var(--c-accent);
}
.platform-module-choice p {
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-3);
    margin: var(--space-2) var(--space-0) var(--space-4) var(--space-0);
}
.platform-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}
.platform-module-grid label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    cursor: pointer;
    transition: var(--transition-premium);
    user-select: none;
}
.platform-module-grid label:hover {
    border-color: var(--c-accent);
    background: var(--c-surface);
}
.platform-module-grid label:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-weak);
    box-shadow: 0 0 0 1px var(--c-accent);
}
.platform-module-grid label span {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    color: var(--c-text-2);
}

/* 3. Reverted Themed Sidebar (Consistent Premium Aesthetics) */
.app-sidebar {
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    padding: var(--space-3) var(--space-2);
}
.app-sidebar::-webkit-scrollbar {
    width: 6px;
}
.app-sidebar::-webkit-scrollbar-track {
    background: var(--c-surface);
}
.app-sidebar::-webkit-scrollbar-thumb {
    background: var(--c-surface-3);
    border-radius: var(--radius-sm);
}
.app-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--c-border);
}

.nav-primary-item {
    color: var(--c-text-2);
    font-size: 13.5px;
    font-weight: 700;
    min-height: 38px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-primary-item:hover {
    background: var(--c-surface-3);
    color: var(--c-text);
}
.nav-primary-item.active {
    background: var(--c-accent);
    color: var(--c-chrome-text);
}
.nav-primary-item.active .nav-primary-icon {
    color: var(--c-chrome-text);
}
.nav-search::placeholder {
    color: var(--c-text-4);
}
.sidebar-logout {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-danger);
    font-weight: 600;
    min-height: 36px;
    margin-top: auto;
}
.sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.05);
    color: var(--c-danger);
    border-color: var(--c-danger);
}

/* 4. Platform Form Grid (Balanced 2-column layout) */
.platform-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-5);
    padding: var(--space-0);
    margin: var(--space-5) var(--space-0) var(--space-3);
}
@media (max-width: 768px) {
    .platform-form-grid {
        grid-template-columns: 1fr;
    }
}

/* 6. Strategic Redesign Blueprint Custom Styles */

/* Background Mesh Gradients */
.app-main {
    background-color: var(--c-bg);
    background-image:
        radial-gradient(at 0% 0%, var(--c-glass-glow) 0px, transparent 50%),
        radial-gradient(at 100% 0%, var(--c-accent-weak) 0px, transparent 50%);
    background-size: 100% 100%, 100% 100%;
    background-position: center;
    transition: background 0.3s ease;
}

/* Role-Tailored Hub Console */

/* Unified Operational Activity Timeline */

/* SVG Digital Twin Floor Plan */


/* Connected Node Automation Canvas */
.visual-canvas {
    padding: var(--space-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: auto;
}
.canvas-container {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-2);
}
.canvas-node {
    width: 170px;
    padding: var(--space-3);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.01);
    position: relative;
    transition: all 0.2s ease;
    cursor: grab;
}
.canvas-node:hover {
    border-color: var(--c-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.canvas-node-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 800;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.canvas-node-header i {
    color: var(--c-accent);
}
.canvas-node-title {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    color: var(--c-text);
}
.canvas-node-desc {
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-4);
}
.canvas-arrow {
    font-size: calc(var(--type-xl) * var(--density-type));
    color: var(--c-border);
    display: flex;
    align-items: center;
}


/* 5. Sidebar Navigation Sub-Menus */
.nav-sub-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
    padding: var(--space-1) var(--space-2) var(--space-2) var(--space-6);
    position: relative;
}
.nav-sub-menu::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 8px;
    width: 1.5px;
    background: var(--c-border);
    opacity: 0.6;
}
.nav-sub-link.active {
    color: var(--c-info);
    font-weight: 700;
    background: var(--c-accent-weak);
}

/* Single brand identity (Brand Sheet v1.0): all theme-style presets collapse to
   the cobalt accent. The legacy per-enterprise novelty presets were removed so
   every workspace inherits the one brand accent from the base :root tokens. */

/* Platform Owner Onboarding Mobile Optimizations */
@media (max-width: 560px) {
    .platform-owner-workspace {
        padding: var(--space-2);
        gap: var(--space-4);
    }
    .platform-enterprise-create {
        padding: var(--space-4) var(--space-3);
        gap: var(--space-4);
    }
    .platform-choice-fieldset {
        padding: var(--space-3) var(--space-2);
    }
    .platform-choice-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .platform-choice-card {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-2);
    }
    .platform-choice-card strong {
        font-size: 13.5px;
    }
    .platform-choice-card small {
        font-size: calc(var(--type-sm) * var(--density-type));
    }
    .platform-module-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .platform-queue-section {
        padding: var(--space-4) var(--space-3);
    }
    /* Action dialog sizing and padding for better alignment and mobile display */
    .dialog-card {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
    }
    .dialog-fields {
        padding: var(--space-2);
        gap: var(--space-2);
    }
}



/* ============================================================================
   BRAND STRUCTURAL CHROME — OptimaOS Brand Sheet v1.0
   "Slate Navy is structural — sidebars,
headers,
the mark container. Cobalt
   Blue is the single accent for primary actions and active states."
   This layer intentionally sits LAST in the cascade: it replaces the earlier
   light-sidebar treatment (and any preset recolouring of the chrome) with the
   fixed brand identity. Content canvas stays light; chrome is dark navy.
   ============================================================================ */

.app-topbar {
    background: var(--c-chrome);
    border-bottom: 1px solid var(--c-chrome-border);
    box-shadow: none;
}
.app-topbar .topbar-context strong,
.app-topbar #pageTitle { color: var(--c-chrome-text); }
.app-topbar .topbar-context span,
.app-topbar #pageSubtitle { color: var(--c-chrome-text-2); }
.app-topbar .brand-lockup,
.app-topbar .brand-lockup strong,
.app-topbar #enterpriseProductName { color: var(--c-chrome-text); }
.app-topbar .icon-button {
    background: transparent;
    border-color: var(--c-chrome-2);
    color: var(--c-chrome-text-2);
}
.app-topbar .icon-button:hover { background: var(--c-chrome-2); color: var(--c-chrome-text); }
.app-topbar .user-button {
    background: var(--c-chrome-2);
    border-color: var(--c-chrome-2);
}
.app-topbar .user-button strong { color: var(--c-chrome-text); }
.app-topbar .user-button small { color: var(--c-chrome-text-2); }
.app-topbar .connection-state {
    background: rgba(5,150,105,.15);
    border-color: transparent;
}

/* =============================================================================
   OPTIMAOS 5.0 MODERN DUAL-RAIL NAVIGATION & DESIGN SYSTEM OVERRIDES
   ============================================================================= */

/* --- Gradient Mesh Canvas Background --- */
body {
    background: radial-gradient(at 0% 0%, hsla(267, 100%, 63%, 0.04) 0px, transparent 50%),
                radial-gradient(at 50% 0%, rgba(139, 92, 246, 0.04) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.04) 0px, transparent 50%),
                var(--c-bg);
    font-family: var(--font-sans);
}

[data-theme="field"] body {
    background: radial-gradient(at 0% 0%, rgba(79, 163, 155, 0.08) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.08) 0px, transparent 50%),
                var(--c-bg);
}

/* --- Typography overrides --- */
h1,
h2,
h3,
h4,
h5,
h6,
.fos-title {
    font-family: var(--font-display);
    letter-spacing: var(--track-tight);
}

/* --- Glassmorphism Cards & Dialogs --- */
.fos-card,
.dialog-card {
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--c-glass-border);
    box-shadow: var(--elev-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fos-card:hover {
    box-shadow: var(--elev-2);
    transform: translateY(-2px);
}

/* --- Premium Interactive Transitions --- */
.fos-btn {
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fos-btn:hover {
    transform: translateY(-1px);
}
.fos-btn:active {
    transform: translateY(0) scale(0.98);
}

/* --- Dual-Rail Layout Container --- */
.app-sidebar {
    background: var(--c-chrome);
    border-right: 1px solid var(--c-chrome-border);
    padding: var(--space-0);
    overflow: visible;
    display: flex;
    flex-direction: row;
    width: 264px;
    min-height: 0;
    transition: width var(--dur) var(--ease);
}
.app-sidebar.collapsed {
    width: 64px;
}

/* --- Primary Hub Rail --- */
.sidebar-primary {
    width: 64px;
    flex-shrink: 0;
    background: var(--c-chrome);
    border-right: 1px solid var(--c-chrome-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-0);
    height: 100%;
}
.sidebar-primary-hubs {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    align-items: center;
}
.sidebar-primary-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* --- Secondary Navigation Panel (Collapsible) --- */
.sidebar-secondary {
    flex: 1;
    width: 200px;
    min-width: 200px;
    background: var(--c-chrome-2);
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-2);
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity var(--dur) var(--ease), width var(--dur) var(--ease), padding var(--dur) var(--ease), min-width var(--dur) var(--ease);
}
.app-sidebar.collapsed .sidebar-secondary {
    width: 0;
    min-width: 0;
    padding: var(--space-0);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --- Scrollbars --- */
.sidebar-secondary::-webkit-scrollbar {
    width: 5px;
}
.sidebar-secondary::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-secondary::-webkit-scrollbar-thumb {
    background: var(--c-chrome-border);
    border-radius: var(--radius-full);
}
.sidebar-secondary::-webkit-scrollbar-thumb:hover {
    background: var(--c-chrome-text-2);
}

/* --- Navigation Search --- */
.sidebar-secondary .nav-search {
    background: rgba(255, 255, 255, 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a9b8cf' viewBox='0 0 24 24'%3E%3Cpath stroke='%23a9b8cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14ZM21 21l-6-6'/%3E%3C/svg%3E") 10px center no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--c-chrome-text);
    border-radius: var(--radius-md);
    margin: var(--space-1) var(--space-2) var(--space-3);
    height: 36px;
    padding: var(--space-0) var(--space-3) var(--space-0) var(--space-8);
    font-size: calc(var(--type-sm) * var(--density-type));
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sidebar-secondary .nav-search:focus {
    outline: none;
    border-color: var(--c-accent);
    background-color: rgba(255, 255, 255, 0.08);
}
.sidebar-secondary .nav-search::placeholder {
    color: var(--c-chrome-text-2);
}



/* --- Collapsible Accordion Trigger --- */
.sidebar-secondary .nav-more-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
}
.sidebar-secondary .nav-more-toggle:hover {
    color: var(--c-chrome-text);
}

/* --- Secondary Hub Tabs (Sub-menus) --- */
.sidebar-secondary .nav-sub-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
    padding-left: var(--space-3);
    margin-top: var(--space-0);
    border-left: 1px solid var(--c-chrome-border);
    margin-left: var(--space-5);
}
.sidebar-secondary .nav-sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 500;
    color: var(--c-chrome-text-2);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-secondary .nav-sub-link:hover {
    background: var(--c-chrome-2);
    color: var(--c-chrome-text);
}
.sidebar-secondary .nav-sub-link.active {
    background: hsla(267, 100%, 63%, 0.15);
    color: var(--c-accent);
    font-weight: 600;
}
.sidebar-secondary .nav-sub-link .nav-badge {
    margin-left: auto;
    font-size: calc(var(--type-sm) * var(--density-type));
    padding: var(--space-0) var(--space-1);
    border-radius: var(--radius-full);
}

/* --- Logout Button --- */
.sidebar-secondary .sidebar-logout {
    margin-top: auto;
    margin-bottom: var(--space-2);
    width: calc(100% - 16px);
    margin-left: var(--space-2);
    height: var(--density-control);
    border: 1px solid var(--c-chrome-border);
    border-radius: var(--radius-md);
    background: rgba(220, 38, 38, 0.05);
    color: var(--c-danger);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sidebar-secondary .sidebar-logout:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--c-chrome-text);
}

/* --- Primary Hub Link (Icons only) --- */
.sidebar-primary .nav-primary-item {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--space-0);
    min-height: auto;
    border: none;
    background: transparent;
    color: var(--c-chrome-text-2);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-primary .nav-primary-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--c-accent);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease);
}
.sidebar-primary .nav-primary-item.active::before {
    transform: scaleX(1);
}
.sidebar-primary .nav-primary-item.active {
    background: var(--c-accent);
    color: var(--c-chrome-text);
}
.sidebar-primary .nav-primary-item:hover:not(.active) {
    background: var(--c-chrome-2);
    color: var(--c-chrome-text);
    transform: scale(1.05);
}
.sidebar-primary .nav-primary-icon {
    font-size: calc(var(--type-xl) * var(--density-type));
    display: grid;
    place-items: center;
    background: transparent;
    color: inherit;
    width: auto;
    height: auto;
}

/* --- Collapsing Trigger Button --- */
.sidebar-primary-footer .icon-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-chrome-2);
    border: 1px solid var(--c-chrome-border);
    color: var(--c-chrome-text-2);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sidebar-primary-footer .icon-button:hover {
    background: var(--c-accent);
    color: var(--c-chrome-text);
    transform: scale(1.08);
}

/* --- Custom Tooltips --- */
.sidebar-primary .nav-primary-tooltip {
    position: absolute;
    left: 72px;
    background: var(--c-chrome-2);
    color: var(--c-chrome-text);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    z-index: 1000;
    box-shadow: var(--elev-2);
    border: 1px solid var(--c-chrome-border);
}
.sidebar-primary .nav-primary-item:hover .nav-primary-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* --- Responsive Adaptations --- */
@media (max-width: 920px) {
    .app-sidebar {
        position: fixed;
        top: var(--topbar-h);
        bottom: 0;
        left: 0;
        z-index: var(--z-sidebar);
        transform: translateX(-100%);
        width: 264px;
        box-shadow: 4px 0 24px rgba(15,23,42,.35);
        transition: transform var(--dur-slow) var(--ease);
    }
    .app-sidebar.open {
        transform: translateX(0);
    }
    .app-sidebar.collapsed {
        width: 264px;
    }
    .app-sidebar.collapsed .sidebar-secondary {
        width: 200px;
        min-width: 200px;
        opacity: 1;
        pointer-events: auto;
        padding: var(--space-2) var(--space-2);
    }
    #sidebarCollapseButton {
        display: none;
    }
}

/* =============================================================================
   FRAMEWORK REDESIGN OVERRIDES -- Modern Onboarding & Configuration
   ============================================================================= */

/* Platform Workspace Layout */
.platform-owner-workspace {
    font-family: var(--font-body);
    gap: var(--space-8);
    padding: var(--space-8) var(--space-6);
}

/* Onboarding Header Styling — framework heading scale (Aether) */
.platform-owner-title h2 {
    font-family: var(--font-display);
    font-size: calc(var(--type-xl) * var(--density-type));
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-text);
    margin: var(--space-1) var(--space-0) var(--space-2) var(--space-0);
}

.platform-owner-title p {
    color: var(--c-text-3);
    font-size: calc(var(--type-base) * var(--density-type));
    line-height: 1.5;
}

/* Glassmorphism Panel redesign */
.platform-enterprise-create {
    border: 1px solid var(--c-glass-border);
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), var(--elev-2);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
}

/* Choice Fieldset Area */
.platform-choice-fieldset {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    background: hsla(267, 100%, 63%, 0.02); /* Extremely light emerald tint */
}

.platform-choice-fieldset legend {
    font-family: var(--font-display);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-accent);
    padding: var(--space-0) var(--space-3);
}

.platform-choice-row {
    gap: var(--space-5);
}

/* Choice Cards (Invite First / Pre-Configure) */
.platform-choice-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    background: var(--c-surface);
    box-shadow: var(--elev-1);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.platform-choice-card:hover {
    border-color: var(--c-accent);
    background: var(--c-surface-2);
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
}

.platform-choice-card:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-weak);
    box-shadow: 0 0 0 2px var(--c-accent-weak), var(--elev-2);
}

/* Custom modern check circle instead of native radios */
.platform-choice-card input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--c-border-2);
    border-radius: 50%;
    background: var(--c-surface);
    outline: none;
    margin: var(--space-0);
    display: grid;
    place-items: center;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    cursor: pointer;
}

.platform-choice-card input[type="radio"]:checked {
    border-color: var(--c-accent);
    background: var(--c-accent);
}

.platform-choice-card input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-chrome-text);
    transform: scale(0);
    transition: transform var(--dur) var(--ease);
}

.platform-choice-card input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Inputs and Form Fields */
.platform-form-grid {
    gap: var(--space-5);
}

.space-field span {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--c-text-2);
    font-size: calc(var(--type-sm) * var(--density-type));
}

.platform-form-grid input {
    font-family: var(--font-body);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--space-3) var(--space-4);
    font-size: calc(var(--type-base) * var(--density-type));
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.platform-form-grid input:focus {
    border-color: var(--c-accent);
    background: var(--c-surface);
    box-shadow: 0 0 0 3px var(--c-accent-weak), var(--elev-1);
}

/* Form Submit Button Alignment & Styling */
.platform-enterprise-create > .fos-btn {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(var(--type-base) * var(--density-type));
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    background: var(--c-accent);
    color: var(--c-chrome-text);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.platform-enterprise-create > .fos-btn:hover {
    background: var(--c-accent-hover);
    box-shadow: 0 4px 16px var(--c-accent-weak);
    transform: translateY(-1px);
}

/* Enterprise Queue Glass Panel */
.platform-queue-section {
    border: 1px solid var(--c-glass-border);
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), var(--elev-2);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
}

/* Setup Wizard Tab Strip */
.framework-stage-tabs {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: var(--space-0) var(--space-5);
    gap: var(--space-1);
}

.framework-stage-tab::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--c-accent);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease);
}

.framework-stage-tab.active {
    color: var(--c-accent);
}

.framework-stage-tab.active::after {
    transform: scaleX(1);
}

.framework-stage-tab.active .framework-stage-number {
    background: var(--c-accent);
    color: var(--c-chrome-text);
}

/* =============================================================================
   ONBOARDING WELCOME SCREEN OVERRIDES
   ============================================================================= */

.enterprise-first-login {
    max-width: 680px;
    margin: var(--space-10) auto;
    padding: var(--space-10);
    border: 1px solid var(--c-glass-border);
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08), var(--elev-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    text-align: left;
}

.enterprise-first-login .eyebrow {
    font-family: var(--font-display);
    color: var(--c-accent);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--space-0);
}

.enterprise-first-login h1 {
    font-family: var(--font-display);
    font-size: calc(var(--type-3xl) * var(--density-type));
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--c-text);
    margin: var(--space-0);
}

/* Welcome Info Card */
.enterprise-welcome-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.enterprise-welcome-card h2 {
    font-family: var(--font-display);
    font-size: calc(var(--type-lg) * var(--density-type));
    font-weight: 600;
    color: var(--c-text);
    margin: var(--space-0);
}

.enterprise-welcome-card p {
    font-family: var(--font-body);
    font-size: calc(var(--type-base) * var(--density-type));
    line-height: 1.5;
    color: var(--c-text-3);
    margin: var(--space-0);
}

/* Welcome Info Card Success State */
.enterprise-welcome-card.success {
    background: rgba(16, 185, 129, 0.04);
    border-color: var(--c-border);
}
.enterprise-welcome-card.success h2 {
    color: var(--c-success);
}

/* Onboarding Step Timeline Checklist */
.onboarding-step-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-2) var(--space-0);
}

.onboarding-step-list div {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
    box-shadow: var(--elev-1);
}

.onboarding-step-list div:hover {
    transform: translateX(4px);
    border-color: var(--c-accent);
}

/* Number Badges */
.onboarding-step-list span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-accent-weak);
    color: var(--c-accent);
    font-family: var(--font-display);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.onboarding-step-list strong {
    font-family: var(--font-body);
    font-size: calc(var(--type-md) * var(--density-type));
    font-weight: 600;
    color: var(--c-text);
}

/* Onboarding Review Preconfigured list */
.onboarding-review-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (max-width: 580px) {
    .onboarding-review-list {
        grid-template-columns: 1fr;
    }
}

.onboarding-review-list div {
    padding: var(--space-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    box-shadow: var(--elev-1);
}

.onboarding-review-list strong {
    font-family: var(--font-display);
    font-size: calc(var(--type-base) * var(--density-type));
    font-weight: 600;
    color: var(--c-text);
}

/* Action button rows */
.journey-action-row {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.journey-action-row button {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(var(--type-base) * var(--density-type));
    padding: var(--space-3) var(--space-6);
}

/* =============================================================================
   WORKSPACE SETUP WIZARD & BLUEPRINT WORKSPACE COMPLETE REDESIGN
   ============================================================================= */

/* 1. Setup Dialog Glass Card Wrapper */
.setup-dialog-card {
    background: var(--c-glass-bg);
    border: 1px solid var(--c-glass-border);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), var(--elev-3);
    overflow: hidden;
    width: min(720px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 28px));
}

/* 2. Setup Dialog Header styling */
.setup-dialog-card header {
    border-bottom: none;
    padding: var(--space-6) var(--space-6) var(--space-2) var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.setup-dialog-card header .eyebrow {
    font-family: var(--font-display);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-accent);
    margin-bottom: var(--space-1);
}

.setup-dialog-card header h2 {
    font-family: var(--font-display);
    font-size: calc(var(--type-2xl) * var(--density-type));
    font-weight: 700;
    color: var(--c-text);
    margin: var(--space-0);
}

.setup-dialog-card header button.icon-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
    color: var(--c-text-2);
}

.setup-dialog-card header button.icon-button:hover {
    background: var(--c-border);
    transform: rotate(90deg);
    color: var(--c-text);
}

/* 3. Setup Wizard Progress Timeline Grid */
.setup-dialog-progress {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-6) var(--space-4) var(--space-6);
    width: 100%;
}

.setup-dialog-progress span {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--c-border-2);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.setup-dialog-progress span.active {
    background: var(--c-accent);
    box-shadow: 0 0 8px var(--c-accent-weak);
}

.setup-dialog-progress span.complete {
    background: var(--c-accent-hover);
}

/* 4. Wizard Step Body & Forms */
.setup-dialog-body {
    padding: var(--space-4) var(--space-6) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.setup-dialog-body h3 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: calc(var(--type-xl) * var(--density-type));
    font-weight: 700;
    color: var(--c-text);
    margin: var(--space-0);
}

.setup-dialog-body h3 i {
    font-size: calc(var(--type-2xl) * var(--density-type));
    color: var(--c-accent);
    background: var(--c-accent-weak);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.setup-dialog-body p {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--c-text-3);
    margin: var(--space-0);
}

/* Step list text message */
.setup-dialog-body .muted,
.setup-dialog-body p:not(.setup-annotation) {
    font-family: var(--font-body);
    font-size: calc(var(--type-base) * var(--density-type));
    color: var(--c-text-3);
}

/* Step Action Button */
.setup-dialog-body button.fos-btn {
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(var(--type-base) * var(--density-type));
    padding: var(--space-2) var(--space-5);
    background: var(--c-accent);
    color: var(--c-chrome-text);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-1);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.setup-dialog-body button.fos-btn:hover {
    background: var(--c-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--c-accent-weak);
}

/* 5. Setup Dialog Footer Actions */
.setup-dialog-card footer {
    border-top: none;
    padding: var(--space-4) var(--space-6) var(--space-6) var(--space-6);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    background: transparent;
}

.setup-dialog-card footer button {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(var(--type-base) * var(--density-type));
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill); /* Pill shaped buttons */
    transition: all var(--dur) var(--ease);
}

.setup-dialog-card footer .fos-btn {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border);
}

.setup-dialog-card footer .fos-btn:hover {
    background: var(--c-border);
}

.setup-dialog-card footer .fos-btn {
    background: var(--c-accent);
    color: var(--c-chrome-text);
    border: 1px solid transparent;
    box-shadow: var(--elev-1);
}

.setup-dialog-card footer .fos-btn:hover {
    background: var(--c-accent-hover);
    box-shadow: 0 4px 16px var(--c-accent-weak);
    transform: translateY(-1px);
}

.setup-dialog-card footer button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 6. Blueprint Workspace (Background page) */
.blueprint-workspace {
    background: radial-gradient(circle at 12% 18%, hsla(267, 100%, 63%, 0.035) 0%, transparent 45%), var(--c-bg);
}

/* Workspace Banner Header */
.blueprint-hero {
    border-bottom: 1px solid var(--c-border);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: var(--space-6) var(--space-8);
}

.blueprint-hero h2 {
    font-family: var(--font-display);
    font-size: calc(var(--type-2xl) * var(--density-type));
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-text);
    margin: var(--space-0);
}

.blueprint-hero p:not(.eyebrow) {
    color: var(--c-text-3);
    font-size: 14.5px;
    margin-top: var(--space-1);
    line-height: 1.5;
}

/* Workspace Widgets & Meters */
.blueprint-publish-card {
    border: 1px solid var(--c-glass-border);
    border-radius: var(--radius-lg);
    background: var(--c-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: var(--space-5);
    box-shadow: var(--elev-2);
}

.blueprint-publish-card strong {
    font-family: var(--font-display);
    font-size: calc(var(--type-2xl) * var(--density-type));
    font-weight: 700;
    line-height: 1;
    color: var(--c-text);
}

/* Progress track bar */
.setup-progress-track {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--c-border-2);
}

.setup-progress-track span,
.setup-progress-track::after {
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover));
    box-shadow: 0 0 8px var(--c-accent-weak);
}

/* Location Topology List (Geographic Tree) */
.location-tree {
    border: 1px solid var(--c-glass-border);
    background: var(--c-glass-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.location-tree-node {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    margin-bottom: var(--space-2);
    transition: all var(--dur) var(--ease);
    box-shadow: var(--elev-1);
}

.location-tree-node:hover {
    border-color: var(--c-accent);
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
}

.location-tree-node strong {
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-text);
}

.location-tree-node span.muted {
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-3);
}

/* Buttons in workspace */
.blueprint-command .fos-btn,
.blueprint-hero .fos-btn {
    font-family: var(--font-display);
    font-weight: 600;
    background: var(--c-accent);
    color: var(--c-chrome-text);
    border-radius: var(--radius-md);
    transition: all var(--dur) var(--ease);
}

/* 7. Setup Wizard Inner Step Layout & Sub-Cards */
.setup-dialog-step {
    display: flex;
    flex-direction: row;
    gap: var(--space-5);
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--elev-1);
    text-align: left;
}

.setup-dialog-step > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.setup-dialog-step h3 {
    font-family: var(--font-display);
    font-size: calc(var(--type-xl) * var(--density-type));
    font-weight: 700;
    color: var(--c-text);
    margin: var(--space-0);
}

.setup-dialog-step p {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--c-text-3);
    margin: var(--space-0);
}

/* Step Action Buttons (Pill shaped but matching main theme) */
.setup-dialog-step button.fos-btn,
.setup-dialog-step button.fos-btn {
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(var(--type-base) * var(--density-type));
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--dur) var(--ease);
}

.setup-dialog-step button.fos-btn {
    background: var(--c-accent);
    color: var(--c-chrome-text);
    border: 1px solid transparent;
    box-shadow: var(--elev-1);
}

.setup-dialog-step button.fos-btn:hover {
    background: var(--c-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--c-accent-weak);
}

.setup-dialog-step button.fos-btn {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border);
}

.setup-dialog-step button.fos-btn:hover {
    background: var(--c-border);
}

/* 8. Setup Wizard Step Status Note Banner */
.setup-status-note {
    font-family: var(--font-body);
    font-size: 13.5px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.04); /* light red for incomplete */
    color: var(--c-danger);
    border: 1px solid rgba(239, 68, 68, 0.15);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
}

.setup-status-note.complete {
    background: rgba(16, 185, 129, 0.04); /* light green for complete */
    color: var(--c-success);
    border: 1px solid rgba(16, 185, 129, 0.15);
}

/* =============================================================================
   THEMATIC BLUEPRINT DASHBOARD REDESIGN (THE CONTROL CENTRE)
   ============================================================================= */

/* Workspace hero — cosmic-blue statement panel (Aether dual-tone) */
.blueprint-hero {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: hsla(240, 10%, 10%, 0.75);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: var(--space-6) var(--space-8);
}

.blueprint-hero h2 {
    font-family: var(--font-display);
    font-size: calc(var(--type-2xl) * var(--density-type));
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-chrome-text);
    margin: var(--space-0);
}

.blueprint-hero p:not(.eyebrow) {
    color: var(--c-chrome-text-2);
    font-size: 14.5px;
    margin-top: var(--space-1);
    line-height: 1.55;
}

/* 3. Setup Progress Meters and Cards */
.blueprint-publish-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background: hsla(240, 10%, 15%, 0.5);
    padding: var(--space-5) var(--space-6);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.blueprint-publish-card strong {
    font-family: var(--font-display);
    font-size: calc(var(--type-3xl) * var(--density-type));
    font-weight: 700;
    color: var(--c-accent-hover);
    text-shadow: 0 0 12px hsla(267, 100%, 63%, 0.25);
    line-height: 1;
}

.blueprint-publish-card span {
    color: var(--c-chrome-text-2);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 4. Core Layout Cards & Panes */
.framework-stage-card,
.framework-hierarchy-card,
.framework-scope-card,
.framework-golive-header {
    background: hsla(240, 10%, 15%, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    padding: var(--space-6);
    margin-top: var(--space-4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.framework-stage-card h3,
.framework-hierarchy-card h2,
.framework-scope-card h3 {
    font-family: var(--font-display);
    color: var(--c-chrome-text);
    font-size: calc(var(--type-lg) * var(--density-type));
    font-weight: 600;
    margin-bottom: var(--space-3);
}

/* Info Callout Banners */
.framework-applications-callout {
    background: hsla(267, 100%, 63%, 0.08);
    color: var(--c-accent);
    border: 1px solid hsla(267, 100%, 63%, 0.2);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

/* Active Step Banner Notice */
.framework-step-complete-banner {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-left: 4px solid var(--c-success);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    color: var(--c-success);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
}

.framework-step-complete-banner span {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(var(--type-md) * var(--density-type));
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* 5. Inputs and Tables */
.blueprint-workspace .fos-input,
.blueprint-workspace input[type="text"] {
    background: hsla(240, 10%, 10%, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--c-chrome-text);
    border-radius: var(--radius-md);
    padding: var(--space-0) var(--space-4);
    transition: all var(--dur) var(--ease);
}

.blueprint-workspace .fos-input:focus,
.blueprint-workspace input[type="text"]:focus {
    border-color: var(--c-accent);
    background: hsla(240, 10%, 10%, 0.8);
    box-shadow: 0 0 0 3px hsla(267, 100%, 63%, 0.3);
}

.blueprint-workspace .fos-table th {
    background: hsla(240, 10%, 15%, 0.7);
    color: var(--c-chrome-text);
    font-weight: 600;
    font-family: var(--font-display);
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-3) var(--space-4);
}

.blueprint-workspace .fos-table td {
    padding: var(--space-3) var(--space-4);
    color: var(--c-border);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.blueprint-workspace .fos-table tr:hover td {
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-chrome-text);
}

/* 6. Connection Lines & Nested Diagram for Location tree */
.location-tree {
    background: hsla(240, 10%, 10%, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    position: relative;
}

.location-tree-branch {
    position: relative;
}

/* Container for nested child nodes to anchor track line */
.location-tree-children {
    margin-left: var(--space-5);
    padding-left: var(--space-6);
    border-left: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    position: relative;
    overflow: hidden;
    transition: max-height var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1)),
                opacity var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1)),
                margin-top var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1)),
                margin-bottom var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1)),
                padding-top var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1)),
                padding-bottom var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1));
}

/* Collapsed state with zero heights and hidden properties */
.location-tree-children.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: var(--space-0);
    margin-bottom: var(--space-0);
    padding-top: var(--space-0);
    padding-bottom: var(--space-0);
    border-left-color: transparent;
    pointer-events: none;
}

/* Horizontal node wire connectors for nested items */
.location-tree-children::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 0;
    width: 20px;
    height: 1px;
    border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
}

/* Chevron indicator rotation styles */
.location-tree-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: var(--space-2);
    color: var(--c-text-3, var(--c-text-3));
    cursor: pointer;
    transition: transform var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1));
}
.location-tree-chevron.expanded {
    transform: rotate(90deg);
}

/* Location Node Cards */
.location-tree-node {
    position: relative;
    background: hsla(240, 10%, 15%, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--c-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    transition: all var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1));
}

/* Dedicated active selection state marker */
.location-tree-node.active-selection {
    border-left-color: var(--c-accent, var(--c-info));
    background: var(--c-accent-weak, rgba(47, 111, 106, 0.15));
    box-shadow: 0 0 0 1px var(--c-accent, var(--c-info)), 0 4px 12px rgba(47, 111, 106, 0.15);
}

.location-tree-node:hover {
    border-color: hsla(267, 100%, 63%, 0.4);
    border-left-color: var(--c-accent);
    background: hsla(240, 10%, 15%, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px hsla(267, 100%, 63%, 0.18);
}

.location-tree-node strong {
    color: var(--c-chrome-text);
    font-size: calc(var(--type-md) * var(--density-type));
}

.location-tree-node span {
    color: var(--c-chrome-text-2);
    font-size: calc(var(--type-sm) * var(--density-type));
}

.location-tree-node .status-pill {
    background: rgba(16, 185, 129, 0.1);
    color: var(--c-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* 7. Action Button Overrides inside workspace */
.framework-stage-card button.fos-btn,
.framework-stage-card button,
.framework-hierarchy-card button {
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13.5px;
    padding: var(--space-2) var(--space-5);
    transition: all var(--dur) var(--ease);
}

.framework-stage-card .fos-btn,
.framework-hierarchy-card .fos-btn {
    background: var(--c-accent);
    color: var(--c-chrome-text);
    box-shadow: var(--elev-1);
    border: 1px solid transparent;
}

.framework-stage-card .fos-btn:hover,
.framework-hierarchy-card .fos-btn:hover {
    background: var(--c-accent-hover);
    box-shadow: 0 6px 20px hsla(267, 100%, 63%, 0.5);
    transform: translateY(-1.5px);
}

.framework-stage-card .fos-btn,
.framework-hierarchy-card .fos-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--c-border);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.framework-stage-card .fos-btn:hover,
.framework-hierarchy-card .fos-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--c-chrome-text);
}

/* Bulk Delete Outlined Danger Button */
.framework-hierarchy-card button[style*="color: var(--c-danger)"],
.framework-hierarchy-card button[class*="danger"] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--c-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.framework-hierarchy-card button[style*="color: var(--c-danger)"]:hover,
.framework-hierarchy-card button[class*="danger"]:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--c-danger);
    border-color: rgba(239, 68, 68, 0.35);
}

/* Pane footer buttons */
.framework-stage-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-6);
    background: hsla(240, 10%, 10%, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
}

.framework-stage-footer button.fos-btn {
    background: var(--c-accent);
    color: var(--c-chrome-text);
    box-shadow: 0 4px 14px hsla(267, 100%, 63%, 0.3);
    border: none;
}

.framework-stage-footer button.fos-btn:hover {
    background: var(--c-accent-hover);
    box-shadow: 0 6px 18px hsla(267, 100%, 63%, 0.5);
    transform: translateY(-1.5px);
}

.framework-stage-footer button.fos-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--c-border);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.framework-stage-footer button.fos-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--c-chrome-text);
}

/* 8. Sidebar Sub-Menu & Grid Overrides to prevent text cut-off */
:root {
    --sidebar-w: 324px;
}

/* Dynamically adjust the main grid columns when the sidebar collapses */
.app-shell:has(.app-sidebar.collapsed) {
    grid-template-columns: 64px minmax(0, 1fr);
}

.sidebar-secondary .nav-sub-menu {
    padding-left: var(--space-3);
    padding-right: var(--space-1);
    width: calc(100% - 8px);
}

.sidebar-secondary .nav-sub-menu::before {
    left: 6px;
}

.sidebar-secondary .nav-sub-link {
    padding: var(--space-0) var(--space-2);
    font-size: calc(var(--type-sm) * var(--density-type));
    gap: var(--space-1);
    width: 100%;
}

.sidebar-secondary .nav-sub-link .nav-badge {
    margin-left: auto;
    flex-shrink: 0;
}

/* Polished Space Management Workspace and Forms */
.space-blueprint-workspace {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.space-blueprint-form {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border-2);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 640px;
    margin: var(--space-4) var(--space-0);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    transition: all 0.2s ease;
}

.space-blueprint-form:hover {
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}

.space-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
}

.space-field {
    gap: var(--space-2);
}

.space-field span {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    color: var(--c-text-2);
}

.space-blueprint-form .fos-btn {
    align-self: flex-start;
    margin-top: var(--space-3);
    height: 42px;
    padding: var(--space-0) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
}

.space-stage-heading {
    padding: var(--space-0) var(--space-0) var(--space-4) var(--space-0);
    border-bottom: 1.5px solid var(--c-border-2);
    background: transparent;
}

.space-stage-heading h2 {
    font-size: calc(var(--type-xl) * var(--density-type));
    font-weight: 700;
    color: var(--c-text);
    margin-top: var(--space-1);
}

.space-stage-tabs {
    border-bottom: 1.5px solid var(--c-border);
    margin-bottom: var(--space-4);
}

.space-records-details summary {
    font-weight: 600;
    cursor: pointer;
    outline: 0;
    color: var(--c-text);
}

.space-records-details .panel-grid {
    margin-top: var(--space-4);
}

/* Sidebar Collapsible Categories */
.nav-category-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 16px);
    margin: var(--space-2) var(--space-2) var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--c-chrome-text-2);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: 0;
}

.nav-category-toggle.active {
    color: var(--c-chrome-text);
}

/* Permit status spine */
.permit-status-spine {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--c-surface-2);
    border: 1.5px solid var(--c-border-2);
    border-radius: var(--radius-md);
    margin: var(--space-4) var(--space-0);
    align-items: center;
}

.permit-status-spine span {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-3);
    transition: all 0.2s ease;
}

.permit-status-spine span.active {
    background: var(--c-accent-weak);
    border-color: var(--c-accent);
    color: var(--c-accent);
    box-shadow: 0 0 0 3px hsla(267, 100%, 63%, 0.1);
}

.permit-status-spine span.done {
    background: var(--c-success-weak);
    border-color: var(--c-success);
    color: var(--c-success);
}






/* ── Master Framework redesign — Aether Nav design language ─────────────────
   Structure/motion/glass from the Aether Nav spec; accent bound to the
   enterprise brand variable so tenant branding keeps working. */
:root {
    /* Spring easings are defined in optimaos-tokens.css; only the accent binding is local. */
    --fw-accent: var(--brand-primary, var(--c-accent));
}

/* Pre-activation waiting screen (non-privileged users) */
.setup-waiting-screen { text-align: center; align-items: center; }
.setup-waiting-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--c-glass-border);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
    color: var(--c-text-3);
    font-size: calc(var(--type-sm) * var(--density-type));
}
.setup-waiting-hint i { color: var(--fw-accent); }

/* Logical-flow stepper (Overview tab) */
.setup-flow-stepper {
    list-style: none;
    margin: var(--space-0);
    counter-reset: none;
}
.setup-flow-item { display: contents; }
.setup-flow-step {
    width: 100%;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-snappy), border-color var(--dur) var(--ease-snappy);
}
.setup-flow-step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), transparent);
    pointer-events: none;
}
.setup-flow-step:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: var(--elev-2);
    border-color: var(--fw-accent);
}
.setup-flow-index {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    background: var(--c-surface-2);
    color: var(--c-text-3);
    border: 1px solid var(--c-border);
}
.setup-flow-step.complete .setup-flow-index { background: var(--c-success-weak); color: var(--c-success); border-color: var(--c-border); }
.setup-flow-optional-pill {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-0) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    color: var(--c-text-4);
    border: 1px solid var(--c-border);
}
.setup-flow-step.optional { border-style: dashed; }

/* Operational rollout checklist */
.operational-checklist { margin-top: var(--space-1); }
.operational-checklist summary {
    cursor: pointer;
    font-weight: 600;
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    transition: border-color var(--dur) var(--ease-snappy);
}
.operational-checklist summary:hover { border-color: var(--fw-accent); }
.operational-checklist[open] summary { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.operational-checklist .setup-step-grid {
    border: 1px solid var(--c-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--c-surface);
}

/* Identity & Branding summary card */
.identity-summary-card { display: grid; gap: var(--space-4); }
.identity-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.identity-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}
.identity-summary-fact {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent), var(--c-surface-2);
}
.identity-summary-fact small { color: var(--c-text-4); text-transform: uppercase; letter-spacing: 0.05em; font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 600; }
.identity-color-row { display: inline-flex; align-items: center; gap: var(--space-2); }
.identity-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    background: var(--swatch, var(--fw-accent));
    border: 1px solid var(--c-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.identity-logo-preview { max-height: 36px; max-width: 140px; object-fit: contain; }

/* Platform-owner lifecycle pipeline */
.platform-pipeline { display: grid; gap: var(--space-4); }
.platform-pipeline-group {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    overflow: hidden;
}
.platform-pipeline-group > .platform-pipeline-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent), var(--c-surface-2);
    border-bottom: 1px solid var(--c-border-2);
}
.platform-pipeline-group h3 { font-size: calc(var(--type-sm) * var(--density-type)); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-3); }
.platform-pipeline-group .platform-enterprise-queue { padding: var(--space-3); display: grid; gap: var(--space-2); }
.platform-create-screen { max-width: 860px; }

/* Framework tab heading actions (bulk tools row) */
.framework-heading-actions {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
}
.framework-heading-actions .fos-btn.danger { color: var(--c-danger); border-color: var(--c-danger); }

@media (max-width: 900px) {
    .setup-flow-stepper { grid-template-columns: 1fr; }
    .identity-summary-head { flex-direction: column; }
}

/* ── Aether Nav Custom Overrides ── */

/* 1. Global Shell & Canvas */
.app-sidebar,
.sidebar-secondary {
    background: var(--c-surface);
    backdrop-filter: blur(24px);
    border-right: 1px solid var(--c-border);
}

/* 2. Glassmorphic Cards,
Dialogs,
Tables,
Lists & Framework Panels */
.fos-card,
.dialog-card,
.table-wrap,
.framework-stage-card,
.framework-hierarchy-card,
.framework-scope-card,
.framework-applications-callout,
.framework-golive-header,
.framework-module-card,
.framework-global-root,
.framework-vendor-registration,
.setup-waiting-screen,
.platform-pipeline-group,
.framework-heading-actions,
.identity-summary-fact {
    position: relative;
    background: var(--c-surface);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* Double-layered top highlight to simulate light falling on glass */
.fos-card::before,
.dialog-card::before,
.role-console-card::before,
.timeline-card::before,
.table-wrap::before,
.framework-stage-card::before,
.framework-hierarchy-card::before,
.framework-scope-card::before,
.framework-step-complete-banner::before,
.framework-applications-callout::before,
.framework-golive-header::before,
.framework-module-card::before,
.framework-global-root::before,
.framework-vendor-registration::before,
.setup-waiting-screen::before,
.platform-pipeline-group::before,
.framework-heading-actions::before,
.identity-summary-fact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
    z-index: 10;
}

/* Backdrop blur for modals */
dialog::backdrop {
    background: rgba(10, 10, 12, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 3. Floating Glass KPI Strip — removed 2026-07-21 (dead .module-kpi-strip;
   the panel is what left the phantom empty card behind fos cards). */

/* 4. Tables with Soft Rows & Headers */
.data-table th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--c-text-2);
    font-weight: 700;
    border-bottom: 1px solid var(--c-border);
}
.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}
.data-table td {
    border-bottom: 1px solid var(--c-border);
}

/* 5. Aether Interactive Buttons */
/* Primary Buttons */
.fos-btn,
.btn-primary {
    background: var(--c-accent);
    color: var(--c-accent-text);
    border: 1.5px solid var(--c-accent);
    box-shadow: 0 4px 12px var(--c-accent-weak);
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn-primary:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
    box-shadow: 0 6px 18px var(--c-accent-weak);
    transform: translateY(-1px);
}

/* Secondary Actions / Control Panel & Row Actions */
.fos-btn,
.table-action,
.btn-secondary {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: none;
}
.table-action:hover,
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--c-accent);
    color: var(--c-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--c-accent-weak);
}

/* 6. Form Inputs & Selects — surface follows the (context-aware) token,
so inputs are
   light on light screens and cohesively dark inside the dark dialog (which remaps
   --c-surface),
instead of a hardcoded translucent-black that fought .fos-input. */
input,
select,
textarea {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}
.fos-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px var(--c-accent-weak);
    outline: none;
}

/* 7. Brand Icons & Marks Recolor */
.brand-icon svg rect:first-child,
.brand-mark rect:first-child,
.footer-mark rect:first-child {
    fill: var(--c-accent);
}
.brand-icon svg path,
.brand-mark path,
.footer-mark path {
    fill: var(--c-accent);
}

/* 8. Aether Nav Interactive Archetypes Styling */

/* Ambient Glows */
.ambient-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -1;
    opacity: 0.35;
    pointer-events: none;
}
.glow-1 {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, var(--c-accent-weak) 0%, transparent 70%);
    top: -20vh;
    right: -10vw;
}
.glow-2 {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, var(--c-highlight-weak) 0%, transparent 70%);
    bottom: -10vh;
    left: -10vw;
}
.glow-3 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, var(--c-accent-weak) 0%, transparent 75%);
    opacity: 0.4;
    top: 40vh;
    left: 30vw;
}

/* Topbar search trigger button */
.topbar-search-btn {
    min-height: 32px;
    padding: var(--space-0) var(--space-3);
    font-size: calc(var(--type-sm) * var(--density-type));
    border-radius: var(--radius-sm);
    gap: var(--space-1);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
}
.topbar-search-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--c-accent);
    color: var(--c-text);
    box-shadow: 0 4px 12px var(--c-accent-weak);
}
.topbar-search-btn kbd {
    font-family: var(--font-mono);
    font-size: calc(var(--type-sm) * var(--density-type));
    background: rgba(255, 255, 255, 0.08);
    padding: var(--space-0) var(--space-1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text-3);
    margin-left: var(--space-1);
}

/* Draggable Sidebar Resizer Divider */
.sidebar-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 1000;
    background: transparent;
    transition: background 0.2s;
}
.sidebar-resizer:hover,
.sidebar-resizer.active {
    background: var(--c-accent);
}

/* Elastic Mega-Menu (Stripe Dropdown) */
.topbar-mega-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: var(--space-6);
}
.mega-tab {
    background: transparent;
    border: none;
    color: var(--c-text-2);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: calc(var(--type-sm) * var(--density-type));
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
}
.mega-tab:hover {
    color: var(--c-text);
    background: rgba(255, 255, 255, 0.04);
}
.mega-dropdown-panel {
    position: absolute;
    top: calc(var(--topbar-h) - 4px);
    left: 0;
    background: var(--c-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 2000;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform-origin: top center;
    transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1), 
                height 0.3s cubic-bezier(0.19, 1, 0.22, 1), 
                transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), 
                opacity 0.2s ease;
}
.mega-dropdown-panel.open {
    opacity: 1;
    pointer-events: auto;
}
.mega-dropdown-arrow {
    position: absolute;
    top: -6px;
    width: 12px;
    height: 12px;
    background: var(--c-surface);
    border-left: 1px solid var(--c-border);
    border-top: 1px solid var(--c-border);
    transform: rotate(45deg);
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 2001;
}
.mega-panel-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
.mega-panel-content {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--space-6);
    width: max-content;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.mega-panel-content.active {
    opacity: 1;
    pointer-events: auto;
}
.mega-panel-content h3 {
    font-size: calc(var(--type-sm) * var(--density-type));
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-3);
    margin-bottom: var(--space-3);
}
.mega-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    gap: var(--space-2);
    list-style: none;
    padding: var(--space-0);
    margin: var(--space-0);
}
.mega-links-grid li a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-text);
    text-decoration: none;
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 500;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
}
.mega-links-grid li a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-accent);
}
.mega-links-grid li a i {
    font-size: calc(var(--type-md) * var(--density-type));
    color: var(--c-accent);
}

/* Spotlight Command Palette */
.aether-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 12, 0.45);
    /* Aether Nav archetype C: blur(16px) background mask at 15vh */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 3000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.aether-palette-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.aether-palette-card {
    width: 100%;
    max-width: 600px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
}
.aether-palette-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
    z-index: 10;
}
.aether-palette-backdrop.open .aether-palette-card {
    transform: translateY(0);
}
.palette-search-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--c-border);
}
.palette-search-box svg {
    color: var(--c-text-3);
}
.palette-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: calc(var(--type-md) * var(--density-type));
    padding: var(--space-0);
}
.palette-search-box input:focus {
    outline: none;
}
.palette-items-list {
    max-height: 330px;
    overflow-y: auto;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
}
.cmd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--c-text-2);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: calc(var(--type-sm) * var(--density-type));
    transition: background 0.15s, color 0.15s;
    text-align: left;
}
.cmd-item-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.cmd-item-info i {
    font-size: calc(var(--type-md) * var(--density-type));
    color: var(--c-text-3);
    transition: color 0.15s;
}
.cmd-item:hover,
.cmd-item.focused {
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-text);
    outline: none;
}
.cmd-item:hover .cmd-item-info i,
.cmd-item.focused .cmd-item-info i {
    color: var(--c-accent);
}
.cmd-shortcut {
    font-family: var(--font-mono);
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-3);
    background: rgba(255, 255, 255, 0.04);
    padding: var(--space-0) var(--space-1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.02);
}
.palette-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--c-border);
    background: rgba(0, 0, 0, 0.1);
}
.palette-stats {
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-3);
    font-weight: 500;
}
.palette-shortcuts-guide {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-3);
}
.palette-shortcuts-guide kbd {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.06);
    padding: var(--space-0) var(--space-1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Radial Arc Menu FAB */
.radial-menu-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    z-index: 2500;
    pointer-events: none;
}
.radial-menu-wrapper * {
    pointer-events: auto;
}
.radial-trigger-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-accent);
    border: none;
    color: var(--c-chrome-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--type-xl) * var(--density-type));
    cursor: pointer;
    box-shadow: 0 8px 24px var(--c-accent-weak);
    z-index: 2502;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.radial-menu-wrapper.expanded .radial-trigger-btn {
    transform: rotate(135deg);
}
.radial-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--type-md) * var(--density-type));
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 2501;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.radial-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/* Dynamic Floating Dock */
.aether-dock-wrapper {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
}
.aether-dock {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg); /* follows each theme's radius scale */
    background: var(--c-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--c-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    transform-origin: bottom center;
    height: 52px;
}
.dock-item {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.02);
    color: var(--c-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--type-md) * var(--density-type));
    cursor: pointer;
    transform-origin: bottom center;
    transition: transform 0.15s ease, background 0.15s, color 0.15s;
}
.dock-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-accent);
}
.dock-dot {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-accent);
    opacity: 0;
    transition: opacity 0.2s;
}
.dock-item:hover .dock-dot {
    opacity: 1;
}



/* New Enterprise — Aether glass choice cards + form polish */
.platform-choice-fieldset {
    border: 0;
    padding: var(--space-0);
    margin: var(--space-0);
}
.platform-choice-fieldset legend {
    color: var(--fw-accent);
    padding: var(--space-0);
    margin-bottom: var(--space-1);
}
.platform-choice-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-snappy), border-color var(--dur) var(--ease-snappy), background var(--dur) var(--ease-snappy);
}
.platform-choice-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), transparent);
    pointer-events: none;
}
.platform-choice-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-2);
}
.platform-choice-card:has(input:checked) {
    border-color: var(--fw-accent);
    background: var(--c-accent-weak);
    box-shadow: 0 0 0 3px var(--c-accent-weak), var(--elev-1);
}
.platform-form-grid label span { color: var(--c-text-3); font-size: calc(var(--type-sm) * var(--density-type)); font-weight: 600; }

/* Topbar layout fixes — brand must never collapse under the mega-tabs */
.app-topbar .brand-lockup.compact { flex: 0 0 auto; min-width: max-content; }
.topbar-mega-tabs { min-width: 0; overflow: hidden; flex: 0 1 auto; }
@media (max-width: 1080px) {
    .topbar-mega-tabs { display: none; }
}
/* Keep the floating dock from covering the last rows of content */
#pageContent { padding-bottom: var(--space-12); }

/* Command palette — group titles + ESC badge (Aether spec fidelity) */
.cmd-group-title {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-3);
}
.cmd-esc-badge {
    flex: 0 0 auto;
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-2);
    color: var(--c-text-3);
    background: var(--c-surface-2);
}

/* ── Shell spacing & dock behaviour (Aether: floating panels,
breathing room) ──
   A consistent gutter between the sidebar/viewport and every page's content,
so no screen renders flush against the chrome or clips left-rail markers. */
.app-main { padding: var(--space-4) var(--space-6) var(--space-0) var(--space-6); }
@media (max-width: 880px) { .app-main { padding: var(--space-2) var(--space-3) var(--space-0) var(--space-3); } }

/* Dock auto-hides while scrolling down so it never sits on top of content
   the user is reading; it springs back on scroll-up or when idle. */
.aether-dock-wrapper {
    transition: transform 0.35s var(--ease-snappy), opacity 0.35s var(--ease-snappy);
}
.aether-dock-wrapper.dock-hidden {
    transform: translateX(-50%) translateY(140%);
    opacity: 0;
    pointer-events: none;
}

/* 9. Dual-Rail Sidebar layout override */
.app-sidebar {
    display: flex;
    flex-direction: row;
    width: var(--sidebar-w, 264px);
    background: var(--c-surface);
    backdrop-filter: blur(24px);
    border-right: 1px solid var(--c-border);
    padding: var(--space-0);
}
.app-sidebar.collapsed {
    width: 64px;
}
.sidebar-primary {
    display: flex;
    flex-direction: column;
    width: 64px;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
}
.sidebar-secondary {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    border-left: none;
    background: transparent;
}
.app-sidebar.collapsed .sidebar-secondary {
    display: none;
}


.sidebar-secondary .nav-sub-link.active,
.app-sidebar .nav-sub-link.active {
    background: var(--c-accent-weak);
    color: var(--c-accent);
    font-weight: 700;
    border-left: 3px solid var(--c-accent);
    padding-left: var(--space-3);
}

/* Topbar Text & Icon Readability in Light/Dark Modes */
.app-topbar .topbar-context strong,
.app-topbar #pageTitle {
    color: var(--c-text);
}
.app-topbar .topbar-context span,
.app-topbar #pageSubtitle {
    color: var(--c-text-3);
}
.app-topbar .brand-lockup,
.app-topbar .brand-lockup strong,
.app-topbar #enterpriseProductName {
    color: var(--c-text);
}
.app-topbar .icon-button {
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
}
.app-topbar .icon-button:hover {
    background: var(--c-surface-3);
    color: var(--c-text);
}
.app-topbar .user-button {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
}
.app-topbar .user-button strong {
    color: var(--c-text);
}
.app-topbar .user-button small {
    color: var(--c-text-3);
}


/* 10. Design Style Switcher UI Styling & Overlap Fixes */
.user-dropdown {
    width: 280px;
    padding: var(--space-3);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: var(--glass-blur);
}
.user-dropdown-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-1) var(--space-3) var(--space-1);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--space-2);
    overflow: hidden;
}
.user-dropdown-info strong {
    font-size: calc(var(--type-base) * var(--density-type));
    color: var(--c-text);
    font-weight: 700;
}
.user-dropdown-info span {
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-3);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.user-dropdown-info small {
    font-size: calc(var(--type-sm) * var(--density-type));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-accent);
    font-weight: 700;
    margin-top: var(--space-0);
}
.theme-toggle-btn.active {
    background: var(--c-surface);
    color: var(--c-accent);
    box-shadow: var(--elev-1);
}
.style-selector-btn {
    padding: var(--space-2) var(--space-1);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 600;
    color: var(--c-text-2);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.style-selector-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-text);
}
.style-selector-btn.active {
    background: var(--c-accent);
    color: var(--c-accent-text);
    border-color: var(--c-accent);
}

/* User Account Button Fixes */
.user-button {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text);
    min-height: 38px;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    transition: all 0.2s ease;
}
.user-button:hover {
    background: var(--c-surface-2);
    border-color: var(--c-border-2);
}
#userInitials {
    border-radius: var(--radius-sm);
    background: var(--c-accent);
    color: var(--c-accent-text);
    font-family: var(--font-mono);
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
}
.user-button strong {
    color: var(--c-text);
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.2;
}
.user-button small {
    color: var(--c-text-3);
    font-family: var(--font-sans);
    font-size: calc(var(--type-sm) * var(--density-type));
    line-height: 1.2;
}


/* 11. General UX Compliance to Aether Nav Design language */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-family: var(--font-sans);
    padding: var(--space-2) var(--space-3);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px var(--c-accent-weak);
}

.btn,
.fos-btn {
    font-family: var(--font-sans);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all 0.2s var(--ease-snappy);
}
.btn-primary {
    background: var(--c-accent);
    color: var(--c-accent-text);
    border: 1px solid var(--c-accent);
}
.btn-primary:hover {
    background: var(--c-accent-hover);
    box-shadow: 0 0 12px var(--c-accent-weak);
}
.btn-secondary {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border);
}
.btn-secondary:hover {
    background: var(--c-surface-3);
    border-color: var(--c-border-2);
}

.sidebar-secondary .nav-group-title,
.app-sidebar .nav-group-title {
    font-size: calc(var(--type-sm) * var(--density-type));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-1);
    padding-left: var(--space-2);
}

/* ============================================================================
   Structural Override Rules for the 3 Distinct Design Languages
   ============================================================================ */

/* AETHER: Systemic Generous Rounded Corners (No Sharp Edges) */
html[data-theme-style="aether"] .ambient-glow,
:root:not([data-theme-style]) .ambient-glow { display: block; }
html[data-theme-style="aether"] .aether-dock-wrapper,
:root:not([data-theme-style]) .aether-dock-wrapper { display: flex; }
html[data-theme-style="aether"] .radial-menu-wrapper,
:root:not([data-theme-style]) .radial-menu-wrapper { display: block; }

html[data-theme-style="aether"] *:not(.legend-dot):not(.status-indicator),
:root:not([data-theme-style]) *:not(.legend-dot):not(.status-indicator) {
    border-radius: var(--radius-md);
}
html[data-theme-style="aether"] *:not(i):not([class^="ti-"]):not([class*=" ti-"]),
:root:not([data-theme-style]) *:not(i):not([class^="ti-"]):not([class*=" ti-"]) {
    font-family: 'Outfit', sans-serif;
}
html[data-theme-style="aether"] .aether-palette-card,
html[data-theme-style="aether"] .aether-dock,
html[data-theme-style="aether"] .fos-card,
html[data-theme-style="aether"] .dialog-card,
html[data-theme-style="aether"] .role-console-card,
html[data-theme-style="aether"] .timeline-card,
html[data-theme-style="aether"] .table-wrap,
html[data-theme-style="aether"] .blueprint-node,
html[data-theme-style="aether"] .blueprint-command,
html[data-theme-style="aether"] .blueprint-hero,
html[data-theme-style="aether"] .framework-stage-card,
html[data-theme-style="aether"] .framework-hierarchy-card,
html[data-theme-style="aether"] .framework-scope-card,
html[data-theme-style="aether"] .framework-module-card,
html[data-theme-style="aether"] .framework-global-root,
html[data-theme-style="aether"] .framework-vendor-registration,
html[data-theme-style="aether"] .visitor-badge,
html[data-theme-style="aether"] .permit-badge,
html[data-theme-style="aether"] .form-section,
html[data-theme-style="aether"] .kpi-card,
html[data-theme-style="aether"] .report-summary-hero,
html[data-theme-style="aether"] .report-summary-metric,
html[data-theme-style="aether"] .parking-capacity-banner,
html[data-theme-style="aether"] .parking-bay,
html[data-theme-style="aether"] .setting-choice-card,
html[data-theme-style="aether"] .panel,
html[data-theme-style="aether"] .card,
html[data-theme-style="aether"] .app-topbar,
html[data-theme-style="aether"] .app-sidebar,
html[data-theme-style="aether"] .sidebar-primary,
html[data-theme-style="aether"] .sidebar-secondary,
:root:not([data-theme-style]) .aether-palette-card,
:root:not([data-theme-style]) .aether-dock,
:root:not([data-theme-style]) .fos-card,
:root:not([data-theme-style]) .dialog-card,
:root:not([data-theme-style]) .role-console-card,
:root:not([data-theme-style]) .timeline-card,
:root:not([data-theme-style]) .table-wrap,
:root:not([data-theme-style]) .blueprint-node,
:root:not([data-theme-style]) .blueprint-command,
:root:not([data-theme-style]) .blueprint-hero,
:root:not([data-theme-style]) .framework-stage-card,
:root:not([data-theme-style]) .framework-hierarchy-card,
:root:not([data-theme-style]) .framework-scope-card,
:root:not([data-theme-style]) .framework-module-card,
:root:not([data-theme-style]) .framework-global-root,
:root:not([data-theme-style]) .framework-vendor-registration,
:root:not([data-theme-style]) .visitor-badge,
:root:not([data-theme-style]) .permit-badge,
:root:not([data-theme-style]) .form-section,
:root:not([data-theme-style]) .kpi-card,
:root:not([data-theme-style]) .report-summary-hero,
:root:not([data-theme-style]) .report-summary-metric,
:root:not([data-theme-style]) .parking-capacity-banner,
:root:not([data-theme-style]) .parking-bay,
:root:not([data-theme-style]) .setting-choice-card,
:root:not([data-theme-style]) .panel,
:root:not([data-theme-style]) .card,
:root:not([data-theme-style]) .app-topbar,
:root:not([data-theme-style]) .app-sidebar,
:root:not([data-theme-style]) .sidebar-primary,
:root:not([data-theme-style]) .sidebar-secondary {
    border-radius: var(--radius-lg);
}html[data-theme-style="aether"] input,
html[data-theme-style="aether"] textarea,
html[data-theme-style="aether"] select,
html[data-theme-style="aether"] button,
html[data-theme-style="aether"] .btn,
html[data-theme-style="aether"] .fos-btn,
html[data-theme-style="aether"] .icon-button,
html[data-theme-style="aether"] .user-button,
html[data-theme-style="aether"] .user-dropdown,
:root:not([data-theme-style]) input,
:root:not([data-theme-style]) textarea,
:root:not([data-theme-style]) select,
:root:not([data-theme-style]) button,
:root:not([data-theme-style]) .btn,
:root:not([data-theme-style]) .fos-btn,
:root:not([data-theme-style]) .icon-button,
:root:not([data-theme-style]) .user-button,
:root:not([data-theme-style]) .user-dropdown {
    border-radius: var(--radius-md);
}

/* Per-theme glass blur depth: Aether 24 (heavy),
Chronos none (opaque paper),
Helios 16 (frosted coal),
Nephrite 28 (heavy frosted nephrite). */
html[data-theme-style="chronos"] { --glass-blur: none; }
html[data-theme-style="helios"] { --glass-blur: blur(16px); }
html[data-theme-style="nephrite"] { --glass-blur: blur(28px); }

/* CHRONOS ALABASTER (Warm Minimalist Editorial) — full Aether Nav structure,
print-editorial skin. All five navigation archetypes stay active; only the
   surface language changes (guide: radius 4/6/10,
serif headings,
embossed
   depth,
warm flat canvas). */
html[data-theme-style="chronos"] .ambient-glow {
    display: none; /* warm flat canvas — no cosmic glows */
}
html[data-theme-style="chronos"] .aether-dock-wrapper { display: flex; }
html[data-theme-style="chronos"] .radial-menu-wrapper { display: block; }
html[data-theme-style="chronos"] body {
    background: var(--c-bg); /* Flat warm alabaster, no gradients */
}
/* Editorial typography (Chronos rule 3): Lora serif for headings and
   structural labels; clean geometric sans for body copy and data. */
html[data-theme-style="chronos"] *:not(i):not([class^="ti-"]):not([class*=" ti-"]):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fos-title):not(.eyebrow):not(.fos-label):not(.nav-section):not(.nav-group-title):not(th) {
    font-family: 'Outfit', -apple-system, sans-serif;
}
html[data-theme-style="chronos"] h1,
html[data-theme-style="chronos"] h2,
html[data-theme-style="chronos"] h3,
html[data-theme-style="chronos"] h4,
html[data-theme-style="chronos"] h5,
html[data-theme-style="chronos"] h6,
html[data-theme-style="chronos"] .fos-title,
html[data-theme-style="chronos"] .eyebrow,
html[data-theme-style="chronos"] .fos-label,
html[data-theme-style="chronos"] .nav-section,
html[data-theme-style="chronos"] .nav-group-title,
html[data-theme-style="chronos"] th {
    font-family: 'Lora', Georgia, serif;
}
/* Systemic Container Group for Chronos */
html[data-theme-style="chronos"] .fos-card,
html[data-theme-style="chronos"] .dialog-card,
html[data-theme-style="chronos"] .role-console-card,
html[data-theme-style="chronos"] .timeline-card,
html[data-theme-style="chronos"] .table-wrap,
html[data-theme-style="chronos"] .blueprint-node,
html[data-theme-style="chronos"] .blueprint-command,
html[data-theme-style="chronos"] .blueprint-hero,
html[data-theme-style="chronos"] .framework-stage-card,
html[data-theme-style="chronos"] .framework-hierarchy-card,
html[data-theme-style="chronos"] .framework-scope-card,
html[data-theme-style="chronos"] .framework-module-card,
html[data-theme-style="chronos"] .framework-global-root,
html[data-theme-style="chronos"] .framework-vendor-registration,
html[data-theme-style="chronos"] .visitor-badge,
html[data-theme-style="chronos"] .permit-badge,
html[data-theme-style="chronos"] .form-section,
html[data-theme-style="chronos"] .kpi-card,
html[data-theme-style="chronos"] .report-summary-hero,
html[data-theme-style="chronos"] .report-summary-metric,
html[data-theme-style="chronos"] .parking-capacity-banner,
html[data-theme-style="chronos"] .parking-bay,
html[data-theme-style="chronos"] .setting-choice-card,
html[data-theme-style="chronos"] .panel,
html[data-theme-style="chronos"] .card,
html[data-theme-style="chronos"] .app-topbar,
html[data-theme-style="chronos"] .app-sidebar,
html[data-theme-style="chronos"] .sidebar-primary,
html[data-theme-style="chronos"] .sidebar-secondary {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    /* Soft embossed depth (Chronos rule 4) — never heavy glow shadows */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.03);
}
html[data-theme-style="chronos"] .fos-card::before,
html[data-theme-style="chronos"] .dialog-card::before,
html[data-theme-style="chronos"] .role-console-card::before,
html[data-theme-style="chronos"] .timeline-card::before,
html[data-theme-style="chronos"] .table-wrap::before {
    display: none; /* No glass sheen highlights */
}
html[data-theme-style="chronos"] table,
html[data-theme-style="chronos"] th,
html[data-theme-style="chronos"] td {
    border: 1px solid var(--c-border);
}

/* HELIOS NOVA (Solar Cyberpunk HUD) — full Aether Nav structure,
cockpit
   telemetry skin. All five navigation archetypes stay active (guide: dock as
   micro-radius carbon blocks expanding magnetically; radius scale 2/4/6). */
html[data-theme-style="helios"] .ambient-glow { display: block; }
html[data-theme-style="helios"] .aether-dock-wrapper { display: flex; }
html[data-theme-style="helios"] .radial-menu-wrapper { display: block; }
html[data-theme-style="helios"] body {
    /* Glowing solar grid mesh background */
    background:
        linear-gradient(90deg, rgba(245, 158, 11, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(245, 158, 11, 0.02) 1px, transparent 1px),
        var(--c-bg);
    background-size: 32px 32px;
}
/* Force Monospace Typography systemically on all text layers */
html[data-theme-style="helios"] *:not(i):not([class^="ti-"]):not([class*=" ti-"]) {
    font-family: 'Space Mono', monospace;
}
/* Systemic Container Group for Helios */
html[data-theme-style="helios"] .fos-card,
html[data-theme-style="helios"] .dialog-card,
html[data-theme-style="helios"] .role-console-card,
html[data-theme-style="helios"] .timeline-card,
html[data-theme-style="helios"] .table-wrap,
html[data-theme-style="helios"] .blueprint-node,
html[data-theme-style="helios"] .blueprint-command,
html[data-theme-style="helios"] .blueprint-hero,
html[data-theme-style="helios"] .framework-stage-card,
html[data-theme-style="helios"] .framework-hierarchy-card,
html[data-theme-style="helios"] .framework-scope-card,
html[data-theme-style="helios"] .framework-module-card,
html[data-theme-style="helios"] .framework-global-root,
html[data-theme-style="helios"] .framework-vendor-registration,
html[data-theme-style="helios"] .visitor-badge,
html[data-theme-style="helios"] .permit-badge,
html[data-theme-style="helios"] .form-section,
html[data-theme-style="helios"] .kpi-card,
html[data-theme-style="helios"] .report-summary-hero,
html[data-theme-style="helios"] .report-summary-metric,
html[data-theme-style="helios"] .parking-capacity-banner,
html[data-theme-style="helios"] .parking-bay,
html[data-theme-style="helios"] .setting-choice-card,
html[data-theme-style="helios"] .panel,
html[data-theme-style="helios"] .card,
html[data-theme-style="helios"] .app-topbar,
html[data-theme-style="helios"] .app-sidebar,
html[data-theme-style="helios"] .sidebar-primary,
html[data-theme-style="helios"] .sidebar-secondary {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: 0 0 10px var(--c-glass-glow); /* Solar telemetry glow */
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}/* Active border pulsing (Helios rule 4): hovered controls and cards glow */
html[data-theme-style="helios"] .fos-btn:hover,
html[data-theme-style="helios"] .fos-btn:hover,
html[data-theme-style="helios"] .icon-button:hover,
html[data-theme-style="helios"] .kpi-card:hover,
html[data-theme-style="helios"] .fos-card:hover,
html[data-theme-style="helios"] .dock-item:hover {
    box-shadow: 0 0 12px var(--c-accent-weak), inset 0 0 6px var(--c-accent-weak);
    border-color: var(--c-border-2);
}
html[data-theme-style="helios"] .fos-card::before,
html[data-theme-style="helios"] .dialog-card::before,
html[data-theme-style="helios"] .role-console-card::before,
html[data-theme-style="helios"] .timeline-card::before,
html[data-theme-style="helios"] .table-wrap::before {
    display: none;
}
html[data-theme-style="helios"] table,
html[data-theme-style="helios"] th,
html[data-theme-style="helios"] td {
    border: 1px solid var(--c-border);
}

/* NEPHRITE ZEN (Fluid Organic Sage) */
html[data-theme-style="nephrite"] {
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
}
html[data-theme-style="nephrite"] .ambient-glow { display: block; }
html[data-theme-style="nephrite"] .aether-dock-wrapper { display: flex; }
html[data-theme-style="nephrite"] .radial-menu-wrapper { display: block; }/* Force Rounded Contours systemically on form controls and buttons */
html[data-theme-style="nephrite"] input,
html[data-theme-style="nephrite"] textarea,
html[data-theme-style="nephrite"] select,
html[data-theme-style="nephrite"] button,
html[data-theme-style="nephrite"] .btn,
html[data-theme-style="nephrite"] .fos-btn {
    border-radius: var(--radius-md);
}
/* Force Geometric Sans-serif systemically on all text layers */
html[data-theme-style="nephrite"] *:not(i):not([class^="ti-"]):not([class*=" ti-"]) {
    font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Systemic Container Group for Nephrite Zen */
html[data-theme-style="nephrite"] .fos-card,
html[data-theme-style="nephrite"] .dialog-card,
html[data-theme-style="nephrite"] .role-console-card,
html[data-theme-style="nephrite"] .timeline-card,
html[data-theme-style="nephrite"] .table-wrap,
html[data-theme-style="nephrite"] .blueprint-node,
html[data-theme-style="nephrite"] .blueprint-command,
html[data-theme-style="nephrite"] .blueprint-hero,
html[data-theme-style="nephrite"] .framework-stage-card,
html[data-theme-style="nephrite"] .framework-hierarchy-card,
html[data-theme-style="nephrite"] .framework-scope-card,
html[data-theme-style="nephrite"] .framework-module-card,
html[data-theme-style="nephrite"] .framework-global-root,
html[data-theme-style="nephrite"] .framework-vendor-registration,
html[data-theme-style="nephrite"] .visitor-badge,
html[data-theme-style="nephrite"] .permit-badge,
html[data-theme-style="nephrite"] .form-section,
html[data-theme-style="nephrite"] .kpi-card,
html[data-theme-style="nephrite"] .report-summary-hero,
html[data-theme-style="nephrite"] .report-summary-metric,
html[data-theme-style="nephrite"] .parking-capacity-banner,
html[data-theme-style="nephrite"] .parking-bay,
html[data-theme-style="nephrite"] .setting-choice-card,
html[data-theme-style="nephrite"] .panel,
html[data-theme-style="nephrite"] .card,
html[data-theme-style="nephrite"] .app-topbar,
html[data-theme-style="nephrite"] .app-sidebar,
html[data-theme-style="nephrite"] .sidebar-primary,
html[data-theme-style="nephrite"] .sidebar-secondary {
    border-radius: var(--radius-lg);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--c-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    /* Subtle leaf lighting (Nephrite rule 4): morning-dew top sheen */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
}

/* Category Collapse Fix */
.nav-category-list[hidden] {
    display: none;
}

/* 12. Dashboard Metrics,
Charts & SLA Ring Overrides */
.sla-chart-layout {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-1);
}

/* Legend Alignments */
.sla-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
}
.sla-legend > div {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.sla-legend strong {
    font-size: calc(var(--type-base) * var(--density-type));
    font-weight: 700;
    color: var(--c-text);
}
.sla-legend small {
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-2);
    font-weight: 500;
}

/* Global Muted & Description Text Contrast Overrides for legibility */
.eyebrow,
.panel-header p,
p:not([class]),
small {
    color: var(--c-text-2);
}
.kpi-value + span,
.kpi-desc small,
.sla-donut text.donut-text-label {
    color: var(--c-text-3);
}

/* Panel Actions Icon-Buttons Styling */
.icon-button,
.panel-header .icon-button {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
.icon-button:hover,
.panel-header .icon-button:hover {
    background: var(--c-surface-3);
    color: var(--c-text);
    border-color: var(--c-border-2);
}

/* Custom Styled Select Dropdown Component styling */
.custom-select-container {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--font-sans);
}

.custom-select-trigger {
    background: var(--c-surface-2, var(--c-chrome));
    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-text, var(--c-chrome-text));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: all var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1));
}

.custom-select-trigger:hover {
    border-color: var(--c-border-2, rgba(255, 255, 255, 0.16));
    background: var(--c-surface-3, var(--c-chrome-2));
}

.custom-select-container.open .custom-select-trigger {
    border-color: var(--c-accent, var(--c-accent));
    box-shadow: 0 0 0 1px var(--c-accent, var(--c-accent));
    background: var(--c-surface-3, var(--c-chrome-2));
}

.custom-select-trigger::after {
    content: "\ea5f";
    font-family: "tabler-icons";
    font-size: calc(var(--type-base) * var(--density-type));
    color: var(--c-text-3, var(--c-text-3));
    transition: transform var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1));
}

.custom-select-container.open .custom-select-trigger::after {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: var(--c-surface-2, var(--c-chrome));
    border: 1px solid var(--c-border-2, rgba(255, 255, 255, 0.16));
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    max-height: 240px;
    overflow-y: auto;
    display: none;
    padding: var(--space-1);
}

.custom-select-container.open .custom-select-dropdown {
    display: block;
    animation: customSelectFadeIn var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1));
}

@keyframes customSelectFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-select-option {
    padding: var(--space-2) var(--space-3);
    font-size: calc(var(--type-sm) * var(--density-type));
    color: var(--c-text-2, var(--c-border));
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    transition: all var(--dur, 160ms) var(--ease, cubic-bezier(.2,0,0,1));
}

.custom-select-option:hover {
    background: var(--c-accent-weak, rgba(99, 102, 241, 0.15));
    color: var(--c-accent, var(--c-accent));
}

.custom-select-option.selected {
    background: var(--c-accent-weak, rgba(99, 102, 241, 0.15));
    color: var(--c-accent, var(--c-accent));
    font-weight: 600;
}

/* Side-Dock Drawer Layout */
.side-dock-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    transition: opacity 280ms cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
}
.side-dock-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.side-dock-panel.active {
    transform: translateX(0);
}
.side-dock-header h3 {
    margin: var(--space-0);
    font-size: calc(var(--type-lg) * var(--density-type));
    font-weight: 700;
    color: var(--c-text-1, var(--c-chrome-text));
}
.side-dock-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}

/* Dashboard 2-Column Split Layout */
@media (max-width: 1024px) {
}
/* New Enterprise Configuration Cards */
.config-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.config-card-option.selected {
    border-color: var(--c-accent, var(--c-accent));
    background: var(--c-accent-weak, rgba(99, 102, 241, 0.08));
    box-shadow: 0 0 0 1px var(--c-accent, var(--c-accent));
}

/* Global Dialog-to-Drawer Overhaul */
dialog {
    position: fixed;
    inset: 0 0 0 auto; /* Force to right side */
    margin: var(--space-0);
    width: min(600px, 100vw);
    height: 100vh;
    max-height: 100vh;
    border: 0;
    padding: var(--space-0);
    background: transparent;
    box-shadow: none;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}
dialog[open] {
    transform: translateX(0);
}
.dialog-card {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border: none;
    border-radius: 0; /* Straight vertical edge on drawer */
    border-left: 1px solid var(--c-border-2, rgba(255, 255, 255, 0.12));
    background: var(--c-surface-2, var(--c-chrome));
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.dialog-card > header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--c-border-2, rgba(255, 255, 255, 0.08));
}
.dialog-card > footer {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--c-border-2, rgba(255, 255, 255, 0.08));
    margin-top: auto; /* Push footer options to bottom */
}
.dialog-card > main,
.dialog-card > div:not(header):not(footer) {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}
.form-message {
    padding: var(--space-0) var(--space-6);
}







/* LOTO isolation register dialog — token-only; no hardcoded colours or dimensions. */
.permit-isolation-intro { margin-bottom: var(--space-3); }
.permit-isolation-banner {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-weight: 600;
}
.permit-isolation-banner.danger { color: var(--c-danger); background: var(--c-danger-weak); }
.permit-isolation-banner.clear { color: var(--c-success); background: var(--c-success-weak); }
.permit-isolation-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--border-width, 0.0625rem) solid var(--c-border);
    align-items: flex-start;
}
.permit-isolation-row__head { display: flex; gap: var(--space-2); align-items: center; }
.permit-isolation-row__meta { font-size: var(--type-xs); margin-top: var(--space-1); }
.permit-isolation-row__body > div { margin-top: var(--space-1); }
.permit-isolation-row__body > .permit-isolation-row__head { margin-top: var(--space-0); }
.permit-isolation-row__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.permit-isolation-add { margin-top: var(--space-2); }