/* =================================================================== */
/* PayTable 2025 Branding                                              */
/* =================================================================== */

/* Font Definitions */
@font-face {
    font-family: 'Poppins';
    src: url('../branding/2025/fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../branding/2025/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../branding/2025/fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../branding/2025/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geoform';
    src: url('../branding/2025/fonts/geoform/Geoform-Light-BF6556c6e751770.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geoform';
    src: url('../branding/2025/fonts/geoform/Geoform-BF6556c6e73002d.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geoform';
    src: url('../branding/2025/fonts/geoform/Geoform-Medium-BF6556c6e620ac4.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geoform';
    src: url('../branding/2025/fonts/geoform/Geoform-Bold-BF6556c6e7190d1.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geoform';
    src: url('../branding/2025/fonts/geoform/Geoform-ExtraBold-BF6556c6e755e60.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../branding/2025/fonts/montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* CSS Custom Properties - Essential Variables Only */
:root {
    /* PayTable 2025 Brand Colors */
    --pt-navy: #000075;
    --pt-navy-light: #1a1a8f;
    --pt-navy-dark: #000052;
    /* Navy used as a FOREGROUND (text / icons / chevrons on a light surface). Defaults to
       navy in light; the dark block overrides it to a readable light indigo. Chrome that
       uses navy as a BACKGROUND (sidebar, .btn-navy, modal headers, badges) keeps --pt-navy
       and must stay navy in both themes. See webapp-ui-consistency-guide.md §7. */
    --pt-navy-fg: var(--pt-navy);
    --pt-coral: #ec607e;
    --pt-coral-light: #f08098;
    --pt-coral-dark: #d94d6a;

    /* PayTable 2025 Brand Fonts */
    --pt-font-logo: 'Poppins', sans-serif;
    --pt-font-heading: 'Geoform', sans-serif;
    --pt-font-body: 'Montserrat', sans-serif;

    /* Colors - Updated to 2025 branding */
    --primary-color: #000075;
    --primary-hover: #1a1a8f;
    --primary-color-dark: #000052;
    --secondary-color: #ec607e;
    --secondary-hover: #d94d6a;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;

    /* ============================================================
       Semantic color tokens (UI modernization Phase 2, 2026-05-19)
       ============================================================
       The locked discipline from docs/architecture/mesero-ui-modernization-plan.md §1:
         - Coral  = primary CTA  ("Cobrar y cerrar", "Enviar pedido", "Aplicar")
         - Navy   = brand chrome (headers, primary nav, modal headers)
         - Amber  = informational warning ("Estancado", "Cuenta abandonada", session-warning)
         - Red    = destructive  ONLY (Cancelar an order, Eliminar, Anular)
         - Green  = positive     (paid, fulfilled, success toast)
         - Gray   = neutral      (secondary text, disabled state)

       Prefer the --pt-* semantic tokens over raw color names so the meaning is
       searchable. Grep --pt-destructive to find every destructive surface;
       grep --pt-warning to find every informational warning; etc. Raw
       --primary-color / --secondary-color / --danger-color are kept for
       backward compatibility but new code SHOULD use the semantic tokens. */
    --pt-cta:                 var(--pt-coral);
    --pt-cta-hover:           var(--pt-coral-dark);
    --pt-cta-light:           var(--pt-coral-light);
    --pt-chrome:              var(--pt-navy);
    --pt-chrome-hover:        var(--pt-navy-light);
    --pt-chrome-dark:         var(--pt-navy-dark);
    --pt-warning:             #f59e0b;   /* amber-500 — informational, not destructive */
    --pt-warning-bg:          #fef3c7;   /* amber-100 — callout backgrounds */
    --pt-warning-border:      #fbbf24;   /* amber-400 — callout borders */
    --pt-destructive:         #ef4444;   /* red-500 — destructive ONLY */
    --pt-destructive-hover:   #dc2626;   /* red-600 */
    --pt-destructive-bg:      #fee2e2;   /* red-100 — destructive callouts */
    --pt-positive:            #10b981;   /* emerald-500 — success / fulfilled */
    --pt-positive-bg:         #d1fae5;   /* emerald-100 */
    --pt-neutral:             #64748b;   /* slate-500 — secondary text */
    --pt-neutral-light:       #94a3b8;   /* slate-400 — disabled */
    --pt-neutral-bg:          #f1f5f9;   /* slate-100 — disabled bg */

    /* Hover edge for NON-CTA containers — drop zones, option rows, selectable cards,
       list items. The one token for "this container is interactive", so the affordance
       cannot drift per component.

       NOT coral. Coral is the light-mode secondary/CTA colour; on a plain container edge
       it reads as an error, which is exactly why the Foto uploader was reported as
       "outlining in red" when nothing was wrong.

       It is theme-dependent by necessity, not preference. Measured against the surfaces:
         light  navy #000075 on #ffffff .... 16.71:1   (resting border #e2e8f0 = 1.23:1)
         dark   navy #000075 on #1e293b ....  1.14:1   — BELOW the resting border's 1.41:1,
                                                        so a navy hover makes the edge appear
                                                        to FADE. Worse than no hover at all.
         dark   silver #cbd5e1 on #1e293b ...  9.85:1  ← used instead
       Silver also keeps the cue neutral in dark rather than importing brand colour into a
       state that carries no brand meaning. #cbd5e1 is the value already used for
       --text-secondary in the dark palette, so it is not a new colour in the system. */
    --pt-hover-border:        var(--pt-navy, #000075);

    /* ---- FORM FIELD SURFACE — one definition of "what a form field looks like" ----
       Consumed by all THREE mechanisms the admin uses for a field, so they are identical
       instead of three unrelated looks:
         1. .form-control            — text inputs, textareas
         2. select / .form-select    — native dropdowns (~125 elements)
         3. .field-dropdown-toggle   — BlazorBootstrap <Dropdown> used as a field (7 sites)

       (3) was the GH-26 defect: <Dropdown Color="DropdownColor.Secondary"> renders Bootstrap's
       .btn-secondary — a GREY FILL with pale text — so the Menú / Categoría / Estación fields
       rendered grey next to white text inputs. .field-dropdown-toggle only ever set layout
       (width/flex/padding), never colour, so nothing overrode the button styling.

       VALUES ARE TODAY'S EFFECTIVE ONES, deliberately. They are Bootstrap's palette, not
       PayTable's, because the winning .form-control block is a hardcoded duplicate that
       overrides the tokenised one. The point of this pass is to make dropdowns MATCH, not to
       restyle every field at the same time. Migrating the whole family onto PayTable tokens
       (and retiring the duplicate) is the follow-up; when it happens, change these lines and
       all three mechanisms move together.

       NOT a pure no-op, despite what this comment originally claimed. Introducing a rule for
       `select` / `.form-select` at (0,2,0) TIES Bootstrap's own state selectors at the same
       specificity and wins on source order, so states Bootstrap used to own had to be
       re-declared explicitly further down: :disabled (a disabled select was rendering as
       enabled) and the invalid/focus interaction. If you add a state to the field rule, check
       what Bootstrap declares for that state at (0,2,0) and re-assert it. */
    --pt-field-bg:            #ffffff;
    --pt-field-border:        #ced4da;
    --pt-field-text:          #212529;
    --pt-field-focus:         #0d6efd;

    /* Shared field height. NOT --touch-target-min (40px): .form-control's own padding and
       2px border make it compute to 44px, so a select pinned at 40px sits 4px short of the
       input beside it — measured, and the visible half of "the dropdowns don't match the
       fields". 44px is also the brand touch-target floor, so this aligns and complies at
       once. --touch-target-min is left alone; other components depend on it. */
    --pt-field-min-height:    44px;

    /* Invalid field state (GH-29). Same red as --danger-color so validation matches every
       other error affordance in the admin. The ring is the focus-ring geometry in the error
       colour, so an invalid field that also has focus reads as one cue, not two. */
    --pt-field-invalid:       #ef4444;
    --pt-field-invalid-ring:  rgba(239, 68, 68, 0.25);

    /* A SEPARATE red for error TEXT. --pt-field-invalid only has to clear the 3:1 non-text
       floor as a border; reused as body text on white it measures 3.76:1, below the 4.5:1 AA
       minimum. #b91c1c is 6.42:1 on white. Low contrast is a correctness bug here, not a
       preference. Dark mode keeps #f87171, which already clears AA on the dark surface. */
    --pt-field-invalid-text:  #b91c1c;

    /* Disabled field fill — Bootstrap's own disabled grey, restated as a token because the new
       .app-layout .form-select rule (0,2,0) ties .form-select:disabled (0,2,0) and wins on
       source order, which left disabled selects looking enabled. */
    --pt-field-disabled-bg:   #e9ecef;

    /* Validation summary banner. Text is near-black rather than red: a block of red body
       copy on a red tint is the classic AA failure, and the red border plus icon already
       carry the "error" signal. */
    --pt-validation-summary-bg:   #fef2f2;
    --pt-validation-summary-text: #212529;

    /* Tag purple (iPad #10). Purple had drifted to four different values across
       pages — #8b5cf6, #7c3aed, and two gradients (#6366f1→#8b5cf6, #8b5cf6→#6d28d9)
       — and had also leaked onto action buttons, so it no longer read as "this is a
       tag". One token now, and it is RESERVED FOR TAGS AND BADGES: do not use it for
       buttons, icons or chrome, which is what makes a purple pill instantly legible
       as a label rather than something clickable. */
    --pt-tag:                 #8b5cf6;   /* violet-500 — the one tag purple */
    --pt-tag-dark:            #6d28d9;   /* violet-700 — borders / dark-mode text */
    --pt-tag-bg:              rgba(139, 92, 246, 0.12);

    /* Background Colors */
    --background-color: #f8fafc;
    --surface-color: #ffffff;
    /* Secondary surface — opaque card fill for list rows, sticky bulk bars,
       section panels and modal footers (Tables.razor). Was referenced but never
       defined, so it resolved to transparent: the sticky "Mover a sección" bar
       showed the table list through it while scrolling. Aliased to the surface
       token so it stays opaque and theme-correct (resolves per active theme). */
    --bg-secondary: var(--surface-color);
    --border-color: #e2e8f0;

    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-black: #000000;

    /* Modal specific colors for high contrast */
    --modal-bg: #ffffff;
    --modal-text: #000000;
    --modal-text-secondary: #374151;
    --modal-border: #d1d5db;
    --modal-input-bg: #ffffff;
    --modal-input-border: #9ca3af;
    --modal-header-bg: #f9fafb;
    --modal-footer-bg: #f9fafb;

    /* Spacing - Reduced for compact design */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.25rem;

    /* Border Radius - Sharp corners for cards */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    /* Straight edges for buttons and inputs (PayTable brand) */
    --radius-button: 0;
    --radius-input: 0;

    /* Touch Targets */
    --touch-target-min: 40px;
    --touch-target-lg: 48px;
    --touch-target-xl: 56px;

    /* Shadows */
    --shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.12);
    --shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.16);
    --shadow-xl: 0 16px 32px -8px rgb(0 0 0 / 0.20);

    /* Transitions */
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #0f172a;
        --surface-color: #1e293b;
        --border-color: #334155;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-muted: #64748b;
        --text-black: #ffffff;

        /* Navy foreground → readable light indigo on dark surfaces (icons, chevrons,
           header/section-label icons). Backgrounds keep --pt-navy (stay navy). */
        --pt-navy-fg: #a5b4fc;

        /* Field surface in dark — same values the hardcoded .form-control dark block already
           used, so this is a no-op for inputs and gives dropdowns something to match. */
        --pt-field-bg:     #2c3034;
        --pt-field-border: #495057;
        --pt-field-text:   #f8f9fa;
        --pt-field-focus:  #0d6efd;

        /* Lighter red on dark: #ef4444 against the #2c3034 field surface is too dim to read
           as an alert, and the message text sitting on the dark page fails AA outright.
           #f87171 is the same hue, lifted for the dark surface. */
        --pt-field-invalid:      #f87171;
        --pt-field-invalid-ring: rgba(248, 113, 113, 0.3);

        /* On dark, the border red is already legible as text — no separate value needed. */
        --pt-field-invalid-text: #f87171;
        --pt-field-disabled-bg:  #343a40;

        /* A dark red-tinted surface, not the light one: #fef2f2 behind light text would be
           unreadable, and behind dark text it would glare against the dark page. */
        --pt-validation-summary-bg:   #3a2426;
        --pt-validation-summary-text: #f8f9fa;

        /* Hover edge on non-CTA containers → light silver, NOT navy and NOT indigo.
           Navy measures 1.14:1 here, below the resting border (#334155, 1.41:1), so it
           would read as the edge fading on hover. Silver #cbd5e1 gives 9.85:1 and keeps
           the cue neutral — a hover carries no brand meaning. Same value as
           --text-secondary in this block, so no new colour enters the palette. */
        --pt-hover-border: #cbd5e1;

        /* Modal dark mode - maintaining high contrast */
        --modal-bg: #1f2937;
        --modal-text: #ffffff;
        --modal-text-secondary: #d1d5db;
        --modal-border: #4b5563;
        --modal-input-bg: #374151;
        --modal-input-border: #6b7280;
        --modal-header-bg: #111827;
        --modal-footer-bg: #111827;

        /* Semantic tokens — dark-mode adjustments (callout backgrounds need
           more contrast against the dark surface; foreground intent unchanged). */
        --pt-warning-bg:     rgba(245, 158, 11, 0.18);  /* amber-500 @ 18% */
        --pt-warning-border: #f59e0b;
        --pt-destructive-bg: rgba(239, 68, 68, 0.18);
        --pt-positive-bg:    rgba(16, 185, 129, 0.18);
        --pt-neutral-bg:     #334155;
    }
}

/* Legacy font - keeping for backward compatibility */
@font-face {
    font-family: 'PayTableFontStd'; 
    src: url('../fonts/neulis-neue/NeulisAlt-Regular.otf');
}

/* Base Styles */
html, body {
    font-family: var(--pt-font-body), 'PayTableFontStd', sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.5;
}

/* iOS Safari rubber-band lock for mobile waiter pages whose container
   already owns its scrollable region internally (height: 100dvh +
   overflow: hidden). Without these rules the navy sticky header drags
   away from the top of the screen when the waiter pulls down inside an
   at-top swipe panel — overscroll-behavior on the container alone isn't
   enough on iOS, the body itself has to be pinned. Scoped via :has() so
   it only engages while a locked-viewport mobile page is mounted; other
   pages (mobile-tab-detail, mobile-shift-end) still scroll the body
   normally because they use min-height: 100vh instead of a fixed viewport.
   iOS Safari supports :has() since 15.4 — well below the mesero pilot
   floor. */
html:has(.mobile-orders-container),
body:has(.mobile-orders-container) {
    position: fixed;
    inset: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Loading Progress - Required for Blazor */
.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 15vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 1.125rem;
    inset: calc(15vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Error UI - Required for Blazor */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 1rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 1rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.25rem;
}

/* Modal High Contrast Styles */
.modal {
    color: var(--modal-text);
}

/* Note: Shadow moved from .modal-dialog to .modal-content to prevent vertical shadow extension */

.modal-content {
    background-color: var(--modal-bg) !important;
    border: 2px solid var(--modal-border);
    border-radius: var(--radius-button);
    color: var(--modal-text) !important;
    /* Shadow on modal-content, not modal-dialog - prevents vertical shadow extending beyond modal */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Modal Header — navy brand background with white text */
.modal-header {
    background: var(--primary-color, #000075) !important;
    border-bottom: 0px solid var(--modal-border);
    padding: var(--spacing-lg);
    color: white !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Match top corners of modal-content */
    border-radius: calc(var(--radius-button) - 2px) calc(var(--radius-button) - 2px) 0 0;
}

.modal-title {
    color: white !important;
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1;
    margin: 0;
}

.modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

/* Modal Close Button */
.btn-close-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #dc3545;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 16px;
    flex-shrink: 0;
    margin-left: auto;
}

.btn-close-circle:hover {
    background-color: #c82333;
    transform: scale(1.1);
}

.btn-close-circle:active {
    transform: scale(0.95);
}

.btn-close-circle i {
    margin: 0;
    line-height: 1;
}

/* Modal Body */
.modal-body {
    background-color: var(--modal-bg) !important;
    padding: var(--spacing-lg);
    color: var(--modal-text) !important;
    /* Bottom corners for modals without footer */
    border-radius: 0 0 calc(var(--radius-button) - 2px) calc(var(--radius-button) - 2px);
}

/* When modal has footer, body shouldn't have bottom radius */
.modal-body:has(+ .modal-footer) {
    border-radius: 0;
}

/* Modal Footer */
.modal-footer {
    background-color: var(--modal-footer-bg) !important;
    border-top: 2px solid var(--modal-border);
    padding: var(--spacing-lg);
    gap: var(--spacing-sm);
    color: var(--modal-text) !important;
    /* Match bottom corners of modal-content */
    border-radius: 0 0 calc(var(--radius-button) - 2px) calc(var(--radius-button) - 2px);
}

/* Modal Labels - High Contrast */
.modal label,
.modal .form-label,
.modal .bb-form-label,
.modal .blazor-bootstrap label,
.modal-body label,
.modal-content label,
.modal fieldset legend {
    color: var(--modal-text) !important;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--spacing-xs);
    display: block;
}

/* Modal Form Controls - High Contrast */
.modal .form-control,
.modal .form-select,
.modal .blazor-bootstrap .form-control,
.modal .blazor-bootstrap .form-select,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal input[type="tel"],
.modal input[type="url"],
.modal input[type="search"],
.modal input[type="date"],
.modal input[type="time"],
.modal input[type="datetime-local"],
.modal textarea,
.modal select {
    background-color: var(--modal-input-bg) !important;
    border: 2px solid var(--modal-input-border) !important;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
    color: var(--modal-text) !important;
    min-height: var(--touch-target-min);
    transition: border-color var(--transition-base);
}

.modal .form-control:focus,
.modal .form-select:focus,
.modal input:focus,
.modal textarea:focus,
.modal select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
    background-color: var(--modal-input-bg) !important;
    color: var(--modal-text) !important;
}

.modal .form-control::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
    color: var(--modal-text-secondary) !important;
    opacity: 0.7;
}

/* Modal Text Areas */
.modal textarea.form-control,
.modal textarea {
    min-height: 100px;
    resize: vertical;
}

/* Modal Select Options */
.modal select option,
.modal .form-select option {
    background-color: var(--modal-input-bg) !important;
    color: var(--modal-text) !important;
}

/* Modal Checkboxes and Radio Buttons */
.modal .form-check {
    margin-bottom: var(--spacing-md);
}

.modal .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    background-color: var(--modal-input-bg) !important;
    border: 2px solid var(--modal-input-border) !important;
}

.modal .form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.modal .form-check-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

.modal .form-check-label {
    color: var(--modal-text) !important;
    font-weight: 500;
    margin-left: var(--spacing-xs);
    font-size: 1rem;
}

/* Modal Input Groups */
.modal .input-group-text {
    background-color: var(--modal-header-bg) !important;
    border: 2px solid var(--modal-input-border) !important;
    color: var(--modal-text) !important;
    font-weight: 500;
}

/* Modal Buttons */
.modal .btn {
    min-height: var(--touch-target-min);
    font-weight: 600;
    border-radius: var(--radius-button);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
    border: 2px solid transparent;
    transition: all var(--transition-base);
}

.modal .btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.modal .btn-primary:hover,
.modal .btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: white !important;
}

.modal .btn-secondary {
    background-color: var(--modal-input-bg) !important;
    border-color: var(--modal-input-border) !important;
    color: var(--modal-text) !important;
}

/* ── Brand button consistency — ONE dark navy (#000075) for every primary/action button ──
   .btn-navy was previously defined ad-hoc inside individual card <style> blocks, so cards that
   used the class without redefining it (e.g. Dispersiones y Cuentas Bancarias) rendered as plain
   unstyled buttons. Promote it to a global style here, and remap Bootstrap's lighter .btn-primary
   (#0d6efd) + .btn-outline-primary to the brand navy so there is a single shade of blue across the
   admin. Brand: straight edges (border-radius: 0). See PayTable 2025 branding. */
.btn-navy,
.btn-primary {
    background-color: #000075 !important;
    border-color: #000075 !important;
    color: #fff !important;
    border-radius: 0;
}

.btn-navy:hover, .btn-navy:focus,
.btn-primary:hover, .btn-primary:focus {
    background-color: #000060 !important;
    border-color: #000060 !important;
    color: #fff !important;
}

.btn-navy:disabled, .btn-navy.disabled,
.btn-primary:disabled, .btn-primary.disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.btn-outline-navy,
.btn-outline-primary {
    color: var(--pt-navy-fg) !important;
    border-color: #000075 !important;
    background-color: transparent !important;
    border-radius: 0;
}

.btn-outline-navy:hover, .btn-outline-navy:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: #fff !important;
    background-color: #000075 !important;
    border-color: #000075 !important;
}

.modal .btn-secondary:hover,
.modal .btn-secondary:focus {
    background-color: var(--modal-header-bg) !important;
    border-color: var(--modal-text-secondary) !important;
    color: var(--modal-text) !important;
}

.modal .btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: white !important;
}

