/**
 * MasterRMS Core Design System - Dark / Light / System Theme
 *
 * v4.1.0 - Enterprise Restaurant Management System
 *
 * Single-source-of-truth for all visual tokens used across the admin UI.
 * Scoped inside `#masterrms-app` to avoid conflicts with WordPress core styles.
 * Theme switching via `data-theme` attribute on <html>: "dark", "light", or
 * resolved from OS preference when set to "system".
 *
 * Organized into clearly-delimited sections:
 *
 * - CSS Custom Properties (color tokens, text, accent/state, layout/shadows)
 * - Light Theme Override
 * - Global Scope & Reset
 * - Scrollbar Styling
 * - Keyframe Animations
 * - Utility Classes
 * - Status Badges (7 order statuses + utility states)
 * - Order Row Status Colors
 * - Theme Toggle Component
 */

/* ----- Google Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* =========================================================================
   CSS CUSTOM PROPERTIES (Design Tokens) - Default: Dark Theme
   ========================================================================= */
:root,
[data-theme="dark"] {
    /* ===== Color Tokens ===== */
    --mrms-bg-primary: #0f1117;         /* Deep dark page background */
    --mrms-bg-secondary: #1a1d27;       /* Cards, sidebar, header */
    --mrms-bg-tertiary: #242836;        /* Elevated surfaces, table headers */
    --mrms-surface: rgba(255, 255, 255, 0.04);
    --mrms-surface-hover: rgba(255, 255, 255, 0.08);
    --mrms-surface-alt: #1e2230;        /* Elevated boxes/insets (dark) - white text safe */
    --mrms-border: rgba(255, 255, 255, 0.08);
    --mrms-border-highlight: rgba(99, 102, 241, 0.3);

    /* ===== Modal & Dialog Tokens ===== */
    --mrms-modal-bg: #181d27;
    --mrms-modal-header-bg: #181d27;
    --mrms-modal-footer-bg: #181d27;
    --mrms-overlay-bg: rgba(5, 8, 15, 0.85);
    --mrms-input-bg: #0f1117;
    --mrms-input-border: rgba(255, 255, 255, 0.12);
    --mrms-card-glass-bg: rgba(26, 29, 39, 0.7);

    /* ===== Chart & Analytics Tokens ===== */
    --mrms-chart-grid: rgba(255, 255, 255, 0.06);
    --mrms-chart-text: #94a3b8;

    /* ===== Neutral Badges ===== */
    --mrms-badge-neutral-bg: rgba(255, 255, 255, 0.08);
    --mrms-badge-neutral-text: #cbd5e1;

    /* ===== Text Colors ===== */
    --mrms-text-primary: #f8fafc;       /* Main body text */
    --mrms-text-secondary: #94a3b8;     /* Subtle text, labels */
    --mrms-text-muted: #7c8aa0;         /* Muted / placeholder text (F-008: >=4.5:1 on dark) */

    /* ===== Accent & State Colors ===== */
    --mrms-accent: #6366f1;             /* Primary accent (indigo) */
    --mrms-accent-hover: #818cf8;
    --mrms-accent-glow: rgba(99, 102, 241, 0.25);
    
    --mrms-success: #15803d;            /* F-002: white-on-green >= 4.5:1 (was #22c55e = 2.28:1) */
    --mrms-success-bg: rgba(34, 197, 94, 0.15);
    --mrms-success-border: rgba(34, 197, 94, 0.3);
    
    --mrms-warning: #f59e0b;
    --mrms-warning-bg: rgba(245, 158, 11, 0.15);
    --mrms-warning-border: rgba(245, 158, 11, 0.3);
    
    --mrms-danger: #dc2626;             /* F-002: white-on-red >= 4.5:1 (was #ef4444 = 3.68:1) */
    --mrms-danger-bg: rgba(239, 68, 68, 0.15);
    --mrms-danger-border: rgba(239, 68, 68, 0.3);
    /* Text-safe state colours (badges, KPI numbers): light mode uses the darker
       variants so 10-12px labels clear 4.5:1 on white. */
    --mrms-success-text: #22c55e;
    --mrms-warning-text: #f59e0b;
    --mrms-danger-text: #ef4444;
    
    --mrms-info: #0ea5e9;
    --mrms-info-bg: rgba(14, 165, 233, 0.15);
    --mrms-info-border: rgba(14, 165, 233, 0.3);

    --mrms-purple: #a855f7;
    --mrms-purple-bg: rgba(168, 85, 247, 0.15);
    --mrms-purple-border: rgba(168, 85, 247, 0.3);

    /* ===== Alert Box Tokens (Dark) ===== */
    --mrms-alert-danger-bg: rgba(239, 68, 68, 0.15);
    --mrms-alert-danger-border: rgba(239, 68, 68, 0.35);
    --mrms-alert-danger-text: #f87171;

    /* ===== QR Container Tokens (Dark) ===== */
    --mrms-qr-bg: #ffffff;
    --mrms-qr-border: rgba(255, 255, 255, 0.16);
    --mrms-qr-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* ===== Layout & Shadows ===== */
    --mrms-radius-sm: 8px;
    --mrms-radius-md: 12px;
    --mrms-radius-lg: 16px;
    --mrms-radius-full: 9999px;

    --mrms-shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
    --mrms-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --mrms-shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --mrms-shadow-glow: 0 0 20px var(--mrms-accent-glow);

    /* Primary font stack */
    --mrms-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================================
   LIGHT THEME OVERRIDES
   -------------------------------------------------------------------------
   Prompt 13: this block used to carry the DARK sidebar tokens and
   `color-scheme: dark` (copy-pasted from the dark theme). The light tokens
   below the theme toggle override it today, but leaving a dark `color-scheme`
   in the light block is a landmine: native date pickers, selects and
   autofill paint white-on-white the moment the cascade shifts. The block is
   gone; every token it defined is set by the light theme block below.
   ========================================================================= */

/* =========================================================================
   LIGHT THEME OVERRIDE
   ========================================================================= */
/* Smooth theme transition - 200ms crossfade on all token-driven properties */
:root, html {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="light"] {
    /* ===== Color Tokens ===== */
    --mrms-bg-primary: #f8fafc;         /* Cool gray page background */
    --mrms-bg-secondary: #ffffff;       /* Pure white cards, sidebar */
    --mrms-bg-tertiary: #f1f5f9;        /* Slate-100 elevated surfaces */
    --mrms-surface: rgba(0, 0, 0, 0.02);
    --mrms-surface-hover: rgba(0, 0, 0, 0.04);
    --mrms-surface-alt: #f8fafc;        /* Inset boxes */
    --mrms-border: #cbd5e1;             /* Clean, visible slate-300 borders by default */
    --mrms-border-highlight: rgba(79, 70, 229, 0.3);

    /* ===== Modal & Dialog Tokens ===== */
    --mrms-modal-bg: #ffffff;
    --mrms-modal-header-bg: #f8fafc;
    --mrms-modal-footer-bg: #f8fafc;
    --mrms-overlay-bg: rgba(15, 23, 42, 0.65);
    --mrms-input-bg: #ffffff;
    --mrms-input-border: #cbd5e1;
    --mrms-card-glass-bg: rgba(255, 255, 255, 0.92);

    /* ===== Chart & Analytics Tokens ===== */
    --mrms-chart-grid: #e2e8f0;
    --mrms-chart-text: #64748b;

    /* ===== Neutral Badges ===== */
    --mrms-badge-neutral-bg: #f1f5f9;
    --mrms-badge-neutral-text: #475569;

    /* ===== Text Colors ===== */
    --mrms-text-primary: #0f172a;       /* Dark slate-900 body text */
    --mrms-text-secondary: #475569;     /* Slate-600 labels */
    --mrms-text-muted: #64748b;         /* Slate-500: >=4.5:1 on white (WCAG AA) */

    /* ===== Accent & State ===== */
    --mrms-accent: #4f46e5;             /* Indigo-600 - darker for contrast on white */
    --mrms-accent-hover: #6366f1;
    --mrms-accent-glow: rgba(79, 70, 229, 0.12);
    /* ===== Layout & Shadows (Light Mode - Enhanced Depth) ===== */
    --mrms-radius-sm: 8px;
    --mrms-radius-md: 12px;
    --mrms-radius-lg: 16px;
    --mrms-radius-full: 9999px;

    --mrms-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --mrms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --mrms-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --mrms-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --mrms-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --mrms-shadow-glow: 0 0 20px var(--mrms-accent-glow);

    /* ===== Card Elevation Tokens (Light Mode) ===== */
    --mrms-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --mrms-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --mrms-card-shadow-active: 0 8px 20px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
    --mrms-card-border: 1px solid #cbd5e1;
    --mrms-card-border-hover: 1px solid #cbd5e1;

    /* ===== Sidebar ===== */
    --mrms-sidebar-bg: #ffffff;
    --mrms-sidebar-border: 1px solid #cbd5e1;
    --mrms-sidebar-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);

    --mrms-success: #15803d;
    --mrms-success-bg: rgba(34, 197, 94, 0.1);
    --mrms-success-border: rgba(34, 197, 94, 0.25);

    --mrms-warning: #d97706;
    --mrms-warning-bg: rgba(245, 158, 11, 0.1);
    --mrms-warning-border: rgba(245, 158, 11, 0.25);

    --mrms-danger: #dc2626;
    --mrms-danger-bg: rgba(239, 68, 68, 0.08);
    --mrms-danger-border: rgba(239, 68, 68, 0.2);
    --mrms-success-text: #15803d;
    --mrms-warning-text: #b45309;
    --mrms-danger-text: #b91c1c;

    --mrms-info: #0284c7;
    --mrms-info-bg: rgba(14, 165, 233, 0.08);
    --mrms-info-border: rgba(14, 165, 233, 0.2);

    --mrms-purple: #9333ea;
    --mrms-purple-bg: rgba(168, 85, 247, 0.1);
    --mrms-purple-border: rgba(168, 85, 247, 0.25);

    /* ===== Alert Box Tokens (Light) ===== */
    --mrms-alert-danger-bg: #fef2f2;
    --mrms-alert-danger-border: #fecaca;
    --mrms-alert-danger-text: #b91c1c;

    /* ===== QR Container Tokens (Light) ===== */
    --mrms-qr-bg: #ffffff;
    --mrms-qr-border: #cbd5e1;
    --mrms-qr-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* ===== Shadows - lighter for light theme ===== */
    --mrms-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --mrms-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --mrms-shadow-lg: 0 12px 28px rgba(0,0,0,0.12);
    --mrms-shadow-glow: 0 0 20px var(--mrms-accent-glow);

    /* ===== Typographic Scale Tokens ===== */
    --mrms-font-page-title: 22px;
    --mrms-font-section-title: 17px;
    --mrms-font-card-title: 15px;
    --mrms-font-body: 13.5px;
    --mrms-font-caption: 11.5px;

    /* Scrollbar */
    --mrms-scrollbar-track: #f8fafc;
    --mrms-scrollbar-thumb: #cbd5e1;

    /* ===== Sidebar Navigation Tokens ===== */
    --mrms-nav-separator: #e2e8f0;
    --mrms-nav-group-label: #475569;
    --mrms-nav-group-arrow: #94a3b8;
    --mrms-nav-active-bg: #4f46e5;
    --mrms-nav-active-text: #ffffff;
    --mrms-nav-active-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
    --mrms-nav-hover-bg: #f1f5f9;
    --mrms-nav-subitems-border: #cbd5e1;

    /* Color scheme hint for native inputs */
    color-scheme: light;
}

