/**
 * Master Platform Theme Stylesheet
 * Complete High-Contrast, Consistent, Readable Light Mode for the Entire Platform
 * (Customer Menu, Restaurant Admin Dashboard, Super Admin, Landing Page)
 */

/* Smooth theme transitions, mobile boundary lock & Disable mobile accidental zoom */
html, body {
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
}
button, a, input, textarea, select, [role="button"] {
    touch-action: manipulation;
}
body {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   LIGHT MODE RULES (Applied when html has .light-mode)
   ========================================================================== */

/* 1. Base Body & Root Typography */
html.light-mode,
html.light-mode body {
    background-color: #f8fafc !important; /* Slate-50 - Soft natural off-white */
    color: #0f172a !important;            /* Slate-900 - Deep crisp text */
}

/* Headings, titles, brand names */
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6,
html.light-mode .hero-title,
html.light-mode .item-title,
html.light-mode .cat-section-title,
html.light-mode .modal-title,
html.light-mode .cart-item-title,
html.light-mode .table-number-text {
    color: #0f172a !important;
}

/* Primary text that was white in dark mode -> Deep Slate-900 */
html.light-mode .text-white,
html.light-mode .text-slate-100 {
    color: #0f172a !important;
}

/* Secondary labels & bold elements */
html.light-mode .text-slate-200,
html.light-mode .text-slate-300 {
    color: #1e293b !important; /* Slate-800 for high readability */
}

/* Paragraphs, item descriptions, metadata */
html.light-mode .text-slate-400,
html.light-mode .item-desc,
html.light-mode .hero-bio {
    color: #475569 !important; /* Slate-600 */
}

/* Muted text, captions, hints */
html.light-mode .text-slate-500 {
    color: #64748b !important; /* Slate-500 */
}

/* Subtle icons & lines */
html.light-mode .text-slate-600 {
    color: #94a3b8 !important; /* Slate-400 */
}

/* ==========================================================================
   CRITICAL: PRESERVE WHITE TEXT ON COLORED / GRADIENT BUTTONS & BADGES
   ========================================================================== */
html.light-mode .bg-emerald-500,
html.light-mode .bg-emerald-600,
html.light-mode .from-emerald-500,
html.light-mode .to-teal-600,
html.light-mode .to-teal-700,
html.light-mode .bg-red-500,
html.light-mode .bg-red-600,
html.light-mode .bg-rose-500,
html.light-mode .bg-rose-600,
html.light-mode .bg-blue-600,
html.light-mode .sidebar-active-tab,
html.light-mode #cart-badge {
    color: #ffffff !important;
}

html.light-mode .bg-emerald-500 *,
html.light-mode .bg-emerald-600 *,
html.light-mode .from-emerald-500 *,
html.light-mode .to-teal-600 *,
html.light-mode .to-teal-700 *,
html.light-mode .bg-red-500 *,
html.light-mode .bg-red-600 *,
html.light-mode .bg-rose-500 *,
html.light-mode .bg-rose-600 *,
html.light-mode .bg-blue-600 *,
html.light-mode .sidebar-active-tab * {
    color: #ffffff !important;
}

/* Amber gradient buttons keep dark text for maximum legibility */
html.light-mode .from-amber-500.to-orange-500,
html.light-mode .from-amber-500.to-orange-500 *,
html.light-mode .cat-tab.active,
html.light-mode .cat-tab.active * {
    color: #020617 !important;
}

/* ==========================================================================
   SURFACES, CARDS & CONTAINERS
   ========================================================================== */
/* Main cards & panels (formerly slate-900) */
html.light-mode .bg-slate-900,
html.light-mode .bg-slate-900\/60,
html.light-mode .bg-slate-900\/70,
html.light-mode .bg-slate-900\/80,
html.light-mode .bg-slate-900\/90,
html.light-mode .bg-slate-900\/95,
html.light-mode .menu-item-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Dark Hero Cards with Gradients (Fixes dark background retaining in light mode!) */
html.light-mode .bg-gradient-to-br.from-slate-900,
html.light-mode .bg-gradient-to-b.from-slate-900,
html.light-mode .from-slate-900,
html.light-mode .hero-banner {
    background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Inner wells, dropzones, code blocks (formerly slate-950) */
html.light-mode .bg-slate-950,
html.light-mode .bg-slate-950\/60,
html.light-mode .bg-slate-950\/70,
html.light-mode .bg-slate-950\/80,
html.light-mode .bg-slate-950\/90,
html.light-mode .bg-slate-950\/95 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Secondary chips, pill buttons, table header (formerly slate-800) */
html.light-mode .bg-slate-800,
html.light-mode .bg-slate-800\/60,
html.light-mode .bg-slate-800\/70,
html.light-mode .bg-slate-800\/80,
html.light-mode .bg-slate-800\/90 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Hover states */
html.light-mode .hover\:bg-slate-800:hover,
html.light-mode .hover\:bg-slate-700:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   BORDERS & DIVIDERS
   ========================================================================== */
html.light-mode .border-slate-800,
html.light-mode .border-slate-800\/40,
html.light-mode .border-slate-800\/50,
html.light-mode .border-slate-800\/60,
html.light-mode .border-slate-800\/80,
html.light-mode .border-slate-800\/90,
html.light-mode .border-slate-700,
html.light-mode .border-slate-700\/50,
html.light-mode .border-slate-700\/60,
html.light-mode .border-slate-900 {
    border-color: #e2e8f0 !important; /* Slate-200 */
}
html.light-mode .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: #e2e8f0 !important;
}