.modal .btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: white !important;
}

/* Modal Validation Messages */
.modal .text-danger,
.modal .invalid-feedback,
.modal .field-validation-error {
    color: var(--danger-color) !important;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: var(--spacing-xs);
    display: block;
}

.modal .text-success,
.modal .valid-feedback,
.modal .field-validation-valid {
    color: var(--success-color) !important;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: var(--spacing-xs);
    display: block;
}

.modal .text-warning {
    color: var(--warning-color) !important;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Modal Required Field Indicators */
.modal .required::after,
.modal .form-label.required::after {
    content: ' *';
    color: var(--danger-color) !important;
    font-weight: bold;
}

/* Modal Help Text */
.modal .form-text,
.modal .help-text,
.modal .text-muted {
    color: var(--modal-text-secondary) !important;
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
    font-weight: 400;
}

/* Modal Fieldsets and Legends */
.modal fieldset {
    border: 2px solid var(--modal-border);
    border-radius: var(--radius-button);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background-color: var(--modal-bg);
}

.modal legend {
    color: var(--modal-text) !important;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 0 var(--spacing-sm);
    background-color: var(--modal-bg);
}

/* Modal Tables */
.modal table {
    color: var(--modal-text) !important;
}

.modal table th {
    background-color: var(--modal-header-bg) !important;
    color: var(--modal-text) !important;
    border-color: var(--modal-border) !important;
}

.modal table td {
    color: var(--modal-text) !important;
    border-color: var(--modal-border) !important;
}

/* Modal Lists */
.modal ul,
.modal ol,
.modal li {
    color: var(--modal-text) !important;
}

/* Modal Paragraphs and Text — exclude header elements to preserve white-on-navy contrast */
.modal-body p,
.modal-body span,
.modal-body div:not(.btn):not(.form-control):not(.input-group-text),
.modal-footer p,
.modal-footer span {
    color: var(--modal-text) !important;
}

/* Modal Alerts */
.modal .alert {
    border: 2px solid;
    border-radius: var(--radius-button);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
}

.modal .alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
}

.modal .alert-success {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #16a34a !important;
}

.modal .alert-warning {
    background-color: #fffbeb !important;
    border-color: #fed7aa !important;
    color: #d97706 !important;
}

.modal .alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

/* Dark mode alert adjustments */
@media (prefers-color-scheme: dark) {
    .modal .alert-danger {
        background-color: #450a0a !important;
        border-color: #dc2626 !important;
        color: #fca5a5 !important;
    }

    .modal .alert-success {
        background-color: #064e3b !important;
        border-color: #16a34a !important;
        color: #86efac !important;
    }

    .modal .alert-warning {
        background-color: #451a03 !important;
        border-color: #d97706 !important;
        color: #fbbf24 !important;
    }

    .modal .alert-info {
        background-color: #1e3a8a !important;
        border-color: #2563eb !important;
        color: #93c5fd !important;
    }
}

/* ============================================
   Custom Overlay Modal Pattern (PayTable Standard)
   Used by centered modals throughout the app.
   Reference: WaiterConfigCard, Tables.razor
   ============================================ */

/* Overlay backdrop */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Modal container */
.custom-modal {
    background: var(--modal-bg, #ffffff);
    border-radius: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    /* Shared entrance — every standard-shell modal (migrated or not) animates in
       consistently. Bespoke modals opt in via the .modal-enter rule below. */
    animation: pt-modal-in 0.18s ease;
}

.custom-modal.modal-lg {
    max-width: 640px;
}

/* Modal header — navy background with white text */
.modal-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--primary-color, #000075);
    color: white;
}

.modal-header-custom.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.modal-header-custom.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.modal-header-custom h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: white;
}

