/* ==========================================================================
   THE ORCHID LOUNGE & BISTRO — APPLE HIG DESIGN INTELLIGENCE (OneMore)
   A pristine, mobile-first design system rooted in Apple Human Interface Guidelines
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography Imports & Font Stacks
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* Saans Typeface Definitions — Local & Web Font Fallback Stack */
@font-face {
    font-family: 'Saans';
    src: local('Saans Regular'), local('Saans-Regular'), local('Saans'),
         url('/fonts/Saans-Regular.woff2') format('woff2'),
         url('/fonts/Saans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saans';
    src: local('Saans Medium'), local('Saans-Medium'),
         url('/fonts/Saans-Medium.woff2') format('woff2'),
         url('/fonts/Saans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saans';
    src: local('Saans SemiBold'), local('Saans-SemiBold'),
         url('/fonts/Saans-SemiBold.woff2') format('woff2'),
         url('/fonts/Saans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saans';
    src: local('Saans Bold'), local('Saans-Bold'),
         url('/fonts/Saans-Bold.woff2') format('woff2'),
         url('/fonts/Saans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Unified Luxury Brand Font Stack — Saans as Primary Default Font Across the Board */
    --font-system: "Saans", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: var(--font-system);
    --font-brand: "Saans", var(--font-system);
    --font-heading: "Saans", var(--font-system);
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

    /* Exhale Earthy Brand Palette — Sand Ground & Warm Ivory Elevated Surfaces (v2) */
    --bg-primary: #E8D6BC;           /* Sand: Primary page background */
    --bg-surface: #faf3e6;           /* Warm Ivory: Header bar, raised surfaces, cards, panels */
    --bg-card: #faf3e6;              /* Warm Ivory: Cards */
    --bg-sidebar: #faf3e6;           /* Warm Ivory: Dashboard sidebar */
    --bg-surface-elevated: #FAF1E5;  /* Pure Cream: Elevated cards, modals, popovers */
    --bg-surface-hover: #DFCCB0;     /* Sand/Cream Hover: Soft warm tactile hover */
    --bg-glass: rgba(250, 243, 230, 0.88);
    --bg-chrome: rgba(232, 214, 188, 0.94);

    /* Typography Contrast Hierarchy — Ink Headlines & Charcoal Body/Labels */
    --color-label: #191919;          /* Ink: Bold, high-contrast headlines & wordmark */
    --color-secondary-label: #423E39;/* Charcoal: Soft, calm body copy & button labels */
    --color-tertiary-label: #5C5248; /* Darkened Taupe-Charcoal: WCAG 2.2 AA contrast compliant (>4.6:1) */
    --color-taupe: #5C5248;          /* Darkened Taupe: Accessible icons and muted text */
    --color-quaternary-label: #A89B8F;/* Subtle Taupe: Dividers, placeholders */

    /* Primary Action & Filled Buttons — Olive */
    --color-olive: #6B7355;
    --color-olive-hover: #5B6248;
    --color-olive-active: #4F553E;
    --color-olive-subtle: rgba(107, 115, 85, 0.14);
    --color-primary-cta: var(--color-olive);
    --color-primary-cta-hover: var(--color-olive-hover);
    --color-primary-cta-active: var(--color-olive-active);

    /* Secondary Accent, Highlight & Active Nav — Terracotta */
    --color-terracotta: #C1602B;
    --color-terracotta-hover: #A74F20;
    --color-terracotta-active: #8F4017;
    --color-terracotta-subtle: rgba(193, 96, 43, 0.12);
    --color-accent: var(--color-terracotta);
    --accent-glow: rgba(193, 96, 43, 0.20);

    /* Premium Support — Muted Gold (VIP tiers, special highlights — use sparingly) */
    --gold: #C9A24B;
    --gold-light: #D9B560;
    --gold-dark: #A98332;
    --color-gold-text: #8C6A1A;      /* WCAG 2.2 AA compliant (>4.5:1) text color for warm cream & sand surfaces */
    --gold-glow: rgba(201, 162, 75, 0.22);
    --gold-subtle: rgba(201, 162, 75, 0.12);

    /* Semantic Status Colors rooted in the Earthy Palette */
    --status-confirmed: var(--color-olive);
    --status-pending: #C27803;       /* Warm Ochre / Amber */
    --status-cancelled: #B91C1C;     /* Muted Rust / Brick */
    --status-seated: #3B728C;        /* Muted Coastal Blue */
    --status-arrived: #7C5295;       /* Muted Plum */

    --color-green: var(--color-olive);
    --color-amber: #C27803;
    --color-red: #B91C1C;
    --color-blue: #3B728C;
    --color-purple: #7C5295;

    /* Hairlines, Strokes & Borders */
    --border-stroke: #191919;
    --border-subtle: #D8C5AC;
    --border-hairline: #DFCEB7;
    --border-gold: rgba(201, 162, 75, 0.35);
    --border-focus: var(--color-olive);

    /* Typography Scale */
    --text-large-title: clamp(2rem, 5vw, 3rem);
    --text-title-1: 1.75rem;    /* 28px */
    --text-title-2: 1.375rem;   /* 22px */
    --text-title-3: 1.25rem;    /* 20px */
    --text-headline: 1.0625rem; /* 17px, semibold */
    --text-body: 1.0625rem;     /* 17px, regular */
    --text-callout: 1rem;       /* 16px */
    --text-subheadline: 0.9375rem; /* 15px */
    --text-footnote: 0.8125rem; /* 13px */
    --text-caption-1: 0.75rem;  /* 12px */
    --text-caption-2: 0.6875rem;/* 11px */

    /* Concentric Corner Radii Scale — All Cards Locked at 10px */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 10px;
    --radius-xl: 10px;
    --radius-2xl: 10px;
    --radius-full: 9999px;

    /* Tactile & Spring Physics */
    --ease-spring: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring-snappy: cubic-bezier(0.2, 0.0, 0.0, 1.0);
    --duration-standard: 0.25s;

    /* Layered Diffuse Shadows for Warm Earthy Surfaces */
    --shadow-border: 0 0 0 1px var(--border-subtle);
    --shadow-border-hover: 0 0 0 1px rgba(74, 68, 62, 0.28);
    --shadow-card: 0 1px 3px rgba(74, 68, 62, 0.05), 0 4px 16px -2px rgba(74, 68, 62, 0.07);
    --shadow-card-hover: 0 4px 8px rgba(74, 68, 62, 0.08), 0 12px 28px -4px rgba(74, 68, 62, 0.12);
    --shadow-elevated: 0 2px 6px rgba(74, 68, 62, 0.06), 0 16px 36px -4px rgba(74, 68, 62, 0.12);
    --shadow-terracotta: 0 4px 16px rgba(200, 90, 50, 0.28);
    --shadow-gold: 0 4px 16px rgba(184, 146, 48, 0.22);
    --shadow-card-gold: 0 0 0 1px rgba(184, 146, 48, 0.35), 0 4px 16px -2px rgba(74, 68, 62, 0.08);
    --shadow-card-gold-hover: 0 0 0 1px var(--gold), 0 8px 24px -2px rgba(74, 68, 62, 0.14);
    --shadow-modal: 0 0 0 1px var(--border-subtle), 0 24px 60px -12px rgba(40, 32, 24, 0.22);

    /* Safe Areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------------------------
   2. Reset & Global Layout
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE & Edge */
}

*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    min-height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-primary);
    color: var(--color-label);
    font-family: var(--font-system);
    font-size: var(--text-body);
    line-height: 1.47;
    letter-spacing: -0.022em;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Extra padding at bottom on mobile to accommodate fixed iOS bottom tab bar */
    padding-bottom: calc(76px + var(--safe-bottom));
}

@media (min-width: 769px) {
    body {
        padding-bottom: 0;
    }
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-standard) var(--ease-spring);
}

/* Image Outlines (Non-negotiable pure white 10% in dark mode, pure black 10% in light mode; never tinted) */
img, .media-img, .item-img-preview, .menu-card-img, .avatar-img, .thumb-img, .item-thumbnail, .gallery-img {
    max-width: 100%;
    height: auto;
    display: block;
    outline: 1px solid rgba(255, 255, 255, 0.10);
    outline-offset: -1px; /* inset so it never displaces layout */
}

@media (prefers-color-scheme: light) {
    img, .media-img, .item-img-preview, .menu-card-img, .avatar-img, .thumb-img, .item-thumbnail, .gallery-img {
        outline: 1px solid rgba(0, 0, 0, 0.10);
        outline-offset: -1px;
    }
}

/* Accessibility: Respect Reduced Motion Preference (WCAG 2.2 SC 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Tabular numbers for financial and time data */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Accessibility: Screen Reader Only Utility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Accessibility: Skip to Content Bypass Link (SC 2.4.1) */
.skip-link {
    position: absolute;
    top: -120px;
    left: 1rem;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    background: var(--color-label, #191919);
    color: #FFFFFF !important;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    transition: top 0.2s cubic-bezier(0.2, 0.0, 0.0, 1.0);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 1rem;
    outline: 3px solid var(--color-olive);
    outline-offset: 2px;
}

/* Accessibility: Global Visible Focus Indicators (SC 2.4.7 & SC 2.4.11) */
:focus-visible {
    outline: 2px solid var(--color-olive);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-olive);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    :focus-visible,
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

/* --------------------------------------------------------------------------
   3. Typography Classes (Optical Alignment & Balanced Wrapping)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.18;
    text-wrap: balance; /* Optical text balancing on headings to prevent single-word orphans */
}

p, li, figcaption, .text-footnote, .text-subheadline {
    text-wrap: pretty; /* Prevents orphaned single words on last line of body/meta text */
}

a {
    text-underline-position: from-font;
    text-decoration-skip-ink: auto;
}

.text-large-title {
    font-size: var(--text-large-title);
    letter-spacing: -0.02em;
    font-weight: 700;
    text-wrap: balance;
}

.text-title-1 { font-size: var(--text-title-1); letter-spacing: -0.015em; }
.text-title-2 { font-size: var(--text-title-2); letter-spacing: -0.01em; }
.text-title-3 { font-size: var(--text-title-3); }

.text-headline {
    font-size: var(--text-headline);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.text-body {
    font-size: var(--text-body);
    font-weight: 400;
    letter-spacing: -0.02em;
}

.text-subheadline {
    font-size: var(--text-subheadline);
    color: var(--color-secondary-label);
}

.text-footnote {
    font-size: var(--text-footnote);
    color: var(--color-secondary-label);
    letter-spacing: -0.005em;
}

.text-caption-1 {
    font-size: var(--text-caption-1);
    color: var(--color-tertiary-label);
    letter-spacing: 0.02em;
}

.text-gold { color: var(--gold); }
.text-muted { color: var(--color-secondary-label); }
.text-dim { color: var(--color-tertiary-label); }

/* --------------------------------------------------------------------------
   4. Glassmorphic Materials & Chrome
   -------------------------------------------------------------------------- */
.material-ultra-thin {
    background: rgba(28, 28, 30, 0.45);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
}

.material-regular {
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
}

.material-thick {
    background: var(--bg-chrome);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    backdrop-filter: blur(30px) saturate(200%);
}

/* --------------------------------------------------------------------------
   5. Navigation Bars (Desktop Header & Mobile Tab Bar)
   -------------------------------------------------------------------------- */
.lounge-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.85rem 1.5rem;
    padding-top: max(0.85rem, var(--safe-top));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-surface);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: var(--shadow-terracotta);
}

.brand-name {
    font-family: var(--font-brand);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-label);
}

.brand-subtitle {
    font-size: var(--text-caption-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    display: block;
    font-weight: 600;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
}

.nav-link {
    font-size: var(--text-subheadline);
    font-weight: 500;
    color: var(--color-secondary-label);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    transition: all var(--duration-standard) var(--ease-spring);
}

.nav-link:hover {
    color: var(--color-label);
    background: var(--bg-surface-hover);
}

.nav-link.active {
    color: var(--color-terracotta);
    background: var(--color-terracotta-subtle);
    font-weight: 600;
}

/* Mobile-First Bottom Tab Bar (iOS Native Style) */
.mobile-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: calc(64px + var(--safe-bottom));
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(25px) saturate(190%);
    backdrop-filter: blur(25px) saturate(190%);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: var(--safe-bottom);
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: var(--color-secondary-label);
    font-size: 0.68rem;
    font-weight: 500;
    gap: 0.25rem;
    transition: all 0.15s var(--ease-spring);
    position: relative;
}

.tab-item svg {
    width: 22px;
    height: 22px;
    transition: transform 0.2s var(--ease-spring);
}

.tab-item:active {
    transform: scale(0.92);
}

.tab-item.active {
    color: var(--color-terracotta);
    font-weight: 600;
}

.tab-item.active svg {
    stroke-width: 2.2;
}

.tab-pill-highlight {
    background: var(--color-terracotta);
    color: var(--bg-surface) !important;
    border-radius: var(--radius-full);
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.75rem;
    box-shadow: var(--shadow-terracotta);
}

@media (min-width: 769px) {
    .mobile-tab-bar {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .lounge-nav .nav-links {
        display: none;
    }
    .lounge-nav {
        padding: 0.75rem 1rem;
    }
}

/* --------------------------------------------------------------------------
   6. Apple Interactive Controls (Buttons, Pills, Inputs)
   -------------------------------------------------------------------------- */
.btn {
    --btn-px: 1.25rem;
    --btn-py: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-py) var(--btn-px);
    font-size: var(--text-callout);
    font-weight: 600;
    font-family: var(--font-brand);
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--border-stroke);
    background: transparent;
    color: var(--color-secondary-label);
    text-align: center;
    min-height: 40px;
    user-select: none;
    box-sizing: border-box;
    transition: transform 0.15s var(--ease-spring), box-shadow 0.15s var(--ease-spring), background-color 0.15s, color 0.15s, border-color 0.15s;
}

.btn:hover {
    background: var(--bg-surface-hover);
    color: var(--color-label);
    border-color: rgba(74, 68, 62, 0.45);
}