/* ==========================================================================
   FORM CONTROLS (Inputs, Textareas, Selects)
   ========================================================================== */
html.light-mode input,
html.light-mode textarea,
html.light-mode select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
    color: #94a3b8 !important;
}
html.light-mode input:focus,
html.light-mode textarea:focus,
html.light-mode select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

/* ==========================================================================
   ACCENT COLORS (Warm, Rich, High-Contrast for Light Mode)
   ========================================================================== */
/* Amber / Gold (Rich Amber-700 on white for 5.5:1+ contrast) */
html.light-mode .text-amber-400,
html.light-mode .text-amber-300,
html.light-mode .text-amber-500 {
    color: #b45309 !important;
}
html.light-mode .bg-amber-500\/5,
html.light-mode .bg-amber-500\/10,
html.light-mode .bg-amber-500\/15,
html.light-mode .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
}
html.light-mode .border-amber-500\/20,
html.light-mode .border-amber-500\/30,
html.light-mode .border-amber-500\/40 {
    border-color: #fde68a !important;
}

/* Emerald / Green (Emerald-700 on white) */
html.light-mode .text-emerald-400,
html.light-mode .text-emerald-300 {
    color: #047857 !important;
}
html.light-mode .bg-emerald-500\/10,
html.light-mode .bg-emerald-500\/15,
html.light-mode .bg-emerald-500\/20 {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

/* Red / Rose (Red-700 on white) */
html.light-mode .text-red-400,
html.light-mode .text-rose-400 {
    color: #b91c1c !important;
}
html.light-mode .bg-red-500\/10,
html.light-mode .bg-rose-500\/10,
html.light-mode .bg-red-500\/20 {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
}

/* Purple (Purple-700 on white) */
html.light-mode .text-purple-400 {
    color: #7e22ce !important;
}
html.light-mode .bg-purple-500\/10 {
    background-color: #f5f3ff !important;
    border-color: #ddd6fe !important;
}

/* Blue / Sky (Blue-700 on white) */
html.light-mode .text-blue-400,
html.light-mode .text-sky-400 {
    color: #1d4ed8 !important;
}
html.light-mode .bg-blue-500\/10,
html.light-mode .bg-sky-500\/10 {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}

/* ==========================================================================
   CUSTOMER MENU (menu.php) SPECIFIC FINE-TUNING
   ========================================================================== */
/* Header & Sticky Category Navigation */
html.light-mode header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}
html.light-mode .sticky-cat-nav {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
html.light-mode .cat-tab-inactive {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
html.light-mode .cat-tab-inactive:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
html.light-mode .header-badge-plain {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* Dish Cards in Menu */
html.light-mode .menu-item-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05) !important;
}
html.light-mode .menu-item-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.07) !important;
}
html.light-mode .bistro-dot-leader {
    border-color: #cbd5e1 !important;
    border-bottom: 2px dotted #cbd5e1 !important;
}
html.light-mode .cat-section-header {
    border-bottom-color: #e2e8f0 !important;
}

/* Dish Image Container in Light Mode */
html.light-mode .menu-item-card .bg-slate-800 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

/* Sticky Cart Bottom Bar */
html.light-mode #sticky-cart-bar {
    background-color: rgba(255, 255, 255, 0.97) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.08) !important;
}
html.light-mode #sticky-cart-bar #cart-total-price,
html.light-mode #sticky-cart-bar .cart-total-num {
    color: #0f172a !important;
}

/* Modals in Menu (Details & Cart) */
html.light-mode #product-details-modal > div,
html.light-mode #cart-modal > div,
html.light-mode #modal-note > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
html.light-mode #detail-header-container {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html.light-mode #product-details-modal button[aria-label="Close"],
html.light-mode #cart-modal button[onclick="closeCartModal()"] {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}
html.light-mode #product-details-modal .bg-slate-950\/95,
html.light-mode #cart-modal .bg-slate-900\/90,
html.light-mode #cart-modal .bg-slate-950\/60,
html.light-mode #cart-modal .bg-slate-900 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html.light-mode .cart-item-row {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html.light-mode .cart-item-row button {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-mode .cart-item-row button.bg-amber-500 {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #020617 !important;
}
html.light-mode #cart-modal #modal-total-price {
    color: #b45309 !important;
}

/* ==========================================================================
   ADMIN DASHBOARD SPECIFIC FINE-TUNING
   ========================================================================== */
html.light-mode #app-sidebar {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light-mode .admin-topbar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
}
html.light-mode .sidebar-active-tab {
    background: linear-gradient(to right, #f59e0b, #ea580c) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px -2px rgba(234, 88, 12, 0.35) !important;
}
html.light-mode table {
    background-color: #ffffff !important;
}
html.light-mode thead,
html.light-mode thead th,
html.light-mode thead tr {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html.light-mode tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
}
html.light-mode tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Currency Selector in Settings & Registration */
html.light-mode .currency-preset-btn,
html.light-mode .reg-curr-btn {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
html.light-mode .currency-preset-btn:hover,
html.light-mode .reg-curr-btn:hover {
    border-color: #cbd5e1 !important;
    background-color: #f8fafc !important;
}
html.light-mode .currency-preset-btn.active,
html.light-mode .reg-curr-btn.active {
    background-color: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15) !important;
}
html.light-mode #custom-currency-box {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}