/* --- Framework Layout Engine --- */

body {
    display: flex; overflow: auto; height: 100%; width: 100%; background: var(--bg-1);
    transition: var(--color-transition);
}

.js body {
    overflow: hidden; height: 100vh;
}

/* No-JS Synchronized Layout: Matches JS mode exactly but ensures document accessibility */
.no-js html,
.no-js body,
.no-js #main-layout,
.no-js #workspace,
.no-js .view-item {
    min-height: 100% !important;
    overflow: visible !important;
}

/* Prevent scroll chaining from side panels */
.panel [class*="overflow-y-auto"],
.sub-system-panel [class*="overflow-y-auto"],
#left-panel-content-portal,
[id^="left-panel-content-"] {
    overscroll-behavior: contain;
}

/* Kill any session-based locks in legacy mode */
.no-js body.has-open-panes {
    overflow: visible !important;
}

/* Transitions */
.rail, .panel, #main-layout, #workspace, .mobile-topbar, .view-item, .nav-item, .active-indicator {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                backdrop-filter 0.4s ease,
                -webkit-backdrop-filter 0.4s ease,
                var(--color-transition);
}

/* Industrial Body-State Engine */

/* 1. Explicit Manual ON: Full visibility, always pushes (Desktop) or overlays (Mobile) */
body.has-left-panel #left-panel-wrapper { transform: translateX(0) !important; pointer-events: auto !important; opacity: 1 !important; }
body.has-left-panel #sidebar-backdrop #backdrop-left-close,
body.rail-open #sidebar-backdrop #backdrop-left-close { display: block !important; }

/* 2. Explicit Manual OFF: Always hidden */
body.left-panel-manual-off #left-panel-wrapper { transform: translateX(calc(-100% - 4rem - env(safe-area-inset-left, 0px))) !important; pointer-events: none !important; }

/* 2.5 Tactical Rail Mode: Panel hidden, Rail icons visible */
body.left-panel-rail #left-panel-wrapper { transform: translateX(calc(-100% - 4rem - env(safe-area-inset-left, 0px))) !important; pointer-events: none !important; }
body.right-panel-rail #right-panel-wrapper { transform: translateX(calc(100% + 4rem + env(safe-area-inset-right, 0px))) !important; pointer-events: none !important; }

/* 3. Responsive AUTO: Desktop=Visible, Mobile=Hidden */
body.left-panel-auto #left-panel-wrapper { transform: translateX(calc(-100% - 4rem - env(safe-area-inset-left, 0px))) !important; pointer-events: none !important; }
@media screen and (min-width: 80rem) {
    body.left-panel-auto #left-panel-wrapper { transform: translateX(0) !important; pointer-events: auto !important; opacity: 1 !important; }
}

/* Right Panel Logic (Maintained) */
body.has-right-panel #right-panel-wrapper { transform: translateX(0) !important; pointer-events: auto !important; opacity: 1 !important; }
body:not(.has-right-panel) #right-panel-wrapper { transform: translateX(calc(100% + 4rem + env(safe-area-inset-right, 0px))) !important; pointer-events: none !important; }
body.has-right-panel #sidebar-backdrop #backdrop-right-close,
body.right-rail-open #sidebar-backdrop #backdrop-right-close { display: block !important; }


/* Mobile Overlay & Shadow for Manual ON */
@media screen and (max-width: 79.99rem) {
    body.has-left-panel #left-panel-wrapper {
        box-shadow: var(--shadow-3);
    }
    body.has-right-panel #right-panel-wrapper {
        box-shadow: var(--shadow-3);
    }
}

/* Panel Type Switching */
.tool-panel { display: none !important; }
body.tool-active-options #tool-panel-options { display: flex !important; }
body.tool-active-filter #tool-panel-filter { display: flex !important; }
body.tool-active-loadout #tool-panel-loadout { display: flex !important; }
body.tool-active-export #tool-panel-export { display: flex !important; }

