/* ============================================================
   ZAJAL DESIGN SYSTEM — "Illuminated Hearth" (Aura Theme)
   Single-file CSS architecture with CSS custom properties.
   Override --zj-* variables to create alternative themes.
   ============================================================ */

:root {
    --zj-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    /* A white label stays above 4.5:1 even for the lightest selectable primary hue. */
    --zj-ds-action-background: color-mix(in srgb, var(--zj-primary) 45%, #000000);
    --zj-ds-action-foreground: #ffffff;
    /* ── M3 Color Tokens ── */
    --zj-primary-rgb: 14, 165, 233;
    --zj-secondary-rgb: 23, 37, 84;
    --zj-tertiary-rgb: 245, 158, 11;
    --zj-outline-rgb: 148, 163, 184;

    --zj-primary: #0ea5e9;
    --zj-primary-container: #38bdf8;
    --zj-on-primary: #ffffff;
    --zj-on-primary-container: #082f49;
    --zj-on-primary-fixed: #082f49;
    --zj-on-primary-fixed-variant: #0369a1;
    --zj-primary-fixed: #e0f2fe;
    --zj-primary-fixed-dim: #7dd3fc;
    --zj-inverse-primary: #7dd3fc;

    --zj-secondary: #172554;
    --zj-secondary-container: #c7d2fe;
    --zj-on-secondary: #ffffff;
    --zj-on-secondary-container: #172554;
    --zj-on-secondary-fixed: #0f172a;
    --zj-on-secondary-fixed-variant: #1e3a8a;
    --zj-secondary-fixed: #e0e7ff;
    --zj-secondary-fixed-dim: #a5b4fc;

    --zj-tertiary: #f59e0b;
    --zj-tertiary-container: #fbbf24;
    --zj-on-tertiary: #ffffff;
    --zj-on-tertiary-container: #78350f;
    --zj-on-tertiary-fixed: #451a03;
    --zj-on-tertiary-fixed-variant: #92400e;
    --zj-tertiary-fixed: #fef3c7;
    --zj-tertiary-fixed-dim: #fcd34d;

    --zj-error: #ba1a1a;
    --zj-error-container: #ffdad6;
    --zj-on-error: #ffffff;
    --zj-on-error-container: #93000a;

    /* Semantic Colors (not in M3 but needed for UI) */
    --zj-success: #0f9d7a;
    --zj-success-container: rgba(16, 185, 129, 0.1);
    --zj-warning: #d97706;
    --zj-warning-container: rgba(245, 158, 11, 0.1);
    --zj-info: #2563eb;
    --zj-info-container: rgba(59, 130, 246, 0.1);

    --zj-surface: #f4fbff;
    --zj-surface-dim: #dbe7f0;
    --zj-surface-bright: #f4fbff;
    --zj-surface-variant: #e2edf5;
    --zj-surface-container-lowest: #ffffff;
    --zj-surface-container-low: #f5faff;
    --zj-surface-container: #eef6fb;
    --zj-surface-container-high: #e6f0f7;
    --zj-surface-container-highest: #dbe7f0;
    --zj-surface-tint: #0ea5e9;

    --zj-on-surface: #0f172a;
    --zj-on-surface-variant: #475569;
    --zj-on-background: #0f172a;
    --zj-background: #f4fbff;

    --zj-outline: #94a3b8;
    --zj-outline-variant: #d3e1eb;

    --zj-inverse-surface: #172033;
    --zj-inverse-on-surface: #eff6ff;

    /* Shared form surfaces are tokens so every field follows the active theme. */
    --zj-field-surface: #ffffff;
    --zj-field-surface-focus: #ffffff;
    --zj-field-menu-surface: #ffffff;
    --zj-field-border: #d4c1b7;
    --zj-field-border-hover: #b08d79;
    --zj-field-border-focus: #964407;
    --zj-field-shadow: 0 1px 2px rgba(150, 68, 7, 0.04);
    --zj-field-focus-ring: 0 0 0 3.5px rgba(150, 68, 7, 0.16);

    /* Semantic field tokens with WCAG AA >= 4.5:1 contrast guarantee */
    --zj-input-placeholder: #52525b;
    --zj-input-placeholder-muted: #6b7280;
    --zj-field-placeholder: var(--zj-input-placeholder);
    --zj-field-surface-disabled: #f1f5f9;
    --zj-field-border-disabled: #cbd5e1;
    --zj-on-field-disabled: #64748b;

    /* ── Typography ── */
    --zj-font-headline: 'Cairo', 'Plus Jakarta Sans', Tahoma, Arial, sans-serif;
    --zj-font-body: 'Cairo', 'Manrope', Tahoma, Arial, sans-serif;
    --zj-font-label: 'Manrope', 'Cairo', Tahoma, Arial, sans-serif;

    /* ── Border Radius ── */
    --zj-radius-sm: 0.25rem;    /* 4px */
    --zj-radius-md: 0.5rem;     /* 8px */
    --zj-radius-lg: 0.75rem;    /* 12px */
    --zj-radius-xl: 1rem;       /* 16px */
    --zj-radius-2xl: 1.5rem;    /* 24px */
    --zj-radius-3xl: 2rem;      /* 32px */
    --zj-radius-full: 9999px;

    /* ── Shadows (tinted, not pure black per design spec) ── */
    --zj-shadow-sm: 0 1px 3px rgba(22, 29, 29, 0.04);
    --zj-shadow-md: 0 4px 12px rgba(22, 29, 29, 0.06);
    --zj-shadow-lg: 0 8px 32px rgba(22, 29, 29, 0.08);
    --zj-shadow-xl: 0 16px 48px rgba(22, 29, 29, 0.12);
    --zj-shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.15);

    /* ── Glassmorphism ── */
    --zj-glass-bg: rgba(255, 255, 255, 0.6);
    --zj-glass-bg-strong: rgba(255, 255, 255, 0.8);
    --zj-glass-blur: 24px;
    --zj-glass-border: 1px solid rgba(148, 163, 184, 0.16);
    --zj-glass-border-light: 1px solid rgba(255, 255, 255, 0.3);
    --zj-ghost-border: 1px solid rgba(148, 163, 184, 0.18);

    /* ── Transitions ── */
    --zj-transition-fast: 150ms ease;
    --zj-transition-normal: 250ms ease;
    --zj-transition-slow: 400ms ease;

    /* ── Sidebar ── */
    --zj-sidebar-width: 16rem;     /* 256px = w-64 */
    --zj-sidebar-collapsed-width: 4.5rem;
    --zj-topbar-height: 4rem;       /* 64px */
    --zj-mobile-topbar-offset: var(--zj-topbar-height);

    /* Compatibility aliases for pre-Aura pages migrated from isolated CSS */
    --color-bg: var(--zj-background);
    --color-surface: var(--zj-surface-container-lowest);
    --color-surface-low: var(--zj-surface-container-low);
    --color-surface-high: var(--zj-surface-container-high);
    --color-surface-highest: var(--zj-surface-container-highest);
    --color-primary: var(--zj-primary);
    --color-primary-hover: var(--zj-primary-container);
    --color-secondary: var(--zj-secondary);
    --color-tertiary: var(--zj-tertiary);
    --color-success: var(--zj-success);
    --color-warning: var(--zj-warning);
    --color-error: var(--zj-error);
    --color-text: var(--zj-on-surface);
    --color-text-muted: var(--zj-on-surface-variant);
    --color-outline: var(--zj-outline);
    --color-border: var(--zj-outline-variant);
    --color-primary-contrast: var(--zj-on-primary);
    --color-info-ink: var(--zj-info);
    --color-success-ink: var(--zj-success);
    --color-warning-ink: var(--zj-warning);
    --color-error-ink: #8b1f1f;
    --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(238, 246, 251, 0.93));
    --surface-elevated: rgba(255, 255, 255, 0.94);
    --surface-accent-soft: rgba(14, 165, 233, 0.10);
    --surface-accent-soft-strong: rgba(14, 165, 233, 0.14);
    --surface-accent-soft-muted: rgba(14, 165, 233, 0.05);
    --surface-success-soft: rgba(16, 185, 129, 0.14);
    --surface-warning-soft: rgba(245, 158, 11, 0.14);
    --surface-error-soft: rgba(239, 68, 68, 0.12);
    --surface-neutral-soft: rgba(100, 116, 139, 0.12);
    --surface-warm: rgba(245, 158, 11, 0.08);
    --panel-border: 1px solid rgba(148, 163, 184, 0.18);
    --ambient-shadow: var(--zj-shadow-lg);
    --ambient-shadow-soft: var(--zj-shadow-md);
    --brand-gradient: linear-gradient(180deg, #38bdf8, #0ea5e9);
    --brand-gradient-strong: linear-gradient(180deg, #7dd3fc, #0ea5e9);
    --brand-gradient-ink: var(--zj-on-primary);
    --console-surface: #1e2438;
    --console-text: #d8def7;
    --console-muted: #aeb8dd;
    --shadow-sm: var(--zj-shadow-sm);
    --shadow-md: var(--zj-shadow-md);
    --shadow-lg: var(--zj-shadow-lg);
    --radius-sm: var(--zj-radius-sm);
    --radius-md: var(--zj-radius-md);
    --radius-lg: var(--zj-radius-lg);
    --font-family: var(--zj-font-body);
    --font-display: var(--zj-font-headline);
    --transition-fast: var(--zj-transition-fast);
    --transition-normal: var(--zj-transition-normal);
    --ghost-border-color: rgba(141, 113, 104, 0.18);
}

:root[data-color-theme="admin-gold-light"] {
    --zj-primary-rgb: 197, 160, 89;
    --zj-secondary-rgb: 38, 38, 38;
    --zj-tertiary-rgb: 143, 165, 214;
    --zj-outline-rgb: 163, 151, 129;

    --zj-primary: #c5a059;
    --zj-primary-container: #d7b26d;
    --zj-on-primary: #16110a;
    --zj-on-primary-container: #3c2f15;
    --zj-on-primary-fixed: #2a210f;
    --zj-on-primary-fixed-variant: #6d5525;
    --zj-primary-fixed: #f1e0b8;
    --zj-primary-fixed-dim: #dbba73;
    --zj-inverse-primary: #efd39a;

    --zj-secondary: #262626;
    --zj-secondary-container: #ddd6cf;
    --zj-on-secondary: #ffffff;
    --zj-on-secondary-container: #121212;
    --zj-on-secondary-fixed: #121212;
    --zj-on-secondary-fixed-variant: #444444;
    --zj-secondary-fixed: #ece7e1;
    --zj-secondary-fixed-dim: #b9b0a7;

    --zj-tertiary: #8fa5d6;
    --zj-tertiary-container: #ced9f2;
    --zj-on-tertiary: #11192f;
    --zj-on-tertiary-container: #2a3554;
    --zj-on-tertiary-fixed: #11192f;
    --zj-on-tertiary-fixed-variant: #50679a;
    --zj-tertiary-fixed: #e4ebfb;
    --zj-tertiary-fixed-dim: #bac9ec;

    --zj-surface: #f7f3ed;
    --zj-surface-dim: #e1d8cc;
    --zj-surface-bright: #fffbf6;
    --zj-surface-variant: #ece2d4;
    --zj-surface-container-lowest: #fffdfa;
    --zj-surface-container-low: #faf6f0;
    --zj-surface-container: #f3ede3;
    --zj-surface-container-high: #ece4d8;
    --zj-surface-container-highest: #e2d8ca;
    --zj-surface-tint: #c5a059;

    --zj-on-surface: #121212;
    --zj-on-surface-variant: #51483e;
    --zj-on-background: #121212;
    --zj-background: #f7f3ed;

    --zj-outline: #a39781;
    --zj-outline-variant: #ddd2c3;

    --zj-inverse-surface: #1d1b18;
    --zj-inverse-on-surface: #faf6f1;

    --zj-glass-bg: rgba(255, 249, 241, 0.64);
    --zj-glass-bg-strong: rgba(255, 251, 246, 0.84);
    --zj-glass-border: 1px solid rgba(163, 151, 129, 0.2);
    --zj-glass-border-light: 1px solid rgba(255, 255, 255, 0.42);
    --zj-ghost-border: 1px solid rgba(163, 151, 129, 0.22);

    --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 240, 231, 0.93));
    --surface-elevated: rgba(255, 251, 246, 0.94);
    --surface-accent-soft: rgba(197, 160, 89, 0.12);
    --surface-accent-soft-strong: rgba(197, 160, 89, 0.18);
    --surface-accent-soft-muted: rgba(197, 160, 89, 0.07);
    --surface-neutral-soft: rgba(38, 38, 38, 0.08);
    --surface-warm: rgba(197, 160, 89, 0.12);
    --panel-border: 1px solid rgba(163, 151, 129, 0.18);
    --ambient-shadow: 0 18px 42px rgba(29, 27, 24, 0.12);
    --ambient-shadow-soft: 0 10px 28px rgba(29, 27, 24, 0.08);
    --brand-gradient: linear-gradient(180deg, #d7b26d, #c5a059);
    --brand-gradient-strong: linear-gradient(180deg, #edd7a7, #c5a059);
    --brand-gradient-ink: #16110a;
    --console-surface: #1b1b1b;
    --console-text: #f4efe8;
    --console-muted: #c8beb1;
    --ghost-border-color: rgba(163, 151, 129, 0.22);
}

:root[data-color-theme="customer-sunset-light"] {
    --zj-primary-rgb: 255, 111, 24;
    --zj-secondary-rgb: 110, 74, 45;
    --zj-tertiary-rgb: 230, 169, 110;
    --zj-outline-rgb: 191, 168, 143;

    --zj-primary: #ff6f18;
    --zj-primary-container: #ff944d;
    --zj-on-primary: #ffffff;
    --zj-on-primary-container: #4e1f00;
    --zj-on-primary-fixed: #4e1f00;
    --zj-on-primary-fixed-variant: #8d3700;
    --zj-primary-fixed: #ffe2cf;
    --zj-primary-fixed-dim: #ffb17c;
    --zj-inverse-primary: #ffb17c;

    --zj-secondary: #6e4a2d;
    --zj-secondary-container: #efd8c4;
    --zj-on-secondary: #ffffff;
    --zj-on-secondary-container: #2c1705;
    --zj-on-secondary-fixed: #2c1705;
    --zj-on-secondary-fixed-variant: #56371e;
    --zj-secondary-fixed: #f8e9dc;
    --zj-secondary-fixed-dim: #d7b494;

    --zj-tertiary: #e6a96e;
    --zj-tertiary-container: #f7d8b8;
    --zj-on-tertiary: #44240b;
    --zj-on-tertiary-container: #5c3414;
    --zj-on-tertiary-fixed: #44240b;
    --zj-on-tertiary-fixed-variant: #915425;
    --zj-tertiary-fixed: #fde9d5;
    --zj-tertiary-fixed-dim: #f2c79f;

    --zj-surface: #fff7ef;
    --zj-surface-dim: #eadbcc;
    --zj-surface-bright: #fffdf9;
    --zj-surface-variant: #f8eadc;
    --zj-surface-container-lowest: #fffdfa;
    --zj-surface-container-low: #fff8f1;
    --zj-surface-container: #fdf2e7;
    --zj-surface-container-high: #f7ebde;
    --zj-surface-container-highest: #efe1d2;
    --zj-surface-tint: #ff6f18;

    --zj-on-surface: #2f2116;
    --zj-on-surface-variant: #7b624d;
    --zj-on-background: #2f2116;
    --zj-background: #fff7ef;

    --zj-outline: #bfa88f;
    --zj-outline-variant: #ead8c4;

    --zj-inverse-surface: #35261c;
    --zj-inverse-on-surface: #fff8f2;

    --zj-glass-bg: rgba(255, 249, 242, 0.68);
    --zj-glass-bg-strong: rgba(255, 252, 247, 0.86);
    --zj-glass-border: 1px solid rgba(191, 168, 143, 0.2);
    --zj-glass-border-light: 1px solid rgba(255, 255, 255, 0.45);
    --zj-ghost-border: 1px solid rgba(191, 168, 143, 0.22);

    --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 243, 231, 0.94));
    --surface-elevated: rgba(255, 252, 247, 0.95);
    --surface-accent-soft: rgba(255, 111, 24, 0.12);
    --surface-accent-soft-strong: rgba(255, 111, 24, 0.18);
    --surface-accent-soft-muted: rgba(255, 111, 24, 0.07);
    --surface-neutral-soft: rgba(110, 74, 45, 0.08);
    --surface-warm: rgba(230, 169, 110, 0.16);
    --panel-border: 1px solid rgba(191, 168, 143, 0.18);
    --ambient-shadow: 0 18px 42px rgba(98, 61, 31, 0.12);
    --ambient-shadow-soft: 0 10px 28px rgba(98, 61, 31, 0.08);
    --brand-gradient: linear-gradient(180deg, #ff944d, #ff6f18);
    --brand-gradient-strong: linear-gradient(180deg, #ffc291, #ff7f2f);
    --brand-gradient-ink: #ffffff;
    --console-surface: #2d2018;
    --console-text: #fff0e4;
    --console-muted: #dcc3ae;
    --ghost-border-color: rgba(191, 168, 143, 0.22);
}

:root[data-color-theme="violet-light"] {
    --zj-primary-rgb: 124, 58, 237;
    --zj-secondary-rgb: 49, 46, 129;
    --zj-tertiary-rgb: 20, 184, 166;
    --zj-outline-rgb: 167, 139, 250;

    --zj-primary: #7c3aed;
    --zj-primary-container: #a78bfa;
    --zj-on-primary: #ffffff;
    --zj-on-primary-container: #2e1065;
    --zj-primary-fixed: #ede9fe;
    --zj-primary-fixed-dim: #c4b5fd;
    --zj-secondary: #312e81;
    --zj-secondary-container: #ddd6fe;
    --zj-on-secondary: #ffffff;
    --zj-on-secondary-container: #1e1b4b;
    --zj-tertiary: #14b8a6;
    --zj-tertiary-container: #ccfbf1;
    --zj-on-tertiary: #042f2e;
    --zj-surface: #fbf8ff;
    --zj-surface-dim: #e4ddf2;
    --zj-surface-bright: #fffcff;
    --zj-surface-variant: #eee7fb;
    --zj-surface-container-lowest: #ffffff;
    --zj-surface-container-low: #fbf8ff;
    --zj-surface-container: #f4effc;
    --zj-surface-container-high: #ece5f7;
    --zj-surface-container-highest: #e3daf2;
    --zj-surface-tint: #7c3aed;
    --zj-on-surface: #21182f;
    --zj-on-surface-variant: #5b4a70;
    --zj-on-background: #21182f;
    --zj-background: #fbf8ff;
    --zj-outline: #a78bfa;
    --zj-outline-variant: #ddd6fe;
    --zj-inverse-surface: #2a2238;
    --zj-inverse-on-surface: #f7f0ff;
    --surface-panel: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,240,255,0.94));
    --surface-elevated: rgba(255, 252, 255, 0.95);
    --surface-accent-soft: rgba(124, 58, 237, 0.12);
    --surface-accent-soft-strong: rgba(124, 58, 237, 0.18);
    --surface-accent-soft-muted: rgba(124, 58, 237, 0.07);
    --surface-neutral-soft: rgba(49, 46, 129, 0.08);
    --surface-warm: rgba(20, 184, 166, 0.12);
    --panel-border: 1px solid rgba(167, 139, 250, 0.2);
    --ambient-shadow: 0 18px 42px rgba(76, 29, 149, 0.12);
    --ambient-shadow-soft: 0 10px 28px rgba(76, 29, 149, 0.08);
    --brand-gradient: linear-gradient(180deg, #a78bfa, #7c3aed);
    --brand-gradient-strong: linear-gradient(180deg, #c4b5fd, #7c3aed);
    --brand-gradient-ink: #ffffff;
    --console-surface: #21182f;
    --console-text: #f1eaff;
    --console-muted: #cbbdf2;
    --ghost-border-color: rgba(167, 139, 250, 0.22);
}

:root[data-color-theme="emerald-light"] {
    --zj-primary-rgb: 5, 150, 105;
    --zj-secondary-rgb: 6, 78, 59;
    --zj-tertiary-rgb: 13, 148, 136;
    --zj-outline-rgb: 110, 161, 143;

    --zj-primary: #059669;
    --zj-primary-container: #34d399;
    --zj-on-primary: #ffffff;
    --zj-on-primary-container: #022c22;
    --zj-primary-fixed: #d1fae5;
    --zj-primary-fixed-dim: #6ee7b7;
    --zj-secondary: #064e3b;
    --zj-secondary-container: #bbf7d0;
    --zj-on-secondary: #ffffff;
    --zj-on-secondary-container: #022c22;
    --zj-tertiary: #0d9488;
    --zj-tertiary-container: #ccfbf1;
    --zj-on-tertiary: #042f2e;
    --zj-surface: #f4fbf7;
    --zj-surface-dim: #d9e8df;
    --zj-surface-bright: #fbfffd;
    --zj-surface-variant: #e2f1e8;
    --zj-surface-container-lowest: #ffffff;
    --zj-surface-container-low: #f7fdf9;
    --zj-surface-container: #eef8f2;
    --zj-surface-container-high: #e4f0e9;
    --zj-surface-container-highest: #d9e8df;
    --zj-surface-tint: #059669;
    --zj-on-surface: #10251c;
    --zj-on-surface-variant: #476355;
    --zj-on-background: #10251c;
    --zj-background: #f4fbf7;
    --zj-outline: #6ea18f;
    --zj-outline-variant: #cfe3da;
    --zj-inverse-surface: #142820;
    --zj-inverse-on-surface: #eefbf5;
    --surface-panel: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(239,249,243,0.94));
    --surface-elevated: rgba(251, 255, 253, 0.95);
    --surface-accent-soft: rgba(5, 150, 105, 0.12);
    --surface-accent-soft-strong: rgba(5, 150, 105, 0.18);
    --surface-accent-soft-muted: rgba(5, 150, 105, 0.07);
    --surface-neutral-soft: rgba(6, 78, 59, 0.08);
    --surface-warm: rgba(13, 148, 136, 0.12);
    --panel-border: 1px solid rgba(110, 161, 143, 0.2);
    --ambient-shadow: 0 18px 42px rgba(6, 95, 70, 0.11);
    --ambient-shadow-soft: 0 10px 28px rgba(6, 95, 70, 0.08);
    --brand-gradient: linear-gradient(180deg, #34d399, #059669);
    --brand-gradient-strong: linear-gradient(180deg, #86efac, #059669);
    --brand-gradient-ink: #ffffff;
    --console-surface: #10251c;
    --console-text: #e8fff5;
    --console-muted: #b7d6c8;
    --ghost-border-color: rgba(110, 161, 143, 0.22);
}

:root[data-color-theme="rose-light"] {
    --zj-primary-rgb: 219, 39, 119;
    --zj-secondary-rgb: 131, 24, 67;
    --zj-tertiary-rgb: 236, 72, 153;
    --zj-outline-rgb: 244, 114, 182;

    --zj-primary: #db2777;
    --zj-primary-container: #f472b6;
    --zj-on-primary: #ffffff;
    --zj-on-primary-container: #500724;
    --zj-primary-fixed: #fce7f3;
    --zj-primary-fixed-dim: #f9a8d4;
    --zj-secondary: #831843;
    --zj-secondary-container: #fbcfe8;
    --zj-on-secondary: #ffffff;
    --zj-on-secondary-container: #500724;
    --zj-tertiary: #ec4899;
    --zj-tertiary-container: #fce7f3;
    --zj-on-tertiary: #500724;
    --zj-surface: #fff7fb;
    --zj-surface-dim: #eadce5;
    --zj-surface-bright: #fffafd;
    --zj-surface-variant: #f8e8f1;
    --zj-surface-container-lowest: #ffffff;
    --zj-surface-container-low: #fff8fc;
    --zj-surface-container: #fdf0f7;
    --zj-surface-container-high: #f5e7ef;
    --zj-surface-container-highest: #eadce5;
    --zj-surface-tint: #db2777;
    --zj-on-surface: #2f1724;
    --zj-on-surface-variant: #70475d;
    --zj-on-background: #2f1724;
    --zj-background: #fff7fb;
    --zj-outline: #f472b6;
    --zj-outline-variant: #fbcfe8;
    --zj-inverse-surface: #361f2b;
    --zj-inverse-on-surface: #fff0f8;
    --surface-panel: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,240,248,0.94));
    --surface-elevated: rgba(255, 250, 253, 0.95);
    --surface-accent-soft: rgba(219, 39, 119, 0.12);
    --surface-accent-soft-strong: rgba(219, 39, 119, 0.18);
    --surface-accent-soft-muted: rgba(219, 39, 119, 0.07);
    --surface-neutral-soft: rgba(131, 24, 67, 0.08);
    --surface-warm: rgba(236, 72, 153, 0.12);
    --panel-border: 1px solid rgba(244, 114, 182, 0.2);
    --ambient-shadow: 0 18px 42px rgba(190, 24, 93, 0.11);
    --ambient-shadow-soft: 0 10px 28px rgba(190, 24, 93, 0.08);
    --brand-gradient: linear-gradient(180deg, #f472b6, #db2777);
    --brand-gradient-strong: linear-gradient(180deg, #f9a8d4, #db2777);
    --brand-gradient-ink: #ffffff;
    --console-surface: #2f1724;
    --console-text: #fff0f8;
    --console-muted: #eab8d2;
    --ghost-border-color: rgba(244, 114, 182, 0.22);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

html[dir="rtl"] {
    direction: rtl;
}

html[dir="ltr"] {
    direction: ltr;
}

body {
    font-family: var(--zj-font-body);
    background-color: var(--zj-surface);
    color: var(--zj-on-surface);
    line-height: 1.6;
    text-align: start;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── LTR inputs ── */
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"] {
    direction: ltr;
    text-align: left;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--zj-font-headline);
    line-height: 1.2;
    font-weight: 800;
    color: var(--zj-on-surface);
}

/* ── Links ── */
a {
    color: var(--zj-primary);
    text-decoration: none;
    transition: color var(--zj-transition-fast);
}
a:hover { color: var(--zj-primary-container); }

/* ── Material Symbols ── */
.material-symbols-outlined {
    inline-size: 1em;
    block-size: 1em;
    overflow: hidden;
    flex-shrink: 0;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Focus ring ── */
:focus-visible {
    outline: none;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* ── Selection ── */
::selection {
    background: var(--zj-primary-container);
    color: var(--zj-on-primary);
}

/* ── Glass Surfaces ── */
.glass-panel {
    background: var(--zj-glass-bg);
    backdrop-filter: blur(var(--zj-glass-blur));
    -webkit-backdrop-filter: blur(var(--zj-glass-blur));
    border: var(--zj-glass-border);
}

.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(var(--zj-glass-blur));
    -webkit-backdrop-filter: blur(var(--zj-glass-blur));
    border: var(--zj-glass-border-light);
}

.ghost-border {
    border: var(--zj-ghost-border);
}

/* ── Ambient Backgrounds ── */
.ambient-bg {
    background:
        radial-gradient(circle at 0% 0%, var(--zj-primary-container) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, var(--zj-on-secondary-fixed-variant) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, var(--zj-primary) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, var(--zj-on-surface) 0%, transparent 50%),
        var(--zj-surface);
}

/* ============================================================
   BUTTONS
   ============================================================ */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--zj-radius-lg);
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.1;
    min-height: 2.75rem;
    cursor: pointer;
    transition: all var(--zj-transition-fast);
    text-decoration: none;
}

.btn:hover,
.btn:focus-visible,
a.btn:hover,
a.btn:focus-visible {
    text-decoration: none;
}

.btn-primary {
    background: var(--zj-primary);
    color: var(--zj-on-primary);
box-shadow: 0 12px 24px rgba(14, 165, 233, 0.2);
}
.btn-primary:hover,
.btn-primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus-visible {
    color: var(--zj-on-primary);
box-shadow: 0 12px 24px rgba(14, 165, 233, 0.35);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--zj-surface-container-low);
    color: var(--zj-on-surface);
    border: var(--zj-ghost-border);
}
.btn-secondary:hover,
.btn-secondary:focus-visible,
a.btn-secondary:hover,
a.btn-secondary:focus-visible {
    background: var(--zj-surface-container);
    color: var(--zj-on-surface);
}

