/* Fonts: loaded in Blade layout (preconnect + link). Tokens: */
:root {
    --void:        #120B08;
    --deep:        #1A110D;
    --dark:        #241711;
    --surface:     #2A1C15;
    --surface-2:   #302018;
    --surface-3:   #38261D;
    --border:      #4B3529;
    --border-2:    #6B4A36;
    --gold:        #D6A34F;
    --gold-lt:     #F4CF8A;
    --gold-dk:     #A7742F;
    --gold-contrast: #120B08;
    --gold-bg:     rgba(214,163,79,.14);
    --gold-bg2:    rgba(214,163,79,.22);
    --cream:       #F4F4F5;
    --muted:       #ffffff;
    --faint:       #A8A8AD;
    --state-clean: #B8C98F;
    --state-clean-bg: rgba(184,201,143,.16);
    --state-occupied: #E2A14A;
    --state-occupied-bg: rgba(226,161,74,.18);
    --state-reserved: #D18B61;
    --state-reserved-bg: rgba(209,139,97,.17);
    --state-needs-clean: #BD6A4A;
    --state-needs-clean-bg: rgba(189,106,74,.16);
    --success:     #2D9F6B;
    --success-lt:  rgba(45,159,107,.12);
    --ok:          #22C55E;
    --ok-bg:       rgba(34, 197, 94, 0.14);
    --ok-border:   rgba(34, 197, 94, 0.36);
    --warning:     #D4873A;
    --warning-lt:  rgba(212,135,58,.12);
    --rust:        #e8b86a;
    --rust-bg:     rgba(232, 184, 106, 0.14);
    --rust-border: rgba(167, 116, 47, 0.45);
    --danger:      #C0392B;
    --danger-lt:   rgba(192,57,43,.12);
    --allergen:        #fca5a5;
    --allergen-bg:     rgba(248, 113, 113, 0.15);
    --allergen-border: rgba(248, 113, 113, 0.35);
    --info:        #3A7BD5;
    --info-lt:     rgba(58,123,213,.12);
    --sidebar-w:   240px;
    --sidebar-collapsed: 72px;
    --header-h:    58px;
    --footer-h:    34px;
    --radius:      10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --t-fast:   0.12s cubic-bezier(.4,0,.2,1);
    --t:        0.18s cubic-bezier(.4,0,.2,1);
    --t-slow:   0.30s cubic-bezier(.4,0,.2,1);
    --t-spring: 0.25s cubic-bezier(.34,1.56,.64,1);
    --font:     'Outfit', sans-serif;
    --serif:    'Cormorant Garamond', serif;
    --mono:     'JetBrains Mono', monospace;
    --app-bg: radial-gradient(1100px 440px at 22% -14%, rgba(214,163,79,.06), transparent 56%), radial-gradient(820px 360px at 86% -4%, rgba(153,90,44,.07), transparent 58%), linear-gradient(180deg, #150D09 0%, #0F0705 55%, #0B0403 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(214,163,79,.11), transparent 65%), linear-gradient(180deg, #21150F 0%, var(--deep) 38%, #120C09 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 38%), linear-gradient(90deg, #1A110D 0%, #241912 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
    min-height: 100%;
    font-family: var(--font);
    background: var(--app-bg);
    background-attachment: fixed;
    color: var(--cream);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body,
.sidebar,
.top-header,
.res-footer,
.card,
.stat-card,
.table-tile,
.nav-item,
.h-btn,
.venue-selector,
.live-clock,
.btn,
.form-control,
.modal {
    transition: background var(--t-slow), background-color var(--t-slow), color var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow);
}

/* Optional tone switch: add class "tone-cafe" or "tone-cocoa" on body. */
body.tone-cafe {
    --void: #1A120E;
    --deep: #241912;
    --dark: #2E2017;
    --surface: #35241A;
    --surface-2: #3D2A1E;
    --surface-3: #473023;
    --border: #60412F;
    --border-2: #7D573F;
    --app-bg: radial-gradient(1100px 440px at 22% -14%, rgba(214,163,79,.08), transparent 58%), radial-gradient(820px 360px at 86% -4%, rgba(164,96,49,.09), transparent 60%), linear-gradient(180deg, #20140F 0%, #160F0B 55%, #110A07 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(214,163,79,.13), transparent 65%), linear-gradient(180deg, #2B1C14 0%, var(--deep) 38%, #1A120E 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 38%), linear-gradient(90deg, #241912 0%, #302018 100%);
}

body.tone-cocoa {
    --void: #100805;
    --deep: #170F0B;
    --dark: #20150F;
    --surface: #271A13;
    --surface-2: #2E1E16;
    --surface-3: #37241B;
    --border: #473225;
    --border-2: #634532;
    --app-bg: radial-gradient(1100px 440px at 22% -14%, rgba(214,163,79,.05), transparent 58%), radial-gradient(820px 360px at 86% -4%, rgba(128,74,36,.07), transparent 60%), linear-gradient(180deg, #140C08 0%, #0E0604 58%, #0A0402 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(214,163,79,.09), transparent 65%), linear-gradient(180deg, #1B120D 0%, var(--deep) 38%, #0F0705 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.045) 0%, transparent 38%), linear-gradient(90deg, #170F0B 0%, #20150F 100%);
}

body.tone-light {
    --void: #E8ECF1;
    --deep: #F4F6F8;
    --dark: #EBEEF2;
    --surface: #ffffff;
    --surface-2: #F7F8FA;
    --surface-3: #EEF1F4;
    --border: #D8DEE6;
    --border-2: #C3CBD6;
    --gold: #1D4ED8;
    --gold-lt: #3B82F6;
    --gold-dk: #1E3A8A;
    --gold-contrast: #ffffff;
    --gold-bg: rgba(29,78,216,.10);
    --gold-bg2: rgba(29,78,216,.16);
    --cream: #0B1220;
    --muted: #3F4B5B;
    --faint: #5C6B7A;
    --state-clean: #0F9F6E;
    --state-clean-bg: rgba(15,159,110,.14);
    --state-occupied: #D97706;
    --state-occupied-bg: rgba(217,119,6,.14);
    --state-reserved: #6D28D9;
    --state-reserved-bg: rgba(109,40,217,.13);
    --state-needs-clean: #DC2626;
    --state-needs-clean-bg: rgba(220,38,38,.12);
    --success-lt: rgba(15,159,110,.16);
    --warning-lt: rgba(217,119,6,.16);
    --danger-lt: rgba(220,38,38,.14);
    --info-lt: rgba(14,116,144,.16);
    --app-bg: #F4F6F8;
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    color-scheme: light;
}

body.tone-obsidian {
    --void: #050505;
    --deep: #0a0a0a;
    --dark: #121212;
    --surface: #1a1a1a;
    --surface-2: #242424;
    --surface-3: #2e2e2e;
    --border: #383838;
    --border-2: #4a4a4a;
    --gold: #D4AF37;
    --gold-lt: #FFE58F;
    --gold-dk: #AA8C2C;
    --gold-bg: rgba(212, 175, 55, 0.12);
    --gold-bg2: rgba(212, 175, 55, 0.18);
    --cream: #F5F5F5;
    --muted: #B5B5B5;
    --faint: #989898;
    --app-bg: radial-gradient(1100px 440px at 22% -14%, rgba(212, 175, 55, 0.055), transparent 48%), radial-gradient(820px 360px at 86% -4%, rgba(255, 255, 255, 0.025), transparent 58%), linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #000000 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(212, 175, 55, 0.08), transparent 60%), linear-gradient(180deg, #121212 0%, var(--deep) 38%, #000000 100%);
    --header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 38%), linear-gradient(90deg, #0a0a0a 0%, #121212 100%);
}

body.tone-ocean {
    --void: #E7EEF6;
    --deep: #F3F6FA;
    --dark: #E4EBF3;
    --surface: #FFFFFF;
    --surface-2: #F6F9FC;
    --surface-3: #EEF3F8;
    --border: #D5DEE8;
    --border-2: #B7C5D6;
    --gold: #1D4ED8;
    --gold-lt: #3B82F6;
    --gold-dk: #1E3A8A;
    --gold-contrast: #ffffff;
    --gold-bg: rgba(29,78,216,.10);
    --gold-bg2: rgba(29,78,216,.18);
    --cream: #0B1220;
    --muted: #3D4F63;
    --faint: #5A6B7D;
    --app-bg: radial-gradient(1200px 520px at 18% -12%, rgba(29,78,216,.07), transparent 52%), linear-gradient(180deg, #F7FAFC 0%, #F3F6FA 100%);
    --sidebar-bg: #FFFFFF;
    --header-bg: #FFFFFF;
    color-scheme: light;
}

body.tone-mint {
    --void: #E6EEE9;
    --deep: #F4F7F5;
    --dark: #E5EDE8;
    --surface: #FFFFFF;
    --surface-2: #F6F9F7;
    --surface-3: #EEF3F0;
    --border: #D5E0DA;
    --border-2: #B7C9C0;
    --gold: #0F766E;
    --gold-lt: #14B8A6;
    --gold-dk: #115E59;
    --gold-contrast: #ffffff;
    --gold-bg: rgba(15,118,110,.10);
    --gold-bg2: rgba(15,118,110,.18);
    --cream: #0C1412;
    --muted: #3F534C;
    --faint: #5A6E66;
    --app-bg: radial-gradient(1200px 520px at 18% -12%, rgba(15,118,110,.06), transparent 52%), linear-gradient(180deg, #F7FAF8 0%, #F4F7F5 100%);
    --sidebar-bg: #FFFFFF;
    --header-bg: #FFFFFF;
    color-scheme: light;
}

/* Website brand — cream + flame orange-red (matches website/public/css/themes/gpp.css) */
body.tone-flame {
    --void: #F0E4D6;
    --deep: #FFF8F0;
    --dark: #F5EBE0;
    --surface: #FFFFFF;
    --surface-2: #FFF9F3;
    --surface-3: #F7EDE3;
    --border: #E8D9C8;
    --border-2: #D4C0A8;
    --gold: #C2410C;
    --gold-lt: #E8722A;
    --gold-dk: #9A3412;
    --gold-contrast: #ffffff;
    --gold-bg: rgba(194,65,12,.10);
    --gold-bg2: rgba(194,65,12,.18);
    --cream: #1A1A1A;
    --muted: #3F3F46;
    --faint: #71717A;
    --app-bg: radial-gradient(1200px 520px at 18% -12%, rgba(194,65,12,.07), transparent 52%), linear-gradient(180deg, #FFFBF6 0%, #FFF8F0 100%);
    --sidebar-bg: #FFFFFF;
    --header-bg: #FFFFFF;
    color-scheme: light;
}

/* Light themes: dark-mode tricks (antialiased ink, white glass, pastel wash)
   make type look thin/grey. Restore paper contrast and subpixel glyphs. */
body:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    --allergen: #b91c1c;
    --allergen-bg: #fee2e2;
    --allergen-border: #dc2626;
    --rust: #9a3412;
    --rust-bg: #fef3c7;
    --rust-border: #d97706;
    --warning: #9a3412;
    --warning-lt: rgba(154, 52, 18, 0.12);
    --ok: #166534;
    --ok-bg: #dcfce7;
    --ok-border: #15803d;
    --success: #166534;
    --success-lt: #dcfce7;
}

body:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .nav-item,
body:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .nav-section-toggle {
    color: var(--cream);
}

body:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .nav-item.active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent), 0 6px 14px rgba(15, 23, 42, .06);
}

body:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .nav-item.active .nav-icon,
body:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .sidebar.collapsed .nav-section.has-active .nav-section-icon {
    background: var(--gold-bg);
    border-color: color-mix(in srgb, var(--gold) 30%, var(--border));
    color: var(--gold-dk);
}

body.mode-desktop:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .shell {
    box-shadow:
        0 40px 90px -36px rgba(15, 23, 42, .18),
        0 8px 28px -12px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .85);
}

body.mode-desktop:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .shell::after {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
    background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 16%);
}

body.mode-desktop:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .top-header {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

body.mode-desktop:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .sidebar {
    background:
        radial-gradient(90% 36% at 0% 0%, var(--gold-bg), transparent 64%),
        color-mix(in srgb, var(--surface) 94%, transparent);
}

body.mode-desktop:is(.tone-light, .tone-ocean, .tone-mint, .tone-flame) .res-footer {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

/* ── Premium signature themes ─────────────────────────────────── */

/* Royal Emerald — deep emerald velvet with antique gold */
body.tone-royal {
    --void: #06120D;
    --deep: #0A1A12;
    --dark: #0F2419;
    --surface: #122E20;
    --surface-2: #163826;
    --surface-3: #1B432E;
    --border: #22573B;
    --border-2: #2E6E4C;
    --gold: #E8C77E;
    --gold-lt: #FCE9B8;
    --gold-dk: #B8923F;
    --gold-contrast: #06120D;
    --gold-bg: rgba(232,199,126,.13);
    --gold-bg2: rgba(232,199,126,.22);
    --cream: #F4F4F5;
    --muted: #D9D9DC;
    --faint: #A8A8AD;
    --app-bg: radial-gradient(1100px 460px at 20% -12%, rgba(232,199,126,.08), transparent 54%), radial-gradient(820px 400px at 88% -2%, rgba(20,120,80,.16), transparent 58%), linear-gradient(180deg, #0A1A12 0%, #06120D 56%, #030A07 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(232,199,126,.10), transparent 62%), linear-gradient(180deg, #0E2418 0%, var(--deep) 38%, #040C08 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 38%), linear-gradient(90deg, #0A1A12 0%, #0F2419 100%);
}

/* Midnight Sapphire — deep navy with luminous azure */
body.tone-sapphire {
    --void: #060A14;
    --deep: #0A1020;
    --dark: #0F1830;
    --surface: #121E3A;
    --surface-2: #162447;
    --surface-3: #1B2C56;
    --border: #243A6B;
    --border-2: #31508F;
    --gold: #56B6FF;
    --gold-lt: #A5D8FF;
    --gold-dk: #2E6FD0;
    --gold-contrast: #060A14;
    --gold-bg: rgba(86,182,255,.13);
    --gold-bg2: rgba(86,182,255,.22);
    --cream: #F4F4F5;
    --muted: #D9D9DC;
    --faint: #A8A8AD;
    --app-bg: radial-gradient(1100px 460px at 20% -12%, rgba(86,182,255,.09), transparent 54%), radial-gradient(820px 400px at 88% -2%, rgba(120,90,255,.12), transparent 58%), linear-gradient(180deg, #0A1020 0%, #060A14 56%, #03060E 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(86,182,255,.11), transparent 62%), linear-gradient(180deg, #0E1830 0%, var(--deep) 38%, #04070F 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 38%), linear-gradient(90deg, #0A1020 0%, #0F1830 100%);
}

/* Burgundy Velvet — wine red with warm copper rose-gold */
body.tone-burgundy {
    --void: #120608;
    --deep: #1C0A0E;
    --dark: #260E14;
    --surface: #2E1117;
    --surface-2: #38161D;
    --surface-3: #431B24;
    --border: #5A2530;
    --border-2: #7A3340;
    --gold: #E0A878;
    --gold-lt: #F6CDA8;
    --gold-dk: #B07A4E;
    --gold-contrast: #120608;
    --gold-bg: rgba(224,168,120,.13);
    --gold-bg2: rgba(224,168,120,.22);
    --cream: #F4F4F5;
    --muted: #D9D9DC;
    --faint: #A8A8AD;
    --app-bg: radial-gradient(1100px 460px at 20% -12%, rgba(224,168,120,.08), transparent 54%), radial-gradient(820px 400px at 88% -2%, rgba(150,30,55,.16), transparent 58%), linear-gradient(180deg, #1C0A0E 0%, #120608 56%, #0B0305 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(224,168,120,.09), transparent 62%), linear-gradient(180deg, #220C11 0%, var(--deep) 38%, #0C0406 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 38%), linear-gradient(90deg, #1C0A0E 0%, #260E14 100%);
}

/* Noir Rosé — graphite charcoal with rose-gold shimmer */
body.tone-rosegold {
    --void: #0C0A0B;
    --deep: #141012;
    --dark: #1C1619;
    --surface: #221A1E;
    --surface-2: #2A2025;
    --surface-3: #33272D;
    --border: #3F2F37;
    --border-2: #574049;
    --gold: #E6B3C0;
    --gold-lt: #F8D7E0;
    --gold-dk: #C07E90;
    --gold-contrast: #0C0A0B;
    --gold-bg: rgba(230,179,192,.13);
    --gold-bg2: rgba(230,179,192,.22);
    --cream: #F4F4F5;
    --muted: #D9D9DC;
    --faint: #A8A8AD;
    --app-bg: radial-gradient(1100px 460px at 20% -12%, rgba(230,179,192,.08), transparent 54%), radial-gradient(820px 400px at 88% -2%, rgba(120,70,90,.13), transparent 58%), linear-gradient(180deg, #141012 0%, #0C0A0B 56%, #070506 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(230,179,192,.08), transparent 62%), linear-gradient(180deg, #1A1417 0%, var(--deep) 38%, #080607 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 38%), linear-gradient(90deg, #141012 0%, #1C1619 100%);
}

/* Aurora — indigo night with teal-violet northern lights */
body.tone-aurora {
    --void: #070811;
    --deep: #0B0D1A;
    --dark: #121530;
    --surface: #171A38;
    --surface-2: #1D2247;
    --surface-3: #242B57;
    --border: #2E2F66;
    --border-2: #46408F;
    --gold: #5EEAD4;
    --gold-lt: #A7F3E6;
    --gold-dk: #2DBFA8;
    --gold-contrast: #070811;
    --gold-bg: rgba(94,234,212,.12);
    --gold-bg2: rgba(94,234,212,.20);
    --cream: #F4F4F5;
    --muted: #D9D9DC;
    --faint: #A8A8AD;
    --app-bg: radial-gradient(900px 460px at 12% -10%, rgba(94,234,212,.11), transparent 50%), radial-gradient(1000px 500px at 92% -6%, rgba(168,85,247,.13), transparent 54%), radial-gradient(800px 480px at 60% 110%, rgba(99,102,241,.11), transparent 54%), linear-gradient(180deg, #0B0D1A 0%, #070811 58%, #04050C 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(94,234,212,.10), transparent 60%), linear-gradient(180deg, #11142A 0%, var(--deep) 38%, #05060F 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 38%), linear-gradient(90deg, #0B0D1A 0%, #121530 100%);
}

/* ══════════════ Workspace presentation modes ══════════════ */
/* Selectable in Settings → Desktop mode (config/desktop_modes.php).        */
/* These change the *form & feel* of the workspace, independent of theme.   */

/* ── Desktop Pro: the system floats as a premium native app window ── */
body.mode-desktop {
    padding: 14px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    background-attachment: fixed;
}
body.mode-desktop .shell {
    height: 100%;
    max-height: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border-2);
    box-shadow:
        0 40px 90px -36px rgba(0,0,0,.78),
        0 8px 28px -12px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.06);
    position: relative;
}
/* faint top sheen across the whole window — like brushed glass */
body.mode-desktop .shell::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none; z-index: 300;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 14%);
}
/* frosted-glass chrome */
body.mode-desktop .top-header {
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%),
        color-mix(in srgb, var(--surface) 58%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-bottom-color: color-mix(in srgb, var(--border-2) 70%, transparent);
}
body.mode-desktop .sidebar {
    background:
        radial-gradient(90% 36% at 0% 0%, var(--gold-bg), transparent 64%),
        color-mix(in srgb, var(--deep) 64%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    backdrop-filter: blur(20px) saturate(1.1);
    border-right-color: color-mix(in srgb, var(--border-2) 70%, transparent);
}
body.mode-desktop .res-footer {
    background: color-mix(in srgb, var(--deep) 70%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
/* refined micro-interactions */
body.mode-desktop .nav-item {
    border-radius: 9px;
    transition: transform var(--t-fast), background var(--t), color var(--t);
}
body.mode-desktop .nav-item:hover { transform: translateX(3px); }
body.mode-desktop .h-btn { transition: transform var(--t-fast), background var(--t), border-color var(--t); }
body.mode-desktop .h-btn:hover { transform: translateY(-1px); }
body.mode-desktop .h-btn:active { transform: scale(.94); }
body.mode-desktop .card,
body.mode-desktop .stat-card { transition: transform var(--t-spring), box-shadow var(--t-slow), border-color var(--t); }
body.mode-desktop .card:hover,
body.mode-desktop .stat-card:hover { transform: translateY(-3px); }
/* rounded inner scrollers feel app-like */
body.mode-desktop .page-content::-webkit-scrollbar { width: 10px; }

/* ── Focus: calm, distraction-free workspace ── */
body.mode-focus .table-status-bar { display: none; }
body.mode-focus .page-content { padding: 30px 38px; }
body.mode-focus .res-footer { opacity: .45; transition: opacity var(--t-slow); }
body.mode-focus .main-area:hover .res-footer { opacity: 1; }
body.mode-focus .top-header { background: color-mix(in srgb, var(--header-bg) 100%, transparent); }

@media (max-width: 768px) {
    body.mode-desktop { padding: 0; height: 100%; overflow: hidden; }
    body.mode-desktop .shell { border-radius: 0; height: 100%; max-height: 100%; border: 0; }
    body.mode-desktop .shell::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .sidebar,
    .top-header,
    .res-footer,
    .card,
    .stat-card,
    .table-tile,
    .nav-item,
    .h-btn,
    .venue-selector,
    .live-clock,
    .btn,
    .form-control,
    .modal {
        transition: none;
    }
    body.mode-desktop .nav-item:hover,
    body.mode-desktop .h-btn:hover,
    body.mode-desktop .card:hover,
    body.mode-desktop .stat-card:hover { transform: none; }
}

::selection { background: var(--gold-dk); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }
* { scrollbar-width: thin; scrollbar-color: var(--border-2) var(--deep); }

.t-display { font-family: var(--serif); font-size: clamp(24px, 3vw, 36px); font-weight: 300; letter-spacing: .02em; }
.t-title   { font-family: var(--serif); font-size: clamp(18px, 2vw, 24px); font-weight: 400; }
.t-heading { font-size: 15px; font-weight: 600; color: var(--cream); }
.t-label   { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.t-body    { font-size: 13.5px; line-height: 1.6; color: var(--cream); }
.t-small   { font-size: 11.5px; color: var(--muted); }
.t-mono    { font-family: var(--mono); font-size: 13px; }
.t-price   { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--gold-lt); }
.t-gold    { color: var(--gold-lt); }
.t-muted   { color: var(--muted); }
.t-faint   { color: var(--faint); }

/* SweetAlert2 — presentable confirm cards (shared across admin + public layouts) */
.swal2-popup:not(.swal2-toast):not(.confirm-order-swal) {
    border-radius: 22px;
    padding: 1.7em 1.45em 1.35em;
}
.swal2-popup.swal-pos-popup {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1.7em 1.45em 1.35em;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}
.swal2-title.swal-pos-title {
    color: var(--cream);
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.swal2-html-container.swal-pos-content {
    color: var(--muted);
}
.swal2-input.swal-pos-input,
.swal2-textarea.swal-pos-input {
    background: var(--deep);
    border: 1px solid var(--border);
    color: var(--cream);
    border-radius: 8px;
    box-shadow: none;
}
.swal2-input.swal-pos-input:focus,
.swal2-textarea.swal-pos-input:focus {
    border-color: var(--gold-dk);
    box-shadow: 0 0 0 2px rgba(214, 164, 80, 0.18);
}
.swal2-validation-message.swal-pos-validation {
    background: var(--allergen-bg, var(--danger-lt));
    color: var(--allergen, #fca5a5);
}
.swal2-popup:not(.swal2-toast) .swal2-actions {
    gap: 14px;
    margin-top: 1.5em;
}
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled {
    margin: 0;
}
.swal2-actions .swal-pos-confirm,
.swal2-actions .swal-pos-cancel,
.swal2-actions .swal-pos-deny,
.swal2-popup:not(.swal2-toast):not(.confirm-order-swal) .swal2-actions .btn {
    min-width: 118px;
    min-height: 42px;
    padding: 10px 22px;
    font-size: 14px;
    border-radius: 12px;
}

/* Confirm-order dialog — softer, rounder, friendlier */
.swal2-popup.confirm-order-swal {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 26px 26px 22px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
.confirm-order-swal .swal2-icon {
    border-width: 3px;
    margin: 4px auto 14px;
}
.confirm-order-swal .swal2-title {
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: 1.4rem;
    color: var(--cream);
}
.confirm-order-swal .swal2-html-container {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 6px;
}
.confirm-order-swal .swal2-actions {
    gap: 14px;
    margin-top: 22px;
}
.confirm-order-swal__confirm,
.confirm-order-swal__cancel {
    min-width: 120px;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.confirm-order-swal__confirm {
    background: #16a34a;
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}
.confirm-order-swal__confirm:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(22, 163, 74, 0.45);
}
.confirm-order-swal__cancel {
    background: var(--deep);
    color: var(--cream);
    border: 1px solid var(--border);
}
.confirm-order-swal__cancel:hover {
    border-color: var(--gold-dk);
    transform: translateY(-1px);
}


/* Custom DataTables pagination */
.dt-footer{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px}
.dt-info{font-size:12px;color:var(--muted)}
.dt-pages{display:flex;gap:4px;flex-wrap:wrap}
.dt-pages button{font-size:12.5px;padding:4px 10px;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius);cursor:pointer;transition:all var(--t);line-height:1.4}
.dt-pages button:hover:not(:disabled){border-color:var(--gold-dk);color:var(--cream)}
.dt-pages button.active{background:var(--gold);border-color:var(--gold);color:var(--gold-contrast);font-weight:600}
.dt-pages button:disabled{opacity:.35;cursor:default}