/* Theme palette switches via body class */

/* Default already in theme-neon.css as dark. Provide light override here. */

.theme-light {
  --panel: #f8fafc;
  --line: rgba(0,0,0,0.08);
  --muted: #475569;
  color: #0f172a;
  background: #ffffff;
}

.theme-light .sidebar {
  background: #ffffff;
}

.theme-light .nav-item {
  color: #334155;
}

.theme-light .nav-item.nav-active {
  background: #e2e8f0;
  color: #0f172a;
}

.theme-light .m-card {
  background: #ffffff;
  border: 1px solid var(--line);
}

/* Neon Theme */
.theme-neon {
  --panel: #0a0a0f;
  --line: rgba(6, 182, 212, 0.2);
  --muted: #94a3b8;
  color: #f1f5f9;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
}

.theme-neon .sidebar {
  background: rgba(10, 10, 15, 0.95);
  border-right: 1px solid rgba(6, 182, 212, 0.3);
}

.theme-neon .nav-item {
  color: #94a3b8;
  transition: all 0.3s ease;
}

.theme-neon .nav-item:hover {
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.1);
}

.theme-neon .nav-item.nav-active {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.2));
  color: #06b6d4;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

.theme-neon .m-card {
  background: rgba(10, 10, 15, 0.8);
  border: 1px solid rgba(6, 182, 212, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Ocean Theme */
.theme-ocean {
  --panel: #0c1445;
  --line: rgba(59, 130, 246, 0.2);
  --muted: #94a3b8;
  color: #f1f5f9;
  background: linear-gradient(135deg, #0c1445 0%, #1e3a8a 100%);
}

.theme-ocean .sidebar {
  background: rgba(12, 20, 69, 0.95);
  border-right: 1px solid rgba(59, 130, 246, 0.3);
}

.theme-ocean .nav-item {
  color: #94a3b8;
  transition: all 0.3s ease;
}

.theme-ocean .nav-item:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.theme-ocean .nav-item.nav-active {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.2), rgba(20, 184, 166, 0.2));
  color: #3b82f6;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.theme-ocean .m-card {
  background: rgba(12, 20, 69, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Forest Theme */
.theme-forest {
  --panel: #0f1b0f;
  --line: rgba(34, 197, 94, 0.2);
  --muted: #94a3b8;
  color: #f1f5f9;
  background: linear-gradient(135deg, #0f1b0f 0%, #1a2e1a 100%);
}

.theme-forest .sidebar {
  background: rgba(15, 27, 15, 0.95);
  border-right: 1px solid rgba(34, 197, 94, 0.3);
}

.theme-forest .nav-item {
  color: #94a3b8;
  transition: all 0.3s ease;
}

.theme-forest .nav-item:hover {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.theme-forest .nav-item.nav-active {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2));
  color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.theme-forest .m-card {
  background: rgba(15, 27, 15, 0.8);
  border: 1px solid rgba(34, 197, 94, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Sunset Theme */
.theme-sunset {
  --panel: #2d1b0f;
  --line: rgba(249, 115, 22, 0.2);
  --muted: #94a3b8;
  color: #f1f5f9;
  background: linear-gradient(135deg, #2d1b0f 0%, #7c2d12 100%);
}

.theme-sunset .sidebar {
  background: rgba(45, 27, 15, 0.95);
  border-right: 1px solid rgba(249, 115, 22, 0.3);
}

.theme-sunset .nav-item {
  color: #94a3b8;
  transition: all 0.3s ease;
}

.theme-sunset .nav-item:hover {
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
}

.theme-sunset .nav-item.nav-active {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
  color: #f97316;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

.theme-sunset .m-card {
  background: rgba(45, 27, 15, 0.8);
  border: 1px solid rgba(249, 115, 22, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Layout Mode Styles */
.layout-navbar .sidebar {
  display: none;
}

.layout-navbar .main-content {
  margin-left: 0;
}

.layout-navbar .topbar {
  display: flex;
}

/* Default sidebar layout */
.layout-sidebar .topbar {
  display: none;
}

/* Navbar Layout Styles */
.navbar-layout {
  display: none;
}

.layout-navbar .navbar-layout {
  display: block;
}

.layout-navbar .sidebar-layout {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .theme-light .sidebar {
    background: #ffffff;
  }
  
  .theme-neon .sidebar,
  .theme-ocean .sidebar,
  .theme-forest .sidebar,
  .theme-sunset .sidebar {
    background: var(--panel);
  }
}