.btn-danger {
    background: var(--zj-error);
    color: var(--zj-on-error);
    box-shadow: 0 8px 16px rgba(186, 26, 26, 0.2);
}
.btn-danger:hover,
.btn-danger:focus-visible,
a.btn-danger:hover,
a.btn-danger:focus-visible {
    color: var(--zj-on-error);
    box-shadow: 0 8px 16px rgba(186, 26, 26, 0.35);
}

.btn-ghost {
    background: transparent;
    color: var(--zj-on-surface-variant);
    padding: 0.5rem 0.75rem;
}
.btn-ghost:hover,
.btn-ghost:focus-visible,
a.btn-ghost:hover,
a.btn-ghost:focus-visible {
    background: var(--zj-surface-container-low);
    color: var(--zj-on-surface);
}

.btn-icon {
    padding: 0.625rem;
    border-radius: var(--zj-radius-lg);
}

/* Glass button (for dark/image overlays) */
.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffffff;
    border-radius: var(--zj-radius-lg);
}
.btn-glass:hover,
.btn-glass:focus-visible,
a.btn-glass:hover,
a.btn-glass:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Shimmer animation for auth CTA */
.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 700ms;
}
.btn-shimmer:hover::after { transform: translateX(100%); }

button:disabled, .btn:disabled, .btn[aria-disabled="true"] {
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    background: rgba(var(--zj-primary-rgb), 0.52);
    color: rgba(255, 255, 255, 0.96);
}

.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
    background: rgba(var(--zj-outline-rgb), 0.08);
    color: rgba(15, 23, 42, 0.62);
    border-color: rgba(var(--zj-outline-rgb), 0.14);
}

.btn-danger:disabled,
.btn-danger[aria-disabled="true"] {
    background: rgba(186, 26, 26, 0.52);
    color: rgba(255, 255, 255, 0.96);
}

.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
    background: transparent;
    color: rgba(15, 23, 42, 0.46);
}

.btn-glass:disabled,
.btn-glass[aria-disabled="true"] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }

.form-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--zj-on-surface-variant);
}

.form-input,
.form-select,
.form-textarea,
.form-control {
    width: 100%;
    min-height: var(--zj-control-height);
    padding: var(--zj-control-padding-block) 1rem;
    background: var(--zj-field-surface);
    border: 1.5px solid var(--zj-field-border);
    border-radius: var(--zj-radius-lg);
    font-family: inherit;
    font-size: var(--zj-control-font-size);
    line-height: 1.5;
    color: var(--zj-on-surface);
    box-shadow: var(--zj-field-shadow);
    transition:
        border-color var(--zj-transition-fast),
        box-shadow var(--zj-transition-fast),
        background-color var(--zj-transition-fast);
    direction: rtl;
    text-align: right;
    appearance: none;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover,
.form-control:hover {
    border-color: var(--zj-field-border-hover);
}

.form-input::placeholder,
.form-textarea::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--zj-field-placeholder);
    opacity: 1;
}

