/**
 * ===============================================
 * حساباتي - نظام الوضع الليلي التلقائي الاحترافي
 * Professional Automatic Dark Mode System
 * ===============================================
 */

/* ─── Color Tokens (Light Mode) ─────────────────────────────── */
:root {
    --bg-base:        #f8fafc;
    --bg-white:       #ffffff;
    --bg-section:     #f8fafc;
    --bg-card:        rgba(255, 255, 255, 0.90);
    --bg-card-solid:  #ffffff;
    --bg-nav:         rgba(255, 255, 255, 0.80);
    --bg-input:       #f1f5f9;
    --bg-subtle:      #f8fafc;
    --bg-slate50:     #f8fafc;
    --bg-slate100:    #f1f5f9;
    --bg-slate900:    #0f172a;
    --bg-slate950:    #020617;

    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --text-nav:       #475569;

    --border-base:    rgba(255, 255, 255, 0.30);
    --border-card:    rgba(255, 255, 255, 0.50);
    --border-subtle:  #f1f5f9;
    --border-medium:  #e2e8f0;

    --shadow-nav:     0 1px 3px rgba(0,0,0,0.08);

    /* Brand stays the same in both modes */
    --brand-500:      #10B981;
    --brand-600:      #059669;
}

/* ─── Dark Mode Tokens ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-base:        #0b1120;
        --bg-white:       #111827;
        --bg-section:     #0b1120;
        --bg-card:        rgba(17, 24, 39, 0.92);
        --bg-card-solid:  #111827;
        --bg-nav:         rgba(11, 17, 32, 0.88);
        --bg-input:       #1e2a3a;
        --bg-subtle:      #131d2e;
        --bg-slate50:     #131d2e;
        --bg-slate100:    #1a2539;
        --bg-slate900:    #e2e8f0;    /* inverted - text on dark buttons */
        --bg-slate950:    #020617;    /* footer stays very dark */

        --text-primary:   #f1f5f9;
        --text-secondary: #94a3b8;
        --text-muted:     #64748b;
        --text-nav:       #cbd5e1;

        --border-base:    rgba(255, 255, 255, 0.08);
        --border-card:    rgba(255, 255, 255, 0.06);
        --border-subtle:  #1e2a3a;
        --border-medium:  #1e2a3a;

        --shadow-nav:     0 1px 20px rgba(0,0,0,0.40);
    }
}

/* ─── Smooth color transitions ───────────────────────────────── */
*, *::before, *::after {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* ─── Base Body ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #0b1120 !important;
        color: #e2e8f0 !important;
    }
}

/* ─── Navigation ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .glass-nav,
    #navbar {
        background: rgba(11, 17, 32, 0.90) !important;
        border-bottom-color: rgba(255,255,255,0.06) !important;
        backdrop-filter: blur(16px) !important;
    }

    /* Navbar scroll state */
    #navbar.bg-white\/95,
    .bg-white\/95 {
        background: rgba(11, 17, 32, 0.97) !important;
    }

    /* Brand name in nav */
    #navbar .text-slate-800,
    .text-slate-800 {
        color: #e2e8f0 !important;
    }

    #navbar .text-slate-600,
    #navbar .text-slate-700 {
        color: #94a3b8 !important;
    }

    /* Download button in nav */
    #navbar a.bg-slate-900 {
        background-color: #10B981 !important;
        color: #ffffff !important;
    }
    #navbar a.bg-slate-900:hover {
        background-color: #059669 !important;
    }

    /* Guide button in nav */
    #navbar .bg-brand-50 {
        background-color: rgba(16,185,129,0.12) !important;
        border-color: rgba(16,185,129,0.20) !important;
        color: #34d399 !important;
    }
}