/* Desktop Padding Sync (Reserving space for Rails and Panels) */
@media screen and (min-width: 40rem) {
    #main-layout {
        padding-left: calc(4rem + env(safe-area-inset-left, 0px));
        padding-right: calc(4rem + env(safe-area-inset-right, 0px));
    }

    /* Desktop "Push" Rules (Panel + Rail space) */
    @media screen and (min-width: 80rem) {
        body.has-left-panel #main-layout,
        body.left-panel-auto #main-layout { padding-left: calc(4rem + 15rem + env(safe-area-inset-left, 0px)) !important; }

        body.has-right-panel #main-layout { padding-right: calc(4rem + 15rem + env(safe-area-inset-right, 0px)) !important; }
    }
}

/* Mobile Reset (Sidebars are overlays/hidden) */
@media screen and (max-width: 39.99rem) {
    #main-layout { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Master Toggle Dynamic Visibility */

.rail-divider {
    height: 1px;
    width: 2rem;
    background: var(--b-4);
    margin: var(--spacing-1) auto;
    opacity: 0.3;
}
.rail-link { display: flex; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* Disabled State: Ghosting and Locking */
.disabled-item {
    opacity: 0.35 !important;
    filter: grayscale(1) contrast(0.8) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Responsive Auto-Toggles */
.logo-desktop-only { display: none !important; }
.logo-mobile-only { display: flex !important; }
@media screen and (min-width: 80rem) {
    .logo-desktop-only { display: flex !important; }
    .logo-mobile-only { display: none !important; }
}

/* Highlighting */
.rail-item.active-item,
.nav-item.active-item {
    color: var(--text-5) !important;
    background: var(--bg-1) !important;
}

/* Indicators and Highlights: Responsive Auto Handling */
@media screen and (min-width: 80rem) {
    .rail-item.active-item-auto {
        color: var(--text-5) !important;
        background: var(--bg-1) !important;
    }
}

/* Show indicator line only when panel is open (Scoped to Panel-Control items) */
body.has-left-panel #menu-toggle-container.active-item .active-indicator,
body.has-left-panel #mobile-left-toggle-container.active-item .active-indicator,
body.has-left-panel #left-rail .rail-item[data-system].active-item .active-indicator,
body.has-right-panel #right-menu-toggle-container.active-item .active-indicator,
body.has-right-panel #mobile-right-toggle-container.active-item .active-indicator,
body.has-right-panel #right-rail .rail-item[data-tool].active-item .active-indicator {
    opacity: 1 !important;
}

@media screen and (min-width: 80rem) {
    #left-rail .rail-item[data-system].active-item-auto .active-indicator,
    #menu-toggle-container.active-item-auto .active-indicator {
        opacity: 1 !important;
    }
}

/* Persona Selection Highlighting */
.active-persona {
    transform: translateY(-2px);
    border-bottom-width: 6px !important;
}
.active-persona::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
#right-menu-open-label, #right-menu-close-label,
#mobile-menu-open-label, #mobile-menu-close-label,
#menu-open-label, #menu-close-label,
.menu-open-label, .menu-close-label,
.tool-toggle-open-label, .tool-toggle-close-label,
#mobile-left-open-label, #mobile-left-close-label { display: none; }

/* Mobile Mobile Sync */
@media screen and (max-width: 39.99rem) {
    body.has-left-panel #main-layout #mobile-left-toggle-container,
    body.has-right-panel #main-layout #mobile-right-toggle-container {
        background-color: var(--bg-4) !important;
        color: var(--text-5) !important;
    }
}

/* Sequential Morphing Logic */
html.is-morphing body { transition-delay: var(--layer-1-delay); }
html.is-morphing .rail { transition-delay: var(--layer-2-delay); }
html.is-morphing .panel { transition-delay: var(--layer-3-delay); }
html.is-morphing #main-layout,
html.is-morphing #workspace,
html.is-morphing .view-item,
html.is-morphing .nav-item,
html.is-morphing .active-indicator { transition-delay: var(--layer-4-delay); }

/* Prevent layout jitter for main containers while keeping slide/fade/push animations */
body.is-resizing .rail,
body.is-resizing .panel,
body.is-resizing #main-layout,
body.is-resizing #workspace,
body.is-resizing .mobile-topbar {
    transition-property: transform, background-color, color, padding, margin, box-shadow, opacity !important;
}

/* No-JS Resilience: Hide non-functional interactive overlays */
.no-js #sidebar-backdrop,
.no-js #dynamic-island-wrapper,
.no-js #toast-container,
.no-js #modal-container,
.no-js .nav-telemetry-hud {
    display: none !important;
}