.btn:active {
    transform: scale(0.96); /* Tactile feedback */
}

/* Primary Action: Solid Olive Fill with White Text, Darkening on Hover/Press */
.btn-primary,
.btn-olive,
.btn-gold {
    background: var(--color-olive);
    color: #FFFFFF !important;
    border: 1px solid var(--color-olive);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(107, 115, 85, 0.28);
}

.btn-primary:hover,
.btn-olive:hover,
.btn-gold:hover {
    background: var(--color-olive-hover);
    border-color: var(--color-olive-hover);
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(91, 98, 72, 0.35);
}

.btn-primary:active,
.btn-olive:active,
.btn-gold:active {
    background: var(--color-olive-active);
    border-color: var(--color-olive-active);
}

/* Terracotta Secondary Action Button */
.btn-terracotta {
    background: var(--color-terracotta);
    color: #FFFFFF !important;
    border: 1px solid var(--color-terracotta);
    font-weight: 700;
}

.btn-terracotta:hover {
    background: var(--color-terracotta-hover);
    border-color: var(--color-terracotta-hover);
}

/* Secondary / Ghost Outline Style: Ink Border, Transparent Fill, Ink Text */
.btn-outline,
.btn-secondary,
.btn-outline-gold {
    background: transparent;
    color: var(--color-label);
    border: 1px solid var(--border-stroke);
    box-shadow: none;
}

.btn-outline:hover,
.btn-secondary:hover,
.btn-outline-gold:hover {
    background: var(--bg-surface-hover);
    color: var(--color-label);
    border-color: var(--color-label);
}

/* Subtle / Neutral Elevated Button */
.btn-subtle {
    background: transparent;
    color: var(--color-label);
    border: 1px solid var(--border-stroke);
    box-shadow: none;
}

.btn-subtle:hover {
    background: var(--bg-surface-hover);
    color: var(--color-label);
    border-color: var(--color-label);
}

/* Olive Confirmation / Secondary Action Button */
.btn-olive {
    background: var(--color-olive);
    color: var(--bg-surface) !important;
    border: 1px solid var(--color-olive);
    font-weight: 700;
}

.btn-olive:hover {
    background: var(--color-olive-hover);
    border-color: var(--color-olive-hover);
}

.btn-pill {
    border-radius: var(--radius-full);
}

.btn-sm {
    --btn-px: 0.9rem;
    --btn-py: 0.35rem;
    min-height: 36px;
    padding: var(--btn-py) var(--btn-px);
    font-size: var(--text-footnote);
}

.btn-sm:has(> svg:first-child:not(:only-child)),
.btn-sm:has(> .icon-lead) {
    padding-left: calc(var(--btn-px) - 2px);
    padding-right: var(--btn-px);
}

.btn-sm:has(> svg:last-child:not(:only-child)),
.btn-sm:has(> .icon-trail) {
    padding-left: var(--btn-px);
    padding-right: calc(var(--btn-px) - 2px);
}

.btn-lg {
    --btn-px: 2rem;
    --btn-py: 0.85rem;
    min-height: 50px;
    padding: var(--btn-py) var(--btn-px);
    font-size: var(--text-headline);
}

.btn-lg:has(> svg:first-child:not(:only-child)),
.btn-lg:has(> .icon-lead) {
    padding-left: calc(var(--btn-px) - 2px);
    padding-right: var(--btn-px);
}

.btn-lg:has(> svg:last-child:not(:only-child)),
.btn-lg:has(> .icon-trail) {
    padding-left: var(--btn-px);
    padding-right: calc(var(--btn-px) - 2px);
}

/* iOS Native Segmented Control */
.segmented-control {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    background: rgba(120, 120, 128, 0.24);
    padding: 3px;
    border-radius: 10px;
    gap: 3px;
    user-select: none;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .segmented-control.segmented-control-fluid {
        display: inline-flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 420px;
        box-sizing: border-box;
    }
    .segmented-control.segmented-control-fluid .segment-item {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        padding: 0.45rem 0.5rem;
        font-size: 0.8125rem;
    }
}

.segment-item {
    padding: 0.45rem 1.25rem;
    font-size: var(--text-subheadline);
    font-weight: 600;
    color: var(--color-secondary-label);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.18s var(--ease-spring);
    text-align: center;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.segment-item:active {
    transform: scale(0.96);
}

.segment-item.active {
    background: var(--bg-surface);
    color: var(--color-label);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(74, 68, 62, 0.12);
}

/* --------------------------------------------------------------------------
   7. Apple Grouped Cards & Concentric Mathematics
   -------------------------------------------------------------------------- */
.card {
    background: var(--bg-card, #faf3e6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring), border-color 0.25s;
    position: relative;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-stroke);
}

.card-gold {
    background: var(--bg-card, #faf3e6);
    border: 1px solid var(--border-gold);
    box-shadow: var(--shadow-card-gold);
}

.card-gold:hover {
    box-shadow: var(--shadow-card-gold-hover);
    border-color: var(--gold);
}

/* --------------------------------------------------------------------------
   7a. Grouped Card List System (Inner items separated by lines, no nested cards)
   -------------------------------------------------------------------------- */
.menu-grouped-card {
    background: var(--bg-card, #faf3e6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 0;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.menu-grouped-card:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--border-subtle);
}

.menu-item-row {
    padding: 1.35rem 1.65rem;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
    transition: background-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.menu-item-row:last-child {
    border-bottom: none;
}

.menu-item-row:hover {
    background: rgba(0, 0, 0, 0.018);
}

.menu-item-row.is-sold-out {
    opacity: 0.6;
}

.menu-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.menu-item-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.menu-item-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-label);
    margin: 0;
    letter-spacing: -0.01em;
}

.menu-item-price-wrap {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.menu-item-price {
    font-weight: 700;
    color: var(--color-terracotta);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.menu-item-desc {
    font-size: var(--text-footnote);
    line-height: 1.55;
    color: var(--color-secondary-label);
    margin: 0.35rem 0 0;
    max-width: 90%;
}

.menu-item-variants-box {
    background: rgba(0, 0, 0, 0.025);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    margin-top: 0.75rem;
    border: 1px solid var(--border-hairline);
}

.menu-item-variants-header {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-tertiary-label);
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.menu-item-variant-line {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: var(--text-footnote);
    border-bottom: 1px solid var(--border-hairline);
}

.menu-item-variant-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.menu-item-dietary-pills {
    margin-top: 0.65rem;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .menu-item-row {
        padding: 1.15rem 1.25rem;
    }
    .menu-item-desc {
        max-width: 100%;
    }
}

/* Table Selection Group (Inner table items in Reserve flow) */
.table-selection-group {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.table-selection-row {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--border-hairline);
    cursor: pointer;
    transition: background-color 0.15s ease, border-left 0.15s ease;
    border-left: 3px solid transparent;
}

.table-selection-row:last-child {
    border-bottom: none;
}

.table-selection-row:hover {
    background: rgba(201, 162, 75, 0.06);
}

.table-selection-row.is-selected {
    background: rgba(107, 115, 85, 0.12);
    box-shadow: inset 0 0 0 1.5px var(--color-olive);
}

/* Generic Grouped List Container (Mobile admin lists inside parent card) */
.grouped-list-container {
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-surface-elevated);
    overflow: hidden;
}

.grouped-list-row {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border-hairline);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.grouped-list-row:last-child {
    border-bottom: none;
}

.menu-admin-item-row {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
}

.menu-admin-item-row:last-child {
    border-bottom: none;
}

.menu-admin-item-row.is-sold-out {
    opacity: 0.75;
    background: rgba(255, 69, 58, 0.03);
}

/* Dynamic Island / Capsule Banner */
.capsule-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bg-surface);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--color-label);
}

.capsule-badge.gold {
    border: 1px solid var(--border-gold);
    background: var(--gold-subtle);
    color: #8C6A1A;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--radius-full);
}

.badge-gold {
    background: var(--gold-subtle);
    color: #8C6A1A;
    border: 1px solid rgba(184, 146, 48, 0.35);
}

.badge-confirmed {
    background: var(--color-olive-subtle);
    color: var(--color-olive);
    border: 1px solid rgba(91, 107, 70, 0.3);
}

.badge-pending {
    background: rgba(194, 120, 3, 0.14);
    color: #C27803;
    border: 1px solid rgba(194, 120, 3, 0.3);
}

.badge-cancelled, .badge-sold-out {
    background: rgba(185, 28, 28, 0.12);
    color: #B91C1C;
    border: 1px solid rgba(185, 28, 28, 0.3);
}

.badge-seated {
    background: rgba(59, 114, 140, 0.14);
    color: #3B728C;
    border: 1px solid rgba(59, 114, 140, 0.3);
}

.badge-subtle {
    background: var(--bg-surface-hover);
    color: var(--color-secondary-label);
    border: 1px solid var(--border-subtle);
}

/* --------------------------------------------------------------------------
   8. Apple Form Controls
   -------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 1.35rem;
}

.form-label {
    display: block;
    font-size: var(--text-footnote);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-secondary-label);
    margin-bottom: 0.45rem;
}

.form-control {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--color-label);
    font-family: var(--font-system);
    font-size: var(--text-callout);
    transition: all 0.2s var(--ease-spring);
    appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-surface);
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2386868b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2rem;
    padding-right: 2.5rem;
}

/* --------------------------------------------------------------------------
   9. Modals & Bottom Sheets
   -------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 22, 21, 0.65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1.25rem;
}

.modal-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    padding: 2rem;
    box-shadow: var(--shadow-modal);
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --------------------------------------------------------------------------
   10. Layout Container & Responsive Grid
   -------------------------------------------------------------------------- */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }
}

/* --------------------------------------------------------------------------
   11. Admin Portal Layout (Desktop Sidebar & Mobile Segmented View)
   -------------------------------------------------------------------------- */
.admin-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--bg-primary);
}

.admin-sidebar {
    background: var(--bg-sidebar, #faf3e6);
    border-right: 1px solid var(--border-subtle);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    scrollbar-width: none;
}

.admin-sidebar::-webkit-scrollbar {
    display: none;
}

.admin-main {
    padding: 1.5rem;
    overflow-y: auto;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    scrollbar-width: none;
}

.admin-main::-webkit-scrollbar {
    display: none;
}

@media (min-width: 769px) {
    .admin-main {
        padding: 2.25rem;
    }
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    color: var(--color-secondary-label);
    font-size: var(--text-subheadline);
    font-weight: 500;
    margin-bottom: 0.25rem;
    transition: all 0.2s var(--ease-spring);
}

.admin-nav-item:hover {
    background: var(--bg-surface-hover);
    color: var(--color-label);
}

.admin-nav-item.active {
    background: var(--color-terracotta-subtle);
    color: var(--color-terracotta);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Mobile Admin Top Navigation & Segmented Pill Bar
   -------------------------------------------------------------------------- */
.admin-mobile-header {
    display: none;
    background: var(--bg-sidebar, #faf3e6);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.85rem 1rem 0.65rem;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 2px 10px rgba(74, 68, 62, 0.04);
}

.admin-mobile-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}

.admin-mobile-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
}

.admin-mobile-brand-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-mobile-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none !important;
}

.admin-mobile-brand-title {
    font-family: var(--font-brand);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-label);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.admin-mobile-brand-sub {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-tertiary-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 1px;
}

.admin-mobile-user-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-mobile-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(184, 146, 48, 0.12);
    border: 1px solid rgba(184, 146, 48, 0.3);
    color: #8C6A1A;
}

.admin-mobile-exit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 0.85rem;
    box-sizing: border-box;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-secondary-label);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.18s var(--ease-spring);
}

.admin-mobile-exit-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--color-label);
    border-color: var(--border-stroke);
}

/* Segmented Horizontal Pill Track */
.admin-mobile-nav-wrapper {
    position: relative;
    width: 100%;
}

.admin-mobile-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    background: rgba(232, 214, 188, 0.35);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.admin-mobile-nav::-webkit-scrollbar {
    display: none;
}

.admin-mobile-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-secondary-label);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px; /* Concentric radius: 12px - 4px = 8px */
    min-height: 44px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: transparent;
    border: none;
    scroll-margin: 0 16px;
    transition: background-color 0.18s var(--ease-spring), color 0.18s var(--ease-spring), box-shadow 0.18s var(--ease-spring), transform 0.18s var(--ease-spring);
}

.admin-mobile-nav-item svg {
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.18s, color 0.18s;
}

.admin-mobile-nav-item:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-label);
}

.admin-mobile-nav-item:hover svg {
    opacity: 1;
}

.admin-mobile-nav-item.active {
    background: var(--bg-surface, #faf3e6);
    color: var(--color-terracotta);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(74, 68, 62, 0.1), 0 0 0 1px rgba(193, 96, 43, 0.22);
}

.admin-mobile-nav-item.active svg {
    color: var(--color-terracotta);
    opacity: 1;
}

.admin-mobile-nav-item.is-external {
    color: var(--color-terracotta);
    background: rgba(193, 96, 43, 0.08);
}

.admin-mobile-nav-item.is-external:hover {
    background: rgba(193, 96, 43, 0.16);
    color: var(--color-terracotta);
}

/* --------------------------------------------------------------------------
   11b. Modern Conjoined Tab Button Group (Apple / Linear Inspiration)
   -------------------------------------------------------------------------- */
.tab-button-group-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: none;
}

.tab-button-group-wrapper::-webkit-scrollbar {
    display: none;
}

.tab-button-group,
.btn-group {
    display: inline-flex;
    align-items: stretch;
    background: #FAF1E5;
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.05);
    padding: 4px;
    gap: 4px;
    max-width: 100%;
}

.tab-button-group.is-pill,
.btn-group.is-pill {
    border-radius: var(--radius-full);
}

/* Individual button inside the group */
.tab-button-group .tab-btn,
.btn-group .btn-group-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    font-size: var(--text-subheadline);
    font-weight: 600;
    color: #423E39;
    background: transparent;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-spring), color 0.18s var(--ease-spring);
    user-select: none;
    white-space: nowrap;
    min-height: 40px;
    box-sizing: border-box;
}

