/* ============================================
   NexHome Multi-Theme System
   5 Themes: Ocean Dark (default), Cloud Light, Aurora, Warm Night, Stardew Valley
   ============================================ */

/* --- Background Decorations (shared) --- */
.theme-bg-decor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.theme-bg-decor * {
  pointer-events: none;
}

.theme-bg-decor .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: orbFloat 20s ease-in-out infinite;
}

.theme-bg-decor .orb-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -80px;
  background: var(--decor-orb-1);
  animation-delay: 0s;
}

.theme-bg-decor .orb-2 {
  width: 300px;
  height: 300px;
  bottom: -60px;
  left: -60px;
  background: var(--decor-orb-2);
  animation-delay: -7s;
}

.theme-bg-decor .orb-3 {
  width: 200px;
  height: 200px;
  top: 40%;
  left: 30%;
  background: var(--decor-orb-3);
  animation-delay: -14s;
  opacity: 0.2;
}

/* Subtle grid pattern overlay */
.theme-bg-decor .grid-pattern {
  position: absolute;
  inset: 0;
  background-image: var(--decor-grid);
  background-size: 60px 60px;
  opacity: var(--decor-grid-opacity, 0.03);
}

/* Floating particles (CSS-only) */
.theme-bg-decor .particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--decor-particle);
  opacity: 0;
  animation: particleDrift 12s ease-in-out infinite;
}