.form-input[dir="ltr"],
.form-textarea[dir="ltr"],
.form-control[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-control:focus {
    outline: none;
    border-color: var(--zj-field-border-focus);
    box-shadow: var(--zj-field-focus-ring);
    background: var(--zj-field-surface-focus);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled,
.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--zj-field-surface-disabled);
    border-color: var(--zj-field-border-disabled);
    color: var(--zj-on-field-disabled);
    cursor: not-allowed;
    opacity: 0.75;
}

.form-input.is-invalid,
.form-textarea.is-invalid,
.form-control.is-invalid,
.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.form-control[aria-invalid="true"] {
    border-color: var(--zj-error);
    box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.15);
}

/* ── أنماط الحقول الثابتة المعتمدة في النظام (Fixed Field System Presets) ── */

/* النمط الأول: كلاسيكي بحواف نقية وظهور عالي (Default Outlined) */
.form-control--outlined,
.form-input--outlined {
    background: var(--zj-field-surface);
    border: 1.5px solid var(--zj-field-border);
}

/* النمط الثاني: مساحة عمل دافئة مريحة للعين (Filled / Warm Tinted Container) */
.form-control--filled,
.form-input--filled {
    background: #fff8f4;
    border: 1.5px solid #dbc1b5;
}
.form-control--filled:hover,
.form-input--filled:hover {
    border-color: var(--zj-field-border-hover);
    background: #ffffff;
}
.form-control--filled:focus,
.form-input--filled:focus {
    background: var(--zj-field-surface-focus);
    border-color: var(--zj-field-border-focus);
    box-shadow: var(--zj-field-focus-ring);
}

/* النمط الثالث: كبسولة دائرية فاخرة للبحث والفلاتر (Pill / Search Shell) */
.form-control--pill,
.form-input--pill {
    border-radius: var(--zj-radius-full);
    padding-inline-start: 1.25rem;
    padding-inline-end: 1.25rem;
}

/* النمط الرابع: مدمج للجداول والنوافذ المنبثقة السريعة (Dense / Compact) */
.form-control--dense,
.form-input--dense,
.form-control-sm {
    min-height: 2.25rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--zj-radius-md);
}

/* النمط الخامس: بارز للعمليات القيادية وشاشات التسجيل (Hero / Large) */
.form-control--hero,
.form-input--hero,
.form-control-lg {
    min-height: 3.25rem;
    padding: 0.95rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--zj-radius-xl);
}

/* Input with icon (icon positioned at start = right in RTL) */
.form-input-icon {
    position: relative;
    isolation: isolate;
}
.form-input-icon .form-input {
    padding-inline-start: 3rem;
}
.form-input-icon > .material-symbols-outlined {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    direction: inherit;
    color: var(--zj-on-surface-variant);
    transition: color var(--zj-transition-fast);
}
.form-input-icon:focus-within > .material-symbols-outlined {
    color: var(--zj-primary);
}

.form-input-icon--password .form-input {
    padding-inline-end: 3.5rem;
}

/* Search fields inherit the shared field dimensions, state and theme.
   Only an actual icon wrapper reserves leading space. */
.search-bar .form-input,
.table-filters__search-shell .form-input {
    padding-inline-start: 3rem;
}

.search-bar .material-symbols-outlined,
.table-filters__search-shell .material-symbols-outlined {
    inset-inline-start: 1.05rem;
    font-size: 1.15rem;
    z-index: 1;
}

.zj-autocomplete-host {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    direction: inherit;
}

.zj-autocomplete-host.is-enhanced > .zj-autocomplete-host__native {
    display: none;
}

.zj-autocomplete-host__mount,
.zj-autocomplete {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.zj-autocomplete__control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--zj-control-height);
    box-sizing: border-box;
    border: 1px solid var(--zj-field-border, #d4c1b7);
    border-radius: var(--zj-radius-lg);
    background: var(--zj-field-surface, #ffffff);
    box-shadow: var(--zj-field-shadow);
    transition:
        border-color var(--zj-transition-fast),
        box-shadow var(--zj-transition-fast),
        background var(--zj-transition-fast);
}

.zj-autocomplete__control:hover {
    border-color: var(--zj-field-border-hover, #b08d79);
}

.zj-autocomplete__search-icon {
    position: absolute;
    inset-inline-start: 0.9rem;
    z-index: 1;
    color: var(--zj-on-surface-variant);
    font-size: 1.15rem;
    direction: inherit;
    pointer-events: none;
    transition: color var(--zj-transition-fast);
}

.zj-autocomplete__input {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--zj-control-height) - 2px);
    padding: var(--zj-control-padding-block) 2.75rem;
    border: 0;
    border-radius: inherit;
    outline: 0;
    background: transparent;
    color: var(--zj-on-surface);
    font-family: inherit;
    font-size: var(--zj-control-font-size);
    line-height: 1.5;
    box-sizing: border-box;
    text-align: start;
    direction: inherit;
}

.zj-autocomplete__input::placeholder {
    color: var(--zj-field-placeholder);
    opacity: 1;
}

.zj-autocomplete__trigger {
    position: absolute;
    inset-inline-end: 0.45rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--zj-radius-md);
    background: transparent;
    color: var(--zj-on-surface-variant);
    box-shadow: none;
    transform: translateY(-50%);
    transition:
        color var(--zj-transition-fast),
        background var(--zj-transition-fast);
}

.zj-autocomplete__trigger:hover {
    background: rgba(var(--zj-primary-rgb), 0.09);
    color: var(--zj-primary);
    transform: translateY(-50%);
}

.zj-autocomplete__trigger .material-symbols-outlined {
    transition: transform var(--zj-transition-fast);
}

.zj-autocomplete.is-open .zj-autocomplete__control,
.zj-autocomplete__control:focus-within {
    border-color: var(--zj-field-border-focus, #964407);
    box-shadow: var(--zj-field-focus-ring, 0 0 0 3.5px rgba(150, 68, 7, 0.16));
    background: var(--zj-field-surface-focus, #ffffff);
}

.zj-autocomplete.is-open .zj-autocomplete__search-icon,
.zj-autocomplete.is-open .zj-autocomplete__trigger {
    color: var(--zj-primary);
}

.zj-autocomplete.is-open .zj-autocomplete__trigger .material-symbols-outlined {
    transform: rotate(180deg);
}

.zj-autocomplete__menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.45rem);
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: min(
        calc(var(--zj-autocomplete-visible-items, 10) * 3rem + 1rem),
        22rem
    );
    overflow-y: auto;
    padding: 0.5rem;
    border: 1.5px solid var(--zj-field-border, #d4c1b7);
    border-radius: var(--zj-radius-xl);
    background: var(--zj-field-menu-surface, rgba(255, 255, 255, 0.97));
    box-shadow: var(--zj-shadow-xl);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overscroll-behavior: contain;
}

.zj-autocomplete__menu.is-portaled {
    position: fixed;
    inset: auto;
    z-index: 100000;
    margin: 0;
}

[data-theme="dark"] .zj-autocomplete__menu,
.dark .zj-autocomplete__menu {
    background: rgba(22, 30, 42, 0.97);
}

.zj-autocomplete__option {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.8rem;
    border: 0;
    border-radius: var(--zj-radius-lg);
    background: transparent;
    color: var(--zj-on-surface);
    box-shadow: none;
    font: inherit;
    text-align: start;
}

.zj-autocomplete__option:hover,
.zj-autocomplete__option.is-highlighted {
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
    transform: none;
}

.zj-autocomplete__option.is-selected {
    background: rgba(var(--zj-primary-rgb), 0.13);
    color: var(--zj-primary);
    font-weight: 700;
}

.zj-autocomplete__option:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.zj-autocomplete__option-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.zj-autocomplete__check {
    display: grid;
    place-items: center;
    color: var(--zj-primary);
}

.zj-autocomplete__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 4.5rem;
    padding: 1rem;
    color: var(--zj-on-surface-variant);
    text-align: center;
}

.zj-autocomplete__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-end: 0.45rem;
}

.zj-autocomplete__chips[hidden],
.zj-autocomplete__menu[hidden] {
    display: none;
}

.zj-autocomplete__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    min-height: 2rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(var(--zj-primary-rgb), 0.2);
    border-radius: 999px;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.zj-autocomplete__chip-label {
    overflow-wrap: anywhere;
    white-space: normal;
}

.zj-autocomplete__chip-remove {
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    min-height: 1.45rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    box-shadow: none;
}

.zj-autocomplete__chip-remove:hover {
    background: rgba(var(--zj-primary-rgb), 0.14);
    transform: none;
}

.zj-autocomplete__chip-remove .material-symbols-outlined {
    font-size: 1rem;
}

.zj-autocomplete__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0.2rem 0.65rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--zj-on-surface-variant);
    box-shadow: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
}

.zj-autocomplete__clear:hover {
    background: rgba(var(--zj-error-rgb, 186, 26, 26), 0.08);
    color: var(--zj-error);
    transform: none;
}

.zj-autocomplete__clear .material-symbols-outlined {
    font-size: 1rem;
}

.zj-autocomplete.is-disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.zj-autocomplete.is-invalid .zj-autocomplete__control {
    border-color: var(--zj-error);
    box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.1);
}

@media (max-width: 640px) {
    .zj-autocomplete__menu {
        max-height: min(18rem, 48vh);
    }

    .zj-autocomplete__option {
        min-height: 3rem;
    }
}

.zj-autocomplete-group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

.zj-autocomplete-group .zj-autocomplete-host {
    flex: 1;
    min-width: 0;
}

.zj-autocomplete-quick-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    min-height: 2.875rem;
    flex-shrink: 0;
    padding: 0;
    border-radius: var(--zj-radius-lg);
    border: 1.5px solid var(--zj-field-border, #d4c1b7);
    background: var(--zj-field-surface, #ffffff);
    color: var(--zj-primary);
    box-shadow: var(--zj-field-shadow);
    transition: all var(--zj-transition-fast);
    cursor: pointer;
}

.zj-autocomplete-quick-add-btn:hover {
    background: var(--zj-primary);
    color: #ffffff;
    border-color: var(--zj-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--zj-primary-rgb), 0.25);
}

.zj-autocomplete-quick-add-btn:active {
    transform: translateY(0);
}

.zj-autocomplete-quick-add-btn .material-symbols-outlined {
    font-size: 1.35rem;
}

/* Quick Add Modal Dialog */
.quick-add-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1050;
    animation: zj-fade-in 150ms ease;
}

.quick-add-modal__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    background: var(--zj-surface-container-lowest, #ffffff);
    border: 1px solid var(--zj-outline-variant, #d3e1eb);
    border-radius: var(--zj-radius-2xl, 1.5rem);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
    z-index: 1055;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: zj-modal-scale-up 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-add-modal__dialog > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.quick-add-modal__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--zj-outline-variant, #d3e1eb);
    background: color-mix(in srgb, var(--zj-primary) 4%, transparent);
}

.quick-add-modal__header-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.quick-add-modal__icon {
    font-size: 1.5rem;
    color: var(--zj-primary);
}

.quick-add-modal__header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--zj-on-surface);
}

.quick-add-modal__body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-add-modal__footer {
    flex: 0 0 auto;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--zj-outline-variant, #d3e1eb);
    background: var(--zj-surface-container-low, #f5faff);
}

.quick-add-modal__footer .btn {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

@keyframes zj-modal-scale-up {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.form-select-shell {
    position: relative;
}

.form-select-shell__control {
    position: relative;
}

.form-select-shell__control .form-select {
    padding-inline-start: 2.875rem;
    padding-inline-end: 3rem;
    cursor: text;
    text-align: start;
    direction: inherit;
}

.form-select-shell__leading {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zj-on-surface-variant);
    pointer-events: none;
    transition: color var(--zj-transition-fast), transform var(--zj-transition-fast);
}

.form-select-shell__trigger {
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    padding: 0;
    border: none;
    border-radius: var(--zj-radius-md);
    background: transparent;
    color: var(--zj-on-surface-variant);
    box-shadow: none;
}

.form-select-shell__trigger:hover {
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
    transform: translateY(-50%);
}

.form-select-shell.is-open .form-select,
.form-select-shell:focus-within .form-select {
    background: var(--zj-surface-container-lowest);
    box-shadow: 0 0 0 2px rgba(var(--zj-primary-rgb), 0.14);
}

.form-select-shell.is-open .form-select-shell__leading,
.form-select-shell:focus-within .form-select-shell__leading {
    color: var(--zj-primary);
}

.form-select-shell.is-open .form-select-shell__trigger {
    color: var(--zj-primary);
}

.form-select-shell.is-open .form-select-shell__trigger .material-symbols-outlined {
    transform: rotate(180deg);
}

.form-select-shell__menu {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: calc(100% + 0.5rem);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--zj-field-menu-surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(var(--zj-outline-rgb), 0.18);
    border-radius: var(--zj-radius-xl);
    box-shadow: var(--zj-shadow-xl);
}

.form-select-shell__option,
.form-select-shell__state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--zj-radius-lg);
    color: var(--zj-on-surface);
    text-align: start;
}

.form-select-shell__state {
    justify-content: center;
    color: var(--zj-on-surface-variant);
}

.form-select-shell__option {
    border: none;
    background: transparent;
    cursor: pointer;
    box-shadow: none;
}

.form-select-shell__option:hover,
.form-select-shell__option.is-highlighted {
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
}

.form-select-shell__option.is-selected {
    background: rgba(var(--zj-primary-rgb), 0.12);
    color: var(--zj-primary);
    font-weight: 700;
}

.form-select-shell__option-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-spinning {
    animation: zj-spin 900ms linear infinite;
}

@keyframes zj-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.form-input-icon__toggle {
    position: absolute;
    inset-inline-end: 0.55rem;
    top: 50%;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    background: transparent;
    color: var(--zj-on-surface-variant);
    border: none;
    border-radius: var(--zj-radius-full);
    box-shadow: none;
    z-index: 1;
}

.form-input-icon__toggle:hover,
.form-input-icon:focus-within .form-input-icon__toggle {
background: rgba(14, 165, 233, 0.08);
    color: var(--zj-primary);
    transform: translateY(-50%);
}

.form-input-icon__eye {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.form-input-icon__eye-slash {
    stroke-width: 2.2;
}

.form-input-icon__toggle[aria-pressed="true"] {
    background: rgba(var(--zj-primary-rgb), 0.09);
    color: var(--zj-primary);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    width: 3rem;
    height: 2.75rem;
    min-height: 2.75rem;
    flex: 0 0 3rem;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--zj-radius-full);
    cursor: pointer;
    transition: background var(--zj-transition-fast);
}
.toggle-switch::before {
    content: '';
    position: absolute;
    inset-inline-start: .125rem;
    top: .625rem;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--zj-radius-full);
    background: var(--zj-switch-track, var(--zj-surface-container-high));
}
.toggle-switch.is-active::before {
    background: var(--zj-switch-track, var(--zj-primary));
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: .8125rem;
    inset-inline-start: .3125rem;
    width: 1.125rem;
    height: 1.125rem;
    background: white;
    border-radius: var(--zj-radius-full);
    transition: transform var(--zj-transition-fast);
}
.toggle-switch.is-active::after {
    transform: translateX(-1.25rem); /* negative for RTL */
}

[dir="ltr"] .toggle-switch.is-active::after {
    transform: translateX(1.25rem);
}

