/* ============================================================
   Unified Dark Mode - الوضع الداكن الموحّد
   Single source of truth for system dark mode across ALL pages.
   Activates with the device/OS theme via prefers-color-scheme.
   Loaded LAST so it wins cascade order; uses a consistent
   slate palette matching the admin dashboard.
   ============================================================ */

@media (prefers-color-scheme: dark) {

    /* ---- 1. Unified palette (overrides every variable system) ---- */
    :root {
        /* core surfaces */
        --dm-bg:            #0f172a;
        --dm-surface:       #1e293b;
        --dm-surface-2:     #232f43;
        --dm-raised:        #334155;
        --dm-border:        #334155;
        --dm-border-soft:   #2a3850;
        /* text */
        --dm-text:          #e2e8f0;
        --dm-text-soft:     #94a3b8;
        --dm-text-muted:    #64748b;
        --dm-input:         #1b2638;
        --dm-placeholder:   #64748b;

        /* design-system.css (--gray-* / --white inversion) */
        --white: #1e293b;
        --gray-50: #1e293b;
        --gray-100: #232f43;
        --gray-200: #334155;
        --gray-300: #3d4a60;
        --gray-400: #64748b;
        --gray-500: #94a3b8;
        --gray-600: #aab4c4;
        --gray-700: #cbd5e1;
        --gray-800: #e2e8f0;
        --gray-900: #f1f5f9;
        --black: #f1f5f9;

        /* responsive.css */
        --bg-light: #0f172a;
        --bg-white: #1e293b;
        --bg-gray: #232f43;
        --text-primary: #e2e8f0;
        --text-secondary: #94a3b8;
        --text-light: #64748b;
        --border-light: #334155;
        --border-medium: #3d4a60;

        --dm-accent:        #60a5fa;
        --dm-accent-strong: #3b82f6;
        --dm-accent-tint:   rgba(96, 165, 250, 0.18);
        --dm-accent-tint-2: rgba(96, 165, 250, 0.28);

        /* chat-widget.css (--chat-*) */
        --chat-primary:       #3b82f6;
        --chat-primary-light: #60a5fa;
        --chat-accent:        #2dd4bf;
        --chat-bg:            #0f172a;
        --chat-white:         #1e293b;
        --chat-gray-100:      #232f43;
        --chat-gray-200:      #334155;
        --chat-gray-300:      #3d4a60;
        --chat-gray-500:      #94a3b8;
        --chat-gray-700:      #cbd5e1;
        --chat-shadow:        0 4px 20px rgba(0, 0, 0, 0.5);

        /* Per-feature light-theme subsystems → dark palette */
        --login-bg: #0f172a; --login-surface: #1e293b; --login-text: #e2e8f0;
        --login-text-secondary: #94a3b8; --login-text-muted: #64748b;
        --login-border: #334155; --login-gray-50: #232f43; --login-gray-100: #232f43;
        --login-gray-200: #334155; --login-gray-700: #cbd5e1; --login-gray-900: #e2e8f0;

        --ob-bg: #0f172a; --ob-surface: #1e293b; --ob-text: #e2e8f0;
        --ob-text-secondary: #94a3b8; --ob-text-muted: #64748b; --ob-border: #334155;

        --pr-bg: #0f172a; --pr-surface: #1e293b; --pr-text: #e2e8f0;
        --pr-text-secondary: #94a3b8; --pr-text-muted: #64748b; --pr-border: #334155;

        --reg-bg: #0f172a; --reg-surface: #1e293b; --reg-text: #e2e8f0;
        --reg-text-secondary: #94a3b8; --reg-text-muted: #64748b; --reg-border: #334155;

        --sa-bg: #0f172a; --sa-surface: #1e293b; --sa-text: #e2e8f0;
        --sa-text-secondary: #94a3b8; --sa-text-muted: #64748b; --sa-border: #334155;

        --an-bg: #0f172a; --an-card-bg: #1e293b; --an-text: #e2e8f0;
        --an-text-secondary: #94a3b8; --an-text-muted: #64748b; --an-border: #334155;

        --mp-bg: #0f172a; --mp-card-bg: #1e293b; --mp-text: #e2e8f0;
        --mp-text-secondary: #94a3b8; --mp-text-muted: #64748b; --mp-border: #334155;

        --sf-bg: #0f172a; --sf-bg-alt: #1e293b; --sf-text: #e2e8f0;
        --sf-text-secondary: #94a3b8; --sf-text-muted: #64748b; --sf-border: #334155;

        /* generic single-name systems */
        --background: #0f172a; --card-background: #1e293b; --border-color: #334155;
        --bg: #0f172a; --surface: #1e293b; --card-bg: #1e293b;
        --text: #e2e8f0; --text-muted: #94a3b8; --heading-color: #f1f5f9;
        --header-bg: #1e293b; --header-text: #e2e8f0;

        color-scheme: dark;
    }

    /* ---- 2. Page base ---- */
    html,
    body {
        background-color: var(--dm-bg);
        color: var(--dm-text);
    }
    /* keep brand gradient bodies but darken their endpoints */
    body {
        color: var(--dm-text);
    }

    /* ---- 3. Generic surfaces (legacy hardcoded backgrounds) ---- */
    .panel, .box, .section-card, .summary-card, .store-card,
    .info-card, .glass-card, .widget, .tile,
    .dropdown-menu, .action-dropdown-menu, .floating-action-menu, .popover,
    .list-group, .list-item,
    .sidebar, aside.side-menu, .side-menu-content,
    .header-card, .profile-card, .review-card, .product-card,
    .order-card, .notification-item, .timeline-item,
    .accordion, .accordion-item, .stats-grid > *, .qr-container,
    .toggle-slider:not(.qr-code) {
        background-color: var(--dm-surface) !important;
        color: var(--dm-text);
        border-color: var(--dm-border) !important;
    }

    /* raised / nested surfaces a notch lighter for separation */
    .modal-content .card, .card .card, .stat-card .icon,
    .table thead, thead, .table-header, .section-header {
        background-color: var(--dm-surface-2) !important;
    }

    /* navbars / headers / footers (non-admin pages) */
    nav.bottom-nav, .bottom-nav, .navbar, .topbar,
    header.main-header, .page-header, footer, .app-footer {
        background-color: var(--dm-surface) !important;
        color: var(--dm-text);
        border-color: var(--dm-border) !important;
    }

    /* ---- 4. Text colors ---- */
    body, p, span, li, td, th, label, dd, dt, figcaption,
    h1, h2, h3, h4, h5, h6, .title, .heading, .card-title, .section-title {
        color: var(--dm-text);
    }
    .text-muted, .text-secondary, .subtitle, .muted, small, .hint,
    .stat-content h3, .revenue-label, .appointment-details, .meta, .caption {
        color: var(--dm-text-soft) !important;
    }

    /* links keep an accessible accent */
    a:not(.btn):not(.button):not([class*="btn-"]) {
        color: #60a5fa;
    }

    /* ---- 5. Form controls ---- */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
    select, textarea, .form-input, .form-select, .form-control, .input {
        background-color: var(--dm-input) !important;
        color: var(--dm-text) !important;
        border-color: var(--dm-border) !important;
    }
    input::placeholder, textarea::placeholder {
        color: var(--dm-placeholder) !important;
    }
    select option { background-color: var(--dm-surface); color: var(--dm-text); }

    /* secondary / neutral buttons */
    .btn-secondary, .btn-light, .btn-default,
    .btn-small:not([class*="primary"]):not([class*="danger"]):not([class*="success"]),
    .filter-btn, .tab-btn, .pill, .chip {
        background-color: var(--dm-surface-2) !important;
        color: var(--dm-text) !important;
        border-color: var(--dm-border) !important;
    }
    .btn-secondary:hover, .filter-btn:hover, .tab-btn:hover {
        background-color: var(--dm-raised) !important;
    }
    .filter-btn.active, .tab-btn.active, .pill.active, .chip.active {
        background-color: var(--rd-primary, #2563eb) !important;
        color: #fff !important;
    }

    /* ---- 6. Tables ---- */
    table, .table { color: var(--dm-text); border-color: var(--dm-border); }
    .table th, .table td, table th, table td { border-color: var(--dm-border) !important; }
    .table tbody tr:nth-child(even), tbody tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.02);
    }
    .table tbody tr:hover, tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.04);
    }

    /* ---- 7. Borders / dividers / scrollbars ---- */
    hr, .divider, .separator { border-color: var(--dm-border) !important; }
    *::-webkit-scrollbar-track { background: var(--dm-bg); }
    *::-webkit-scrollbar-thumb { background: var(--dm-raised); border-radius: 8px; }

    /* ---- 8. Neutralize hard-coded WHITE inline backgrounds ---- */
    [style*="background:#fff"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background: #fff"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background:#FFF"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background-color:#fff"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background-color: #fff"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background:#ffffff"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background: #ffffff"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background:white"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background: white"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background-color:white"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background-color: white"]:not(.qr-code):not(.barcode):not([class*="qr"]):not(.print-version):not(.print-only) {
        background-color: var(--dm-surface) !important;
        color: var(--dm-text);
    }

    /* hard-coded black/dark text on now-dark surfaces */
    [style*="color:#000"]:not([class*="qr"]),
    [style*="color: #000"]:not([class*="qr"]),
    [style*="color:#111"], [style*="color: #111"],
    [style*="color:#222"], [style*="color: #222"],
    [style*="color:#333"], [style*="color: #333"],
    [style*="color:black"], [style*="color: black"] {
        color: var(--dm-text) !important;
    }

    /* ---- 9. Things that MUST stay light (QR / barcode / print) ---- */
    .qr-code, .barcode, [class*="qr-"], .qr-container canvas,
    .print-version, .print-only {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    /* ---- 10. Images / media: gentle dim, no recolor ---- */
    img, video, .logo { /* leave untouched */ }

    /* ---- 11. Shadows softer on dark ---- */
    .card, .modal-content, .stat-card, .panel {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* ---- 12. Active / selected states (the real pain point) ----
       Bright accent text on a clear tinted pill so selection is obvious. */
    .bottom-nav-btn.active,
    .mobile-nav-btn.active,
    .nav-item.active,
    .nav-link.active,
    .epm-tab.active,
    .menu-item.active {
        color: var(--dm-accent) !important;
    }
    .bottom-nav-btn.active .nav-icon,
    .mobile-nav-btn.active .nav-icon {
        background: var(--dm-accent-tint) !important;
        color: var(--dm-accent) !important;
    }
    /* selected rows / list items / chips: visible tinted highlight */
    .selected, .is-selected, .active-row, tr.selected,
    .list-item.active, .list-item.selected,
    li.active, li.selected, .option.selected,
    .day.selected, .time-slot.selected, .slot.selected {
        background: var(--dm-accent-tint) !important;
        color: var(--dm-text) !important;
        border-color: var(--dm-accent) !important;
    }

    /* solid-fill active pills/buttons: keep readable inverse text */
    .filter-btn.active, .tab-button.active.solid, .page-btn.active,
    .mobile-tab-btn.active, .settings-tab.active, .pagination .active {
        background: var(--dm-accent-strong) !important;
        color: #ffffff !important;
        border-color: var(--dm-accent-strong) !important;
    }

    /* ---- 13. Hard-coded white backgrounds left in active/content states ---- */
    .tab-content.active, .tab-pane.active {
        background: var(--dm-surface) !important;
        color: var(--dm-text);
    }

    /* 14/15b/15d → components.css, chat-widget.css, admin-dark.css */

    /* ---- 15c. Circular numeric badges / counters / step circles ----
       Keep a clear filled circle so the number is always readable. */
    .nav-badge, .notification-badge, .count-badge, .badge-count,
    .cart-count, .unread-count, .chat-fab-badge, .admin-chat-fab-badge,
    .step-number, .step-circle, .number-circle, .count-circle,
    .stat-circle, .avatar-circle, .timeline-dot {
        color: #ffffff !important;
    }
    /* circles that were light-tinted in light theme -> bright accent fill */
    .step-circle, .number-circle, .count-circle, .stat-circle {
        background: var(--dm-accent-strong) !important;
        border-color: var(--dm-accent-strong) !important;
    }

    /* 15e/16 → token-driven in components.css, tw-layout, home-*, booking-*, shop.css */

    /* ============================================================
       17. PATTERN-BASED CATCH-ALL (covers unaudited pages too)
       Most surfaces follow naming conventions: *-card, *-content,
       *-section, *-box, *-panel, *-modal. Catch them generically.
       QR / print elements stay excluded.
       ============================================================ */
    [class*="-card"]:not([class*="qr"]):not(.print-version),
    [class*="-content"]:not([class*="qr"]):not(.print-version):not([class*="main-content"]):not([class*="page-content"]):not([class*="app-content"]):not([class*="content-wrapper"]):not([class*="content-area"]):not([class*="chat-content"]),
    [class*="-section"]:not([class*="qr"]):not(.print-version):not([class*="hero"]),
    [class*="-box"]:not([class*="qr"]):not(.print-version),
    [class*="-panel"]:not([class*="qr"]):not(.print-version),
    [class*="-modal"]:not([class*="qr"]):not(.print-version):not([class*="overlay"]),
    [class*="-dialog"]:not([class*="qr"]):not(.print-version):not([class*="overlay"]),
    [class*="-popup"]:not([class*="qr"]):not(.print-version):not([class*="overlay"]) {
        background-color: var(--dm-surface) !important;
        color: var(--dm-text);
        border-color: var(--dm-border) !important;
    }
    /* sub-parts: headers/footers a touch raised */
    [class*="-modal"][class*="-header"], [class*="-modal"][class*="-footer"],
    [class$="-footer"]:not(.app-footer), [class$="-header"]:not(.app-header):not(.page-header) {
        background-color: var(--dm-surface-2) !important;
        border-color: var(--dm-border) !important;
    }
    /* close / cancel / back buttons -> neutral raised */
    [class$="-close"], [class*="-close "], [class$="-cancel"], [class*="-cancel "],
    [class$="-back"], [class*="back-button"], [class*="back-btn"] {
        background-color: var(--dm-surface-2) !important;
        color: var(--dm-text-soft) !important;
        border-color: var(--dm-border) !important;
    }
    [class$="-close"]:hover, [class$="-cancel"]:hover, [class$="-back"]:hover {
        background-color: var(--dm-raised) !important;
        color: var(--dm-text) !important;
    }
    /* bare table headers (superadmin etc.) */
    th { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; }
    tr:hover td, tr:hover th { background-color: rgba(255,255,255,0.04) !important; }

    /* keep modal OVERLAYS as dim scrims, not solid panels */
    [class*="overlay"], .modal-overlay, .profile-modal-overlay,
    .profile-modal-overlay.open {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    /* ============================================================
       18–19 → admin-dark.css, booking-wizard.css, booking-my-bookings.css
       ============================================================ */

    /* ---- 15. Neutralize remaining hard-coded light gray inline bgs ---- */
    [style*="background:#f8f9fa"]:not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background: #f8f9fa"]:not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background:#f5f5f5"]:not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background: #f5f5f5"]:not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background:#f9fafb"]:not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background: #f9fafb"]:not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background:#eee"]:not([class*="qr"]):not(.print-version):not(.print-only),
    [style*="background: #eee"]:not([class*="qr"]):not(.print-version):not(.print-only) {
        background-color: var(--dm-surface-2) !important;
        color: var(--dm-text);
    }
}