/**
 * آسا ۲۴ — تم سورمه‌ای اپ کاربری (SPA)
 *
 * رنگ پایه به درخواست کارفرما: #060A1E
 *
 * چرا این فایل وجود دارد؟
 * کل UI صفحات با کلاس‌های Tailwind داخل فایل‌های JS ساخته می‌شود
 * (bg-white، bg-slate-50، border-slate-200 و ...). به‌جای بازنویسی هزاران
 * کلاس در ده‌ها فایل، این فایل همان کلاس‌ها را «داخل #app» به پالت سورمه‌ای
 * نگاشت می‌کند. پیشوند #app باعث می‌شود قواعد اینجا از CSS تزریق‌شده‌ی
 * Tailwind CDN (که بعد از این فایل در head قرار می‌گیرد) قوی‌تر باشند.
 *
 * ⚠️ همه چیز داخل @media screen است تا خروجی چاپ (برگه آزمون و کارنامه
 * A4) دقیقاً مثل قبل سفید و مشکی بماند.
 *
 * رنگ‌های برند (primary / success / warning) و رنگ متن‌ها در
 * tailwind.config داخل index.html تعریف شده‌اند تا modifier های opacity
 * مثل bg-primary/10 و bg-opacity-20 همچنان کار کنند.
 */

:root {
    --asa-bg: #060A1E;          /* پس‌زمینه اصلی (رنگ کارفرما) */
    --asa-surface: #0D1330;     /* کارت‌ها، هدرها، نوارها */
    --asa-surface-2: #121A3D;   /* بخش‌های داخل کارت (slate-50) */
    --asa-surface-3: #19224B;   /* دکمه‌های ثانویه، چیپ‌ها (slate-100) */
    --asa-surface-4: #222D5E;   /* ترک‌ها، حالت hover قوی (slate-200) */
    --asa-surface-5: #2C3972;   /* slate-300 */
    --asa-border: #1E2852;
    --asa-border-strong: #2B3769;
    --asa-text: #E9EDFA;
    --asa-text-2: #A9B3D6;
    --asa-text-3: #7E89B3;
    --asa-primary: #3358E0;
    --asa-primary-hover: #2746B8;
    --asa-accent: #8EA9FF;      /* متن/آیکن تأکیدی روی زمینه تیره */
    --asa-good: #22C55E;        /* درصد بالا */
    --asa-good-text: #4ADE80;
    --asa-mid: #FACC15;         /* درصد متوسط */
    --asa-bad: #EF4444;         /* درصد پایین */
    --asa-bad-text: #F87171;
    --asa-nav-h: 64px;          /* ارتفاع منوی پایین موبایل (بدون safe-area) */
}

[x-cloak] {
    display: none !important;
}