/* Upload dropzone */
.upload-zone {
    border: 2px dashed var(--zj-outline-variant);
    border-radius: var(--zj-radius-2xl);
    padding: 2rem;
    text-align: center;
    color: var(--zj-on-surface-variant);
    transition: all var(--zj-transition-fast);
    cursor: pointer;
}
.upload-zone:hover {
    border-color: var(--zj-primary);
background: rgba(14, 165, 233, 0.03);
}

/* Validation */
.field-validation-error,
.validation-message {
    color: var(--zj-error);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}
input.invalid, select.invalid, textarea.invalid {
    box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.2);
}
input.valid.modified {
    box-shadow: 0 0 0 2px rgba(23, 37, 84, 0.15);
}

/* ============================================================
   CARDS & PANELS
   ============================================================ */
.card {
    background: var(--zj-surface-container-lowest);
    border-radius: var(--zj-radius-2xl);
    box-shadow: var(--zj-shadow-sm);
    overflow: hidden;
}

.card-body { padding: 1.5rem; }
.card-header {
    padding: 1.5rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Stat/KPI card */
.stat-card {
    padding: 1.5rem;
    border-radius: var(--zj-radius-2xl);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.stat-card__glow {
    position: absolute;
    inset-inline-end: -1rem;
    top: -1rem;
    width: 6rem;
    height: 6rem;
    border-radius: var(--zj-radius-full);
    filter: blur(2rem);
    opacity: 0.05;
    transition: opacity var(--zj-transition-normal);
}
.stat-card:hover .stat-card__glow { opacity: 0.1; }

.stat-card__icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--zj-radius-xl);
}

.menu-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.menu-card__media {
    position: relative;
    height: 10rem;
    overflow: hidden;
    background: var(--zj-surface-container);
}

.menu-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top, rgba(255, 181, 157, 0.65), transparent 55%),
        linear-gradient(135deg, var(--zj-surface-container-low), var(--zj-surface-container-high));
}

.menu-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--zj-transition-slow);
}

.menu-card:hover .menu-card__image {
    transform: scale(1.08);
}

.menu-card__placeholder-icon {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    color: rgba(95, 25, 0, 0.65);
}

.menu-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
}

.menu-card__price {
    position: absolute;
    bottom: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 1;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 900;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.menu-card__currency {
    font-size: 0.625rem;
}

.menu-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
}

.menu-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--zj-on-surface);
}

.menu-card__description {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--zj-on-surface-variant);
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.menu-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}

.menu-card__category {
    overflow: hidden;
    color: var(--zj-on-surface-variant);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-card__action {
    width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-radius: var(--zj-radius-xl);
    flex-shrink: 0;
}

.menu-card__action .material-symbols-outlined {
    font-size: 1.25rem;
}

.menu-card__quantity-control {
    display: inline-grid;
    grid-template-columns: 2.25rem minmax(2rem, auto) 2.25rem;
    align-items: center;
    min-height: 2.5rem;
    overflow: hidden;
    border: 1px solid rgba(var(--zj-primary-rgb), 0.22);
    border-radius: var(--zj-radius-xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at center, rgba(var(--zj-primary-rgb), 0.12), transparent 68%);
    box-shadow: 0 0.7rem 1.4rem rgba(var(--zj-primary-rgb), 0.10);
    flex-shrink: 0;
}

.menu-card__quantity-control strong {
    min-width: 2rem;
    padding-inline: 0.35rem;
    color: var(--zj-on-surface);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.menu-card__quantity-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--zj-primary);
    cursor: pointer;
    transition:
        background-color var(--zj-transition-fast),
        color var(--zj-transition-fast),
        transform var(--zj-transition-fast);
}

.menu-card__quantity-button:hover,
.menu-card__quantity-button:focus-visible {
    background: rgba(var(--zj-primary-rgb), 0.10);
    color: var(--zj-on-primary-container);
    outline: none;
}

.menu-card__quantity-button:active {
    transform: scale(0.92);
}

.menu-card__quantity-button--add {
    background: var(--brand-gradient);
    color: var(--brand-gradient-ink);
}

.menu-card__quantity-button--add:hover,
.menu-card__quantity-button--add:focus-visible {
    background: var(--brand-gradient-strong);
    color: var(--brand-gradient-ink);
}

.menu-card__quantity-button .material-symbols-outlined {
    font-size: 1.15rem;
}

.stat-card__value {
    font-size: 1.875rem;
    font-weight: 900;
    font-family: var(--zj-font-headline);
    line-height: 1;
    color: var(--zj-on-surface);
}

.stat-card__label {
    font-size: 0.875rem;
    color: var(--zj-on-surface-variant);
}

.stat-card__trend {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: var(--zj-radius-full);
}
.stat-card__trend--up { background: rgba(16, 185, 129, 0.1); color: #059669; }
.stat-card__trend--down { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.stat-card__trend--neutral { background: var(--zj-surface-container); color: var(--zj-on-surface-variant); }

/* ============================================================
   DATA TABLES
   ============================================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

.data-table thead {
    background: var(--zj-surface-container-low);
}

.data-table th {
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--zj-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table td {
    padding: 1.25rem 1.5rem;
    font-size: 0.875rem;
    color: var(--zj-on-surface);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.data-table tbody tr {
    transition: background var(--zj-transition-fast);
}
.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   BADGES & STATUS PILLS
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--zj-radius-full);
    white-space: nowrap;
}

.badge--primary  { background: rgba(14, 165, 233, 0.1); color: var(--zj-primary); }
.badge--success  { background: var(--zj-success-container); color: var(--zj-success); }
.badge--warning  { background: var(--zj-warning-container); color: var(--zj-warning); }
.badge--error    { background: rgba(186, 26, 26, 0.1); color: var(--zj-error); }
.badge--info     { background: var(--zj-info-container); color: var(--zj-info); }
.badge--neutral  { background: var(--zj-surface-container); color: var(--zj-on-surface-variant); }
.badge--teal     { background: rgba(23, 37, 84, 0.1);  color: var(--zj-secondary); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.page-header {
    margin-bottom: 2.5rem;
}
.page-header__title {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--zj-on-surface);
    margin-bottom: 0.5rem;
}
.page-header__subtitle {
    font-size: 1.125rem;
    color: var(--zj-on-surface-variant);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--zj-on-surface-variant);
    margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--zj-on-surface-variant); }
.breadcrumb a:hover { color: var(--zj-primary); }
.breadcrumb__current { color: var(--zj-on-surface); font-weight: 700; }
.breadcrumb .material-symbols-outlined { font-size: 0.75rem; }

/* Filter bar */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Filter pills */
.filter-pill {
    padding: 0.5rem 1rem;
    border-radius: var(--zj-radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--zj-transition-fast);
    border: none;
    background: var(--zj-surface-container);
    color: var(--zj-on-surface-variant);
}
.filter-pill:hover {
    background: var(--zj-surface-container-high);
}
.filter-pill.is-active {
    background: var(--zj-primary);
    color: var(--zj-on-primary);
}

.admin-table-shell__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}

/* Intrinsic toolbar layout: measure available content width, including sidebars.
   Keep action groups together until the group itself exceeds the container. */
.zj-responsive-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.zj-responsive-toolbar__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    flex: 1 1 32rem;
    min-width: 0;
    max-width: 100%;
}

.zj-responsive-toolbar__actions,
.zj-responsive-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    max-width: 100%;
}

.zj-responsive-toolbar__actions { flex: 0 0 auto; }

.zj-responsive-toolbar > *,
.zj-responsive-toolbar__fields > *,
.zj-responsive-toolbar__actions > *,
.zj-responsive-actions > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.zj-responsive-toolbar :is(button, a):is(.btn, .zj-btn),
.zj-responsive-actions :is(button, a):is(.btn, .zj-btn) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.zj-responsive-toolbar .material-symbols-outlined,
.zj-responsive-actions .material-symbols-outlined { flex-shrink: 0; }

.table-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    container-type: inline-size;
}

.table-filters__search-input::-webkit-search-cancel-button {
    appearance: none;
}

.table-filters__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    align-self: end;
}

.table-filters__buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.table-filters__buttons .btn {
    white-space: normal;
    flex: 0 1 auto;
}

.table-filters__search-shell::before { inset-inline-start: 0.45rem; inset-inline-end: auto; }

