/* ===========================================================
   TEAM888 THEME SYSTEM — 8 modern themes
   ใช้ html[data-theme="..."] ตั้งให้ specificity สูงกว่า :root inline
   =========================================================== */

/* 🥇 GOLD BLACK (default — luxurious dark gold) */
html[data-theme="gold"] {
  --bg: #0a0a0a;
  --bg-2: #161616;
  --card: #161616;
  --card-2: #1f1f1f;
  --border: #2a2418;
  --text: #f0e4c4;
  --text-2: #ffffff;
  --muted: #8a7c5a;
  --accent: #f5c518;
  --accent-2: #d4a017;
  --warn: #fb923c;
  --ok: #4ade80;
  --danger: #f87171;
  --info: #38bdf8;
  --glow: rgba(245, 197, 24, 0.4);
}

/* 🌌 CYBER NEON (futuristic purple/cyan) */
html[data-theme="cyber"] {
  --bg: #0a0014;
  --bg-2: #14092e;
  --card: #1a0d3a;
  --card-2: #2a1654;
  --border: #4a2980;
  --text: #f0e6ff;
  --text-2: #ffffff;
  --muted: #9d80c8;
  --accent: #d946ef;
  --accent-2: #c026d3;
  --warn: #fbbf24;
  --ok: #34d399;
  --danger: #f43f5e;
  --info: #06b6d4;
  --glow: rgba(217, 70, 239, 0.5);
}

/* 🌊 OCEAN DEEP (calm blue/teal) */
html[data-theme="ocean"] {
  --bg: #0a1929;
  --bg-2: #102a43;
  --card: #132f4c;
  --card-2: #1a4163;
  --border: #1e3a5f;
  --text: #cae8f5;
  --text-2: #ffffff;
  --muted: #547089;
  --accent: #00b4d8;
  --accent-2: #0077b6;
  --warn: #ffb703;
  --ok: #06d6a0;
  --danger: #ef476f;
  --info: #80d8ff;
  --glow: rgba(0, 180, 216, 0.45);
}

/* 🌲 FOREST (natural dark green) */
html[data-theme="forest"] {
  --bg: #0a1f0a;
  --bg-2: #122412;
  --card: #14302b;
  --card-2: #1a3e36;
  --border: #2a5043;
  --text: #d4f4dd;
  --text-2: #ffffff;
  --muted: #6b9876;
  --accent: #76c47b;
  --accent-2: #4f9954;
  --warn: #f4a261;
  --ok: #95d5b2;
  --danger: #e76f51;
  --info: #8ecae6;
  --glow: rgba(118, 196, 123, 0.4);
}

/* 🌅 SUNSET (warm orange/red) */
html[data-theme="sunset"] {
  --bg: #1a0e0a;
  --bg-2: #281410;
  --card: #2a1810;
  --card-2: #3a2018;
  --border: #4a2e1f;
  --text: #ffe5cc;
  --text-2: #ffffff;
  --muted: #b8896b;
  --accent: #ff7e5f;
  --accent-2: #feb47b;
  --warn: #ffd166;
  --ok: #06d6a0;
  --danger: #d62828;
  --info: #ffb4a2;
  --glow: rgba(255, 126, 95, 0.45);
}

/* 💜 MIDNIGHT PURPLE (elegant violet) */
html[data-theme="midnight"] {
  --bg: #13111c;
  --bg-2: #1c1830;
  --card: #1f1a35;
  --card-2: #2a2245;
  --border: #3a2f5a;
  --text: #e9e3ff;
  --text-2: #ffffff;
  --muted: #8678b0;
  --accent: #a78bfa;
  --accent-2: #8b5cf6;
  --warn: #fbbf24;
  --ok: #4ade80;
  --danger: #f87171;
  --info: #60a5fa;
  --glow: rgba(167, 139, 250, 0.4);
}

/* ⚫ MINIMAL DARK (pure B&W zero distraction) */
html[data-theme="minimal"] {
  --bg: #000000;
  --bg-2: #0a0a0a;
  --card: #141414;
  --card-2: #1f1f1f;
  --border: #2a2a2a;
  --text: #f0f0f0;
  --text-2: #ffffff;
  --muted: #888888;
  --accent: #ffffff;
  --accent-2: #e0e0e0;
  --warn: #f59e0b;
  --ok: #10b981;
  --danger: #ef4444;
  --info: #3b82f6;
  --glow: rgba(255, 255, 255, 0.25);
}

/* ☀️ LIGHT MODE (clean daylight) */
html[data-theme="light"] {
  --bg: #f7f8fa;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #f0f2f5;
  --border: #e2e6ed;
  --text: #1a202c;
  --text-2: #000000;
  --muted: #718096;
  --accent: #d4a017;
  --accent-2: #b8860b;
  --warn: #dd6b20;
  --ok: #38a169;
  --danger: #e53e3e;
  --info: #3182ce;
  --glow: rgba(212, 160, 23, 0.3);
}

/* ===========================================================
   THEME SWITCHER UI — floating bottom-right button
   =========================================================== */

#theme-switcher {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 10000;
  font-family: -apple-system, "Segoe UI", "Sarabun", sans-serif;
}

#theme-switcher .ts-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--glow);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
#theme-switcher .ts-btn:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 6px 20px var(--glow);
}

#theme-switcher .ts-menu {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  gap: 4px;
}
#theme-switcher.ts-open .ts-menu { display: flex; }

#theme-switcher .ts-header {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

#theme-switcher .ts-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}
#theme-switcher .ts-item:hover { background: var(--card-2); }
#theme-switcher .ts-item.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--bg);
  font-weight: 600;
}

#theme-switcher .ts-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* dots ของแต่ละ theme */
.ts-dot.gold      { background: linear-gradient(135deg, #f5c518, #d4a017); }
.ts-dot.cyber     { background: linear-gradient(135deg, #d946ef, #06b6d4); }
.ts-dot.ocean     { background: linear-gradient(135deg, #00b4d8, #0077b6); }
.ts-dot.forest    { background: linear-gradient(135deg, #76c47b, #4f9954); }
.ts-dot.sunset    { background: linear-gradient(135deg, #ff7e5f, #feb47b); }
.ts-dot.midnight  { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.ts-dot.minimal   { background: linear-gradient(135deg, #fff, #888); }
.ts-dot.light     { background: linear-gradient(135deg, #fff, #d4a017); border: 1px solid #ddd; }