/* =========================================================================
   LIGHT MODE POLISH - QR and VIP branded elements
   ========================================================================= */
/* QR code white boxes need visible border on white light bg */
[data-theme="light"] .mrms-qr-box,
[data-theme="light"] .mrms-qr-wrap,
[data-theme="light"] #masterrms-app div[style*="background:#fff"][style*="border-radius:12px"] {
    border: 1px solid var(--mrms-border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
/* VIP dark gradient cards remain branded dark - ensure border stays visible in light */
[data-theme="light"] .mrms-vip-card {
    border-color: var(--mrms-border) !important;
}

/* =========================================================================
   THEME TOGGLE COMPONENT
   ========================================================================= */
.mrms-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--mrms-surface);
    border: 1px solid var(--mrms-border);
    border-radius: var(--mrms-radius-full);
}
.mrms-theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--mrms-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    padding: 0;
    line-height: 1;
}
.mrms-theme-toggle-btn:hover {
    color: var(--mrms-text-primary);
    background: var(--mrms-surface-hover);
}
.mrms-theme-toggle-btn.active {
    color: var(--mrms-accent);
    background: var(--mrms-accent-glow);
}

/* Design style switch (Classic / Neumo) - mirrors the theme toggle shape */
.mrms-design-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--mrms-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    padding: 0;
    line-height: 1;
}
.mrms-design-toggle-btn:hover {
    color: var(--mrms-text-primary);
    background: var(--mrms-surface-hover);
}
.mrms-design-toggle-btn.active {
    color: var(--mrms-accent);
    background: var(--mrms-accent-glow);
}

/* =========================================================================
   GLOBAL SCOPE (within #masterrms-app only)
   ========================================================================= */
#masterrms-app {
    font-family: var(--mrms-font);
    background-color: var(--mrms-bg-primary);
    color: var(--mrms-text-primary);
    min-height: calc(100vh - 32px);
    margin-left: -20px; /* Offset WordPress admin left margin */
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#masterrms-app *, #masterrms-app *::before, #masterrms-app *::after {
    box-sizing: border-box;
}