.table-filters__extra {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Grid helpers */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem;
}
.pagination__btn {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--zj-radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--zj-on-surface-variant);
    cursor: pointer;
    transition: all var(--zj-transition-fast);
}
.pagination__btn:hover { background: var(--zj-surface-container-low); }
.pagination__btn.is-active {
    background: var(--zj-primary);
    color: var(--zj-on-primary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-12 { grid-template-columns: 1fr; }
    .col-span-4, .col-span-5, .col-span-6,
    .col-span-7, .col-span-8, .col-span-12 {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .grid-cols-2 { grid-template-columns: 1fr; }
    .grid-cols-3 { grid-template-columns: 1fr; }
    .grid-cols-4 { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .page-header__title { font-size: 1.75rem; }
    .table-filters__actions,
    .table-filters__extra { justify-content: stretch; }
}

@media (max-width: 640px) {
    .data-table { font-size: 0.8125rem; }
    .data-table th, .data-table td { padding: 0.75rem 1rem; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes zj-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(14, 165, 233, 0); }
}

@keyframes zj-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-pulse { animation: zj-pulse 2s ease-in-out infinite; }
.animate-fade-in { animation: zj-fade-in 300ms ease forwards; }

/* ============================================================
   BLAZOR-SPECIFIC
   ============================================================ */
.blazor-error-boundary {
    background: linear-gradient(135deg, var(--zj-error), var(--zj-on-error-container));
    border-radius: var(--zj-radius-lg);
    box-shadow: var(--zj-shadow-lg);
    padding: 1rem 3.5rem 1rem 1rem;
    color: #ffffff;
    position: relative;
}
.blazor-error-boundary::before {
    content: "⚠️";
    position: absolute;
    inset-inline-end: 1rem;
    top: 0.9rem;
    font-size: 1.4rem;
}
.blazor-error-boundary::after {
    content: "حدث خطأ غير متوقع.";
}

h1:focus { outline: none; }

#blazor-error-ui {
    background: var(--zj-error-container);
    color: var(--zj-on-error-container);
    padding: 0.75rem 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    text-align: center;
    display: none !important;
}

/* ============================================================
   GLOBAL ERROR MODAL OVERLAY
   ============================================================ */
.err-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: zj-fade-in 200ms ease forwards;
}

.err-modal {
    background: rgba(var(--zj-surface-rgb, 255 255 255) / 0.92);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--zj-radius-xl, 1.25rem);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.err-modal__icon .material-symbols-outlined {
    font-size: 3rem;
    color: var(--zj-error, #b00020);
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

.err-modal__title {
    font-family: var(--zj-font-sans, Manrope, sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--zj-on-surface, #1a1a2e);
    margin: 0;
}

.err-modal__title--debug {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: var(--zj-error, #b00020);
    word-break: break-all;
}

.err-modal__message {
    color: var(--zj-on-surface-variant, #44475a);
    line-height: 1.6;
    margin: 0;
}

.err-modal__ref {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.err-modal__ref-label {
    color: var(--zj-on-surface-variant, #44475a);
    font-size: 0.875rem;
}

.err-modal__ref-value {
    background: var(--zj-surface-variant, #f0f0f5);
    border-radius: var(--zj-radius-sm, 0.375rem);
    padding: 0.2rem 0.6rem;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    color: var(--zj-primary, #4456a6);
    user-select: all;
}

/* Debug details panel */
.err-modal__debug {
    text-align: start;
    background: var(--zj-surface-variant, #f5f5fa);
    border-radius: var(--zj-radius-md, 0.75rem);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

.err-modal__debug-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.err-modal__debug-label {
    font-weight: 700;
    color: var(--zj-primary, #4456a6);
    min-width: 4.5rem;
    flex-shrink: 0;
}

.err-modal__debug-value {
    color: var(--zj-on-surface, #1a1a2e);
    word-break: break-all;
    margin: 0;
}

.err-modal__stack {
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: var(--zj-radius-sm, 0.375rem);
    padding: 0.75rem;
    max-height: 220px;
    overflow-y: auto;
    text-align: start;
}

.err-modal__stack pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.75rem;
    line-height: 1.5;
}

.err-modal__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ============================================================
   MAIN LAYOUT — Admin Shell
   ============================================================ */
.app-shell {
    display: flex;
    min-height: 100vh;
    overflow-x: clip;
}

.app-shell--sidebar-collapsed {
    --zj-sidebar-width: var(--zj-sidebar-collapsed-width);
}

.app-shell--cashier-terminal {
    --zj-sidebar-width: 0px !important;
    --zj-topbar-height: 2.25rem !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-shell--cashier-terminal .app-sidebar,
.app-sidebar--cashier-hidden {
    display: none !important;
}

.app-shell--cashier-terminal .app-topbar {
    display: none !important;
}

.app-shell--cashier-terminal .app-content {
    margin-inline-start: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-inline: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .app-shell--cashier-terminal {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .app-shell--cashier-terminal .app-content {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }
}

/* Sidebar */
.app-sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    height: 100%;
    width: var(--zj-sidebar-width);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-inline-end: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: width 180ms ease, transform var(--zj-transition-normal);
    max-width: 100vw;
}

.app-sidebar__brand {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.brand-logo {
    --brand-logo-primary: #0ea5e9;
    --brand-logo-secondary: #83d8ff;
    --brand-logo-highlight: #d7f4ff;
    --brand-logo-ink: #6f8aa5;
    --brand-logo-accent: #0ea5e9;
    --brand-logo-wordmark: #6f8aa5;
    --brand-logo-subtitle: var(--zj-on-surface-variant);
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.brand-logo--inline {
    flex-direction: row;
}

.brand-logo--stacked {
    flex-direction: column;
    text-align: center;
}

.brand-logo--compact {
    gap: 0.65rem;
}

.brand-logo__mark {
    width: 4.9rem;
    flex: 0 0 auto;
}

.brand-logo--compact .brand-logo__mark {
    width: 3.25rem;
}

.brand-logo__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.08));
}

.brand-logo__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.brand-logo__title {
    font-family: var(--zj-font-headline);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
    color: var(--brand-logo-wordmark);
    letter-spacing: 0.01em;
}

.brand-logo--compact .brand-logo__title {
    font-size: 1.25rem;
}

.brand-logo__subtitle {
    font-size: 0.74rem;
    color: var(--brand-logo-subtitle);
    font-weight: 700;
}

.brand-logo--customer {
    --brand-logo-primary: #ff5a1f;
    --brand-logo-secondary: #ff7d2a;
    --brand-logo-highlight: #ffbb84;
    --brand-logo-ink: #3f5364;
    --brand-logo-accent: #ff7d2a;
    --brand-logo-wordmark: #3f5364;
}

.brand-logo--staff {
    --brand-logo-primary: var(--zj-primary-container);
    --brand-logo-secondary: var(--zj-primary);
    --brand-logo-highlight: var(--zj-primary-fixed);
    --brand-logo-ink: var(--zj-on-surface-variant);
    --brand-logo-accent: var(--zj-primary);
    --brand-logo-wordmark: var(--zj-on-surface-variant);
}

.brand-logo--admin {
    --brand-logo-primary: #22313d;
    --brand-logo-secondary: #314554;
    --brand-logo-highlight: #f0bb3c;
    --brand-logo-ink: #22313d;
    --brand-logo-accent: #f0bb3c;
    --brand-logo-wordmark: #d8a52e;
}

.app-sidebar__logo {
    width: 5rem;
    height: 5rem;
    border-radius: var(--zj-radius-xl);
    box-shadow: var(--zj-shadow-lg);
    margin-bottom: 1rem;
    object-fit: cover;
}

.app-sidebar__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zj-primary);
    font-family: var(--zj-font-headline);
}

.app-sidebar__subtitle {
    font-size: 0.75rem;
    color: var(--zj-on-surface-variant);
    margin-top: 0.25rem;
}

.app-sidebar__nav {
    flex: 1;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
}

.app-sidebar__section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.45rem 0.4rem 0.55rem;
    border-radius: var(--zj-radius-xl);
    background: rgba(var(--zj-outline-rgb), 0.035);
    border: 1px solid rgba(var(--zj-outline-rgb), 0.08);
    transition: background var(--zj-transition-fast), border-color var(--zj-transition-fast);
}

.app-sidebar__section:has(.app-sidebar__link.active) {
    background: rgba(var(--zj-primary-rgb), 0.04);
    border-color: rgba(var(--zj-primary-rgb), 0.16);
}

.app-sidebar__section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem 0.25rem;
    color: var(--zj-primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    opacity: 0.95;
}

.app-sidebar__section-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zj-primary);
    box-shadow: 0 0 6px rgba(var(--zj-primary-rgb), 0.4);
    flex-shrink: 0;
}

.app-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--zj-radius-lg);
    color: var(--zj-on-surface-variant);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all var(--zj-transition-fast);
    text-decoration: none;
}

.app-sidebar__link .material-symbols-outlined {
    flex: 0 0 auto;
}

.app-sidebar__link--child {
    margin-inline-start: 1.25rem;
    padding-block: 0.55rem;
    padding-inline-start: 0.85rem;
    font-size: 0.84rem;
}

.app-sidebar__link--child .material-symbols-outlined {
    font-size: 1.05rem;
}

.app-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--zj-on-surface);
}

.app-sidebar__link.active {
background: rgba(14, 165, 233, 0.08);
    color: var(--zj-on-surface);
    font-weight: 700;
    border-inline-start: 4px solid var(--zj-primary);
    border-radius: 0;
}

.app-sidebar__link.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.app-sidebar__footer {
    padding: 0.85rem 1rem;
    margin-top: auto;
    border-top: 1px solid rgba(var(--zj-outline-rgb), 0.1);
}

.app-sidebar__footer-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.app-sidebar__collapse-toggle {
    flex: 0 0 20%;
    width: 20%;
    min-width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.18);
    border-radius: var(--zj-radius-lg);
    background: rgba(255, 255, 255, 0.46);
    color: var(--zj-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 850;
    cursor: pointer;
    transition: background var(--zj-transition-fast), color var(--zj-transition-fast), border-color var(--zj-transition-fast);
}

.app-sidebar__collapse-toggle:hover {
    background: rgba(var(--zj-primary-rgb), 0.08);
    border-color: rgba(var(--zj-primary-rgb), 0.22);
    color: var(--zj-primary);
}

.app-sidebar__collapse-toggle .material-symbols-outlined {
    font-size: 1.35rem;
    line-height: 1;
}

.app-sidebar__collapse-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.app-sidebar__contact-btn {
    flex: 1;
    min-width: 0;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0 0.75rem;
    border-radius: var(--zj-radius-lg);
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(var(--zj-primary-rgb), 0.2);
}

.app-sidebar__contact-btn .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.app-sidebar--collapsed {
    width: var(--zj-sidebar-collapsed-width);
}

.app-sidebar--collapsed .app-sidebar__brand {
    padding: 1.25rem 0.5rem;
}

.app-sidebar--collapsed .brand-logo {
    gap: 0;
}

.app-sidebar--collapsed .brand-logo__mark {
    width: 2.75rem;
}

.app-sidebar--collapsed .brand-logo__copy,
.app-sidebar--collapsed .app-sidebar__section-title,
.app-sidebar--collapsed .app-sidebar__link-text,
.app-sidebar--collapsed .app-sidebar__collapse-toggle-text,
.app-sidebar--collapsed .app-sidebar__contact-btn-text,
.app-sidebar--collapsed .app-sidebar__support {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.app-sidebar--collapsed .app-sidebar__nav {
    padding-inline: 0.5rem;
    gap: 0.6rem;
}

.app-sidebar--collapsed .app-sidebar__section {
    background: transparent;
    border: none;
    padding: 0;
    gap: 0.35rem;
}

.app-sidebar--collapsed .app-sidebar__link {
    justify-content: center;
    gap: 0;
    min-height: 2.75rem;
    padding: 0.75rem;
}

.app-sidebar--collapsed .app-sidebar__link.active {
    border-inline-start: 0;
    border-radius: var(--zj-radius-lg);
}

.app-sidebar--collapsed .app-sidebar__footer {
    padding: 0.75rem 0.5rem;
}

.app-sidebar--collapsed .app-sidebar__footer-row {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.app-sidebar--collapsed .app-sidebar__collapse-toggle {
    width: 2.75rem;
    min-width: 2.75rem;
    flex: 0 0 2.75rem;
    height: 2.75rem;
    padding: 0;
}

.app-sidebar--collapsed .app-sidebar__contact-btn {
    width: 2.75rem;
    min-width: 2.75rem;
    flex: 0 0 2.75rem;
    height: 2.75rem;
    padding: 0;
}

/* Top Bar */
.app-topbar {
    position: fixed;
    top: 0;
    inset-inline-start: var(--zj-sidebar-width);
    inset-inline-end: 0;
    height: var(--zj-topbar-height);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0 1.5rem;
    z-index: 100;
    transition: inset-inline-start 180ms ease;
}

.app-topbar__content {
    display: contents;
}

.app-topbar__search {
    position: relative;
    width: 100%;
    max-width: 24rem;
    min-width: 0;
}

.app-topbar__brand {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--zj-primary);
    font-family: var(--zj-font-headline);
    white-space: nowrap;
}

.app-topbar__search .form-input {
    padding-inline-start: 2.75rem;
    border-radius: var(--zj-radius-lg);
    background: var(--zj-surface-container-low);
    font-size: 0.875rem;
    padding-block: 0.5rem;
    direction: inherit;
    text-align: start;
}

.app-topbar__search .form-input-icon > .material-symbols-outlined {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zj-on-surface-variant);
}

.topbar-search__mobile-toggle,
.topbar-search__mobile-field,
.topbar-mobile-download-menu {
    display: none;
}

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.topbar-account-anchor { order: 1; }
.topbar-language {
    order: 2;
    margin-right: auto;
}
.topbar-notifications-anchor { order: 3; }
.topbar-download-anchor { order: 4; }
.topbar-theme-mode {
    order: 5;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.topbar-logout-anchor {
    order: 6;
    margin-inline-start: 0.15rem;
    padding-inline-start: 0.55rem;
    border-inline-start: 1px solid rgba(var(--zj-outline-rgb), 0.12);
}

.topbar-scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    border: none;
    background: transparent;
    cursor: default;
}

.topbar-panel-anchor {
    position: relative;
    z-index: 50;
}

.topbar-icon-btn {
    position: relative;
    width: 2.65rem;
    height: 2.65rem;
    min-width: 2.65rem;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(var(--zj-outline-rgb), 0.12);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.topbar-mobile-download {
    text-decoration: none;
}

.topbar-icon-btn:hover,
.topbar-icon-btn.is-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 251, 255, 0.86));
    border-color: rgba(var(--zj-primary-rgb), 0.22);
    color: var(--zj-primary);
    transform: translateY(-1px);
}

.topbar-icon-btn__dot {
    position: absolute;
    top: 0.4rem;
    inset-inline-end: 0.42rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--zj-error);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
}

.topbar-icon-btn__badge {
    position: absolute;
    top: 0.25rem;
    inset-inline-end: 0.25rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.28rem;
    border-radius: var(--zj-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zj-error);
    color: var(--zj-on-error);
    border: 2px solid rgba(255, 255, 255, 0.94);
    font-size: 0.65rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.topbar-popover {
    position: absolute;
    top: calc(100% + 0.75rem);
    inset-inline-end: 0;
    z-index: 70;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.16);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 251, 255, 0.93));
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    animation: zj-fade-in 180ms ease forwards;
}

.topbar-popover__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.75rem;
}

.topbar-popover__header strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--zj-on-surface);
}

.topbar-popover__header small {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.72rem;
    color: var(--zj-on-surface-variant);
}

.topbar-popover__ghost {
    min-height: auto;
    padding: 0.35rem 0.65rem;
    border: none;
    border-radius: 999px;
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
    box-shadow: none;
    font-size: 0.72rem;
    font-weight: 800;
}

.topbar-popover__ghost:hover {
    background: rgba(var(--zj-primary-rgb), 0.14);
}

.topbar-popover__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1rem 1.15rem;
    color: var(--zj-on-surface-variant);
    font-size: 0.82rem;
}

.topbar-search {
    position: relative;
    z-index: 50;
}

.topbar-search .form-input {
    border-radius: var(--zj-radius-full);
    min-height: 2.65rem;
    padding-inline-start: 2.75rem;
    background: #fff8f4;
    border: 1.5px solid var(--zj-field-border, #d4c1b7);
    transition: all var(--zj-transition-fast);
}

.topbar-search:hover .form-input {
    border-color: var(--zj-field-border-hover);
    background: #ffffff;
}

.topbar-search.is-open .form-input,
.topbar-search .form-input:focus {
    background: #ffffff;
    border-color: var(--zj-field-border-focus, #964407);
    box-shadow: var(--zj-field-focus-ring);
}

.topbar-search__menu {
    width: min(32rem, calc(100vw - 2rem));
    inset-inline-start: 0;
    inset-inline-end: auto;
    overflow: hidden;
}

.topbar-search__results {
    max-height: min(27rem, calc(100dvh - var(--zj-topbar-height) - 8rem));
    padding: 0 0.5rem 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.topbar-search__count {
    min-width: 2rem;
    height: 2rem;
    padding-inline: 0.55rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
    font-size: 0.75rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.topbar-search__header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.topbar-search__close {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--zj-on-surface-rgb), 0.06);
    color: var(--zj-on-surface-variant);
    cursor: pointer;
}

.topbar-search__close:hover,
.topbar-search__close:focus-visible {
    background: rgba(var(--zj-primary-rgb), 0.12);
    color: var(--zj-primary);
    outline: none;
}

.topbar-search__close .material-symbols-outlined {
    font-size: 1.1rem;
}

.topbar-search__result {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 1rem;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: start;
    color: var(--zj-on-surface);
}

.topbar-search__result:hover,
.topbar-search__result.is-selected {
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
}

.topbar-search__result-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.9rem;
    display: grid;
    place-items: center;
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
    flex-shrink: 0;
}

.topbar-search__result-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1;
    min-width: 0;
}

.topbar-search__path {
    text-align: start;
    overflow-wrap: anywhere;
    unicode-bidi: isolate;
}

.topbar-search__result:focus-visible {
    outline: 2px solid var(--zj-primary);
    outline-offset: -2px;
}

.topbar-search__result-copy strong {
    font-size: 0.86rem;
    font-weight: 800;
}

.topbar-search__result-copy small {
    font-size: 0.72rem;
    color: var(--zj-on-surface-variant);
}

.topbar-search__result:hover .topbar-search__result-copy small,
.topbar-search__result.is-selected .topbar-search__result-copy small {
    color: inherit;
}

.topbar-search__open-icon {
    font-size: 1.1rem;
    opacity: 0.55;
}

.topbar-language {
    position: relative;
    display: flex;
    align-items: center;
}

.topbar-language__trigger {
    min-height: 2.5rem;
    padding: 0.55rem 0.8rem 0.55rem 0.7rem;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.14);
    border-radius: var(--zj-radius-full);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 251, 255, 0.82));
    color: var(--zj-on-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    gap: 0.45rem;
}

.topbar-language__trigger:hover {
    border-color: rgba(var(--zj-primary-rgb), 0.25);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.12);
    transform: translateY(-1px);
}

.topbar-language__trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--zj-primary-rgb), 0.16), 0 12px 28px rgba(14, 165, 233, 0.12);
}

.topbar-language__label {
    font-size: 0.8125rem;
    font-weight: 800;
    white-space: nowrap;
}

.topbar-language__chevron {
    font-size: 1rem;
    color: var(--zj-on-surface-variant);
    transition: transform var(--zj-transition-fast), color var(--zj-transition-fast);
}

.topbar-language__trigger[aria-expanded="true"] .topbar-language__chevron {
    transform: rotate(180deg);
    color: var(--zj-primary);
}

.topbar-language__menu {
    width: min(17rem, calc(100vw - 2rem));
    padding: 0.5rem;
}

.topbar-language__option {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8rem 0.9rem;
    border: none;
    border-radius: 1rem;
    background: transparent;
    color: var(--zj-on-surface);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: start;
}

.topbar-language__option:hover {
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
}

.topbar-language__option.is-active {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.14), rgba(14, 165, 233, 0.08));
    color: var(--zj-primary);
}

.topbar-language__option-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1;
}

.topbar-language__option-copy strong {
    font-size: 0.875rem;
    font-weight: 800;
}

.topbar-language__option-copy small {
    font-size: 0.7rem;
    color: var(--zj-on-surface-variant);
}

.topbar-language__option.is-active .topbar-language__option-copy small,
.topbar-language__option:hover .topbar-language__option-copy small {
    color: inherit;
}

.topbar-notifications {
    width: min(25rem, calc(100vw - 2rem));
    overflow: hidden;
}

.topbar-notifications__list {
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem 0.5rem;
}

.topbar-notifications__item {
    width: 100%;
    min-height: 4rem;
    padding: 0.85rem 0.9rem;
    border: none;
    border-radius: 1rem;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    text-align: start;
    color: var(--zj-on-surface);
}

.topbar-notifications__item:hover {
    background: rgba(var(--zj-primary-rgb), 0.08);
}

.topbar-notifications__item.is-unread {
    background: rgba(var(--zj-primary-rgb), 0.05);
}

.topbar-notifications__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.95rem;
    display: grid;
    place-items: center;
    background: rgba(var(--zj-primary-rgb), 0.1);
    color: var(--zj-primary);
    flex-shrink: 0;
}

.topbar-notifications__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.topbar-notifications__copy strong {
    font-size: 0.84rem;
    font-weight: 800;
}

.topbar-notifications__copy small {
    font-size: 0.72rem;
    color: var(--zj-on-surface-variant);
    line-height: 1.5;
}

.topbar-notifications__time {
    font-size: 0.68rem;
    color: var(--zj-on-surface-variant);
    white-space: nowrap;
}

.app-topbar__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--zj-radius-full);
    object-fit: cover;
background: rgba(14, 165, 233, 0.08);
    color: var(--zj-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: var(--zj-font-headline);
}

.app-topbar__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 12.5rem;
    max-width: 18rem;
}

.app-topbar__user-trigger {
    min-height: 2.75rem;
    padding: 0.3rem 0.35rem 0.3rem 0.8rem;
    border: 1px solid rgba(var(--zj-primary-rgb), 0.1);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 251, 255, 0.8));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.app-topbar__user-trigger:hover,
.app-topbar__user-trigger.is-active {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(var(--zj-primary-rgb), 0.14);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.app-topbar__user-meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    text-align: start;
    min-width: 0;
    flex: 1;
}

