/**
 * MasterRMS UI Components CSS
 *
 * v4.0.0 - Enterprise Restaurant Management System
 *
 * All reusable visual components for the admin interface.  Depends on CSS
 * variables defined in `design-system.css` for consistent theming.
 *
 * Sections:
 * - Glass Cards (basic, selected, glass-morphism)
 * - Stat Cards (bento grid, icon + value + label)
 * - Floating Bulk Action Bar
 * - Buttons (primary, secondary, danger, success, small)
 * - Forms & Inputs (text, select, textarea, checkboxes)
 * - Tables (container, header, rows, hover, selected)
 * - Modal Popup & Slide-in Panels (overlay, sizing, header, close)
 * - Order Modal (5 customizable sizes + 5 layout themes)
 * - Toast Notifications
 */

/* =========================================================================
   COMPONENTS: GLASS CARDS
   ========================================================================= */

/* Base card with subtle border and shadow */
.mrms-card {
    background: var(--mrms-bg-secondary);
    border: var(--mrms-card-border, 1px solid var(--mrms-border));
    border-radius: var(--mrms-radius-lg);
    padding: 20px;
    box-shadow: var(--mrms-card-shadow, var(--mrms-shadow-sm));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    
}

.mrms-card:hover {
    box-shadow: var(--mrms-card-shadow-hover, var(--mrms-shadow-md));
    border-color: var(--mrms-card-border-hover, var(--mrms-border));
}

/* Selected card state: indigo border, subtle indigo background, glow ring */
.mrms-card.selected {
    border-color: var(--mrms-accent) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: 0 0 0 2px var(--mrms-accent-glow) !important;
}

/* Checkbox positioned at the top-left corner of selectable cards */
.mrms-card-checkbox {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--mrms-accent);
}

/* Card header bar: Deep Royal Indigo gradient for card title+action rows (Option 3) */
.mrms-card .mrms-header-bar {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%) !important;
    color: #ffffff !important;
    padding: 14px 20px;
    margin: -20px -20px 16px -20px;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.mrms-card .mrms-header-bar .mrms-card-title {
    color: #ffffff !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.mrms-card .mrms-header-bar span,
.mrms-card .mrms-header-bar .mrms-header-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}
.mrms-card .mrms-header-bar .mrms-btn-secondary {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mrms-card .mrms-header-bar .mrms-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}
.mrms-card .mrms-header-bar .mrms-badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Card header bar in Light Mode: refined slate surface with dark text */
[data-theme="light"] .mrms-card .mrms-header-bar {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: var(--mrms-text-primary) !important;
    border-bottom: 1px solid var(--mrms-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-card-title {
    color: var(--mrms-text-primary) !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar span,
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-header-subtitle {
    color: var(--mrms-text-secondary) !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-btn-secondary {
    background: #ffffff !important;
    color: var(--mrms-text-primary) !important;
    border: 1px solid var(--mrms-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-btn-secondary:hover {
    background: var(--mrms-surface-hover) !important;
    border-color: var(--mrms-accent) !important;
    color: var(--mrms-accent) !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-badge {
    background: var(--mrms-badge-neutral-bg) !important;
    color: var(--mrms-badge-neutral-text) !important;
    border: 1px solid var(--mrms-border) !important;
}

/* Glass-morphism variant with backdrop blur */
.mrms-card-glass {
    background: var(--mrms-card-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Card header row (title + optional actions) */
.mrms-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mrms-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mrms-text-primary);
    margin: 0;
}

/* Ensure h3 headings inside cards use correct text color */
.mrms-card h3 {
    color: var(--mrms-text-primary);
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

/* =========================================================================
   COMPONENTS: STAT CARDS (BENTO GRID)
   ========================================================================= */

/* Responsive grid for stat cards */
.mrms-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Individual stat card: icon on left, value + label on right */
.mrms-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--mrms-bg-secondary);
    border: var(--mrms-card-border, 1px solid var(--mrms-border));
    border-radius: var(--mrms-radius-lg);
    padding: 18px 20px;
    box-shadow: var(--mrms-card-shadow, var(--mrms-shadow-sm));
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mrms-stat-card:hover {
    box-shadow: var(--mrms-card-shadow-hover, var(--mrms-shadow-md));
    transform: translateY(-1px);
}

/* Stat icon container (square, rounded) */
.mrms-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--mrms-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--mrms-surface-hover);
}

/* Large numeric stat value */
.mrms-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--mrms-text-primary);
    line-height: 1.2;
}

/* Label beneath the stat value */
.mrms-stat-label {
    font-size: 12px;
    color: var(--mrms-text-secondary);
    font-weight: 500;
}

/* =========================================================================
   COMPONENTS: FLOATING BULK ACTION BAR
   ========================================================================= */

/* Appears when items are selected, sticks below the header */
.mrms-bulk-bar {
    position: sticky;
    top: 70px;
    z-index: 850;
    background: var(--mrms-bg-tertiary);
    border: 1px solid var(--mrms-accent);
    border-radius: var(--mrms-radius-md);
    padding: 10px 18px;
    margin-bottom: 16px;
    box-shadow: var(--mrms-shadow-lg);
    display: none;                 /* Hidden by default */
    align-items: center;
    justify-content: space-between;
    animation: mrmsFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Shown when .active class is added */
.mrms-bulk-bar.active {
    display: flex;
}

/* Selected count text */
.mrms-bulk-count {
    font-weight: 600;
    color: var(--mrms-accent);
    font-size: 13.5px;
}

/* =========================================================================
   COMPONENTS: BUTTONS
   ========================================================================= */

/* Base button style */
.mrms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--mrms-radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}

/* ----- Primary button (indigo accent) ----- */
.mrms-btn-primary {
    background: var(--mrms-accent);
    color: #fff;
}
.mrms-btn-primary:hover {
    background: var(--mrms-accent-hover);
    box-shadow: 0 4px 12px var(--mrms-accent-glow);
    transform: translateY(-1px);
}

/* ----- Secondary button (dark with border) ----- */
.mrms-btn-secondary {
    background: var(--mrms-bg-tertiary);
    color: var(--mrms-text-primary);
    border-color: var(--mrms-border);
}
.mrms-btn-secondary:hover {
    background: var(--mrms-surface-hover);
    border-color: var(--mrms-accent, #6366f1);
    color: var(--mrms-text-primary);
}

/* ----- Danger button (red) ----- */
.mrms-btn-danger {
    background: var(--mrms-danger);
    color: #fff;
}
.mrms-btn-danger:hover {
    background: #b91c1c;
}

/* ----- Success button (green) ----- */
.mrms-btn-success {
    background: var(--mrms-success);
    color: #fff;
}
.mrms-btn-success:hover {
    background: #166534;
}

/* ----- Small button variant ----- */
.mrms-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 8px;
}

/* =========================================================================
   COMPONENTS: FORMS & INPUTS
   ========================================================================= */

/* Form field group wrapper */
.mrms-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

/* Input label */
.mrms-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--mrms-text-secondary);
}

/* Shared input, select, and textarea styles */
.mrms-input, .mrms-select, .mrms-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--mrms-bg-primary);
    border: 1px solid var(--mrms-border);
    border-radius: var(--mrms-radius-sm);
    color: var(--mrms-text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

/* Focus ring using accent color */
.mrms-input:focus, .mrms-select:focus, .mrms-textarea:focus {
    border-color: var(--mrms-accent);
    box-shadow: 0 0 0 2px var(--mrms-accent-glow);
}

/* Accessible dual-ring keyboard focus (a11y) */
.mrms-input:focus-visible, .mrms-select:focus-visible, .mrms-textarea:focus-visible {
    border-color: var(--mrms-accent);
    outline: 2px solid var(--mrms-accent);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--mrms-accent-glow);
}

.mrms-btn:focus-visible {
    outline: 2px solid var(--mrms-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--mrms-accent-glow);
}

/* =========================================================================
   COMPONENTS: CHECKBOXES
   ========================================================================= */

input[type="checkbox"].mrms-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--mrms-accent);
    cursor: pointer;
}

/* =========================================================================
   COMPONENTS: TABLES
   ========================================================================= */

/* Scrollable table wrapper with rounded border */
.mrms-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mrms-border);
    border-radius: var(--mrms-radius-md);
}

/* Table reset */
.mrms-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

/* Header cells: uppercase, muted, darker background */
.mrms-table th {
    background: var(--mrms-bg-tertiary);
    color: var(--mrms-text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mrms-border);
}

/* Body cells */
.mrms-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mrms-border);
    color: var(--mrms-text-primary);
    font-size: 13.5px;
}

/* Remove border on last row */
.mrms-table tr:last-child td {
    border-bottom: none;
}

/* Row hover highlight */
.mrms-table tr:hover td {
    background: var(--mrms-surface-hover);
}

/* Selected row highlight (indigo) */
.mrms-table tr.selected td {
    background: rgba(99, 102, 241, 0.1) !important;
}

/* =========================================================================
  COMPONENTS: MODAL & POPUP SYSTEM - GLASSMORPHIC + RESPONSIVE BOTTOM SHEETS
  ========================================================================= */

/* ===== 1. OVERLAY (BACKDROP) ===== */
.mrms-popup-overlay,
.mrms-modal-overlay,
.co-popup-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--mrms-overlay-bg, rgba(8, 10, 16, 0.72)) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    opacity: 0;
    transition: opacity 0.22s ease;
    overscroll-behavior: contain;
}

/* Visible state - Dead Center-Center Flex Alignment */
.mrms-popup-overlay.open,
.mrms-popup-overlay.active,
.mrms-modal-overlay.open,
.mrms-modal-overlay.active,
.co-popup-overlay.open,
.co-popup-overlay.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
}

/* v7.10.62 - While the WP Media Library frame is open, drop the MasterRMS
   overlay z-index below the media modal (160000) so the picker appears ON
   TOP instead of behind the popup.
   v7.20.117 - Added .mrms-modal-backdrop (used by website.php modals). */
body.mrms-media-open .mrms-popup-overlay,
body.mrms-media-open .mrms-modal-overlay,
body.mrms-media-open .mrms-modal-backdrop,
body.mrms-media-open .co-popup-overlay {
    z-index: 100000 !important;
}

/* v7.10.63 - draggable column-width resizer for .mrms-import-preview-table
   (bulk-edit tables, import verify table, etc.) */
.mrms-import-preview-table th { position: relative; }
.mrms-import-preview-table th,
.mrms-import-preview-table td {
    /* v7.10.64 - column dividers */
    border-right: 1px solid var(--mrms-border, #2a2e3a);
}
.mrms-import-preview-table th:last-child,
.mrms-import-preview-table td:last-child { border-right: none; }
.mrms-import-preview-table thead th {
    position: relative;
}
.mrms-import-preview-table .mrms-col-resizer {
    position: absolute; top: 0; right: -5px; bottom: 0; width: 11px;
    cursor: col-resize; z-index: 5; touch-action: none;
    -webkit-user-select: none; user-select: none;
}
/* v7.20.187 (PCS-252) - the grip is always visible so the column edges read as
   draggable; it turns accent-coloured on hover and while dragging. */
.mrms-import-preview-table .mrms-col-resizer::after {
    content: ''; position: absolute; top: 2px; bottom: 2px; left: 4px; width: 3px;
    background: rgba(203, 213, 225, 0.85); border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 17, 21, 0.35);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.mrms-import-preview-table thead th:last-child .mrms-col-resizer {
    right: 0;
}
.mrms-import-preview-table .mrms-col-resizer:hover::after,
body.mrms-col-resizing .mrms-import-preview-table .mrms-col-resizer::after {
    background: var(--mrms-accent, #f68e13);
    box-shadow: 0 0 0 2px rgba(246, 142, 19, 0.18);
}
body.mrms-col-resizing, body.mrms-col-resizing * {
    cursor: col-resize !important; user-select: none !important;
}

/* ===== 2. PANEL (DEEP GLASS CARD) ===== */
.mrms-modal,
.mrms-popup-card,
.co-popup {
    position: relative !important;
    background: var(--mrms-modal-bg, rgba(26, 29, 39, 0.95)) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    color: var(--mrms-text-primary) !important;
    border: 1px solid var(--mrms-border) !important;
    border-radius: 20px;
    width: min(92vw, 900px) !important;
    height: auto !important;
    max-height: min(88vh, 800px) !important;
    max-height: min(88dvh, 800px) !important;
    overflow-y: auto;
    padding: 24px;
    margin: auto !important;
    box-shadow: var(--mrms-shadow-lg), 0 0 0 1px var(--mrms-border);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    animation: mrmsModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Scale-in + fade-in on open */
@keyframes mrmsModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Closing state - added by MasterRMS.modal.close before hide */
.mrms-modal-overlay.closing .mrms-modal,
.mrms-popup-overlay.closing .mrms-popup-card,
.mrms-modal-overlay.closing .mrms-popup-card,
.mrms-popup-overlay.closing .mrms-modal,
.co-popup-overlay.closing .co-popup {
    animation: mrmsModalOut 0.16s ease forwards;
}
@keyframes mrmsModalOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.96) translateY(8px); }
}

/* ===== 3. STANDARDIZED SIZE MODIFIERS ===== */
/* v7.20.16 - --md widened to a more rectangular (landscape) shape so booking
   forms fit WITHOUT scrolling; --lg/--xl bumped to keep the size ladder. */
.mrms-modal--sm,  .mrms-popup-card--sm  { width: min(92vw, 420px) !important; }
.mrms-modal--md,  .mrms-popup-card--md  { width: min(94vw, 720px) !important; }
.mrms-modal--lg,  .mrms-popup-card--lg  { width: min(94vw, 840px) !important; }
.mrms-modal--xl,  .mrms-popup-card--xl  { width: min(94vw, 980px) !important; }

/* v7.20.16 - 2-column modal body: halves height so forms fit without scroll */
.mrms-modal-body-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start;
}
@media (max-width: 640px) {
    .mrms-modal-body-2col { grid-template-columns: 1fr !important; }
}

