/* 2026 Theme - Futuristic New Year */
html[data-color="2026"]{ --brand-h:200; }

/* Typography - Basis Fonts */
html[data-color="2026"] {
  font-family: var(--font-basis-primary);
}
html[data-color="2026"] .muted,
html[data-color="2026"] .help,
html[data-color="2026"] .label {
  font-family: var(--font-basis-secondary);
}

html[data-theme="dark"][data-color="2026"]{
  --bg: #030712;
  --card: #0a1628;
  --text: #f0f9ff;
  --muted: #7dd3fc;
  --line: #1e3a5f;
  --surface-2: #0c1e35;
  --surface-3: #112d4e;
}

html[data-theme="light"][data-color="2026"]{
  --bg: #f0f9ff;
  --card: #ffffff;
  --text: #0c1929;
  --muted: #0369a1;
  --line: #bae6fd;
  --surface-2: #e0f2fe;
  --surface-3: #cfe8fc;
}

/* Futuristic gradient background */
html[data-color="2026"] body{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(56, 189, 248, 0.15), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(168, 85, 247, 0.15), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
  color: var(--text);
  position: relative;
}

/* Animated tech grid overlay */
@keyframes gridPulse {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.08; }
}

@keyframes neonGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6)) drop-shadow(0 0 20px rgba(168, 85, 247, 0.3));
  }
  50% { 
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.8)) drop-shadow(0 0 30px rgba(168, 85, 247, 0.5));
  }
}

@keyframes floatParticle {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}

html[data-color="2026"] body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridPulse 4s ease-in-out infinite;
}

html[data-color="2026"] body::after{
  content: "2026";
  position: fixed;
  bottom: 20px;
  right: 30px;
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -8px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(135deg, #38bdf8, #a855f7, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Container styling */
html[data-color="2026"] .container{
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
  box-shadow: 
    0 0 40px rgba(56, 189, 248, 0.1),
    0 25px 60px rgba(3, 7, 18, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.03), rgba(168, 85, 247, 0.03));
}

/* Card styling */
html[data-color="2026"] .card{
  border-color: rgba(56, 189, 248, 0.15);
  box-shadow: 
    0 10px 24px rgba(3, 7, 18, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Themed cards with neon glow */
html[data-color="2026"] .themed-card::before{
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(168, 85, 247, 0.15), rgba(6, 182, 212, 0.2));
  opacity: 1;
}

html[data-color="2026"] .themed-card{
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 
    0 0 30px rgba(56, 189, 248, 0.15),
    0 10px 40px rgba(3, 7, 18, 0.4);
}

html[data-color="2026"] .themed-card .label,
html[data-color="2026"] .themed-card .muted,
html[data-color="2026"] .themed-card #currentName,
html[data-color="2026"] .themed-card #currentRoom,
html[data-color="2026"] .themed-card #currentTimeRange,
html[data-color="2026"] .themed-card #elapsedOut,
html[data-color="2026"] .themed-card #leftOut,
html[data-color="2026"] .themed-card #nextName,
html[data-color="2026"] .themed-card #nextRoom,
html[data-color="2026"] .themed-card #nextTimeRange,
html[data-color="2026"] .themed-card #nextInOut,
html[data-color="2026"] .themed-card #untilOut{
  color: #e0f2fe !important;
}

/* Light mode text colors */
html[data-theme="light"][data-color="2026"] .label,
html[data-theme="light"][data-color="2026"] .muted,
html[data-theme="light"][data-color="2026"] .subclock,
html[data-theme="light"][data-color="2026"] .clock,
html[data-theme="light"][data-color="2026"] .countdown,
html[data-theme="light"][data-color="2026"] #dateOut,
html[data-theme="light"][data-color="2026"] #clockOut,
html[data-theme="light"][data-color="2026"] #elapsedOut,
html[data-theme="light"][data-color="2026"] #leftOut,
html[data-theme="light"][data-color="2026"] #currentName,
html[data-theme="light"][data-color="2026"] #nextName{
  color: #0c4a6e;
}

html[data-theme="light"][data-color="2026"] #clockOut{
  color: #0284c7;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  white-space: nowrap;
  text-shadow: 0 0 20px rgba(2, 132, 199, 0.3);
}

html[data-theme="light"][data-color="2026"] .pill{
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.15), rgba(168, 85, 247, 0.1));
  color: #0369a1;
}

html[data-theme="light"][data-color="2026"] #schoolState,
html[data-theme="light"][data-color="2026"] #tzOut,
html[data-theme="light"][data-color="2026"] #dateOut{
  color: #0284c7;
}

/* Dark mode text colors */
html[data-theme="dark"][data-color="2026"] .label,
html[data-theme="dark"][data-color="2026"] .muted,
html[data-theme="dark"][data-color="2026"] .subclock,
html[data-theme="dark"][data-color="2026"] .clock,
html[data-theme="dark"][data-color="2026"] .countdown,
html[data-theme="dark"][data-color="2026"] #dateOut,
html[data-theme="dark"][data-color="2026"] #clockOut,
html[data-theme="dark"][data-color="2026"] #elapsedOut,
html[data-theme="dark"][data-color="2026"] #leftOut,
html[data-theme="dark"][data-color="2026"] #currentName,
html[data-theme="dark"][data-color="2026"] #nextName{
  color: #7dd3fc;
}

html[data-theme="dark"][data-color="2026"] #clockOut{
  color: #38bdf8;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  white-space: nowrap;
  text-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
  animation: neonGlow 3s ease-in-out infinite;
}

html[data-theme="dark"][data-color="2026"] .pill{
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.2), rgba(168, 85, 247, 0.15));
  color: #7dd3fc;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.1);
}

html[data-theme="dark"][data-color="2026"] #schoolState,
html[data-theme="dark"][data-color="2026"] #tzOut,
html[data-theme="dark"][data-color="2026"] #dateOut{
  color: #38bdf8;
}

/* Progress bar with gradient */
html[data-color="2026"] .progress{
  background: linear-gradient(90deg, #38bdf8, #a855f7, #06b6d4);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

html[data-color="2026"] .progress-wrap{
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

/* Buttons with neon effect */
html[data-color="2026"] .btn{
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
  border: none;
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
  transition: all 0.3s ease;
}

html[data-color="2026"] .btn:hover{
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.5), 0 0 60px rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}

/* Icon buttons */
html[data-color="2026"] .icon-btn:hover{
  background: rgba(56, 189, 248, 0.15);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

/* Chips */
html[data-color="2026"] .chip[aria-pressed="true"]{
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(168, 85, 247, 0.2));
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

/* Schedule table */
html[data-color="2026"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), rgba(168, 85, 247, 0.05));
  box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.1);
}

html[data-color="2026"] .schedule th{
  border-bottom-color: rgba(56, 189, 248, 0.2);
}

/* Status badges */
html[data-color="2026"] .status--current{
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}

html[data-color="2026"] .status--next{
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

/* Dialogs/Modals */
html[data-color="2026"] dialog{
  border: 1px solid rgba(56, 189, 248, 0.2);
  box-shadow: 
    0 0 60px rgba(56, 189, 248, 0.15),
    0 25px 80px rgba(3, 7, 18, 0.6);
}

html[data-color="2026"] dialog::backdrop{
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(8px);
}

/* Scrollbar styling */
html[data-color="2026"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #38bdf8, #8b5cf6);
}

html[data-color="2026"] ::-webkit-scrollbar-track{
  background: rgba(56, 189, 248, 0.1);
}