@media screen {

    /* ==========================================
       ۱. پایه
       ========================================== */

    html,
    body {
        background-color: var(--asa-bg);
        color: var(--asa-text);
        color-scheme: dark;
    }

    #app {
        background-color: var(--asa-bg);
        color: var(--asa-text);
        color-scheme: dark;
    }

    ::-webkit-scrollbar-track { background: var(--asa-bg); }
    ::-webkit-scrollbar-thumb { background: var(--asa-surface-4); }
    ::-webkit-scrollbar-thumb:hover { background: var(--asa-surface-5); }

    /* ==========================================
       ۲. سطوح (پس‌زمینه‌ها)
       ========================================== */

    #app .bg-white { background-color: var(--asa-surface); }
    #app .bg-slate-50,
    #app .bg-gray-50 { background-color: var(--asa-surface-2); }
    #app .bg-slate-100,
    #app .bg-gray-100 { background-color: var(--asa-surface-3); }
    #app .bg-slate-200,
    #app .bg-gray-200 { background-color: var(--asa-surface-4); }
    #app .bg-slate-300 { background-color: var(--asa-surface-5); }
    #app .bg-slate-400 { background-color: #4A5687; }

    /* پس‌زمینه‌های نیمه‌شفاف سفید (اورلی‌ها) */
    #app .bg-white\/70 { background-color: rgba(6, 10, 30, 0.72); }
    #app .bg-white\/90 { background-color: rgba(13, 19, 48, 0.94); }
    /* روی کارت‌های رنگی (مثل سربرگ primary) سفید نیمه‌شفاف درست است */
    #app .bg-white.bg-opacity-20 { background-color: rgba(255, 255, 255, 0.18); }

    /* رنگ‌های معنایی روشن → ته‌رنگ شفاف روی زمینه تیره */
    #app .bg-blue-50 { background-color: rgba(51, 88, 224, 0.14); }
    #app .bg-blue-100 { background-color: rgba(51, 88, 224, 0.22); }
    #app .bg-green-50 { background-color: rgba(34, 197, 94, 0.12); }
    #app .bg-green-100 { background-color: rgba(34, 197, 94, 0.18); }
    #app .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); }
    #app .bg-red-100 { background-color: rgba(239, 68, 68, 0.18); }
    #app .bg-yellow-50,
    #app .bg-amber-50 { background-color: rgba(250, 204, 21, 0.10); }
    #app .bg-yellow-100 { background-color: rgba(250, 204, 21, 0.16); }
    /* بنفش/صورتی خارج از پالت بودند → ته‌رنگ آبی سورمه‌ای */
    #app .bg-purple-100,
    #app .bg-pink-100 { background-color: rgba(51, 88, 224, 0.22); }

    /* ==========================================
       ۳. متن‌ها
       ========================================== */

    /* text-primary = رنگ تأکیدی (لینک، عدد، تیتر کارت) */
    #app .text-primary { color: var(--asa-accent); }

    #app .text-slate-400,
    #app .text-gray-400 { color: var(--asa-text-3); }
    #app .text-slate-500,
    #app .text-gray-500 { color: #8D97BF; }
    #app .text-slate-600,
    #app .text-gray-600 { color: var(--asa-text-2); }
    #app .text-slate-700,
    #app .text-gray-700 { color: #C6CDE6; }
    #app .text-slate-800,
    #app .text-slate-900,
    #app .text-gray-800,
    #app .text-gray-900 { color: var(--asa-text); }

    #app .text-blue-600,
    #app .text-blue-700,
    #app .text-blue-800 { color: #9DB6FF; }
    #app .text-purple-700,
    #app .text-purple-800 { color: #B4C6FF; }
    #app .text-green-600,
    #app .text-green-700,
    #app .text-green-800 { color: var(--asa-good-text); }
    #app .text-red-500,
    #app .text-red-600,
    #app .text-red-700,
    #app .text-red-800 { color: var(--asa-bad-text); }
    #app .text-yellow-800,
    #app .text-amber-700 { color: #FDE047; }

    /* ==========================================
       ۴. حاشیه‌ها
       ========================================== */

    #app .border-slate-100 { border-color: #182149; }
    #app .border-slate-200,
    #app .border-gray-200 { border-color: var(--asa-border); }
    #app .border-slate-300,
    #app .border-gray-300 { border-color: var(--asa-border-strong); }
    #app .border-blue-100,
    #app .border-blue-200,
    #app .border-purple-200,
    #app .border-pink-200 { border-color: rgba(51, 88, 224, 0.35); }
    #app .border-green-200 { border-color: rgba(34, 197, 94, 0.40); }
    #app .border-red-200 { border-color: rgba(239, 68, 68, 0.40); }
    #app .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--asa-border); }
    #app hr { border-color: var(--asa-border); }

    /* ==========================================
       ۵. حالت‌های hover / active / disabled
       (چون قواعد بالا ID دارند، باید hover ها هم اینجا تکرار شوند)
       ========================================== */

    #app .hover\:bg-slate-50:hover { background-color: var(--asa-surface-3); }
    #app .hover\:bg-slate-100:hover { background-color: var(--asa-surface-4); }
    #app .hover\:bg-slate-200:hover { background-color: var(--asa-surface-4); }
    #app .hover\:bg-slate-300:hover { background-color: var(--asa-surface-5); }
    #app .active\:bg-slate-100:active { background-color: var(--asa-surface-4); }
    #app .hover\:bg-blue-50:hover { background-color: rgba(51, 88, 224, 0.18); }
    #app .hover\:bg-red-50:hover,
    #app .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.22); }
    #app .hover\:bg-slate-900:hover,
    #app .hover\:bg-blue-900:hover,
    #app .hover\:bg-blue-700:hover { background-color: var(--asa-primary-hover); }
    #app .hover\:text-blue-900:hover,
    #app .hover\:text-slate-900:hover { color: #C3D2FF; }
    #app .hover\:border-slate-300:hover { border-color: var(--asa-border-strong); }
    #app .disabled\:bg-slate-100:disabled { background-color: var(--asa-surface-3); }
    #app .disabled\:text-slate-500:disabled { color: #8D97BF; }

    /* ==========================================
       ۶. فرم‌ها
       ========================================== */

    #app input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
    #app select,
    #app textarea {
        background-color: var(--asa-surface-2);
        color: var(--asa-text);
        border-color: var(--asa-border-strong);
    }

    #app input[readonly] {
        background-color: var(--asa-surface-3);
    }

    #app input::placeholder,
    #app textarea::placeholder {
        color: var(--asa-text-3);
        opacity: 1;
    }

    #app input[type="radio"],
    #app input[type="checkbox"] {
        accent-color: var(--asa-primary);
    }

    /* ==========================================
       ۷. سایه‌ها روی زمینه تیره
       ========================================== */

    #app .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
    #app .shadow,
    #app .shadow-md { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
    #app .shadow-lg,
    #app .shadow-xl,
    #app .shadow-2xl { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }

    /* ==========================================
       ۸. اجزای اختصاصی تم
       ========================================== */

    /* کارت/پوستر «قهرمان» سورمه‌ای (جایگزین بنرهای گرادیانت رنگی) */
    #app .asa-hero {
        background: linear-gradient(135deg, #18286B 0%, #0E1740 100%);
        border: 1px solid rgba(142, 169, 255, 0.22);
        color: #fff;
    }

    /* دکمه روشن روی کارت قهرمان */
    #app .asa-hero-btn {
        background-color: #fff;
        color: #0E1740;
    }
    #app .asa-hero-btn:hover {
        background-color: #DCE4FF;
    }

    /* لوگو برای زمینه سفید طراحی شده؛ پشتش سفید می‌ماند */
    #app .asa-logo-bg {
        background-color: #fff;
    }

    /* دکمه تونال (ثانویه رنگی) */
    #app .asa-btn-tonal {
        background-color: rgba(51, 88, 224, 0.16);
        color: var(--asa-accent);
        border: 1px solid rgba(142, 169, 255, 0.35);
    }
    #app .asa-btn-tonal:hover {
        background-color: rgba(51, 88, 224, 0.28);
    }
    #app .asa-btn-tonal:disabled {
        opacity: 0.4;
    }

    /* ==========================================
       ۹. صفحه آزمون (جایگزین رنگ‌های ثابت exam-optimized.css)
       ========================================== */

    #app .question-card {
        background: var(--asa-surface);
        border-color: var(--asa-border);
        box-shadow: none;
    }

    #app .choice label {
        background: var(--asa-surface-2);
        border-color: var(--asa-border-strong);
        color: var(--asa-text);
    }

    #app .choice label:hover {
        background: var(--asa-surface-3);
        border-color: #3A4888;
    }

    /* حالت انتخاب‌شده باید کاملاً واضح باشد */
    #app .choice:has(input:checked) label {
        background: rgba(51, 88, 224, 0.20);
        border-color: #6C8CFF;
        box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.18);
    }

    #app .choice:focus-within label {
        outline-color: #6C8CFF;
    }

    #app .font-controls {
        background: var(--asa-surface-2);
        box-shadow: none;
        border: 1px solid var(--asa-border);
    }

    #app .font-btn {
        background: var(--asa-surface-3);
        border-color: var(--asa-border-strong);
        color: var(--asa-text);
    }

    #app .font-btn:hover {
        background: rgba(51, 88, 224, 0.22);
        border-color: #6C8CFF;
        color: #fff;
    }

    #app .q-figure figcaption,
    #app .question-figure figcaption {
        color: var(--asa-text-2);
    }

    /*
     * تصاویر سوال معمولاً خط مشکی روی زمینه شفاف هستند و روی سورمه‌ای
     * دیده نمی‌شوند؛ پس یک زمینه سفید کوچک پشتشان می‌گذاریم.
     */
    #app .question-image,
    #app .q-figure img,
    #app .question-figure img,
    #app .question-text img,
    #app .choice-text img,
    #app .prose img {
        background-color: #fff;
        padding: 6px;
    }

    /*
     * متن سوال از ادیتور می‌آید و ممکن است رنگ ثابت (مثلاً مشکی) یا
     * زمینه سفید inline داشته باشد که روی زمینه تیره ناخوانا می‌شود.
     */
    #app .question-text [style*="color"],
    #app .choice-text [style*="color"],
    #app .prose [style*="color"] {
        color: inherit !important;
        background-color: transparent !important;
    }

    #app .question-text table td,
    #app .question-text table th,
    #app .choice-text table td,
    #app .choice-text table th,
    #app .prose table td,
    #app .prose table th {
        border-color: var(--asa-border-strong);
    }

    /* ==========================================
       ۱۰. منوی پایین موبایل (مثل اپلیکیشن)
       ========================================== */

    .asa-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45; /* بالای نوارهای پایین صفحات (z-40)، زیر مودال‌ها (z-50) */
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: calc(var(--asa-nav-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(10, 15, 40, 0.96);
        border-top: 1px solid var(--asa-border);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .asa-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        padding: 6px 2px;
        color: var(--asa-text-3);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        background: transparent;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease;
    }

    .asa-tab-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 28px;
        border-radius: 9999px;
        transition: background-color 0.15s ease;
    }

    .asa-tab-icon svg {
        width: 22px;
        height: 22px;
    }

    .asa-tab.is-active {
        color: #fff;
    }

    .asa-tab.is-active .asa-tab-icon {
        background-color: var(--asa-primary);
    }

    .asa-tab:active .asa-tab-icon {
        transform: scale(0.94);
    }

    .asa-tab span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* برگه انتخاب نوع آزمون (bottom sheet) */
    .asa-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 44; /* زیر خود منو تا منو روشن و قابل لمس بماند */
        background: rgba(0, 0, 0, 0.55);
        display: flex;
        align-items: flex-end;
    }

    .asa-sheet {
        width: 100%;
        background: var(--asa-surface);
        border-top: 1px solid var(--asa-border-strong);
        border-radius: 20px 20px 0 0;
        padding: 10px 16px calc(var(--asa-nav-h) + env(safe-area-inset-bottom) + 16px);
        color: var(--asa-text);
    }

    .asa-sheet-handle {
        width: 40px;
        height: 4px;
        border-radius: 9999px;
        background: var(--asa-surface-5);
        margin: 0 auto 14px;
    }

    .asa-sheet-option {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px;
        border-radius: 14px;
        background: var(--asa-surface-2);
        border: 1px solid var(--asa-border);
        color: var(--asa-text);
        text-align: right;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .asa-sheet-option + .asa-sheet-option {
        margin-top: 10px;
    }

    .asa-sheet-option:active,
    .asa-sheet-option:hover {
        background: var(--asa-surface-3);
        border-color: #3A4888;
    }

    .asa-sheet-option-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(51, 88, 224, 0.2);
        color: var(--asa-accent);
        font-size: 20px;
    }

    /* فقط موبایل: روی تبلت/دسکتاپ منوی پایین نمایش داده نمی‌شود */
    @media (min-width: 768px) {
        .asa-bottom-nav,
        .asa-sheet-backdrop {
            display: none !important;
        }
    }

    @media (max-width: 767.98px) {
        /* فضای خالی پایین محتوا تا زیر منو پنهان نشود */
        #app.nav-on > main {
            padding-bottom: calc(var(--asa-nav-h) + env(safe-area-inset-bottom));
        }

        /* نوارهای دکمه‌ی پایینِ صفحات (ادامه، شروع آزمون، ...) بالای منو قرار می‌گیرند */
        #app.nav-on > main .fixed.bottom-0 {
            bottom: calc(var(--asa-nav-h) + env(safe-area-inset-bottom));
        }

        /* safe-area را خود منو رعایت می‌کند؛ دوباره اضافه نشود */
        #app.nav-on > main .fixed.bottom-0.safe-area-bottom {
            padding-bottom: 1rem !important;
        }
    }
}