/* ============================================================
   Student Utility Hub — Dark Mode CSS
   Handles: toggle, transitions, system preference
   ============================================================ */

/* ---------- Smooth Theme Transition ---------- */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exclude transition for elements that shouldn't animate */
.no-transition,
.no-transition *,
img,
video,
svg,
.search-suggestions,
.nav-mobile-drawer,
.toast,
[class*="animate-"] {
  transition: none !important;
}

/* Re-allow specific transitions after page load */
body.theme-ready * {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Dark Mode Specific Overrides ---------- */
[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #0d1117 0%, #161b2e 40%, #0f1117 100%);
}

[data-theme="dark"] .hero::before {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(74,158,255,0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(124,58,237,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 60% 80%, rgba(251,191,36,0.1) 0%, transparent 50%);
}

[data-theme="dark"] .page-header {
  background: linear-gradient(135deg, #0d1117 0%, #161b2e 40%, #0f1117 100%);
}

[data-theme="dark"] .search-input {
  background: rgba(26, 29, 39, 0.9);
  border-color: rgba(74,158,255,0.3);
  color: var(--text);
}

[data-theme="dark"] .search-input::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] .search-input:focus {
  background: var(--input-bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(74,158,255,0.15);
  color: var(--text);
}

[data-theme="dark"] .search-icon {
  color: var(--text-muted);
}

/* Dark mode gradient text fix */
[data-theme="dark"] .text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark mode category card glow */
[data-theme="dark"] .category-card:hover {
  box-shadow: 0 8px 32px rgba(74,158,255,0.25), 0 2px 8px rgba(0,0,0,0.4);
}

/* Dark mode card icon backgrounds */
[data-theme="dark"] .card-icon-blue   { background: rgba(74,158,255,0.15); }
[data-theme="dark"] .card-icon-amber  { background: rgba(251,191,36,0.15); }
[data-theme="dark"] .card-icon-green  { background: rgba(52,211,153,0.15); }
[data-theme="dark"] .card-icon-purple { background: rgba(167,139,250,0.15); }
[data-theme="dark"] .card-icon-red    { background: rgba(248,113,113,0.15); }
[data-theme="dark"] .card-icon-cyan   { background: rgba(34,211,238,0.15); }

[data-theme="dark"] .category-icon-wrap {
  /* All icon wraps adjust in dark mode */
}

/* Dark scrollbar */
[data-theme="dark"] {
  scrollbar-color: #3d4460 #1a1d27;
  scrollbar-width: thin;
}

[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1a1d27;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3d4460;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4a9eff;
}

/* Light scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* ---------- Dark Mode Hero Stats ---------- */
[data-theme="dark"] .hero-stat-num { color: var(--primary); }

/* ---------- Dark Mode Navbar ---------- */
[data-theme="dark"] .navbar {
  border-bottom-color: #2d3247;
}

[data-theme="dark"] .navbar.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* ---------- Dark Mode Footer ---------- */
[data-theme="dark"] .footer {
  background: #0d1117;
}

/* ---------- Dark Mode Section Label ---------- */
[data-theme="dark"] .section-label {
  background: rgba(74,158,255,0.15);
  color: var(--primary);
}

/* ---------- Dark Mode Suggestion Hover ---------- */
[data-theme="dark"] .suggestion-item:hover,
[data-theme="dark"] .suggestion-item.highlighted {
  background: rgba(74,158,255,0.1);
}

/* ---------- Dark Mode btn-secondary ---------- */
[data-theme="dark"] .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text);
  border-color: var(--card-border);
}

[data-theme="dark"] .btn-secondary:hover {
  background: #3d4460;
  border-color: var(--secondary);
}

/* ---------- Dark Mode btn-ghost ---------- */
[data-theme="dark"] .btn-ghost {
  color: var(--text-secondary);
}
[data-theme="dark"] .btn-ghost:hover {
  background: var(--bg-tertiary);
  color: var(--text);
}

/* ---------- Dark Mode Ad Banner ---------- */
[data-theme="dark"] .ad-banner {
  background: #1a1d27;
  border-color: #3d4460;
}

/* ---------- Dark Mode Result Card ---------- */
[data-theme="dark"] .result-card {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-tertiary) 100%);
}

/* ---------- System Preference: Prefers Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              #0f1117;
    --bg-secondary:    #1a1d27;
    --bg-tertiary:     #242736;
    --bg-overlay:      rgba(15, 17, 23, 0.92);

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

    --primary:         #4a9eff;
    --primary-hover:   #60aaff;
    --primary-light:   rgba(74, 158, 255, 0.15);

    --accent:          #fbbf24;
    --accent-light:    rgba(251, 191, 36, 0.15);

    --card-bg:         #1a1d27;
    --card-border:     #2d3247;
    --card-shadow:     0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);

    --nav-bg:          rgba(15, 17, 23, 0.95);
    --nav-border:      #2d3247;

    --input-bg:        #1a1d27;
    --input-border:    #3d4460;
    --input-focus:     #4a9eff;
    --input-shadow:    0 0 0 3px rgba(74,158,255,0.2);

    --gradient-hero:   linear-gradient(135deg, #1a1d27 0%, #242736 40%, #0f1117 100%);
    --gradient-card:   linear-gradient(135deg, #1a1d27 0%, #242736 100%);

    --secondary:       #94a3b8;
    --secondary-light: rgba(148, 163, 184, 0.1);

    --success:         #34d399;
    --success-light:   rgba(52, 211, 153, 0.15);
    --error:           #f87171;
    --error-light:     rgba(248, 113, 113, 0.15);
    --info:            #60a5fa;
    --info-light:      rgba(96, 165, 250, 0.15);
  }
}