/* Separated by space and soft color, no hairline border */
.tab-button-group .tab-btn:not(:last-child),
.tab-button-group .tab-btn-composite:not(:last-child),
.btn-group .btn-group-item:not(:last-child) {
    border-right: none;
}

.tab-button-group .tab-btn:hover,
.btn-group .btn-group-item:hover {
    background: #F0DFC8;
    color: #191919;
}

/* Active / Selected Tab — High Contrast Accessible Olive Fill (5.4:1 contrast on white) */
.tab-button-group .tab-btn.active,
.btn-group .btn-group-item.active {
    background: #687355;
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(104, 115, 85, 0.25);
}

/* Gold Accent Variant */
.tab-button-group.tab-button-group-gold .tab-btn.active,
.tab-button-group .tab-btn.active-gold,
.tab-button-group .tab-btn-composite.active {
    background: #687355;
    color: #FFFFFF;
}

/* Composite Tab (Link + Action Button in one conjoined segment) */
.tab-btn-composite {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border-radius: 8px;
    border: none;
    transition: background-color 0.18s var(--ease-spring), color 0.18s var(--ease-spring);
    box-sizing: border-box;
}

.tab-btn-composite:hover {
    background: #F0DFC8;
    color: #191919;
}

.tab-btn-composite.active {
    background: #687355;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(104, 115, 85, 0.25);
}

.tab-btn-composite .tab-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    color: #423E39;
    font-size: var(--text-subheadline);
    font-weight: 600;
    text-decoration: none;
    min-height: 40px;
    white-space: nowrap;
}

.tab-btn-composite.active .tab-btn-main {
    color: #FFFFFF;
    font-weight: 700;
}

.tab-btn-composite .tab-btn-action {
    background: transparent;
    border: none;
    padding: 0.55rem 0.65rem;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.15s, background-color 0.15s;
    color: inherit;
    border-radius: 0 8px 8px 0;
}

.tab-btn-composite.active .tab-btn-action {
    color: #FFFFFF;
    opacity: 0.95;
}

.tab-btn-composite .tab-btn-action:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.tab-btn-composite.active .tab-btn-action:hover {
    background: rgba(255, 255, 255, 0.18);
}

.tab-btn-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: var(--radius-full);
    background: #EAE0D2;
    color: #423E39;
}

.tab-btn-composite.active .tab-btn-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

/* Fluid modifier for equal columns on mobile */
@media (max-width: 640px) {
    .tab-button-group.is-fluid {
        display: flex;
        width: 100%;
    }
    .tab-button-group.is-fluid .tab-btn,
    .tab-button-group.is-fluid .tab-btn-composite {
        flex: 1 1 0;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Stacked Grouped Tab Button Grid for Mobile (Border line running through all) */
@media (max-width: 768px) {
    .tab-button-group-wrapper {
        overflow-x: visible;
        width: 100%;
        padding-bottom: 0.85rem;
    }

    .tab-button-group.tab-button-group-stacked-mobile,
    .tab-button-group.is-stacked-mobile {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
        gap: 1px;
        border-radius: 10px;
        overflow: hidden;
        background: var(--border-subtle);
        border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-card);
    }

    .tab-button-group.tab-button-group-stacked-mobile .tab-btn,
    .tab-button-group.is-stacked-mobile .tab-btn {
        width: 100%;
        padding: 0.65rem 0.4rem;
        font-size: 0.78rem;
        min-height: 42px;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
        border-radius: 0;
        border: none;
        background: var(--bg-surface);
        box-sizing: border-box;
        color: var(--color-secondary-label);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        transition: background-color 0.18s var(--ease-spring), color 0.18s var(--ease-spring);
    }

    .tab-button-group.tab-button-group-stacked-mobile .tab-btn:hover,
    .tab-button-group.is-stacked-mobile .tab-btn:hover {
        background: var(--bg-surface-hover);
        color: var(--color-label);
    }

    .tab-button-group.tab-button-group-stacked-mobile .tab-btn.active,
    .tab-button-group.is-stacked-mobile .tab-btn.active {
        background: var(--color-terracotta-subtle);
        color: var(--color-terracotta);
        font-weight: 700;
    }
}

@media (max-width: 360px) {
    .tab-button-group.tab-button-group-stacked-mobile,
    .tab-button-group.is-stacked-mobile {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dashboard Level 1 Section Tabs (Backward compatibility) */
.dashboard-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.85rem;
    box-sizing: border-box;
}

.dashboard-section-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 130px;
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-border);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.5rem 0.2rem 0.75rem;
    transition: all var(--motion-fast) var(--spring-smooth);
    box-sizing: border-box;
}

.dashboard-section-tab:hover {
    box-shadow: var(--shadow-border-hover);
    background: var(--bg-surface-elevated);
}

.dashboard-section-tab.active {
    background: var(--bg-surface-elevated);
    box-shadow: 0 0 0 1px var(--gold), 0 2px 10px rgba(212, 175, 55, 0.18);
}

.dashboard-section-tab-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-secondary-label);
    font-size: var(--text-subheadline);
    font-weight: 500;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0;
}

.dashboard-section-tab.active .dashboard-section-tab-link {
    color: var(--gold-light);
    font-weight: 700;
}

.dashboard-section-tab-link .tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-section-tab-link .tab-count {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.dashboard-section-tab.active .tab-count {
    background: rgba(212, 175, 55, 0.2);
    color: var(--gold-light);
    border-color: rgba(212, 175, 55, 0.35);
}

.dashboard-section-tab .tab-vis-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity var(--motion-fast);
}

.dashboard-section-tab .tab-vis-btn:hover {
    opacity: 1;
}

@media (min-width: 768px) {
    .dashboard-section-tab {
        flex: 0 1 auto;
        min-width: fit-content;
    }
}

@media (max-width: 768px) {
    .admin-layout {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }
    .admin-sidebar {
        display: none;
    }
    .admin-mobile-header {
        display: block;
        flex-shrink: 0;
    }
    .admin-main {
        flex: 1 1 auto;
        overflow-y: auto;
        height: auto;
        max-height: none;
        padding: 1.25rem 1rem 6rem;
        scrollbar-width: none;
    }
    .admin-main::-webkit-scrollbar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   12. Data Tables & Mobile Grouped Cells (UITableView Style)
   -------------------------------------------------------------------------- */
.table-container {
    background: var(--bg-card, #faf3e6);
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-subheadline);
}

.data-table th {
    background: var(--bg-surface-elevated);
    color: var(--color-secondary-label);
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-caption-2);
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-subtle);
}

.data-table td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--border-hairline);
    vertical-align: middle;
}

.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   12b. Responsive Admin Card & List Grids (Mobile-First)
   -------------------------------------------------------------------------- */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.settings-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-row-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1rem;
}

.item-code-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.58rem;
    border-radius: 6px;
    background: var(--bg-surface-hover);
    color: var(--color-label);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 2px rgba(74, 68, 62, 0.08);
    white-space: nowrap;
}

/* Sanitized Mini Action Buttons (Matching ITM-436 aesthetic) */
.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.26rem 0.65rem;
    min-height: 28px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--color-secondary-label);
    border: 1px solid var(--border-stroke);
    box-shadow: 0 1px 2px rgba(74, 68, 62, 0.06);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    user-select: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.btn-mini:hover {
    background: var(--bg-surface-hover);
    border-color: rgba(74, 68, 62, 0.45);
    color: var(--color-label);
}

.btn-mini:active {
    transform: scale(0.96);
}

.btn-mini-danger {
    color: #B91C1C;
    border-color: rgba(185, 28, 28, 0.3);
}

.btn-mini-danger:hover {
    background: rgba(185, 28, 28, 0.10);
    border-color: rgba(185, 28, 28, 0.45);
    color: #B91C1C;
}

.btn-mini-gold {
    color: var(--color-terracotta);
    border-color: rgba(200, 90, 50, 0.3);
}

.btn-mini-gold:hover {
    background: var(--color-terracotta-subtle);
    border-color: var(--color-terracotta);
    color: var(--color-terracotta-hover);
}

/* Sanitized State Toggle Button (Matching screenshot ITM-436 Available pill) */
.btn-state-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.26rem 0.75rem;
    min-height: 28px;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    user-select: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.btn-state-toggle:active {
    transform: scale(0.96);
}

.btn-state-toggle.is-available {
    background: var(--color-olive-subtle);
    border: 1px solid rgba(91, 107, 70, 0.35);
    color: var(--color-olive);
}

.btn-state-toggle.is-available:hover {
    background: rgba(91, 107, 70, 0.22);
    border-color: rgba(91, 107, 70, 0.55);
    box-shadow: 0 0 10px rgba(91, 107, 70, 0.2);
}

.btn-state-toggle.is-sold-out {
    background: rgba(185, 28, 28, 0.12);
    border: 1px solid rgba(185, 28, 28, 0.35);
    color: #B91C1C;
}

.btn-state-toggle.is-sold-out:hover {
    background: rgba(185, 28, 28, 0.20);
    border-color: rgba(185, 28, 28, 0.5);
}

.btn-state-toggle.is-available:hover {
    background: rgba(48, 209, 88, 0.22);
    border-color: rgba(48, 209, 88, 0.55);
    box-shadow: 0 0 10px rgba(48, 209, 88, 0.2);
}

.btn-state-toggle.is-sold-out {
    background: rgba(255, 69, 58, 0.15);
    border: 1px solid rgba(255, 69, 58, 0.35);
    color: #ff453a;
}

.btn-state-toggle.is-sold-out:hover {
    background: rgba(255, 69, 58, 0.22);
    border-color: rgba(255, 69, 58, 0.55);
    box-shadow: 0 0 10px rgba(255, 69, 58, 0.2);
}

/* Menu Item Admin Cards with Concentric Radius and Layered Shadows */
.menu-admin-item-card {
    background: var(--bg-card, #faf3e6);
    border: none;
    border-radius: 10px;
    padding: 1.15rem;
    margin-bottom: 0.85rem;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}

.menu-admin-item-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.menu-admin-item-card.is-sold-out {
    opacity: 0.82;
    box-shadow: 0 0 0 1px rgba(255, 69, 58, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
    background: rgba(255, 69, 58, 0.03);
}

.menu-admin-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.menu-admin-item-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-label);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.menu-admin-item-desc {
    color: var(--color-secondary-label);
    font-size: var(--text-footnote);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

/* Concentric Price Box */
.menu-admin-price-box {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    box-shadow: 0 0 0 1px var(--border-hairline);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.85rem;
}

.menu-admin-variant-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: var(--text-footnote);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.menu-admin-variant-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.menu-admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

/* Staff Member Card for Mobile */
.staff-member-card {
    background: var(--bg-card, #faf3e6);
    border: none;
    box-shadow: var(--shadow-card);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}

.staff-member-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Table Admin Card for Mobile */
.table-admin-card {
    background: var(--bg-card, #faf3e6);
    border: none;
    box-shadow: var(--shadow-card);
    border-radius: 10px;
    padding: 1.15rem;
    margin-bottom: 0.85rem;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}

.table-admin-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.table-admin-card.is-blocked {
    box-shadow: 0 0 0 1px rgba(255, 69, 58, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4);
    background: rgba(255, 69, 58, 0.04);
}

.table-admin-card.is-special {
    box-shadow: var(--shadow-card-gold);
}

/* --------------------------------------------------------------------------
   12c. Bespoke Floor Management & Table Card System
   -------------------------------------------------------------------------- */

/* Floor Status Metrics Strip */
.floor-status-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.floor-status-metric {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 10px);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color var(--duration-fast, 0.15s) ease, box-shadow var(--duration-fast, 0.15s) ease;
}

.floor-status-metric:hover {
    border-color: var(--border-stroke);
    box-shadow: var(--shadow-sm);
}

.floor-status-metric.metric-olive {
    border-color: rgba(107, 115, 85, 0.35);
}

.floor-status-metric.metric-terracotta {
    border-color: rgba(193, 96, 43, 0.35);
}

.floor-status-metric.metric-gold {
    border-color: rgba(179, 142, 44, 0.4);
}

.floor-status-metric.metric-danger {
    border-color: rgba(185, 28, 28, 0.35);
}

.floor-metric-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-tertiary-label);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.floor-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-label);
    margin: 0.35rem 0 0.2rem;
    font-family: var(--font-brand, sans-serif);
    line-height: 1;
}

.floor-metric-sub {
    font-size: 0.75rem;
    color: var(--color-secondary-label);
}

/* Interactive Floor Control Deck (Filters, Search, View Mode) */
.floor-control-deck {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 12px);
    padding: 1.15rem 1.25rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.floor-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.floor-control-row-zones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
}

.floor-zone-tabs-wrapper {
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    width: auto;
    display: flex;
    align-items: center;
}

.floor-zone-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.floor-zone-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.floor-zone-tabs::-webkit-scrollbar {
    display: none;
}

.floor-zone-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface-elevated);
    color: var(--color-secondary-label);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-height: 40px;
    transition: all var(--duration-fast, 0.15s) ease;
}

.floor-zone-tab:hover {
    color: var(--color-label);
    border-color: var(--border-stroke);
    background: var(--bg-surface);
}

.floor-zone-tab.active {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(193, 96, 43, 0.28);
}

.floor-zone-tab-badge {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-family: var(--font-mono);
}

.floor-zone-tab.active .floor-zone-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Status Filter Pill Track */
.floor-status-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.status-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--color-secondary-label);
    cursor: pointer;
    min-height: 38px;
    transition: all var(--duration-fast, 0.15s) ease;
}

.status-filter-chip:hover {
    border-color: var(--border-stroke);
    color: var(--color-label);
}

.status-filter-chip.active-all {
    background: var(--color-label);
    border-color: var(--color-label);
    color: #ffffff;
}

.status-filter-chip.active-available {
    background: var(--color-olive-subtle);
    border-color: var(--color-olive);
    color: var(--color-olive);
}