/* Close button — square, semi-transparent */
.btn-close-custom {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.btn-close-custom:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Modal body */
.modal-body-custom {
    padding: 1.25rem;
    color: var(--modal-text, #000000);
    background: var(--modal-bg, #ffffff);
}

/* Modal footer */
.modal-footer-custom {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--modal-footer-bg, #f8f9fa);
    border-top: 1px solid var(--modal-border, #dee2e6);
}

/* Dark mode adjustments for custom modal */
@media (prefers-color-scheme: dark) {
    .modal-header-custom {
        background: var(--primary-color, #000075);
    }

    .modal-body-custom {
        background: var(--modal-bg, #1f2937);
        color: var(--modal-text, #ffffff);
    }

    .modal-footer-custom {
        background: var(--modal-footer-bg, #111827);
        border-color: var(--modal-border, #4b5563);
    }
}

/* Canonical modal primitive (Components/Util/Modal.razor) — §4 viewport-binding
   baked in: viewport-bound height with an internally-scrollable body so it never
   clips on short screens. Layers onto the shared .custom-modal look; existing
   hand-rolled modals are unaffected (they don't carry .pt-modal). */
.custom-modal.pt-modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    /* Entrance animation inherited from base .custom-modal. */
}

@keyframes pt-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* Bespoke modal dialog boxes (their own class names, no shared shell) opt into the
   SAME entrance so motion is consistent app-wide. Target the BOX, never the full-
   screen backdrop. Excludes: PIN modals (unique type), mobile .modal-sheet
   (separate mobile standard), and BlazorBootstrap modals (own fade). */
.pkg-modal,
.gm-picker,
.editor-panel,
.convert-lead-modal,
.scheduled-overlay,
.popup-content,
.bulk-assignment-modal,
.edit-workstation-modal {
    animation: pt-modal-in 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .custom-modal,
    .pkg-modal,
    .gm-picker,
    .editor-panel,
    .convert-lead-modal,
    .scheduled-overlay,
    .popup-content,
    .bulk-assignment-modal,
    .edit-workstation-modal {
        animation: none;
    }
}

.custom-modal.pt-modal > .modal-header-custom,
.custom-modal.pt-modal > .modal-footer-custom {
    flex-shrink: 0;
}

.custom-modal.pt-modal > .modal-body-custom {
    overflow-y: auto;
    min-height: 0;
}

/* PtModal immunity — a PtModal only renders when it is meant to be shown (it's
   gated on IsVisible), so its overlay must ALWAYS be visible & interactive. Several
   PIN/login modals ship UNSCOPED inline <style> blocks that globally redefine the
   shared `.modal-overlay` to `visibility:hidden` (visible only with their own
   `.visible` class) and `.custom-modal` to a `scale(0.9)` offset. Whenever one of
   those is mounted in the DOM alongside a PtModal, it would otherwise hide the
   PtModal popup (this is exactly what hid the tab-card "Imprimir" printer picker).
   These higher-specificity rules keep the canonical shell rendering regardless. */
.modal-overlay.pt-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-overlay.pt-overlay > .custom-modal.pt-modal {
    /* Entrance animation still plays (keyframes win while running); this only pins the
       resting transform so a leaked `.custom-modal { transform: scale(...) }` can't
       offset the dialog once the animation settles. */
    transform: none;
}

/* Restaurant Cards - Modern Design */
.restaurant-card {
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition-slow);
}

.restaurant-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.restaurant-card-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #475569 100%);
    color: white;
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.restaurant-header-icon {
    width: var(--touch-target-lg);
    height: var(--touch-target-lg);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.restaurant-header-content {
    flex-grow: 1;
}

.restaurant-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.btn-edit-restaurant {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(10px);
}

.btn-edit-restaurant:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.restaurant-card-body {
    padding: var(--spacing-lg);
}

.restaurant-image-container {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.restaurant-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.restaurant-card:hover .restaurant-image {
    transform: scale(1.02);
}

/* Logo Image Styles */
.logo-image-container {
    width: 128px;
    height: 128px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    border: 2px solid var(--border-color);
    background: var(--background-color);
}

.logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    color: var(--text-muted);
    background: var(--background-color);
}

.logo-placeholder i {
    font-size: 2rem;
    opacity: 0.5;
}

.logo-placeholder span {
    font-size: 0.75rem;
    font-weight: 500;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    font-style: italic;
}

.form-section {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--spacing-xs);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.form-control {
    background-color: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-input);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
    color: var(--text-primary);
    min-height: var(--touch-target-min);
    transition: border-color var(--transition-base);
    width: 100%;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.file-upload-container {
    margin-top: var(--spacing-sm);
}

.info-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.info-value.featured {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pt-navy-fg);
}

.info-value.description {
    line-height: 1.6;
    color: var(--text-secondary);
}

.info-value.contact {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-primary);
}

.info-value.contact i {
    color: var(--pt-navy-fg);
    font-size: 0.875rem;
}

.info-value.link a {
    color: var(--pt-navy-fg);
    text-decoration: none;
    transition: color var(--transition-base);
}

.info-value.link a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.loading-placeholder {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.placeholder-line {
    height: 1rem;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--background-color) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: shimmer 1.5s infinite;
    width: 100%;
}

.placeholder-line.small {
    width: 60%;
}

.placeholder-line.medium {
    width: 80%;
}

.placeholder-line.large {
    height: 1.5rem;
}

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

.form-actions {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: var(--touch-target-min);
    font-weight: 600;
    border-radius: var(--radius-button);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
    border: 2px solid transparent;
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Validation Messages.
   This themed rule was dead until GH-29: the Blazor scaffold block further down redeclared
   `.validation-message { color: red }` at equal specificity and later source order, so only
   the colour was clobbered while the sizing and spacing here still applied. The scaffold
   copy is gone; this is now the single definition.
   Colour comes from --pt-field-invalid rather than --danger-color so it lifts on the dark
   surface — --danger-color stays #ef4444 in dark, which is too dim to read as an alert. */
.validation-message {
    color: var(--pt-field-invalid-text, var(--danger-color));
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: var(--spacing-xs);
    display: block;
}

/* Menu Creation Card */
.menu-creation-card {
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition-slow);
    max-width: 400px;
    margin: 0 auto;
}

/* No :hover lift on the creation card. It is a static container, not an actionable target —
   translateY(-2px) + shadow-xl made the whole "Crear" panel rise whenever the cursor crossed
   it, which reads as "this is clickable" when only the controls inside it are. The buttons and
   inputs within keep their own hover states. */

.creation-card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: center;
}

.creation-header-icon {
    width: var(--touch-target-lg);
    height: var(--touch-target-lg);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.creation-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

.creation-card-body {
    padding: var(--spacing-lg);
}

.creation-actions-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.creation-action-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: var(--touch-target-lg);
}

.creation-action-compact:hover {
    background: var(--surface-color);
    border-color: var(--primary-color);
    transform: translateX(2px);
    box-shadow: var(--shadow-md);
}

/* Adjust modal backdrop for better visual separation */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.action-icon-wrapper {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.action-icon-menu {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}

.action-icon-category {
    background: linear-gradient(135deg, var(--warning-color) 0%, #b45309 100%);
}

.action-icon-item {
    background: linear-gradient(135deg, var(--success-color) 0%, #047857 100%);
}

.action-content-compact {
    flex-grow: 1;
}

.action-title-compact {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.action-arrow {
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.creation-action-compact:hover .action-arrow {
    color: var(--pt-navy-fg);
    transform: translateX(2px);
}

.creation-quick-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--background-color);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-xl);
    height: var(--touch-target-xl);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.quick-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.quick-action-menu {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}

.quick-action-category {
    background: linear-gradient(135deg, var(--warning-color) 0%, #b45309 100%);
}

.quick-action-item {
    background: linear-gradient(135deg, var(--success-color) 0%, #047857 100%);
}

/* Menu Display Card - Compact Design */
.menu-display-card {
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.display-card-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #475569 100%);
    color: white;
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.display-header-icon {
    width: var(--touch-target-lg);
    height: var(--touch-target-lg);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.display-header-content {
    flex-grow: 1;
}

.display-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.display-card-body {
    padding: var(--spacing-md);
}

.modern-tabs-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.menu-tab-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-color);
}

.menu-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--background-color);
    cursor: pointer;
    transition: all var(--transition-base);
    border-bottom: 1px solid var(--border-color);
    min-height: var(--touch-target-lg);
}

.menu-tab-header:hover {
    background: var(--surface-color);
}

.menu-tab-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-grow: 1;
}

.menu-tab-icon {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: var(--primary-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.menu-tab-content {
    flex-grow: 1;
    min-width: 0;
}

.menu-tab-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-tab-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: var(--spacing-xs) 0 0 0;
}

.menu-tab-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Edit Buttons - Cohesive Color Scheme */
.btn-edit-menu,
.btn-edit-category {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-secondary);
}

.btn-edit-menu:hover,
.btn-edit-category:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.menu-expand-indicator,
.category-expand-indicator {
    transition: transform var(--transition-slow);
    color: var(--text-secondary);
    font-size: 1.125rem;
}

.menu-expand-indicator.expanded,
.category-expand-indicator.expanded {
    transform: rotate(180deg);
}

/* Collapsible body uses an animatable grid row (0fr -> 1fr) instead of a fixed
   max-height cap. The old `max-height: 3000px` clipped menus whose expanded
   categories summed past the cap ("can't see all items / remaining categories");
   this animates the TRUE content height with no ceiling. */
/* Collapse/expand uses the grid-template-rows 0fr->1fr technique.
   IMPORTANT: the rows must be minmax(0, …), not a bare 0fr. A bare `0fr` behaves as
   `minmax(auto, 0fr)`, and that `auto` minimum is floored by the grid item's min-content
   contribution. `.categories-container` carries `padding: var(--spacing-sm)` (0.5rem, so 16px
   top+bottom), and `min-height: 0` only zeroes its CONTENT box — the padding still counts.
   So the collapsed row could never reach 0 and left a ~16px sliver through which the top of
   the first category bled. minmax(0, 0fr) forces the floor to 0. */
.menu-tab-content {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    transition: grid-template-rows var(--transition-slow);
}

.menu-tab-content.expanded {
    grid-template-rows: minmax(0, 1fr);
}

.menu-tab-content > .categories-container {
    min-height: 0;
    overflow: hidden;
}

.categories-container {
    padding: var(--spacing-sm);
}

.category-section {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--background-color);
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: var(--touch-target-min);
}

.category-header:hover {
    background: var(--surface-color);
}

.category-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-grow: 1;
}

.category-icon {
    width: 32px;
    height: 32px;
    background: var(--warning-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.category-content {
    flex-grow: 1;
    min-width: 0;
}

.category-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-description {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin: var(--spacing-xs) 0 0 0;
}

.category-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Same animatable-grid-row technique as .menu-tab-content — the inner content is
   wrapped in .category-items-inner so a single grid child collapses/expands to
   its true height (the old `max-height: 2000px` clipped categories with many items). */
.category-items-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--transition-slow);
}

.category-items-content.expanded {
    grid-template-rows: 1fr;
}

.category-items-content > .category-items-inner {
    min-height: 0;
    overflow: hidden;
}

.menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.menu-item-wrapper {
    width: 100%;
    height: 100%;
}

.menu-item-wrapper .modern-menu-item-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.empty-category-state,
.empty-menu-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
}

.empty-category-icon,
.empty-menu-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.empty-category-text,
.empty-menu-text {
    margin: 0;
    font-size: 0.875rem;
}

/* Modern Alerts - Compact */
.modern-alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
}

.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.alert-icon {
    font-size: 1rem;
}

.alert-content {
    font-weight: 500;
}

/* Menu Item Card - Compact */
.modern-menu-item-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-slow);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modern-menu-item-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

/* GH-32: square, matching the guest menu list (payTableVue MenuItemCard ~1:1), the admin order
   flow (ItemCustomizationModal 120x120) and the upload preview. This was a fixed 120px tall
   strip spanning the full card width — a wide landscape crop of a photo the guest sees as a
   square, so the admin menu page showed a framing no guest ever gets. */
.menu-item-image-container {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

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

.modern-menu-item-card:hover .menu-item-image {
    transform: scale(1.05);
}

.menu-item-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--background-color) 0%, var(--border-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}

.menu-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.modern-menu-item-card:hover .menu-item-overlay {
    opacity: 1;
}

.edit-overlay-btn {
    width: var(--touch-target-lg);
    height: var(--touch-target-lg);
    background: var(--primary-color);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
}

.edit-overlay-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}

.menu-item-card-body {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.menu-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.menu-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    flex-grow: 1;
    margin-right: var(--spacing-sm);
}

.menu-item-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--success-color);
    flex-shrink: 0;
}

.menu-item-description {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0 0 var(--spacing-sm) 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: var(--spacing-sm);
}