/* Standardized Header Interaction Triggers */
[data-action="pop-view"],
.close-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-action="pop-view"]:hover,
.close-trigger:hover {
    background: var(--bg-3) !important;
    color: var(--text-5) !important;
}

.no-js .form-group.hidden,
.no-js .extension-group.hidden {
    display: flex !important;
}

/* Sidebar Backdrop (Click-Away) */
#sidebar-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 800;
    background: transparent; backdrop-filter: none;
    pointer-events: none; transition: opacity 0.3s ease; opacity: 0;
    display: none; /* Hide physically by default */
}
@media screen and (max-width: 79.99rem) {
    body.has-open-panes #sidebar-backdrop {
        display: block !important; /* Show only when panels/rails are open on mobile/tablet */
        pointer-events: auto !important;
        background: rgba(0,0,0,0.01) !important; /* Minimal tint to ensure click registration */
        opacity: 1 !important;
    }

    /* Glass Effect Integration for Backdrop */
    html[data-glass="on"] body.has-open-panes #sidebar-backdrop {
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        background: rgba(0,0,0,0.1) !important; /* Slightly darker to emphasize the blur depth */
    }
}
@media (max-width: 39.99rem) {
    #sidebar-backdrop { top: 4rem; }
}

/* RAILS (z-index: 1000) - The Anchor Icons */
.rail {
    height: 100%; flex-shrink: 0; z-index: 1000; position: fixed; top: 0;
    background: var(--bg-3);
    padding: var(--spacing-1, 0.5rem);
    padding-top: calc(var(--spacing-1, 0.5rem) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--spacing-1, 0.5rem) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth;
    overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--spacing-1, 0.5rem);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: transform 0.4s ease, width 0.4s ease, padding 0.4s ease;
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .rail {
        background: color-mix(in srgb, var(--bg-3), transparent var(--glass-opacity));
        backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    }
}

.rail::-webkit-scrollbar { display: none; }

#left-rail {
    left: 0;
    width: calc(4rem + env(safe-area-inset-left, 0px));
    padding-left: calc(var(--spacing-1) + env(safe-area-inset-left, 0px));
}
#right-rail {
    right: 0;
    width: calc(4rem + env(safe-area-inset-right, 0px));
    padding-right: calc(var(--spacing-1) + env(safe-area-inset-right, 0px));
}

/* PANELS (z-index: 900) - The Sliding Menus */
.panel {
    width: 15rem; height: 100%; position: fixed; top: 0;
    background: var(--bg-2);
    z-index: 900;
    overflow: hidden; display: flex; flex-direction: column;
    pointer-events: none; opacity: 1;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .panel {
        background: color-mix(in srgb, var(--bg-2), transparent var(--glass-opacity));
        backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    }
}

/* OLED Physical Definition: Enhance depth when background is pure black */
html[data-theme="oled"] .panel {
    box-shadow: none;
}

#left-panel-wrapper { left: calc(4rem + env(safe-area-inset-left, 0px)); }
#right-panel-wrapper { right: calc(4rem + env(safe-area-inset-right, 0px)); }


/* Desktop "Push" Rules */
@media screen and (min-width: 80rem) {
    /* Push content further to accommodate Panels */
    body.has-left-panel #main-layout { padding-left: calc(4rem + 15rem + env(safe-area-inset-left, 0px)); }
    body.has-right-panel #main-layout { padding-right: calc(4rem + 15rem + env(safe-area-inset-right, 0px)); }

    /* No shadows on desktop for a flat, clean look */
    body.has-left-panel #left-panel-wrapper,
    body.has-right-panel #right-panel-wrapper,
    #left-rail, #right-rail { box-shadow: 0 0 0 rgba(0,0,0,0) !important; }
}