.status-filter-chip.active-occupied {
    background: var(--color-terracotta-subtle);
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.status-filter-chip.active-special {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: #8C6A1A;
}

.status-filter-chip.active-blocked {
    background: rgba(185, 28, 28, 0.1);
    border-color: var(--status-cancelled);
    color: var(--status-cancelled);
}

.status-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Search and View Switcher */
.floor-search-box {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 380px;
}

.floor-search-box input {
    width: 100%;
    padding: 0.5rem 0.85rem 0.5rem 2.25rem;
    font-size: 0.84rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface-elevated);
    color: var(--color-label);
    height: 40px;
    transition: border-color var(--duration-fast, 0.15s) ease, background var(--duration-fast, 0.15s) ease;
}

.floor-search-box input:focus {
    outline: none;
    border-color: var(--color-terracotta);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px var(--color-terracotta-subtle);
}

.floor-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-tertiary-label);
    pointer-events: none;
}

.floor-view-toggle {
    display: inline-flex;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.floor-view-btn {
    border: none;
    background: transparent;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-secondary-label);
    cursor: pointer;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all var(--duration-fast, 0.15s) ease;
}

.floor-view-btn.active {
    background: var(--bg-surface);
    color: var(--color-label);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Floor Controls Responsive Adjustments */
@media (max-width: 768px) {
    .floor-status-deck {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
        margin-bottom: 1.25rem;
    }

    .floor-control-deck {
        padding: 0.85rem;
        gap: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .floor-control-row-zones {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .floor-zone-tabs-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    .floor-zone-tabs {
        width: max-content;
        min-width: 100%;
    }

    .floor-view-toggle {
        align-self: flex-start;
        flex-shrink: 0;
    }

    .floor-status-filters {
        width: 100%;
        gap: 0.35rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .floor-status-filters::-webkit-scrollbar {
        display: none;
    }

    .status-filter-chip {
        font-size: 0.75rem;
        padding: 0.3rem 0.65rem;
        min-height: 34px;
        flex-shrink: 0;
    }

    .floor-search-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .floor-status-deck {
        grid-template-columns: 1fr;
    }
}

/* Zone Divider & Section Banner (Clean, no nested card) */
.floor-zone-banner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 0 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1.25rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.floor-zone-banner:first-of-type {
    margin-top: 0;
}

.floor-zone-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.floor-zone-title {
    font-family: var(--font-brand, sans-serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-label);
    margin: 0;
    line-height: 1.2;
}

.floor-zone-desc {
    font-size: 0.8125rem;
    color: var(--color-secondary-label);
    margin-top: 0.25rem;
    max-width: 680px;
    line-height: 1.45;
}

/* Table Cards Grid */
.floor-table-grid,
.widget-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* Floor Table Card */
.floor-table-card,
.widget-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast, 0.15s) ease, box-shadow var(--duration-fast, 0.15s) ease, border-color var(--duration-fast, 0.15s) ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.floor-table-card:hover,
.widget-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-stroke);
}

.floor-table-card.is-available {
    border-top: 3px solid var(--color-olive);
}

.floor-table-card.is-occupied,
.widget-card.is-occupied {
    border-top: 3px solid var(--color-terracotta);
    background: linear-gradient(180deg, rgba(193, 96, 43, 0.02) 0%, var(--bg-surface) 40%);
}

.floor-table-card.is-special,
.widget-card.is-special {
    border-top: 3px solid var(--gold);
    box-shadow: 0 0 16px rgba(179, 142, 44, 0.08), var(--shadow-sm);
}

.floor-table-card.is-blocked,
.widget-card.is-blocked {
    border-top: 3px solid var(--status-cancelled);
    background: rgba(185, 28, 28, 0.02);
}

/* Floor Table Card Header */
.floor-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.15rem 0.75rem;
    gap: 0.75rem;
}

.floor-card-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.floor-shape-badge {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--duration-fast, 0.15s) ease;
}

.floor-shape-badge.shape-available {
    background: var(--color-olive-subtle);
    color: var(--color-olive);
}

.floor-shape-badge.shape-occupied {
    background: var(--color-terracotta-subtle);
    color: var(--color-terracotta);
}

.floor-shape-badge.shape-special {
    background: var(--gold-subtle);
    color: #8C6A1A;
}

.floor-shape-badge.shape-blocked {
    background: rgba(185, 28, 28, 0.12);
    color: var(--status-cancelled);
}

.floor-card-num-block {
    display: flex;
    flex-direction: column;
}

.floor-table-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-label);
    font-family: var(--font-brand, sans-serif);
    line-height: 1.15;
}

.floor-table-label {
    font-size: 0.78rem;
    color: var(--color-secondary-label);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* Floor Table Card Body */
.floor-card-body {
    padding: 0.4rem 1.15rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}

.floor-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.floor-capacity-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-secondary-label);
    background: var(--bg-surface-elevated);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
}

.floor-zone-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-tertiary-label);
    background: var(--bg-surface-hover);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}

/* Live Detail State Boxes */
.floor-detail-box {
    border-radius: var(--radius-sm, 8px);
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.floor-detail-box.box-available {
    background: var(--bg-surface-elevated);
    border: 1px dashed var(--border-subtle);
    color: var(--color-secondary-label);
}

.floor-detail-box.box-occupied {
    background: var(--color-terracotta-subtle);
    border: 1px solid rgba(193, 96, 43, 0.25);
    color: var(--color-label);
}

.floor-detail-box.box-special {
    background: var(--gold-subtle);
    border: 1px solid rgba(179, 142, 44, 0.25);
    color: #5A440D;
}

.floor-detail-box.box-blocked {
    background: rgba(185, 28, 28, 0.06);
    border: 1px solid rgba(185, 28, 28, 0.25);
    color: var(--status-cancelled);
}

.floor-detail-primary {
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--color-label);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.floor-detail-secondary {
    font-size: 0.74rem;
    color: var(--color-secondary-label);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Floor Table Card Action Bar (Accessible 44px Touch Targets) */
.floor-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.65rem 1.15rem;
    background: var(--bg-surface-elevated);
    border-top: 1px solid var(--border-subtle);
}

.floor-action-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--color-secondary-label);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast, 0.15s) ease;
}

.floor-action-btn:hover {
    color: var(--color-label);
    border-color: var(--border-stroke);
    background: var(--bg-surface-hover);
}

.floor-action-btn.btn-active-gold {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: #8C6A1A;
}

.floor-action-btn.btn-active-blocked {
    background: rgba(185, 28, 28, 0.1);
    border-color: var(--status-cancelled);
    color: var(--status-cancelled);
}

.floor-action-btn.btn-danger:hover {
    color: var(--status-cancelled);
    border-color: rgba(185, 28, 28, 0.4);
    background: rgba(185, 28, 28, 0.08);
}

/* Joined Tables & Floor Server Badges on Table Cards */
.floor-joined-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid rgba(217, 119, 6, 0.4);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.floor-joined-pill svg {
    flex-shrink: 0;
}

.floor-server-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-label);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm, 8px);
    width: 100%;
    box-sizing: border-box;
    transition: background var(--duration-fast, 0.15s) ease;
}

.floor-server-pill.is-unassigned {
    color: var(--color-terracotta);
    background: rgba(193, 96, 43, 0.06);
    border-color: rgba(193, 96, 43, 0.3);
    border-style: dashed;
}

.floor-server-role-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-secondary-label);
    margin-left: auto;
}

.floor-detail-box .floor-joined-info {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(217, 119, 6, 0.35);
    font-size: 0.74rem;
    color: #92400E;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.status-filter-chip.active-joined {
    background: #FEF3C7 !important;
    border-color: #D97706 !important;
    color: #92400E !important;
}

.status-filter-chip.active-unassigned {
    background: rgba(193, 96, 43, 0.12) !important;
    border-color: var(--color-terracotta) !important;
    color: var(--color-terracotta) !important;
}

.floor-action-btn.btn-active-joined {
    background: #FEF3C7;
    border-color: #F59E0B;
    color: #92400E;
}

/* Modal Sheets (Apple HIG Blur Sheet) */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    overflow-y: auto;
}

.modal-dialog {
    background: var(--bg-surface-elevated);
    border: none;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 560px;
    padding: 1.75rem;
    box-shadow: var(--shadow-modal);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

/* Responsive Visibility Helpers */
.hide-mobile {
    display: block;
}
.show-mobile {
    display: none !important;
}
.show-mobile-flex {
    display: none !important;
}
.show-mobile-cards {
    display: none !important;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    .show-mobile {
        display: block !important;
    }
    .show-mobile-flex {
        display: flex !important;
    }
    .show-mobile-cards {
        display: flex !important;
        flex-direction: column;
        gap: 0.85rem;
    }
    .modal-dialog {
        padding: 1.25rem;
        max-height: 94vh;
    }
}


/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.lounge-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 3.5rem 1.5rem 2rem;
    margin-top: auto;
}

.lounge-footer .footer-brand-header {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    text-decoration: none;
    color: inherit;
}

.lounge-footer .footer-brand-logo-wrap {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s var(--ease-spring);
}

.lounge-footer .footer-brand-header:hover .footer-brand-logo-wrap {
    transform: scale(1.05);
}

.lounge-footer .footer-brand-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lounge-footer .footer-brand-title {
    font-family: var(--font-brand);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-label);
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .lounge-footer {
        text-align: center;
        padding-bottom: 6rem; /* Comfortable padding above the native mobile bottom tab bar */
    }

    .lounge-footer .footer-grid-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 2.25rem !important;
    }

    .lounge-footer .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 360px;
    }

    .lounge-footer .footer-brand-header {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    .lounge-footer .footer-brand-logo-wrap {
        width: 58px;
        height: 58px;
    }

    .lounge-footer .footer-desc {
        text-align: center !important;
    }

    .lounge-footer .footer-badge {
        margin: 0 auto !important;
    }

    .lounge-footer .footer-guidelines-list {
        text-align: center !important;
        padding: 0 !important;
    }

    .lounge-footer .footer-guidelines-list li {
        text-align: center !important;
    }

    .lounge-footer .footer-bottom-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.25rem !important;
    }

    .lounge-footer .footer-copyright {
        text-align: center !important;
        width: 100%;
    }

    .lounge-footer .footer-links {
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 1rem 1.5rem !important;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Borderless Logos Across All Viewports
   -------------------------------------------------------------------------- */
.nav-brand img,
.brand-logo,
.brand-logo-svg,
.placeholder-logo-wrapper,
.logo-container,
.logo-container img,
#logoPreviewContainer,
.admin-sidebar img,
.admin-mobile-nav img {
    border: none !important;
    outline: none !important;
}

/* --------------------------------------------------------------------------
   14. Micro-Interactions & Spring Animations
   -------------------------------------------------------------------------- */
@keyframes pulseGold {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(0.98); }
}

.pulse-gold {
    animation: pulseGold 2.2s infinite ease-in-out;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* --------------------------------------------------------------------------
   15. Interface-Design Craft System: Operations Pacing & Dashboard Deck
   -------------------------------------------------------------------------- */
.pacing-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (min-width: 960px) {
    .pacing-hero-grid {
        grid-template-columns: 1.35fr 1fr;
    }
}

.hero-pacing-card {
    background: var(--bg-surface-elevated);
    border: 1px solid #191919;
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.hero-pacing-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.live-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-olive-subtle);
    border: 1px solid var(--color-olive);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: var(--text-caption-2);
    font-weight: 600;
    color: var(--color-olive);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-olive);
    box-shadow: 0 0 8px var(--color-olive);
    animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

.hero-pacing-numbers {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.hero-pacing-big {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-label);
    letter-spacing: -0.02em;
}

.hero-pacing-total {
    font-size: 1.15rem;
    color: var(--color-secondary-label);
    font-weight: 500;
}

.pacing-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-surface-hover);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.85rem;
}

.pacing-progress-fill {
    height: 100%;
    width: 100%;
    background: var(--color-terracotta);
    border-radius: var(--radius-full);
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-pacing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-footnote);
    color: var(--color-secondary-label);
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid var(--border-hairline);
    padding-top: 0.75rem;
}

/* Satellite KPI Deck */
.satellite-kpi-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.85rem;
}

.kpi-satellite-card {
    background: var(--bg-surface-elevated);
    border: 1px solid #191919;
    box-shadow: none !important;
    border-radius: 10px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.kpi-satellite-card:hover {
    box-shadow: none !important;
    transform: translateY(-2px);
}

.kpi-satellite-label {
    font-size: var(--text-caption-2);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-tertiary-label);
    margin-bottom: 0.5rem;
}

.kpi-satellite-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.kpi-satellite-sub {
    font-size: var(--text-caption-1);
    color: var(--color-secondary-label);
}

/* Ergonomic Action Pills with Optical Icon Alignment */
.btn-action-pill {
    --pill-px: 0.85rem;
    --pill-py: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: var(--pill-py) var(--pill-px);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.15s var(--ease-spring), background-color 0.15s, box-shadow 0.15s;
    user-select: none;
    box-sizing: border-box;
}

.btn-action-pill:active {
    transform: scale(0.96);
}

/* Optical Alignment: Action Pill with Icon (icon-side = text-side - 2px) */
.btn-action-pill:has(> svg:first-child:not(:only-child)),
.btn-action-pill:has(> .icon-lead) {
    padding-left: calc(var(--pill-px) - 2px);
    padding-right: var(--pill-px);
}

.btn-action-pill:has(> svg:last-child:not(:only-child)),
.btn-action-pill:has(> .icon-trail) {
    padding-left: var(--pill-px);
    padding-right: calc(var(--pill-px) - 2px);
}

.btn-action-gold {
    background: var(--color-olive);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(107, 115, 85, 0.22);
}

.btn-action-gold:hover {
    background: var(--color-olive-hover);
    box-shadow: 0 4px 14px rgba(91, 98, 72, 0.32);
}

.btn-action-subtle {
    background: var(--bg-surface-elevated);
    color: var(--color-label);
    box-shadow: var(--shadow-border);
}

.btn-action-subtle:hover {
    background: var(--bg-surface-hover);
    box-shadow: var(--shadow-border-hover);
}

