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

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

/* 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);
}

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

/* Sidebar Backdrop (Click-Away) */
#sidebar-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 80;
    background: transparent; backdrop-filter: none;
    pointer-events: none; transition: all 0.3s ease; display: block !important;
}
body.has-open-panes #sidebar-backdrop {
    pointer-events: auto;
    z-index: 88; /* Above workspace (85) but below panels (90) */
    background: rgba(0,0,0,0.01); /* Minimal tint to ensure click registration */
}
@media (max-width: 39.99rem) {
    #sidebar-backdrop { top: 4rem; }
}

/* RAILS (z-index: 100) - The Anchor Icons */
.rail {
    height: 100%; flex-shrink: 0; z-index: 100; position: fixed; top: 0;
    background: var(--bg-3, #e5e5e5); /* Solid Fallback */
    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;
    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: var(--rail-glass-bg);
        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: 90) - The Sliding Menus */
.panel {
    width: 15rem; height: 100%; position: fixed; top: 0;
    background: var(--bg-2, #d9d9d9); /* Solid Fallback */
    z-index: 90;
    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: var(--panel-glass-bg);
        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: 0 0 50px rgba(255, 255, 255, 0.03);
}

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

/* Desktop/Tablet Visibility Rules */
@media screen and (min-width: 40rem) {
    /* Rail is ALWAYS visible unless Master Collapsed */
    body.menu-collapsed #left-rail { opacity: 0; transform: translateX(-100%); }
    body.right-rail-collapsed #right-rail { opacity: 0; transform: translateX(100%); }

    /* Reserve space for Rails on Tablet/Desktop */
    #main-layout {
        padding-left: calc(4rem + env(safe-area-inset-left, 0px));
        padding-right: calc(4rem + env(safe-area-inset-right, 0px));
    }
    body.menu-collapsed #main-layout { padding-left: 0; }
    body.right-rail-collapsed #main-layout { padding-right: 0; }

    /* Offset if rails are collapsed */
    body.menu-collapsed #left-panel-wrapper { left: env(safe-area-inset-left, 0px); }
    body.right-rail-collapsed #right-panel-wrapper { right: env(safe-area-inset-right, 0px); }

    body.has-left-panel #left-panel-wrapper { transform: translateX(0); pointer-events: auto; box-shadow: 10px 0 30px rgba(0,0,0,0.1); }
    body.has-right-panel #right-panel-wrapper { transform: translateX(0); pointer-events: auto; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }
}

/* 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)); }

    body.menu-collapsed.has-left-panel #main-layout { padding-left: calc(15rem + env(safe-area-inset-left, 0px)); }
    body.right-rail-collapsed.has-right-panel #main-layout { padding-right: calc(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: 90; box-shadow: 0 0 40px rgba(0,0,0,0.2); }
    #left-panel-wrapper { left: calc(4rem + env(safe-area-inset-left, 0px)); transform: translateX(calc(-100% - 4rem - env(safe-area-inset-left, 0px))); }
    #right-panel-wrapper { right: calc(4rem + env(safe-area-inset-right, 0px)); transform: translateX(calc(100% + 4rem + env(safe-area-inset-right, 0px))); }

    /* Show Rail on Mobile with directional shadows */
    body.rail-open #left-rail { transform: translateX(0); pointer-events: auto; box-shadow: 10px 0 30px rgba(0,0,0,0.1); }
    body.right-rail-open #right-rail { transform: translateX(0); pointer-events: auto; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }

    /* 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); }

    body.has-left-panel #left-panel-wrapper { transform: translateX(0); pointer-events: auto; box-shadow: 10px 0 30px rgba(0,0,0,0.1); }
    body.has-right-panel #right-panel-wrapper { transform: translateX(0); pointer-events: auto; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }
}

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

@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: 200;
    background: var(--bg-3, #e5e5e5); /* Solid Fallback */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(4rem + env(safe-area-inset-top, 0px));
}
@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; }
.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); }
[class^="i-"] { display: flex; align-items: center; justify-content: center; }
.active-item > .active-indicator { opacity: 1; }
#left-rail .active-indicator, #right-rail .active-indicator { opacity: 0; }
body.has-left-panel #left-rail .active-item > .active-indicator { opacity: 1; }
body.has-right-panel #right-rail .active-item > .active-indicator { opacity: 1; }
#left-rail .active-indicator { left: -1px; border-radius: 0 4px 4px 0; }
#right-rail .active-indicator { right: -1px; border-radius: 4px 0 0 4px; }

/* 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%); }

/* Show indicator only when the corresponding side's panel is active */

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