.app-topbar__user-name {
    font-size: 0.875rem;
    font-weight: 900;
    color: var(--zj-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar__user-role {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--zj-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-menu {
    width: min(22rem, calc(100vw - 2rem));
    max-height: calc(100svh - var(--zj-topbar-height) - 1.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 0.5rem;
}

.topbar-user-menu__hero {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1rem 0.9rem;
}

.topbar-user-menu__avatar {
    flex-shrink: 0;
}

.topbar-user-menu__copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.topbar-user-menu__copy strong {
    font-size: 0.88rem;
    font-weight: 900;
}

.topbar-user-menu__copy small {
    font-size: 0.72rem;
    color: var(--zj-on-surface-variant);
}

.topbar-user-menu__item {
    width: calc(100% - 1rem);
    margin: 0 0.5rem;
    min-height: 2.9rem;
    padding: 0.75rem 0.9rem;
    border: none;
    border-radius: 1rem;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    justify-content: flex-start;
    color: var(--zj-on-surface);
}

.topbar-user-menu__item:hover {
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
}

.topbar-user-menu__section {
    padding: 0.35rem 0.5rem 0.65rem;
}

@media (min-width: 1181px) {
    .topbar-account-anchor > .topbar-popover {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }
}

.topbar-theme-menu {
    width: min(38rem, calc(100vw - var(--zj-sidebar-width) - 2rem));
    max-height: calc(100dvh - var(--zj-topbar-height) - 1.5rem);
    padding: 0.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.topbar-theme-menu__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0.35rem 0.85rem;
}

.topbar-theme-menu__header > div {
    min-width: 0;
}

.topbar-theme-menu__header strong,
.topbar-theme-menu__header small {
    display: block;
}

.topbar-theme-menu__header strong {
    color: var(--zj-on-surface);
    font-size: 0.95rem;
    font-weight: 900;
}

.topbar-theme-menu__header small {
    margin-top: 0.2rem;
    color: var(--zj-on-surface-variant);
    font-size: 0.72rem;
    line-height: 1.6;
}

.topbar-theme-menu__close {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(var(--zj-outline-rgb), 0.12);
    border-radius: 0.8rem;
    background: var(--zj-surface);
    color: var(--zj-on-surface-variant);
    box-shadow: none;
}

.topbar-theme-menu__close:hover {
    border-color: rgba(var(--zj-primary-rgb), 0.24);
    background: rgba(var(--zj-primary-rgb), 0.08);
    color: var(--zj-primary);
}

.topbar-theme-menu .theme-toggle {
    padding: 0.15rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.topbar-theme-menu .theme-toggle__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.topbar-theme-menu .theme-toggle__icon-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.topbar-logout-confirm {
    width: min(22rem, calc(100vw - 2rem));
    padding-bottom: 1rem;
}

.topbar-logout-confirm__message {
    padding: 0 1rem;
    color: var(--zj-on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.7;
}

.topbar-logout-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1rem 0;
}

/* Main content area */
.app-content {
    margin-inline-start: var(--zj-sidebar-width);
    padding-top: calc(var(--zj-topbar-height) + 1.5rem);
    padding-inline: 2rem;
    padding-bottom: 3rem;
    flex: 1;
    min-height: 100vh;
    min-width: 0;
    transition: margin-inline-start 180ms ease;
}

/* Mobile drawer overlay */
.app-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 45;
}
.app-overlay.is-open { display: block; }

/* Mobile menu button */
.app-topbar__menu-btn {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--zj-on-surface);
    cursor: pointer;
}

@media (min-width: 1181px) {
    .app-topbar__search.topbar-search {
        order: 2;
        flex: 1 1 24rem;
        width: auto;
        max-width: 32rem;
        /* Keep spare space beside search, never between individual actions. */
        margin-inline-end: auto;
    }

    /* Reserve real space between the account and actions; absolute centering
       could overlap the language button and intercept search clicks. */
    .app-topbar:has(.topbar-search) .app-topbar__actions {
        display: contents;
    }

    .app-topbar:has(.topbar-search) .topbar-language { order: 3; margin: 0; }
    .app-topbar:has(.topbar-search) .topbar-notifications-anchor { order: 4; }
    .app-topbar:has(.topbar-search) .topbar-download-anchor { order: 5; }
    .app-topbar:has(.topbar-search) .topbar-theme-mode { order: 6; }
    .app-topbar:has(.topbar-search) .topbar-logout-anchor { order: 7; }
    .app-topbar:has(.topbar-search) .release-anchor { order: 8; }

    .topbar-account-anchor {
        margin-inline-end: 0;
    }
}

/* Compact desktop still has a sidebar: reserve search and button hit areas. */
@media (min-width: 1181px) and (max-width: 1440px) {
    .app-topbar { padding-inline: .75rem; gap: .375rem; }
    .app-topbar__user { min-width: 0; width: 2.75rem; padding: .25rem; justify-content: center; }
    .app-topbar__user-meta,
    .topbar-language__label { display: none; }
    .app-topbar__search.topbar-search { min-width: 10rem; }
}

@media (min-width: 1181px) {
    .app-topbar__actions > * { flex-shrink: 0; }
}

/* ── Responsive ── */
@media (max-width: 1180px) {
    .app-sidebar {
        /* Off-screen navigation must also leave keyboard and accessibility traversal. */
        visibility: hidden;
        width: min(20rem, 88vw);
        transform: translateX(100%); /* hidden off-screen right for RTL */
    }

    .app-sidebar--collapsed .brand-logo__copy,
    .app-sidebar--collapsed .app-sidebar__section-title,
    .app-sidebar--collapsed .app-sidebar__link-text,
    .app-sidebar--collapsed .app-sidebar__collapse-toggle-text,
    .app-sidebar--collapsed .app-sidebar__contact-btn-text,
    .app-sidebar--collapsed .app-sidebar__support {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .app-sidebar--collapsed .app-sidebar__brand {
        padding: 1.5rem 1.25rem;
    }

    .app-sidebar--collapsed .brand-logo {
        gap: 0.85rem;
    }

    .app-sidebar--collapsed .brand-logo__mark {
        width: 4.9rem;
    }

    .app-sidebar--collapsed .app-sidebar__nav {
        padding: 0 1rem;
    }

    .app-sidebar--collapsed .app-sidebar__link {
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .app-sidebar--collapsed .app-sidebar__footer {
        padding: 1rem;
    }

    .app-sidebar--collapsed .app-sidebar__collapse-toggle {
        width: 100%;
        padding: 0;
    }

    [dir="ltr"] .app-sidebar {
        transform: translateX(-100%);
    }
    .app-sidebar.is-open {
        visibility: visible;
        transform: translateX(0);
    }
    .app-topbar {
        inset-inline-start: 0;
        inset-inline-end: 0;
        height: auto;
        min-height: calc(var(--zj-topbar-height) + env(safe-area-inset-top, 0px));
        padding: calc(0.625rem + env(safe-area-inset-top, 0px)) 1rem 0.625rem;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
        box-sizing: border-box;
        transition: transform 220ms ease, opacity 220ms ease, box-shadow 220ms ease;
        will-change: transform;
    }

    .app-topbar.is-mobile-hidden {
        transform: translateY(calc(-100% - 0.75rem));
        opacity: 0.98;
    }

    .app-topbar.is-mobile-elevated {
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
    }
    .app-topbar__brand {
        display: none;
    }
    .app-topbar__search {
        order: 3;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    .topbar-search__desktop-field {
        display: none;
    }
    .topbar-search__mobile-toggle {
        display: inline-flex;
    }
    .topbar-search__mobile-field {
        display: block;
        margin: 0.75rem 0.75rem 0;
    }
    .topbar-search__mobile-field .form-input {
        min-height: 2.8rem;
        padding-inline-start: 2.75rem;
        border-radius: 1rem;
    }
    .topbar-language__label {
        display: none;
    }
    .topbar-search__menu {
        width: min(21rem, calc(100vw - 1rem));
        inset-inline-end: 0;
    }

    .topbar-search__menu,
    .topbar-notifications,
    .topbar-user-menu,
    .topbar-theme-menu,
    .topbar-logout-confirm,
    .topbar-language__menu {
        position: fixed;
        top: calc(var(--zj-mobile-topbar-offset, var(--zj-topbar-height)) + 0.7rem);
        inset-inline: 0.75rem;
        width: auto;
        max-width: 24rem;
        margin-inline: auto;
        max-height: calc(100dvh - var(--zj-mobile-topbar-offset, var(--zj-topbar-height)) - 1.5rem);
        overflow: auto;
    }
    .app-topbar__actions {
        order: 2;
        width: auto;
        flex: 1 1 0;
        margin: 0;
        gap: 0.4rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 0;
    }
    .app-content {
        margin-inline-start: 0;
        padding-top: calc(var(--zj-mobile-topbar-offset, var(--zj-topbar-height)) + 1rem);
        padding-inline: 1rem;
        padding-bottom: 2rem;
    }
    .app-topbar__menu-btn {
        display: flex;
        order: 1;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        flex: 0 0 auto;
    }
    .app-topbar__user {
        width: 2.75rem;
        height: 2.75rem;
        min-width: auto;
        max-width: none;
        justify-content: center;
        padding: 0;
        border-inline-end: none;
    }
    .app-topbar__avatar {
        width: 2.25rem;
        height: 2.25rem;
    }
    .app-topbar__user-meta {
        display: none;
    }
    .topbar-language {
        margin-right: 0;
        margin-inline-end: auto;
    }
    .topbar-language__trigger {
        width: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        justify-content: center;
    }
    .topbar-language__chevron {
        display: none;
    }
    .topbar-icon-btn {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
    }
    .topbar-logout-anchor {
        margin-inline-start: 0;
        padding-inline-start: 0;
        border-inline-start: 0;
    }
    .topbar-popover__header {
        align-items: stretch;
        flex-direction: column;
    }
    .topbar-logout-confirm__actions {
        flex-direction: column-reverse;
    }
}

@media (max-width: 640px) {
    .app-topbar {
        padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 0.5rem 0.5rem;
        gap: 0.25rem;
    }
    .app-topbar__actions {
        gap: 0.25rem;
    }
    .topbar-download-anchor {
        display: none;
    }
    .topbar-mobile-download-menu {
        display: flex;
    }
    .app-content {
        padding-inline: 0.75rem;
    }
    .app-sidebar__brand {
        padding: 1.5rem 1.25rem;
    }
    .app-sidebar__footer {
        padding: 1rem;
    }
    .brand-logo__mark {
        width: 4.2rem;
    }
    .topbar-language__trigger {
        padding-inline: 0.7rem;
    }
    .topbar-notifications__item {
        align-items: stretch;
        flex-wrap: wrap;
    }
    .topbar-notifications__time {
        width: 100%;
    }
    .topbar-user-menu,
    .topbar-notifications,
    .topbar-theme-menu,
    .topbar-logout-confirm,
    .topbar-language__menu,
    .topbar-search__menu {
        width: min(calc(100vw - 1.5rem), 22rem);
    }

    .topbar-notifications,
    .topbar-user-menu,
    .topbar-theme-menu,
    .topbar-logout-confirm,
    .topbar-language__menu {
        inset-inline: 0.5rem;
        max-width: none;
        width: auto;
        top: calc(var(--zj-mobile-topbar-offset, var(--zj-topbar-height)) + 0.5rem);
        max-height: calc(100dvh - var(--zj-mobile-topbar-offset, var(--zj-topbar-height)) - 1rem);
        border-radius: 1.2rem;
    }

    .topbar-theme-menu .theme-toggle__options {
        grid-template-columns: 1fr;
    }

    .topbar-theme-menu .theme-toggle__icon-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   AUTH LAYOUT
   ============================================================ */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 14% 8%, rgba(var(--zj-primary-rgb), 0.24), transparent 32%),
        radial-gradient(circle at 86% 16%, rgba(var(--zj-tertiary-rgb), 0.18), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(var(--zj-secondary-rgb), 0.16), transparent 42%),
        linear-gradient(145deg, var(--zj-surface), var(--zj-surface-container-low));
}

.auth-container {
    width: 100%;
    max-width: 32rem; /* max-w-lg = 512px */
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

.auth-brand__logo {
    width: 6rem;
    height: 6rem;
    border-radius: var(--zj-radius-xl);
    overflow: hidden;
    box-shadow: var(--zj-shadow-2xl);
    transition: transform 500ms;
}
.auth-brand__logo:hover { transform: rotate(3deg); }

.auth-brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-brand__title {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--zj-on-surface);
    letter-spacing: 0;
}

.auth-brand__subtitle {
    font-size: 0.9375rem;
    color: var(--zj-on-surface-variant);
    font-weight: 500;
}

.auth-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--zj-primary-rgb), 0.16), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.64));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(var(--zj-primary-rgb), 0.18);
    border-radius: var(--zj-radius-3xl);
    padding: 2.5rem;
    box-shadow:
        0 1.5rem 4rem rgba(var(--zj-primary-rgb), 0.14),
        var(--zj-shadow-2xl);
    position: relative;
    overflow: hidden;
}

/* Auth screens & Public Subscription Form Hero Presets */
.auth-card .form-input,
.auth-card .form-control {
    min-height: 3.25rem;
    font-size: 0.95rem;
    border-radius: var(--zj-radius-xl);
    border: 1.5px solid var(--zj-field-border);
    box-shadow: 0 2px 6px rgba(150, 68, 7, 0.04);
}

.auth-card .form-input:focus,
.auth-card .form-control:focus {
    border-color: var(--zj-field-border-focus);
    box-shadow: var(--zj-field-focus-ring);
}

.subscribe-public__form .form-control {
    min-height: 3rem;
    border-radius: var(--zj-radius-lg);
    background: #fff8f4;
    border: 1.5px solid #dbc1b5;
    transition: all var(--zj-transition-fast);
}

.subscribe-public__form .form-control:hover {
    border-color: var(--zj-field-border-hover);
    background: #ffffff;
}

.subscribe-public__form .form-control:focus {
    background: #ffffff;
    border-color: var(--zj-field-border-focus);
    box-shadow: var(--zj-field-focus-ring);
}

.auth-card__glow {
    position: absolute;
    top: -6rem;
    inset-inline-start: -6rem;
    width: 12rem;
    height: 12rem;
    background:
        radial-gradient(circle, rgba(var(--zj-primary-rgb), 0.34), rgba(var(--zj-secondary-rgb), 0.13) 44%, transparent 72%);
    border-radius: var(--zj-radius-full);
    filter: blur(3rem);
    pointer-events: none;
}

.auth-card__content {
    position: relative;
    z-index: 1;
}

.auth-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.auth-card__subtitle {
    font-size: 0.875rem;
    color: var(--zj-on-surface-variant);
    margin-bottom: 2.5rem;
}

.auth-card__footer {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(89, 65, 57, 0.08);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--zj-on-surface-variant);
}

/* Noise texture overlay for auth background */
.auth-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    mix-blend-mode: overlay;
}

@media (max-width: 640px) {
    .auth-card { padding: 1.5rem; border-radius: var(--zj-radius-2xl); }
    .auth-brand__logo { width: 4.5rem; height: 4.5rem; }
    .auth-brand__title { font-size: 1.75rem; }
}

/* ============================================================
   FEEDBACK COMPONENTS
   ============================================================ */

/* Toast */
.toast-container {
    position: fixed;
    inset-block-start: 5rem;
    left: max(1rem, env(safe-area-inset-left));
    right: auto;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(40dvh, 28rem);
    overflow-y: auto;
}