/* Purposeful Empty State */
.empty-schedule-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
    border-radius: var(--radius-lg);
}

.empty-schedule-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.12);
    border: none;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
    color: var(--gold-light);
}

/* ==========================================================================
   EXHALE LOUNGE REDESIGN — EVENTS, SPECIAL EVENT SPOTLIGHT, FOOD & COCKTAILS
   ========================================================================== */

/* Hero Banner */
.exhale-hero {
    position: relative;
    padding: 5.5rem 1.25rem 4.5rem;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 12%, rgba(200, 90, 50, 0.07) 0%, var(--bg-primary) 75%);
    border-bottom: 1px solid var(--border-subtle);
}

.hero-tagline-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    background: var(--color-terracotta-subtle);
    border: 1px solid rgba(200, 90, 50, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 1.25rem;
}

.hero-title {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--color-label);
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.hero-meta-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
    font-size: var(--text-footnote);
    color: var(--color-secondary-label);
}

.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Special Event VIP Spotlight */
.special-event-spotlight {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(74, 68, 62, 0.08), var(--shadow-card);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 3.5rem;
}

.special-event-spotlight::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(200, 90, 50, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.spotlight-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.25rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (max-width: 860px) {
    .spotlight-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.spotlight-media-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    max-height: 360px;
    outline: 1px solid var(--border-subtle);
    outline-offset: -1px;
    background: var(--bg-surface-hover);
}

.spotlight-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-spring);
}

.spotlight-media-container:hover img {
    transform: scale(1.03);
}

.special-event-badge-glow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.9rem;
    background: var(--gold-subtle);
    border: 1px solid var(--gold);
    border-radius: var(--radius-full);
    color: #8C6A1A;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(184, 146, 48, 0.2);
    margin-bottom: 1rem;
}

/* Event Cards Grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.event-card {
    background: var(--bg-card, #faf3e6);
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform var(--duration-standard) var(--ease-spring), box-shadow var(--duration-standard) var(--ease-spring), border-color var(--duration-standard) var(--ease-spring);
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-stroke);
}

.event-card-media {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--bg-surface-hover);
    outline: 1px solid var(--border-subtle);
    outline-offset: -1px;
}

.event-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-spring);
}

.event-card:hover .event-card-media img {
    transform: scale(1.05);
}

.event-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Food & Cocktail Showcase */
.menu-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.food-cocktail-card {
    background: var(--bg-card, #faf3e6);
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--duration-standard) var(--ease-spring), box-shadow var(--duration-standard) var(--ease-spring), border-color var(--duration-standard) var(--ease-spring);
}

.food-cocktail-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-stroke);
}

.food-cocktail-media {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: var(--bg-surface-hover);
    outline: 1px solid var(--border-subtle);
    outline-offset: -1px;
}

.food-cocktail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-spring);
}

.food-cocktail-card:hover .food-cocktail-media img {
    transform: scale(1.04);
}

.food-cocktail-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --------------------------------------------------------------------------
   21. Authentic Hero Slider Component (High-End Inspiration)
   -------------------------------------------------------------------------- */
.hero-slider-section {
    position: relative;
    width: 100%;
    min-height: 560px;
    height: 80vh;
    max-height: 760px;
    overflow: hidden;
    background: #12100E;
}

@media (max-width: 768px) {
    .hero-slider-section {
        min-height: 560px;
        height: 82vh;
    }

    .hero-content-anchor {
        bottom: 5.5rem;
        left: 1.25rem;
        right: 1.25rem;
    }

    .hero-kicker-pill {
        margin-bottom: 0.65rem;
    }

    .hero-headline {
        font-size: clamp(1.85rem, 7vw, 2.5rem);
        line-height: 1.12;
        margin-bottom: 0.65rem;
    }

    .hero-description {
        font-size: 0.92rem;
        line-height: 1.5;
        margin-bottom: 1.25rem;
    }

    .hero-btn-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.65rem;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    .hero-btn-primary {
        padding: 0.45rem 1.2rem 0.45rem 0.45rem;
        font-size: 0.9rem;
    }

    .hero-btn-secondary {
        padding: 0.65rem 1.2rem;
        font-size: 0.9rem;
    }
}

.hero-slide-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.75s cubic-bezier(0.25, 1, 0.5, 1), transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
    transform: scale(1.02);
    pointer-events: none;
}

.hero-slide-item.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
}

.hero-media-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
}

.hero-vignette-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(16, 14, 12, 0.25) 0%, rgba(16, 14, 12, 0.5) 45%, rgba(16, 14, 12, 0.94) 100%),
                linear-gradient(90deg, rgba(16, 14, 12, 0.88) 0%, rgba(16, 14, 12, 0.55) 45%, rgba(16, 14, 12, 0.15) 100%);
    pointer-events: none;
}

.hero-content-anchor {
    position: absolute;
    bottom: clamp(4.25rem, 6vw, 5.5rem);
    left: clamp(1.25rem, 5vw, 4.5rem);
    right: clamp(1.25rem, 5vw, 4.5rem);
    max-width: 720px;
    z-index: 3;
}

.hero-kicker-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-headline {
    font-family: var(--font-brand);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 0.85rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    text-wrap: balance;
}

.hero-description {
    font-size: clamp(0.92rem, 1.6vw, 1.08rem);
    color: rgba(244, 220, 192, 0.92);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 0 1.75rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    text-wrap: pretty;
}

.hero-btn-group {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    flex-wrap: wrap;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-olive);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 0.35rem 1.4rem 0.35rem 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.25s var(--ease-spring);
    border: none;
    cursor: pointer;
}

.hero-btn-primary:hover {
    background: var(--color-olive-hover);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.hero-btn-icon-capsule {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 0.72rem 1.4rem;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s var(--ease-spring);
    cursor: pointer;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.hero-bottom-bar {
    position: absolute;
    bottom: 1.25rem;
    left: clamp(1.25rem, 5vw, 4.5rem);
    right: clamp(1.25rem, 5vw, 4.5rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.hero-progress-track {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    max-width: 280px;
    align-items: center;
}

.hero-progress-segment {
    height: 3px;
    flex: 1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-progress-segment.active {
    background: #FFFFFF;
    height: 4px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.hero-nav-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.hero-nav-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Admin Dashboard Unified Page Hero Header System
   Standardizes font family, size, weight, colors & spacing across all tabs
   -------------------------------------------------------------------------- */
.admin-page-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.admin-page-hero-main {
    flex: 1 1 320px;
    min-width: 0;
}

.admin-page-hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-terracotta);
    margin-bottom: 0.35rem;
    display: block;
    line-height: 1.2;
}

.admin-page-hero-title {
    font-family: var(--font-brand);
    font-size: clamp(1.65rem, 3.5vw, 2.15rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-label);
    margin: 0 0 0.35rem 0;
    text-wrap: balance;
}

.admin-page-hero-subtitle {
    font-size: var(--text-footnote);
    line-height: 1.5;
    color: var(--color-secondary-label);
    margin: 0;
    max-width: 680px;
    text-wrap: pretty;
}

.admin-page-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Admin Homepage Slide Sequence & Hero Slider Studio
   -------------------------------------------------------------------------- */

/* Sequence Visual Timeline Ribbon */
.admin-sequence-timeline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 1.15rem 1.5rem;
    background: rgba(232, 214, 188, 0.28);
    border-bottom: 1px solid var(--border-hairline);
    scrollbar-width: thin;
}

.admin-timeline-step {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.85rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    color: inherit;
}

.admin-timeline-step:hover {
    border-color: var(--color-olive);
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(104, 115, 85, 0.12);
}

.admin-timeline-step.active {
    border-color: var(--color-olive);
    background: rgba(104, 115, 85, 0.1);
    box-shadow: 0 0 0 1px var(--color-olive);
}

.admin-timeline-thumb {
    width: 38px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    background: #111;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.admin-timeline-step-order {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-olive);
    background: rgba(104, 115, 85, 0.14);
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
}

.admin-timeline-step-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-label);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-timeline-connector {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-tertiary-label);
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
    user-select: none;
}

/* Slide Card / Storyboard Layout (Retaining .admin-slide-row for test compatibility) */
.admin-storyboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--bg-surface);
}

.admin-slide-row {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.05), 0 4px 16px -2px rgba(74, 68, 62, 0.07);
}

.admin-slide-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(74, 68, 62, 0.08), 0 12px 28px -4px rgba(74, 68, 62, 0.12);
    border-color: rgba(196, 154, 69, 0.5);
}

.admin-slide-row.is-paused {
    opacity: 0.78;
    background: #faf8f5;
    border-style: dashed;
}

/* 16:9 Media Preview Box (ABOVE) */
.admin-slide-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 190px;
    border-radius: 0;
    overflow: hidden;
    background: #111;
    flex-shrink: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--border-hairline);
}

.admin-slide-preview img,
.admin-slide-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.admin-slide-row:hover .admin-slide-preview img,
.admin-slide-row:hover .admin-slide-preview video {
    transform: scale(1.03);
}

.admin-slide-preview-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.68) 100%);
    pointer-events: none;
}

.admin-slide-preview-order {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(20, 20, 20, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 2;
}

.admin-slide-preview-badge-bottom {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 2;
}

.admin-slide-preview-status {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
}

/* Slide Content Details (BELOW Media) */
.admin-slide-details {
    padding: 1.15rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.admin-slide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-terracotta);
    background: rgba(186, 92, 68, 0.1);
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    width: fit-content;
}

.admin-slide-kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-terracotta);
    flex-shrink: 0;
}

.admin-slide-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--color-label);
    margin: 0;
    line-height: 1.35;
    text-wrap: balance;
}

.admin-slide-subtitle {
    font-size: 0.84rem;
    color: var(--color-secondary-label);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Visual CTA Button Previews */
.admin-slide-cta-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.admin-slide-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.admin-slide-cta-pill-primary {
    background: var(--color-olive);
    color: #fff;
}

.admin-slide-cta-pill-primary:hover {
    background: #555f44;
    color: #fff;
}

.admin-slide-cta-pill-secondary {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-label);
    border: 1px solid var(--border-subtle);
}

.admin-slide-cta-pill-secondary:hover {
    background: rgba(0, 0, 0, 0.09);
    color: var(--color-label);
}

.admin-slide-meta-strip {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--color-tertiary-label);
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-hairline);
}

/* Action Toolbar (BELOW Info at Card Bottom - Strictly Single Line) */
.admin-slide-actions {
    padding: 0.6rem 0.75rem;
    background: rgba(232, 214, 188, 0.28);
    border-top: 1px solid var(--border-hairline);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap !important;
    box-sizing: border-box;
}

.admin-slide-actions-row {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
}

.admin-slide-actions .btn,
.admin-slide-actions-row .btn {
    min-height: 28px !important;
    padding: 0.22rem 0.5rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.admin-reorder-group {
    display: inline-flex;
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    overflow: hidden;
    background: var(--bg-surface);
    flex-shrink: 0;
}

.admin-reorder-btn {
    padding: 0.22rem 0.45rem;
    min-height: 28px;
    background: none;
    border: none;
    color: var(--color-label);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-reorder-btn:hover:not(:disabled) {
    background: rgba(232, 214, 188, 0.4);
    color: var(--color-olive);
}

.admin-reorder-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Live Simulator Canvas (The Slider Above) */
.admin-simulator-panel {
    background: #141210;
    border-radius: 8px;
    padding: 1.25rem 1.5rem 1.5rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    margin-bottom: 1.5rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
}

.admin-simulator-viewport {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Quick Slide Jumper Thumbnail Bar below Simulator */
.admin-sim-jumper-track {
    display: flex;
    gap: 0.65rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    justify-content: center;
    scrollbar-width: thin;
}

.admin-sim-jumper-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px;
    padding: 0.38rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF !important;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 0.76rem;
    outline: none;
    line-height: 1.2;
}

.admin-sim-jumper-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.admin-sim-jumper-btn.active {
    background: rgba(104, 115, 85, 0.45) !important;
    border-color: var(--color-olive) !important;
    box-shadow: 0 0 0 1px var(--color-olive), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.admin-sim-jumper-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: #e5c378;
    font-variant-numeric: tabular-nums;
}

.admin-sim-jumper-title {
    font-size: 0.76rem;
    color: #FFFFFF;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Layout Switcher (Storyboard Cards vs Sequence Table) */
.admin-view-switcher {
    display: inline-flex;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
    background: #FAF1E5;
    padding: 2px;
    gap: 2px;
}

.admin-view-switcher-btn {
    appearance: none;
    -webkit-appearance: none;
    border: none !important;
    border-radius: 4px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-secondary-label);
    background: transparent !important;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1;
    outline: none;
}

.admin-view-switcher-btn:hover {
    color: var(--color-label);
    background: rgba(42, 38, 33, 0.06) !important;
}

.admin-view-switcher-btn.active {
    background: var(--color-olive) !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Standard Auto-crop Dimension Information & Status Badge */
.admin-autocrop-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: rgba(104, 115, 85, 0.12);
    border: 1px solid rgba(104, 115, 85, 0.25);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #354228;
}

.admin-autocrop-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #FAF1E5;
    border: 1px solid rgba(42, 38, 33, 0.15);
    border-radius: 6px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.admin-autocrop-thumb {
    width: 96px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #000;
    flex-shrink: 0;
}

/* Active Slide Inspector & Quick Actions Bar (Below Slider Viewport) */
.admin-sim-active-bar {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-sim-active-info {
    min-width: 0;
    flex: 1;
}

.admin-sim-active-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    flex-wrap: wrap;
}

.admin-sim-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    display: inline-block;
    flex-shrink: 0;
}

.admin-sim-active-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.75rem;
    color: #a8a29e;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.admin-sim-active-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .admin-storyboard-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .admin-simulator-panel {
        padding: 1rem;
    }

    .admin-sim-active-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-sim-active-actions {
        justify-content: space-between;
    }
}

/* --------------------------------------------------------------------------
   Responsive Admin Forms & Modal Guidelines System
   -------------------------------------------------------------------------- */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