/* Mobile Overlay Rules */
@media screen and (max-width: 39.99rem) {
    .rail { transform: translateX(-100%); pointer-events: none; }
    #right-rail { transform: translateX(100%); }

    .panel { position: fixed; top: 0; width: calc(100vw - 8rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); z-index: 900; box-shadow: var(--shadow-3); }
    #left-panel-wrapper { left: calc(4rem + env(safe-area-inset-left, 0px)); }
    #right-panel-wrapper { right: calc(4rem + env(safe-area-inset-right, 0px)); }

    /* Show Rail on Mobile with directional shadows */
    body.rail-open #left-rail { transform: translateX(0) !important; pointer-events: auto !important; box-shadow: none !important; }
    body.right-rail-open #right-rail { transform: translateX(0) !important; pointer-events: auto !important; box-shadow: none !important; }

    /* Apply shadow when in Rail-Only Tactical Mode */
    body.left-panel-rail #left-rail { box-shadow: var(--shadow-3) !important; }
    body.right-panel-rail #right-rail { box-shadow: var(--shadow-3) !important; }

    /* Remove Rail shadow when Panel is covering its edge */
    body.has-left-panel #left-rail { box-shadow: 0 0 0 rgba(0,0,0,0); }
    body.has-right-panel #right-rail { box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* Workspace */
#main-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
    order: 3;
    position: relative;
    z-index: 100;
}
@media screen and (min-width: 40rem) {
    #main-layout { z-index: 100; }
}
#workspace {
    flex: 1; overflow: hidden !important; position: relative; display: flex; flex-direction: column; min-height: 0;
}
.view-item {
    padding: var(--spacing-3);
    flex: 1;
    overflow-y: auto !important;
}


@media screen and (max-width: 39.99rem) {
    .view-item {
        padding-top: calc(var(--spacing-3) + 4rem + env(safe-area-inset-top, 0px));
    }
}

