/* ═══════════════════════════════════════════════
   THEMES.CSS — ثيمات فخمة
   ═══════════════════════════════════════════════ */

/* ═══ DARK — أسود فخم ═══ */
[data-theme="dark"] {
  --bg-deep: #0a0e1a;
  --bg-dark: #121826;
  --bg-mid: #1a2138;
  --bg-light: #222b4a;
  --primary: #5b6ef5;
  --primary-glow: rgba(91, 110, 245, 0.6);
  --accent: #00e5ff;
  --accent-glow: rgba(0, 229, 255, 0.7);
  --success: #00ff88;
  --success-glow: rgba(0, 255, 136, 0.7);
  --danger: #ff3860;
  --danger-glow: rgba(255, 56, 96, 0.6);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-hover: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] body {
  background: 
    radial-gradient(ellipse at top, #1a2138 0%, #0a0e1a 70%),
    radial-gradient(ellipse at bottom right, rgba(91, 110, 245, 0.15) 0%, transparent 50%);
}

/* ═══ LIGHT — فاتح فخم ═══ */
[data-theme="light"] {
  --bg-deep: #e8ecf5;
  --bg-dark: #f0f4ff;
  --bg-mid: #ffffff;
  --bg-light: #f8faff;
  --primary: #4a5cf0;
  --primary-glow: rgba(74, 92, 240, 0.4);
  --accent: #0099ff;
  --accent-glow: rgba(0, 153, 255, 0.4);
  --success: #00b85c;
  --success-glow: rgba(0, 184, 92, 0.4);
  --danger: #e63946;
  --danger-glow: rgba(230, 57, 70, 0.4);
  --text-primary: #0a0e1a;
  --text-secondary: rgba(10, 14, 26, 0.75);
  --text-tertiary: rgba(10, 14, 26, 0.5);
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(74, 92, 240, 0.15);
  --glass-hover: rgba(74, 92, 240, 0.08);
}

[data-theme="light"] body {
  background: 
    radial-gradient(ellipse at top, #ffffff 0%, #e8ecf5 70%),
    radial-gradient(ellipse at bottom left, rgba(74, 92, 240, 0.1) 0%, transparent 50%);
}

/* ═══ PURPLE — بنفسجي ملكي ═══ */
[data-theme="purple"] {
  --bg-deep: #1a0033;
  --bg-dark: #2d0052;
  --bg-mid: #3d006e;
  --bg-light: #4d0089;
  --primary: #b14aff;
  --primary-glow: rgba(177, 74, 255, 0.7);
  --accent: #ff4ad4;
  --accent-glow: rgba(255, 74, 212, 0.7);
  --success: #00ffaa;
  --success-glow: rgba(0, 255, 170, 0.7);
  --danger: #ff3860;
  --danger-glow: rgba(255, 56, 96, 0.6);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --glass-bg: rgba(177, 74, 255, 0.12);
  --glass-border: rgba(177, 74, 255, 0.3);
  --glass-hover: rgba(177, 74, 255, 0.2);
}

[data-theme="purple"] body {
  background: 
    radial-gradient(ellipse at top, #4d0089 0%, #1a0033 70%),
    radial-gradient(ellipse at bottom right, rgba(255, 74, 212, 0.2) 0%, transparent 60%);
}

/* ═══ OCEAN — محيط فخم ═══ */
[data-theme="ocean"] {
  --bg-deep: #001a2e;
  --bg-dark: #002b4a;
  --bg-mid: #003d66;
  --bg-light: #005180;
  --primary: #00b4d8;
  --primary-glow: rgba(0, 180, 216, 0.7);
  --accent: #48cae4;
  --accent-glow: rgba(72, 202, 228, 0.7);
  --success: #00f5d4;
  --success-glow: rgba(0, 245, 212, 0.7);
  --danger: #f72585;
  --danger-glow: rgba(247, 37, 133, 0.6);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --glass-bg: rgba(0, 180, 216, 0.1);
  --glass-border: rgba(72, 202, 228, 0.25);
  --glass-hover: rgba(72, 202, 228, 0.18);
}

[data-theme="ocean"] body {
  background: 
    radial-gradient(ellipse at top, #003d66 0%, #001a2e 70%),
    radial-gradient(ellipse at bottom right, rgba(0, 245, 212, 0.15) 0%, transparent 60%);
}

/* ═══ ROSE — وردي فخم ═══ */
[data-theme="rose"] {
  --bg-deep: #1a000f;
  --bg-dark: #2d001a;
  --bg-mid: #4a002d;
  --bg-light: #66003d;
  --primary: #ff4d88;
  --primary-glow: rgba(255, 77, 136, 0.7);
  --accent: #ff8fb1;
  --accent-glow: rgba(255, 143, 177, 0.7);
  --success: #00ff88;
  --success-glow: rgba(0, 255, 136, 0.7);
  --danger: #ff0040;
  --danger-glow: rgba(255, 0, 64, 0.7);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --glass-bg: rgba(255, 77, 136, 0.12);
  --glass-border: rgba(255, 143, 177, 0.3);
  --glass-hover: rgba(255, 143, 177, 0.2);
}

[data-theme="rose"] body {
  background: 
    radial-gradient(ellipse at top, #4a002d 0%, #1a000f 70%),
    radial-gradient(ellipse at bottom right, rgba(255, 77, 136, 0.25) 0%, transparent 60%);
}

/* ═══ GOLD — ذهبي فخم (جديد) ═══ */
[data-theme="gold"] {
  --bg-deep: #1a1408;
  --bg-dark: #2d2410;
  --bg-mid: #3d3018;
  --bg-light: #4d3c1e;
  --primary: #ffd700;
  --primary-glow: rgba(255, 215, 0, 0.6);
  --accent: #ffb800;
  --accent-glow: rgba(255, 184, 0, 0.7);
  --success: #00ff88;
  --success-glow: rgba(0, 255, 136, 0.7);
  --danger: #ff4757;
  --danger-glow: rgba(255, 71, 87, 0.6);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --glass-bg: rgba(255, 215, 0, 0.1);
  --glass-border: rgba(255, 184, 0, 0.3);
  --glass-hover: rgba(255, 215, 0, 0.2);
}

[data-theme="gold"] body {
  background: 
    radial-gradient(ellipse at top, #3d3018 0%, #1a1408 70%),
    radial-gradient(ellipse at bottom right, rgba(255, 215, 0, 0.2) 0%, transparent 60%);
}

/* ═══ EMERALD — زمردي فخم (جديد) ═══ */
[data-theme="emerald"] {
  --bg-deep: #001a10;
  --bg-dark: #002d1e;
  --bg-mid: #003d2a;
  --bg-light: #004d36;
  --primary: #00d68f;
  --primary-glow: rgba(0, 214, 143, 0.7);
  --accent: #00ffaa;
  --accent-glow: rgba(0, 255, 170, 0.7);
  --success: #00ff88;
  --success-glow: rgba(0, 255, 136, 0.7);
  --danger: #ff3860;
  --danger-glow: rgba(255, 56, 96, 0.6);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --glass-bg: rgba(0, 214, 143, 0.1);
  --glass-border: rgba(0, 255, 170, 0.3);
  --glass-hover: rgba(0, 214, 143, 0.2);
}

[data-theme="emerald"] body {
  background: 
    radial-gradient(ellipse at top, #003d2a 0%, #001a10 70%),
    radial-gradient(ellipse at bottom right, rgba(0, 255, 170, 0.2) 0%, transparent 60%);
}

/* ═══ إعدادات مشتركة ═══ */
[data-theme] body {
  transition: background 0.5s ease;
  color: var(--text-primary);
  background-attachment: fixed;
}

[data-theme] .bg-blur {
  background: transparent;
}

/* ═══ البطاقات والزجاج ═══ */
[data-theme] .user-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme] .modal-sheet,
[data-theme] .modal-dialog {
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-dark) 100%);
  border-top: 1px solid var(--glass-border);
}

[data-theme] .header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}

/* ═══ زر الثيمات — 7 خيارات ═══ */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
  margin: 10px 0;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--glass-bg);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.theme-option.active {
  border-color: var(--primary);
  box-shadow: 0 0 20px var(--primary-glow);
  transform: scale(1.05);
}

.theme-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.theme-option .theme-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Swatches */
.swatch-dark     { background: linear-gradient(135deg, #1a2138, #5b6ef5); }
.swatch-light    { background: linear-gradient(135deg, #ffffff, #4a5cf0); }
.swatch-purple   { background: linear-gradient(135deg, #b14aff, #ff4ad4); }
.swatch-ocean    { background: linear-gradient(135deg, #00b4d8, #00f5d4); }
.swatch-rose     { background: linear-gradient(135deg, #ff4d88, #ff8fb1); }
.swatch-gold     { background: linear-gradient(135deg, #ffd700, #ffb800); }
.swatch-emerald  { background: linear-gradient(135deg, #00d68f, #00ffaa); }