.menu-item-category {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-muted);
    font-size: 0.625rem;
    background: var(--background-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Responsive Design - Compact */
@media (max-width: 768px) {
    .menu-items-grid {
        grid-template-columns: 1fr;
    }

    .creation-action-compact {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .menu-tab-header,
    .category-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
        padding: var(--spacing-md);
    }

    .menu-tab-info,
    .category-info {
        flex-direction: column;
        text-align: center;
    }

    .display-card-body,
    .restaurant-card-body {
        padding: var(--spacing-sm);
    }

    .restaurant-card-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
}

/* Focus styles for accessibility */
.creation-action-compact:focus,
.menu-tab-header:focus,
.category-header:focus,
.btn-edit-menu:focus,
.btn-edit-category:focus,
.btn-edit-restaurant:focus,
.form-control:focus,
.btn:focus,
.modal .form-control:focus,
.modal .form-select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

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

/* original css */

.personalization-container {
    padding: 1rem;
    background-color: #160B33;
    color: #fff;
    border-radius: 0.25rem;
}
@media (prefers-color-scheme: light) {
    .personalization-container {
        background-color: #94a3b8;
    }
}
.modification-container {
    padding: 1rem;
    background-color: #1b6ec2;
    color: #fff;
    border-radius: 0.75rem;
}
@media (prefers-color-scheme: dark) {
    .modification-container {
        background-color: #1b6ec2;
    }
}

.card-img-top {
    width: 100%;
    /*height: 15vh;*/
    height: 150px;
    object-fit: cover;
}
/* The Blazor project-template scaffold block used to live here with raw `red` / `#26b050`
   literals. Its `.validation-message { color: red }` silently clobbered the themed rule at
   ~:1404 (equal specificity, later source order), and its 1px OUTLINE sat outside the field's
   own 2px border, reading as a faint halo rather than "this field is wrong" — GH-29.
   Themed and promoted to the field border in the FIELD STATES block further down, which must
   come after the field rules to win on source order. Reference implementation:
   payTable.Support.UI/wwwroot/css/app.css:83-93. */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.navbar-color {
    background-color: #160B33;
}

.header-logo-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.navbar-brand {
    color: #fff;
} 

.nav-link {
    color: #9d9fa6;
}

.navbar-nav .nav-link.active {
    color: #ffffff;
}

/* ===== ORDER MODALS SHARED STYLES ===== */

/* Base Modal Styles */
.modal-xl {
    max-width: 1200px;
}

/* ===== CREATE ORDER MODAL STYLES ===== */

/* Menu Search */
.menu-search {
    /* Match the .menu-categories horizontal inset so the search bar lines up with
       the item cards below it. */
    padding: 0 0.75rem;
}

.menu-search .input-group {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.input-group-text {
    background-color: #e9ecef;
    border: 2px solid #ced4da;
    color: #495057;
    font-weight: 500;
}

/* Category Sections — SCOPED to .order-panel to end a class-name collision.
   The menu-management display (≈line 1676) uses identically-named .category-section /
   .category-title / .menu-items-grid as BARE selectors, so the cascade merged its
   border + rounded corners + nowrap/ellipsis into the create-order grid (and the
   create-order grid's 180px columns leaked back into the menu-management grid).
   Scoping under .order-panel + explicitly resetting the leaked props isolates both. */
.order-panel .category-section {
    margin-bottom: 2rem;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.order-panel .category-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #212529;
    border-bottom: 3px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.order-panel .category-title i {
    color: var(--pt-coral, #ec607e);
    font-size: 0.95rem;
}

/* Menu Items Grid - Compact for Admin */
.order-panel .menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 0;
}

.menu-item-card {
    border: 2px solid #dee2e6;
    border-radius: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #212529;
}

.menu-item-card:hover {
    border-color: #0066cc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
    background: #f8faff;
}

.menu-item-card .item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.menu-item-card .item-name {
    font-weight: 600;
    color: #212529;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.3;
    text-align: left;
}

/* No Menu Items State */
.no-menu-items {
    text-align: center;
    color: #495057;
    font-weight: 600;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 0;
    border: 2px solid #e9ecef;
}

.no-menu-items i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

/* Order Summary */
.order-summary {
    background: #f8f9fa;
    border-radius: 0;
    padding: 1rem;
    height: fit-content;
    position: sticky;
    top: 20px;
    border: 2px solid #dee2e6;
    color: #212529;
}

.summary-title {
    color: #212529;
    border-bottom: 3px solid #dee2e6;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.order-items {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.order-item {
    background: #ffffff;
    border: 2px solid #dee2e6;
    border-radius: 0;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    color: #212529;
}

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

.item-header .item-name {
    font-weight: 700;
    color: #212529;
}

.item-header .item-price {
    font-weight: 700;
    color: #198754;
}

.item-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
    color: #212529;
    background: #e9ecef;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    border: 1px solid #ced4da;
}

.item-customizations {
    margin-bottom: 0.5rem;
}

.customization {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #ced4da;
    transition: all var(--transition-base);
}

@media (prefers-color-scheme: dark) {
    .customization {
        background: #343a40;
        color: #e9ecef;
        border-color: #495057;
    }
}

.empty-order {
    text-align: center;
    color: #495057;
    padding: 2rem;
    background: #ffffff;
    border-radius: 0;
    border: 2px solid #dee2e6;
    font-weight: 600;
}

.empty-order i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.order-totals {
    border-top: 3px solid #dee2e6;
    padding-top: 1rem;
    background: #e8f5e8;
    margin: -1rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0;
}

.total-items, .total-price {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    color: #155724;
    font-weight: 600;
}

.total-price {
    font-size: 1.2rem;
    font-weight: 700;
}

/* ===== TAB SELECTION CONTROLS ===== */

/* Container for panel header controls */
.panel-header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Tab selection dropdown */
.tab-select {
    min-width: 200px;
    max-width: 280px;
    padding: 0.375rem 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 0;
    background: #ffffff;
    color: #212529;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tab-select:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.tab-select:hover {
    border-color: #adb5bd;
}

/* Customer name inputs */
.customer-name-input {
    width: 120px;
    padding: 0.375rem 0.5rem;
    border: 2px solid #dee2e6;
    border-radius: 0;
    background: #ffffff;
    color: #212529;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.customer-name-input:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.customer-name-input::placeholder {
    color: #6c757d;
    font-weight: 400;
}

/* Table label */
.table-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
    white-space: nowrap;
}

/* Dark mode for tab selection controls */
@media (prefers-color-scheme: dark) {
    .tab-select {
        background: #2c3034;
        border-color: #495057;
        color: #f8f9fa;
    }

    .tab-select:focus {
        border-color: #0d6efd;
    }

    .tab-select:hover {
        border-color: #6c757d;
    }

    .customer-name-input {
        background: #2c3034;
        border-color: #495057;
        color: #f8f9fa;
    }

    .customer-name-input:focus {
        border-color: #0d6efd;
    }

    .customer-name-input::placeholder {
        color: #ced4da;
    }

    .table-label {
        color: #ced4da;
    }
}

/* Responsive adjustments for tab selection */
@media (max-width: 768px) {
    .panel-header-controls {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .tab-select {
        min-width: 150px;
        flex: 1;
    }

    .customer-name-input {
        width: 100px;
    }
}

@media (max-width: 576px) {
    .panel-header-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .tab-select {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }

    .customer-name-input {
        width: 100%;
    }
}

/* Table Number Input */
.table-number-input {
    display: inline-block;
    width: 70px;
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
    border: 2px solid #dee2e6;
    border-radius: 0;
    background: #ffffff;
    color: #212529;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    transition: border-color 0.2s;
}

.table-number-input:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Dark mode for table number input */
@media (prefers-color-scheme: dark) {
    .table-number-input {
        background: #2c3034;
        border-color: #495057;
        color: #f8f9fa;
    }

    .table-number-input:focus {
        border-color: #0d6efd;
    }
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .table-number-input {
        border-width: 3px;
    }
}

/* ===== ITEM CUSTOMIZATION MODAL STYLES ===== */

/* Item Preview */
.item-preview {
    margin-bottom: 1rem;
}

.item-preview .item-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0;
    border: 2px solid #e9ecef;
}

.price {
    font-weight: 700;
    color: #198754;
    font-size: 1.2rem;
    background: #e8f5e8;
    padding: 0.5rem;
    border-radius: 0;
    border: 2px solid #c3e6cb;
}

/* Customizations Section */
.customizations-section {
    margin-bottom: 1.5rem;
}

.modifier-category {
    border: 2px solid #dee2e6;
    border-radius: 0;
    padding: 1rem;
    background: #f8f9fa;
    color: #212529;
    margin-bottom: 1rem;
}

.modifier-category .category-title {
    color: #495057;
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
    font-size: 1rem;
}

.modifier-item {
    background: #ffffff;
    border: 2px solid #e9ecef;
    border-radius: 0;
    padding: 1rem;
    color: #212529;
    margin-bottom: 0.5rem;
}

.modifier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.modifier-name {
    font-weight: 700;
    color: #212529;
}

.modifier-price {
    color: #198754;
    font-weight: 700;
    font-size: 0.9rem;
    background: #e8f5e8;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    border: 1px solid #c3e6cb;
}

.modifier-description {
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.modifier-options {
    margin-top: 0.5rem;
}

.form-check {
    margin-bottom: 0.5rem;
}

.form-check-label {
    color: #212529;
    font-weight: 500;
}

.option-price {
    color: #198754;
    font-weight: 700;
    font-size: 0.85rem;
    margin-left: 0.5rem;
    background: #e8f5e8;
    padding: 0.1rem 0.3rem;
    border-radius: 0;
    border: 1px solid #c3e6cb;
}

/* Quantity Section */
.quantity-section {
    margin-bottom: 1.5rem;
}

.quantity-display {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
    color: #212529;
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: 0;
    border: 2px solid #dee2e6;
}

/* Total Section */
.total-section {
    background: #e8f5e8;
    padding: 1.5rem;
    border-radius: 0;
    margin-top: 1rem;
    text-align: right;
    border: 2px solid #c3e6cb;
}

.total-section .total-price {
    font-size: 1.4rem;
    color: #155724;
    font-weight: 700;
}

/* ===== FORM CONTROLS =====
   Colours come from the --pt-field-* tokens so text inputs, native selects and the
   BlazorBootstrap dropdown-buttons share one definition. Values are unchanged — the tokens
   were seeded with exactly what was hardcoded here. */
.form-control {
    background-color: var(--pt-field-bg);
    border: 2px solid var(--pt-field-border);
    color: var(--pt-field-text);
    font-weight: 500;
}

.form-control:focus {
    background-color: var(--pt-field-bg);
    border-color: var(--pt-field-focus);
    color: var(--pt-field-text);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ---- UNIVERSAL FIELD DROPDOWNS (GH-26) ----
   A field that opens a list must look identical to a field you type into, whichever mechanism
   renders it. Applies to native selects AND the BlazorBootstrap <Dropdown> toggle buttons,
   which otherwise inherit .btn-secondary's grey fill.
   Matches .form-control on the properties that make two fields read as the same control:
   fill, 2px border, text colour, weight, radius and min-height. .form-control's geometry is
   declared at the FIRST .form-control block (~:1218) — the tokenised block just above only
   restates colour. Radius is the same var(--radius-input) that block uses; height is
   var(--pt-field-min-height) (44px), which is .form-control's MEASURED computed height, not
   its 40px min-height declaration. See that token's note.
   Padding is deliberately NOT matched: Bootstrap gives .form-select an asymmetric
   right-padding to clear the caret glyph, and copying .form-control's symmetric padding
   would let the arrow overlap the label text.

   SCOPED to the two ADMIN layout roots on purpose. app.css has no layout scoping anywhere
   else, which is how admin rules have repeatedly leaked onto the Mesero surface (see
   docs/architecture/webapp-surface-boundary-contract.md). Mesero styles its single select
   itself in MobileNewOrder's own <style>; .empty-layout must not match here. .public-layout
   IS included — the login / register / reset screens have real form fields.
   No !important: Bootstrap (index.html:119) and Blazor.Bootstrap (:143) both load BEFORE
   app.css (:146), so source order already wins, and these selectors are (0,2,0) against
   .btn-secondary's (0,1,0). */
.app-layout select,
.app-layout .form-select,
.app-layout .field-dropdown-toggle,
.public-layout select,
.public-layout .form-select,
.public-layout .field-dropdown-toggle {
    background-color: var(--pt-field-bg);
    border: 2px solid var(--pt-field-border);
    color: var(--pt-field-text);
    font-weight: 500;
    min-height: var(--pt-field-min-height);
    border-radius: var(--radius-input);
}

.app-layout select:focus,
.app-layout .form-select:focus,
.app-layout .field-dropdown-toggle:focus,
.public-layout select:focus,
.public-layout .form-select:focus,
.public-layout .field-dropdown-toggle:focus {
    border-color: var(--pt-field-focus);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: none;
}

/* The dropdown-button is a <button>, so Bootstrap's .btn-secondary also colours its hover and
   its open (aria-expanded) state. Hold the field appearance through both — a field must not
   turn grey because the cursor crossed it. Hover edge uses --pt-hover-border, matching every
   other interactive edge in the app. */
.app-layout .field-dropdown-toggle:hover,
.app-layout .field-dropdown-toggle.show,
.app-layout .field-dropdown-toggle[aria-expanded="true"],
.public-layout .field-dropdown-toggle:hover,
.public-layout .field-dropdown-toggle.show,
.public-layout .field-dropdown-toggle[aria-expanded="true"] {
    background-color: var(--pt-field-bg);
    border-color: var(--pt-hover-border);
    color: var(--pt-field-text);
}

/* Bootstrap paints .form-select's caret as a dark SVG data-URI, which disappears on the dark
   field surface. Repaint it light in dark mode. */
@media (prefers-color-scheme: dark) {
    .app-layout .form-select,
    .public-layout .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8f9fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}

/* ---- FIELD STATES (GH-29) ----
   Blazor stamps `invalid` / `valid modified` on every InputBase-derived control inside an
   EditForm, so this reaches all 8 EditForm files and nothing else — Mesero has zero EditForm.
   Scoped to the admin roots anyway, per the boundary contract.

   MUST stay after the field rules above: `.app-layout .invalid` and `.app-layout .form-select`
   are both (0,2,0), so source order is the tiebreak. Moving this block earlier silently
   restores the grey/neutral border on invalid fields. */
.app-layout .invalid,
.public-layout .invalid {
    border-color: var(--pt-field-invalid);
    /* The template used a 1px OUTLINE, which draws outside the field's own 2px border and
       reads as a faint halo. Recolouring the border itself is what Cam asked for. */
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--pt-field-invalid-ring);
}

/* An invalid field that is also focused keeps the ERROR colour: "this is wrong" outranks
   "this is where you are".
   It must ALSO keep a focus indicator. The `outline: none` above is (0,2,0) and lands after
   `.form-control:focus { outline: 2px solid var(--primary-color) }` (~:2153, also (0,2,0)), so
   it was winning on source order and stripping the outline from focused invalid fields — the
   only remaining difference between "invalid" and "invalid AND focused" was a 0.8px ring of
   the same red. A keyboard user tabbing between flagged fields could not tell where they were.
   Re-assert the navy outline here: it sits OUTSIDE the red 2px border, so both cues coexist. */
.app-layout .invalid:focus,
.public-layout .invalid:focus {
    border-color: var(--pt-field-invalid);
    box-shadow: 0 0 0 0.25rem var(--pt-field-invalid-ring);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* BlazorBootstrap's <Modal> emits class="modal fade", and `.modal .form-control` (~:552) sets
   `border: ... !important`, which outranks the non-important rule above. Inside EditCategoryModal
   / EditMenuModal / EditWorkStationModal an invalid field therefore kept its neutral border and
   showed only the ring. Match the !important to restore the red edge in those three. */
.modal .invalid {
    border-color: var(--pt-field-invalid) !important;
}

/* Preserved from the scaffold block, themed rather than a raw literal. */
.app-layout .valid.modified:not([type=checkbox]),
.public-layout .valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success-color, #26b050);
}

/* A disabled select must still READ as disabled. The universal field rule above is (0,2,0) and
   ties Bootstrap's .form-select:disabled, winning on source order — so disabled selects kept the
   enabled white fill while the text input beside them greyed out. (0,3,0) settles it. */
.app-layout select:disabled,
.app-layout .form-select:disabled,
.app-layout .field-dropdown-toggle:disabled,
.public-layout select:disabled,
.public-layout .form-select:disabled,
.public-layout .field-dropdown-toggle:disabled {
    background-color: var(--pt-field-disabled-bg);
}

/* ---- PtValidationSummary (GH-29) ----
   The single error surface for a form, rendered at the TOP of the EditForm. Replaces the
   pattern of an alert-danger sitting below the last field, where a failed save was invisible
   without scrolling. Straight edges per brand.
   SCOPED to the admin roots like every other rule in this section. These five blocks shipped
   unscoped and were measured applying inside .empty-layout and .cfd-layout — the same boundary
   violation the GH-26 half of that commit was careful to avoid. PtValidationSummary is an
   admin/EditForm primitive; Mesero has zero EditForm. */
.app-layout .pt-validation-summary,
.public-layout .pt-validation-summary {
    background-color: var(--pt-validation-summary-bg);
    border: 2px solid var(--pt-field-invalid);
    border-radius: var(--radius-input);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.app-layout .pt-validation-summary__title,
.public-layout .pt-validation-summary__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--pt-validation-summary-text);
}

.app-layout .pt-validation-summary__title i,
.public-layout .pt-validation-summary__title i {
    color: var(--pt-field-invalid);
}

.app-layout .pt-validation-summary__list,
.public-layout .pt-validation-summary__list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    color: var(--pt-validation-summary-text);
}

.app-layout .pt-validation-summary__list li + li,
.public-layout .pt-validation-summary__list li + li {
    margin-top: 0.25rem;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 0.8;
    font-weight: 500;
}