/* Header */
.mobile-topbar {
    width: 100%; position: fixed; top: 0; left: 0; z-index: 2000;
    background: var(--bg-3, #e5e5e5); /* Solid Fallback */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: var(--spacing-1);
    padding-top: calc(var(--spacing-1) + env(safe-area-inset-top, 0px));
    height: calc(4rem + env(safe-area-inset-top, 0px));
    display: flex; align-items: center; justify-content: space-between;
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .mobile-topbar {
        background: var(--rail-glass-bg);
        backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    }
}

@media screen and (min-width: 40rem) {
    .mobile-topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
    [data-topbar-position="bottom"] .mobile-topbar { transform: translateY(100%); }
}

/* Bottom Topbar Overrides */
[data-topbar-position="bottom"] .mobile-topbar {
    top: initial !important;
    bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: calc(4rem + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.05) !important;
}

@media screen and (max-width: 39.99rem) {
    [data-topbar-position="bottom"] .view-item {
        padding-top: var(--spacing-3) !important;
        padding-bottom: calc(var(--spacing-3) + 4rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Active Indicators */
.rail-item { aspect-ratio: 1/1; position: relative; flex-shrink: 0; background: var(--bg-4); }
.nav-item { background: var(--bg-3); }
.panel a { flex-shrink: 0; }
.active-indicator {
    position: absolute; top: 20%; height: 60%; width: 4px; opacity: 0;
    transition: opacity 0.3s; background-color: var(--system-accent);
    z-index: 50; /* Ensure it's above links and icons */
    pointer-events: none; /* Never block clicks */
}
[class^="i-"] { display: flex; align-items: center; justify-content: center; }

#left-rail .active-indicator,
#mobile-left-toggle-container .active-indicator {
    left: -1px; border-radius: 0 4px 4px 0;
}

#right-rail .active-indicator,
#mobile-right-toggle-container .active-indicator {
    right: -1px; border-radius: 4px 0 0 4px;
}

/* Show indicator on Master Toggle when panel is open */
body.has-left-panel #menu-toggle-container .active-indicator,
body.has-left-panel #mobile-left-toggle-container .active-indicator,
body.has-right-panel #right-menu-toggle-container .active-indicator,
body.has-right-panel #mobile-right-toggle-container .active-indicator {
    opacity: 1 !important;
}

body.sys-active-directory [data-system="directory"],
body.sys-active-portal [data-system="portal"],
body.sys-active-business [data-system="business"],
body.sys-active-finance [data-system="finance"],
body.sys-active-personal [data-system="personal"],
body.sys-active-workforce [data-system="workforce"],
body.sys-active-admin [data-system="admin"],
body.sys-active-logistics [data-system="logistics"],
body.sys-active-services [data-system="services"],
body.sys-active-healthcare [data-system="healthcare"],
body.sys-active-education [data-system="education"],
body.sys-active-public [data-system="public"],
body.sys-active-media [data-system="media"],
body.sys-active-social [data-system="social"],
body.sys-active-collaboration [data-system="collaboration"],
body.sys-active-automation [data-system="automation"],
body.sys-active-vault [data-system="vault"],
body.sys-active-reporting [data-system="reporting"],
body.sys-active-mapping [data-system="mapping"],
body.sys-active-sentry [data-system="sentry"],
body.sys-active-oracle [data-system="oracle"],
body.sys-active-booking [data-system="booking"],
body.sys-active-schedule [data-system="schedule"],
body.sys-active-engagement [data-system="engagement"],
body.sys-active-mastery [data-system="mastery"],
body.tool-active-options [data-tool="options"],
body.tool-active-filter [data-tool="filter"],
body.tool-active-loadout [data-tool="loadout"],
body.tool-active-export [data-tool="export"] {
    color: var(--text-5) !important;
}

/* Sub-System Panel Visibility */
.sub-system-panel { display: none !important; }
body.sys-active-portal #panel-subsystem-portal { display: block !important; }
body.sys-active-directory #panel-subsystem-directory { display: block !important; }
body.sys-active-business #panel-subsystem-business { display: block !important; }
body.sys-active-finance #panel-subsystem-finance { display: block !important; }
body.sys-active-personal #panel-subsystem-personal { display: block !important; }
body.sys-active-workforce #panel-subsystem-workforce { display: block !important; }
body.sys-active-admin #panel-subsystem-admin { display: block !important; }
body.sys-active-logistics #panel-subsystem-logistics { display: block !important; }
body.sys-active-services #panel-subsystem-services { display: block !important; }
body.sys-active-healthcare #panel-subsystem-healthcare { display: block !important; }
body.sys-active-education #panel-subsystem-education { display: block !important; }
body.sys-active-public #panel-subsystem-public { display: block !important; }
body.sys-active-media #panel-subsystem-media { display: block !important; }
body.sys-active-social #panel-subsystem-social { display: block !important; }
body.sys-active-collaboration #panel-subsystem-collaboration { display: block !important; }
body.sys-active-automation #panel-subsystem-automation { display: block !important; }
body.sys-active-vault #panel-subsystem-vault { display: block !important; }
body.sys-active-reporting #panel-subsystem-reporting { display: block !important; }
body.sys-active-mapping #panel-subsystem-mapping { display: block !important; }
body.sys-active-sentry #panel-subsystem-sentry { display: block !important; }
body.sys-active-oracle #panel-subsystem-oracle { display: block !important; }
body.sys-active-booking #panel-subsystem-booking { display: block !important; }
body.sys-active-schedule #panel-subsystem-schedule { display: block !important; }
body.sys-active-engagement #panel-subsystem-engagement { display: block !important; }
body.sys-active-mastery #panel-subsystem-mastery { display: block !important; }
body.sys-active-user_guide #panel-subsystem-user_guide { display: block !important; }

/* Show indicator line only when panel is open (Scoped to Panel-Control items) */
body.has-left-panel #menu-toggle-container.active-item .active-indicator,
body.has-left-panel #mobile-left-toggle-container.active-item .active-indicator,
body.has-left-panel #left-rail .rail-item[data-system].active-item .active-indicator,
body.has-right-panel #right-menu-toggle-container.active-item .active-indicator,
body.has-right-panel #mobile-right-toggle-container.active-item .active-indicator,
body.has-right-panel #right-rail .rail-item[data-tool].active-item .active-indicator {
    opacity: 1 !important;
}

@media screen and (min-width: 80rem) {
    #left-rail .rail-item[data-system].active-item-auto .active-indicator,
    #menu-toggle-container.active-item-auto .active-indicator {
        opacity: 1 !important;
    }
}

/* Skeleton System Theming */
[data-system-context="business"] { --skeleton-shimmer: color-mix(in srgb, var(--p1-3), transparent 90%); }
[data-system-context="finance"] { --skeleton-shimmer: color-mix(in srgb, var(--p5-3), transparent 90%); }
[data-system-context="workforce"] { --skeleton-shimmer: color-mix(in srgb, var(--p3-3), transparent 90%); }
[data-system-context="admin"] { --skeleton-shimmer: color-mix(in srgb, var(--p6-3), transparent 90%); }
[data-system-context="personal"] { --skeleton-shimmer: color-mix(in srgb, var(--p2-3), transparent 90%); }