.toast {
    padding: 1rem 1.25rem;
    border-radius: var(--zj-radius-xl);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--zj-shadow-xl);
    animation: zj-fade-in 300ms ease forwards;
    background: var(--zj-surface-container-lowest);
}
.toast--success { --toast-accent: var(--zj-success); background: linear-gradient(var(--zj-success-container), var(--zj-success-container)), var(--zj-surface-container-lowest); color: var(--zj-on-surface); }
.toast--error   { background: var(--zj-error-container); color: var(--zj-on-error-container); }
.toast--warning { --toast-accent: var(--zj-warning); background: linear-gradient(var(--zj-warning-container), var(--zj-warning-container)), var(--zj-surface-container-lowest); color: var(--zj-on-surface); }
.toast--info    { --toast-accent: var(--zj-info); background: linear-gradient(var(--zj-info-container), var(--zj-info-container)), var(--zj-surface-container-lowest); color: var(--zj-on-surface); }
.toast { border: 1px solid var(--toast-accent, currentColor); }
.toast > div:first-child { color: var(--toast-accent, currentColor); }
.toast__content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast__timer { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.toast__timer[hidden] { display: none; }
.toast__timer progress { width: 100%; height: .35rem; accent-color: currentColor; }
.toast__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.toast__pause { background: none; color: inherit; border: 1px solid currentColor; border-radius: .5rem; padding: .4rem .6rem; margin-block-start: .5rem; min-height: 2.75rem; }
.toast__pause:focus-visible, .toast-queue button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.toast-queue, .toast-queue-count { margin: 0; padding: .75rem; background: var(--zj-surface-container-lowest); color: var(--zj-on-surface); border: 1px solid currentColor; border-radius: .75rem; }
.toast-queue { display: grid; gap: .5rem; overflow-wrap: anywhere; }
.toast-queue button { min-height: 2.75rem; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: .5rem; }
.toast-container:empty { display: none; }
@media (max-width: 1180px) {
    /* Keep payment actions available while the persistent inbox is open. */
    body:has(.delivered-payment-panel) .toast-container { max-height: 10rem; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.toast__close {
    margin-inline-start: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    opacity: 0.7;
}
.toast__close:hover { opacity: 1; }

/* Confirm Dialog */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    padding: 1rem;
}

.dialog {
    background: var(--zj-surface-container-lowest);
    border-radius: var(--zj-radius-2xl);
    box-shadow: var(--zj-shadow-2xl);
    padding: 2rem;
    max-width: 28rem;
    width: 100%;
    animation: zj-fade-in 200ms ease forwards;
}

.dialog__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.dialog__message {
    color: var(--zj-on-surface-variant);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.dialog__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start; /* RTL: buttons align to the right */
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state__icon {
    font-size: 3.5rem;
    color: var(--zj-outline-variant);
    margin-bottom: 1rem;
    opacity: 0.4;
}

.empty-state__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--zj-on-surface-variant);
    margin-bottom: 0.5rem;
}

.empty-state__message {
    color: var(--zj-on-surface-variant);
    font-size: 0.9375rem;
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.loading-spinner__icon {
    font-size: 2rem;
    color: var(--zj-primary);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tabs */
.tab-active {
    padding: 0.75rem 1.5rem;
    border-bottom: 2px solid var(--zj-primary);
    color: var(--zj-primary);
    font-weight: 700;
    background: none;
    border-top: none; border-left: none; border-right: none;
    cursor: pointer;
    margin-bottom: -2px;
}
.tab-inactive {
    padding: 0.75rem 1.5rem;
    border: none;
    color: var(--zj-on-surface-variant);
    background: none;
    cursor: pointer;
    transition: color var(--zj-transition-fast);
}
.tab-inactive:hover { color: var(--zj-on-surface); }

/* ============================================================
   PROGRESS STEPPER
   ============================================================ */
.stepper { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: 0 0.25rem; gap: 0.25rem; }
.stepper__line { position: absolute; top: 1.125rem; left: 10%; right: 10%; height: 4px; background: var(--zj-surface-container-high); border-radius: 2px; }
.stepper__progress { height: 100%; background: var(--zj-primary); border-radius: 2px; transition: width var(--zj-transition-slow); }
.stepper__step { position: relative; z-index: 1; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 0.5rem; }
.stepper__dot { width: 2.25rem; height: 2.25rem; border-radius: var(--zj-radius-full); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; }
.stepper__dot--completed { background: var(--zj-primary); color: var(--zj-on-primary); }
.stepper__dot--active { background: var(--zj-primary-container); color: var(--zj-on-primary-container); animation: zj-pulse 2s ease-in-out infinite; }
.stepper__dot--pending { background: var(--zj-surface-container-highest); color: var(--zj-on-surface-variant); }
.stepper__label { font-size: 0.72rem; font-weight: 600; color: var(--zj-on-surface-variant); text-align: center; max-width: 4.5rem; line-height: 1.35; overflow-wrap: anywhere; }

/* ============================================================
   BOTTOM MOBILE NAV
   ============================================================ */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding: 0.5rem 1rem;
    z-index: 40;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    color: var(--zj-on-surface-variant); text-decoration: none;
    font-size: 0.625rem; font-weight: 700; transition: color var(--zj-transition-fast);
    background: none; border: none; cursor: pointer; padding: 0.25rem;
    flex: 1 1 0;
    min-width: 0;
}
.bottom-nav__item.active { color: var(--zj-primary); }
.bottom-nav__item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.bottom-nav__settings {
    position: relative;
    display: grid;
    place-items: center;
    flex: 1 1 0;
    min-width: 0;
}

.bottom-nav__settings-trigger {
    width: 100%;
    min-height: auto;
    font-family: inherit;
}

.bottom-nav__settings-panel {
    position: absolute;
    inset-inline-end: 0;
    bottom: calc(100% + 0.85rem);
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(72vh, 36rem);
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(var(--zj-outline-rgb), 0.18);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

[dir="ltr"] .bottom-nav__settings-panel {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.bottom-nav__settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.8rem 0.35rem;
}

.bottom-nav__settings-header > div {
    display: grid;
    gap: 0.2rem;
}

.bottom-nav__settings-header strong {
    color: var(--zj-on-surface);
    font-size: 1rem;
    font-weight: 900;
}

.bottom-nav__settings-header small,
.bottom-nav__settings-field small,
.bottom-nav__settings-note {
    color: var(--zj-on-surface-variant);
    font-size: 0.75rem;
    line-height: 1.65;
}

.bottom-nav__settings-close {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--zj-surface-container);
    color: var(--zj-on-surface-variant);
    cursor: pointer;
}

.bottom-nav__profile-form {
    display: grid;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem 0.8rem;
}

.bottom-nav__settings-field {
    display: grid;
    gap: 0.35rem;
}

.bottom-nav__settings-field label {
    color: var(--zj-on-surface);
    font-size: 0.78rem;
    font-weight: 800;
}

.bottom-nav__settings-save {
    width: 100%;
    justify-content: center;
}

.bottom-nav__settings-note {
    margin: 0;
    padding: 0.65rem 0.8rem;
    border-radius: 0.9rem;
    background: var(--zj-surface-container);
}

.bottom-nav__settings-divider {
    height: 1px;
    margin: 0.25rem 0.8rem;
    background: rgba(var(--zj-outline-rgb), 0.14);
}

/* ============================================================
   KITCHEN ORDER CARD
   ============================================================ */
.kitchen-card {
    border-radius: var(--zj-radius-2xl);
    padding: 1.25rem 1.25rem 1.35rem;
    border-inline-end: 4px solid;
    overflow: visible;
}
.kitchen-card--new { border-color: var(--zj-primary); }
.kitchen-card--preparing { border-color: #f59e0b; }
.kitchen-card--ready { border-color: #10b981; }
.kitchen-order-shell {
    position: relative;
    overflow: visible;
}
.kitchen-order-shell--new {
    animation: kitchen-new-order-flash 1.15s ease-in-out 4;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.24), 0 18px 34px rgba(14, 165, 233, 0.18);
}
.kitchen-order-shell--new .kitchen-card {
    background: linear-gradient(180deg, rgba(236, 253, 255, 0.98), rgba(255, 255, 255, 0.94));
}

@keyframes kitchen-new-order-flash {
    0%, 100% {
        transform: translateY(0);
        filter: none;
    }

    45% {
        transform: translateY(-2px);
        filter: brightness(1.07);
    }
}

/* ============================================================
   CUSTOMER MOBILE SHELL
   ============================================================ */
.customer-shell { min-height: 100vh; background: var(--zj-surface); padding-bottom: 5rem; /* space for bottom nav */ }
.customer-container { max-width: 28rem; margin: 0 auto; padding: 0 1rem; }

@media (max-width: 640px) {
    button,
    .btn {
        min-height: 3rem;
        padding: 0.875rem 1.15rem;
        font-size: 0.9375rem;
    }

    .btn-ghost {
        min-height: 2.875rem;
        padding-inline: 1rem;
    }

    .btn-icon {
        min-width: 2.875rem;
        min-height: 2.875rem;
        padding: 0.7rem;
    }

    .filter-pill {
        min-height: 2.875rem;
        padding: 0.7rem 1rem;
        font-weight: 700;
    }

    .bottom-nav {
        padding: 0.65rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom));
        gap: 0.35rem;
    }

    .bottom-nav__item {
        min-width: 3.4rem;
        min-height: 3.25rem;
        padding: 0.5rem 0.35rem;
        gap: 0.35rem;
        border-radius: 1rem;
    }

    .bottom-nav__item .material-symbols-outlined {
        font-size: 1.35rem;
    }

    .customer-shell {
        padding-bottom: 6.1rem;
    }

    .customer-container {
        padding-inline: 0.9rem;
    }
}

@media (max-width: 420px) {
    .bottom-nav__item {
        min-width: 0;
        flex: 1 1 0;
    }

    .customer-container {
        padding-inline: 0.75rem;
    }
}

/* ============================================================
   ADDITIONAL FEEDBACK (ErrorDisplay, OfflineBanner, Skeleton)
   ============================================================ */

/* ErrorDisplay */
.error-display {
    background: rgba(186, 26, 26, 0.05);
    border: 1px solid rgba(186, 26, 26, 0.2);
    border-radius: var(--zj-radius-lg);
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.error-display__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.error-display__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--zj-error);
    font-weight: 700;
    font-size: 1rem;
}
.error-display__close {
    background: transparent;
    border: none;
    color: var(--zj-on-surface-variant);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: var(--zj-radius-sm);
}
.error-display__close:hover { background: rgba(0, 0, 0, 0.05); color: var(--zj-on-surface); }
.error-display__message {
    color: var(--zj-on-surface);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.error-display__ref {
    color: var(--zj-on-surface-variant);
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}
.error-display__tech { margin-top: 0.5rem; }
.error-display__tech-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: none;
    color: var(--zj-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.error-display__tech-content {
    background: var(--zj-surface-container-high);
    color: var(--zj-on-surface);
    padding: 0.75rem;
    border-radius: var(--zj-radius-sm);
    font-size: 0.75rem;
    overflow-x: auto;
    margin-top: 0.5rem;
}
.error-display__footer { margin-top: 1rem; }
.d-none { display: none !important; }

/* ============================================================
   DEBUG ROLE SWITCHER (dev-only floating panel)
   ============================================================ */
.debug-switcher {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 99999;
    font-family: var(--zj-font-body);
    direction: ltr;
}

.debug-switcher__toggle {
    width: 3rem;
    height: 3rem;
    border-radius: var(--zj-radius-full);
    background: var(--zj-inverse-surface);
    color: var(--zj-inverse-on-surface);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--zj-shadow-xl);
    transition: all var(--zj-transition-fast);
    font-size: 1.25rem;
}
.debug-switcher__toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--zj-shadow-2xl);
}

.debug-switcher__panel {
    position: absolute;
    bottom: 4rem;
    left: 0;
    width: 18rem;
    background: rgba(43, 50, 50, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--zj-radius-xl);
    box-shadow: var(--zj-shadow-2xl);
    padding: 1.25rem;
    color: var(--zj-inverse-on-surface);
    animation: zj-fade-in 200ms ease forwards;
}

.debug-switcher__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(235, 242, 242, 0.5);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.debug-switcher__section {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(235, 242, 242, 0.1);
}
.debug-switcher__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.debug-switcher__label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(235, 242, 242, 0.4);
    margin-bottom: 0.5rem;
}

.debug-switcher__btn {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: var(--zj-radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--zj-transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    text-decoration: none;
    text-align: left;
}

.debug-switcher__btn--navigate {
    background: rgba(255, 255, 255, 0.08);
    color: var(--zj-inverse-on-surface);
}
.debug-switcher__btn--navigate:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.debug-switcher__btn--superadmin {
    background: rgba(186, 26, 26, 0.2);
    color: #ffb4ab;
}
.debug-switcher__btn--superadmin:hover { background: rgba(186, 26, 26, 0.35); }

.debug-switcher__btn--admin {
background: rgba(14, 165, 233, 0.2);
    color: var(--zj-primary-fixed-dim);
}
.debug-switcher__btn--admin:hover { background: rgba(14, 165, 233, 0.35); }

.debug-switcher__btn--staff {
    background: rgba(23, 37, 84, 0.2);
    color: var(--zj-secondary-fixed-dim);
}
.debug-switcher__btn--staff:hover { background: rgba(23, 37, 84, 0.35); }

.debug-switcher__btn--customer {
    background: rgba(245, 158, 11, 0.2);
    color: var(--zj-tertiary-fixed-dim);
}
.debug-switcher__btn--customer:hover { background: rgba(245, 158, 11, 0.35); }

.debug-switcher__btn--logout {
    background: rgba(186, 26, 26, 0.15);
    color: #ffb4ab;
    justify-content: center;
}
.debug-switcher__btn--logout:hover { background: rgba(186, 26, 26, 0.3); }

.debug-switcher__user {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--zj-radius-md);
    margin-bottom: 0.5rem;
}
.debug-switcher__user-label { color: rgba(235, 242, 242, 0.4); font-size: 0.625rem; }
.debug-switcher__user-name { color: var(--zj-inverse-on-surface); font-weight: 700; }
.debug-switcher__user-role { color: var(--zj-primary-fixed-dim); font-size: 0.6875rem; }

.debug-switcher__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: rgba(235, 242, 242, 0.5);
}

/* OfflineBanner */
.offline-banner {
    background: var(--zj-error);
    color: var(--zj-on-error);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.offline-banner__content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.offline-banner__retry {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    opacity: 0.8;
}
.offline-banner__retry:hover { opacity: 1; }

/* Subscription notices */
.subscription-notice {
    position: sticky;
    top: calc(var(--zj-topbar-height) + 0.75rem);
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--zj-radius-lg);
    border: 1px solid transparent;
    box-shadow: var(--zj-shadow-md);
}

.subscription-notice > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 1.65rem;
}

.subscription-notice strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 900;
}

.subscription-notice p {
    margin: 0.15rem 0 0;
    font-size: 0.86rem;
    line-height: 1.7;
}

.subscription-notice--warning {
    background: #fff8e1;
    border-color: #f2c94c;
    color: #5a4100;
}

.subscription-notice--expired {
    background: #fff1f0;
    border-color: #ff8a80;
    color: #8f1d18;
}