.theme-bg-decor .particle:nth-child(5) { left: 10%; top: 20%; animation-delay: 0s; }
.theme-bg-decor .particle:nth-child(6) { left: 30%; top: 60%; animation-delay: -3s; }
.theme-bg-decor .particle:nth-child(7) { left: 60%; top: 30%; animation-delay: -6s; }
.theme-bg-decor .particle:nth-child(8) { left: 80%; top: 70%; animation-delay: -9s; }
.theme-bg-decor .particle:nth-child(9) { left: 50%; top: 80%; animation-delay: -2s; }
.theme-bg-decor .particle:nth-child(10) { left: 90%; top: 15%; animation-delay: -5s; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes particleDrift {
  0%, 100% { opacity: 0; transform: translateY(0); }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  50% { transform: translateY(-40px); }
}

/* ============================================
   Theme 1: Ocean Dark (default — matches existing)
   ============================================ */
[data-theme="ocean-dark"],
:root {
  --decor-orb-1: rgba(56, 189, 248, 0.3);
  --decor-orb-2: rgba(129, 140, 248, 0.25);
  --decor-orb-3: rgba(56, 189, 248, 0.2);
  --decor-particle: rgba(56, 189, 248, 0.5);
  --decor-grid: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  --decor-grid-opacity: 0.4;
}

/* ============================================
   Theme 2: Cloud Light
   ============================================ */
[data-theme="cloud-light"] {
  --bg-base: #F0F4F8;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-elevated: #E8EDF2;
  --bg-highlight: rgba(56, 130, 220, 0.06);

  --accent-cyan: #2563EB;
  --accent-indigo: #7C3AED;
  --gradient-primary: linear-gradient(135deg, #2563EB, #7C3AED);
  --gradient-warm: linear-gradient(135deg, #F59E0B, #EF4444);
  --gradient-success: linear-gradient(135deg, #10B981, #059669);

  --color-success: #059669;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-info: #2563EB;

  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-accent: #2563EB;

  --border-subtle: rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.1);
  --border-accent: rgba(37,99,235,0.3);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 24px rgba(37,99,235,0.12);

  --decor-orb-1: rgba(37, 99, 235, 0.12);
  --decor-orb-2: rgba(124, 58, 237, 0.1);
  --decor-orb-3: rgba(37, 99, 235, 0.08);
  --decor-particle: rgba(37, 99, 235, 0.3);
  --decor-grid: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  --decor-grid-opacity: 0.3;
}

/* Cloud Light overrides for glass/card backgrounds */
[data-theme="cloud-light"] .card,
[data-theme="cloud-light"] .stat-card,
[data-theme="cloud-light"] .device-card,
[data-theme="cloud-light"] .sensor-card,
[data-theme="cloud-light"] .scene-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
}

[data-theme="cloud-light"] .glass {
  background: rgba(255, 255, 255, 0.5);
}

[data-theme="cloud-light"] .topbar {
  background: rgba(255, 255, 255, 0.85);
}

[data-theme="cloud-light"] .sidebar {
  background: #FFFFFF;
}

[data-theme="cloud-light"] .admin-sidebar {
  background: #FFFFFF;
}

[data-theme="cloud-light"] .admin-topbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
}

[data-theme="cloud-light"] .status-card,
[data-theme="cloud-light"] .voice-panel,
[data-theme="cloud-light"] .door-status-panel,
[data-theme="cloud-light"] .door-monitor,
[data-theme="cloud-light"] .activity-timeline,
[data-theme="cloud-light"] .device-mini-card,
[data-theme="cloud-light"] .quick-action-btn,
[data-theme="cloud-light"] .env-stat-card {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

[data-theme="cloud-light"] .command-item {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="cloud-light"] .room-header,
[data-theme="cloud-light"] .sensor-gauge-card,
[data-theme="cloud-light"] .device-control-card,
[data-theme="cloud-light"] .room-chart-card {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

[data-theme="cloud-light"] .room-back-btn {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="cloud-light"] .device-mini-card.active {
  background: rgba(37, 99, 235, 0.06);
  border-color: var(--accent-cyan);
}

[data-theme="cloud-light"] .toggle-switch {
  background: #CBD5E1;
}

[data-theme="cloud-light"] .toggle-knob {
  background: #FFFFFF;
}

[data-theme="cloud-light"] input[type="range"] {
  background: #CBD5E1;
}

[data-theme="cloud-light"] ::-webkit-scrollbar-track {
  background: #F0F4F8;
}

[data-theme="cloud-light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2563EB, #7C3AED);
}

[data-theme="cloud-light"] ::selection {
  background: rgba(37, 99, 235, 0.2);
}


/* ============================================
   Theme 3: Aurora (green-purple northern lights)
   ============================================ */
[data-theme="aurora"] {
  --bg-base: #0C1222;
  --bg-surface: #111B2E;
  --bg-card: #162036;
  --bg-elevated: #1C2A44;
  --bg-highlight: rgba(52, 211, 153, 0.08);

  --accent-cyan: #34D399;
  --accent-indigo: #A78BFA;
  --gradient-primary: linear-gradient(135deg, #34D399, #A78BFA);
  --gradient-warm: linear-gradient(135deg, #FBBF24, #F87171);
  --gradient-success: linear-gradient(135deg, #34D399, #10B981);

  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-info: #60A5FA;

  --text-primary: #E8F0FE;
  --text-secondary: #94A8C8;
  --text-muted: #5E7490;
  --text-accent: #34D399;

  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.1);
  --border-accent: rgba(52,211,153,0.3);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 24px rgba(52,211,153,0.2);

  --decor-orb-1: rgba(52, 211, 153, 0.25);
  --decor-orb-2: rgba(167, 139, 250, 0.2);
  --decor-orb-3: rgba(96, 165, 250, 0.15);
  --decor-particle: rgba(52, 211, 153, 0.5);
  --decor-grid: linear-gradient(rgba(52,211,153,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(167,139,250,0.03) 1px, transparent 1px);
  --decor-grid-opacity: 0.5;
}

[data-theme="aurora"] .sidebar-nav-item:hover {
  background: rgba(52, 211, 153, 0.08);
}

[data-theme="aurora"] .sidebar-nav-item.active {
  background: rgba(52, 211, 153, 0.1);
  color: var(--accent-cyan);
  border-left-color: var(--accent-cyan);
}


/* ============================================
   Theme 4: Warm Night (amber/orange cozy)
   ============================================ */
[data-theme="warm-night"] {
  --bg-base: #1A1410;
  --bg-surface: #231C15;
  --bg-card: #2A2118;
  --bg-elevated: #342A1F;
  --bg-highlight: rgba(245, 158, 11, 0.08);

  --accent-cyan: #F59E0B;
  --accent-indigo: #F97316;
  --gradient-primary: linear-gradient(135deg, #F59E0B, #F97316);
  --gradient-warm: linear-gradient(135deg, #F59E0B, #EF4444);
  --gradient-success: linear-gradient(135deg, #34D399, #22C55E);

  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-info: #60A5FA;

  --text-primary: #F5E6D3;
  --text-secondary: #BFA88E;
  --text-muted: #7D6B56;
  --text-accent: #F59E0B;

  --border-subtle: rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.08);
  --border-accent: rgba(245,158,11,0.3);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 24px rgba(245,158,11,0.15);

  --decor-orb-1: rgba(245, 158, 11, 0.2);
  --decor-orb-2: rgba(249, 115, 22, 0.18);
  --decor-orb-3: rgba(234, 88, 12, 0.12);
  --decor-particle: rgba(245, 158, 11, 0.4);
  --decor-grid: linear-gradient(rgba(245,158,11,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(245,158,11,0.02) 1px, transparent 1px);
  --decor-grid-opacity: 0.4;
}

[data-theme="warm-night"] .sidebar-nav-item:hover {
  background: rgba(245, 158, 11, 0.08);
}

[data-theme="warm-night"] .sidebar-nav-item.active {
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent-cyan);
  border-left-color: var(--accent-cyan);
}

[data-theme="warm-night"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F59E0B, #F97316);
}

[data-theme="warm-night"] ::selection {
  background: rgba(245, 158, 11, 0.3);
}

/* ============================================
   Theme 5: Stardew Valley (warm farm/pixel style)
   ============================================ */
[data-theme="stardew"] {
  --bg-base: #F5E6C8;
  --bg-surface: #EDD9B5;
  --bg-card: #FAF0DC;
  --bg-elevated: #E8D4A8;
  --bg-highlight: rgba(91, 140, 62, 0.1);

  --accent-cyan: #5B8C3E;
  --accent-indigo: #6DC2E7;
  --gradient-primary: linear-gradient(135deg, #5B8C3E, #6DC2E7);
  --gradient-warm: linear-gradient(135deg, #E8A33C, #D45B3E);
  --gradient-success: linear-gradient(135deg, #5B8C3E, #7CB342);

  --color-success: #5B8C3E;
  --color-warning: #E8A33C;
  --color-danger: #D45B3E;
  --color-info: #6DC2E7;

  --text-primary: #3E2723;
  --text-secondary: #5D4037;
  --text-muted: #8D6E63;
  --text-accent: #5B8C3E;

  --border-subtle: rgba(139, 115, 85, 0.2);
  --border-default: rgba(139, 115, 85, 0.35);
  --border-accent: rgba(91, 140, 62, 0.5);

  --shadow-sm: 0 1px 3px rgba(62, 39, 35, 0.1);
  --shadow-md: 0 4px 14px rgba(62, 39, 35, 0.12);
  --shadow-lg: 0 8px 30px rgba(62, 39, 35, 0.15);
  --shadow-glow: 0 0 24px rgba(91, 140, 62, 0.15);

  --decor-orb-1: rgba(91, 140, 62, 0.18);
  --decor-orb-2: rgba(232, 163, 60, 0.15);
  --decor-orb-3: rgba(109, 194, 231, 0.12);
  --decor-particle: rgba(91, 140, 62, 0.4);
  --decor-grid: linear-gradient(rgba(139,115,85,0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(139,115,85,0.06) 1px, transparent 1px);
  --decor-grid-opacity: 0.5;
}

/* Stardew: pixel font for headings */
[data-theme="stardew"] .card-title,
[data-theme="stardew"] .stat-card-value,
[data-theme="stardew"] .gauge-value,
[data-theme="stardew"] .sidebar-user .user-name,
[data-theme="stardew"] .topbar-title,
[data-theme="stardew"] .room-header h2,
[data-theme="stardew"] .modal-title {
  font-family: 'VT323', monospace;
  letter-spacing: 0.5px;
}

/* Stardew: card wood-frame style */
[data-theme="stardew"] .card,
[data-theme="stardew"] .stat-card,
[data-theme="stardew"] .device-card,
[data-theme="stardew"] .sensor-card,
[data-theme="stardew"] .scene-card {
  background: rgba(250, 240, 220, 0.85);
  border: 2px solid #8B7355;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
}

[data-theme="stardew"] .glass {
  background: rgba(250, 240, 220, 0.5);
}

/* Stardew: sidebar & topbar */
[data-theme="stardew"] .sidebar {
  background: #D4B896;
  border-right: 2px solid #8B7355;
}

[data-theme="stardew"] .admin-sidebar {
  background: #D4B896;
  border-right: 2px solid #8B7355;
}

[data-theme="stardew"] .topbar {
  background: rgba(237, 217, 181, 0.9);
  border-bottom: 2px solid #8B7355;
}

[data-theme="stardew"] .admin-topbar {
  background: rgba(237, 217, 181, 0.9);
  border-bottom: 2px solid #8B7355;
  backdrop-filter: blur(16px);
}

/* Stardew: sidebar nav */
[data-theme="stardew"] .sidebar-nav-item:hover {
  background: rgba(91, 140, 62, 0.12);
}

[data-theme="stardew"] .sidebar-nav-item.active {
  background: rgba(91, 140, 62, 0.15);
  color: #5B8C3E;
  border-left-color: #5B8C3E;
}

/* Stardew: status/panel cards */
[data-theme="stardew"] .status-card,
[data-theme="stardew"] .voice-panel,
[data-theme="stardew"] .door-status-panel,
[data-theme="stardew"] .door-monitor,
[data-theme="stardew"] .activity-timeline,
[data-theme="stardew"] .device-mini-card,
[data-theme="stardew"] .quick-action-btn,
[data-theme="stardew"] .env-stat-card {
  background: rgba(250, 240, 220, 0.8);
  border: 1px solid #8B7355;
  box-shadow: 0 1px 4px rgba(62, 39, 35, 0.08);
}

[data-theme="stardew"] .command-item {
  background: rgba(139, 115, 85, 0.06);
}

/* Stardew: room page */
[data-theme="stardew"] .room-header,
[data-theme="stardew"] .sensor-gauge-card,
[data-theme="stardew"] .device-control-card,
[data-theme="stardew"] .room-chart-card {
  background: rgba(250, 240, 220, 0.8);
  border: 2px solid #8B7355;
  box-shadow: 0 1px 4px rgba(62, 39, 35, 0.08);
}

[data-theme="stardew"] .room-back-btn {
  background: rgba(139, 115, 85, 0.1);
}

/* Stardew: active device highlight */
[data-theme="stardew"] .device-mini-card.active {
  background: rgba(91, 140, 62, 0.1);
  border-color: #5B8C3E;
}

/* Stardew: toggle & inputs */
[data-theme="stardew"] .toggle-switch {
  background: #C4A882;
}

[data-theme="stardew"] .toggle-knob {
  background: #FFFFFF;
}

[data-theme="stardew"] input[type="range"] {
  background: #C4A882;
}

/* Stardew: theme switcher panel */
[data-theme="stardew"] .theme-switcher-btn {
  background: rgba(139, 115, 85, 0.12);
  border-color: rgba(139, 115, 85, 0.25);
}

[data-theme="stardew"] .theme-switcher-btn:hover {
  background: rgba(139, 115, 85, 0.2);
}

[data-theme="stardew"] .theme-switcher-panel {
  background: #EDD9B5;
  border-color: #8B7355;
}

/* Stardew: scrollbar */
[data-theme="stardew"] ::-webkit-scrollbar-track {
  background: #E8D4A8;
}

[data-theme="stardew"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5B8C3E, #7CB342);
}

/* Stardew: selection */
[data-theme="stardew"] ::selection {
  background: rgba(91, 140, 62, 0.25);
}

/* ============================================
   Theme Switcher Component Styles
   ============================================ */
.theme-switcher {
  position: relative;
  display: inline-flex;
}

.theme-switcher-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.theme-switcher-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-accent);
  border-color: var(--border-accent);
}

[data-theme="cloud-light"] .theme-switcher-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}

[data-theme="cloud-light"] .theme-switcher-btn:hover {
  background: rgba(0,0,0,0.08);
}

.theme-switcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  padding: 6px;
  animation: scaleIn 0.15s ease;
}

[data-theme="cloud-light"] .theme-switcher-panel {
  background: #FFFFFF;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
}

.theme-option:hover {
  background: var(--bg-highlight);
  color: var(--text-primary);
}

.theme-option.active {
  background: var(--bg-highlight);
  color: var(--text-accent);
}

.theme-option-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border-default);
}

.theme-option.active .theme-option-dot {
  border-color: var(--text-accent);
  box-shadow: 0 0 8px currentColor;
}

/* Ensure main content sits above decorations */
.app-shell {
  position: relative;
  z-index: 1;
}

/* Smooth theme transition */
body,
.sidebar,
.topbar,
.card,
.status-card,
.device-card,
.scene-card,
.stat-card,
.voice-panel,
.activity-timeline,
.door-status-panel,
.device-mini-card,
.quick-action-btn,
.env-stat-card {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}