/* ═══════════════════════════════════════════════════════════
   ZAD — Cinematic depth (body.ui-depth-on)
   Goals: wow + FPS. No infinite panel animations, no per-card
   backdrop-filter, no scan sweeps (those caused flicker/lag).
   ═══════════════════════════════════════════════════════════ */

body.ui-depth-on {
    --depth-lift: 0.28rem;
    --hud-glow: color-mix(in srgb, var(--accent, #0078d4) 35%, transparent);
    --depth-edge: color-mix(in srgb, var(--accent, #0078d4) 42%, transparent);
    --depth-shadow:
        0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
        0 0 0 1px var(--depth-edge),
        0 4px 0 color-mix(in srgb, var(--accent, #0078d4) 14%, transparent),
        0 12px 28px color-mix(in srgb, #000 14%, transparent);
    --depth-shadow-hover:
        0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
        0 0 0 1px color-mix(in srgb, var(--accent, #0078d4) 70%, #fff),
        0 0 18px var(--hud-glow),
        0 6px 0 color-mix(in srgb, var(--accent, #0078d4) 22%, transparent),
        0 18px 36px color-mix(in srgb, #000 18%, transparent);
}

/* One static stage layer — cheap paint, no animation */
body.ui-depth-on .app-shell {
    position: relative;
    isolation: isolate;
}
body.ui-depth-on .app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 92% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
        radial-gradient(720px 380px at -6% 108%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg, #f4f7fb) 92%, var(--accent)) 0%,
            var(--bg, #f4f7fb) 48%,
            color-mix(in srgb, var(--bg, #f4f7fb) 94%, #000) 100%
        );
}
body.ui-depth-on .sidebar,
body.ui-depth-on .main-wrapper {
    position: relative;
    z-index: 1;
}

/* Surfaces: cartoon edge + soft lift — static */
body.ui-depth-on .panel-card,
body.ui-depth-on .stat-card,
body.ui-depth-on .reports-hub-card,
body.ui-depth-on .dash-hero,
body.ui-depth-on .imv-panel,
body.ui-depth-on .modal-card,
body.ui-depth-on .modal-panel,
body.ui-depth-on .settings-drawer,
body.ui-depth-on .invoice-filter-chrome {
    border-radius: 16px !important;
    border: 1.5px solid color-mix(in srgb, var(--accent) 38%, transparent) !important;
    box-shadow: var(--depth-shadow) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    will-change: auto;
}

body.ui-depth-on .panel-card:hover,
body.ui-depth-on .stat-card:hover,
body.ui-depth-on .reports-hub-card:hover {
    /* No lift — caused page "dance" when hovering hint icons / table cells inside cards */
    transform: none;
    box-shadow: var(--depth-shadow-hover) !important;
}

/* Hero: one strong focal — no float loop */
body.ui-depth-on .dash-hero {
    border-width: 2px !important;
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset,
        0 0 0 1px color-mix(in srgb, #fff 22%, var(--accent)),
        0 0 28px color-mix(in srgb, var(--dash-hero-glow, var(--accent)) 28%, transparent),
        0 10px 0 color-mix(in srgb, var(--accent) 18%, transparent),
        0 22px 40px color-mix(in srgb, #000 22%, transparent) !important;
}
body.ui-depth-on .dash-hero-title {
    text-shadow: 0 0 18px color-mix(in srgb, #fff 25%, transparent);
}
body.ui-depth-on .dash-action {
    border: 1.5px solid color-mix(in srgb, #fff 40%, transparent) !important;
    box-shadow:
        0 0 10px color-mix(in srgb, currentColor 22%, transparent),
        0 4px 0 color-mix(in srgb, #000 20%, transparent) !important;
    transition: transform 0.15s ease, filter 0.15s ease;
}
body.ui-depth-on .dash-action:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.06);
}
body.ui-depth-on .stat-value,
body.ui-depth-on .kpi-value {
    text-shadow: 0 0 10px var(--hud-glow);
}

/* Chrome chips stay flat & equal — never HUD-inflate */
body.ui-depth-on .fiscal-strip,
body.ui-depth-on .chrome-date-filter,
body.ui-depth-on .pos-shift-chip,
body.ui-depth-on .cf-trail-row,
body.ui-depth-on .compact-filter-trail {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    animation: none !important;
    overflow: hidden;
}
body.ui-depth-on .fiscal-strip,
body.ui-depth-on .chrome-date-filter,
body.ui-depth-on .pos-shift-chip--inline {
    border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--text) 8%, transparent) inset,
        0 3px 0 color-mix(in srgb, var(--accent) 12%, transparent),
        0 8px 16px color-mix(in srgb, #000 8%, transparent) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--card, #fff)) !important;
    color: var(--text) !important;
}
body.ui-depth-on .dash-context-bar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
}

/* Top bar / sidebar: thin accent only */
body.ui-depth-on .top-bar {
    border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, #000 8%, transparent);
}
body.ui-depth-on .sidebar {
    border-inline-end: 1.5px solid color-mix(in srgb, var(--accent) 32%, transparent);
    box-shadow: 8px 0 24px color-mix(in srgb, #000 8%, transparent);
}
body.ui-depth-on .top-title {
    text-shadow: 0 0 12px var(--hud-glow);
}
body.ui-depth-on .nav-item.active,
body.ui-depth-on .sidebar a.active {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
        0 0 12px var(--hud-glow);
}

body.ui-depth-on .btn-primary,
body.ui-depth-on .tab-btn.active,
body.ui-depth-on .cdf-btn-apply {
    box-shadow:
        0 0 10px color-mix(in srgb, var(--accent) 28%, transparent),
        0 3px 0 color-mix(in srgb, var(--accent) 30%, #000) !important;
}

/* POS: readable, almost no depth cost */
body.ui-depth-on .pos-left.panel-card,
body.ui-depth-on .pos-right.panel-card {
    transform: none !important;
}
body.ui-depth-on .pos-left.panel-card:hover,
body.ui-depth-on .pos-right.panel-card:hover {
    transform: none !important;
}
body.ui-depth-on .item-tile,
body.ui-depth-on .product-tile {
    border: 1.5px solid color-mix(in srgb, var(--accent) 28%, transparent);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 10%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.ui-depth-on .item-tile:hover,
body.ui-depth-on .product-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px var(--hud-glow), 0 5px 0 color-mix(in srgb, var(--accent) 16%, transparent);
}

body.ui-depth-on .dash-calc-banner {
    border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

/* Toggle */
.depth-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--accent, #0078d4) 45%, transparent);
    background: color-mix(in srgb, var(--card, #fff) 85%, var(--accent, #0078d4));
    color: var(--accent, #0078d4);
    cursor: pointer;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.depth-toggle:hover {
    transform: translateY(-1px) scale(1.05);
}
.depth-toggle.is-on {
    background: linear-gradient(145deg, var(--accent, #0078d4), color-mix(in srgb, var(--accent, #0078d4) 45%, #111));
    color: #fff;
    border-color: color-mix(in srgb, #fff 35%, transparent);
    box-shadow: 0 0 14px var(--hud-glow), 0 3px 0 color-mix(in srgb, var(--accent) 35%, #000);
}
.depth-toggle svg { width: 1.1rem; height: 1.1rem; display: block; }

@media (prefers-reduced-motion: reduce) {
    body.ui-depth-on .panel-card,
    body.ui-depth-on .stat-card,
    body.ui-depth-on .reports-hub-card,
    body.ui-depth-on .dash-action,
    body.ui-depth-on .item-tile,
    body.ui-depth-on .product-tile,
    body.ui-depth-on .depth-toggle {
        transition: none !important;
    }
    body.ui-depth-on .panel-card:hover,
    body.ui-depth-on .stat-card:hover,
    body.ui-depth-on .reports-hub-card:hover,
    body.ui-depth-on .dash-action:hover,
    body.ui-depth-on .item-tile:hover,
    body.ui-depth-on .product-tile:hover {
        transform: none !important;
    }
}

@media print {
    body.ui-depth-on .app-shell::before {
        display: none !important;
    }
    body.ui-depth-on .panel-card,
    body.ui-depth-on .stat-card,
    body.ui-depth-on .reports-hub-card,
    body.ui-depth-on .dash-hero {
        box-shadow: none !important;
        transform: none !important;
        border-color: #999 !important;
    }
}