/* --- Industrial Empty States --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5) var(--spacing-4);
    text-align: center;
    background: var(--bg-2);
    border: 2px dashed var(--bg-4);
    border-radius: var(--radius-3);
    gap: var(--spacing-3);
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
}

@media screen and (min-width: 40rem) {
    .empty-state {
        padding: 5rem var(--spacing-4);
    }
}
.empty-state .i-5 {
    color: var(--bg-5);
}

.js body.has-open-panes { overflow: hidden !important; }
table { border-collapse: separate; border-spacing: 0 var(--spacing-2); }

/* --- Print Optimization --- */
@media print {
    @page { margin: 1cm; }

    /* Force Light Mode variables for printing */
    :root, [data-theme] {
        --bg-1: #ffffff !important; --bg-2: #ffffff !important; --bg-3: #f9f9f9 !important; --bg-4: #eeeeee !important; --bg-5: #dddddd !important;
        --text-1: #aaaaaa !important; --text-2: #777777 !important; --text-3: #444444 !important; --text-4: #222222 !important; --text-5: #000000 !important;
        --text-color: #000000 !important;
        color-scheme: light !important;
    }

    /* Hide ALL UI chrome aggressively */
    #left-rail, #right-rail, #left-panel-wrapper, #right-panel-wrapper,
    .mobile-topbar, #sidebar-backdrop, .active-indicator,
    #theme-toggle, #view-toggle, #menu-toggle, #right-menu-toggle, #mobile-right-toggle,
    .rail, .panel, header button, .nav-item,
    .hidden-md, .hidden-sm, .w-fix-1.t-right {
        display: none !important;
    }

    /* Specifically hide the mobile-only labels in table rows */
    .row-item span.f-1.t-2.uppercase.bold {
        display: none !important;
    }

    /* Reset Body and Main Containers */
    body {
        display: block !important;
        background: #fff !important;
        color: #000 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    #dynamic-island-wrapper, #modal-container, #toast-container, #sidebar-backdrop {
        display: none !important;
    }

    #main-layout, #workspace {
        display: block !important;
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
    }

    /* Force visibility and light-mode colors for content */
    .row-item, .stagger-item, .b-1, .b-2, .b-3, .b-4, .b-5, .v-stack, .h-stack, * {
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        animation: none !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact;
        color: #000 !important;
        background-color: transparent !important;
        border-color: #eee !important;
    }

    /* Force backgrounds for specific data items to maintain structure */
    .row-item, .b-2, .b-3, .panel, .glass-card {
        background-color: #fff !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Maintain layout for data cards/rows */
    .v-stack { display: flex !important; flex-direction: column !important; }
    .h-stack, .h-stack-md, .h-stack-lg { display: flex !important; flex-direction: row !important; align-items: center !important; }

    .grid-1, .grid-2, .grid-3 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* Force 4 columns on paper */
        gap: 0.5cm !important;
    }

    .row-item {
        display: flex !important;
        flex-direction: row !important; /* Force horizontal rows */
        align-items: center !important;
        border: 1px solid #eee !important;
        margin-bottom: 0.2cm !important;
        break-inside: avoid;
    }

    /* Ensure internal cell flexibility is maintained */
    .row-item > div { flex: 1 !important; }

    /* Icons in content remain visible but neutralized */
    .i-1, .i-2, .i-3, .i-4, .i-5 { color: #000 !important; }
}

/* Navigation Breadcrumbs (Industrial Path) */
.breadcrumb-item .breadcrumb-line {
    z-index: 0;
}
.breadcrumb-item .breadcrumb-dot {
    width: 2.5rem;
    height: 2.5rem;
}
.breadcrumb-item a:hover .breadcrumb-dot {
    transform: scale(1.1);
    box-shadow: var(--shadow-2);
}

/* 5. Components: Multi-Section Forms (Resiliency) */
.form-group { width: 100%; transition: opacity 0.4s ease; }
html.js .form-group:not(.active-group) { display: none !important; height: 0; overflow: hidden; opacity: 0; }
html.js .form-group.active-group { display: flex !important; height: auto; opacity: 1; }