/* ─── Glass Cards ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .glass-card {
        background: rgba(17, 24, 39, 0.92) !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
}

/* ─── Headers / Hero Sections ────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Light gradient hero backgrounds */
    .bg-gradient-to-b.from-slate-50.to-white,
    .bg-gradient-to-b.from-brand-50.to-white,
    header.bg-gradient-to-b {
        background: linear-gradient(to bottom, #0f1a2e, #0b1120) !important;
    }

    /* White sections */
    section.bg-white,
    .bg-white {
        background-color: #111827 !important;
    }

    /* Slate-50/slate bg sections */
    section.bg-slate-50,
    .bg-slate-50 {
        background-color: #131d2e !important;
    }

    /* Brand-50 sections (comparison) */
    section.bg-brand-50,
    .bg-brand-50 {
        background-color: #0f1f1a !important;
    }

    /* Gradient testimonials section */
    section.bg-gradient-to-b.from-white.to-slate-50 {
        background: linear-gradient(to bottom, #111827, #131d2e) !important;
    }

    /* Gradient data-migration section */
    section.bg-gradient-to-b.from-slate-50.to-white.overflow-hidden {
        background: linear-gradient(to bottom, #131d2e, #0b1120) !important;
    }
}

/* ─── Typography ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .text-slate-900 { color: #f1f5f9 !important; }
    .text-slate-800 { color: #e2e8f0 !important; }
    .text-slate-700 { color: #cbd5e1 !important; }
    .text-slate-600 { color: #94a3b8 !important; }
    .text-slate-500 { color: #64748b !important; }
    .text-slate-400 { color: #475569 !important; }

    h1, h2, h3, h4 { color: #f1f5f9; }
    p { color: #94a3b8; }
}

/* ─── Feature Cards & Content Cards ─────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Feature grid cards */
    .bg-slate-50.p-8.rounded-3xl,
    .bg-slate-50.p-6.rounded-3xl {
        background-color: #131d2e !important;
        border-color: #1e2a3a !important;
    }

    .bg-slate-50.p-8.rounded-3xl:hover,
    .bg-slate-50.p-6.rounded-3xl:hover {
        background-color: #1a2539 !important;
        border-color: rgba(16,185,129,0.25) !important;
    }

    /* Icon containers inside cards */
    .bg-white.rounded-2xl,
    .w-14.h-14.bg-white,
    .w-12.h-12.bg-white {
        background-color: #1e2a3a !important;
        border-color: #2d3f57 !important;
    }

    /* FAQ cards */
    .bg-white.rounded-2xl.border.border-slate-100 {
        background-color: #111827 !important;
        border-color: #1e2a3a !important;
    }

    /* Testimonial cards */
    .bg-white.p-8.rounded-\[2rem\] {
        background-color: #111827 !important;
        border-color: #1e2a3a !important;
    }

    /* Comparison table */
    .bg-white.rounded-\[2rem\].shadow-xl,
    .bg-white.rounded-\[2rem\].shadow-xl table,
    .bg-white.min-w-\[700px\] {
        background-color: #111827 !important;
    }

    thead tr.bg-slate-50 {
        background-color: #131d2e !important;
    }

    tbody.divide-y td {
        border-color: #1e2a3a !important;
    }

    .bg-brand-50\/50 {
        background-color: rgba(16,185,129,0.07) !important;
    }

    /* Progress section */
    .bg-slate-50.border.border-slate-100.rounded-2xl {
        background-color: #131d2e !important;
        border-color: #1e2a3a !important;
    }
}

/* ─── Privacy Page - Section Cards ──────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Privacy section background */
    section.py-16.bg-white {
        background-color: #0b1120 !important;
    }
    
    /* Glow blobs in privacy cards - adjust to dark colors */
    .bg-brand-50.rounded-full { background-color: rgba(16,185,129,0.06) !important; }
    .bg-blue-50.rounded-full  { background-color: rgba(59,130,246,0.06) !important; }
    .bg-amber-50.rounded-full { background-color: rgba(245,158,11,0.06) !important; }
    .bg-rose-50.rounded-full  { background-color: rgba(244,63,94,0.06) !important; }

    /* Icon badge backgrounds */
    .bg-brand-100 { background-color: rgba(16,185,129,0.15) !important; }
    .bg-blue-100  { background-color: rgba(59,130,246,0.15) !important; }
    .bg-amber-100 { background-color: rgba(245,158,11,0.15) !important; }
    .bg-rose-100  { background-color: rgba(244,63,94,0.15) !important; }
}