.modal-dialog-admin {
    background: var(--bg-surface);
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    padding: 1.75rem;
    position: relative;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-secondary-label);
    cursor: pointer;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    transition: background-color 0.15s var(--ease-spring), color 0.15s var(--ease-spring);
}

.btn-close-modal:hover {
    background: var(--bg-surface-hover);
    color: var(--color-label);
}

.btn-close-modal:focus-visible {
    outline: 2px solid var(--color-olive);
    outline-offset: 2px;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 640px) {
    .form-grid-2,
    .form-grid-2-1 {
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
    }

    .modal-dialog-admin {
        padding: 1.25rem 1rem !important;
        max-height: 92vh !important;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .admin-stats-grid .card {
        padding: 1rem !important;
    }
}

/* --------------------------------------------------------------------------
   22. SMS & Customer Communications Module — Design Intelligence
   Earthy palette (Sand, Ivory, Cream, Olive, Terracotta) with Apple HIG craft
   -------------------------------------------------------------------------- */
.sms-segmented-nav {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 5px;
    display: flex;
    gap: 4px;
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sms-segmented-nav::-webkit-scrollbar {
    display: none;
}

.sms-subtab-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-secondary-label);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: all var(--duration-fast) ease;
    user-select: none;
    border: 1px solid transparent;
}

.sms-subtab-item:hover {
    color: var(--color-label);
    background: var(--bg-surface-hover);
}

.sms-subtab-item.active {
    background: var(--color-olive);
    color: #FAF1E5;
    font-weight: 600;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(107, 115, 85, 0.28);
}

.sms-subtab-item.active svg {
    color: #FAF1E5;
}

.sms-subtab-badge {
    background: var(--status-cancelled);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 2px;
}

/* Responsive Two-Column Workspace */
.sms-view-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1080px) {
    .sms-view-grid {
        grid-template-columns: 1fr;
    }
}

/* Provider Selection Card Deck */
.sms-provider-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

@media (max-width: 640px) {
    .sms-provider-grid {
        grid-template-columns: 1fr;
    }
}

.sms-provider-card {
    position: relative;
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface-elevated);
    padding: 1rem;
    cursor: pointer;
    transition: all var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
    user-select: none;
}

.sms-provider-card:hover {
    border-color: var(--border-hairline);
    background: var(--bg-surface-hover);
    transform: translateY(-1px);
}

.sms-provider-card.selected {
    border-color: var(--color-olive);
    background: rgba(107, 115, 85, 0.08);
    box-shadow: 0 0 0 1px var(--color-olive);
}

.sms-provider-check {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) ease;
}

.sms-provider-card.selected .sms-provider-check {
    background: var(--color-olive);
    border-color: var(--color-olive);
    color: #FAF1E5;
}

/* Variable Insertion Chips */
.sms-chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.sms-merge-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--color-label);
    font-size: 0.72rem;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    user-select: none;
}

.sms-merge-chip:hover {
    background: var(--bg-surface-hover);
    border-color: var(--color-olive);
    color: var(--color-olive-hover);
    transform: translateY(-1px);
}

.sms-merge-chip:active {
    transform: scale(0.96);
}

/* Apple-Grade Handset Preview Shell */
.sms-phone-device {
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    background: #1C1917; /* Dark Titanium Charcoal */
    border: 3px solid #322D29;
    border-radius: 36px;
    padding: 0.85rem 0.85rem 1.25rem;
    box-shadow: 0 24px 48px -12px rgba(25, 25, 25, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.05);
    color: #FAF1E5;
}

.sms-phone-speaker-bar {
    width: 70px;
    height: 5px;
    background: #322D29;
    border-radius: 999px;
    margin: 0.25rem auto 0.75rem;
}

.sms-phone-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #A89B8F;
    letter-spacing: 0.02em;
}

.sms-phone-app-header {
    text-align: center;
    padding: 0.5rem 0 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1rem;
}

.sms-phone-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--color-olive);
    color: #FAF1E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0 auto 0.35rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.sms-phone-bubble {
    background: #2D2723;
    color: #FAF1E5;
    border-radius: 18px 18px 18px 4px;
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.48;
    word-break: break-word;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.sms-phone-delivery-tag {
    text-align: right;
    font-size: 0.65rem;
    color: #8B7D71;
    margin-top: 0.35rem;
    margin-right: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}

.sms-phone-meta-card {
    margin-top: 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
    font-size: 0.72rem;
    color: #D8C5AC;
}

/* Eligibility Summary Strip */
.sms-eligibility-deck {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .sms-eligibility-deck {
        grid-template-columns: 1fr;
    }
}

.sms-eligibility-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ==========================================================================
   KAGE / OPENTABLE DESIGN SYSTEM (Bottle Services & Exhale Lounge)
   Utility Bar, Main Cream Header, Pill Search Bar Hero, 1px Ink Border Cards, Dark Footer
   ========================================================================== */

/* 1. Utility Top Bar */
.ot-utility-bar {
    background: #DFCBB0;
    border-bottom: 1px solid rgba(25, 25, 25, 0.12);
    font-size: 0.75rem;
    color: var(--color-secondary-label);
    padding: 0.35rem 0;
    position: relative;
    z-index: 110;
}

.ot-utility-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
}

.ot-utility-link {
    color: #423E39;
    text-decoration: none;
    transition: color 0.15s ease;
    font-weight: 500;
}

.ot-utility-link:hover {
    color: var(--color-terracotta);
    text-decoration: underline;
}

.ot-utility-divider {
    color: rgba(25, 25, 25, 0.25);
}

/* 2. Main Header (Cream Bar #F4DCC0) */
.ot-main-header {
    background: #F4DCC0;
    border-bottom: 1px solid rgba(25, 25, 25, 0.15);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ot-header-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.ot-brand-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.ot-brand-logo {
    height: 34px;
    width: auto;
    display: block;
}

.ot-location-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #191919;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(25, 25, 25, 0.18);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ot-location-picker:hover {
    background: #ffffff;
    border-color: #191919;
}

.ot-nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ot-nav-item a {
    color: #191919;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ot-nav-item a:hover,
.ot-nav-item a.active {
    color: var(--color-terracotta);
    font-weight: 600;
}

.ot-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ot-btn-olive {
    background: #687355;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.5rem 1.35rem;
    border-radius: 999px;
    border: 1px solid #586248;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.ot-btn-olive:hover {
    background: #586248;
}

.ot-btn-olive:active {
    transform: scale(0.98);
}

/* 3. Hero Pill Search Bar */
.ot-hero-search-wrapper {
    margin: -2.25rem auto 3.5rem;
    position: relative;
    z-index: 50;
    max-width: 1100px;
    padding: 0 1rem;
}

.ot-hero-search-pill {
    background: #ffffff;
    border: 1px solid #191919;
    border-radius: 999px;
    padding: 0.45rem 0.55rem 0.45rem 1.25rem;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 24px rgba(25, 25, 25, 0.08);
}

.ot-hero-search-segment {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem;
    flex: 1;
    min-width: 0;
    border-right: 1px solid rgba(25, 25, 25, 0.12);
}

.ot-hero-search-segment:last-of-type {
    border-right: none;
    flex: 1.4;
}

.ot-hero-search-segment select,
.ot-hero-search-segment input {
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: #191919;
    width: 100%;
    outline: none;
    font-family: var(--font-system);
    cursor: pointer;
}

.ot-hero-search-segment input::placeholder {
    color: #8B7D71;
    font-weight: 400;
}

.ot-hero-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #423E39;
    margin-top: 0.85rem;
}

/* 4. Design System Card Architecture (1px Ink Border, No Drop Shadow) */
.ot-card {
    background: var(--bg-surface-elevated);
    border: 1px solid #191919 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.ot-card:hover {
    transform: translateY(-2px);
}

.ot-meta-line {
    font-size: 0.8125rem; /* 13px */
    color: #423E39;
    margin: 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    line-height: 1.4;
}

.ot-meta-dot {
    color: rgba(25, 25, 25, 0.35);
    font-size: 0.7rem;
}

/* 5. Dark Ink Footer (#191919) */
.ot-footer-dark {
    background: #191919;
    color: #C8BFB5;
    padding: 4.5rem 0 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.84rem;
}

.ot-footer-grid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}

.ot-footer-col-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FAF1E5;
    margin-bottom: 1.25rem;
}

.ot-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ot-footer-links a {
    color: #A89B8F;
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.15s ease;
}

.ot-footer-links a:hover {
    color: #FAF1E5;
    text-decoration: underline;
}

.ot-footer-bottom {
    max-width: 1240px;
    margin: 0 auto;
    padding: 2rem 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.78rem;
    color: #8B7D71;
}

.ot-footer-social-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ot-footer-social-icon {
    color: #A89B8F;
    transition: color 0.15s ease;
    display: inline-flex;
}

.ot-footer-social-icon:hover {
    color: #FAF1E5;
}

/* Responsive Search Bar */
@media (max-width: 920px) {
    .ot-hero-search-pill {
        border-radius: 14px;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.75rem;
    }

    .ot-hero-search-segment {
        border-right: none;
        border-bottom: 1px solid rgba(25, 25, 25, 0.1);
        padding: 0.5rem 0.25rem;
    }

    .ot-hero-search-segment:last-of-type {
        border-bottom: none;
    }

    .ot-hero-cta {
        width: 100%;
        justify-content: center;
        padding: 0.85rem;
    }

    .ot-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .ot-nav-menu {
        display: none;
    }
}

@media (max-width: 580px) {
    .ot-footer-grid {
        grid-template-columns: 1fr;
    }

    .ot-utility-container {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   6. Admin Dashboard Design System (Sand / Cream / Ink / Zero Drop Shadow)
   -------------------------------------------------------------------------- */
.admin-layout {
    background: #E8D6BC !important;
}

.admin-sidebar {
    background: #FAF1E5 !important;
    border-right: 1px solid #191919 !important;
    box-shadow: none !important;
}

.admin-mobile-header {
    background: #FAF1E5 !important;
    border-bottom: 1px solid #191919 !important;
    box-shadow: none !important;
}

.admin-mobile-nav {
    background: #E8D6BC !important;
    border: 1px solid #191919 !important;
    box-shadow: none !important;
}

.admin-mobile-nav-item {
    color: #423E39 !important;
    border-radius: 8px !important;
}

.admin-mobile-nav-item:hover {
    background: #F4DCC0 !important;
    color: #191919 !important;
}

.admin-mobile-nav-item.active {
    background: #687355 !important;
    color: #FFFFFF !important;
    border: 1px solid #191919 !important;
    box-shadow: none !important;
}

.admin-mobile-nav-item.active svg {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.admin-mobile-role-badge {
    background: rgba(201, 162, 75, 0.22) !important;
    border: none !important;
    color: #685012 !important;
    border-radius: 999px !important;
}

.admin-mobile-exit-btn {
    background: #FAF1E5 !important;
    border: none !important;
    color: #191919 !important;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.05) !important;
}

.admin-mobile-exit-btn:hover {
    background: #F0DFC8 !important;
}

/* 1. Sidebar Navigation */
.admin-sidebar {
    background: #FAF3E6 !important;
    border-right: none !important;
    box-shadow: 2px 0 12px rgba(74, 68, 62, 0.03) !important;
}

.admin-nav-item {
    color: #423E39 !important;
    border: none !important;
    border-radius: 5px !important;
    transition: all 0.15s ease !important;
}

.admin-nav-item:hover {
    background: #F0DFC8 !important;
    color: #191919 !important;
}

.admin-nav-item.active {
    background: #687355 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(104, 115, 85, 0.22) !important;
    font-weight: 700 !important;
}

.admin-nav-item.active svg {
    color: #FFFFFF !important;
}

/* 2. Workspace & Surfaces (Group with space and subtle color difference, not lines, 5px radius) */
.admin-main {
    background: #E8D6BC !important;
}

.admin-main .card {
    background: #FAF1E5 !important;
    border: none !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.04), 0 6px 18px rgba(74, 68, 62, 0.04) !important;
}

.admin-main .card:hover {
    box-shadow: 0 2px 6px rgba(74, 68, 62, 0.06), 0 8px 24px rgba(74, 68, 62, 0.05) !important;
}

.admin-main .hero-pacing-card,
.admin-main .kpi-satellite-card,
.admin-main .floor-table-card,
.admin-main .widget-card,
.admin-main .floor-control-deck {
    background: #FAF1E5 !important;
    border: none !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.04), 0 4px 12px rgba(74, 68, 62, 0.03) !important;
}

/* 3. Tables (Zebra color separation, no borders, 5px radius) */
.admin-main .table-container {
    background: #FAF1E5 !important;
    border: none !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.04) !important;
    overflow: hidden;
}

.admin-main .data-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: none !important;
}

.admin-main .data-table th {
    background: #F0DFC8 !important;
    color: #191919 !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: none !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.85rem 1rem !important;
}

.admin-main .data-table td {
    border: none !important;
    border-bottom: none !important;
    padding: 0.85rem 1rem !important;
    color: #191919 !important;
    vertical-align: top !important;
}

/* Sanitized Menu Item Details Cell */
.menu-item-details-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
}

.menu-item-details-cell .item-code-badge {
    margin-bottom: 0.18rem;
}

