/* =========================
   DARK THEME (Default)
========================= */

:root {

    --bg-primary: #081224;
    --bg-secondary: #172033;

    --surface: #1e293b;
    --surface-hover: #263449;

    --text-primary: #ffffff;
    --text-secondary: #b8c1d1;

    --border-color: rgba(255,255,255,0.08);

    --primary-color: #3B82F6;
    --secondary-color: #C0C6D4;

}

/* ==========================================================================
   PERFECT LIGHT THEME (CRYSTAL GLASS & CHROME)
   ========================================================================== */

[data-theme="light"] {
    /* پس‌زمینه اصلی روشن و مینی‌مال (سفید-یخی بسیار ملایم) */
    --bg-primary: #f4f6fa;
    --bg-secondary: #ffffff;

    /* کارت‌ها و پاپ‌آپ‌ها: شیشه کریستالی برفی و شفاف */
    --surface: rgba(255, 255, 255, 0.8);
    --surface-hover: rgba(0, 0, 0, 0.04);

    /* رنگ متون با بالاترین خوانایی و کنتراست در پاپ‌آپ‌ها و منو */
    --text-primary: #0f172a;   /* سرمه‌ای-مشکی بسیار عمیق */
    --text-secondary: #475569; /* خاکستری متوازن */

    /* بوردرهای نوری لایت‌مود (نقره‌ای تیره و شفاف) */
    --border-color: rgba(15, 23, 42, 0.08);

    /* رنگ‌های اصلی اپلیکیشن */
    --primary-color: #3B82F6;
    --secondary-color: #64748b;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR GLASS COMPONENTS
   ========================================================================== */

/* اصلاح گرادینت و بازتاب نوری هدر در حالت لایت مود */
[data-theme="light"] .app-header {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(244, 246, 250, 0.75) 100
    );
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 
        0 4px 20px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* اصلاح رنگ لوگوی نقره‌ای براق برای بک‌گراند روشن */
[data-theme="light"] .header-logo {
    background: linear-gradient(135deg, #0f172a 30%, #475569 100%);
    -webkit-background-clip: text;
}

/* اصلاح دکمه‌های هدر در حالت لایت مود */
[data-theme="light"] .header-actions button, 
[data-theme="light"] .menu-btn {
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #334155; /* متون نقره‌ای تیره */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .header-actions button:hover, 
[data-theme="light"] .menu-btn:hover {
    background: rgba(15, 23, 42, 0.07);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
    box-shadow: 
        0 4px 12px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* اصلاح کامل پاپ‌آپ‌ها و منوی همبرگری در حالت لایت مود */
[data-theme="light"] .language-popup, 
[data-theme="light"] .theme-popup,
[data-theme="light"] .hamburger-menu {
    background: rgba(255, 255, 255, 0.9); /* شیشه برفی سفید غلیظ برای خوانایی فوق‌العاده */
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 
        0 20px 40px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* اصلاح دکمه‌های داخل پاپ‌آپ */
[data-theme="light"] .language-popup button, 
[data-theme="light"] .theme-popup button {
    color: #334155;
}

[data-theme="light"] .language-popup button:hover, 
[data-theme="light"] .theme-popup button:hover {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
}

/* اصلاح کارت پروفایل و کارت‌های منو داخل همبرگری */
[data-theme="light"] .profile-card {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .profile-name {
    color: #0f172a;
}

[data-theme="light"] .menu-card {
    background: rgba(15, 23, 42, 0.01);
    border: 1px solid rgba(15, 23, 42, 0.03);
    color: #334155;
}

[data-theme="light"] .menu-card:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

/* دکمه ساین این در حالت لایت مود */
[data-theme="light"] .signin-btn {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .signin-btn:hover {
    background: #0f172a;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

/* اصلاح نوار ناوبری پایینی در حالت لایت‌مود */
[data-theme="light"] .bottom-nav, 
[data-theme="light"] footer {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .nav-item {
    color: #475569; /* رنگ خاکستری-سرمه‌ای ملایم برای حالت عادی */
}

[data-theme="light"] .nav-item.active {
    color: #3B82F6; /* رنگ آبی برای دکمه فعال */
}

/* اصلاح کارت‌های مسابقات در حالت لایت‌مود */
[data-theme="light"] .match-card, 
[data-theme="light"] .card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

/* اصلاح دکمه‌های پیش‌بینی (1 X 2) در حالت لایت‌مود */
[data-theme="light"] .odds-btn, 
[data-theme="light"] .predict-option {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

[data-theme="light"] .odds-btn:hover {
    background: #e2e8f0;
}