.form-check-input {
    width: 1.25em;
    height: 1.25em;
    border: 2px solid #6c757d;
    background-color: #ffffff;
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ===== DARK MODE STYLES ===== */
@media (prefers-color-scheme: dark) {
    /* Modal Base */
    .modal-content {
        background-color: #212529;
        color: #f8f9fa;
        border: 2px solid #495057;
    }

    .modal-header {
        background: var(--primary-color, #000075) !important;
        color: white !important;
    }

    .modal-footer {
        background-color: #343a40;
        border-color: #495057;
    }

    .modal-title {
        color: white !important;
    }

    /* Search and Categories */
    .input-group-text {
        background-color: #495057;
        border-color: #6c757d;
        color: #f8f9fa;
    }

    .order-panel .category-title {
        color: #f8f9fa;
        border-bottom-color: #495057;
    }

    /* Menu Items - Dark Mode */
    .menu-item-card {
        border-color: #495057;
        background: #2c3034;
        color: #f8f9fa;
    }

    .menu-item-card:hover {
        border-color: #0d6efd;
        box-shadow: 0 2px 8px rgba(255,255,255,0.08);
        background: #363b41;
    }

    .menu-item-card .item-name {
        color: #f8f9fa;
    }

    .price {
        color: #20c997;
        background: #1a4d3a;
        border-color: #2d5a44;
    }

    /* No Items State */
    .no-menu-items {
        color: #ced4da;
        background: #343a40;
        border-color: #495057;
    }

    /* Order Summary */
    .order-summary {
        background: #343a40;
        border-color: #495057;
        color: #f8f9fa;
    }

    .summary-title {
        color: #f8f9fa;
        border-bottom-color: #495057;
    }

    .order-item {
        background: #2c3034;
        border-color: #495057;
        color: #f8f9fa;
    }

    .item-header .item-name {
        color: #f8f9fa;
    }

    .item-header .item-price {
        color: #20c997;
    }

    .quantity {
        color: #f8f9fa;
        background: #495057;
        border-color: #6c757d;
    }

    .quantity-display {
        color: #f8f9fa;
        background: #343a40;
        border-color: #495057;
    }

    .customization {
        background: #495057;
        color: #ced4da;
        border-color: #6c757d;
    }

    .empty-order {
        color: #ced4da;
        background: #2c3034;
        border-color: #495057;
    }

    .order-totals {
        border-top-color: #495057;
        background: #1a4d3a;
        color: #20c997;
    }

    .total-items, .total-price {
        color: #20c997;
    }

    .total-section {
        background: #1a4d3a;
        border-color: #2d5a44;
    }

    .total-section .total-price {
        color: #20c997;
    }

    /* Modifiers */
    .modifier-category {
        border-color: #495057;
        background: #343a40;
        color: #f8f9fa;
    }

    .modifier-category .category-title {
        color: #f8f9fa;
        border-bottom-color: #495057;
    }

    .modifier-item {
        background: #2c3034;
        border-color: #495057;
        color: #f8f9fa;
    }

    .modifier-name {
        color: #f8f9fa;
    }

    .modifier-price, .option-price {
        color: #20c997;
        background: #1a4d3a;
        border-color: #2d5a44;
    }

    .modifier-description {
        color: #ced4da;
    }

    .form-check-label {
        color: #f8f9fa;
    }

    /* Form Controls — these previously hardcoded the same four values the --pt-field-* tokens
       now carry (GH-26). Left in place rather than deleted because source order still matters
       for anything that overrides .form-control later, but pointed at the tokens so the dark
       palette has ONE definition. Visually identical to what shipped before. */
    .form-control {
        background-color: var(--pt-field-bg);
        border-color: var(--pt-field-border);
        color: var(--pt-field-text);
    }

    .form-control:focus {
        background-color: var(--pt-field-bg);
        border-color: var(--pt-field-focus);
        color: var(--pt-field-text);
    }

    .form-control::placeholder {
        color: #ced4da;
    }

    .form-check-input {
        background-color: #2c3034;
        border-color: #6c757d;
    }

    .text-muted {
        color: #ced4da !important;
    }

    hr {
        border-color: #495057;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: more) {
    .menu-item-card,
    .order-summary,
    .order-item,
    .modifier-category,
    .modifier-item,
    .total-section,
    .form-control,
    .modal-content {
        border-width: 3px;
    }

    .category-title,
    .summary-title,
    .order-totals {
        border-bottom-width: 4px;
    }

    .item-image {
        border-width: 3px;
    }
}
/* ===== MODIFIER OPTIONS GRID STYLES ===== */

.modifier-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.option-container {
    background: #ffffff;
    border: 2px solid #dee2e6;
    border-radius: 0;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.option-container:hover {
    border-color: #0066cc;
    background: #f8f9ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.option-container.selected {
    border-color: #0066cc;
    background: #e7f3ff;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
}

.option-container.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    color: #0066cc;
    font-weight: 700;
    font-size: 1.1rem;
}

.option-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.option-name {
    font-weight: 600;
    color: #212529;
    font-size: 0.95rem;
    line-height: 1.3;
    word-wrap: break-word;
    hyphens: auto;
}

.option-container .option-price {
    color: #198754;
    font-weight: 700;
    font-size: 0.85rem;
    background: #e8f5e8;
    padding: 0.15rem 0.4rem;
    border-radius: 0;
    border: 1px solid #c3e6cb;
    margin-top: 0.25rem;
}

/* ===== DARK MODE STYLES FOR MODIFIER OPTIONS ===== */
@media (prefers-color-scheme: dark) {
    .option-container {
        background: #2c3034;
        border-color: #495057;
    }

    .option-container:hover {
        border-color: #0d6efd;
        background: #1a1d23;
        box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
    }

    .option-container.selected {
        border-color: #0d6efd;
        background: #1a2332;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3);
    }

    .option-container.selected::after {
        color: #66b3ff;
    }

    .option-name {
        color: #f8f9fa;
    }

    .option-container .option-price {
        color: #20c997;
        background: #1a4d3a;
        border-color: #2d5a44;
    }
}

/* ===== HIGH CONTRAST MODE FOR MODIFIER OPTIONS ===== */
@media (prefers-contrast: more) {
    .option-container {
        border-width: 3px;
    }

    .option-container.selected {
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4);
    }

    .option-container .option-price {
        border-width: 2px;
    }
}

/* ===== RESPONSIVE GRID FOR SMALL SCREENS ===== */
@media (max-width: 576px) {
    .modifier-options-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .option-container {
        min-height: 60px;
        padding: 0.75rem;
    }

    .option-name {
        font-size: 0.9rem;
    }

    .option-container .option-price {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) and (min-width: 577px) {
    .modifier-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ===== ORDER CARD STYLES ===== */
.order-card {
    background: #ffffff;
    border: 2px solid #e9ecef;
    border-radius: 0;
    border-bottom: 3px solid var(--pt-coral, #ec607e);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-width: 256px;
    width: 320px;
    max-width: 400px;
    height: 100%;
    max-height: calc(100vh - 250px);
    padding: 1.25rem;
    margin: 0;
    box-sizing: border-box;
}

.order-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f8f9fa;
    flex-shrink: 0;
}

.order-header h4 {
    margin: 0;
    color: #495057;
    font-size: 1.4rem;
    font-weight: 600;
}

.order-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.order-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cash-payment-badge,
.order-waiter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0;
}

.cash-payment-badge {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.order-waiter-badge {
    background: #e8f4f8;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.order-time {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.order-items {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
    min-height: 0;
    max-height: calc(100vh - 400px);
}

.order-items::-webkit-scrollbar {
    width: 4px;
}

.order-items::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0;
}

.order-items::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 0;
}

.order-item {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 0;
    border-left: 4px solid #007bff;
}

.item-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: #212529;
    flex-wrap: wrap;
}

.quantity {
    background: #007bff;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 700;
    min-width: fit-content;
    flex-shrink: 0;
}

.item-price {
    margin-left: auto;
    font-weight: 700;
    color: #28a745;
    font-size: 1rem;
    flex-shrink: 0;
}

.customizations {
    margin-top: 0.5rem;
    padding-left: 0.75rem;
}

.customization {
    margin-bottom: 0.5rem;
}

.customization-name {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.modifier-options {
    margin-left: 1rem;
    margin-top: 0.25rem;
}

.modifier-option {
    display: inline-block;
    background: #e9ecef;
    padding: 0.2rem 0.5rem;
    margin: 0.1rem 0.2rem 0.1rem 0;
    border-radius: 0;
    font-size: 0.8rem;
    color: #495057;
}

.option-price {
    color: #28a745;
    font-weight: 600;
    margin-left: 0.25rem;
}

.order-footer {
    flex-shrink: 0;
    padding-top: 0.75rem;
    border-top: 2px solid #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.order-total {
    font-size: 1.2rem;
    font-weight: 700;
    color: #212529;
}

.order-status-completed {
    background: #d4edda;
    color: #155724;
    padding: 0.4rem 0.8rem;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #c3e6cb;
    flex-shrink: 0;
}

.order-status-pending {
    background: #fff3cd;
    color: #856404;
    padding: 0.4rem 0.8rem;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #ffeaa7;
    flex-shrink: 0;
}

.order-status-ready {
    background: #d1ecf1;
    color: #0c5460;
    padding: 0.4rem 0.8rem;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #bee5eb;
    flex-shrink: 0;
    animation: pulseReady 2s ease-in-out infinite;
}

@keyframes pulseReady {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.order-actions-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.order-actions-modal.show {
    opacity: 1;
    visibility: visible;
}

/* Order actions modal specific content - uses scoped selector to avoid overriding global .modal-content */
.order-actions-modal .modal-content {
    background: white;
    padding: 2rem;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 300px;
}

.order-actions-modal .modal-content h5 {
    margin: 0 0 1.5rem 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #212529;
    text-align: center;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-buttons .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
    transform: translateY(-1px);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}
/* Responsive adjustments to ensure 40px buffer */
@media (max-width: 1200px) {
    .order-card {
        width: 280px;
        min-width: 224px;
        max-height: calc(100vh - 230px);
    }

    .order-items {
        max-height: calc(100vh - 380px);
    }
}

@media (max-width: 768px) {
    .order-card {
        width: 240px;
        min-width: 200px;
        padding: 1rem;
        max-height: calc(100vh - 200px);
    }

    .order-items {
        max-height: calc(100vh - 350px);
    }

    .order-header h4 {
        font-size: 1.2rem;
    }

    .item-name {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .item-price {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .order-card {
        width: 224px;
        min-width: 176px;
        max-height: calc(100vh - 180px);
    }

    .order-items {
        max-height: calc(100vh - 330px);
    }
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
    .order-card {
        background: #2c3034;
        border-color: #495057;
        color: #f8f9fa;
    }

    .order-card:hover {
        border-color: #0d6efd;
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
    }

    .order-header {
        border-bottom-color: #495057;
    }

    .order-header h4 {
        color: #ffffff;
    }

    .order-time {
        color: #ced4da;
    }

    .order-item {
        background: #495057;
        border-left-color: #0d6efd;
    }

    .item-name {
        color: #f8f9fa;
    }

    .item-price {
        color: #20c997;
    }

    .customization-name {
        color: #ced4da;
    }

    .modifier-option {
        background: #6c757d;
        color: #ced4da;
    }

    .option-price {
        color: #20c997;
    }

    .order-footer {
        border-top-color: #495057;
    }

    .order-total {
        color: #f8f9fa;
    }

    .order-status-completed {
        background: #0a3622;
        color: #d4edda;
        border-color: #157347;
    }

    .order-status-pending {
        background: #664d03;
        color: #fff3cd;
        border-color: #b58900;
    }

    .order-status-ready {
        background: #0c3c47;
        color: #d1ecf1;
        border-color: #17a2b8;
    }

    /* Order actions modal - scoped to avoid overriding global .modal-content dark mode */
    .order-actions-modal .modal-content {
        background: #2c3034;
        color: #f8f9fa;
    }

    .order-actions-modal .modal-content h5 {
        color: #f8f9fa;
    }
}

/* ===== DARK MODE STYLES FOR ORDER CARD ===== */
@media (prefers-color-scheme: dark) {
    /* Order Card Base */
    .order-card {
        background: #2c3034;
        border-color: #495057;
        color: #f8f9fa;
    }

    .order-card:hover {
        border-color: #0d6efd;
        box-shadow: 0 4px 8px rgba(255,255,255,0.1);
    }

    /* Order Header */
    .order-header {
        border-bottom-color: #495057;
    }

    .order-header h4 {
        color: #ffffff;
    }

    .order-time {
        color: #ced4da;
    }

    /* Order Items */
    .order-item {
        border-bottom-color: #495057;
    }

    .item-name {
        color: #f8f9fa;
    }

    .quantity {
        color: #ffffff;
        background: #0d6efd;
    }

    .item-price {
        color: #20c997;
    }

    /* Customizations */
    .customization-name {
        color: #ced4da;
    }

    .modifier-option {
        background: #495057;
        border-color: #6c757d;
        color: #ced4da;
    }

    .option-price {
        color: #20c997;
    }
    
    /* Order Footer */
    .order-footer {
        border-top-color: #3d4449;
    }

    .order-total {
        color: #d4edda;
    }

    .order-total:hover {
        transform: translateY(-1px);
    }

    /* Order Status */
    .order-status-pending {
        background: #664d03;
        color: #fff3cd;
        border-color: #b58900;
    }

    .order-status-completed {
        background: #0a3622;
        color: #d4edda;
        border-color: #157347;
    }

    /* Order Actions Modal */
    .order-actions-modal .modal-content {
        background: #2c3034;
        border-color: #495057;
        color: #f8f9fa;
    }

    .order-actions-modal .modal-content h5 {
        color: #f8f9fa;
    }

    /* Action Buttons remain the same for consistency */
    .btn-primary:hover,
    .btn-success:hover,
    .btn-secondary:hover {
        box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    }
}

/* ===== HIGH CONTRAST MODE FOR ORDER CARD ===== */
@media (prefers-contrast: more) {
    .order-card {
        border-width: 3px;
    }

    .order-header {
        border-bottom-width: 3px;
    }

    .order-footer {
        border-top-width: 3px;
    }

    .order-time,
    .quantity,
    .item-price,
    .order-total,
    .order-status-pending,
    .order-status-ready,
    .order-status-completed {
        border-width: 2px;
    }

    .order-actions-modal .modal-content {
        border-width: 3px;
    }

    .action-buttons .btn {
        border-width: 3px;
    }
}

/************ INACTIVE ITEM FOR ITEMCUSTOMIZATIONMODAL ******************/
.inactive-item {
    opacity: 0.6;
    pointer-events: auto;
}

.inactive-item .modal-body {
    position: relative;
}

.inactive-item .modal-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(128, 128, 128, 0.3);
    pointer-events: none;
    z-index: 1;
}

.inactive-warning {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
}

.inactive-badge {
    background-color: #dc3545;
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    font-weight: normal;
}

.option-container.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.option-container.disabled:hover {
    background-color: transparent;
    border-color: initial;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
    .inactive-warning {
        background-color: #2d1b1f;
        color: #f8d7da;
        border-color: #842029;
    }
}

/* ===== SLIDE-IN PANEL STYLES ===== */

/* Base Order Panel - CreateOrderCard */
.order-panel {
    position: fixed;
    top: 0;
    left: 72px; /* Sidebar width */
    right: 0;
    bottom: 0;
    background: var(--modal-bg);
    z-index: 105; /* Above tab-detail-panel (100), below customization-panel (110) */
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.order-panel.active {
    transform: translateX(0);
    pointer-events: auto;
}

/* Customization Panel - ItemCustomizationModal (sits on top) */
.customization-panel {
    position: fixed;
    top: 0;
    left: 72px; /* Sidebar width */
    right: 0;
    bottom: 0;
    background: var(--modal-bg);
    z-index: 110; /* Higher than order-panel */
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.customization-panel.active {
    transform: translateX(0);
    pointer-events: auto;
}

/* Panel Header */
.panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--modal-header-bg);
    border-bottom: 2px solid var(--modal-border);
    flex-shrink: 0;
}

.panel-back-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--modal-border);
    background: var(--modal-bg);
    color: var(--modal-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.panel-back-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

.panel-back-btn i {
    font-size: 1.25rem;
}

.panel-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--modal-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.panel-title i {
    color: var(--pt-navy-fg);
}

/* Panel Body */
.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Panel Footer */
.panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--modal-footer-bg);
    border-top: 2px solid var(--modal-border);
    flex-shrink: 0;
}

/* ── Slide-in editor panels — branded navy header ─────────────────────────────
   The tab-selection step (TableSelectionGrid) already uses a navy + coral header;
   these overrides give the full-screen slide-in editor panels — CreateOrderCard
   (.order-panel), ItemCustomizationModal (.customization-panel) and EditMenuItemModal
   / Crear-Editar Artículo (.menu-item-panel) — the SAME header, so they all read as one
   branded surface instead of switching to the light --modal-header-bg. Container-scoped
   (0,2,0+) so it wins over the base .panel-* AND any component-local copies. */
.order-panel .panel-header,
.customization-panel .panel-header,
.menu-item-panel .panel-header {
    background: var(--pt-navy, #000075);
    color: white;
    border-bottom: 3px solid var(--pt-coral, #ec607e);
}

.order-panel .panel-header .panel-title,
.customization-panel .panel-header .panel-title,
.menu-item-panel .panel-header .panel-title {
    color: white;
}

.order-panel .panel-header .panel-title i,
.customization-panel .panel-header .panel-title i,
.menu-item-panel .panel-header .panel-title i {
    color: var(--pt-coral, #ec607e);
}

/* Back button — square (brand straight edges), translucent-white on navy, coral hover */
.order-panel .panel-header .panel-back-btn,
.customization-panel .panel-header .panel-back-btn,
.menu-item-panel .panel-header .panel-back-btn {
    border-radius: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: white;
}

.order-panel .panel-header .panel-back-btn:hover,
.customization-panel .panel-header .panel-back-btn:hover,
.menu-item-panel .panel-header .panel-back-btn:hover {
    background: var(--pt-coral, #ec607e);
    border-color: var(--pt-coral, #ec607e);
    color: white;
    transform: none;
}

/* Header controls (Mesa label / change-tab button) legible on the navy header */
.order-panel .panel-header .table-label {
    color: rgba(255, 255, 255, 0.85);
}

.order-panel .panel-header .selected-tab-info .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.order-panel .panel-header .selected-tab-info .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* "Clonar" dropdown toggle in the Crear Artículo header — legible white-outline on navy */
.menu-item-panel .panel-header .btn-clone-toggle {
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    color: white !important;
}

.menu-item-panel .panel-header .btn-clone-toggle:hover,
.menu-item-panel .panel-header .btn-clone-toggle:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

/* CreateOrderCard specific layout */
.panel-content-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    height: 100%;
}

.menu-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.menu-categories {
    flex: 1;
    overflow-y: auto;
    /* Symmetric horizontal inset so the item cards (and category headings) are
       pulled off both container walls instead of sitting flush against them —
       the scrollbar still rides the true right edge, with a gutter to the cards. */
    padding: 0 0.75rem;
}

.summary-section {
    display: flex;
    flex-direction: column;
}

.summary-section .order-summary {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ItemCustomizationModal specific layout */
.customization-content {
    max-width: 800px;
    margin: 0 auto;
}

.item-preview {
    margin-bottom: 1.5rem;
}

.preview-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

.preview-image-container {
    width: 200px;
    height: 150px;
    border-radius: 0;
    overflow: hidden;
    border: 2px solid var(--modal-border);
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--modal-text);
    margin: 0;
}

.preview-description {
    color: var(--modal-text-secondary);
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.preview-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #198754;
    background: #e8f5e8;
    padding: 0.5rem 1rem;
    border-radius: 0;
    display: inline-block;
    width: fit-content;
    border: 2px solid #c3e6cb;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--modal-text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i {
    color: var(--pt-navy-fg);
}

.modifier-category-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--modal-text-secondary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--modal-border);
}

/* Quantity controls - larger for panel */
.quantity-section {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--modal-header-bg);
    border-radius: 0;
    border: 2px solid var(--modal-border);
}

.quantity-controls-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.quantity-controls-large .btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.quantity-display-large {
    font-size: 2rem;
    font-weight: 700;
    min-width: 80px;
    text-align: center;
    color: var(--modal-text);
}

/* Total section for customization panel */
.total-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
    border-radius: 0;
    border: 2px solid #c3e6cb;
    margin-top: 1.5rem;
}

.total-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: #155724;
}

.total-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #155724;
}

