/* Explicit, device-local presentation override. Business controls stay intact.
   !important is limited to the user's opt-in motion/compositing preference so
   isolated component styles cannot silently restore expensive effects. */
html[data-performance="lite"] {
    /* Resolve at the root, before page-local translucent surface aliases. */
    --zj-performance-surface: var(--zj-surface-container-lowest);
    --zj-glass-blur: 0px;
    --zj-glass-bg: var(--zj-surface-container-lowest);
    --zj-glass-bg-strong: var(--zj-surface-container-lowest);
    --zj-shadow-sm: none;
    --zj-shadow-xs: none;
    --zj-shadow-md: none;
    --zj-shadow-lg: none;
    --zj-shadow-xl: none;
    --zj-shadow-2xl: none;
    --zj-transition-fast: 0s;
    --zj-transition-normal: 0s;
    --zj-transition-slow: 0s;
}

html[data-performance="lite"] *,
html[data-performance="lite"] *::before,
html[data-performance="lite"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* This is a confirmation timer, not decoration: keep its two-second cue. */
html[data-performance="lite"] .staff-shift__hold-fill::before {
    transition-duration: 2s !important;
}

/* Decorative full-screen SVG noise has no operational meaning. */
html[data-performance="lite"] .auth-noise,
html[data-performance="lite"] .auth-card__glow { display: none; }
html[data-performance="lite"] .ambient-bg { background: var(--zj-background); }

html[data-performance="lite"] :is(.glass-panel, .glass-card, .auth-card, .topbar-popover, .cashier-detail-dialog) {
    /* Removing backdrop blur requires an opaque surface for readable content. */
    background: var(--zj-performance-surface) !important;
    box-shadow: none;
}

/* Keep an explicit keyboard indicator even on controls normally using a halo. */
html[data-performance="lite"] :focus-visible {
    outline: 2px solid var(--zj-on-surface) !important;
    outline-offset: 2px;
}

.device-performance { margin-block: var(--zj-space-4, 1rem); }
.auth-container > .device-performance { width: 100%; }