.subscription-notice__dismiss {
    margin-inline-start: auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.subscription-notice__dismiss:hover {
    background: rgba(0, 0, 0, 0.14);
}

@media (max-width: 680px) {
    .subscription-notice {
        align-items: flex-start;
        padding: 0.75rem;
    }

    .subscription-notice__dismiss {
        width: 2rem;
        height: 2rem;
    }
}

/* Skeleton */
.skeleton {
    background: var(--zj-surface-container-highest);
    position: relative;
    overflow: hidden;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

/* ============================================================
   ORDER TIMELINE
   ============================================================ */
.order-timeline { position: relative; padding-inline-end: 2rem; border-inline-end: 2px solid var(--zj-outline-variant); }
.order-timeline__step { position: relative; padding-bottom: 1.5rem; padding-inline-end: 1.5rem; }
.order-timeline__dot { position: absolute; inset-inline-end: -0.5rem; top: 0; width: 1rem; height: 1rem; border-radius: var(--zj-radius-full); }
.order-timeline__dot--done { background: var(--zj-primary); }
.order-timeline__dot--pending { background: var(--zj-surface-container-highest); }


.kitchen-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; height: calc(100vh - var(--zj-topbar-height) - 8rem); }
.kitchen-column { display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; padding: 0.5rem 0.5rem 1.25rem; }
.kitchen-column__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.kitchen-stats { position: fixed; bottom: 0; left: 0; right: 0; margin-inline-start: var(--zj-sidebar-width); }

@media (max-width: 960px) {
    .kitchen-board { grid-template-columns: 1fr; height: auto; }
    .kitchen-stats { margin-inline-start: 0; }
}

/* Keep touch targets separate when the full mobile toolbar cannot fit one row. */
@media (max-width: 420px) {
    .app-topbar {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
        row-gap: .5rem;
    }
    .app-topbar__menu-btn { grid-row: 1; grid-column: 1; }
    .app-topbar__search { grid-row: 1; grid-column: 3; }
    .app-topbar__actions {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100%;
        flex-wrap: wrap;
        gap: .4rem;
        justify-content: space-between;
    }
    .app-topbar__actions > * { flex-shrink: 0; }
    .topbar-language { margin-inline-end: 0; }
}

/* Native Android keeps language and appearance in the existing account menu. */
@media (max-width: 420px) {
    .app-shell--android .app-topbar { display:flex; flex-wrap:nowrap; gap:.25rem; }
    .app-shell--android .app-topbar__actions { width:auto; min-width:0; flex-wrap:nowrap; gap:.25rem; }
    .app-shell--android .app-topbar__brand { display:none; }
}

.fab {
    position: fixed; bottom: 2rem; inset-inline-start: 2rem;
    width: 3.5rem; height: 3.5rem;
    background: var(--zj-primary); color: var(--zj-on-primary);
    border-radius: var(--zj-radius-full);
    box-shadow: var(--zj-shadow-2xl);
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer;
    transition: all var(--zj-transition-fast);
}

/* ============================================================
   STEPPER & COMPACT STEP SUMMARY CARDS (WIZARD UX)
   ============================================================ */
.stepper__step--clickable {
    cursor: pointer;
    transition: transform var(--zj-transition-fast);
}
.stepper__step--clickable:hover .stepper__dot--completed,
.stepper__step--clickable:hover .stepper__dot--active {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(var(--zj-primary-rgb), 0.35);
}

.zj-step-summary-card {
    background: var(--zj-surface-container-low);
    border: 1px solid rgba(var(--zj-primary-rgb), 0.16);
    border-radius: var(--zj-radius-xl);
    padding: 0.65rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: all var(--zj-transition-fast);
    box-shadow: var(--zj-shadow-xs);
}
.zj-step-summary-card:hover {
    border-color: rgba(var(--zj-primary-rgb), 0.35);
    background: var(--zj-surface-container);
}
.zj-step-summary-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.zj-step-summary-card__title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.zj-step-summary-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    background: rgba(var(--zj-primary-rgb), 0.12);
    color: var(--zj-primary);
    border-radius: var(--zj-radius-full);
}
.zj-step-summary-card__badge .material-symbols-outlined {
    font-size: 0.95rem;
    color: var(--zj-success);
}
.zj-step-summary-card__icon {
    font-size: 1.15rem;
    color: var(--zj-on-surface-variant);
}
.zj-step-summary-card__title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--zj-on-surface);
}
.zj-step-summary-card__edit-btn {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.6rem !important;
    height: auto !important;
    border-radius: var(--zj-radius-lg) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--zj-primary) !important;
    background: rgba(var(--zj-primary-rgb), 0.08);
}
.zj-step-summary-card__edit-btn:hover {
    background: rgba(var(--zj-primary-rgb), 0.18) !important;
}
.zj-step-summary-card__edit-btn .material-symbols-outlined {
    font-size: 0.95rem;
}
.zj-step-summary-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.zj-step-summary-card__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
}
.zj-step-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--zj-radius-full);
    background: var(--zj-surface);
    border: 1px solid var(--zj-outline-variant);
    color: var(--zj-on-surface);
    font-size: 0.76rem;
}
.zj-step-summary-pill__label {
    color: var(--zj-on-surface-variant);
    font-weight: 500;
}
.zj-step-summary-pill__value {
    color: var(--zj-on-surface);
    font-weight: 700;
}

/* Smart Presets & Visual Intelligence for Options - Compact Pill Design */
.zj-smart-preset-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0;
}
.zj-smart-preset-card {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--zj-radius-full, 9999px);
    border: 1px solid rgba(var(--zj-primary-rgb), 0.18);
    background: var(--zj-surface-container);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    transition: all var(--zj-transition-fast);
}
.zj-smart-preset-card:hover {
    transform: translateY(-1px);
    border-color: var(--zj-primary);
    background: var(--zj-surface-container-high);
    box-shadow: 0 2px 8px rgba(var(--zj-primary-rgb), 0.14);
}
.zj-smart-preset-card__top {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.zj-smart-preset-card__icon {
    font-size: 1.05rem;
    color: var(--zj-primary);
}
.zj-smart-preset-card__title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--zj-on-surface);
    white-space: nowrap;
}
.zj-smart-preset-card__desc {
    display: none; /* hidden to keep design ultra-compact and simple */
}
.zj-smart-preset-card__badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: var(--zj-radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.zj-option-speed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: var(--zj-radius-full);
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.zj-option-speed-badge--prep {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}
.zj-option-price-badge {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: var(--zj-radius-full);
    background: rgba(var(--zj-primary-rgb), 0.12);
    color: var(--zj-primary);
}
.zj-option-price-badge--free {
    background: #ecfdf5;
    color: #059669;
}

.zj-stepper-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--zj-outline-variant);
}

#blazor-error-ui { display: none !important; }

/* Preset labels must fit narrow screens even with long Arabic names. */
.zj-smart-preset-card {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}
.zj-smart-preset-card__title {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 420px) {
    .table-filters__buttons { flex-wrap: wrap; }
    .table-filters__buttons > .btn { min-width: 0; flex: 1 1 100%; }
    .team-hub-tabs > .btn { max-width: 100%; white-space: normal; }
}

/* The independent ledger keeps this operational notice visible without covering financial fields. */
.app-content:has(.ledger-workspace) > .subscription-notice,
.app-content:has(.table-form-layout) > .subscription-notice,
.app-content:has(.employee-additional-job-titles) > .subscription-notice { position: static; }

/* Keep the shared shell, overlays and loading feedback consistent with the user's motion preference. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* Scoped layout utilities: the app does not load Bootstrap's grid. */
.zj-operating-page { color: var(--zj-on-surface); container-type: inline-size; min-width: 0; }
.zj-operating-page .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.zj-operating-page .row > [class*="col-"] { grid-column: span 12; min-width: 0; width: auto; }
@container (min-width: 680px) {
    .zj-operating-page .row > .col-md-2 { grid-column: span 2; }
    .zj-operating-page .row > .col-md-3 { grid-column: span 3; }
    .zj-operating-page .row > .col-md-4 { grid-column: span 4; }
    .zj-operating-page .row > .col-md-6 { grid-column: span 6; }
    .zj-operating-page .row > .col-md-9 { grid-column: span 9; }
}
.zj-operating-page .d-flex { display: flex; }
.zj-operating-page .d-inline-flex { display: inline-flex; }
.zj-operating-page .flex-column { flex-direction: column; }
.zj-operating-page .flex-wrap { flex-wrap: wrap; }
.zj-operating-page .align-items-center { align-items: center; }
.zj-operating-page .justify-content-between { justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.zj-operating-page .gap-2, .zj-operating-page .g-2 { gap: .5rem; }
.zj-operating-page .gap-3 { gap: 1rem; }
.zj-operating-page .mb-0 { margin-bottom: 0; }
.zj-operating-page .mb-2 { margin-bottom: .5rem; }
.zj-operating-page .mb-3 { margin-bottom: 1rem; }
.zj-operating-page .mb-4 { margin-bottom: 1.5rem; }
.zj-operating-page .mt-2 { margin-top: .5rem; }
.zj-operating-page .mt-3 { margin-top: 1rem; }
.zj-operating-page .mt-4 { margin-top: 1.5rem; }
.zj-operating-page .ms-1 { margin-inline-start: .25rem; }
.zj-operating-page .ms-2 { margin-inline-start: .5rem; }
.zj-operating-page .p-2 { padding: .5rem; }
.zj-operating-page .p-3 { padding: 1rem; }
.zj-operating-page .p-4 { padding: 1.5rem; }
.zj-operating-page .pb-2 { padding-bottom: .5rem; }
.zj-operating-page .ps-3 { padding-inline-start: 1rem; }
.zj-operating-page .border { border: 1px solid var(--zj-outline-variant); }
.zj-operating-page .border-bottom { border-bottom: 1px solid var(--zj-outline-variant); }
.zj-operating-page .rounded { border-radius: .75rem; }
.zj-operating-page .fw-bold { font-weight: 700; }
.zj-operating-page .fw-semibold { font-weight: 600; }
.zj-operating-page .small { font-size: .875rem; }
.zj-operating-page .text-center { text-align: center; }
.zj-operating-page .text-start { text-align: start; }
.zj-operating-page .text-decoration-none { text-decoration: none; }
.zj-operating-page .bg-white { background-color: var(--zj-surface-container-lowest) !important; }
.zj-operating-page .bg-light { background-color: var(--zj-surface-container-low) !important; }
.zj-operating-page .text-dark { color: var(--zj-on-surface) !important; }
.zj-operating-page .text-muted,
.zj-operating-page .text-secondary { color: var(--zj-on-surface-variant) !important; }
.zj-operating-page .text-primary { color: var(--zj-on-surface) !important; }
.zj-operating-page .border,
.zj-operating-page .border-bottom { border-color: var(--zj-outline-variant) !important; }
.zj-operating-page .btn-primary {
    background-color: var(--zj-ds-action-background);
    border-color: var(--zj-ds-action-background);
    color: var(--zj-ds-action-foreground);
}
.zj-operating-page .btn-outline-primary,
.zj-operating-page .btn-outline-secondary {
    background-color: var(--zj-surface-container-lowest);
    border-color: var(--zj-outline);
    color: var(--zj-on-surface);
}
.zj-operating-page .btn-outline-primary:hover,
.zj-operating-page .btn-outline-secondary:hover { background-color: var(--zj-surface-container-high); }

/* Explicit navigation actions: keep native link semantics and existing route guards. */
a.btn,
button.btn {
    text-decoration: none !important;
}
.zj-action-links {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .65rem;
}
a.btn.zj-action-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .65rem .9rem;
    border: 1px solid var(--zj-outline-variant);
    border-radius: .75rem;
    background: var(--zj-surface-container-lowest);
    color: var(--zj-on-surface);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
    text-align: start;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
}
a.btn.zj-action-link::after {
    content: "←" / "";
    flex-shrink: 0;
    margin-inline-start: auto;
    font-size: 1.1em;
    line-height: 1;
}
a.btn.zj-action-link:dir(ltr)::after { content: "→" / ""; }
a.btn.zj-action-link:hover {
    color: var(--zj-on-surface);
    background: var(--zj-surface-container);
    border-color: var(--zj-on-surface-variant);
    transform: none;
}
a.btn.zj-action-link:focus-visible {
    outline: 3px solid var(--zj-on-surface);
    outline-offset: 3px;
}
a.btn.zj-action-link > span:not(.material-symbols-outlined) { min-width: 0; }
a.btn.zj-record-link { padding: .35rem .65rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    a.btn.zj-action-link { transition: none; }
}

/* The 700px cashier cart leaves a desktop gutter for persistent errors.
   Do not cover its name, quantity controls or return action. */
@media (min-width: 1280px) {
    body:has(.cashier-cart-review) .toast-container { width:min(24rem,calc((100vw - 700px) / 2 - 24px)); }
}

/* Field contract 31: one control size; opt-in container-driven layout. */
:root { --zj-control-height: 2.75rem; --zj-control-padding-block: .5rem; --zj-control-font-size: .875rem; --zj-field-gap: .375rem; }
.zj-field-density-compact { --zj-control-height: 2.5rem; --zj-control-padding-block: .375rem; }
.zj-field-grid { display:grid; grid-template-columns: var(--zj-field-columns,minmax(0,1fr)); gap: var(--zj-field-gap) 1rem; min-width:0; }
.zj-field-grid > :is(.zj-form-field,.zj-field) { min-width:0; margin:0; display:grid; gap:var(--zj-field-gap); align-content:start; }
.zj-field-grid > .zj-field > :first-child { font-size:.875rem; font-weight:600; color:var(--zj-on-surface); line-height:1.5; margin:0; overflow-wrap:anywhere; }
.zj-field-grid .zj-field-notes { color:var(--zj-on-surface-variant); font-size:.8125rem; line-height:1.5; }
.zj-field-grid > .zj-field > :is(input:not([type=checkbox]):not([type=radio]),select,.zj-field-value) { box-sizing:border-box; min-width:0; width:100%; min-height:var(--zj-control-height); font-size:var(--zj-control-font-size); }
.zj-field-grid > .zj-field > :is(input:not([type=checkbox]):not([type=radio]),select) { padding-block:var(--zj-control-padding-block); }
.zj-field-grid > .zj-field-wide { grid-column:1/-1; }
.zj-field-grid > .zj-field-action { align-self:start; }
@supports (grid-template-rows: subgrid) {
 .zj-field-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); }
 .zj-field-grid > :is(.zj-form-field,.zj-field) { grid-row:span 3; grid-template-rows:subgrid; align-items:start; }
 .zj-field-grid > :is(.zj-form-field,.zj-field) > :nth-child(2) { align-self:start; }
}
.zj-autocomplete__detail,.zj-autocomplete__option-description { display:block; white-space:normal; overflow-wrap:anywhere; font-size:.8125rem; color:var(--zj-on-surface-variant); }
.zj-autocomplete__option:has(.zj-autocomplete__option-description) { flex-wrap:wrap; }
.zj-autocomplete__option-description { flex-basis:100%; text-align:start; }
.zj-autocomplete__more { width:100%; padding:.75rem; border:0; background:var(--zj-surface-container); color:var(--zj-on-surface); font:inherit; cursor:pointer; }
.zj-autocomplete__more:focus-visible { outline:2px solid var(--zj-primary); outline-offset:-2px; }
.zj-field-error { color:var(--zj-error); font-size:.8125rem; margin-block:.25rem 0; }

.zj-field-switches { display:flex; align-items:start; flex-wrap:wrap; gap:.5rem 1rem; }
.zj-field-switches > .zj-field { display:grid; gap:var(--zj-field-gap); }

/* Context and permission boundaries retain drafts without adding layout boxes. */
.zj-context-content { display: contents; }
.zj-context-content[hidden] { display: none; }

/* Chrome 109: custom properties accept unsupported tokens, so a duplicate
   declaration alone is NOT a fallback. Keep the override feature-gated. */
@supports not (color: color-mix(in srgb, black, white)) {
    :root { --zj-ds-action-background: #064a69; }
    .app-sidebar__link:hover { background: rgba(var(--zj-primary-rgb), .08); }
}

/* Validation navigation: native controls receive the same error boundary after a submit attempt. */
.zj-validation-attempted input:invalid,
.zj-validation-attempted select:invalid,
.zj-validation-attempted textarea:invalid,
input.invalid, select.invalid, textarea.invalid {
    border-color: var(--zj-error, #ba1a1a);
    outline: 2px solid var(--zj-error, #ba1a1a);
    outline-offset: 2px;
    scroll-margin-block: 5rem;
}