/* =========================================================================
   SCROLLBAR STYLING
   ========================================================================= */
#masterrms-app ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
#masterrms-app ::-webkit-scrollbar-track {
    background: var(--mrms-scrollbar-track, var(--mrms-bg-primary));
}
#masterrms-app ::-webkit-scrollbar-thumb {
    background: var(--mrms-scrollbar-thumb, var(--mrms-bg-tertiary));
    border-radius: var(--mrms-radius-full);
}
#masterrms-app ::-webkit-scrollbar-thumb:hover {
    background: var(--mrms-text-muted);
}

/* =========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================= */

/* Subtle fade-in + slide-up used for page loads and cards */
@keyframes mrmsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pulsing opacity used for "in-progress" indicator dots */
@keyframes mrmsPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.mrms-animate-fade {
    animation: mrmsFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
}

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */

/* ----- Text color utilities ----- */
.mrms-text-accent { color: var(--mrms-accent); }
.mrms-text-success { color: var(--mrms-success); }
.mrms-text-warning { color: var(--mrms-warning); }
.mrms-text-danger { color: var(--mrms-danger); }
.mrms-text-muted { color: var(--mrms-text-secondary); }

/* ----- Flexbox layout utilities ----- */
.mrms-flex { display: flex !important; }
.mrms-flex-col { display: flex !important; flex-direction: column !important; }
.mrms-items-center { align-items: center !important; }
.mrms-justify-between { justify-content: space-between !important; }
.mrms-justify-center { justify-content: center !important; }
.mrms-justify-end { justify-content: flex-end !important; }
.mrms-gap-1 { gap: 4px !important; }
.mrms-gap-2 { gap: 8px !important; }
.mrms-gap-3 { gap: 12px !important; }
.mrms-gap-4 { gap: 16px !important; }
.mrms-gap-6 { gap: 24px !important; }

/* =========================================================================
   STATUS BADGES
   ========================================================================= */

/* ----- Base badge style ----- */
.mrms-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--mrms-radius-full);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
    border: 1px solid transparent;
}
/* Small colored dot preceding badge text */
.mrms-badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* ----- 1. Pending - Amber / Warm Gold ----- */
.mrms-badge-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.35);
}
.mrms-badge-pending::before {
    background: #f59e0b;
    animation: mrmsPulse 1.5s infinite; /* Pulsing dot indicates awaiting action */
}

/* ----- 2. Confirmed - Royal Indigo ----- */
.mrms-badge-confirmed {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
    border-color: rgba(99, 102, 241, 0.35);
}
.mrms-badge-confirmed::before {
    background: #6366f1;
}

/* ----- 3. Preparing - Electric Sky Blue ----- */
.mrms-badge-preparing {
    background: rgba(14, 165, 233, 0.15);
    color: #0284c7;
    border-color: rgba(14, 165, 233, 0.35);
}
.mrms-badge-preparing::before {
    background: #0ea5e9;
    animation: mrmsPulse 1.5s infinite; /* Pulsing dot indicates active preparation */
}

/* ----- 4. Ready - Emerald Green ----- */
.mrms-badge-ready {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.35);
}
.mrms-badge-ready::before {
    background: #10b981;
}

/* ----- 5. Served - Vibrant Purple ----- */
.mrms-badge-served {
    background: rgba(168, 85, 247, 0.15);
    color: #7e22ce;
    border-color: rgba(168, 85, 247, 0.35);
}
.mrms-badge-served::before {
    background: #a855f7;
}

/* ----- 6. Completed - Deep Teal ----- */
.mrms-badge-completed {
    background: rgba(20, 184, 166, 0.15);
    color: #0f766e;
    border-color: rgba(20, 184, 166, 0.35);
}
.mrms-badge-completed::before {
    background: #14b8a6;
}

/* ----- 7. Cancelled - Crimson Red ----- */
.mrms-badge-cancelled {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.35);
}
.mrms-badge-cancelled::before {
    background: #ef4444;
}

/* =========================================================================
   GENERAL / TABLE / UTILITY BADGES
   ========================================================================= */

/* ----- Success / Paid / Available / Active (green) ----- */
.mrms-badge-success, .mrms-badge-paid, .mrms-badge-available, .mrms-badge-active {
    background: var(--mrms-success-bg);
    color: var(--mrms-success);
    border-color: var(--mrms-success-border);
}
.mrms-badge-success::before, .mrms-badge-paid::before, .mrms-badge-available::before, .mrms-badge-active::before {
    background: var(--mrms-success);
}

/* ----- Warning / Unpaid / Occupied (amber) ----- */
.mrms-badge-warning, .mrms-badge-unpaid, .mrms-badge-occupied {
    background: var(--mrms-warning-bg);
    color: var(--mrms-warning);
    border-color: var(--mrms-warning-border);
}
.mrms-badge-warning::before, .mrms-badge-unpaid::before, .mrms-badge-occupied::before {
    background: var(--mrms-warning);
}

/* ----- Danger / Inactive (red) ----- */
.mrms-badge-danger, .mrms-badge-inactive {
    background: var(--mrms-danger-bg);
    color: var(--mrms-danger);
    border-color: var(--mrms-danger-border);
}
.mrms-badge-danger::before, .mrms-badge-inactive::before {
    background: var(--mrms-danger);
}

/* ----- Info / Reserved / Cleaning (blue) ----- */
.mrms-badge-info, .mrms-badge-reserved, .mrms-badge-cleaning {
    background: var(--mrms-info-bg);
    color: var(--mrms-info);
    border-color: var(--mrms-info-border);
}
.mrms-badge-info::before, .mrms-badge-reserved::before, .mrms-badge-cleaning::before {
    background: var(--mrms-info);
}

/* =========================================================================
   ORDER ROW STATUS COLORS & ACCENT BORDERS
   ========================================================================= */