.menu-item-details-cell .menu-item-title {
    color: var(--color-label, #191919);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    display: block;
    word-break: break-word;
}

.menu-item-details-cell .menu-item-desc {
    font-size: 0.79rem;
    line-height: 1.4;
    color: var(--color-secondary-label, #68635B);
    margin-top: 0.15rem;
    max-width: 380px;
    word-break: break-word;
}

.admin-main .data-table tbody tr:nth-child(odd) td {
    background: #FAF1E5 !important;
}

.admin-main .data-table tbody tr:nth-child(even) td {
    background: #F6ECE0 !important;
}

.admin-main .data-table tbody tr:hover td {
    background: #EFE1CF !important;
}

/* 4. Action Buttons (Color-filled, no borders, 5px radius, tight padding) */
.admin-main .btn,
.modal-dialog .btn,
.modal-dialog-admin .btn {
    border-radius: 5px !important;
    padding: 0.4rem 0.85rem !important;
    min-height: 34px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    border: none !important;
}

.admin-main .btn-sm,
.modal-dialog .btn-sm,
.modal-dialog-admin .btn-sm {
    border-radius: 5px !important;
    padding: 0.32rem 0.65rem !important;
    min-height: 32px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.admin-main .btn-olive,
.admin-main .btn-action-olive,
.modal-dialog .btn-olive,
.modal-dialog-admin .btn-olive {
    background: #687355 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(104, 115, 85, 0.2) !important;
    border-radius: 5px !important;
}

.admin-main .btn-olive:hover,
.admin-main .btn-action-olive:hover,
.modal-dialog .btn-olive:hover,
.modal-dialog-admin .btn-olive:hover {
    background: #586248 !important;
    box-shadow: 0 2px 6px rgba(104, 115, 85, 0.28) !important;
}

.admin-main .btn-subtle,
.admin-main .btn-action-subtle,
.modal-dialog .btn-subtle,
.modal-dialog-admin .btn-subtle {
    background: #EFE1CF !important;
    color: #191919 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
}

.admin-main .btn-subtle:hover,
.admin-main .btn-action-subtle:hover,
.modal-dialog .btn-subtle:hover,
.modal-dialog-admin .btn-subtle:hover {
    background: #E2D2BE !important;
    color: #191919 !important;
}

.admin-main .btn-terracotta,
.modal-dialog .btn-terracotta,
.modal-dialog-admin .btn-terracotta {
    background: #C1602B !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(193, 96, 43, 0.2) !important;
    border-radius: 5px !important;
}

.admin-main .btn-terracotta:hover,
.modal-dialog .btn-terracotta:hover,
.modal-dialog-admin .btn-terracotta:hover {
    background: #A84E1F !important;
}

.admin-main .btn-mini,
.modal-dialog .btn-mini,
.modal-dialog-admin .btn-mini {
    background: #EFE1CF !important;
    color: #191919 !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 0.28rem 0.6rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    min-height: 28px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    transition: background-color 0.15s ease !important;
}

.admin-main .btn-mini:hover,
.modal-dialog .btn-mini:hover,
.modal-dialog-admin .btn-mini:hover {
    background: #E2D2BE !important;
    color: #191919 !important;
}

.admin-main .btn-mini-danger,
.modal-dialog .btn-mini-danger,
.modal-dialog-admin .btn-mini-danger {
    background: rgba(193, 96, 43, 0.14) !important;
    color: #A74F20 !important;
    border: none !important;
    border-radius: 5px !important;
}

.admin-main .btn-mini-danger:hover,
.modal-dialog .btn-mini-danger:hover,
.modal-dialog-admin .btn-mini-danger:hover {
    background: rgba(193, 96, 43, 0.24) !important;
    color: #8F4017 !important;
}

.admin-main .btn-mini-olive,
.modal-dialog .btn-mini-olive,
.modal-dialog-admin .btn-mini-olive {
    background: #687355 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 5px !important;
}

.admin-main .btn-mini-olive:hover,
.modal-dialog .btn-mini-olive:hover,
.modal-dialog-admin .btn-mini-olive:hover {
    background: #556042 !important;
    color: #FFFFFF !important;
}

.admin-main .btn-mini-sage,
.modal-dialog .btn-mini-sage,
.modal-dialog-admin .btn-mini-sage {
    background: rgba(104, 115, 85, 0.16) !important;
    color: #556B2F !important;
    border: none !important;
    border-radius: 5px !important;
}

.admin-main .btn-mini-sage:hover,
.modal-dialog .btn-mini-sage:hover,
.modal-dialog-admin .btn-mini-sage:hover {
    background: rgba(104, 115, 85, 0.28) !important;
    color: #435424 !important;
}

.admin-main .btn-mini:active,
.admin-main .btn-state-toggle:active {
    transform: scale(0.96) !important;
}

.admin-main .reservation-admin-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.admin-main .btn-mini-icon.has-badge {
    position: relative !important;
}

.admin-main .btn-mini-icon .icon-counter-pill {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #687355 !important;
    color: #ffffff !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    padding: 0.08rem 0.28rem !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    font-family: var(--font-mono, monospace) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    pointer-events: none !important;
}

.admin-main .btn-mini-icon,
.modal-dialog .btn-mini-icon,
.modal-dialog-admin .btn-mini-icon {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Touch & Click Target Expander for Compact Icon Buttons (WCAG 2.2 SC 2.5.8 Target Size) */
.admin-main .btn-mini-icon::after,
.modal-dialog .btn-mini-icon::after,
.modal-dialog-admin .btn-mini-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 40px;
    min-height: 40px;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.admin-main .btn-mini-icon svg,
.modal-dialog .btn-mini-icon svg,
.modal-dialog-admin .btn-mini-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

.admin-main .btn-gold {
    background: #687355 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 3px rgba(104, 115, 85, 0.2) !important;
    font-weight: 600 !important;
}

.admin-main .btn-gold:hover {
    background: #586248 !important;
}

.admin-main .btn-state-toggle {
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 0.32rem 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    transition: background-color 0.15s ease !important;
}

.admin-main .btn-state-toggle.is-available {
    background: rgba(104, 115, 85, 0.16) !important;
    color: #3D482F !important;
    border: none !important;
}

.admin-main .btn-state-toggle.is-available:hover {
    background: rgba(104, 115, 85, 0.28) !important;
}

.admin-main .btn-state-toggle.is-sold-out {
    background: rgba(193, 96, 43, 0.16) !important;
    color: #8F3C11 !important;
    border: none !important;
}

.admin-main .btn-state-toggle.is-sold-out:hover {
    background: rgba(193, 96, 43, 0.28) !important;
}

.admin-main .btn-state-toggle.btn-state-toggle-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.admin-main .btn-state-toggle.btn-state-toggle-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

/* 5. Badges & Pills (Full round 999px) */
.admin-main .badge,
.modal-dialog .badge,
.modal-dialog-admin .badge {
    border-radius: 999px !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 0.22rem 0.65rem !important;
}

.admin-main .badge-icon-only,
.modal-dialog .badge-icon-only,
.modal-dialog-admin .badge-icon-only {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.admin-main .badge-icon-only svg,
.modal-dialog .badge-icon-only svg,
.modal-dialog-admin .badge-icon-only svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

.admin-main .item-code-badge {
    display: inline-block !important;
    background: #EAE0D2 !important;
    color: #423E39 !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
    padding: 0.16rem 0.45rem !important;
    width: fit-content !important;
}

.admin-main .badge-gold {
    background: rgba(201, 162, 75, 0.22) !important;
    color: #685012 !important;
    border: none !important;
}

.admin-main .badge-confirmed,
.admin-main .badge-seated {
    background: rgba(104, 115, 85, 0.18) !important;
    color: #2F3824 !important;
    border: none !important;
}

.admin-main .badge-cancelled,
.admin-main .badge-sold-out {
    background: rgba(193, 96, 43, 0.16) !important;
    color: #8F3C11 !important;
    border: none !important;
}

.admin-main .badge-pending {
    background: rgba(201, 162, 75, 0.22) !important;
    color: #685012 !important;
    border: none !important;
}

.admin-main .badge-subtle {
    background: #EDE2D4 !important;
    color: #423E39 !important;
    border: none !important;
}

/* 6. Form Controls & Inputs (Warm recessed fill, zero borders, 5px radius) */
.admin-main .form-control,
.modal-dialog .form-control,
.modal-dialog-admin .form-control {
    background-color: #EFE3D3 !important;
    border: none !important;
    color: #191919 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    padding: 0.6rem 0.85rem !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
}

.admin-main .form-control:focus,
.modal-dialog .form-control:focus,
.modal-dialog-admin .form-control:focus {
    background-color: #FFFFFF !important;
    outline: none !important;
    box-shadow: 0 0 0 2px #687355 !important;
}

/* Global Select Dropdowns (Crisp arrow chevron, balanced padding & 5px radius) */
select,
select.form-control,
.admin-main select,
.admin-main select.form-control,
.modal-dialog select,
.modal-dialog select.form-control,
.modal-dialog-admin select,
.modal-dialog-admin select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #EFE3D3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23423E39' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 0.85rem) center !important;
    background-size: 16px 16px !important;
    padding: 0.6rem 2.4rem 0.6rem 0.85rem !important;
    border-radius: 5px !important;
    border: none !important;
    color: #191919 !important;
    font-size: 0.88rem !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    min-height: 40px !important;
}

select:focus,
select.form-control:focus,
.admin-main select:focus,
.admin-main select.form-control:focus,
.modal-dialog select:focus,
.modal-dialog select.form-control:focus,
.modal-dialog-admin select:focus,
.modal-dialog-admin select.form-control:focus {
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    outline: none !important;
    box-shadow: 0 0 0 2px #687355 !important;
}

/* Modals & Dialogs (5px radius flow) */
.modal-dialog,
.modal-dialog-admin {
    border-radius: 5px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Conjoined Tab Groups & Composite Tabs (5px radius flow) */
.tab-button-group,
.tab-btn-composite,
.tab-btn {
    border-radius: 5px !important;
}

/* 7. Mobile List Cards (Concentric borderless cards, 5px radius) */
.admin-main .grouped-list-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
}

.admin-main .grouped-list-row {
    background: #FAF1E5 !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.04), 0 4px 12px rgba(74, 68, 62, 0.03) !important;
}

/* 2-Line Menu Admin Items (Item code & details on Line 1 above, Price/State/Actions on Line 2 below) */
.admin-main .menu-items-list {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    border: 1px solid var(--border-hairline, #DFCEB7) !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

.admin-main .menu-admin-item-row {
    border-radius: 0 !important;
    padding: 0.85rem 1.15rem !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-hairline, #DFCEB7) !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}

.admin-main .menu-admin-item-row:last-child {
    border-bottom: none !important;
}

.admin-main .menu-admin-item-row:nth-child(odd) {
    background: #FAF1E5 !important;
}

.admin-main .menu-admin-item-row:nth-child(even) {
    background: #F6ECE0 !important;
}

.admin-main .menu-admin-item-row:hover {
    background: #EFE1CF !important;
}

.admin-main .menu-admin-item-row.is-sold-out {
    opacity: 0.78;
}

.admin-main .menu-item-row-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    margin-bottom: 0.5rem;
}

.admin-main .menu-item-row-top .item-code-badge {
    flex-shrink: 0;
    font-size: 0.68rem !important;
    padding: 0.16rem 0.45rem !important;
    border-radius: 4px !important;
}

.admin-main .menu-item-row-top .menu-item-row-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-label, #191919);
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-main .menu-item-row-top .menu-item-row-desc {
    font-size: 0.82rem;
    color: var(--color-secondary-label, #68635B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.admin-main .menu-item-row-top .menu-item-row-desc::before {
    content: "— ";
    opacity: 0.7;
}

.admin-main .menu-item-section-tag {
    font-size: 0.75rem;
    color: var(--color-olive, #687355);
    background: rgba(104, 115, 85, 0.12);
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Flexbox Row: 40% Item Price & Variants, 60% Action Buttons & State Controls */
.admin-main .menu-item-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

.admin-main .menu-item-row-pricing {
    flex: 0 0 calc(40% - 0.375rem);
    max-width: calc(40% - 0.375rem);
    width: calc(40% - 0.375rem);
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.admin-main .menu-item-price-single strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-label, #191919);
}

.admin-main .menu-item-price-variants {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-main .menu-item-variants-pills {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.admin-main .menu-variant-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #EDE2D4;
    padding: 0.18rem 0.48rem;
    border-radius: 4px;
    font-size: 0.76rem;
}

.admin-main .menu-variant-pill .variant-name {
    color: var(--color-secondary-label, #68635B);
    font-weight: 500;
}

.admin-main .menu-variant-pill .variant-price {
    color: var(--color-label, #191919);
    font-weight: 700;
}

.admin-main .menu-item-row-actions {
    flex: 0 0 calc(60% - 0.375rem);
    max-width: calc(60% - 0.375rem);
    width: calc(60% - 0.375rem);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-left: auto;
    box-sizing: border-box;
}

.admin-main .menu-item-state-icons,
.admin-main .menu-item-btn-icons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-main .menu-row-separator {
    width: 1px;
    height: 18px;
    background: rgba(74, 68, 62, 0.18);
    margin: 0 0.2rem;
    flex-shrink: 0;
}

/* Staff Profiles - Responsive Card Grid & Actions */
.admin-main .staff-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.15rem;
    margin-bottom: 2rem;
}

.admin-main .staff-profile-card {
    background: #FAF1E5;
    border: 1px solid var(--border-hairline, #DFCEB7);
    border-radius: 5px;
    padding: 1.15rem;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.85rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-main .staff-profile-card:hover {
    background: #F6ECE0;
    box-shadow: 0 4px 12px rgba(74, 68, 62, 0.08);
}

.admin-main .staff-profile-card.is-inactive {
    opacity: 0.72;
    background: #F4EAE0;
}

.admin-main .staff-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-main .staff-card-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.admin-main .staff-avatar-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFE3D3;
    border: 1px solid rgba(42, 38, 33, 0.15);
}

.admin-main .staff-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-main .staff-avatar-initials {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-label, #191919);
    letter-spacing: 0.02em;
}

.admin-main .staff-card-meta {
    min-width: 0;
}

.admin-main .staff-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-label, #191919);
    margin: 0 0 0.2rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-main .staff-card-role {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.admin-main .staff-role-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-secondary-label, #68635B);
}

.admin-main .staff-role-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
}

.admin-main .staff-role-badge.role-primary {
    background: rgba(104, 115, 85, 0.18);
    color: #3d4a2d;
}

.admin-main .staff-role-badge.role-support {
    background: rgba(142, 108, 56, 0.16);
    color: #6b4d1b;
}

.admin-main .staff-card-status-badge {
    flex-shrink: 0;
}

.admin-main .staff-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-secondary-label, #68635B);
}

.admin-main .staff-card-contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
}

.admin-main .staff-card-phone {
    font-family: var(--font-mono, monospace);
    color: var(--color-label, #191919);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-main .staff-card-phone:hover {
    color: var(--color-terracotta, #BA5C44);
}

.admin-main .staff-card-email {
    color: var(--color-tertiary-label, #8A8276);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-main .staff-card-notes {
    font-size: 0.78rem;
    color: var(--color-secondary-label, #68635B);
    background: rgba(74, 68, 62, 0.05);
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    line-height: 1.35;
    margin-top: 0.15rem;
}

.admin-main .staff-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(74, 68, 62, 0.12);
    margin-top: auto;
}

.admin-main .staff-card-footer-info {
    font-size: 0.75rem;
    color: var(--color-tertiary-label, #8A8276);
    font-weight: 500;
}

.admin-main .staff-card-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.admin-main .empty-schedule-state {
    background: #FAF1E5 !important;
    border: none !important;
    border-radius: 5px !important;
}

.admin-main .floor-zone-tab {
    background: #FAF1E5 !important;
    border: none !important;
    color: #423E39 !important;
    box-shadow: none !important;
    border-radius: 5px !important;
}

.admin-main .floor-zone-tab.active {
    background: #687355 !important;
    color: #FFFFFF !important;
    border: none !important;
}

.admin-page-hero-title {
    font-family: var(--font-system) !important;
    color: #191919 !important;
    font-weight: 700 !important;
}

.admin-page-hero-subtitle {
    color: #423E39 !important;
}

/* 8. Price Box & Variant Separation without Border Lines (5px radius) */
.admin-main .menu-admin-price-box {
    background: #F0DFC8 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    padding: 0.75rem 0.95rem !important;
    margin-bottom: 0.75rem !important;
}

.admin-main .menu-admin-variant-row {
    background: #FAF1E5 !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 0.4rem 0.6rem !important;
    margin-bottom: 0.35rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 9. Customer Directory - Responsive Card Grid & Actions */
.admin-main .customer-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.15rem;
    margin-bottom: 2rem;
}

.admin-main .customer-profile-card {
    background: #FAF1E5;
    border: 1px solid var(--border-hairline, #DFCEB7);
    border-radius: 5px;
    padding: 1.15rem;
    box-shadow: 0 1px 3px rgba(74, 68, 62, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.85rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-main .customer-profile-card:hover {
    background: #F6ECE0;
    box-shadow: 0 4px 12px rgba(74, 68, 62, 0.08);
}

.admin-main .customer-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-main .customer-card-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.admin-main .customer-avatar-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFE3D3;
    border: 1px solid rgba(42, 38, 33, 0.15);
}

.admin-main .customer-avatar-initials {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-label, #191919);
    letter-spacing: 0.02em;
}

.admin-main .customer-card-meta {
    min-width: 0;
}

.admin-main .customer-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-label, #191919);
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-main .customer-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.admin-main .customer-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.admin-main .customer-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--color-secondary-label, #68635B);
}

.admin-main .customer-card-contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
}

.admin-main .customer-card-phone {
    font-family: var(--font-mono, monospace);
    color: var(--color-label, #191919);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-main .customer-card-phone:hover {
    color: var(--color-terracotta, #BA5C44);
}

.admin-main .customer-card-email {
    color: var(--color-tertiary-label, #8A8276);
    font-size: 0.80rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

.admin-main .customer-card-email:hover {
    color: var(--color-label, #191919);
}

.admin-main .customer-card-notes {
    font-size: 0.80rem;
    color: var(--color-secondary-label, #68635B);
    background: #F0DFC8;
    padding: 0.5rem 0.65rem;
    border-radius: 5px;
    line-height: 1.35;
    margin-top: 0.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-main .customer-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(74, 68, 62, 0.12);
    margin-top: auto;
}

.admin-main .customer-card-footer-info {
    font-size: 0.75rem;
    color: var(--color-tertiary-label, #8A8276);
    font-weight: 500;
}

.admin-main .customer-card-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

/* 10. Mobile Touch Targets & Responsive Tabs (< 768px) */
@media (max-width: 768px) {
    .tab-button-group-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 0.25rem !important;
        margin-bottom: 0.85rem !important;
        border-bottom: none !important;
        scrollbar-width: none !important;
    }

    .tab-button-group-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    .tab-button-group {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        min-width: 100% !important;
        border: none !important;
        border-radius: 5px !important;
    }

    .tab-btn-composite {
        flex-shrink: 0 !important;
        border-radius: 5px !important;
    }

    .admin-main .card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .admin-main .menu-admin-actions .btn-mini {
        min-height: 34px !important;
        padding: 0.35rem 0.65rem !important;
        font-size: 0.8rem !important;
        border-radius: 5px !important;
    }

    .admin-main .btn-state-toggle {
        min-height: 34px !important;
        padding: 0.35rem 0.75rem !important;
        font-size: 0.78rem !important;
    }

    .admin-main .btn-state-toggle.btn-state-toggle-icon {
        min-height: 30px !important;
        min-width: 30px !important;
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
    }

    .admin-main .menu-item-row-top {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .admin-main .menu-item-row-top .menu-item-row-desc {
        width: 100%;
        white-space: normal;
    }

    .admin-main .menu-item-row-top .menu-item-row-desc::before {
        display: none;
    }

    .admin-main .menu-admin-item-row {
        padding: 0.75rem 0.85rem !important;
    }

    .admin-main .menu-item-row-bottom {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .admin-main .menu-item-row-pricing {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .admin-main .menu-item-row-pricing::-webkit-scrollbar {
        display: none !important;
    }

    .admin-main .menu-item-price-single {
        white-space: nowrap !important;
    }

    .admin-main .menu-item-price-single strong {
        font-size: 0.96rem !important;
        white-space: nowrap !important;
    }

    .admin-main .menu-item-row-actions {
        margin-left: auto !important;
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
    }

    .admin-main .menu-item-state-icons,
    .admin-main .menu-item-btn-icons {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
    }

    .admin-main .btn-mini.btn-mini-icon,
    .admin-main .badge-icon-only,
    .admin-main .btn-state-toggle.btn-state-toggle-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex-shrink: 0 !important;
    }

    .admin-main .btn-mini.btn-mini-icon svg,
    .admin-main .badge-icon-only svg,
    .admin-main .btn-state-toggle.btn-state-toggle-icon svg {
        width: 13px !important;
        height: 13px !important;
    }

    .admin-main .menu-row-separator {
        height: 15px !important;
        margin: 0 0.15rem !important;
    }

    .admin-page-hero {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        margin-bottom: 1.15rem !important;
    }

    .admin-page-hero-main {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .admin-page-hero-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .admin-page-hero-actions .btn {
        flex: 1 1 auto !important;
        min-height: 36px !important;
        padding: 0.35rem 0.65rem !important;
        font-size: 0.8rem !important;
        justify-content: center !important;
        border-radius: 5px !important;
    }

    .admin-main .staff-profiles-grid,
    .admin-main .customer-profiles-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .admin-main .reservation-card-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        padding-top: 0.65rem !important;
        border-top: 1px solid rgba(74, 68, 62, 0.10) !important;
    }

    .admin-main .reservation-card-actions .btn-mini.btn-mini-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 6px !important;
    }

    .admin-main .reservation-card-actions .btn-mini.btn-mini-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ==========================================================================
   Floor Allocation Operational Deck System (Apple HIG / OneMore)
   ========================================================================== */

.alloc-deck {
    font-family: var(--font-system);
    color: var(--color-label);
}

.alloc-back-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-secondary-label);
    text-decoration: none;
    margin-bottom: 0.85rem;
    transition: color 0.15s ease;
}

.alloc-back-nav:hover {
    color: var(--color-label);
}

/* Executive KPI Grid */
.alloc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.alloc-kpi-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.95rem 1.15rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.alloc-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-secondary-label);
    margin-bottom: 0.35rem;
}

.alloc-kpi-value {
    font-family: var(--font-brand);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.alloc-kpi-sub {
    font-size: 0.78rem;
    color: var(--color-tertiary-label);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Operational Command Dock (Roster & Host Stand) */
.alloc-ops-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.alloc-card-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.alloc-card-header {
    background: rgba(239, 227, 211, 0.7);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.85rem 1.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.alloc-card-title {
    font-family: var(--font-brand);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-label);
    margin: 0;
}

.alloc-card-subtitle {
    font-size: 0.75rem;
    color: var(--color-secondary-label);
    margin-top: 0.15rem;
}

.alloc-roster-filters {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--bg-surface-elevated);
    padding: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.alloc-filter-btn {
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-secondary-label);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-system);
    transition: all 0.15s ease;
}

.alloc-filter-btn.active {
    background: rgba(239, 227, 211, 0.9);
    font-weight: 700;
    color: var(--color-label);
}

.alloc-roster-track {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.85rem 1.15rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.alloc-staff-chip {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    min-width: 185px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.alloc-staff-chip.is-on-shift {
    border-color: rgba(107, 115, 85, 0.45);
    background: #FFFFFF;
}

.alloc-chip-name {
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--color-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95px;
}

.alloc-chip-role {
    font-size: 0.72rem;
    color: var(--color-secondary-label);
}

.alloc-attendance-toggle {
    border: none;
    border-radius: var(--radius-xs);
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-system);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.alloc-attendance-toggle.on {
    background: var(--color-olive-subtle);
    color: #354228;
}

.alloc-attendance-toggle.off {
    background: rgba(42, 38, 33, 0.08);
    color: var(--color-tertiary-label);
}

.alloc-attendance-toggle:active {
    transform: scale(0.96);
}

/* Host Stand List */
.alloc-host-list {
    padding: 0.85rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.alloc-host-chip {
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.84rem;
}

/* Zones & Table Grid */
.alloc-zone-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.75rem;
}

.alloc-zone-header {
    background: rgba(239, 227, 211, 0.7);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.alloc-zone-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.alloc-zone-title {
    font-family: var(--font-brand);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-label);
    margin: 0;
}

.alloc-zone-badge {
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(42, 38, 33, 0.06);
    color: var(--color-secondary-label);
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
}

.alloc-zone-lead-pill {
    background: var(--color-olive-subtle);
    border: 1px solid rgba(107, 115, 85, 0.45);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}

.alloc-support-strip {
    background: rgba(201, 162, 75, 0.08);
    border-bottom: 1px solid var(--border-hairline);
    padding: 0.65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.alloc-table-grid {
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.alloc-table-card {
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.alloc-table-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.alloc-table-card.is-assigned {
    border-color: rgba(107, 115, 85, 0.4);
}

.alloc-table-card.is-unassigned {
    border-color: rgba(193, 96, 43, 0.35);
    background: #FFFDFB;
}

.alloc-table-num {
    font-family: var(--font-brand);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-label);
}

.alloc-table-cap {
    font-size: 0.75rem;
    color: var(--color-tertiary-label);
    font-variant-numeric: tabular-nums;
}

.alloc-status-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.alloc-status-pill.assigned {
    background: var(--color-olive-subtle);
    color: #354228;
}

.alloc-status-pill.covered {
    background: rgba(201, 162, 75, 0.15);
    color: #6b4d1b;
}

.alloc-status-pill.unassigned {
    background: var(--color-terracotta-subtle);
    color: #782717;
}

.alloc-server-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.65rem 0;
}

.alloc-server-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-label);
    flex-shrink: 0;
}

.alloc-server-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-label);
    line-height: 1.2;
}

.alloc-server-meta {
    font-size: 0.72rem;
    color: var(--color-secondary-label);
    line-height: 1.2;
}

.alloc-table-actions {
    border-top: 1px solid var(--border-hairline);
    padding-top: 0.65rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.alloc-table-btn {
    border-radius: 4px;
    height: 32px;
    padding: 0 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-system);
}

.alloc-table-btn:active {
    transform: scale(0.96);
}

.alloc-table-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-terracotta);
    font-size: 1.15rem;
    padding: 0 0.35rem;
    min-height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.alloc-table-clear:hover {
    background: var(--color-terracotta-subtle);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .alloc-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .alloc-ops-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .alloc-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .alloc-table-grid {
        grid-template-columns: 1fr;
        padding: 0.85rem;
    }
    .alloc-zone-header {
        flex-direction: column;
        align-items: stretch;
    }
    .alloc-zone-header-actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 0.4rem;
    }
    .alloc-zone-header-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ==========================================================================
   Outlet Settings & Governance Redesign System (Apple HIG / OneMore)
   ========================================================================== */

.settings-tab-nav {
    display: inline-flex;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 0.35rem;
    margin-bottom: 1.75rem;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.settings-tab-nav::-webkit-scrollbar {
    display: none;
}

.settings-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--color-secondary-label);
    font-family: var(--font-brand);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.settings-tab-btn:hover {
    color: var(--color-label);
    background: rgba(239, 227, 211, 0.45);
}

.settings-tab-btn.active {
    background: rgba(239, 227, 211, 0.95);
    color: var(--color-label);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-weight: 700;
}

.settings-tab-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    background: rgba(42, 38, 33, 0.08);
    color: var(--color-secondary-label);
}

.settings-tab-btn.active .settings-tab-badge {
    background: var(--color-olive-subtle);
    color: var(--color-olive);
}

/* Quick KPI bar for Staff & Settings */
.settings-kpi-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.settings-kpi-item {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.15rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.settings-kpi-item-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary-label);
    margin-bottom: 0.25rem;
}

.settings-kpi-item-val {
    font-family: var(--font-brand);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.settings-kpi-item-sub {
    font-size: 0.75rem;
    color: var(--color-tertiary-label);
    margin-top: 0.2rem;
}

/* Grouped Form Subsections */
.settings-form-section {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}

.settings-form-section-title {
    font-family: var(--font-brand);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary-label);
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* Roles Matrix Grid */
.settings-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.settings-role-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.settings-role-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border-color: rgba(193, 96, 43, 0.3);
}

.settings-banner-hero-link {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .settings-tab-nav {
        width: 100%;
        display: flex;
    }
    .settings-tab-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
    }
    .settings-role-grid {
        grid-template-columns: 1fr;
    }
}