/* ==========================================================================
   DERSI.ONLINE — Master Design System & Typography
   Modern Academic Turquoise, Deep Navy & Vibrant Orange Aesthetic
   Full Native Trilingual RTL & LTR Support (Arabic, Turkish, English)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('gamification-ui.css');



/* UI Toasts / Notifications */
.toast { position: fixed; bottom: 25px; right: 25px; background: var(--surface); color: var(--text-primary); padding: 1rem 1.5rem; border-radius: var(--radius-md); box-shadow: 0 10px 25px rgba(37,99,235,0.1); z-index: 10000; transition: opacity 0.3s ease, transform 0.3s ease; font-weight: 600; font-size: 0.9rem; border-left: 4px solid var(--primary); }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--error); }
.toast-info { border-left-color: var(--primary); }
.toast.fade-out { opacity: 0; transform: translateY(10px); }



:root {
  --primary: #2563EB !important;
  --primary-hover: #1E3A8A !important;
  --primary-light: #3B82F6 !important;
  --sky: #38BDF8 !important;
  --cyan: #06B6D4 !important;
  --deep-blue: #1E3A8A !important;
  --navy: #172554 !important;
  
  --background: #F8FBFF !important;
  --surface: #FFFFFF !important;
  --surface-blue: #EFF6FF !important;
  --light-blue: #DBEAFE !important;
  
  --text-primary: #0F172A !important;
  --text-secondary: #475569 !important;
  --text-muted: #64748B !important;
  --border: #D6E4F0 !important;
  
  --bg-main: var(--background) !important;
  --bg-card: var(--surface) !important;
  --bg-surface: var(--surface-blue) !important;
  --bg-panel: var(--surface) !important;
  --bg-elevated: var(--surface-blue) !important;
  --bg-dark: var(--background) !important;
  
  --text-main: var(--text-primary) !important;
  --text-dim: var(--text-secondary) !important;
  
  --border-color: var(--border) !important;
  --border-highlight: var(--sky) !important;
  
  /* Gamification Mappings */
  --dersi-xp: var(--cyan) !important;
  --dersi-trex: var(--primary-light) !important;
  --dersi-streak: var(--sky) !important;
  --dersi-level: var(--deep-blue) !important;
}

/* =========================================================================
   DERSI UI STRUCTURE REPAIR (CONTROLLED VISUAL RESTRUCTURE)
   ========================================================================= */

/* --- AI SOLVER HIGHLIGHT --- */
.hero-solver-box, #hero-solver-box, #hero-solver-box-2 {
    background: var(--light-blue) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 32px rgba(37,99,235,0.15) !important;
    padding: 2rem !important;
    position: relative;
    z-index: 10;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-solver-box:hover, #hero-solver-box:hover, #hero-solver-box-2:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(37,99,235,0.2) !important;
}

/* AI Solver Dropzone */
.solver-dropzone {
    background: var(--surface) !important;
    border: 2px dashed var(--primary-light) !important;
    border-radius: 16px !important;
    padding: 2rem 1rem !important;
    transition: all 0.2s ease;
}
.solver-dropzone:hover {
    background: var(--surface-blue) !important;
    border-color: var(--primary) !important;
}

/* AI Solver CTA */
.btn-solve-now, #btn-solve-now, #btn-solve-now-2 {
    background: var(--primary) !important;
    color: var(--surface) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    padding: 1rem 2rem !important;
    border-radius: 99px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(37,99,235,0.3) !important;
}
.btn-solve-now:hover, #btn-solve-now:hover, #btn-solve-now-2:hover {
    background: var(--deep-blue) !important;
    transform: translateY(-2px);
}

/* --- DASHBOARD RESTRUCTURE (CSS ONLY) --- */
#dashboard-content-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

/* Force Identity Card to top */
#dashboard-content-area > .card.glass-panel:first-of-type {
    order: 1 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.05) !important;
}

/* Arena Banner order */
#student-arena-audience-banner {
    order: 6 !important; /* Move Arena banner further down visually */
}

/* 3 Pillars Grid (Learning, Goals, Arena) */
#dashboard-content-area > div[style*="grid-template-columns"] {
    order: 3 !important;
}

/* Stats Row */
.stat-card-row {
    order: 2 !important;
}

/* Clean up individual cards to match Light Blue theme */
.card, .glass-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.05) !important;
    color: var(--text-primary) !important;
    transition: transform 0.2s ease;
}
.card:hover, .glass-panel:hover {
    transform: translateY(-2px);
}

/* Gamification Text Fixes for Dark Texts */
.card h2, .card h3, .glass-panel h2, .glass-panel h3 {
    color: var(--text-primary) !important;
}
.card p, .card small, .glass-panel p, .glass-panel small {
    color: var(--text-secondary) !important;
}
.card strong, .glass-panel strong {
    color: var(--deep-blue) !important;
}

/* Gamification Badges */
.badge {
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-weight: 700 !important;
}
.badge-teal, .badge-blue {
    background: var(--light-blue) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border) !important;
}
.badge-orange {
    background: var(--surface-blue) !important;
    color: var(--sky) !important;
    border: 1px solid var(--border) !important;
}

/* Reset buttons inside cards */
.card .btn-outline, .glass-panel .btn-outline {
    background: var(--surface-blue) !important;
    border: 1px solid var(--light-blue) !important;
    color: var(--primary) !important;
    border-radius: 12px !important;
}
.card .btn-outline:hover, .glass-panel .btn-outline:hover {
    background: var(--light-blue) !important;
    border-color: var(--primary-light) !important;
    color: var(--deep-blue) !important;
}

/* Header cleanup */
.site-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
}
.nav-link {
    color: var(--text-secondary) !important;
}
.nav-link:hover {
    color: var(--primary) !important;
    background: var(--surface-blue) !important;
}

/* Hero Section Cleanup */
.hero-content h1 {
    color: var(--text-primary) !important;
}
.hero-desc {
    color: var(--text-secondary) !important;
}
.hero-brand-companion {
    background: var(--surface-blue) !important;
    border: 1px solid var(--light-blue) !important;
    color: var(--primary) !important;
}
.hero-brand-companion strong {
    color: var(--deep-blue) !important;
}

/* Unified Mobile Overrides */
@media (max-width: 768px) {
    #dashboard-content-area > div[style*="grid-template-columns"],
    .stat-card-row {
        grid-template-columns: 1fr !important;
    }
    .hero-solver-box, #hero-solver-box, #hero-solver-box-2 {
        padding: 1.25rem !important;
    }
    .btn-solve-now, #btn-solve-now, #btn-solve-now-2 {
        width: 100% !important;
    }
}