/* ─── Guide Page Steps ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Step card phone mockups */
    .p-4.bg-slate-100.rounded-3xl {
        background-color: #1e2a3a !important;
    }

    .aspect-\[9\/16\].bg-slate-50 {
        background-color: #131d2e !important;
        border-color: #1e2a3a !important;
    }

    .bg-white.border.border-slate-100.rounded-xl,
    .bg-white.border.border-slate-200.rounded-xl {
        background-color: #1a2539 !important;
        border-color: #1e2a3a !important;
    }

    /* Step info boxes */
    .bg-blue-50 { background-color: rgba(59,130,246,0.08) !important; }
    .bg-purple-50 { background-color: rgba(147,51,234,0.08) !important; }
    .bg-amber-50 { background-color: rgba(245,158,11,0.08) !important; }

    .border-blue-100 { border-color: rgba(59,130,246,0.15) !important; }
    .border-purple-100 { border-color: rgba(147,51,234,0.15) !important; }
    .border-amber-100 { border-color: rgba(245,158,11,0.15) !important; }

    .text-blue-800 { color: #93c5fd !important; }
    .text-rose-800 { color: #fca5a5 !important; }
    .text-purple-800 { color: #d8b4fe !important; }
    .text-blue-700 { color: #60a5fa !important; }
    .text-purple-900 { color: #e9d5ff !important; }

    /* Timeline */
    .timeline-line {
        background: linear-gradient(to bottom, rgba(16,185,129,0.2), rgba(52,211,153,0.5)) !important;
    }
}

/* ─── Data Migration Tool ────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Tool card */
    .bg-white.rounded-\[2\.5rem\].shadow-2xl {
        background-color: #111827 !important;
        border-color: #1e2a3a !important;
    }

    /* File upload area */
    .file-upload-area {
        background: rgba(16, 185, 129, 0.03) !important;
        border-color: rgba(16, 185, 129, 0.2) !important;
    }
    .file-upload-area:hover {
        background: rgba(16, 185, 129, 0.06) !important;
        border-color: rgba(16, 185, 129, 0.4) !important;
    }

    /* Info panel */
    .bg-blue-50\/50.rounded-2xl {
        background-color: rgba(59,130,246,0.07) !important;
        border-color: rgba(59,130,246,0.15) !important;
    }
    .text-blue-800.font-medium { color: #93c5fd !important; }

    /* File path display */
    .font-mono.text-xs.text-slate-700 {
        color: #94a3b8 !important;
        background-color: #1e2a3a !important;
        border-color: #2d3f57 !important;
    }

    /* Step helper boxes */
    .bg-slate-50.p-5.rounded-2xl {
        background-color: #131d2e !important;
        border-color: #1e2a3a !important;
    }

    /* Progress bar bg */
    .progress-bar { background-color: #1e2a3a !important; }

    /* Error message */
    .bg-red-50 { background-color: rgba(239,68,68,0.08) !important; }

    /* Step number circles */
    .bg-white.text-slate-700.font-bold.shadow-sm {
        background-color: #1a2539 !important;
        border-color: #2d3f57 !important;
        color: #e2e8f0 !important;
    }
}

/* ─── Receipt Card (POS Section) ─────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Receipt paper - keep it white intentionally for realism */
    /* but if needed: */
    .bg-white.text-slate-900.rounded-t-xl {
        background-color: #f0f4f8 !important;
    }

    /* Receipt total bg */
    .bg-slate-50.p-4.rounded-xl.flex.justify-between.items-center {
        background-color: #e8edf2 !important;
    }
}

/* ─── Inline stat badges / pills ─────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* White pills (hero) */
    .inline-flex.items-center.gap-2.py-1.bg-white,
    .inline-flex.items-center.gap-3.bg-white {
        background-color: #111827 !important;
        border-color: #1e2a3a !important;
        color: #e2e8f0 !important;
    }

    .inline-flex.items-center.gap-2.bg-white {
        background-color: #111827 !important;
        border-color: #1e2a3a !important;
    }

    /* Comparison label badges */
    .bg-brand-50.text-brand-700 {
        background-color: rgba(16,185,129,0.12) !important;
        border-color: rgba(16,185,129,0.20) !important;
        color: #34d399 !important;
    }
}

/* ─── Phone Mockup (Hero) ────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Quick action cards inside phone */
    .phone-frame .bg-white.p-3.rounded-2xl {
        background-color: #1a2539 !important;
        border-color: #1e2a3a !important;
    }

    /* Bottom panel in phone */
    .phone-frame .bg-white.rounded-t-\[2\.5rem\] {
        background-color: #111827 !important;
    }

    /* Handle bar */
    .phone-frame .bg-slate-200 { background-color: #2d3f57 !important; }

    /* Text inside phone */
    .phone-frame .text-slate-800 { color: #e2e8f0 !important; }
    .phone-frame .text-slate-700 { color: #cbd5e1 !important; }
    .phone-frame .text-slate-400 { color: #475569 !important; }
}

/* ─── Modal ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .modal-content {
        background: #111827 !important;
        border: 1px solid #1e2a3a;
    }
}

/* ─── Misc specific utility overrides ───────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Conversion arrow background boxes */
    .bg-white.px-6.py-4.rounded-2xl.shadow-sm.border {
        background-color: #111827 !important;
        border-color: #1e2a3a !important;
    }

    /* Data migration Old/New app label cards */
    .bg-white.px-6.py-4.rounded-2xl.shadow-sm.border.border-brand-100 {
        background-color: #0f1f1a !important;
        border-color: rgba(16,185,129,0.2) !important;
    }

    /* Dividers */
    .border-t.border-slate-100 { border-color: #1e2a3a !important; }
    .border-b.border-slate-100 { border-color: #1e2a3a !important; }
    .border-b-2.border-dashed.border-slate-300 { border-color: #2d3f57 !important; }

    /* Dot pattern overlays */
    .opacity-40 { opacity: 0.08; }

    /* Inline brand badge (POS section pill) */
    .bg-brand-500\/20 { background-color: rgba(16,185,129,0.15) !important; }
    .border-brand-500\/30 { border-color: rgba(16,185,129,0.20) !important; }

    /* Privacy page header inline badge */
    .inline-flex.items-center.gap-3.bg-white.px-6.py-3.rounded-full {
        background-color: #1a2539 !important;
        border-color: #1e2a3a !important;
    }
    .font-bold.text-slate-700 { color: #cbd5e1 !important; }

    /* Scroll drag handle */
    .absolute.top-3.w-12.h-1\.5.bg-slate-200 { background-color: #2d3f57 !important; }
}

/* ─── 404/Error Pages ────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Error page main */
    main.bg-gradient-to-b.from-slate-50.to-white {
        background: linear-gradient(to bottom, #0f1a2e, #0b1120) !important;
    }

    /* Glass card on 404 */
    .glass-card.p-10,
    .glass-card.p-14 {
        background: rgba(17,24,39,0.92) !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    /* White icon box in 404 */
    .bg-white.rounded-\[2rem\].flex.items-center.justify-center.mb-8.shadow-md {
        background-color: #1a2539 !important;
        border-color: #2d3f57 !important;
    }

    /* 404 secondary button */
    .bg-white.text-slate-700.border.border-slate-200.px-8.py-4.rounded-2xl {
        background-color: #111827 !important;
        color: #e2e8f0 !important;
        border-color: #1e2a3a !important;
    }
    .bg-white.text-slate-700.border.border-slate-200.px-8.py-4.rounded-2xl:hover {
        background-color: #1a2539 !important;
        border-color: rgba(16,185,129,0.3) !important;
    }

    /* Dot pattern on 404 */
    .inset-0.opacity-\[0\.03\] {
        opacity: 0.015 !important;
    }
}

/* ─── Scrollbar Styling ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #0b1120; }
    ::-webkit-scrollbar-thumb { background: #1e2a3a; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #10B981; }
}

/* ─── Selection highlight ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    ::selection { background-color: #10B981; color: #ffffff; }
}

/* ─── Strong/bold text ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    strong { color: #e2e8f0; }
}

/* Keep dark footer the same in both modes (already dark) */
.bg-slate-950 { background-color: #020617 !important; }

/* ═══════════════════════════════════════════════════════════════
   STORE BUTTONS - Light Mode
   ═══════════════════════════════════════════════════════════════ */

/* Google Play - Hero (light bg) */
.store-btn-gplay {
    background: #0f172a;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.store-btn-gplay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(52,211,153,0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.store-btn-gplay:hover::before { opacity: 1; }
.store-btn-gplay:hover {
    box-shadow: 0 20px 40px -10px rgba(52,211,153,0.25), 0 0 0 1px rgba(52,211,153,0.2);
}

/* Google Play - Download section (dark bg) */
.store-btn-gplay-dark {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
}
.store-btn-gplay-dark:hover {
    background: #f0fdf4;
    box-shadow: 0 25px 50px -12px rgba(255,255,255,0.2);
}

/* AppGallery */
.store-btn-appgallery {
    background: linear-gradient(135deg, #E83441 0%, #c0392b 100%);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.1);
}
.store-btn-appgallery:hover {
    background: linear-gradient(135deg, #d42f3c 0%, #a93226 100%);
    box-shadow: 0 15px 30px -8px rgba(232,52,65,0.45);
}

/* Uptodown */
.store-btn-uptodown {
    background: linear-gradient(135deg, #00c4b4 0%, #009e8e 100%);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.1);
}
.store-btn-uptodown:hover {
    background: linear-gradient(135deg, #00b0a2 0%, #008a7b 100%);
    box-shadow: 0 15px 30px -8px rgba(0,196,180,0.40);
}

/* ═══════════════════════════════════════════════════════════════
   STORE BUTTONS - Dark Mode Overrides
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

    /* Google Play on light-ish hero bg → stays dark, just glows more */
    .store-btn-gplay {
        background: #111827;
        border-color: rgba(52,211,153,0.15);
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    }
    .store-btn-gplay:hover {
        background: #1a2e1f;
        box-shadow: 0 20px 40px -10px rgba(52,211,153,0.3), 0 0 0 1px rgba(52,211,153,0.25);
    }

    /* Google Play on dark download section → subtle light card */
    .store-btn-gplay-dark {
        background: #1e2a39;
        color: #f1f5f9;
        border-color: rgba(255,255,255,0.08);
    }
    .store-btn-gplay-dark:hover {
        background: #1a3320;
        box-shadow: 0 20px 40px -10px rgba(52,211,153,0.25);
    }

    /* AppGallery - slightly more saturated in dark */
    .store-btn-appgallery {
        background: linear-gradient(135deg, #e8253299 0%, #c0392b 100%);
        box-shadow: 0 4px 20px rgba(232,52,65,0.2);
    }
    .store-btn-appgallery:hover {
        background: linear-gradient(135deg, #E83441 0%, #d42f3c 100%);
        box-shadow: 0 15px 35px -8px rgba(232,52,65,0.50);
    }

    /* Uptodown - same but stronger glow */
    .store-btn-uptodown {
        box-shadow: 0 4px 20px rgba(0,196,180,0.15);
    }
    .store-btn-uptodown:hover {
        box-shadow: 0 15px 35px -8px rgba(0,196,180,0.45);
    }
}