.mrms-order-row { transition: background 0.2s ease, border-color 0.2s ease; }
.mrms-order-row.status-pending { border-left: 5px solid #f59e0b !important; background: rgba(245, 158, 11, 0.05) !important; }
.mrms-order-row.status-confirmed { border-left: 5px solid #6366f1 !important; background: rgba(99, 102, 241, 0.05) !important; }
.mrms-order-row.status-preparing { border-left: 5px solid #0ea5e9 !important; background: rgba(14, 165, 233, 0.05) !important; }
.mrms-order-row.status-ready { border-left: 5px solid #10b981 !important; background: rgba(16, 185, 129, 0.05) !important; }
.mrms-order-row.status-served { border-left: 5px solid #a855f7 !important; background: rgba(168, 85, 247, 0.05) !important; }
.mrms-order-row.status-completed { border-left: 5px solid #14b8a6 !important; background: rgba(20, 184, 166, 0.05) !important; }
.mrms-order-row.status-cancelled { border-left: 5px solid #ef4444 !important; background: rgba(239, 68, 68, 0.05) !important; }

/* =========================================================================
   DATE & TIME PICKERS VISIBILITY & INVERTED INDICATORS
   ========================================================================= */
input[type="date"], input[type="time"],
.mrms-input[type="date"], .mrms-input[type="time"] {
    color: var(--mrms-text-primary, #0f172a) !important;
    background-color: var(--mrms-surface, #ffffff) !important;
    color-scheme: normal !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.85 !important;
    padding: 4px;
    filter: none !important;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1 !important;
}

[data-theme="dark"] input[type="date"], 
[data-theme="dark"] input[type="time"],
[data-theme="dark"] .mrms-input[type="date"], 
[data-theme="dark"] .mrms-input[type="time"] {
    color: #f8fafc !important;
    background-color: #1e293b !important;
    color-scheme: dark !important;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
}

[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] .mrms-input[type="date"],
[data-theme="light"] .mrms-input[type="time"] {
    color: #1e293b !important;
    background-color: #ffffff !important;
    color-scheme: light !important;
}

[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none !important;
}

/* =========================================================================
   DESIGN AUDIT FIXES (gstack review 2026-08-05)
   ========================================================================= */

/* ----- F-001: Page title bar (every subpage gets an H1) ----- */
.mrms-page-title-bar {
    padding: 2px 0 18px;
}
.mrms-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--mrms-text-primary);
}

/* ----- F-005: Heading scale - H2 reserved for page titles, H3 for card titles ----- */
.mrms-page-title-bar h2 { font-size: 22px; font-weight: 800; margin: 0; }
.mrms-card-title { font-size: 15px !important; font-weight: 800; line-height: 1.35; }
.mrms-modal-title { font-size: 17px !important; font-weight: 800; }

/* ----- F-004: Visible focus-visible ring on all interactive elements ----- */
#masterrms-app a:focus-visible,
#masterrms-app button:focus-visible,
#masterrms-app input:focus-visible,
#masterrms-app select:focus-visible,
#masterrms-app textarea:focus-visible,
#masterrms-app [tabindex]:focus-visible,
#masterrms-app [role="button"]:focus-visible {
    outline: 2px solid var(--mrms-accent, #6366f1) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
#masterrms-app a:focus,
#masterrms-app button:focus,
#masterrms-app input:focus,
#masterrms-app select:focus,
#masterrms-app textarea:focus {
    outline: none;
}

/* ----- F-006: Radius tiers - collapse to 3 (8/12/16) + full ----- */
.mrms-btn-sm { border-radius: 8px; }
.mrms-btn { border-radius: 10px; }
.mrms-select, .mrms-input, .mrms-input[type="text"], .mrms-input[type="number"], .mrms-input[type="date"], .mrms-input[type="time"], .mrms-input[type="email"], .mrms-input[type="tel"] { border-radius: 10px; }
.mrms-card, .mrms-order-card, .mrms-stat-card { border-radius: 14px; }
.mrms-popup-card { border-radius: 16px; }
.mrms-modal, .mrms-modal-card { border-radius: 16px; }

/* ----- F-003: Respect prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
    #masterrms-app *,
    #masterrms-app *::before,
    #masterrms-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----- F-007: Warmer empty states ----- */
.mrms-empty-state {
    text-align: center;
    padding: 36px 20px;
    color: var(--mrms-text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}
.mrms-empty-state .mrms-empty-icon { font-size: 30px; display: block; margin-bottom: 10px; opacity: 0.85; }
.mrms-empty-state .mrms-empty-action { margin-top: 12px; }

/* =========================================================================
   LIGHT MODE COMPONENT ENHANCEMENTS
   ========================================================================= */
[data-theme="light"] .mrms-sidebar {
    /* Sidebar - clean white with subtle shadow */
    background: var(--mrms-sidebar-bg, #ffffff);
    border-right: var(--mrms-sidebar-border, 1px solid #cbd5e1);
    box-shadow: var(--mrms-sidebar-shadow, 2px 0 8px rgba(0, 0, 0, 0.04));
}

/* Cards - enhanced elevation in light mode */
[data-theme="light"] .mrms-card,
[data-theme="light"] .mrms-stat-card,
[data-theme="light"] .mrms-hb-card,
[data-theme="light"] .db-card,
[data-theme="light"] .db-stat-card,
[data-theme="light"] .db-hero-card,
[data-theme="light"] .db-quick-bar,
[data-theme="light"] .dash-widget-card {
    background: var(--mrms-bg-secondary);
    border: var(--mrms-card-border);
    box-shadow: var(--mrms-card-shadow);
}
[data-theme="light"] .mrms-card:hover,
[data-theme="light"] .mrms-stat-card:hover,
[data-theme="light"] .mrms-hb-card:hover,
[data-theme="light"] .db-stat-card:hover,
[data-theme="light"] .dash-widget-card:hover {
    box-shadow: var(--mrms-card-shadow-hover);
    border-color: var(--mrms-card-border-hover);
    transform: translateY(-2px);
}

/* Stat cards - subtle gradient accent on top */
[data-theme="light"] .mrms-stat-card {
    border-top: 3px solid var(--mrms-accent);
}

/* Inputs - clean white with crisp borders */
[data-theme="light"] .mrms-input,
[data-theme="light"] .mrms-select,
[data-theme="light"] .mrms-textarea {
    background: var(--mrms-input-bg);
    border: 1.5px solid var(--mrms-input-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .mrms-input:focus,
[data-theme="light"] .mrms-select:focus,
[data-theme="light"] .mrms-textarea:focus {
    border-color: var(--mrms-accent);
    box-shadow: 0 0 0 3px var(--mrms-accent-glow), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Buttons - enhanced depth */
[data-theme="light"] .mrms-btn-primary {
    background: linear-gradient(135deg, var(--mrms-accent), var(--mrms-accent-hover));
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: none;
}
[data-theme="light"] .mrms-btn-primary:hover {
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.25), 0 2px 4px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
[data-theme="light"] .mrms-btn-secondary {
    background: var(--mrms-bg-secondary);
    border: 1.5px solid var(--mrms-border);
    box-shadow: var(--mrms-shadow-xs);
}

/* Table rows - subtle hover elevation */
[data-theme="light"] table tbody tr {
    border-bottom: 1px solid var(--mrms-border);
}
[data-theme="light"] table tbody tr:hover {
    background: var(--mrms-surface-hover);
    box-shadow: var(--mrms-shadow-xs);
}

/* Badges - crisp borders */
[data-theme="light"] .mrms-badge {
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Dropdowns and popups - elevated shadow */
[data-theme="light"] .mrms-popup-card,
[data-theme="light"] .mrms-dropdown {
    background: var(--mrms-bg-secondary);
    border: var(--mrms-card-border);
    box-shadow: var(--mrms-shadow-xl);
}

/* Modal - premium glass effect */
[data-theme="light"] .mrms-modal,
[data-theme="light"] .mrms-popup-overlay > div {
    background: var(--mrms-modal-bg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--mrms-border);
}

/* Page header - subtle bottom shadow */
[data-theme="light"] .mrms-page-header,
[data-theme="light"] .mrms-header-bar {
    background: var(--mrms-bg-secondary);
    border-bottom: 1px solid var(--mrms-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Tabs - clean active state */
[data-theme="light"] .mrms-tab.active,
[data-theme="light"] .nav-tab.active {
    border-bottom-color: var(--mrms-accent);
    box-shadow: 0 2px 0 var(--mrms-accent);
}

/* Dashboard Live Date Text - high contrast in light mode */
[data-theme="light"] .dash-date-text,
[data-theme="light"] .dash-date-text strong {
    color: var(--mrms-text-primary) !important;
}

/* ===== Drawer theme parity - floor/tables/rooms (v7.20.101) =====
   Table inspector drawer was hardcoded dark; make it follow the theme.
   Dark mode keeps the same look via --mrms-bg-secondary (#1a1d27). */
html[data-theme="light"] #table-drawer, html[data-theme="light"] #edit-table-drawer, html[data-theme="light"] .table-inspector-drawer {
    background-color: var(--mrms-bg-secondary) !important;
    color: var(--mrms-text-primary) !important;
    border-left: 1px solid var(--mrms-border) !important;
    box-shadow: -6px 0 25px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] #table-drawer .flr-drawer-header, html[data-theme="light"] #edit-table-drawer .flr-drawer-header, html[data-theme="light"] .table-inspector-drawer .flr-drawer-header, html[data-theme="light"] #table-drawer .table-inspector-header, html[data-theme="light"] #edit-table-drawer .table-inspector-header, html[data-theme="light"] .table-inspector-drawer .table-inspector-header, html[data-theme="light"] #table-drawer .flr-drawer-body, html[data-theme="light"] #edit-table-drawer .flr-drawer-body, html[data-theme="light"] .table-inspector-drawer .flr-drawer-body, html[data-theme="light"] #table-drawer .table-inspector-body, html[data-theme="light"] #edit-table-drawer .table-inspector-body, html[data-theme="light"] .table-inspector-drawer .table-inspector-body, html[data-theme="light"] #table-drawer #drawer-body-content, html[data-theme="light"] #edit-table-drawer #drawer-body-content, html[data-theme="light"] .table-inspector-drawer #drawer-body-content, html[data-theme="light"] #table-drawer .flr-drawer-footer, html[data-theme="light"] #edit-table-drawer .flr-drawer-footer, html[data-theme="light"] .table-inspector-drawer .flr-drawer-footer, html[data-theme="light"] #table-drawer .table-inspector-footer, html[data-theme="light"] #edit-table-drawer .table-inspector-footer, html[data-theme="light"] .table-inspector-drawer .table-inspector-footer, html[data-theme="light"] #table-drawer #drawer-footer-content, html[data-theme="light"] #edit-table-drawer #drawer-footer-content, html[data-theme="light"] .table-inspector-drawer #drawer-footer-content {
    background-color: var(--mrms-bg-secondary) !important;
    color: var(--mrms-text-primary) !important;
    border-color: var(--mrms-border) !important;
}
html[data-theme="light"] #table-drawer .drawer-title, html[data-theme="light"] #edit-table-drawer .drawer-title, html[data-theme="light"] .table-inspector-drawer .drawer-title, html[data-theme="light"] #table-drawer .flr-drawer-title, html[data-theme="light"] #edit-table-drawer .flr-drawer-title, html[data-theme="light"] .table-inspector-drawer .flr-drawer-title, html[data-theme="light"] #table-drawer .table-inspector-title, html[data-theme="light"] #edit-table-drawer .table-inspector-title, html[data-theme="light"] .table-inspector-drawer .table-inspector-title {
    color: var(--mrms-text-primary) !important;
}
html[data-theme="light"] #table-drawer .form-group, html[data-theme="light"] #edit-table-drawer .form-group, html[data-theme="light"] .table-inspector-drawer .form-group, html[data-theme="light"] #table-drawer .form-group input, html[data-theme="light"] #edit-table-drawer .form-group input, html[data-theme="light"] .table-inspector-drawer .form-group input, html[data-theme="light"] #table-drawer input, html[data-theme="light"] #edit-table-drawer input, html[data-theme="light"] .table-inspector-drawer input, html[data-theme="light"] #table-drawer select, html[data-theme="light"] #edit-table-drawer select, html[data-theme="light"] .table-inspector-drawer select {
    background: var(--mrms-bg-secondary) !important;
    color: var(--mrms-text-primary) !important;
    border: 1px solid var(--mrms-border) !important;
}
html[data-theme="light"] #table-drawer .btn-status, html[data-theme="light"] #edit-table-drawer .btn-status, html[data-theme="light"] .table-inspector-drawer .btn-status, html[data-theme="light"] #table-drawer .btn-set-status, html[data-theme="light"] #edit-table-drawer .btn-set-status, html[data-theme="light"] .table-inspector-drawer .btn-set-status {
    color: var(--mrms-text-primary) !important;
}
html[data-theme="light"] #table-drawer .btn-status.active, html[data-theme="light"] #edit-table-drawer .btn-status.active, html[data-theme="light"] .table-inspector-drawer .btn-status.active, html[data-theme="light"] #table-drawer .btn-set-status.active, html[data-theme="light"] #edit-table-drawer .btn-set-status.active, html[data-theme="light"] .table-inspector-drawer .btn-set-status.active {
    color: var(--mrms-text-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================================
   2026 HOSPITALITY DESIGN SYSTEMS (MasterRMS v7.20.106)
   ============================================================ */

/* DESIGN 1 - GRAND HERITAGE & LUXURY BOUTIQUE */
:root[data-theme="grand-heritage"],
.ws-theme-grand-heritage {
    color-scheme: dark;
    --ws-bg: #0E0C09;
    --ws-bg-alt: #F4EEE2;
    --ws-surface: #16130E;
    --ws-surface-elevated: #1E1A13;
    --ws-primary: #C8A96A;
    --ws-accent: #E3C58C;
    --ws-accent-contrast: #181207;
    --ws-text: #F4EEE2;
    --ws-text-muted: #A89C86;
    --ws-text-invert: #1B160D;
    --ws-border: rgba(200, 169, 106, 0.22);
    --ws-hairline: rgba(200, 169, 106, 0.40);
    --ws-radius-sm: 2px;
    --ws-radius-md: 4px;
    --ws-radius-lg: 10px;
    --ws-radius-pill: 999px;
    --ws-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
    --ws-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    --ws-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
    --ws-font-heading: 'Playfair Display', 'Georgia', serif;
    --ws-font-body: 'Inter', system-ui, sans-serif;
    --ws-tracking-eyebrow: 0.32em;
    --ws-tracking-badge: 0.14em;
    --mrms-glass-bg: rgba(14, 12, 9, 0.55);
    --mrms-glass-blur: 12px;
    --mrms-glass-border: 1px solid rgba(200, 169, 106, 0.25);
}

/* DESIGN 2 - NORDIC ORGANIC & BOTANICAL SANCTUARY */
:root[data-theme="nordic-organic"],
.ws-theme-nordic-organic {
    color-scheme: light;
    --ws-bg: #F5F0E6;
    --ws-bg-alt: #EDE6D6;
    --ws-surface: #FCFAF4;
    --ws-surface-elevated: #FFFFFF;
    --ws-primary: #3F5240;
    --ws-accent: #C2603E;
    --ws-accent-contrast: #FFF9F2;
    --ws-text: #26251F;
    --ws-text-muted: #75705F;
    --ws-text-invert: #FBF7EE;
    --ws-border: #E4DCC9;
    --ws-hairline: #D8CDB4;
    --ws-radius-sm: 12px;
    --ws-radius-md: 20px;
    --ws-radius-lg: 28px;
    --ws-radius-pill: 999px;
    --ws-shadow-sm: 0 4px 14px rgba(122, 104, 71, 0.08);
    --ws-shadow: 0 12px 32px rgba(122, 104, 71, 0.12);
    --ws-shadow-lg: 0 24px 56px rgba(122, 104, 71, 0.16);
    --ws-font-heading: 'Fraunces', 'Georgia', serif;
    --ws-font-body: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
    --ws-tracking-eyebrow: 0.18em;
    --ws-tracking-badge: 0.08em;
    --mrms-glass-bg: rgba(252, 250, 244, 0.72);
    --mrms-glass-blur: 14px;
    --mrms-glass-border: 1px solid rgba(228, 220, 201, 0.9);
}

/* DESIGN 3 - MIDNIGHT NEON & CYBER-IZAKAYA */
:root[data-theme="cyber-izakaya"],
.ws-theme-cyber-izakaya {
    color-scheme: dark;
    --ws-bg: #0B0E14;
    --ws-bg-alt: #0E1220;
    --ws-surface: #10141D;
    --ws-surface-elevated: #161C29;
    --ws-primary: #FFB02E;
    --ws-accent: #FF4D67;
    --ws-accent-contrast: #14060A;
    --ws-text: #EDF1FA;
    --ws-text-muted: #8C95AA;
    --ws-text-invert: #0B0E14;
    --ws-border: rgba(148, 163, 199, 0.14);
    --ws-hairline: rgba(255, 176, 46, 0.35);
    --ws-radius-sm: 8px;
    --ws-radius-md: 14px;
    --ws-radius-lg: 20px;
    --ws-radius-pill: 999px;
    --ws-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.45);
    --ws-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    --ws-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.65);
    --ws-glow-amber: 0 0 28px rgba(255, 176, 46, 0.30);
    --ws-glow-coral: 0 0 28px rgba(255, 77, 103, 0.35);
    --ws-font-heading: 'Syne', system-ui, sans-serif;
    --ws-font-body: 'Space Grotesk', system-ui, sans-serif;
    --ws-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --ws-tracking-eyebrow: 0.22em;
    --ws-tracking-badge: 0.10em;
    --mrms-glass-bg: rgba(16, 20, 29, 0.58);
    --mrms-glass-blur: 20px;
    --mrms-glass-border: 1px solid rgba(255, 255, 255, 0.09);
    --mrms-ambient: radial-gradient(900px 500px at 12% -5%, rgba(255, 176, 46, 0.08), transparent 70%), radial-gradient(800px 520px at 95% 105%, rgba(255, 77, 103, 0.07), transparent 70%);
}

/* DESIGN 4 - SUN-DRENCHED MEDITERRANEAN & COASTAL VILLA */
:root[data-theme="coastal-villa"],
.ws-theme-coastal-villa {
    color-scheme: light;
    --ws-bg: #F7F1E4;
    --ws-bg-alt: #F1E8D4;
    --ws-surface: #FFFCF5;
    --ws-surface-elevated: #FFFFFF;
    --ws-primary: #1E56D6;
    --ws-accent: #C75C33;
    --ws-accent-contrast: #FFF6EF;
    --ws-text: #22333D;
    --ws-text-muted: #8A7C67;
    --ws-text-invert: #FDF9F0;
    --ws-border: #EADFC9;
    --ws-hairline: #DFD2B8;
    --ws-radius-sm: 10px;
    --ws-radius-md: 16px;
    --ws-radius-lg: 24px;
    --ws-radius-pill: 999px;
    --ws-radius-arch: 999px 999px 16px 16px;
    --ws-shadow-sm: 0 4px 16px rgba(122, 90, 52, 0.10);
    --ws-shadow: 0 14px 36px rgba(122, 90, 52, 0.14);
    --ws-shadow-lg: 0 26px 60px rgba(122, 90, 52, 0.18);
    --ws-font-heading: 'Marcellus', 'Georgia', serif;
    --ws-font-body: 'DM Sans', system-ui, sans-serif;
    --ws-tracking-eyebrow: 0.24em;
    --ws-tracking-badge: 0.06em;
    --mrms-glass-bg: rgba(255, 252, 245, 0.75);
    --mrms-glass-blur: 12px;
    --mrms-glass-border: 1px solid rgba(234, 223, 201, 0.9);
}

/* DESIGN 5 - ALPINE MODERN & CHALET HEARTH */
:root[data-theme="chalet-hearth"],
.ws-theme-chalet-hearth {
    color-scheme: dark;
    --ws-bg: #17130F;
    --ws-bg-alt: #1E1812;
    --ws-surface: #211B14;
    --ws-surface-elevated: #2A2318;
    --ws-primary: #35604D;
    --ws-accent: #C97C45;
    --ws-accent-contrast: #1C0F06;
    --ws-text: #F2EBDF;
    --ws-text-muted: #A79884;
    --ws-text-invert: #17130F;
    --ws-border: #3B3226;
    --ws-inner-border: rgba(255, 255, 255, 0.07);
    --ws-hairline: rgba(201, 124, 69, 0.40);
    --ws-radius-sm: 6px;
    --ws-radius-md: 10px;
    --ws-radius-lg: 14px;
    --ws-radius-pill: 999px;
    --ws-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.40);
    --ws-shadow: 0 10px 30px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --ws-shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.60);
    --ws-font-heading: 'Archivo', system-ui, sans-serif;
    --ws-font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --ws-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --ws-tracking-eyebrow: 0.26em;
    --ws-tracking-badge: 0.10em;
    --mrms-glass-bg: rgba(33, 27, 20, 0.60);
    --mrms-glass-blur: 10px;
    --mrms-glass-border: 1px solid rgba(59, 50, 38, 0.9);
}


/* =========================================================================
   COLOR THEME VARIATIONS (Overrides Dark/Light Defaults)
   ========================================================================= */
[data-color-theme="green"] {
    --mrms-accent: #10b981;
    --mrms-accent-hover: #059669;
    --mrms-accent-glow: rgba(16, 185, 129, 0.25);
    --mrms-border-highlight: rgba(16, 185, 129, 0.3);
}
[data-color-theme="red"] {
    --mrms-accent: #e11d48;
    --mrms-accent-hover: #be123c;
    --mrms-accent-glow: rgba(225, 29, 72, 0.25);
    --mrms-border-highlight: rgba(225, 29, 72, 0.3);
}
[data-color-theme="orange"] {
    --mrms-accent: #f97316;
    --mrms-accent-hover: #ea580c;
    --mrms-accent-glow: rgba(249, 115, 22, 0.25);
    --mrms-border-highlight: rgba(249, 115, 22, 0.3);
}
[data-color-theme="purple"] {
    --mrms-accent: #8b5cf6;
    --mrms-accent-hover: #7c3aed;
    --mrms-accent-glow: rgba(139, 92, 246, 0.25);
    --mrms-border-highlight: rgba(139, 92, 246, 0.3);
}


/* =========================================================================
   PROMPT 13 - LIGHT MODE CONTRAST (WCAG 2.1 AA)
   -------------------------------------------------------------------------
   Every rule here is scoped to [data-theme="light"]. Tokens are used where a
   token exists; the literal slate values are the measurement anchors from the
   audit (>= 4.5:1 on #ffffff for body text, >= 3:1 for large text and icons).
   ========================================================================= */

/* Native controls: browsers paint date pickers and option lists from
   color-scheme, so keep it light and give the text an explicit colour. */
[data-theme="light"] {
    color-scheme: light;
}

[data-theme="light"] .mrms-input,
[data-theme="light"] .mrms-select,
[data-theme="light"] .mrms-textarea,
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
}

[data-theme="light"] .mrms-input::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #64748b !important;   /* slate-500: 4.76:1, AA for placeholder text */
    opacity: 1;
}

[data-theme="light"] select option,
[data-theme="light"] datalist option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

[data-theme="light"] .mrms-label,
[data-theme="light"] label.mrms-label,
[data-theme="light"] label {
    color: #1e293b;
}

[data-theme="light"] .mrms-input:disabled,
[data-theme="light"] .mrms-select:disabled,
[data-theme="light"] .mrms-textarea:disabled,
[data-theme="light"] input:disabled,
[data-theme="light"] select:disabled {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* Native date/time pickers draw their indicator in the text colour. */
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.75;
}

/* Modal surfaces and chrome */
[data-theme="light"] .mrms-modal,
[data-theme="light"] .mrms-popup-card,
[data-theme="light"] .co-popup,
[data-theme="light"] .mrms-modal-overlay > div,
[data-theme="light"] .mrms-popup-overlay > div {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .mrms-modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .mrms-modal-header h3,
[data-theme="light"] .mrms-modal-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme="light"] .mrms-modal-close {
    color: #475569 !important;
    background: rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .mrms-modal-close:hover {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .mrms-modal-footer,
[data-theme="light"] .mrms-modal-footer-sticky {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .mrms-modal-body,
[data-theme="light"] .mrms-popup-body {
    color: #0f172a !important;
}

/* Header dropdowns (account menu, quick actions) */
[data-theme="light"] #mrms-user-menu,
[data-theme="light"] #mrms-quick-actions-menu,
[data-theme="light"] .mrms-dropdown {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.22) !important;
}

[data-theme="light"] #mrms-user-menu a,
[data-theme="light"] #mrms-quick-actions-menu a,
[data-theme="light"] .mrms-dropdown a {
    color: #0f172a !important;
}

[data-theme="light"] #mrms-user-menu a:hover,
[data-theme="light"] #mrms-quick-actions-menu a:hover,
[data-theme="light"] #mrms-user-chip:hover {
    background: #f1f5f9 !important;
}

[data-theme="light"] #mrms-user-menu .mrms-menu-user-email,
[data-theme="light"] .mrms-menu-user-email {
    color: #475569 !important;
}

/* Status pills and badges: the dark-theme pastels fail AA on white */
[data-theme="light"] .mrms-pg-pill {
    color: #15803d !important;
    border-color: rgba(21, 128, 61, 0.35) !important;
    background: rgba(21, 128, 61, 0.08) !important;
}

[data-theme="light"] .mrms-pg-pill.is-danger,
[data-theme="light"] .mrms-pg-pill[data-tone="danger"] {
    color: #b91c1c !important;
    border-color: rgba(185, 28, 28, 0.35) !important;
    background: rgba(185, 28, 28, 0.08) !important;
}

[data-theme="light"] .cc-badge,
[data-theme="light"] .mrms-badge-success {
    color: #15803d !important;
    background: rgba(21, 128, 61, 0.08) !important;
    border-color: rgba(21, 128, 61, 0.25) !important;
}

[data-theme="light"] .cc-toggle.danger,
[data-theme="light"] .cc-btn.danger {
    color: #b91c1c !important;
    border-color: rgba(185, 28, 28, 0.35) !important;
}

[data-theme="light"] .mrms-nav-group-arrow {
    color: #64748b !important;
}

[data-theme="light"] .mrms-bio-row {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .mrms-bio-name {
    color: #0f172a !important;
}

[data-theme="light"] .mrms-bio-meta {
    color: #475569 !important;
}

/* Tooltips and toasts are dark surfaces in both themes; keep their text white. */
[data-theme="light"] .mrms-toast {
    color: #f8fafc;
}


/* Prompt 13 - disabled controls must look disabled, not merely dimmed by an
   ancestor's opacity. Dashed borders read as "not editable" at a glance. */
[data-theme="light"] .mrms-input:disabled,
[data-theme="light"] .mrms-select:disabled,
[data-theme="light"] .mrms-textarea:disabled {
    background-color: #eef2f7 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    border: 1.5px dashed #cbd5e1 !important;
    cursor: not-allowed !important;
}

.mrms-btn-primary:disabled,
.mrms-btn-primary[disabled] {
    background: var(--mrms-bg-tertiary) !important;
    color: var(--mrms-text-muted) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* Locked fiscal fields: an ID-scoped rule so no class-level !important input
   style (theme or component layer) can repaint them as editable. */
[data-theme="light"] #masterrms-app .mrms-set-locked .mrms-input,
[data-theme="light"] #masterrms-app .mrms-set-locked .mrms-select,
[data-theme="light"] #masterrms-app .mrms-set-locked textarea {
    background: #eef2f7 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    border: 1.5px dashed #cbd5e1 !important;
    cursor: not-allowed !important;
}

[data-theme="dark"] #masterrms-app .mrms-set-locked .mrms-input,
[data-theme="dark"] #masterrms-app .mrms-set-locked .mrms-select,
[data-theme="dark"] #masterrms-app .mrms-set-locked textarea {
    opacity: .7;
    border: 1.5px dashed var(--mrms-border) !important;
    cursor: not-allowed !important;
}


/* ==========================================================================
   Prompt 14 - 4-level performance & low-data slider
   data-perf-mode on <html>, applied before first paint by the boot script.
   1 Ultra-SaaS (default)  2 Balanced Fast  3 Lite/Low-Data  4 Turbo Extreme
   ========================================================================== */

/* Level 1 is the untouched design: glass, soft shadows, full motion. */
html[data-perf-mode="1"] {
    --mrms-perf-blur: 1;
}

/* Level 2 - Balanced Fast: blur is the single most expensive paint on the
   floor screens (sticky header, modals, cards), so it goes first. */
html[data-perf-mode="2"] {
    --mrms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.14);
    --mrms-shadow-md: 0 3px 8px rgba(0, 0, 0, 0.16);
    --mrms-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.18);
    --mrms-shadow-glow: none;
    --mrms-radius-lg: 10px;
}
html[data-perf-mode="2"] *,
html[data-perf-mode="2"] *::before,
html[data-perf-mode="2"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Level 3 - Lite / Low-Data: flat borders, no shadows, near-instant motion. */
html[data-perf-mode="3"] {
    --mrms-radius-sm: 4px;
    --mrms-radius-md: 6px;
    --mrms-radius-lg: 8px;
    --mrms-shadow-sm: none;
    --mrms-shadow-md: none;
    --mrms-shadow-lg: none;
    --mrms-shadow-glow: none;
}
html[data-perf-mode="3"] *,
html[data-perf-mode="3"] *::before,
html[data-perf-mode="3"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    transition-duration: 0.05s !important;
    animation-duration: 0.05s !important;
    animation-iteration-count: 1 !important;
}
html[data-perf-mode="3"] .mrms-animate-fade,
html[data-perf-mode="3"] .mrms-page-title { animation: none !important; }

/* Level 4 - Turbo Extreme: native system font (no webfont work), no shadows,
   no motion, no blur, and content-visibility on long lists so offscreen rows
   are not laid out until they are needed. */
html[data-perf-mode="4"] {
    --mrms-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mrms-radius-sm: 2px;
    --mrms-radius-md: 4px;
    --mrms-radius-lg: 4px;
    --mrms-shadow-sm: none;
    --mrms-shadow-md: none;
    --mrms-shadow-lg: none;
    --mrms-shadow-glow: none;
}
html[data-perf-mode="4"] *,
html[data-perf-mode="4"] *::before,
html[data-perf-mode="4"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
}
html[data-perf-mode="4"] body,
html[data-perf-mode="4"] button,
html[data-perf-mode="4"] input,
html[data-perf-mode="4"] select,
html[data-perf-mode="4"] textarea {
    font-family: var(--mrms-font) !important;
}
html[data-perf-mode="4"] .mrms-order-row,
html[data-perf-mode="4"] .mrms-kds-ticket,
html[data-perf-mode="4"] .mrms-card { content-visibility: auto; contain-intrinsic-size: auto 120px; }

/* Header trigger for the same control (always reachable, one click cycles). */
.mrms-perf-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px;
    border-radius: 8px; border: 1px solid var(--mrms-border); cursor: pointer;
    background: var(--mrms-bg-secondary); color: var(--mrms-text-secondary);
    font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.mrms-perf-btn:hover { border-color: var(--mrms-accent); color: var(--mrms-text-primary); }
html[data-perf-mode="3"] .mrms-perf-btn,
html[data-perf-mode="4"] .mrms-perf-btn { background: var(--mrms-bg-tertiary); }


/* Prompt 14 - header theme pill. Compact so it sits beside the bell without
   pushing the avatar off a 1080p bar; the phone sheet carries the same control
   below 783px, where the header simply has no room left. */
.mrms-theme-toggle--header {
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--mrms-border);
    border-radius: 10px;
    background: var(--mrms-bg-secondary);
}
.mrms-theme-toggle--header .mrms-theme-toggle-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
}
@media (max-width: 782px) {
    .mrms-theme-toggle--header,
    .mrms-header-actions .mrms-perf-btn { display: none !important; }
}


/* ==========================================================================
   Prompt 14 - KDS board: 2 / 3 / 4 column switcher and compact tickets
   ========================================================================== */
.mrms-kds-grid {
    display: grid;
    gap: 10px;
    align-items: start;
    grid-auto-rows: min-content;
}
.mrms-kds-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mrms-kds-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mrms-kds-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A 1080p kitchen screen keeps four columns; smaller screens step down so a
   card never becomes narrower than a readable ticket. */
@media (max-width: 1500px) {
    .mrms-kds-grid[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .mrms-kds-grid[data-cols="4"],
    .mrms-kds-grid[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .mrms-kds-grid[data-cols="4"],
    .mrms-kds-grid[data-cols="3"],
    .mrms-kds-grid[data-cols="2"] { grid-template-columns: 1fr; }
}

.mrms-kds-ticket { min-width: 0; }
.mrms-kds-ticket .mrms-btn-sm { padding: 4px 8px; min-height: 28px; font-size: 11px; }


/* ==========================================================================
   Prompt 15 - capability matrix cards (custom role modal)
   ========================================================================== */
.mrms-cap-group.is-collapsed .mrms-cap-group-grid { display: none !important; }
#form-create-role .role-cap-item { transition: border-color .12s ease, background .12s ease; }
#form-create-role .role-cap-item:hover { border-color: var(--mrms-accent) !important; }
#form-create-role .role-cap-item:has(input:checked) {
    border-color: rgba(99, 102, 241, 0.55) !important;
    background: rgba(99, 102, 241, 0.10) !important;
}
#form-create-role .mrms-cap-group { transition: border-color .12s ease; }


/* ==========================================================================
   Prompt 16 - Turbo navigation: iridescent progress bar + island swap
   ========================================================================== */
#mrms-top-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2.5px;
    width: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, var(--mrms-accent, #6366f1), #3b82f6 55%, var(--mrms-success, #10b981));
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.55);
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    will-change: width, opacity;
}
#mrms-top-progress.is-active { opacity: 1; }

#mrms-react-root.mrms-turbo-swap { animation: mrmsTurboIn 0.18s ease-out; }
@keyframes mrmsTurboIn {
    from { opacity: 0.55; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #mrms-top-progress { transition: none; }
    #mrms-react-root.mrms-turbo-swap { animation: none; }
}