/* ===== 4. HEADER (sticky inside scrolling panel) ===== */
.mrms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -24px -24px 18px;
    padding: 16px 24px;
    background: var(--mrms-modal-header-bg, rgba(26, 29, 39, 0.92));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mrms-border);
    border-radius: 20px 20px 0 0;
}
.mrms-modal-header h3,
.mrms-modal-header .mrms-modal-title,
.mrms-modal-header .mrms-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
    color: var(--mrms-text-primary);
}
.mrms-modal-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--mrms-text-muted);
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mrms-surface);
    border: 1px solid var(--mrms-border);
    white-space: nowrap;
}

/* Circular hoverable close (✕) button */
.mrms-modal-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--mrms-border) !important;
    background: var(--mrms-surface) !important;
    color: var(--mrms-text-secondary) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.mrms-modal-close:hover {
    background: rgba(239,68,68,0.16) !important;
    border-color: rgba(239,68,68,0.4) !important;
    color: var(--mrms-danger, #ef4444) !important;
    transform: rotate(90deg) scale(1.05) !important;
}

/* ===== 5. BODY (scrolls; header/footer stay put) ===== */
.mrms-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    margin: 0 -24px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.mrms-modal > .mrms-modal-header { margin-bottom: 0; }
.mrms-modal > .mrms-modal-header + .mrms-modal-body { margin-top: 0; }

/* ===== 6. UNIVERSAL STICKY MODAL FOOTERS ===== */
.mrms-modal-footer,
.mrms-modal-actions,
.mrms-modal-footer-sticky {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    flex-shrink: 0;
    background: var(--mrms-modal-footer-bg, var(--mrms-surface));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 14px 24px;
    margin: 18px -24px 0 -24px;
    border-top: 1px solid var(--mrms-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.16);
    border-radius: 0 0 20px 20px;
}
.mrms-modal-footer .mrms-btn,
.mrms-modal-actions .mrms-btn,
.mrms-modal-footer-sticky .mrms-btn { flex-shrink: 0; }

/* ===== UNIVERSAL STICKY SAVE BAR FOR ADMIN VIEWS ===== */
.mrms-sticky-save-bar {
    position: fixed;
    bottom: 24px;
    right: 28px;
    left: auto;
    z-index: 99999;
    background: var(--mrms-surface);
    border: 1px solid var(--mrms-border);
    border-radius: 14px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    max-width: 520px;
}
body.mrms-sidebar-collapsed .mrms-sticky-save-bar {
    right: 28px;
    left: auto;
}
@media (max-width: 1024px) {
    .mrms-sticky-save-bar {
        bottom: 20px;
        right: 20px;
        left: auto !important;
    }
}
@media (max-width: 768px) {
    .mrms-sticky-save-bar {
        bottom: 70px; /* Above mobile navigation bar */
        left: 14px !important;
        right: 14px !important;
        max-width: none;
        padding: 10px 14px;
    }
}


/* ===== 7. FORM GRIDS + INPUTS ===== */
.mrms-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.mrms-form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) {
    .mrms-form-row-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
    .mrms-form-row-2,
    .mrms-form-row-3 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* Uniform 40px inputs + accent focus ring inside modals */
.mrms-modal .mrms-input,
.mrms-modal .mrms-select,
.mrms-popup-card .mrms-input,
.mrms-popup-card .mrms-select {
    height: 40px;
    border-radius: 10px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mrms-modal .mrms-input:focus,
.mrms-modal .mrms-select:focus,
.mrms-popup-card .mrms-input:focus,
.mrms-popup-card .mrms-select:focus {
    border-color: var(--mrms-accent, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
    outline: none !important;
}
.mrms-modal .mrms-label,
.mrms-popup-card .mrms-label {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--mrms-text-secondary);
    margin-bottom: 6px;
    display: block;
}

/* ===== 8. BODY SCROLL LOCK ===== */
body.mrms-modal-open {
    overflow: hidden !important;
}

/* ===== 9. MOBILE - SLIDE-UP BOTTOM SHEETS (<= 600px) ===== */
@media (max-width: 600px) {
    .mrms-modal-overlay,
    .mrms-popup-overlay,
    .co-popup-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }
    .mrms-modal,
    .mrms-popup-card {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        padding: 28px 20px 20px;
        border-bottom: none !important;
        animation: mrmsSheetIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes mrmsSheetIn {
        from { opacity: 0; transform: translateY(48px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* sticky header adapts to sheet + hosts the pull handle */
    .mrms-modal-header {
        position: sticky;
        top: 0;
        margin: -28px -20px 16px;
        padding: 28px 20px 14px;
        border-radius: 24px 24px 0 0;
    }
    .mrms-modal-header::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
    }
    .mrms-modal-footer-sticky {
        position: sticky;
        bottom: 0;
        margin: 16px -20px 0;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        flex-direction: column;
        border-radius: 0;
        gap: 8px !important;
    }
    .mrms-modal-footer-sticky .mrms-btn {
        width: 100% !important;
        justify-content: center;
    }
    .mrms-modal-body {
        padding: 20px;
        margin: 0 -20px;
    }
}

/* ===== 10. MODAL BEAUTIFICATION (v7.20.41) ===== */

/* Subtle inner glow on panel top edge for depth */
.mrms-modal::before,
.mrms-popup-card::before,
.co-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 30%, rgba(99,102,241,0.25) 50%, rgba(255,255,255,0.18) 70%, transparent 100%);
    border-radius: 20px 20px 0 0;
    z-index: 1;
    pointer-events: none;
}

/* Header gradient accent line below */
.mrms-modal-header {
    position: relative;
}
.mrms-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(99,102,241,0.3) 50%, transparent 100%);
}

/* Footer subtle glow line above */
.mrms-modal-footer-sticky {
    position: relative;
}
.mrms-modal-footer-sticky::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
}

/* Button hover polish inside modals */
.mrms-modal .mrms-btn,
.mrms-popup-card .mrms-btn,
.co-popup .mrms-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mrms-modal .mrms-btn:hover,
.mrms-popup-card .mrms-btn:hover,
.co-popup .mrms-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
.mrms-modal .mrms-btn:active,
.mrms-popup-card .mrms-btn:active,
.co-popup .mrms-btn:active {
    transform: translateY(0) !important;
}

/* Textarea consistency inside modals */
.mrms-modal textarea,
.mrms-popup-card textarea,
.co-popup textarea {
    min-height: 80px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
}

/* Form group spacing inside modal body */
.mrms-modal-body .mrms-form-group,
.mrms-modal-body .mrms-field,
.mrms-modal-body > div > .mrms-form-group {
    margin-bottom: 14px !important;
}

/* Placeholder styling consistency */
.mrms-modal .mrms-input::placeholder,
.mrms-modal textarea::placeholder,
.mrms-popup-card .mrms-input::placeholder {
    color: var(--mrms-text-muted, #6b7280) !important;
    font-style: italic !important;
    opacity: 0.7 !important;
}

/* Subtle inner shadow on focused inputs */
.mrms-modal .mrms-input:focus,
.mrms-modal .mrms-select:focus,
.mrms-popup-card .mrms-input:focus,
.mrms-popup-card .mrms-select:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), inset 0 1px 3px rgba(0,0,0,0.12) !important;
}

/* Smooth scroll indicator gradient at body top/bottom */
[data-theme="dark"] .mrms-modal-body {
    background-image: linear-gradient(to bottom, rgba(26,29,39,1) 0%, transparent 24px),
                      linear-gradient(to top, rgba(26,29,39,1) 0%, transparent 24px);
    background-attachment: local, local;
    background-size: 100% 24px;
    background-repeat: no-repeat;
}
[data-theme="light"] .mrms-modal-body {
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, transparent 24px),
                      linear-gradient(to top, rgba(255,255,255,1) 0%, transparent 24px);
    background-attachment: local, local;
    background-size: 100% 24px;
    background-repeat: no-repeat;
}

/* Mobile bottom sheet adjustments */
@media (max-width: 600px) {
    .mrms-modal-footer-sticky::before {
        left: 20px !important;
        right: 20px !important;
    }
    .mrms-modal-header::after {
        left: 20px !important;
        right: 20px !important;
    }
}

/* =========================================================================
   COMPONENTS: ORDER MODAL - LIGHT MODE OVERRIDES
   Ensures the Create Order popup follows design-system tokens in Light Mode.
   Dark Mode keeps its existing frosted glass appearance unchanged.
   ========================================================================= */