/* ===== PANEL RESPONSIVE STYLES ===== */
@media (max-width: 992px) {
    .panel-content-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .summary-section .order-summary {
        position: relative;
        max-height: none;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .preview-image-container {
        width: 100%;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .order-panel,
    .customization-panel {
        left: 0; /* Full width on mobile */
    }

    .panel-header {
        padding: 1rem;
    }

    .panel-body {
        padding: 1rem;
    }

    .panel-footer {
        padding: 1rem;
        flex-direction: column;
    }

    .panel-footer .btn {
        width: 100%;
    }

    .quantity-controls-large .btn {
        width: 48px;
        height: 48px;
    }

    .quantity-display-large {
        font-size: 1.5rem;
        min-width: 60px;
    }
}

/* ===== PANEL DARK MODE STYLES ===== */
@media (prefers-color-scheme: dark) {
    .order-panel,
    .customization-panel {
        box-shadow: -4px 0 30px rgba(0, 0, 0, 0.4);
    }

    .preview-price {
        color: #20c997;
        background: #1a4d3a;
        border-color: #2d5a44;
    }

    .total-section {
        background: linear-gradient(135deg, #1a4d3a 0%, #0a3622 100%);
        border-color: #2d5a44;
    }

    .total-label,
    .total-amount {
        color: #20c997;
    }
}

/* ===== PANEL REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .order-panel,
    .customization-panel,
    .menu-item-panel {
        transition: none;
    }

    .panel-back-btn {
        transition: none;
    }
}

/* ===== MENU ITEM EDIT PANEL STYLES ===== */

.menu-item-panel {
    position: fixed;
    top: 0;
    left: 72px; /* Sidebar width */
    right: 0;
    bottom: 0;
    background: var(--modal-bg);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.menu-item-panel.active {
    transform: translateX(0);
}

/* Single-column layout (#15): Basic Info (2-up field grid) stacked above full-width
   Modifiers. The whole panel-body scrolls as one column — sections no longer scroll
   independently. */
.edit-item-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.basic-info-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Basic Info fields in a responsive 2-up grid; full-width rows span both columns. */
.basic-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    align-items: start;
}

.basic-info-grid .form-field--full {
    grid-column: 1 / -1;
}

.customizations-section {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.section-header {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--modal-text);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--modal-border);
}

.section-header i {
    color: var(--pt-navy-fg);
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header-row .section-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Form Fields */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.field-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--modal-text);
}

.field-dropdown-toggle {
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0.5rem 0.75rem !important;
}

.field-dropdown-toggle i {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Placeholder inside a field dropdown. GH-26 whitened those fields, which made this text the
   weakest thing on them: --modal-text-secondary at opacity 0.7 measured 4.33:1 on the new white
   fill, under the 4.5:1 AA floor. #6c757d at full opacity is 4.54:1 and matches what
   .form-control::placeholder already uses, so a dropdown's placeholder and an input's now read
   identically — the same parity GH-26 is about. */
.placeholder-text {
    color: #6c757d;
}

/* Image Upload */
/* Photo drag-and-drop drop zone (#16). The native <input type=file> is stretched
   transparently over the whole zone so it accepts BOTH a click and a file drop; the
   remove button sits above it (higher z-index) so it stays clickable. */
/* GH-32: SQUARE, to match how the photo is actually rendered everywhere else —
   the guest menu list (payTableVue MenuItemCard: 35% of card width x 130px => ~1:1) and the
   admin order flow (ItemCustomizationModal .preview-image-container: 120x120). This box used
   to be 280x180 (1.56:1), a ratio nothing else in the product uses, so a photo framed here
   was cropped differently the moment it was seen anywhere real. */
.image-drop-zone {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 0;
}

.image-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.image-drop-zone .item-preview-image,
.image-drop-zone .image-placeholder {
    max-width: none;
    height: 100%;
    margin: 0;
}

/* Hover cue for the click-to-upload path. Note: CSS :hover does NOT fire during a native
   file-drag, so this is a click/hover affordance, not a live drag-over highlight.

   Uses --pt-hover-border (navy in light, light silver in dark) — see the token definition
   for the contrast measurements. Coral here is why this uploader was reported as
   "outlining in red" when nothing was wrong with it. Icon/text follows the same token so
   the edge and the label are one cue rather than two accents. */
.image-drop-zone:hover .image-placeholder {
    border-color: var(--pt-hover-border);
    color: var(--pt-hover-border);
}

/* When a photo is already set, hovering hints it can be replaced (click or drop). */
.image-drop-zone.has-image:hover .item-preview-image {
    filter: brightness(0.85);
}

.btn-remove-image-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-remove-image-overlay:hover {
    background: #dc3545;
}

.item-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    border: 2px solid var(--modal-border);
}

/* ---- GUEST DETAIL-VIEW CROP (GH-32) ----
   Every square surface (upload box, admin menu card, admin order flow, guest menu list) now
   shows the same 1:1 crop. The guest's ITEM DETAIL view does not: payTableVue
   MenuItemModalCard's .hero-image-container is full width x 180px at <=480px, i.e. ~2.17:1
   (13/6 = 2.167) — a wide band from the middle of the same photo. That framing is invisible
   from the admin, so it gets its own tile.
   object-fit/object-position mirror payTableVue's .hero-image exactly, so this IS the crop,
   not an approximation. GuestCropPreviewContractTests pins the ratio; if payTableVue changes,
   update both together. */
.app-layout .guest-preview {
    margin-top: 0.75rem;
    max-width: 280px;
}

.app-layout .guest-preview__caption {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--modal-text-secondary);
    margin-bottom: 0.375rem;
}

.app-layout .guest-preview__img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border: 2px solid var(--modal-border);
    border-radius: var(--radius-input);
    background: var(--modal-header-bg);
}

.app-layout .guest-preview__img--hero {
    aspect-ratio: 13 / 6;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--modal-header-bg);
    border: 2px dashed var(--modal-border);
    border-radius: 0;
    color: var(--modal-text-secondary);
}

.image-placeholder i {
    font-size: 2.5rem;
    opacity: 0.5;
}

/* Price Input */
.price-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.price-input-wrapper .price-symbol {
    position: absolute;
    left: 12px;
    color: var(--modal-text-secondary);
    font-weight: 600;
}

.price-input-wrapper .price-input,
.price-input-wrapper .form-control {
    padding-left: 28px;
}

.price-input-wrapper-sm {
    position: relative;
    display: flex;
    align-items: center;
}

.price-input-wrapper-sm .price-symbol {
    position: absolute;
    left: 10px;
    color: var(--modal-text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

.price-input-wrapper-sm .form-control {
    padding-left: 24px;
}

/* Add Customization Button */
.btn-add-customization {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    /* GH-28: matches its sibling .btn-attach-library, which sets min-height: 44px
       in EditMenuItemModal's own <style>. Without this the two buttons sit side by
       side in .modifier-header-actions at 44px and ~33px.
       NOTE: deliberately 44px, not var(--touch-target-min). That token is 40px
       (app.css:204) — below the 44x44 brand floor in CLAUDE.md, and using it here
       would leave the two buttons still mismatched. The token is the thing that is
       wrong; see the button/input height sweep in the UI consistency guide §5. */
    min-height: 44px;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-customization:hover {
    background: var(--primary-color-dark);
    transform: translateY(-1px);
}

/* Modifiers List */
.modifiers-list {
    flex: 1;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 0.5rem;
}

.empty-modifiers {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--modal-header-bg);
    border: 2px dashed var(--modal-border);
    border-radius: 0;
    text-align: center;
    color: var(--modal-text-secondary);
}

.empty-modifiers i {
    font-size: 3rem;
    opacity: 0.4;
    margin-bottom: 1rem;
}

.empty-modifiers p {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--modal-text);
}

.empty-modifiers span {
    font-size: 0.875rem;
}

/* Modifier Card */
.modifier-card {
    background: var(--modal-bg);
    border: 2px solid var(--modal-border);
    border-radius: 0;
    overflow: visible;
}

.modifier-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--modal-header-bg);
    border-bottom: 1px solid var(--modal-border);
}

.modifier-name-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-size: 1rem;
    font-weight: 600;
    color: var(--modal-text);
    padding: 0.25rem 0.5rem !important;
}

.modifier-name-input:focus {
    outline: none;
    background: var(--modal-bg) !important;
    border-radius: 0;
}

.btn-remove-modifier {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #dc3545;
    border-radius: 0;
    color: #dc3545;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-modifier:hover {
    background: #dc3545;
    color: white;
}

.modifier-card-body {
    padding: 1rem;
}

.modifier-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr 120px;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modifier-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modifier-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--modal-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.modifier-field .field-hint {
    font-size: 0.7rem;
    color: var(--modal-text-secondary);
    opacity: 0.8;
}

.modifier-field-price {
    max-width: 120px;
}

/* Allow dropdown menus to escape modifier containers */
.modifier-field .dropdown-menu.show {
    z-index: 1050;
}

.modifier-card-body {
    overflow: visible;
}

.modifier-action-toggle,
.modifier-category-toggle {
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0.375rem 0.625rem !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
}

.modifier-action-toggle i,
.modifier-category-toggle i {
    font-size: 0.625rem;
    opacity: 0.6;
}

/* Fix dropdown menu alignment in modifier fields — override Popper.js */
.modifier-field .dropdown {
    position: relative;
}

.modifier-field .dropdown-menu {
    position: absolute !important;
    inset: auto !important;
    transform: none !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 2px !important;
    border-radius: 0;
    min-width: 100%;
    width: 100%;
}

/* Modifier Options Section */
.modifier-options-section {
    background: var(--modal-header-bg);
    border-radius: 0;
    padding: 0.75rem;
}

.options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.options-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--modal-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.btn-add-option {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 0;
    color: var(--pt-navy-fg);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-option:hover {
    background: var(--primary-color);
    color: white;
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: 0;
}

.option-name-input {
    flex: 1;
    padding: 0.375rem 0.625rem !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--modal-border) !important;
    border-radius: 0 !important;
}

.option-price-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 90px;
}

