/* © Mahdi Amouzegar — All rights reserved | مهدی آموزگار — همه حقوق محفوظ است */
/* base.css — Variables, Reset, Base, Layout, Theme, Utilities */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS Variables (Design Tokens)
   ═══════════════════════════════════════════════════════════════════════════ */
html {
    color-scheme: dark;

    /* ── Background layers (Dark — پیش‌فرض) ── */
    --bg-0: #080818;
    --bg-1: #0a0a1a;
    --bg-2: #0d0d28;
    --bg-3: #101032;
    --bg-4: #151542;
    --bg-5: #0e0e2c;
    --bg-6: #141432;
    --bg-7: #0f0f2e;
    --bg-8: #161640;
    --bg-9: #0a0a24;
    --bg-10: #121238;
    --bg-11: #131338;
    --bg-12: #181848;
    --bg-13: #0d0d28;
    --bg-14: #1a0a4a;
    --bg-15: #251060;
    --bg-16: #1a0a28;
    --bg-17: #251038;
    --bg-18: #0a1a28;
    --bg-19: #102838;
    --bg-20: #1a1408;
    --bg-21: #26200f;
    --bg-22: #0a1a15;
    --bg-23: #0f2a20;
    --bg-24: #1a0a20;
    --bg-25: #221030;
    --bg-26: #23234d;
    --bg-27: #0a2a1a;
    --bg-28: #0f3a24;
    --bg-29: #003322;
    --bg-30: #005533;

    /* ── Text (Dark) ── */
    --text-primary: #e0e0ff;
    --text-secondary: #b98aff;
    --text-muted: #7a7aaa;
    --text-faint: #5a5a8a;
    --text-faintest: #4a4a7a;
    --text-white: #ffffff;
    --text-title: #f1f1ff;
    --text-detail-title: #e8e8fb;

    /* ── Borders (Dark) ── */
    --border-subtle: #1a1a3e;
    --border-medium: #2a2a5e;
    --border-strong: #3a3a6e;
    --border-purple: #2a1a3e;
    --border-dark: #202050;

    /* ── Accents (Dark) ── */
    --accent-cyan: #00d4ff;
    --accent-cyan-soft: rgba(0, 212, 255, 0.08);
    --accent-cyan-border: #00d4ff44;
    --accent-cyan-border-strong: #00d4ff55;
    --accent-cyan-glow: rgba(0, 212, 255, 0.5);
    --accent-purple: #7b2ff7;
    --accent-purple-soft: rgba(123, 47, 247, 0.2);
    --accent-purple-border: #7b2ff766;
    --accent-pink: #ff4d8d;
    --accent-pink-soft: rgba(255, 77, 141, 0.08);
    --accent-pink-border: #ff4d8d55;
    --accent-green: #00ff88;
    --accent-green-soft: rgba(0, 255, 136, 0.05);
    --accent-green-border: #00ff8833;
    --accent-yellow: #ffd166;
    --accent-yellow-soft: rgba(255, 209, 102, 0.08);
    --accent-yellow-border: #ffd16655;

    /* ── Spacing ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* ── Radius ── */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 99px;

    /* ── Shadows (Dark) ── */
    --shadow-sm: 0 3px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* ── Transitions ── */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── Bottom Action Bar ── */
    --bottom-bar-height: 64px;

    /* ── Visual Fixes Variables ── */
    --rf-primary: #5138C9;
    --rf-primary-soft: rgba(81, 56, 201, .14);
    --rf-accent: #00d4ff;
    --rf-accent-soft: rgba(0, 212, 255, .10);
    --rf-yellow: #F2E338;
    --rf-text: #f1f1ff;
    --rf-muted: #a5a5d0;
    --rf-border: rgba(255, 255, 255, .09);
    --rf-radius-sm: 10px;
    --rf-radius-md: 14px;
    --rf-glow: 0 0 24px rgba(81, 56, 201, .16);

    /* Persian planner foundation */
    --surface-raised: #11112b;
    --surface-soft: #17173b;
    --accent-primary: #8b7cf6;
    --accent-primary-strong: #a99cff;
    --accent-teal: #42d6c5;
    --focus-ring: rgba(66, 214, 197, .38);
    --content-max: 760px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — کلاس theme-light روی <html>
   ═══════════════════════════════════════════════════════════════════════════ */
html.theme-light {
    /* ⚠️ به WebView می‌گوید صفحه در حالت light است */
    color-scheme: light !important;

    /* ── Background layers ── */
    --bg-0: #e8ecf2;
    --bg-1: #f0f3f8;
    --bg-2: #ffffff;
    --bg-3: #ffffff;
    --bg-4: #f8fafc;
    --bg-5: #ffffff;
    --bg-6: #e5e9ef;
    --bg-7: #ffffff;
    --bg-8: #f8fafc;
    --bg-9: #f8fafc;
    --bg-10: #eef1f5;
    --bg-11: #f8fafc;
    --bg-12: #f8fafc;
    --bg-13: #ffffff;
    --bg-14: #ede9fe;
    --bg-15: #ddd6fe;
    --bg-16: #fee2e2;
    --bg-17: #fecaca;
    --bg-18: #dbeafe;
    --bg-19: #bfdbfe;
    --bg-20: #fef3c7;
    --bg-21: #fde68a;
    --bg-22: #ecfdf5;
    --bg-23: #d1fae5;
    --bg-24: #fee2e2;
    --bg-25: #fecaca;
    --bg-26: #e2e8f0;
    --bg-27: #dcfce7;
    --bg-28: #bbf7d0;
    --bg-29: #d1fae5;
    --bg-30: #a7f3d0;

    /* ── Text ── */
    --text-primary: #1e293b;
    --text-secondary: #6d28d9;
    --text-muted: #64748b;
    --text-faint: #94a3b8;
    --text-faintest: #a8b3c2;
    --text-white: #ffffff;
    --text-title: #0f172a;
    --text-detail-title: #1e293b;

    /* ── Borders ── */
    --border-subtle: #d8dde5;
    --border-medium: #c4cbd6;
    --border-strong: #a8b3c2;
    --border-purple: #c4b5fd;
    --border-dark: #cbd5e1;

    /* ── Accents ── */
    --accent-cyan: #0891b2;
    --accent-cyan-soft: rgba(8, 145, 178, 0.08);
    --accent-cyan-border: #0891b266;
    --accent-cyan-border-strong: #0891b288;
    --accent-cyan-glow: rgba(8, 145, 178, 0.3);
    --accent-purple: #6d28d9;
    --accent-purple-soft: rgba(109, 40, 217, 0.12);
    --accent-purple-border: #6d28d966;
    --accent-pink: #db2777;
    --accent-pink-soft: rgba(219, 39, 119, 0.08);
    --accent-pink-border: #db277766;
    --accent-green: #059669;
    --accent-green-soft: rgba(5, 150, 105, 0.08);
    --accent-green-border: #05966944;
    --accent-yellow: #d97706;
    --accent-yellow-soft: rgba(217, 119, 6, 0.08);
    --accent-yellow-border: #d9770655;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

    /* ── Bottom Action Bar ── */
    --bottom-bar-height: 64px;

    /* ── Visual Fixes (Light) ── */
    --rf-primary: #6d28d9;
    --rf-primary-soft: rgba(109, 40, 217, .10);
    --rf-accent: #0891b2;
    --rf-accent-soft: rgba(8, 145, 178, .08);
    --rf-yellow: #d97706;
    --rf-text: #1e293b;
    --rf-muted: #64748b;
    --rf-border: rgba(15, 23, 42, .08);
    --rf-glow: 0 0 24px rgba(109, 40, 217, .10);
    --surface-raised: #ffffff;
    --surface-soft: #f6f7fb;
    --accent-primary: #5b4acb;
    --accent-primary-strong: #4636ae;
    --accent-teal: #087f7a;
    --focus-ring: rgba(8, 127, 122, .24);
}

/* ═══════════════════════════════════════════════════════════════════════════
   راهنمای لایه‌ها (Cascade Layers)
   ═══════════════════════════════════════════════════════════════════════════ */
@layer reset, base, layout, components, utilities, overrides;

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: reset
   ═══════════════════════════════════════════════════════════════════════════ */
@layer reset {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: base
   ═══════════════════════════════════════════════════════════════════════════ */
@layer base {
    @font-face {
        font-family: 'Vazirmatn';
        src: url('../fonts/vazirmatn-arabic.woff2') format('woff2');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+0870-0887, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC, U+FEFF;
    }

    @font-face {
        font-family: 'Vazirmatn';
        src: url('../fonts/vazirmatn-latin.woff2') format('woff2');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    body {
        font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
        min-height: 100vh;
        background: var(--bg-1);
        color: var(--text-primary);
        display: flex;
        justify-content: center;
        /* ⚠️ padding حذف شد — مسئولیت padding به containerهای داخلی سپرده شد */
        overflow-x: hidden;
        position: relative;
        -webkit-user-select: none;
        user-select: none;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation: none !important;
            transition: none !important;
        }
    }

    input,
    textarea,
    select,
    .task-text,
    .child-text,
    .session-date,
    .due-line,
    .loc-line,
    .pp-title,
    .pp-date,
    .pp-loc,
    .slr-name,
    .slr-coords,
    .modal-message,
    .modal-body,
    .welcome-text,
    .name-prompt-hint,
    .hero-desc,
    a[href] {
        -webkit-user-select: text;
        user-select: text;
    }

    select option {
        color: var(--text-primary);
        background-color: var(--bg-2);
    }

    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--accent-purple);
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
        outline: 2px solid var(--accent-cyan);
        outline-offset: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: layout — عمومی
   ═══════════════════════════════════════════════════════════════════════════ */
@layer layout {
    .container {
        width: 100%;
        max-width: 1180px;
        position: relative;
        z-index: 1;
    }

    body::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 12% 0%, var(--accent-purple-soft), transparent 34%);
        opacity: .55;
        z-index: -1;
    }

    .panel,
    .task-zone {
        border-color: color-mix(in srgb, var(--border-subtle) 86%, var(--accent-primary));
    }

    .layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
        min-width: 0;
    }

    .panel,
    .task-list {
        min-width: 0;
    }

    .panel-map {
        position: sticky;
        top: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER: utilities
   ═══════════════════════════════════════════════════════════════════════════ */
@layer utilities {
    /* کلاس‌های کمکی در آینده اضافه می‌شوند */

    /* ── T1b: جایگزین style="display:none" و displayهای inline ── */
    .u-cursor-pointer { cursor: pointer; }
    .u-mb-6 { margin-bottom: 6px; }
    .u-mb-8 { margin-bottom: 8px; }
    .u-mt-6 { margin-top: 6px; }
    .u-mt-8 { margin-top: 8px; }
    .u-my-10 { margin: 10px 0; }
    .u-m-0 { margin: 0; }
    .u-text-muted { color: var(--text-muted); }
    .u-sticky-top { position: sticky; top: 0; z-index: 2; }
    .u-flex-wrap { flex-wrap: wrap; }
    .u-flex-col { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   T1b: kill-switch برای hidden — عمداً خارج از @layer تا بر همه بچربد
   (استایل unlayered با !important بر استایل‌های layered غلبه می‌کند)
   ═══════════════════════════════════════════════════════════════════════════ */
[hidden] {
    display: none !important;
}

/* T1b (ex T1a): مخفی‌سازی pre-hide زبان — قبلاً <style> inline بود */
html.i18n-prehide body {
    visibility: hidden !important;
}