/* ═══════════════════════════════════════════════════
   MASAR — Dark Mode V4 (Rich Dark Premium)
   الوضع الداكن — تجربة فاخرة مع ألوان نيون
   ═══════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg-primary:    #0B0F1A;
  --bg-secondary:  #111827;
  --bg-tertiary:   #1E293B;
  --bg-elevated:   #1A1F2E;
  --bg-overlay:    rgba(0, 0, 0, 0.75);
  --bg-glass:      rgba(17, 24, 39, 0.72);
  --bg-glass-heavy: rgba(17, 24, 39, 0.88);

  --text-primary:   #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-tertiary:  #64748B;
  --text-inverse:   #0F172A;
  --text-link:      #A78BFA;
  --text-link-hover:#C4B5FD;

  --border-light:   rgba(148, 163, 184, 0.1);
  --border-default: rgba(148, 163, 184, 0.15);
  --border-focus:   #8B5CF6;
  --border-glass:   rgba(255, 255, 255, 0.06);

  --input-bg:       rgba(30, 41, 59, 0.6);
  --input-border:   rgba(148, 163, 184, 0.15);
  --input-focus:    #8B5CF6;
  --input-placeholder: #475569;

  --card-bg:        rgba(17, 24, 39, 0.7);
  --card-border:    rgba(148, 163, 184, 0.08);
  --card-shadow:    0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(124, 58, 237, 0.05);
  --card-shadow-hover: 0 8px 30px rgba(124, 58, 237, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2);

  --navbar-bg:      rgba(11, 15, 26, 0.8);
  --navbar-border:  rgba(148, 163, 184, 0.08);
  --sidebar-bg:     rgba(17, 24, 39, 0.65);

  --gradient-glass: linear-gradient(135deg, rgba(17,24,39,0.85) 0%, rgba(17,24,39,0.6) 100%);
  --gradient-card: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
  --gradient-mesh: radial-gradient(at 20% 80%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
                   radial-gradient(at 80% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                   radial-gradient(at 50% 50%, rgba(251, 191, 36, 0.04) 0%, transparent 70%);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.25), 0 0 40px rgba(139, 92, 246, 0.1);
  --shadow-glow-sm: 0 0 12px rgba(139, 92, 246, 0.2);
  --shadow-glow-lg: 0 0 60px rgba(139, 92, 246, 0.3), 0 0 100px rgba(99, 102, 241, 0.15);
  --shadow-glow-gold: 0 0 20px rgba(251, 191, 36, 0.25), 0 0 40px rgba(251, 191, 36, 0.1);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ─── Smooth Transition When Switching Themes ─── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.4s ease,
              color 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              fill 0.4s ease,
              stroke 0.4s ease !important;
}