.price-symbol-sm {
    position: absolute;
    left: 8px;
    color: var(--modal-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.option-price-input {
    width: 100%;
    padding: 0.375rem 0.625rem 0.375rem 20px !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--modal-border) !important;
    border-radius: 0 !important;
}

/* iPad #5 — the remove-option "X" was 28px in a row whose inputs render ~32px
   (0.375rem padding x2 + 0.875rem text + 1px borders). Being both shorter than its
   neighbours and borderless, it read as floating rather than as part of the row.
   Matching the inputs' box makes the row a consistent set of controls. */
.btn-remove-option {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 0.9375rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    color: #dc3545;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Pointer-gated so an iPad tap doesn't leave the X stuck solid red (iPad #2). */
@media (hover: hover) {
    .btn-remove-option:hover {
        background: #dc3545;
        color: white;
    }
}

.btn-remove-option:active {
    background: #dc3545;
    color: white;
}

.no-options-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: var(--modal-bg);
    border-radius: 0;
    font-size: 0.8rem;
    color: var(--modal-text-secondary);
}

.no-options-hint i {
    color: var(--pt-navy-fg);
}

/* Panel Footer for Edit Menu Item */
.menu-item-panel .panel-footer {
    justify-content: space-between;
}

.footer-right-actions {
    display: flex;
    gap: 1rem;
}

/* ===== MENU ITEM PANEL RESPONSIVE ===== */
@media (max-width: 1200px) {
    .edit-item-grid {
        gap: 1.5rem;
    }

    .modifier-fields-row {
        grid-template-columns: 1fr 1fr;
    }

    .modifier-field-price {
        grid-column: span 2;
        max-width: none;
    }
}

@media (max-width: 992px) {
    /* Collapse the Basic Info 2-up grid to a single field-per-row on narrow tablets. */
    .basic-info-grid {
        grid-template-columns: 1fr;
    }

    .modifier-fields-row {
        grid-template-columns: 1fr;
    }

    .modifier-field-price {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .menu-item-panel {
        left: 0; /* Full width on mobile */
    }

    .menu-item-panel .panel-footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .footer-right-actions {
        flex-direction: column;
        width: 100%;
    }

    .footer-right-actions .btn {
        width: 100%;
    }

    .menu-item-panel .panel-footer .btn-danger {
        width: 100%;
    }

    .option-row {
        flex-wrap: wrap;
    }

    .option-name-input {
        flex: 1 1 100%;
    }

    .option-price-wrapper {
        flex: 1;
    }
}

/* ===== MENU ITEM PANEL DARK MODE ===== */
@media (prefers-color-scheme: dark) {
    .menu-item-panel {
        box-shadow: -4px 0 30px rgba(0, 0, 0, 0.4);
    }

    .modifier-name-input:focus {
        background: var(--modal-header-bg) !important;
    }
}

/* ===== COMPACT CARD HEADER STYLES ===== */
/* Matches Config.razor section-header style for consistency */

/* Standardized tab/card section header — coral underline + navy icon (PayTable brand cohesion).
   Single source of truth; tab components must NOT override these (keeps every tab header identical). */
.card-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    /* Vertical padding gives the title breathing room; horizontal MARGIN (not padding) insets the whole
       header so the coral underline stops short of the card edges instead of spanning full-bleed — matches
       Biblioteca, whose header is inset by its card's padding. */
    padding: 0.9rem 0 0.7rem;
    margin: 0 1.25rem 1rem;
    background: transparent;
    border-bottom: 2px solid var(--pt-coral, #ec607e);
}

.card-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.card-header-title i {
    color: var(--pt-navy, #000075);
    font-size: 1.2rem;
}

.btn-edit-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-secondary);
}

.btn-edit-card:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

/* Dark mode for compact card headers */
@media (prefers-color-scheme: dark) {
    .card-header-compact {
        background: transparent;
        border-bottom-color: var(--pt-coral, #ec607e);
    }

    .card-header-title {
        color: #ffffff;
    }

    .card-header-title i {
        color: var(--pt-coral, #ec607e);
    }

    .btn-edit-card {
        background: #2c3034;
        border-color: #495057;
        color: #ced4da;
    }

    .btn-edit-card:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }
}

/* ===== BRANDING COLORS SECTION ===== */

.branding-section {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.branding-section .section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.branding-section .section-header i {
    color: var(--pt-navy-fg);
}

.badge-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: auto;
}

.color-display-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.color-item {
    flex: 1;
    min-width: 140px;
}

.color-preview-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.color-swatch {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.color-hex {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.color-input-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.color-input-group {
    flex: 1;
    min-width: 180px;
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-picker {
    width: 48px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--surface-color);
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 0;
}

.color-hex-input {
    flex: 1;
    font-family: monospace;
    text-transform: uppercase;
}

.branding-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(13, 110, 253, 0.08);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.branding-note i {
    color: var(--pt-navy-fg);
    margin-top: 2px;
}

/* Branding section dark mode */
@media (prefers-color-scheme: dark) {
    .branding-section {
        border-top-color: var(--border-color);
    }
    
    .badge-locked {
        background: rgba(255, 255, 255, 0.1);
        color: #adb5bd;
    }
    
    .color-swatch {
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .color-picker {
        border-color: rgba(255, 255, 255, 0.2);
        background: var(--surface-color);
    }
    
    .branding-note {
        background: rgba(110, 168, 254, 0.1);
    }
}

/* ===== FEATURE FLAGS CARD ===== */

.feature-flags-card {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.feature-flags-card .card-body {
    padding: 1.25rem;
}

.feature-flags-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-flag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.feature-info {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--primary-color);
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.feature-icon.whatsapp {
    background: #25D366;
}

.feature-details {
    flex: 1;
}

.feature-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.feature-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.feature-toggle {
    flex-shrink: 0;
    margin-left: 1rem;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.ultra-admin-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(111, 66, 193, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: #6f42c1;
}

.ultra-admin-note i {
    font-size: 1rem;
}

.loading-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--text-secondary);
}

/* Feature flags dark mode */
@media (prefers-color-scheme: dark) {
    .feature-flag-item {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .toggle-slider {
        background-color: #555;
    }
    
    .ultra-admin-note {
        background: rgba(111, 66, 193, 0.2);
        color: #b794f6;
    }
}

/* ===== VIEW TOGGLE BUTTONS - 2025 BRANDING ===== */
/* Global override for Bootstrap btn-primary in view-toggle */

.view-toggle .btn-primary {
    background-color: var(--pt-navy, #000075) !important;
    border-color: var(--pt-navy, #000075) !important;
    color: white !important;
}

.view-toggle .btn-primary:hover {
    background-color: #000060 !important;
    border-color: #000060 !important;
}

.view-toggle .btn-outline-primary {
    color: var(--pt-navy, #000075) !important;
    border-color: var(--pt-navy, #000075) !important;
    background-color: transparent !important;
}

.view-toggle .btn-outline-primary:hover {
    background-color: rgba(0, 0, 117, 0.1) !important;
    color: var(--pt-navy, #000075) !important;
}

.view-toggle .btn:focus,
.view-toggle .btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 117, 0.25) !important;
}

.view-toggle .btn-primary:focus,
.view-toggle .btn-primary:focus-visible {
    background-color: var(--pt-navy, #000075) !important;
    border-color: var(--pt-navy, #000075) !important;
}

/* Restaurant Selector in Feature Flags Card */
.restaurant-selector {
    margin-bottom: 1.25rem;
}

.restaurant-selector .selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.restaurant-selector .form-label {
    margin-bottom: 0;
    font-weight: 500;
    color: var(--text-primary);
}

.btn-reload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reload:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-reload:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.selected-restaurant-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(13, 110, 253, 0.08);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.selected-restaurant-info i {
    color: var(--pt-navy-fg);
}

.selected-restaurant-info .restaurant-address {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    gap: 0.75rem;
}

.empty-state i {
    font-size: 2rem;
    opacity: 0.5;
}

/* Dark mode for restaurant selector */
@media (prefers-color-scheme: dark) {
    .btn-reload {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .btn-reload:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }
    
    .selected-restaurant-info {
        background: rgba(110, 168, 254, 0.1);
    }
}

/* ===== EDIT MENU ITEM MODAL ENHANCEMENTS ===== */

/* Sharp borders for basic info section elements */
.basic-info-section .form-control,
.basic-info-section .field-dropdown-toggle,
.basic-info-section .dropdown-menu,
.basic-info-section .image-placeholder,
.basic-info-section .item-preview-image {
    border-radius: 0 !important;
}

/* Active toggle sharp corners */
.active-toggle-container {
    border-radius: 0 !important;
}

.active-toggle-container .toggle-track {
    border-radius: 0 !important;
}

.active-toggle-container .toggle-thumb {
    border-radius: 0 !important;
}

/* Full-design boolean field — the <ToggleField> component (see webapp-ui-consistency-guide.md
   §2). Canonical PROMINENT on/off control: a bordered clickable pill (green on / red off) with a
   state icon, state label, and a switch, plus optional help text. Fresh pt-toggle-field* prefix to
   avoid the global .toggle-* soup. Straight edges per brand (square track/thumb) — matches the
   menu-item "Artículo Activo" toggle it was standardized from. */
.pt-toggle-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 460px;
    padding: 0.875rem 1rem;
    border: 2px solid;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.pt-toggle-field--on { background-color: #d1fae5; border-color: #10b981; }
.pt-toggle-field--off { background-color: #fee2e2; border-color: #ef4444; }
.pt-toggle-field:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.pt-toggle-field--disabled { opacity: 0.6; cursor: not-allowed; }

.pt-toggle-field__status { display: flex; align-items: center; gap: 0.5rem; }
.pt-toggle-field__status i { font-size: 1.25rem; }
.pt-toggle-field--on .pt-toggle-field__status i { color: #059669; }
.pt-toggle-field--off .pt-toggle-field__status i { color: #dc2626; }

.pt-toggle-field__label { font-weight: 600; font-size: 0.95rem; }
.pt-toggle-field--on .pt-toggle-field__label { color: #065f46; }
.pt-toggle-field--off .pt-toggle-field__label { color: #991b1b; }

.pt-toggle-field__switch { flex-shrink: 0; }
.pt-toggle-field__track {
    display: block;
    width: 48px;
    height: 26px;
    position: relative;
    transition: background-color 0.2s ease;
}
.pt-toggle-field--on .pt-toggle-field__track { background-color: #10b981; }
.pt-toggle-field--off .pt-toggle-field__track { background-color: #ef4444; }
.pt-toggle-field__thumb {
    display: block;
    width: 22px;
    height: 22px;
    background-color: #fff;
    position: absolute;
    top: 2px;
    transition: left 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.pt-toggle-field--on .pt-toggle-field__thumb { left: 24px; }
.pt-toggle-field--off .pt-toggle-field__thumb { left: 2px; }

.pt-toggle-field__help { margin-top: 0.375rem; font-size: 0.8rem; color: var(--text-secondary); }

/* Day-of-week chips for availability schedules (<WeekdayPicker>), shared by the menu and package
   editors. Straight edges (brand), coral = selected, 44px min touch target. */
.pt-weekdays { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pt-day-chip {
    min-width: 44px; min-height: 44px; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.85rem;
    font-weight: 600; border: 1px solid var(--modal-border, #d1d5db); border-radius: 0;
    background: var(--modal-bg, #fff); color: var(--modal-text, #111827);
}
.pt-day-chip.is-on { background: var(--pt-coral, #ec607e); border-color: var(--pt-coral, #ec607e); color: #fff; }
.pt-day-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.pt-weekdays__hint { margin-top: 0.375rem; font-size: 0.8rem; color: var(--text-secondary); }

/* Labeled row for a compact ToggleSwitch — the standard replacement for Bootstrap's
   .form-check.form-switch on config cards (switch on the left, descriptive label on the right).
   See webapp-ui-consistency-guide.md §2. */
.pt-switch-field { display: inline-flex; align-items: center; gap: 0.5rem; }
.pt-switch-field label,
.pt-switch-field .form-check-label { margin: 0; font-weight: 500; }

@media (prefers-color-scheme: dark) {
    .pt-toggle-field--on { background-color: #064e3b; border-color: #10b981; }
    .pt-toggle-field--off { background-color: #450a0a; border-color: #ef4444; }
    .pt-toggle-field--on .pt-toggle-field__status i { color: #34d399; }
    .pt-toggle-field--off .pt-toggle-field__status i { color: #f87171; }
    .pt-toggle-field--on .pt-toggle-field__label { color: #a7f3d0; }
    .pt-toggle-field--off .pt-toggle-field__label { color: #fecaca; }
}

/* Modifier dropdown menu alignment fix — override Popper.js inline styles */
.modifier-fields-row .modifier-field .dropdown {
    position: relative;
}

.modifier-fields-row .modifier-field .dropdown-menu {
    position: absolute !important;
    inset: auto !important;
    transform: none !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 2px !important;
    min-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    z-index: 1060 !important;
}

/* Basic-info field dropdowns (#20): same Popper override so the Menú/Categoría/Estación
   menus drop straight down, aligned flush under their field, instead of Popper flinging
   them off-center on the now-single-column layout. */
.basic-info-grid .form-field .dropdown {
    position: relative;
}

.basic-info-grid .form-field .dropdown-menu {
    position: absolute !important;
    inset: auto !important;
    transform: none !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 2px !important;
    min-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    z-index: 1060 !important;
}

/* Ensure dropdown toggle has sharp corners */
.modifier-action-toggle,
.modifier-category-toggle {
    border-radius: 0 !important;
}

/* Sharp corners for all modifier section elements */
.modifier-card {
    border-radius: 0 !important;
}

.modifier-options-section {
    border-radius: 0 !important;
}

.option-row {
    border-radius: 0 !important;
}

.option-name-input,
.option-price-input {
    border-radius: 0 !important;
}

.btn-add-option {
    border-radius: 0 !important;
}

.no-options-hint {
    border-radius: 0 !important;
}

/* Ensure dropdowns in modifiers don't get clipped */
.modifier-card-body {
    overflow: visible !important;
}

.modifiers-list {
    overflow: visible !important;
}

.customizations-section {
    overflow: visible !important;
}

/* Panel body should allow overflow for dropdowns */
.menu-item-panel .panel-body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Textarea styling for description field */
.basic-info-section textarea.form-control {
    border-radius: 0 !important;
    min-height: 80px;
    resize: vertical;
}

/* =================================================================== */
/* PayTable Brand Toast Theme                                          */
/* =================================================================== */
/* Overrides BlazorBootstrap <Toasts> stock Bootstrap rendering across
   every WebApp surface (Blazor admin + mesero /m/*). Pattern: white
   card, 4px left side-rail in the semantic color for the toast type,
   navy Poppins title, Montserrat body, sharp edges, brand shadow.
   The rail color mapping follows the locked semantic-color discipline
   in docs/architecture/mesero-ui-modernization-plan.md §1.
   Selectors use .toast-container .toast so the rules only fire inside
   the global <Toasts> region — not on `.toast-card` or anything else
   that coincidentally uses the word. */
.toast-container .toast {
    background: #ffffff !important;
    color: var(--text-primary, #1e293b) !important;
    border: none !important;
    border-left: 4px solid var(--pt-coral, #ec607e) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 117, 0.15),
                0 2px 6px rgba(0, 0, 117, 0.08) !important;
    font-family: var(--pt-font-body, 'Montserrat', sans-serif);
    min-width: 320px;
    max-width: 420px;
    overflow: hidden;
}

/* Type-specific rail color — these mirror the BlazorBootstrap
   ToastType → text-bg-* class mapping. We target both `text-bg-*`
   (Bootstrap 5.2+ utility) and the legacy `bg-*` class so the rules
   survive library version drift. */
.toast-container .toast.text-bg-success,
.toast-container .toast.bg-success {
    border-left-color: var(--pt-coral, #ec607e) !important;
}
.toast-container .toast.text-bg-danger,
.toast-container .toast.bg-danger {
    border-left-color: var(--pt-destructive, #ef4444) !important;
}
.toast-container .toast.text-bg-warning,
.toast-container .toast.bg-warning {
    border-left-color: var(--pt-warning, #f59e0b) !important;
}
.toast-container .toast.text-bg-info,
.toast-container .toast.bg-info,
.toast-container .toast.text-bg-primary,
.toast-container .toast.bg-primary {
    border-left-color: var(--pt-navy, #000075) !important;
}

/* Header strip — strip Bootstrap's colored fill, restore brand chrome. */
.toast-container .toast .toast-header {
    background: transparent !important;
    color: var(--pt-navy, #000075) !important;
    font-family: var(--pt-font-logo, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    padding: 0.625rem 0.875rem;
    gap: 0.5rem;
}

.toast-container .toast .toast-header strong { color: inherit; }
.toast-container .toast .toast-header small {
    color: var(--text-secondary, #64748b);
    font-family: var(--pt-font-body, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 0.6875rem;
}

/* Header icon tint — match the side-rail color so type is glanceable. */
.toast-container .toast .toast-header i,
.toast-container .toast .toast-header svg {
    color: var(--pt-coral, #ec607e);
    font-size: 1rem;
    flex-shrink: 0;
}
.toast-container .toast.text-bg-success .toast-header i,
.toast-container .toast.bg-success .toast-header i,
.toast-container .toast.text-bg-success .toast-header svg,
.toast-container .toast.bg-success .toast-header svg { color: var(--pt-coral, #ec607e); }
.toast-container .toast.text-bg-danger .toast-header i,
.toast-container .toast.bg-danger .toast-header i,
.toast-container .toast.text-bg-danger .toast-header svg,
.toast-container .toast.bg-danger .toast-header svg { color: var(--pt-destructive, #ef4444); }
.toast-container .toast.text-bg-warning .toast-header i,
.toast-container .toast.bg-warning .toast-header i,
.toast-container .toast.text-bg-warning .toast-header svg,
.toast-container .toast.bg-warning .toast-header svg { color: var(--pt-warning, #f59e0b); }
.toast-container .toast.text-bg-info .toast-header i,
.toast-container .toast.bg-info .toast-header i,
.toast-container .toast.text-bg-primary .toast-header i,
.toast-container .toast.bg-primary .toast-header i,
.toast-container .toast.text-bg-info .toast-header svg,
.toast-container .toast.bg-info .toast-header svg,
.toast-container .toast.text-bg-primary .toast-header svg,
.toast-container .toast.bg-primary .toast-header svg { color: var(--pt-navy, #000075); }

/* Close button — neutral × glyph, sharp. */
.toast-container .toast .btn-close {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    opacity: 0.55;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    margin-left: 0.25rem;
    position: relative;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.toast-container .toast .btn-close::before {
    content: '×';
    font-family: var(--pt-font-body, 'Montserrat', sans-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-secondary, #64748b);
    line-height: 1;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toast-container .toast .btn-close:hover { opacity: 1; }

/* Body */
.toast-container .toast .toast-body {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary, #1e293b) !important;
    background: transparent !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .toast-container .toast {
        background: #1e293b !important;
        color: #f9fafb !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50),
                    0 2px 6px rgba(0, 0, 0, 0.30) !important;
    }
    .toast-container .toast .toast-header {
        color: #aab2ff !important;
        border-bottom-color: #334155 !important;
    }
    .toast-container .toast .toast-header small { color: #94a3b8; }
    .toast-container .toast .toast-body { color: #f9fafb !important; }
    .toast-container .toast .btn-close::before { color: #9ca3af; }
}

/* Mobile — let it run nearly full-width on phones. */
@media (max-width: 480px) {
    .toast-container .toast {
        min-width: 0;
        max-width: calc(100vw - 1.5rem);
    }
}

/* ---------------------------------------------------------------------------
   ToggleSwitch (Components/Util/ToggleSwitch.razor) — canonical on/off pill.
   Global (loaded once) rather than a per-instance component <style> so the N
   instances of a reusable primitive don't each emit the block. pt-toggle*-
   prefixed to avoid the legacy global .toggle-* vocabulary. Pill radii are a
   deliberate exception to the brand straight-edge rule (a switch is a pill).
   See docs/architecture/webapp-ui-consistency-guide.md §2.
--------------------------------------------------------------------------- */
.pt-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.pt-toggle--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.pt-toggle__track {
    width: 48px;
    height: 26px;
    border-radius: 13px;
    position: relative;
    transition: background-color 0.2s ease;
}

.pt-toggle--on .pt-toggle__track { background-color: #10b981; }
.pt-toggle--off .pt-toggle__track { background-color: #cbd5e1; }

.pt-toggle__thumb {
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    transition: left 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pt-toggle--on .pt-toggle__thumb { left: 24px; }
.pt-toggle--off .pt-toggle__thumb { left: 2px; }
/* ---------------------------------------------------------------------------
   Touch: no sticky hover / focus state on buttons          (iPad #2)
   ---------------------------------------------------------------------------
   Reported as "refresh button stays highlighted after tap, unable to un-highlight
   — seems to happen for all refresh buttons across app". Two separate causes, both
   generic to touch rather than to the refresh buttons:

   1. iOS/iPadOS keeps :hover applied to the last-tapped element until the user taps
      somewhere else, so Bootstrap's .btn-*:hover colours latch on. Bootstrap 5.3
      drives every variant through --bs-btn-hover-* custom properties, so pointing
      those back at the resting values neutralises hover for ALL variants at once
      without having to enumerate them.

   2. Tapping also leaves :focus set, and Bootstrap paints a box-shadow ring for it.
      :focus-visible is the "the user actually needs a focus ring" signal, so drop
      the ring only when it is absent — keyboard navigation keeps its ring intact.

   Deliberately scoped to (hover: none) so mouse-driven desktop and the Windows
   shell keep their normal hover feedback.
--------------------------------------------------------------------------- */
@media (hover: none) {
    .btn:hover {
        --bs-btn-hover-color: var(--bs-btn-color);
        --bs-btn-hover-bg: var(--bs-btn-bg);
        --bs-btn-hover-border-color: var(--bs-btn-border-color);
    }
}

.btn:focus:not(:focus-visible) {
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   File input: hold the focus ring while the OS picker is open   (Windows #8)
   ---------------------------------------------------------------------------
   Paired with wwwroot/js/file-input-active.js, which stamps data-pt-file-active
   for the lifetime of the native file dialog. Mirrors Bootstrap's
   .form-control:focus treatment so the field looks continuously active from the
   click through to the file landing, instead of flickering off the moment the
   dialog steals focus.
--------------------------------------------------------------------------- */
input[type="file"][data-pt-file-active] {
    border-color: var(--pt-navy, #000075);
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 117, 0.25);
    outline: 0;
}

@media (prefers-color-scheme: dark) {
    /* Silver, NOT coral. RULE: an upload box or an action button — anything that can enter a
       real error state — must not use coral in dark mode. Coral reads as red, so on a control
       that can genuinely fail it makes "you are interacting with this" indistinguishable from
       "this failed". This ring is the file field's ACTIVE state, so coral here said "error"
       every time a user opened the file dialog.
       Light keeps navy (16.71:1 on white). Dark uses --pt-hover-border silver: navy would be
       1.14:1 here, below the resting border, so it is not an alternative. */
    input[type="file"][data-pt-file-active] {
        border-color: var(--pt-hover-border);
        box-shadow: 0 0 0 0.25rem rgba(203, 213, 225, 0.3);
    }
}

/* PtModal is focused programmatically when it opens (iPad #11) purely to take
   focus off the trigger button; it is a container, not an interactive control,
   so it must not paint a focus ring of its own. */
.custom-modal.pt-modal:focus,
.custom-modal.pt-modal:focus-visible {
    outline: none;
}

/* =============================================================================
   EXTRACTED COMPONENT STYLES (CSS centralization Phase 1 - #53)
   Each block came out of the named component's inline <style>. Razor escapes `@` as
   `@@` in markup, so `@@media`/`@@keyframes` are rewritten to a single `@` here — a
   .css file needs `@media`, and a stray `@@` makes the whole at-rule invalid.
   Appended at the END deliberately: inline <style> injects into <body>, i.e. after
   app.css, so this keeps each block's place in the cascade.
   ADMISSION CRITERIA (all six): no non-class first compound; no class rendered by any
   other .razor; no class already in app/kiosk/mobile.css; no class shared with another
   moved file; no @keyframes name defined elsewhere; component not reachable from any
   Mesero page. The second of those is the one that matters — inline <style> is global
   in space but scoped in TIME, so moving a block here makes it permanent app-wide.
   ============================================================================= */

/* ---- Components/Cards/OverlayOrderCard.razor ---- */
    .overlay-order-card {
        background: var(--surface-color, #fff);
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        overflow: hidden;
        transition: box-shadow 0.2s;
        width: 280px;
        flex-shrink: 0;
    }

    .overlay-order-card:active {
        box-shadow: 0 0 0 3px rgba(0, 0, 117, 0.3);
    }

    .overlay-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        color: #fff;
        font-weight: 700;
        font-size: 0.95rem;
        min-height: 40px;
    }

    .urgency-normal .overlay-card-header {
        background: #28a745;
    }

    .urgency-warning .overlay-card-header {
        background: #ffc107;
        color: #212529;
    }

    .urgency-urgent .overlay-card-header {
        background: #dc3545;
        animation: pulse-urgent 1.5s ease-in-out infinite;
    }

    .urgency-ready .overlay-card-header {
        background: #17a2b8;
        animation: pulse-ready 2s ease-in-out infinite;
    }

    @keyframes pulse-ready {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.85; }
    }

    @keyframes pulse-urgent {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }

    .overlay-table-number {
        white-space: nowrap;
    }

    .overlay-timer {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .overlay-card-body {
        padding: 0.5rem 0.75rem;
    }

    .overlay-category {
        /* Matches the row indent so the category heading lines up with the items under it. */
        padding-left: 0.5rem;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--text-secondary, #6c757d);
        margin-top: 0.35rem;
        letter-spacing: 0.03em;
    }

    .overlay-category:first-child {
        margin-top: 0;
    }

    .overlay-item {
        display: flex;
        gap: 0.4rem;
        /* Uniform left indent, shared by every row type below, so the urgency dot clears the
           package block's 3px left accent instead of sitting on top of it. Applied to the ROWS
           rather than to the block, so blocked and standalone rows keep identical metrics and
           their dots stay in one column. */
        padding: 0.15rem 0 0.15rem 0.5rem;
        font-size: 0.9rem;
        color: var(--text-primary, #212529);
    }

    /* Per-item urgency dot — semantic traffic-light colors (green/amber/red/
       teal-ready). Dots are intentionally round (50%) — PayTable straight-edge
       rule does not apply to these semantic indicators. See §7.5 of the
       expediter-per-station-timers plan. */
    .item-urgency-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 0.4rem;
        flex-shrink: 0;
        align-self: center;
    }

    .item-urgency-dot.urgency-normal  { background: #28a745; }
    .item-urgency-dot.urgency-warning { background: #ffc107; }
    .item-urgency-dot.urgency-urgent  {
        background: #dc3545;
        animation: pulse-urgent 1.5s ease-in-out infinite;
    }
    .item-urgency-dot.urgency-ready   { background: #17a2b8; }

    .overlay-item-qty {
        font-weight: 700;
        min-width: 1.2rem;
        text-align: right;
    }

    .overlay-item-name {
        flex: 1;
    }

    /* One enclosing block per package, named once at the top. The border is drawn with an inset
       box-shadow rather than border-left so it costs NO horizontal space — the rows inside keep
       exactly the same metrics as standalone rows, which is what keeps every urgency dot in a
       single column down the card. Prefixed because a .razor inline style block is GLOBAL, not
       scoped, so an unprefixed name would leak across components. */
    .overlay-package-block {
        border: 1px solid rgba(0, 0, 117, 0.22);
        box-shadow: inset 3px 0 0 rgba(0, 0, 117, 0.45);
        margin: 3px 0;
        padding: 2px 0;
    }

    .ooc-package-caption {
        display: block;
        padding-left: 0.5rem;
        font-size: 0.65rem;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: rgba(0, 0, 117, 0.75);
        white-space: normal;
    }

    .overlay-modifier {
        /* 1.6rem hang under the dish name + the 0.5rem row indent above. */
        padding-left: 2.1rem;
        font-size: 0.8rem;
        font-style: italic;
        color: var(--pt-coral, #ec607e);
    }

    .overlay-special {
        padding-left: 2.1rem;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--pt-coral, #ec607e);
    }

    .overlay-special::before {
        content: "\01F5E8 ";
    }

    .overlay-empty {
        color: var(--text-secondary, #6c757d);
        font-style: italic;
        font-size: 0.85rem;
        padding: 0.5rem 0;
    }

    /* Confirm overlay */
    .overlay-confirm-ready {
        background: rgba(23, 162, 184, 0.92) !important;
    }

    .overlay-confirm {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(40, 167, 69, 0.92);
        color: #fff;
        font-size: 1.1rem;
        font-weight: 700;
        gap: 0.5rem;
        animation: fadeInConfirm 0.15s ease-out;
        z-index: 2;
        cursor: pointer;
    }

    .overlay-confirm i {
        font-size: 2.5rem;
    }

    @keyframes fadeInConfirm {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .overlay-order-card {
            background: #1a1a2e;
            border-color: #495057;
        }

        .overlay-item {
            color: #e9ecef;
        }
    }

/* ---- Components/Cards/StationBucketGauge.razor ---- */
    .bucket-gauge {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem 1rem;
        border: 1px solid #dee2e6;
        background: var(--surface-color, #fff);
        min-width: 180px;
    }

    .gauge-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
    }

    .gauge-station-name {
        font-weight: 600;
        font-size: 0.95rem;
    }

    .gauge-tokens {
        font-weight: 700;
        font-size: 1.25rem;
        font-variant-numeric: tabular-nums;
    }

    .gauge-tokens-max {
        font-weight: 400;
        font-size: 0.85rem;
        color: var(--text-secondary, #6c757d);
        margin-left: 2px;
    }

    .gauge-bar {
        position: relative;
        height: 10px;
        background: rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .gauge-fill {
        height: 100%;
        transition: width 0.4s ease, background-color 0.4s ease;
    }

    .fill-ok {
        background: #28a745;
    }

    .fill-low {
        background: #ffc107;
    }

    .fill-empty {
        background: #dc3545;
    }

    .gauge-footer {
        font-size: 0.78rem;
    }

    @media (prefers-color-scheme: dark) {
        .bucket-gauge {
            background: #2c3034;
            border-color: #495057;
        }
        .gauge-bar {
            background: rgba(255, 255, 255, 0.12);
        }
    }

/* ---- Pages/ReleaseNotes.razor ---- */
    .releasenotes-page {
        max-width: 760px;
        margin: 0 auto;
        padding: 1rem;
    }

    .releasenotes-header h3 {
        color: var(--pt-navy, #000075);
        font-weight: 700;
    }

    .releasenotes-intro {
        font-size: 0.9rem;
    }

    .releasenotes-summary {
        font-family: monospace;
        font-size: 0.85rem;
    }

    .releasenotes-preview {
        border: 1px solid #e9ecef;
        padding: 1rem;
        background: #f8f9fa;
    }

    .releasenotes-blast {
        background: var(--pt-navy, #000075);
        border: none;
    }

    .releasenotes-status {
        margin-top: 1.5rem;
        padding: 1rem;
        border: 1px solid #e9ecef;
        background: #f8f9fa;
    }

    .releasenotes-status-line {
        font-size: 0.9rem;
    }

    .releasenotes-confirm-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1050;
    }

    .releasenotes-confirm {
        background: #fff;
        padding: 1.5rem;
        max-width: 460px;
        width: 90%;
    }

    .releasenotes-confirm-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-top: 1rem;
    }

/* ---- Components/Util/ItemStatusChip.razor ---- */
    /* Brand-aligned per PayTable 2025 identity — straight edges, Montserrat,
       Navy #000075 + Coral #ec607e. Exact RGB/border values match the Vue
       component so the same status reads the same on both surfaces. */
    .item-status-chip {
        display: inline-flex;
        align-items: center;
        min-height: 20px;
        padding: 2px 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
        border-radius: 0;
        border: 1px solid transparent;
        line-height: 1;
    }

    .item-status-chip.status-pending {
        background: rgba(0, 0, 117, 0.06);
        color: #4a4a52;
        border-color: rgba(0, 0, 117, 0.18);
    }

    .item-status-chip.status-ready {
        background: var(--pt-coral, #ec607e);
        color: #ffffff;
        border-color: var(--pt-coral, #ec607e);
    }

    .item-status-chip.status-delivered {
        background: var(--pt-navy, #000075);
        color: #ffffff;
        border-color: var(--pt-navy, #000075);
    }

    .item-status-chip.status-cancelled {
        background: transparent;
        color: #808289;
        border-color: #b4b4bf;
        text-decoration: line-through;
    }

    @media (prefers-color-scheme: dark) {
        .item-status-chip.status-pending {
            background: rgba(255, 255, 255, 0.08);
            color: #989aa2;
            border-color: rgba(255, 255, 255, 0.16);
        }
    }

/* ---- Components/Branding/BrandedFooterAccent.razor ---- */
    .branded-footer-accent {
        position: relative;
        min-height: 100vh;
        padding: 2rem;
        overflow: hidden;
    }

    /* Animated squares background */
    .accent-squares {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .accent-square {
        position: absolute;
        animation: accentPulse ease-in-out infinite alternate;
    }

    @keyframes accentPulse {
        0% {
            opacity: 0.02;
            transform: scale(0.95) rotate(-1deg);
        }
        50% {
            opacity: 0.10;
            transform: scale(1.05) rotate(1deg);
        }
        100% {
            opacity: 0.05;
            transform: scale(1) rotate(0deg);
        }
    }

    /* Content on top of squares */
    .accent-content {
        position: relative;
        z-index: 1;
    }

/* ---- Components/Cards/OperatorWhatsAppConfigCard.razor ---- */
    .binding-code-box {
        border: 1px solid #dee2e6;
        border-left: 3px solid #000075;
        background: var(--surface-color, #fff);
        padding: 0.75rem 1rem;
    }

    .binding-code {
        font-family: 'Courier New', monospace;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.4rem;
        color: var(--pt-navy-fg);
        margin-bottom: 0.5rem;
    }

    @media (prefers-color-scheme: dark) {
        .binding-code-box {
            background: #2c3034;
            border-color: #495057;
            border-left-color: #ec607e;
        }
        .binding-code {
            color: #ec607e;
        }
    }

/* ---- Components/Cards/MasterAdmin/DocumentationManagementCard.razor ---- */
    .doc-row {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 0;
    }

    @media (prefers-color-scheme: dark) {
        .doc-row {
            background: #343a40;
            border-color: #495057;
        }
    }