/* --- Panel (the main popup card) --- */
[data-theme="light"] .co-popup {
    background: var(--mrms-modal-bg, #ffffff) !important;
    background-color: var(--mrms-modal-bg, #ffffff) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.18),
                0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* --- Header --- */
[data-theme="light"] .co-header {
    background: var(--mrms-modal-header-bg, #f8fafc) !important;
    border-bottom: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-header h3 {
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-header .co-close {
    color: var(--mrms-text-secondary, #475569) !important;
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
    border-radius: 8px !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-header .co-close:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

/* --- Body --- */
[data-theme="light"] .co-body {
    background: var(--mrms-modal-bg, #ffffff) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}

/* --- Footer --- */
[data-theme="light"] .co-footer {
    background: var(--mrms-modal-footer-bg, #f8fafc) !important;
    border-top: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-total {
    text-shadow: none !important;
}
[data-theme="light"] .co-total small {
    color: var(--mrms-text-secondary, #475569) !important;
}

/* --- Step Indicator Dots --- */
[data-theme="light"] .co-step-dot {
    background: var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-step-dot.active {
    background: var(--mrms-accent, #4f46e5) !important;
}
[data-theme="light"] .co-step-dot.done {
    background: #10b981 !important;
}

/* --- Mode Cards (Walk-in / Search / Add Member) --- */
[data-theme="light"] .co-mode-card {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border-color: var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-mode-card:hover {
    border-color: var(--mrms-accent, #4f46e5) !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12) !important;
}
[data-theme="light"] .co-mode-card.selected {
    border-color: var(--mrms-accent, #4f46e5) !important;
    background: rgba(79, 70, 229, 0.04) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}
[data-theme="light"] .co-mode-card .co-mode-title {
    color: var(--mrms-text-primary, #0f172a) !important;
}

/* --- Menu Rows (Dish Items) --- */
[data-theme="light"] .co-menu-row {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-menu-row:hover {
    border-color: var(--mrms-accent, #4f46e5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .co-menu-row strong,
[data-theme="light"] .co-menu-row .co-item-name {
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-menu-row .co-item-price {
    color: var(--mrms-accent, #4f46e5) !important;
}

/* --- Menu Cards (Grid View) --- */
[data-theme="light"] .co-menu-card {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-menu-card:hover {
    border-color: var(--mrms-accent, #4f46e5) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* --- Quantity Controls --- */
[data-theme="light"] .co-qty-btn {
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-qty-btn:hover {
    background: var(--mrms-accent, #4f46e5) !important;
    color: #ffffff !important;
    border-color: var(--mrms-accent, #4f46e5) !important;
}
[data-theme="light"] .co-qty-btn.minus:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}
[data-theme="light"] .co-qty-val {
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-qty-val.has-items {
    color: var(--mrms-accent, #4f46e5) !important;
}

/* --- Search Results Dropdown --- */
[data-theme="light"] .co-search-results {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .co-search-item {
    border-bottom: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-search-item:hover {
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
}

/* --- Selected Customer Pill --- */
[data-theme="light"] .co-selected-pill {
    background: rgba(79, 70, 229, 0.08) !important;
    border: 1px solid rgba(79, 70, 229, 0.25) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-selected-pill span {
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-selected-pill .co-pill-remove {
    color: var(--mrms-text-secondary, #475569) !important;
}
[data-theme="light"] .co-selected-pill .co-pill-remove:hover {
    color: #ef4444 !important;
}

/* --- Inline Add-Member Form --- */
[data-theme="light"] .co-inline-form {
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-inline-form .mrms-label {
    color: var(--mrms-text-secondary, #475569) !important;
}

/* --- Floating Checkout Bar (step 1) --- */
[data-theme="light"] #co-float-checkout-bar {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3) !important;
}

/* --- Inner Routing / Notes / Offers Boxes --- */
[data-theme="light"] #co-items-notes-wrap,
[data-theme="light"] #co-offers-toggle-wrap {
    background: var(--mrms-bg-tertiary, #f8fafc) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] #co-items-notes-list {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-item-note-input {
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-item-note-input:focus {
    background: #ffffff !important;
    border-color: var(--mrms-accent, #4f46e5) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* --- Category Tabs --- */
[data-theme="light"] .co-cat-tab {
    color: var(--mrms-text-primary, #0f172a) !important;
}

/* --- Table Picker Modal --- */
[data-theme="light"] #co-table-modal .mrms-popup-card {
    background: var(--mrms-modal-bg, #ffffff) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}

/* --- Custom Table Trigger Button --- */
[data-theme="light"] #co-custom-table-trigger {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
    border-color: var(--mrms-border, #cbd5e1) !important;
}

/* --- Overlay Backdrop --- */
[data-theme="light"] .co-popup-overlay {
    background: var(--mrms-overlay-bg, rgba(15, 23, 42, 0.45)) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
}

/* =========================================================================
   COMPONENTS: ORDER MODAL - 5 SIZES & 5 LAYOUT THEMES
   ========================================================================= */

/* -- 5 SIZING PRESETS ---- */

/* SIZE 1: full_margin - Maximum size with 32px padding/margin */
.mrms-modal-overlay.mrms-size-full_margin, .co-popup-overlay.mrms-size-full_margin { padding: 32px !important; justify-content: center !important; align-items: center !important; }
.mrms-modal-overlay.mrms-size-full_margin .co-popup, .co-popup-overlay.mrms-size-full_margin .co-popup,
.mrms-modal-overlay.mrms-size-full_margin .mrms-popup-card, .co-popup-overlay.mrms-size-full_margin .mrms-popup-card { width: calc(100vw - 64px) !important; max-width: 1200px !important; height: calc(100vh - 64px) !important; max-height: calc(100vh - 64px) !important; margin: auto !important; }

/* SIZE 2: standard - Fixed 960px wide, 85vh tall */
.mrms-modal-overlay.mrms-size-standard, .co-popup-overlay.mrms-size-standard { padding: 32px !important; justify-content: center !important; align-items: center !important; }
.mrms-modal-overlay.mrms-size-standard .co-popup, .co-popup-overlay.mrms-size-standard .co-popup,
.mrms-modal-overlay.mrms-size-standard .mrms-popup-card, .co-popup-overlay.mrms-size-standard .mrms-popup-card { width: 960px !important; max-width: 92vw !important; height: 85vh !important; max-height: 800px !important; border-radius: 20px !important; margin: auto !important; }

/* SIZE 3: compact - Narrower, 780px wide */
.mrms-modal-overlay.mrms-size-compact, .co-popup-overlay.mrms-size-compact { padding: 32px !important; justify-content: center !important; align-items: center !important; }
.mrms-modal-overlay.mrms-size-compact .co-popup, .co-popup-overlay.mrms-size-compact .co-popup,
.mrms-modal-overlay.mrms-size-compact .mrms-popup-card, .co-popup-overlay.mrms-size-compact .mrms-popup-card { width: 780px !important; max-width: 90vw !important; height: 80vh !important; max-height: 700px !important; border-radius: 16px !important; margin: auto !important; }

/* SIZE 4: drawer - Right-side slide-in panel, full height */
.mrms-modal-overlay.mrms-size-drawer, .co-popup-overlay.mrms-size-drawer { padding: 0 !important; justify-content: flex-end !important; align-items: stretch !important; }
.mrms-modal-overlay.mrms-size-drawer .co-popup, .co-popup-overlay.mrms-size-drawer .co-popup,
.mrms-modal-overlay.mrms-size-drawer .mrms-popup-card, .co-popup-overlay.mrms-size-drawer .mrms-popup-card { width: 540px !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; margin: 0 0 0 auto !important; border-left: 1px solid var(--mrms-border, rgba(255,255,255,0.15)) !important; }

/* SIZE 5: fluid_wide - Extra-wide, minimal padding */
.mrms-modal-overlay.mrms-size-fluid_wide, .co-popup-overlay.mrms-size-fluid_wide { padding: 12px !important; justify-content: center !important; align-items: center !important; }
.mrms-modal-overlay.mrms-size-fluid_wide .co-popup, .co-popup-overlay.mrms-size-fluid_wide .co-popup,
.mrms-modal-overlay.mrms-size-fluid_wide .mrms-popup-card, .co-popup-overlay.mrms-size-fluid_wide .mrms-popup-card { width: 96vw !important; max-width: 1650px !important; height: 94vh !important; max-height: 96vh !important; border-radius: 20px !important; margin: auto !important; padding: 14px 18px !important; }

/* Mobile Overrides: Strip all outer margins & padding on screens < 768px */
@media (max-width: 767px) {
  .mrms-modal-overlay.mrms-size-full_margin, .co-popup-overlay.mrms-size-full_margin,
  .mrms-modal-overlay.mrms-size-standard, .co-popup-overlay.mrms-size-standard,
  .mrms-modal-overlay.mrms-size-compact, .co-popup-overlay.mrms-size-compact,
  .mrms-modal-overlay.mrms-size-fluid_wide, .co-popup-overlay.mrms-size-fluid_wide {
    padding: 0 !important;
    margin: 0 !important;
  }
  .mrms-modal-overlay.mrms-size-full_margin .co-popup, .mrms-modal-overlay.mrms-size-full_margin .mrms-popup-card,
  .mrms-modal-overlay.mrms-size-standard .co-popup, .mrms-modal-overlay.mrms-size-standard .mrms-popup-card,
  .mrms-modal-overlay.mrms-size-compact .co-popup, .mrms-modal-overlay.mrms-size-compact .mrms-popup-card,
  .mrms-modal-overlay.mrms-size-fluid_wide .co-popup, .mrms-modal-overlay.mrms-size-fluid_wide .mrms-popup-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* -- 5 LAYOUT THEMES ---- */

/* THEME 1: SPLIT POS DUAL-PANE */
@media (min-width: 851px) {
    .co-popup.co-theme-split_pos .co-body { display: grid !important; grid-template-columns: minmax(0, 1fr) 310px !important; gap: 12px !important; overflow: hidden !important; flex: 1 !important; min-height: 0 !important; padding: 12px 16px !important; }
    .co-popup.co-theme-split_pos #co-step-1 { display: flex !important; flex-direction: column !important; overflow-y: hidden !important; height: 100% !important; border-right: 1px solid var(--mrms-border) !important; padding-right: 10px !important; flex: 1 !important; min-height: 0 !important; }
    .co-popup.co-theme-split_pos #co-step-2 { display: block !important; overflow-y: auto !important; overflow-x: hidden !important; height: 100% !important; padding-left: 2px !important; }
    .co-popup.co-theme-split_pos #co-menu-list { align-content: start !important; flex: 1 !important; height: 100% !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important; }
    .co-popup.co-theme-split_pos #co-back-step, .co-popup.co-theme-split_pos #co-next-step, .co-popup.co-theme-split_pos .co-steps { display: none !important; }
    .co-popup.co-theme-split_pos #co-footer { display: flex !important; grid-column: 1 / -1 !important; }
}

/* Hide FAB shortcut button when any modal is open */
.co-popup-overlay.open ~ .mrms-fab-btn,
.mrms-modal-overlay.open ~ .mrms-fab-btn,
body:has(.co-popup-overlay.open) .mrms-fab-btn,
body.modal-open .mrms-fab-btn,
.co-popup-overlay.open .mrms-fab-btn,
/* v7.10.51 - also hide while the AI chat widget is open */
body.mrms-chat-open .mrms-fab-btn,
body:has(#mrms-ai-chat-widget[style*="display: flex"]) .mrms-fab-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* THEME 2: WIZARD STEPPER */
.co-popup.co-theme-wizard .co-header { background: linear-gradient(135deg, var(--mrms-surface) 0%, rgba(99,102,241,0.08) 100%) !important; border-bottom: 2px solid var(--mrms-accent) !important; }
.co-popup.co-theme-wizard .co-steps { display: flex !important; gap: 12px !important; margin: 12px 0 !important; width: 100% !important; }
.co-popup.co-theme-wizard .co-step-dot { height: 8px !important; border-radius: 4px !important; flex: 1 !important; background: var(--mrms-border) !important; transition: all 0.3s ease !important; }
.co-popup.co-theme-wizard .co-step-dot.active { background: var(--mrms-accent) !important; box-shadow: 0 0 12px var(--mrms-accent-glow) !important; }
.co-popup.co-theme-wizard .co-step-dot.done { background: var(--mrms-success, #10b981) !important; }

/* THEME 3: EXPRESS COMPACT LIST */
.co-popup.co-theme-compact { max-width: 680px !important; }
.co-popup.co-theme-compact .co-header { padding: 12px 18px !important; }
.co-popup.co-theme-compact .co-header h3 { font-size: 15px !important; }
.co-popup.co-theme-compact .co-body { padding: 12px 18px !important; }
.co-popup.co-theme-compact #co-menu-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
.co-popup.co-theme-compact .co-menu-row, .co-popup.co-theme-compact .co-menu-card { padding: 6px 10px !important; border-radius: 8px !important; font-size: 12px !important; }
.co-popup.co-theme-compact .co-qty-btn { width: 26px !important; height: 26px !important; font-size: 13px !important; }
.co-popup.co-theme-compact .co-footer { padding: 10px 18px !important; }

/* THEME 4: LUXURY DARK GLASSMORPHISM */
.co-popup.co-theme-glassmorphism, .co-popup.co-theme-glass { background: var(--mrms-modal-bg, rgba(15, 23, 42, 0.94)) !important; color: var(--mrms-text-primary, #f8fafc) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; border: 1px solid var(--mrms-border) !important; box-shadow: 0 32px 90px rgba(0,0,0,0.85), 0 0 30px rgba(99,102,241,0.25) !important; }
.co-popup.co-theme-glassmorphism .co-header, .co-popup.co-theme-glass .co-header { border-bottom-color: rgba(255,255,255,0.12) !important; background: rgba(30, 41, 59, 0.6) !important; }
.co-popup.co-theme-glassmorphism .co-header h3, .co-popup.co-theme-glass .co-header h3 { color: #ffffff !important; }
.co-popup.co-theme-glassmorphism .co-close, .co-popup.co-theme-glass .co-close { color: #94a3b8 !important; }
.co-popup.co-theme-glassmorphism .co-close:hover, .co-popup.co-theme-glass .co-close:hover { color: #ffffff !important; background: rgba(255,255,255,0.12) !important; }
.co-popup.co-theme-glassmorphism .co-footer, .co-popup.co-theme-glass .co-footer { background: rgba(30, 41, 59, 0.75) !important; border-top-color: rgba(255,255,255,0.12) !important; }
.co-popup.co-theme-glassmorphism .co-menu-row, .co-popup.co-theme-glassmorphism .co-menu-card, .co-popup.co-theme-glass .co-menu-row, .co-popup.co-theme-glass .co-menu-card { background: rgba(30, 41, 59, 0.65) !important; border-color: rgba(255,255,255,0.1) !important; color: var(--mrms-text-primary, #f8fafc) !important; }
.co-popup.co-theme-glassmorphism .co-menu-row:hover, .co-popup.co-theme-glassmorphism .co-menu-card:hover, .co-popup.co-theme-glass .co-menu-row:hover, .co-popup.co-theme-glass .co-menu-card:hover { border-color: #6366f1 !important; background: rgba(99, 102, 241, 0.2) !important; box-shadow: 0 0 15px rgba(99,102,241,0.3) !important; }
.co-popup.co-theme-glassmorphism .co-item-info strong, .co-popup.co-theme-glass .co-item-info strong { color: var(--mrms-text-primary, #f8fafc) !important; }

/* THEME 5: FOODIE VISUAL GRID */
.co-popup.co-theme-foodie_grid #co-menu-list, .co-popup.co-theme-foodie #co-menu-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 14px !important; }
.co-popup.co-theme-foodie_grid .co-menu-card, .co-popup.co-theme-foodie_grid .co-menu-row, .co-popup.co-theme-foodie .co-menu-card, .co-popup.co-theme-foodie .co-menu-row { display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 14px !important; border-radius: 16px !important; background: var(--mrms-surface) !important; border: 1.5px solid var(--mrms-border) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.co-popup.co-theme-foodie_grid .co-menu-card:hover, .co-popup.co-theme-foodie .co-menu-card:hover { transform: translateY(-4px) !important; border-color: var(--mrms-accent) !important; box-shadow: 0 10px 25px rgba(99,102,241,0.2) !important; }
.co-popup.co-theme-foodie_grid .co-qty-controls, .co-popup.co-theme-foodie .co-qty-controls { width: 100% !important; justify-content: space-between !important; margin-top: 8px !important; }

/* =========================================================================
   COMPONENTS: TOAST NOTIFICATIONS
   ========================================================================= */

/* Fixed container in the DEAD CENTER-CENTER of the viewport */
#mrms-toast-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: none !important;
}

/* Individual toast notification */
.mrms-toast {
    pointer-events: auto !important;
    min-width: 280px;
    padding: 12px 18px;
    border-radius: var(--mrms-radius-md);
    background: var(--mrms-bg-tertiary);
    border-left: 4px solid var(--mrms-accent);
    color: var(--mrms-text-primary);
    box-shadow: var(--mrms-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    animation: mrmsFadeIn 0.3s ease;
}

/* Type-specific left border colors */
.mrms-toast-success { border-left-color: var(--mrms-success); }
.mrms-toast-danger { border-left-color: var(--mrms-danger); }
.mrms-toast-warning { border-left-color: var(--mrms-warning); }

/* ============================================================
   MOBILE COMPONENTS: ACTION SHEET, POS CART DRAWER, MOBILE CARDS
   ============================================================ */

/* ---------- Mobile Action Sheet ---------- */
.mrms-mobile-actionsheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}
.mrms-mobile-actionsheet.is-open {
  visibility: visible;
  opacity: 1;
}
.mrms-mobile-actionsheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mrms-mobile-actionsheet__panel {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--mrms-surface);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mrms-mobile-actionsheet.is-open .mrms-mobile-actionsheet__panel {
  transform: translateY(0);
}
.mrms-mobile-actionsheet__handle {
  width: 42px; height: 5px; border-radius: 999px;
  background: var(--mrms-border);
  margin: 6px auto 14px;
}
.mrms-mobile-actionsheet__title {
  font-size: 14px;
  color: var(--mrms-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.mrms-actionsheet-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--mrms-surface-alt, #f7f7f9);
  color: var(--mrms-text-primary);
  border: 1px solid transparent;
  text-align: left;
  font-size: 15px;
  margin-bottom: 8px;
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
.mrms-actionsheet-option:active {
  transform: scale(.98);
  border-color: var(--mrms-accent, #6366f1);
  background: var(--mrms-surface);
}
.mrms-actionsheet-option__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--mrms-accent, #6366f1); color: #fff;
  font-size: 16px; flex-shrink: 0;
}

/* ---------- POS Mobile Cart Drawer ---------- */
.mrms-pos-cart-bar {
  position: fixed;
  inset: auto 0 60px 0;
  z-index: 800;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--mrms-accent, #6366f1);
  color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.mrms-pos-cart-bar.is-visible { transform: translateY(0); }
.mrms-pos-cart-bar__count {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 13px;
}
.mrms-pos-cart-bar__total { margin-left: auto; font-weight: 700; }
.mrms-pos-cart-bar__cta {
  background: #fff; color: var(--mrms-accent, #6366f1);
  border: none; border-radius: 999px;
  padding: 10px 18px; font-weight: 700;
  min-height: 44px;
}
.mrms-pos-cart-sheet {
  position: fixed; inset: 0; z-index: 1200;
  visibility: hidden; opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}
.mrms-pos-cart-sheet.is-open { visibility: visible; opacity: 1; }
.mrms-pos-cart-sheet__panel {
  position: absolute; inset: 0;
  background: var(--mrms-surface);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32,.72,0,1);
  padding-top: env(safe-area-inset-top);
}
.mrms-pos-cart-sheet.is-open .mrms-pos-cart-sheet__panel { transform: translateY(0); }
.mrms-pos-cart-sheet__header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--mrms-border);
  min-height: 48px;
}
.mrms-pos-cart-sheet__body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.mrms-pos-cart-sheet__footer {
  padding: 16px;
  border-top: 1px solid var(--mrms-border);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .mrms-pos-cart-bar,
  .mrms-pos-cart-sheet { display: none !important; }
}

/* ---------- Mobile Card List & Status Pills ---------- */
.mrms-mobile-card-list { display: none; }
@media (max-width: 767px) {
  .mrms-desktop-table { display: none !important; }
  .mrms-mobile-card-list { display: grid; gap: 12px; }
}
.mrms-mcard {
  background: var(--mrms-surface);
  border: 1px solid var(--mrms-border);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: transform .15s ease, box-shadow .2s ease;
}
.mrms-mcard:hover { box-shadow: var(--mrms-card-shadow-hover, 0 4px 12px rgba(0,0,0,.08)); border-color: var(--mrms-card-border-hover, var(--mrms-border)); }
.mrms-mcard:active { transform: scale(.99); box-shadow: var(--mrms-card-shadow, 0 2px 4px rgba(0,0,0,.06)); }
.mrms-mcard__row {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between;
}
.mrms-mcard__title { font-weight: 700; font-size: 15px; color: var(--mrms-text-primary); }
.mrms-mcard__meta { font-size: 13px; color: var(--mrms-text-muted); }
.mrms-mcard__select {
  position: absolute; top: 12px; left: 12px;
  width: 22px; height: 22px;
}
.mrms-mcard__body { padding-left: 30px; }

.mrms-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  min-height: 28px;
}
.mrms-pill--available { background: rgba(34,197,94,0.15); color: #22c55e; }
.mrms-pill--occupied  { background: rgba(239,68,68,0.15); color: #ef4444; }
.mrms-pill--cleaning { background: rgba(14,165,233,0.15); color: #0ea5e9; }
.mrms-pill--reserved { background: rgba(245,158,11,0.15); color: #f59e0b; }

@media (max-width: 767px) {
  .mrms-modal-fullscreen {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* v7.20.247 (PCS-312) - NOTIFICATIONS WHILE A MODAL IS OPEN
   The toast stack is dead-center and the role-notification stack is top-right,
   and BOTH sat on z-index 999999 - the same as .mrms-popup-overlay. Which one
   you saw on top depended on DOM order, so a toast arriving while the payment
   modal was open sometimes landed right across the card ("overlapping").
   While any MasterRMS modal is open (body.mrms-modal-open, set by
   MasterRMS.modal.open/close):
     - toasts move out of the centre to the bottom-right corner and sit ABOVE
       the modal (z 1000001) so they can no longer cover the form;
     - role notification cards keep their corner, render above the modal and
       become click-through, so they cannot swallow a click meant for the
       payment form (the card itself stays clickable only when no modal is up). */
body.mrms-modal-open #mrms-toast-container {
    top: auto !important;
    bottom: 18px !important;
    left: auto !important;
    right: 18px !important;
    transform: none !important;
    align-items: flex-end !important;
    /* Stay inside the free margin beside the modal card (min(92vw,720px), centred),
       so a toast can never sit over the payment form. 200px floor for small screens. */
    width: auto !important;
    max-width: calc((100vw - 740px) / 2 - 30px) !important;
    min-width: 200px !important;
    z-index: 1000001 !important;
}
body.mrms-modal-open .mrms-toast {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
body.mrms-modal-open #mrms-role-notif-container {
    z-index: 1000001 !important;
    width: auto !important;
    max-width: calc((100vw - 740px) / 2 - 30px) !important;
    min-width: 200px !important;
}
body.mrms-modal-open .mrms-role-notif-card {
    pointer-events: none !important;
    width: auto !important;
    max-width: 100% !important;
}

/* =========================================================================
   COMPONENTS: GLOBAL ROLE NOTIFICATION ENGINE (Toasts & Popups)
   ========================================================================= */

#mrms-role-notif-container {
    position: fixed;
    top: 48px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    width: calc(100vw - 40px);
    pointer-events: none;
}

.mrms-role-notif-card {
    pointer-events: auto;
    background: var(--mrms-modal-bg, rgba(15, 23, 42, 0.94));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--mrms-border);
    border-radius: 16px;
    padding: 16px 18px;
    color: var(--mrms-text-primary);
    box-shadow: var(--mrms-shadow-xl, 0 16px 40px rgba(0, 0, 0, 0.4));
    position: relative;
    overflow: hidden;
    transform: translateX(120%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, max-height 0.35s ease, padding 0.35s ease, margin 0.35s ease;
}

.mrms-role-notif-card.active {
    transform: translateX(0);
}

.mrms-role-notif-card.dismissing {
    transform: translateX(120%) scale(0.95);
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -10px !important;
}

@keyframes mrmsCardPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.025); box-shadow: 0 0 24px var(--notif-accent, #6366f1); }
    100% { transform: scale(1); }
}

.mrms-role-notif-card.pulse {
    animation: mrmsCardPulse 0.4s ease;
}

.mrms-role-notif-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--notif-accent, #6366f1);
}

.mrms-role-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mrms-role-notif-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mrms-role-notif-close {
    cursor: pointer;
    opacity: 0.6;
    font-size: 18px;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.mrms-role-notif-close:hover {
    opacity: 1;
}

.mrms-role-notif-body {
    font-size: 12px;
    color: #cbd5e1;
    margin-top: 6px;
    line-height: 1.45;
}

.mrms-role-notif-btn {
    margin-top: 10px;
    padding: 6px 14px;
    background: var(--notif-accent, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.mrms-role-notif-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.mrms-role-notif-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--notif-accent, #6366f1);
    width: 100%;
    transition: width 6000ms linear;
}

/* =========================================================================
   COMPONENTS: EMPTY / ZERO STATE CONTAINERS
   ========================================================================= */
.mrms-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    background: var(--mrms-bg-tertiary);
    border: 2px dashed var(--mrms-border);
    border-radius: var(--mrms-radius-lg);
    margin: 16px 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

.mrms-empty-state-icon {
    font-size: 44px;
    margin-bottom: 12px;
    opacity: 0.85;
}

.mrms-empty-state-title {
    font-size: var(--mrms-font-card-title, 16px);
    font-weight: 700;
    color: var(--mrms-text-primary);
    margin: 0 0 6px;
}

.mrms-empty-state-desc {
    font-size: var(--mrms-font-body, 13px);
    color: var(--mrms-text-secondary);
    max-width: 420px;
    margin: 0 0 16px;
    line-height: 1.5;
}

.mrms-empty-state-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================================
   COMPONENTS: PAGE HEADER & SECTION CADENCE
   ========================================================================= */
.mrms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--mrms-border);
    flex-wrap: wrap;
    gap: 12px;
}

.mrms-page-title {
    font-size: var(--mrms-font-page-title, 22px);
    font-weight: 800;
    color: var(--mrms-text-primary);
    letter-spacing: -0.3px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mrms-page-subtitle {
    font-size: var(--mrms-font-caption, 12px);
    color: var(--mrms-text-secondary);
    margin: 2px 0 0;
}
/**
 * MasterRMS UI Components CSS
 *
 * v4.0.0 - Enterprise Restaurant Management System
 *
 * All reusable visual components for the admin interface.  Depends on CSS
 * variables defined in `design-system.css` for consistent theming.
 *
 * Sections:
 * - Glass Cards (basic, selected, glass-morphism)
 * - Stat Cards (bento grid, icon + value + label)
 * - Floating Bulk Action Bar
 * - Buttons (primary, secondary, danger, success, small)
 * - Forms & Inputs (text, select, textarea, checkboxes)
 * - Tables (container, header, rows, hover, selected)
 * - Modal Popup & Slide-in Panels (overlay, sizing, header, close)
 * - Order Modal (5 customizable sizes + 5 layout themes)
 * - Toast Notifications
 */

/* =========================================================================
   COMPONENTS: GLASS CARDS
   ========================================================================= */

/* Base card with subtle border and shadow */
.mrms-card {
    background: var(--mrms-bg-secondary);
    border: var(--mrms-card-border, 1px solid var(--mrms-border));
    border-radius: var(--mrms-radius-lg);
    padding: 20px;
    box-shadow: var(--mrms-card-shadow, var(--mrms-shadow-sm));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    
}

.mrms-card:hover {
    box-shadow: var(--mrms-card-shadow-hover, var(--mrms-shadow-md));
    border-color: var(--mrms-card-border-hover, var(--mrms-border));
}

/* Selected card state: indigo border, subtle indigo background, glow ring */
.mrms-card.selected {
    border-color: var(--mrms-accent) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: 0 0 0 2px var(--mrms-accent-glow) !important;
}

/* Checkbox positioned at the top-left corner of selectable cards */
.mrms-card-checkbox {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--mrms-accent);
}

/* Card header bar: Deep Royal Indigo gradient for card title+action rows (Option 3) */
.mrms-card .mrms-header-bar {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%) !important;
    color: #ffffff !important;
    padding: 14px 20px;
    margin: -20px -20px 16px -20px;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.mrms-card .mrms-header-bar .mrms-card-title {
    color: #ffffff !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.mrms-card .mrms-header-bar span,
.mrms-card .mrms-header-bar .mrms-header-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}
.mrms-card .mrms-header-bar .mrms-btn-secondary {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mrms-card .mrms-header-bar .mrms-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}
.mrms-card .mrms-header-bar .mrms-badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Card header bar in Light Mode: refined slate surface with dark text */
[data-theme="light"] .mrms-card .mrms-header-bar {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: var(--mrms-text-primary) !important;
    border-bottom: 1px solid var(--mrms-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-card-title {
    color: var(--mrms-text-primary) !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar span,
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-header-subtitle {
    color: var(--mrms-text-secondary) !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-btn-secondary {
    background: #ffffff !important;
    color: var(--mrms-text-primary) !important;
    border: 1px solid var(--mrms-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-btn-secondary:hover {
    background: var(--mrms-surface-hover) !important;
    border-color: var(--mrms-accent) !important;
    color: var(--mrms-accent) !important;
}
[data-theme="light"] .mrms-card .mrms-header-bar .mrms-badge {
    background: var(--mrms-badge-neutral-bg) !important;
    color: var(--mrms-badge-neutral-text) !important;
    border: 1px solid var(--mrms-border) !important;
}

/* Glass-morphism variant with backdrop blur */
.mrms-card-glass {
    background: var(--mrms-card-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Card header row (title + optional actions) */
.mrms-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mrms-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mrms-text-primary);
    margin: 0;
}

/* Ensure h3 headings inside cards use correct text color */
.mrms-card h3 {
    color: var(--mrms-text-primary);
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

/* =========================================================================
   COMPONENTS: STAT CARDS (BENTO GRID)
   ========================================================================= */

/* Responsive grid for stat cards */
.mrms-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Individual stat card: icon on left, value + label on right */
.mrms-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--mrms-bg-secondary);
    border: var(--mrms-card-border, 1px solid var(--mrms-border));
    border-radius: var(--mrms-radius-lg);
    padding: 18px 20px;
    box-shadow: var(--mrms-card-shadow, var(--mrms-shadow-sm));
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mrms-stat-card:hover {
    box-shadow: var(--mrms-card-shadow-hover, var(--mrms-shadow-md));
    transform: translateY(-1px);
}

/* Stat icon container (square, rounded) */
.mrms-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--mrms-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--mrms-surface-hover);
}

/* Large numeric stat value */
.mrms-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--mrms-text-primary);
    line-height: 1.2;
}

/* Label beneath the stat value */
.mrms-stat-label {
    font-size: 12px;
    color: var(--mrms-text-secondary);
    font-weight: 500;
}

/* =========================================================================
   COMPONENTS: FLOATING BULK ACTION BAR
   ========================================================================= */

/* Appears when items are selected, sticks below the header */
.mrms-bulk-bar {
    position: sticky;
    top: 70px;
    z-index: 850;
    background: var(--mrms-bg-tertiary);
    border: 1px solid var(--mrms-accent);
    border-radius: var(--mrms-radius-md);
    padding: 10px 18px;
    margin-bottom: 16px;
    box-shadow: var(--mrms-shadow-lg);
    display: none;                 /* Hidden by default */
    align-items: center;
    justify-content: space-between;
    animation: mrmsFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Shown when .active class is added */
.mrms-bulk-bar.active {
    display: flex;
}

/* Selected count text */
.mrms-bulk-count {
    font-weight: 600;
    color: var(--mrms-accent);
    font-size: 13.5px;
}

/* =========================================================================
   COMPONENTS: BUTTONS
   ========================================================================= */

/* Base button style */
.mrms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--mrms-radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}

/* ----- Primary button (indigo accent) ----- */
.mrms-btn-primary {
    background: var(--mrms-accent);
    color: #fff;
}
.mrms-btn-primary:hover {
    background: var(--mrms-accent-hover);
    box-shadow: 0 4px 12px var(--mrms-accent-glow);
    transform: translateY(-1px);
}

/* ----- Secondary button (dark with border) ----- */
.mrms-btn-secondary {
    background: var(--mrms-bg-tertiary);
    color: var(--mrms-text-primary);
    border-color: var(--mrms-border);
}
.mrms-btn-secondary:hover {
    background: var(--mrms-surface-hover);
    border-color: var(--mrms-accent, #6366f1);
    color: var(--mrms-text-primary);
}

/* ----- Danger button (red) ----- */
.mrms-btn-danger {
    background: var(--mrms-danger);
    color: #fff;
}
.mrms-btn-danger:hover {
    background: #b91c1c;
}

/* ----- Success button (green) ----- */
.mrms-btn-success {
    background: var(--mrms-success);
    color: #fff;
}
.mrms-btn-success:hover {
    background: #166534;
}

/* ----- Small button variant ----- */
.mrms-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 8px;
}

/* =========================================================================
   COMPONENTS: FORMS & INPUTS
   ========================================================================= */

/* Form field group wrapper */
.mrms-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

/* Input label */
.mrms-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--mrms-text-secondary);
}

/* Shared input, select, and textarea styles */
.mrms-input, .mrms-select, .mrms-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--mrms-bg-primary);
    border: 1px solid var(--mrms-border);
    border-radius: var(--mrms-radius-sm);
    color: var(--mrms-text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

/* Focus ring using accent color */
.mrms-input:focus, .mrms-select:focus, .mrms-textarea:focus {
    border-color: var(--mrms-accent);
    box-shadow: 0 0 0 2px var(--mrms-accent-glow);
}

/* Accessible dual-ring keyboard focus (a11y) */
.mrms-input:focus-visible, .mrms-select:focus-visible, .mrms-textarea:focus-visible {
    border-color: var(--mrms-accent);
    outline: 2px solid var(--mrms-accent);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--mrms-accent-glow);
}

.mrms-btn:focus-visible {
    outline: 2px solid var(--mrms-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--mrms-accent-glow);
}

/* =========================================================================
   COMPONENTS: CHECKBOXES
   ========================================================================= */

input[type="checkbox"].mrms-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--mrms-accent);
    cursor: pointer;
}

/* =========================================================================
   COMPONENTS: TABLES
   ========================================================================= */

/* Scrollable table wrapper with rounded border */
.mrms-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mrms-border);
    border-radius: var(--mrms-radius-md);
}

/* Table reset */
.mrms-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

/* Header cells: uppercase, muted, darker background */
.mrms-table th {
    background: var(--mrms-bg-tertiary);
    color: var(--mrms-text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mrms-border);
}

/* Body cells */
.mrms-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mrms-border);
    color: var(--mrms-text-primary);
    font-size: 13.5px;
}

/* Remove border on last row */
.mrms-table tr:last-child td {
    border-bottom: none;
}

/* Row hover highlight */
.mrms-table tr:hover td {
    background: var(--mrms-surface-hover);
}

/* Selected row highlight (indigo) */
.mrms-table tr.selected td {
    background: rgba(99, 102, 241, 0.1) !important;
}

/* =========================================================================
  COMPONENTS: MODAL & POPUP SYSTEM - GLASSMORPHIC + RESPONSIVE BOTTOM SHEETS
  ========================================================================= */

/* ===== 1. OVERLAY (BACKDROP) ===== */
.mrms-popup-overlay,
.mrms-modal-overlay,
.co-popup-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--mrms-overlay-bg, rgba(8, 10, 16, 0.72)) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    opacity: 0;
    transition: opacity 0.22s ease;
    overscroll-behavior: contain;
}

/* Visible state - Dead Center-Center Flex Alignment */
.mrms-popup-overlay.open,
.mrms-popup-overlay.active,
.mrms-modal-overlay.open,
.mrms-modal-overlay.active,
.co-popup-overlay.open,
.co-popup-overlay.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
}

/* v7.10.62 - While the WP Media Library frame is open, drop the MasterRMS
   overlay z-index below the media modal (160000) so the picker appears ON
   TOP instead of behind the popup.
   v7.20.117 - Added .mrms-modal-backdrop (used by website.php modals). */
body.mrms-media-open .mrms-popup-overlay,
body.mrms-media-open .mrms-modal-overlay,
body.mrms-media-open .mrms-modal-backdrop,
body.mrms-media-open .co-popup-overlay {
    z-index: 100000 !important;
}

/* v7.10.63 - draggable column-width resizer for .mrms-import-preview-table
   (bulk-edit tables, import verify table, etc.) */
.mrms-import-preview-table th { position: relative; }
.mrms-import-preview-table th,
.mrms-import-preview-table td {
    /* v7.10.64 - column dividers */
    border-right: 1px solid var(--mrms-border, #2a2e3a);
}
.mrms-import-preview-table th:last-child,
.mrms-import-preview-table td:last-child { border-right: none; }
.mrms-import-preview-table thead th {
    position: relative;
}
.mrms-import-preview-table .mrms-col-resizer {
    position: absolute; top: 0; right: -5px; bottom: 0; width: 11px;
    cursor: col-resize; z-index: 5; touch-action: none;
    -webkit-user-select: none; user-select: none;
}
/* v7.20.187 (PCS-252) - the grip is always visible so the column edges read as
   draggable; it turns accent-coloured on hover and while dragging. */
.mrms-import-preview-table .mrms-col-resizer::after {
    content: ''; position: absolute; top: 2px; bottom: 2px; left: 4px; width: 3px;
    background: rgba(203, 213, 225, 0.85); border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 17, 21, 0.35);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.mrms-import-preview-table thead th:last-child .mrms-col-resizer {
    right: 0;
}
.mrms-import-preview-table .mrms-col-resizer:hover::after,
body.mrms-col-resizing .mrms-import-preview-table .mrms-col-resizer::after {
    background: var(--mrms-accent, #f68e13);
    box-shadow: 0 0 0 2px rgba(246, 142, 19, 0.18);
}
body.mrms-col-resizing, body.mrms-col-resizing * {
    cursor: col-resize !important; user-select: none !important;
}

/* ===== 2. PANEL (DEEP GLASS CARD) ===== */
.mrms-modal,
.mrms-popup-card,
.co-popup {
    position: relative !important;
    background: var(--mrms-modal-bg, rgba(26, 29, 39, 0.95)) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    color: var(--mrms-text-primary) !important;
    border: 1px solid var(--mrms-border) !important;
    border-radius: 20px;
    width: min(92vw, 900px) !important;
    height: auto !important;
    max-height: min(88vh, 800px) !important;
    max-height: min(88dvh, 800px) !important;
    overflow-y: auto;
    padding: 24px;
    margin: auto !important;
    box-shadow: var(--mrms-shadow-lg), 0 0 0 1px var(--mrms-border);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    animation: mrmsModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Scale-in + fade-in on open */
@keyframes mrmsModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Closing state - added by MasterRMS.modal.close before hide */
.mrms-modal-overlay.closing .mrms-modal,
.mrms-popup-overlay.closing .mrms-popup-card,
.mrms-modal-overlay.closing .mrms-popup-card,
.mrms-popup-overlay.closing .mrms-modal,
.co-popup-overlay.closing .co-popup {
    animation: mrmsModalOut 0.16s ease forwards;
}
@keyframes mrmsModalOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.96) translateY(8px); }
}

/* ===== 3. STANDARDIZED SIZE MODIFIERS ===== */
/* v7.20.16 - --md widened to a more rectangular (landscape) shape so booking
   forms fit WITHOUT scrolling; --lg/--xl bumped to keep the size ladder. */
.mrms-modal--sm,  .mrms-popup-card--sm  { width: min(92vw, 420px) !important; }
.mrms-modal--md,  .mrms-popup-card--md  { width: min(94vw, 720px) !important; }
.mrms-modal--lg,  .mrms-popup-card--lg  { width: min(94vw, 840px) !important; }
.mrms-modal--xl,  .mrms-popup-card--xl  { width: min(94vw, 980px) !important; }

/* v7.20.16 - 2-column modal body: halves height so forms fit without scroll */
.mrms-modal-body-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start;
}
@media (max-width: 640px) {
    .mrms-modal-body-2col { grid-template-columns: 1fr !important; }
}

/* ===== 4. HEADER (sticky inside scrolling panel) ===== */
.mrms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -24px -24px 18px;
    padding: 16px 24px;
    background: var(--mrms-modal-header-bg, rgba(26, 29, 39, 0.92));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mrms-border);
    border-radius: 20px 20px 0 0;
}
.mrms-modal-header h3,
.mrms-modal-header .mrms-modal-title,
.mrms-modal-header .mrms-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
    color: var(--mrms-text-primary);
}
.mrms-modal-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--mrms-text-muted);
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mrms-surface);
    border: 1px solid var(--mrms-border);
    white-space: nowrap;
}

/* Circular hoverable close (✕) button */
.mrms-modal-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--mrms-border) !important;
    background: var(--mrms-surface) !important;
    color: var(--mrms-text-secondary) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.mrms-modal-close:hover {
    background: rgba(239,68,68,0.16) !important;
    border-color: rgba(239,68,68,0.4) !important;
    color: var(--mrms-danger, #ef4444) !important;
    transform: rotate(90deg) scale(1.05) !important;
}

/* ===== 5. BODY (scrolls; header/footer stay put) ===== */
.mrms-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    margin: 0 -24px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.mrms-modal > .mrms-modal-header { margin-bottom: 0; }
.mrms-modal > .mrms-modal-header + .mrms-modal-body { margin-top: 0; }

/* ===== 6. UNIVERSAL STICKY MODAL FOOTERS ===== */
.mrms-modal-footer,
.mrms-modal-actions,
.mrms-modal-footer-sticky {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    flex-shrink: 0;
    background: var(--mrms-modal-footer-bg, var(--mrms-surface));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 14px 24px;
    margin: 18px -24px 0 -24px;
    border-top: 1px solid var(--mrms-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.16);
    border-radius: 0 0 20px 20px;
}
.mrms-modal-footer .mrms-btn,
.mrms-modal-actions .mrms-btn,
.mrms-modal-footer-sticky .mrms-btn { flex-shrink: 0; }

/* ===== UNIVERSAL STICKY SAVE BAR FOR ADMIN VIEWS ===== */
.mrms-sticky-save-bar {
    position: fixed;
    bottom: 24px;
    right: 28px;
    left: auto;
    z-index: 99999;
    background: var(--mrms-surface);
    border: 1px solid var(--mrms-border);
    border-radius: 14px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    max-width: 520px;
}
body.mrms-sidebar-collapsed .mrms-sticky-save-bar {
    right: 28px;
    left: auto;
}
@media (max-width: 1024px) {
    .mrms-sticky-save-bar {
        bottom: 20px;
        right: 20px;
        left: auto !important;
    }
}
@media (max-width: 768px) {
    .mrms-sticky-save-bar {
        bottom: 70px; /* Above mobile navigation bar */
        left: 14px !important;
        right: 14px !important;
        max-width: none;
        padding: 10px 14px;
    }
}


/* ===== 7. FORM GRIDS + INPUTS ===== */
.mrms-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.mrms-form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) {
    .mrms-form-row-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
    .mrms-form-row-2,
    .mrms-form-row-3 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* Uniform 40px inputs + accent focus ring inside modals */
.mrms-modal .mrms-input,
.mrms-modal .mrms-select,
.mrms-popup-card .mrms-input,
.mrms-popup-card .mrms-select {
    height: 40px;
    border-radius: 10px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mrms-modal .mrms-input:focus,
.mrms-modal .mrms-select:focus,
.mrms-popup-card .mrms-input:focus,
.mrms-popup-card .mrms-select:focus {
    border-color: var(--mrms-accent, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
    outline: none !important;
}
.mrms-modal .mrms-label,
.mrms-popup-card .mrms-label {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--mrms-text-secondary);
    margin-bottom: 6px;
    display: block;
}

/* ===== 8. BODY SCROLL LOCK ===== */
body.mrms-modal-open {
    overflow: hidden !important;
}

/* ===== 9. MOBILE - SLIDE-UP BOTTOM SHEETS (<= 600px) ===== */
@media (max-width: 600px) {
    .mrms-modal-overlay,
    .mrms-popup-overlay,
    .co-popup-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }
    .mrms-modal,
    .mrms-popup-card {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        padding: 28px 20px 20px;
        border-bottom: none !important;
        animation: mrmsSheetIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes mrmsSheetIn {
        from { opacity: 0; transform: translateY(48px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* sticky header adapts to sheet + hosts the pull handle */
    .mrms-modal-header {
        position: sticky;
        top: 0;
        margin: -28px -20px 16px;
        padding: 28px 20px 14px;
        border-radius: 24px 24px 0 0;
    }
    .mrms-modal-header::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
    }
    .mrms-modal-footer-sticky {
        position: sticky;
        bottom: 0;
        margin: 16px -20px 0;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        flex-direction: column;
        border-radius: 0;
        gap: 8px !important;
    }
    .mrms-modal-footer-sticky .mrms-btn {
        width: 100% !important;
        justify-content: center;
    }
    .mrms-modal-body {
        padding: 20px;
        margin: 0 -20px;
    }
}

/* ===== 10. MODAL BEAUTIFICATION (v7.20.41) ===== */

/* Subtle inner glow on panel top edge for depth */
.mrms-modal::before,
.mrms-popup-card::before,
.co-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 30%, rgba(99,102,241,0.25) 50%, rgba(255,255,255,0.18) 70%, transparent 100%);
    border-radius: 20px 20px 0 0;
    z-index: 1;
    pointer-events: none;
}

/* Header gradient accent line below */
.mrms-modal-header {
    position: relative;
}
.mrms-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(99,102,241,0.3) 50%, transparent 100%);
}

/* Footer subtle glow line above */
.mrms-modal-footer-sticky {
    position: relative;
}
.mrms-modal-footer-sticky::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
}

/* Button hover polish inside modals */
.mrms-modal .mrms-btn,
.mrms-popup-card .mrms-btn,
.co-popup .mrms-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mrms-modal .mrms-btn:hover,
.mrms-popup-card .mrms-btn:hover,
.co-popup .mrms-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
.mrms-modal .mrms-btn:active,
.mrms-popup-card .mrms-btn:active,
.co-popup .mrms-btn:active {
    transform: translateY(0) !important;
}

/* Textarea consistency inside modals */
.mrms-modal textarea,
.mrms-popup-card textarea,
.co-popup textarea {
    min-height: 80px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
}

/* Form group spacing inside modal body */
.mrms-modal-body .mrms-form-group,
.mrms-modal-body .mrms-field,
.mrms-modal-body > div > .mrms-form-group {
    margin-bottom: 14px !important;
}

/* Placeholder styling consistency */
.mrms-modal .mrms-input::placeholder,
.mrms-modal textarea::placeholder,
.mrms-popup-card .mrms-input::placeholder {
    color: var(--mrms-text-muted, #6b7280) !important;
    font-style: italic !important;
    opacity: 0.7 !important;
}

/* Subtle inner shadow on focused inputs */
.mrms-modal .mrms-input:focus,
.mrms-modal .mrms-select:focus,
.mrms-popup-card .mrms-input:focus,
.mrms-popup-card .mrms-select:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), inset 0 1px 3px rgba(0,0,0,0.12) !important;
}

/* Smooth scroll indicator gradient at body top/bottom */
[data-theme="dark"] .mrms-modal-body {
    background-image: linear-gradient(to bottom, rgba(26,29,39,1) 0%, transparent 24px),
                      linear-gradient(to top, rgba(26,29,39,1) 0%, transparent 24px);
    background-attachment: local, local;
    background-size: 100% 24px;
    background-repeat: no-repeat;
}
[data-theme="light"] .mrms-modal-body {
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, transparent 24px),
                      linear-gradient(to top, rgba(255,255,255,1) 0%, transparent 24px);
    background-attachment: local, local;
    background-size: 100% 24px;
    background-repeat: no-repeat;
}

/* Mobile bottom sheet adjustments */
@media (max-width: 600px) {
    .mrms-modal-footer-sticky::before {
        left: 20px !important;
        right: 20px !important;
    }
    .mrms-modal-header::after {
        left: 20px !important;
        right: 20px !important;
    }
}

/* =========================================================================
   COMPONENTS: ORDER MODAL - LIGHT MODE OVERRIDES
   Ensures the Create Order popup follows design-system tokens in Light Mode.
   Dark Mode keeps its existing frosted glass appearance unchanged.
   ========================================================================= */

/* --- Panel (the main popup card) --- */
[data-theme="light"] .co-popup {
    background: var(--mrms-modal-bg, #ffffff) !important;
    background-color: var(--mrms-modal-bg, #ffffff) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.18),
                0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* --- Header --- */
[data-theme="light"] .co-header {
    background: var(--mrms-modal-header-bg, #f8fafc) !important;
    border-bottom: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-header h3 {
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-header .co-close {
    color: var(--mrms-text-secondary, #475569) !important;
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
    border-radius: 8px !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-header .co-close:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

/* --- Body --- */
[data-theme="light"] .co-body {
    background: var(--mrms-modal-bg, #ffffff) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}

/* --- Footer --- */
[data-theme="light"] .co-footer {
    background: var(--mrms-modal-footer-bg, #f8fafc) !important;
    border-top: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-total {
    text-shadow: none !important;
}
[data-theme="light"] .co-total small {
    color: var(--mrms-text-secondary, #475569) !important;
}

/* --- Step Indicator Dots --- */
[data-theme="light"] .co-step-dot {
    background: var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-step-dot.active {
    background: var(--mrms-accent, #4f46e5) !important;
}
[data-theme="light"] .co-step-dot.done {
    background: #10b981 !important;
}

/* --- Mode Cards (Walk-in / Search / Add Member) --- */
[data-theme="light"] .co-mode-card {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border-color: var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-mode-card:hover {
    border-color: var(--mrms-accent, #4f46e5) !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12) !important;
}
[data-theme="light"] .co-mode-card.selected {
    border-color: var(--mrms-accent, #4f46e5) !important;
    background: rgba(79, 70, 229, 0.04) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}
[data-theme="light"] .co-mode-card .co-mode-title {
    color: var(--mrms-text-primary, #0f172a) !important;
}

/* --- Menu Rows (Dish Items) --- */
[data-theme="light"] .co-menu-row {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-menu-row:hover {
    border-color: var(--mrms-accent, #4f46e5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .co-menu-row strong,
[data-theme="light"] .co-menu-row .co-item-name {
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-menu-row .co-item-price {
    color: var(--mrms-accent, #4f46e5) !important;
}

/* --- Menu Cards (Grid View) --- */
[data-theme="light"] .co-menu-card {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-menu-card:hover {
    border-color: var(--mrms-accent, #4f46e5) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* --- Quantity Controls --- */
[data-theme="light"] .co-qty-btn {
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-qty-btn:hover {
    background: var(--mrms-accent, #4f46e5) !important;
    color: #ffffff !important;
    border-color: var(--mrms-accent, #4f46e5) !important;
}
[data-theme="light"] .co-qty-btn.minus:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}
[data-theme="light"] .co-qty-val {
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-qty-val.has-items {
    color: var(--mrms-accent, #4f46e5) !important;
}

/* --- Search Results Dropdown --- */
[data-theme="light"] .co-search-results {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .co-search-item {
    border-bottom: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-search-item:hover {
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
}

/* --- Selected Customer Pill --- */
[data-theme="light"] .co-selected-pill {
    background: rgba(79, 70, 229, 0.08) !important;
    border: 1px solid rgba(79, 70, 229, 0.25) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-selected-pill span {
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-selected-pill .co-pill-remove {
    color: var(--mrms-text-secondary, #475569) !important;
}
[data-theme="light"] .co-selected-pill .co-pill-remove:hover {
    color: #ef4444 !important;
}

/* --- Inline Add-Member Form --- */
[data-theme="light"] .co-inline-form {
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-inline-form .mrms-label {
    color: var(--mrms-text-secondary, #475569) !important;
}

/* --- Floating Checkout Bar (step 1) --- */
[data-theme="light"] #co-float-checkout-bar {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3) !important;
}

/* --- Inner Routing / Notes / Offers Boxes --- */
[data-theme="light"] #co-items-notes-wrap,
[data-theme="light"] #co-offers-toggle-wrap {
    background: var(--mrms-bg-tertiary, #f8fafc) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] #co-items-notes-list {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
}
[data-theme="light"] .co-item-note-input {
    background: var(--mrms-bg-tertiary, #f1f5f9) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}
[data-theme="light"] .co-item-note-input:focus {
    background: #ffffff !important;
    border-color: var(--mrms-accent, #4f46e5) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* --- Category Tabs --- */
[data-theme="light"] .co-cat-tab {
    color: var(--mrms-text-primary, #0f172a) !important;
}

/* --- Table Picker Modal --- */
[data-theme="light"] #co-table-modal .mrms-popup-card {
    background: var(--mrms-modal-bg, #ffffff) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
    border: 1px solid var(--mrms-border, #cbd5e1) !important;
}

/* --- Custom Table Trigger Button --- */
[data-theme="light"] #co-custom-table-trigger {
    background: var(--mrms-bg-secondary, #ffffff) !important;
    color: var(--mrms-text-primary, #0f172a) !important;
    border-color: var(--mrms-border, #cbd5e1) !important;
}

/* --- Overlay Backdrop --- */
[data-theme="light"] .co-popup-overlay {
    background: var(--mrms-overlay-bg, rgba(15, 23, 42, 0.45)) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
}

/* =========================================================================
   COMPONENTS: ORDER MODAL - 5 SIZES & 5 LAYOUT THEMES
   ========================================================================= */

/* -- 5 SIZING PRESETS ---- */

/* SIZE 1: full_margin - Maximum size with 32px padding/margin */
.mrms-modal-overlay.mrms-size-full_margin, .co-popup-overlay.mrms-size-full_margin { padding: 32px !important; justify-content: center !important; align-items: center !important; }
.mrms-modal-overlay.mrms-size-full_margin .co-popup, .co-popup-overlay.mrms-size-full_margin .co-popup,
.mrms-modal-overlay.mrms-size-full_margin .mrms-popup-card, .co-popup-overlay.mrms-size-full_margin .mrms-popup-card { width: calc(100vw - 64px) !important; max-width: 1200px !important; height: calc(100vh - 64px) !important; max-height: calc(100vh - 64px) !important; margin: auto !important; }

/* SIZE 2: standard - Fixed 960px wide, 85vh tall */
.mrms-modal-overlay.mrms-size-standard, .co-popup-overlay.mrms-size-standard { padding: 32px !important; justify-content: center !important; align-items: center !important; }
.mrms-modal-overlay.mrms-size-standard .co-popup, .co-popup-overlay.mrms-size-standard .co-popup,
.mrms-modal-overlay.mrms-size-standard .mrms-popup-card, .co-popup-overlay.mrms-size-standard .mrms-popup-card { width: 960px !important; max-width: 92vw !important; height: 85vh !important; max-height: 800px !important; border-radius: 20px !important; margin: auto !important; }

/* SIZE 3: compact - Narrower, 780px wide */
.mrms-modal-overlay.mrms-size-compact, .co-popup-overlay.mrms-size-compact { padding: 32px !important; justify-content: center !important; align-items: center !important; }
.mrms-modal-overlay.mrms-size-compact .co-popup, .co-popup-overlay.mrms-size-compact .co-popup,
.mrms-modal-overlay.mrms-size-compact .mrms-popup-card, .co-popup-overlay.mrms-size-compact .mrms-popup-card { width: 780px !important; max-width: 90vw !important; height: 80vh !important; max-height: 700px !important; border-radius: 16px !important; margin: auto !important; }

/* SIZE 4: drawer - Right-side slide-in panel, full height */
.mrms-modal-overlay.mrms-size-drawer, .co-popup-overlay.mrms-size-drawer { padding: 0 !important; justify-content: flex-end !important; align-items: stretch !important; }
.mrms-modal-overlay.mrms-size-drawer .co-popup, .co-popup-overlay.mrms-size-drawer .co-popup,
.mrms-modal-overlay.mrms-size-drawer .mrms-popup-card, .co-popup-overlay.mrms-size-drawer .mrms-popup-card { width: 540px !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; margin: 0 0 0 auto !important; border-left: 1px solid var(--mrms-border, rgba(255,255,255,0.15)) !important; }

/* SIZE 5: fluid_wide - Extra-wide, minimal padding */
.mrms-modal-overlay.mrms-size-fluid_wide, .co-popup-overlay.mrms-size-fluid_wide { padding: 12px !important; justify-content: center !important; align-items: center !important; }
.mrms-modal-overlay.mrms-size-fluid_wide .co-popup, .co-popup-overlay.mrms-size-fluid_wide .co-popup,
.mrms-modal-overlay.mrms-size-fluid_wide .mrms-popup-card, .co-popup-overlay.mrms-size-fluid_wide .mrms-popup-card { width: 96vw !important; max-width: 1650px !important; height: 94vh !important; max-height: 96vh !important; border-radius: 20px !important; margin: auto !important; padding: 14px 18px !important; }

/* Mobile Overrides: Strip all outer margins & padding on screens < 768px */
@media (max-width: 767px) {
  .mrms-modal-overlay.mrms-size-full_margin, .co-popup-overlay.mrms-size-full_margin,
  .mrms-modal-overlay.mrms-size-standard, .co-popup-overlay.mrms-size-standard,
  .mrms-modal-overlay.mrms-size-compact, .co-popup-overlay.mrms-size-compact,
  .mrms-modal-overlay.mrms-size-fluid_wide, .co-popup-overlay.mrms-size-fluid_wide {
    padding: 0 !important;
    margin: 0 !important;
  }
  .mrms-modal-overlay.mrms-size-full_margin .co-popup, .mrms-modal-overlay.mrms-size-full_margin .mrms-popup-card,
  .mrms-modal-overlay.mrms-size-standard .co-popup, .mrms-modal-overlay.mrms-size-standard .mrms-popup-card,
  .mrms-modal-overlay.mrms-size-compact .co-popup, .mrms-modal-overlay.mrms-size-compact .mrms-popup-card,
  .mrms-modal-overlay.mrms-size-fluid_wide .co-popup, .mrms-modal-overlay.mrms-size-fluid_wide .mrms-popup-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* -- 5 LAYOUT THEMES ---- */

/* THEME 1: SPLIT POS DUAL-PANE */
@media (min-width: 851px) {
    .co-popup.co-theme-split_pos .co-body { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) !important; gap: 12px !important; overflow: hidden !important; flex: 1 !important; min-height: 0 !important; padding: 12px 16px !important; }
    .co-popup.co-theme-split_pos #co-step-1 { order: 1 !important; display: flex !important; flex-direction: column !important; overflow-y: hidden !important; height: 100% !important; border-right: 1px solid var(--mrms-border) !important; padding-right: 10px !important; flex: 1 !important; min-height: 0 !important; }
    .co-popup.co-theme-split_pos #co-step-2 { order: 2 !important; display: block !important; overflow-y: auto !important; overflow-x: hidden !important; height: 100% !important; padding-left: 2px !important; }
    .co-popup.co-theme-split_pos #co-menu-list { align-content: start !important; flex: 1 !important; height: 100% !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important; }
    .co-popup.co-theme-split_pos #co-back-step, .co-popup.co-theme-split_pos #co-next-step, .co-popup.co-theme-split_pos .co-steps { display: none !important; }
    .co-popup.co-theme-split_pos #co-footer { display: flex !important; grid-column: 1 / -1 !important; }
}

/* Hide FAB shortcut button when any modal is open */
.co-popup-overlay.open ~ .mrms-fab-btn,
.mrms-modal-overlay.open ~ .mrms-fab-btn,
body:has(.co-popup-overlay.open) .mrms-fab-btn,
body.modal-open .mrms-fab-btn,
.co-popup-overlay.open .mrms-fab-btn,
/* v7.10.51 - also hide while the AI chat widget is open */
body.mrms-chat-open .mrms-fab-btn,
body:has(#mrms-ai-chat-widget[style*="display: flex"]) .mrms-fab-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* THEME 2: WIZARD STEPPER */
.co-popup.co-theme-wizard .co-header { background: linear-gradient(135deg, var(--mrms-surface) 0%, rgba(99,102,241,0.08) 100%) !important; border-bottom: 2px solid var(--mrms-accent) !important; }
.co-popup.co-theme-wizard .co-steps { display: flex !important; gap: 12px !important; margin: 12px 0 !important; width: 100% !important; }
.co-popup.co-theme-wizard .co-step-dot { height: 8px !important; border-radius: 4px !important; flex: 1 !important; background: var(--mrms-border) !important; transition: all 0.3s ease !important; }
.co-popup.co-theme-wizard .co-step-dot.active { background: var(--mrms-accent) !important; box-shadow: 0 0 12px var(--mrms-accent-glow) !important; }
.co-popup.co-theme-wizard .co-step-dot.done { background: var(--mrms-success, #10b981) !important; }

/* THEME 3: EXPRESS COMPACT LIST */
.co-popup.co-theme-compact { max-width: 680px !important; }
.co-popup.co-theme-compact .co-header { padding: 12px 18px !important; }
.co-popup.co-theme-compact .co-header h3 { font-size: 15px !important; }
.co-popup.co-theme-compact .co-body { padding: 12px 18px !important; }
.co-popup.co-theme-compact #co-menu-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
.co-popup.co-theme-compact .co-menu-row, .co-popup.co-theme-compact .co-menu-card { padding: 6px 10px !important; border-radius: 8px !important; font-size: 12px !important; }
.co-popup.co-theme-compact .co-qty-btn { width: 26px !important; height: 26px !important; font-size: 13px !important; }
.co-popup.co-theme-compact .co-footer { padding: 10px 18px !important; }

/* THEME 4: LUXURY DARK GLASSMORPHISM */
.co-popup.co-theme-glassmorphism, .co-popup.co-theme-glass { background: var(--mrms-modal-bg, rgba(15, 23, 42, 0.94)) !important; color: var(--mrms-text-primary, #f8fafc) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; border: 1px solid var(--mrms-border) !important; box-shadow: 0 32px 90px rgba(0,0,0,0.85), 0 0 30px rgba(99,102,241,0.25) !important; }
.co-popup.co-theme-glassmorphism .co-header, .co-popup.co-theme-glass .co-header { border-bottom-color: rgba(255,255,255,0.12) !important; background: rgba(30, 41, 59, 0.6) !important; }
.co-popup.co-theme-glassmorphism .co-header h3, .co-popup.co-theme-glass .co-header h3 { color: #ffffff !important; }
.co-popup.co-theme-glassmorphism .co-close, .co-popup.co-theme-glass .co-close { color: #94a3b8 !important; }
.co-popup.co-theme-glassmorphism .co-close:hover, .co-popup.co-theme-glass .co-close:hover { color: #ffffff !important; background: rgba(255,255,255,0.12) !important; }
.co-popup.co-theme-glassmorphism .co-footer, .co-popup.co-theme-glass .co-footer { background: rgba(30, 41, 59, 0.75) !important; border-top-color: rgba(255,255,255,0.12) !important; }
.co-popup.co-theme-glassmorphism .co-menu-row, .co-popup.co-theme-glassmorphism .co-menu-card, .co-popup.co-theme-glass .co-menu-row, .co-popup.co-theme-glass .co-menu-card { background: rgba(30, 41, 59, 0.65) !important; border-color: rgba(255,255,255,0.1) !important; color: var(--mrms-text-primary, #f8fafc) !important; }
.co-popup.co-theme-glassmorphism .co-menu-row:hover, .co-popup.co-theme-glassmorphism .co-menu-card:hover, .co-popup.co-theme-glass .co-menu-row:hover, .co-popup.co-theme-glass .co-menu-card:hover { border-color: #6366f1 !important; background: rgba(99, 102, 241, 0.2) !important; box-shadow: 0 0 15px rgba(99,102,241,0.3) !important; }
.co-popup.co-theme-glassmorphism .co-item-info strong, .co-popup.co-theme-glass .co-item-info strong { color: var(--mrms-text-primary, #f8fafc) !important; }

/* THEME 5: FOODIE VISUAL GRID */
.co-popup.co-theme-foodie_grid #co-menu-list, .co-popup.co-theme-foodie #co-menu-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 14px !important; }
.co-popup.co-theme-foodie_grid .co-menu-card, .co-popup.co-theme-foodie_grid .co-menu-row, .co-popup.co-theme-foodie .co-menu-card, .co-popup.co-theme-foodie .co-menu-row { display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 14px !important; border-radius: 16px !important; background: var(--mrms-surface) !important; border: 1.5px solid var(--mrms-border) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.co-popup.co-theme-foodie_grid .co-menu-card:hover, .co-popup.co-theme-foodie .co-menu-card:hover { transform: translateY(-4px) !important; border-color: var(--mrms-accent) !important; box-shadow: 0 10px 25px rgba(99,102,241,0.2) !important; }
.co-popup.co-theme-foodie_grid .co-qty-controls, .co-popup.co-theme-foodie .co-qty-controls { width: 100% !important; justify-content: space-between !important; margin-top: 8px !important; }

/* =========================================================================
   COMPONENTS: TOAST NOTIFICATIONS
   ========================================================================= */

/* Fixed container in the DEAD CENTER-CENTER of the viewport */
#mrms-toast-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: none !important;
}

/* Individual toast notification */
.mrms-toast {
    pointer-events: auto !important;
    min-width: 280px;
    padding: 12px 18px;
    border-radius: var(--mrms-radius-md);
    background: var(--mrms-bg-tertiary);
    border-left: 4px solid var(--mrms-accent);
    color: var(--mrms-text-primary);
    box-shadow: var(--mrms-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    animation: mrmsFadeIn 0.3s ease;
}

/* Type-specific left border colors */
.mrms-toast-success { border-left-color: var(--mrms-success); }
.mrms-toast-danger { border-left-color: var(--mrms-danger); }
.mrms-toast-warning { border-left-color: var(--mrms-warning); }

/* ============================================================
   MOBILE COMPONENTS: ACTION SHEET, POS CART DRAWER, MOBILE CARDS
   ============================================================ */

/* ---------- Mobile Action Sheet ---------- */
.mrms-mobile-actionsheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}
.mrms-mobile-actionsheet.is-open {
  visibility: visible;
  opacity: 1;
}
.mrms-mobile-actionsheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mrms-mobile-actionsheet__panel {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--mrms-surface);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mrms-mobile-actionsheet.is-open .mrms-mobile-actionsheet__panel {
  transform: translateY(0);
}
.mrms-mobile-actionsheet__handle {
  width: 42px; height: 5px; border-radius: 999px;
  background: var(--mrms-border);
  margin: 6px auto 14px;
}
.mrms-mobile-actionsheet__title {
  font-size: 14px;
  color: var(--mrms-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.mrms-actionsheet-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--mrms-surface-alt, #f7f7f9);
  color: var(--mrms-text-primary);
  border: 1px solid transparent;
  text-align: left;
  font-size: 15px;
  margin-bottom: 8px;
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
.mrms-actionsheet-option:active {
  transform: scale(.98);
  border-color: var(--mrms-accent, #6366f1);
  background: var(--mrms-surface);
}
.mrms-actionsheet-option__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--mrms-accent, #6366f1); color: #fff;
  font-size: 16px; flex-shrink: 0;
}

/* ---------- POS Mobile Cart Drawer ---------- */
.mrms-pos-cart-bar {
  position: fixed;
  inset: auto 0 60px 0;
  z-index: 800;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--mrms-accent, #6366f1);
  color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.mrms-pos-cart-bar.is-visible { transform: translateY(0); }
.mrms-pos-cart-bar__count {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 13px;
}
.mrms-pos-cart-bar__total { margin-left: auto; font-weight: 700; }
.mrms-pos-cart-bar__cta {
  background: #fff; color: var(--mrms-accent, #6366f1);
  border: none; border-radius: 999px;
  padding: 10px 18px; font-weight: 700;
  min-height: 44px;
}
.mrms-pos-cart-sheet {
  position: fixed; inset: 0; z-index: 1200;
  visibility: hidden; opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}
.mrms-pos-cart-sheet.is-open { visibility: visible; opacity: 1; }
.mrms-pos-cart-sheet__panel {
  position: absolute; inset: 0;
  background: var(--mrms-surface);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32,.72,0,1);
  padding-top: env(safe-area-inset-top);
}
.mrms-pos-cart-sheet.is-open .mrms-pos-cart-sheet__panel { transform: translateY(0); }
.mrms-pos-cart-sheet__header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--mrms-border);
  min-height: 48px;
}
.mrms-pos-cart-sheet__body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.mrms-pos-cart-sheet__footer {
  padding: 16px;
  border-top: 1px solid var(--mrms-border);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .mrms-pos-cart-bar,
  .mrms-pos-cart-sheet { display: none !important; }
}

/* ---------- Mobile Card List & Status Pills ---------- */
.mrms-mobile-card-list { display: none; }
@media (max-width: 767px) {
  .mrms-desktop-table { display: none !important; }
  .mrms-mobile-card-list { display: grid; gap: 12px; }
}
.mrms-mcard {
  background: var(--mrms-surface);
  border: 1px solid var(--mrms-border);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: transform .15s ease, box-shadow .2s ease;
}
.mrms-mcard:hover { box-shadow: var(--mrms-card-shadow-hover, 0 4px 12px rgba(0,0,0,.08)); border-color: var(--mrms-card-border-hover, var(--mrms-border)); }
.mrms-mcard:active { transform: scale(.99); box-shadow: var(--mrms-card-shadow, 0 2px 4px rgba(0,0,0,.06)); }
.mrms-mcard__row {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between;
}
.mrms-mcard__title { font-weight: 700; font-size: 15px; color: var(--mrms-text-primary); }
.mrms-mcard__meta { font-size: 13px; color: var(--mrms-text-muted); }
.mrms-mcard__select {
  position: absolute; top: 12px; left: 12px;
  width: 22px; height: 22px;
}
.mrms-mcard__body { padding-left: 30px; }

.mrms-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  min-height: 28px;
}
.mrms-pill--available { background: rgba(34,197,94,0.15); color: #22c55e; }
.mrms-pill--occupied  { background: rgba(239,68,68,0.15); color: #ef4444; }
.mrms-pill--cleaning { background: rgba(14,165,233,0.15); color: #0ea5e9; }
.mrms-pill--reserved { background: rgba(245,158,11,0.15); color: #f59e0b; }

@media (max-width: 767px) {
  .mrms-modal-fullscreen {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* v7.20.247 (PCS-312) - NOTIFICATIONS WHILE A MODAL IS OPEN
   The toast stack is dead-center and the role-notification stack is top-right,
   and BOTH sat on z-index 999999 - the same as .mrms-popup-overlay. Which one
   you saw on top depended on DOM order, so a toast arriving while the payment
   modal was open sometimes landed right across the card ("overlapping").
   While any MasterRMS modal is open (body.mrms-modal-open, set by
   MasterRMS.modal.open/close):
     - toasts move out of the centre to the bottom-right corner and sit ABOVE
       the modal (z 1000001) so they can no longer cover the form;
     - role notification cards keep their corner, render above the modal and
       become click-through, so they cannot swallow a click meant for the
       payment form (the card itself stays clickable only when no modal is up). */
body.mrms-modal-open #mrms-toast-container {
    top: auto !important;
    bottom: 18px !important;
    left: auto !important;
    right: 18px !important;
    transform: none !important;
    align-items: flex-end !important;
    /* Stay inside the free margin beside the modal card (min(92vw,720px), centred),
       so a toast can never sit over the payment form. 200px floor for small screens. */
    width: auto !important;
    max-width: calc((100vw - 740px) / 2 - 30px) !important;
    min-width: 200px !important;
    z-index: 1000001 !important;
}
body.mrms-modal-open .mrms-toast {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
body.mrms-modal-open #mrms-role-notif-container {
    z-index: 1000001 !important;
    width: auto !important;
    max-width: calc((100vw - 740px) / 2 - 30px) !important;
    min-width: 200px !important;
}
body.mrms-modal-open .mrms-role-notif-card {
    pointer-events: none !important;
    width: auto !important;
    max-width: 100% !important;
}

/* =========================================================================
   COMPONENTS: GLOBAL ROLE NOTIFICATION ENGINE (Toasts & Popups)
   ========================================================================= */

#mrms-role-notif-container {
    position: fixed;
    top: 48px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    width: calc(100vw - 40px);
    pointer-events: none;
}

.mrms-role-notif-card {
    pointer-events: auto;
    background: var(--mrms-modal-bg, rgba(15, 23, 42, 0.94));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--mrms-border);
    border-radius: 16px;
    padding: 16px 18px;
    color: var(--mrms-text-primary);
    box-shadow: var(--mrms-shadow-xl, 0 16px 40px rgba(0, 0, 0, 0.4));
    position: relative;
    overflow: hidden;
    transform: translateX(120%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, max-height 0.35s ease, padding 0.35s ease, margin 0.35s ease;
}

.mrms-role-notif-card.active {
    transform: translateX(0);
}

.mrms-role-notif-card.dismissing {
    transform: translateX(120%) scale(0.95);
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -10px !important;
}

@keyframes mrmsCardPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.025); box-shadow: 0 0 24px var(--notif-accent, #6366f1); }
    100% { transform: scale(1); }
}

.mrms-role-notif-card.pulse {
    animation: mrmsCardPulse 0.4s ease;
}

.mrms-role-notif-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--notif-accent, #6366f1);
}

.mrms-role-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mrms-role-notif-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mrms-role-notif-close {
    cursor: pointer;
    opacity: 0.6;
    font-size: 18px;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.mrms-role-notif-close:hover {
    opacity: 1;
}

.mrms-role-notif-body {
    font-size: 12px;
    color: #cbd5e1;
    margin-top: 6px;
    line-height: 1.45;
}

.mrms-role-notif-btn {
    margin-top: 10px;
    padding: 6px 14px;
    background: var(--notif-accent, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.mrms-role-notif-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.mrms-role-notif-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--notif-accent, #6366f1);
    width: 100%;
    transition: width 6000ms linear;
}

/* =========================================================================
   COMPONENTS: EMPTY / ZERO STATE CONTAINERS
   ========================================================================= */
.mrms-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    background: var(--mrms-bg-tertiary);
    border: 2px dashed var(--mrms-border);
    border-radius: var(--mrms-radius-lg);
    margin: 16px 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

.mrms-empty-state-icon {
    font-size: 44px;
    margin-bottom: 12px;
    opacity: 0.85;
}

.mrms-empty-state-title {
    font-size: var(--mrms-font-card-title, 16px);
    font-weight: 700;
    color: var(--mrms-text-primary);
    margin: 0 0 6px;
}

.mrms-empty-state-desc {
    font-size: var(--mrms-font-body, 13px);
    color: var(--mrms-text-secondary);
    max-width: 420px;
    margin: 0 0 16px;
    line-height: 1.5;
}

.mrms-empty-state-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================================
   COMPONENTS: PAGE HEADER & SECTION CADENCE
   ========================================================================= */
.mrms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--mrms-border);
    flex-wrap: wrap;
    gap: 12px;
}

.mrms-page-title {
    font-size: var(--mrms-font-page-title, 22px);
    font-weight: 800;
    color: var(--mrms-text-primary);
    letter-spacing: -0.3px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mrms-page-subtitle {
    font-size: var(--mrms-font-caption, 12px);
    color: var(--mrms-text-secondary);
    margin: 2px 0 0;
}


/* =========================================================================
   v7.20.266 (R0a) - React layer components

   The error boundary and the five interaction states ship as named component
   classes so every converted view renders the same loading / empty / error /
   partial / success vocabulary instead of inventing its own (design review F46
   and section 11). Tokens only: no hardcoded colours, both themes.
   ========================================================================= */

.mrms-error-boundary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 40px auto;
    padding: 28px 24px;
    text-align: center;
    background: var(--mrms-bg-secondary);
    border: 1px solid var(--mrms-border);
    border-radius: var(--mrms-radius-lg, 14px);
}

.mrms-error-boundary-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--mrms-text-primary);
}

.mrms-error-boundary-message {
    font-size: 13px;
    color: var(--mrms-text-muted);
    word-break: break-word;
}

.mrms-error-boundary-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.mrms-error-boundary-classic {
    font-size: 12.5px;
    color: var(--mrms-text-muted);
    text-decoration: underline;
}

.mrms-error-boundary-classic:hover {
    color: var(--mrms-text-primary);
}

.mrms-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 18px;
    text-align: center;
    color: var(--mrms-text-muted);
}

.mrms-state-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mrms-text-primary);
}

.mrms-state-message {
    font-size: 12.5px;
}

.mrms-state-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.mrms-state-icon {
    font-size: 22px;
    line-height: 1;
}

.mrms-state-loading .mrms-state-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mrms-border);
    border-top-color: var(--mrms-accent);
    border-radius: 50%;
    animation: mrms-spin 0.8s linear infinite;
}

@keyframes mrms-spin {
    to { transform: rotate(360deg); }
}

.mrms-state-empty { }

.mrms-state-error { }

.mrms-state-error .mrms-state-title {
    color: var(--mrms-danger);
}

.mrms-state-partial {
    border: 1px solid var(--mrms-warning-border, var(--mrms-border));
    background: var(--mrms-warning-bg, transparent);
    border-radius: var(--mrms-radius-md, 10px);
}

.mrms-state-success .mrms-state-title {
    color: var(--mrms-success);
}

/* ===== R0b: classic chrome suppressed while React owns the screen =====
   The classic view is rendered for the kill switch, but its list markup must
   not sit behind the React list. Overlay children (View Order, Payment, Create
   Order) and <style> blocks are excluded: overlays carry their own
   display:none and open via .open, and the view's own styles must keep
   applying so a modal opened from a React row looks identical. */
#mrms-classic-fallback.mrms-classic-suppressed > *:not(style):not(.mrms-popup-overlay):not(.mrms-modal-overlay):not(.co-popup-overlay) {
    display: none !important;
}

/* =====================================================================
 * Business Operating Mode cards (v7.20.292, PCS-364)
 *
 * Two large clickable cards replace the plain mode dropdown. They are
 * keyboard reachable (tabindex + role=radio) and the selected one is
 * marked both visually and with aria-checked.
 * ===================================================================== */

.mrms-mode-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.mrms-mode-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border: 2px solid var(--mrms-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
    background: var(--mrms-bg-secondary, transparent);
}

.mrms-mode-card:hover {
    border-color: var(--mrms-primary);
}

.mrms-mode-card:focus-visible {
    outline: 2px solid var(--mrms-primary);
    outline-offset: 2px;
}

.mrms-mode-card.active {
    border-color: var(--mrms-primary);
    background: var(--mrms-primary-bg, rgba(217, 119, 6, 0.08));
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.mrms-mode-card__icon {
    font-size: 26px;
    line-height: 1;
}

.mrms-mode-card__title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--mrms-text-primary);
}

.mrms-mode-card__desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--mrms-text-muted);
}

/* Explains what switching to retail will hide, without touching the
   admin's saved module choices. */
.mrms-mode-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mrms-text-muted);
    min-height: 1em;
}

.mrms-mode-note.is-retail {
    color: var(--mrms-primary);
}

@media (max-width: 600px) {
    .mrms-mode-cards {
        grid-template-columns: 1fr;
    }
}


/* =========================================================================
   PROMPT 19 - SOLID MODALS, ZERO BLEED-THROUGH
   The cards used rgba surfaces plus backdrop blur, so tables and page text
   visibly bled through the POS modal. The card is now an opaque surface and
   only the overlay mutes the page behind it.
   ========================================================================= */
.co-popup,
.co-popup.co-theme-glassmorphism,
.co-popup.co-theme-glass,
.mrms-popup-card,
.mrms-modal,
#modal-view-order .mrms-vo-modal-card,
#modal-view-order .mrms-modal-card {
    background: var(--mrms-modal-bg, #181d27) !important;
    background-color: var(--mrms-modal-bg, #181d27) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.co-popup-overlay,
.mrms-popup-overlay,
.mrms-modal-overlay,
.co-popup-overlay.open,
.mrms-popup-overlay.open,
.mrms-modal-overlay.open {
    background: var(--mrms-overlay-bg, rgba(5, 8, 15, 0.85)) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

.co-popup .mrms-popup-card,
.co-popup .co-popup-body,
.mrms-popup-card .mrms-modal-body,
.mrms-modal .mrms-modal-body {
    background: var(--mrms-modal-bg, #181d27) !important;
}

/* Prompt 25: provisioning dialogs always use the opaque surface. */
html .mrms-solid-modal {
    background: var(--mrms-bg-secondary) !important;
    background-color: var(--mrms-bg-secondary) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] .mrms-solid-modal {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* =========================================================================
   PROMPT 24 - LIGHT MODE SOLID MODAL CONTRAST
   React modals use inline surface tokens, so they get a small shared class.
   The Blade modal classes stay covered by the selector list as well.
   ========================================================================= */
html[data-theme="light"] .mrms-modal,
html[data-theme="light"] .mrms-popup-card,
html[data-theme="light"] .co-popup,
html[data-theme="light"] #co-popup-content,
html[data-theme="light"] .mrms-modal--lg,
html[data-theme="light"] .mrms-modal--md,
html[data-theme="light"] .mrms-modal--sm,
html[data-theme="light"] .mrms-modal--xl,
html[data-theme="light"] .mrms-modal-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

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

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

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

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

html[data-theme="light"] .mrms-modal .mrms-label,
html[data-theme="light"] .mrms-modal-card .mrms-label,
html[data-theme="light"] .mrms-modal-card label {
    color: #334155 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .mrms-modal .mrms-input,
html[data-theme="light"] .mrms-modal .mrms-select,
html[data-theme="light"] .mrms-modal .mrms-textarea,
html[data-theme="light"] .mrms-modal-card .mrms-input,
html[data-theme="light"] .mrms-modal-card .mrms-select,
html[data-theme="light"] .mrms-modal-card .mrms-textarea {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
}

html[data-theme="light"] .mrms-modal .mrms-input:focus,
html[data-theme="light"] .mrms-modal .mrms-select:focus,
html[data-theme="light"] .mrms-modal .mrms-textarea:focus,
html[data-theme="light"] .mrms-modal-card .mrms-input:focus,
html[data-theme="light"] .mrms-modal-card .mrms-select:focus,
html[data-theme="light"] .mrms-modal-card .mrms-textarea:focus {
    border-color: var(--mrms-accent, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

html[data-theme="light"] .mrms-modal-overlay,
html[data-theme="light"] .mrms-modal-backdrop,
html[data-theme="light"] .mrms-popup-overlay,
html[data-theme="light"] .co-popup-overlay,
html[data-theme="light"] #co-popup-overlay {
    background: rgba(15, 23, 42, 0.65) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
}

html[data-theme="light"] .mrms-modal .mrms-category-checkbox-item,
html[data-theme="light"] .mrms-modal-card .mrms-category-checkbox-item,
html[data-theme="light"] .co-cat-tab {
    color: #1e293b !important;
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .mrms-modal .mrms-checkbox,
html[data-theme="light"] .mrms-modal-card .mrms-checkbox {
    accent-color: var(--mrms-accent, #6366f1) !important;
}

/* =========================================================================
   PROMPT 27 - UNIVERSAL SOLID MODAL SURFACES
   No blur, no translucent cards, no background bleed-through.
   ========================================================================= */
.mrms-modal,
.mrms-popup-card,
.co-popup,
.mrms-modal-card,
.mrms-vo-modal-card,
.mrms-dialog-card {
    background: #181d27 !important;
    background-color: #181d27 !important;
    color: #f8fafc !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85) !important;
}

.mrms-modal-header,
.co-header,
.mrms-modal-footer,
.mrms-modal-actions,
.mrms-modal-footer-sticky,
.co-footer {
    background: #1e2433 !important;
    background-color: #1e2433 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
}

html[data-theme="light"] .mrms-modal,
html[data-theme="light"] .mrms-popup-card,
html[data-theme="light"] .co-popup,
html[data-theme="light"] .mrms-modal-card,
html[data-theme="light"] .mrms-vo-modal-card,
html[data-theme="light"] .mrms-dialog-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-theme="light"] .mrms-modal-header,
html[data-theme="light"] .co-header {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-bottom: 1px solid #cbd5e1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-theme="light"] .mrms-modal-footer,
html[data-theme="light"] .mrms-modal-actions,
html[data-theme="light"] .mrms-modal-footer-sticky,
html[data-theme="light"] .co-footer {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* =========================================================================
   PROMPT 26 - SOLID PAYMENT / POS MODAL SURFACES
   ========================================================================= */
html:not([data-theme="light"]) .mrms-modal-card {
    background: #1e2433 !important;
    background-color: #1e2433 !important;
    color: #f8fafc !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-theme="light"] .mrms-modal-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    opacity: 1 !important;
}

.mrms-modal-card.mrms-payment-modal {
    background: #1e2433 !important;
    background-color: #1e2433 !important;
    color: #f8fafc !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85) !important;
}

html[data-theme="light"] .mrms-modal-card.mrms-payment-modal {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22) !important;
}

html[data-theme="light"] .mrms-payment-modal .mrms-input,
html[data-theme="light"] .mrms-payment-modal .mrms-select,
html[data-theme="light"] .mrms-payment-modal .mrms-textarea {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .mrms-payment-modal .mrms-btn-secondary {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .mrms-payment-modal .mrms-label,
html[data-theme="light"] .mrms-payment-modal label {
    color: #334155 !important;
}

/* =========================================================================
   PROMPT 26 - SOLID, HIGH-VISIBILITY TOASTS
   ========================================================================= */
#mrms-toast-container {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    left: auto !important;
    transform: none !important;
    z-index: 1000005 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    pointer-events: none !important;
}

.mrms-toast {
    pointer-events: auto !important;
    min-width: 300px;
    max-width: 460px;
    padding: 14px 20px;
    border-radius: 14px;
    background: #181d27 !important;
    background-color: #181d27 !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-left: 5px solid var(--mrms-accent) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    opacity: 1 !important;
    animation: mrmsToastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mrms-toast-success { border-left-color: #10b981 !important; }
.mrms-toast-danger, .mrms-toast-error { border-left-color: #ef4444 !important; }
.mrms-toast-warning { border-left-color: #f59e0b !important; }

html[data-theme="light"] .mrms-toast {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .mrms-toast-success { border-left-color: #10b981 !important; }
html[data-theme="light"] .mrms-toast-danger, html[data-theme="light"] .mrms-toast-error { border-left-color: #ef4444 !important; }
html[data-theme="light"] .mrms-toast-warning { border-left-color: #f59e0b !important; }

@keyframes mrmsToastIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Prompt 27: destructive controls disappear for floor staff and managers.
   The API enforces the same rule with a 403; this keeps the UI honest too. */
body.mrms-no-record-delete #btn-bulk-delete-orders,
body.mrms-no-record-delete #btn-bulk-delete,
body.mrms-no-record-delete #btn-mcat-bulk-delete,
body.mrms-no-record-delete #btn-delete-floor,
body.mrms-no-record-delete #btn-delete-layout,
body.mrms-no-record-delete #btn-bulk-table-delete,
body.mrms-no-record-delete #btn-bulk-delete-accounts,
body.mrms-no-record-delete #btn-vendors-bulk-delete,
body.mrms-no-record-delete #btn-bulk-delete-inv,
body.mrms-no-record-delete #btn-bulk-trash-members,
body.mrms-no-record-delete #btn-head-delete,
body.mrms-no-record-delete .btn-delete-staff,
body.mrms-no-record-delete .btn-delete-table,
body.mrms-no-record-delete .btn-delete-client,
body.mrms-no-record-delete .btn-delete-vendor,
body.mrms-no-record-delete .btn-delete-inv,
body.mrms-no-record-delete .btn-delete-post,
body.mrms-no-record-delete .btn-delete-blog-cat,
body.mrms-no-record-delete .btn-delete-custom-template,
body.mrms-no-record-delete .btn-delete-role,
body.mrms-no-record-delete .btn-delete-plan,
body.mrms-no-record-delete .action-delete,
body.mrms-no-record-delete .action-delete-cat {
    display: none !important;
}