/**
 * ============================================================
 * SWIMMING THEME - Precision / Rhythm / Speed / Endurance
 * ============================================================
 * Theme ID: swimming
 * Design: Clean aquatic geometry, strong horizontal flow,
 *         high contrast, disciplined athletic aesthetic
 * 
 * HOW THIS THEME FILE WORKS:
 * --------------------------
 * 1. All styles use html[data-color="swimming"] selector
 * 2. Dark/light variants use html[data-theme="dark"][data-color="swimming"]
 * 3. Pool lane background is in /css/swimbg.css (imported separately)
 * 
 * TO CREATE A SIMILAR THEME:
 * --------------------------
 * 1. Copy this file as /themes/yourtheme.css
 * 2. Replace all "swimming" with "yourtheme" in selectors
 * 3. Update color variables and styling
 * 4. Add 'yourtheme' to valid array in js/theme/colors.js
 * 5. Link CSS in index.html
 * 6. Add button in index.html preferences
 * ============================================================
 */

/* Fonts - Inter for everything, JetBrains Mono for timing data */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

html[data-color="swimming"]{ --brand-h:200; }

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

/* ===== CSS VARIABLES ===== */
html[data-color="swimming"] {
  --deep-blue: #0A2540;
  --lane-blue: #0F3A5F;
  --white: #FFFFFF;
  --light: #EAF6FF;
  --tile: #C7D3DD;
  --red: #D32F2F;
  --yellow: #FBC02D;
  --green: #388E3C;
  --black: #111111;
}

/* ===== CORE COLOR SYSTEM ===== */
/* Dark Theme (Primary) */
html[data-theme="dark"][data-color="swimming"]{
  --bg: #0A2540;                    /* Deep Pool Blue */
  --bg-primary: #0A2540;
  --bg-secondary: #0F3A5F;          /* Lane Blue */
  --bg-tertiary: #153A5A;
  --card: rgba(15, 58, 95, 0.9);
  --text: #EAF6FF;                  /* Surface Light */
  --text-primary: #EAF6FF;
  --text-secondary: #C7D3DD;
  --muted: #8FA8BC;
  --line: #C7D3DD;                  /* Pool Tile Gray */
  --surface-2: #0F3A5F;
  --surface-3: #153A5A;
  --accent-primary: #D32F2F;        /* Lane Red */
  --accent-secondary: #FBC02D;      /* Lane Yellow */
  --accent-success: #388E3C;        /* Lane Green */
  --border-subtle: rgba(199,211,221,0.2);
  --border-strong: #C7D3DD;
}

/* Light Theme Variant */
html[data-theme="light"][data-color="swimming"]{
  --bg: #EAF6FF;
  --bg-primary: #EAF6FF;
  --bg-secondary: #D4ECFF;
  --bg-tertiary: #C0E0FF;
  --card: rgba(255, 255, 255, 0.95);
  --text: #0A2540;
  --text-primary: #0A2540;
  --text-secondary: #0F3A5F;
  --muted: #4A6A85;
  --line: #0F3A5F;
  --surface-2: #D4ECFF;
  --surface-3: #C0E0FF;
  --accent-primary: #D32F2F;
  --accent-secondary: #C49000;
  --accent-success: #2D6E31;
  --border-subtle: rgba(10,37,64,0.15);
  --border-strong: #0F3A5F;
}

/* ===== TYPOGRAPHY ===== */
/* Headings: Inter 800, uppercase, tight tracking */
html[data-color="swimming"] h1,
html[data-color="swimming"] h2,
html[data-color="swimming"] h3,
html[data-color="swimming"] .onboard-title,
html[data-color="swimming"] .modal-header strong,
html[data-color="swimming"] .kiosk-modal-title,
html[data-color="swimming"] .label{
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Body: Inter 400-500, line-height 1.6 */
html[data-color="swimming"],
html[data-color="swimming"] body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  line-height: 1.6;
}

/* Data/Timing: JetBrains Mono */
html[data-color="swimming"] .clock,
html[data-color="swimming"] #clockOut,
html[data-color="swimming"] .countdown,
html[data-color="swimming"] #elapsedOut,
html[data-color="swimming"] #leftOut,
html[data-color="swimming"] #nextInOut,
html[data-color="swimming"] code,
html[data-color="swimming"] .kbd{
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600;
}

/* Clock styling */
html[data-theme="dark"][data-color="swimming"] #clockOut{
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"][data-color="swimming"] #clockOut{
  color: #0A2540;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700;
}

/* ===== CONTAINER ===== */
html[data-color="swimming"] .container{
  border: 2px solid #C7D3DD;
  border-radius: 4px;
  background: rgba(15, 58, 95, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"][data-color="swimming"] .container{
  background: rgba(255, 255, 255, 0.9);
  border-color: #0F3A5F;
  box-shadow: 0 4px 20px rgba(10, 37, 64, 0.15);
}

/* ===== CARDS ===== */
/* Sharp corners (0-4px), athletic feel */
html[data-color="swimming"] .card{
  border: 2px solid #C7D3DD;
  border-radius: 4px;
  background: rgba(15, 58, 95, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 140ms ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-color="swimming"] .card:hover{
  border-color: #D32F2F;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"][data-color="swimming"] .card{
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(10, 37, 64, 0.2);
  box-shadow: 0 2px 8px rgba(10, 37, 64, 0.1);
}

html[data-theme="light"][data-color="swimming"] .card:hover{
  border-color: #D32F2F;
  box-shadow: 0 4px 16px rgba(211, 47, 47, 0.15);
}

/* Themed cards - Lane Red accent */
html[data-color="swimming"] .themed-card::before{
  background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%);
}

html[data-color="swimming"] .themed-card{
  color: #FFFFFF;
  border: 2px solid #D32F2F;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(211, 47, 47, 0.2);
}

html[data-color="swimming"] .themed-card .label,
html[data-color="swimming"] .themed-card .muted,
html[data-color="swimming"] .themed-card #currentName,
html[data-color="swimming"] .themed-card #currentRoom,
html[data-color="swimming"] .themed-card #currentTimeRange,
html[data-color="swimming"] .themed-card #elapsedOut,
html[data-color="swimming"] .themed-card #leftOut,
html[data-color="swimming"] .themed-card #nextName,
html[data-color="swimming"] .themed-card #nextRoom,
html[data-color="swimming"] .themed-card #nextTimeRange,
html[data-color="swimming"] .themed-card #nextInOut,
html[data-color="swimming"] .themed-card #untilOut{
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== PILLS ===== */
html[data-color="swimming"] .pill{
  border: 2px solid #C7D3DD;
  background: rgba(15, 58, 95, 0.8);
  color: #EAF6FF;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75em;
  border-radius: 2px;
  transition: all 120ms ease-out;
}

html[data-color="swimming"] .pill:hover{
  border-color: #FBC02D;
  color: #FBC02D;
}

html[data-theme="light"][data-color="swimming"] .pill{
  background: rgba(10, 37, 64, 0.1);
  border-color: #0F3A5F;
  color: #0A2540;
}

/* ===== PROGRESS BAR ===== */
html[data-color="swimming"] .progress{
  background: linear-gradient(90deg, #D32F2F, #E53935);
  border-radius: 2px;
}

html[data-color="swimming"] .progress-wrap{
  background: rgba(15, 58, 95, 0.5);
  border: 2px solid #C7D3DD;
  border-radius: 2px;
}

/* ===== BUTTONS ===== */
/* Primary: Red background, white text */
html[data-color="swimming"] .btn{
  background: #D32F2F;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: all 120ms ease-out;
  box-shadow: 0 2px 6px rgba(211, 47, 47, 0.3);
}

html[data-color="swimming"] .btn:hover{
  background: #B71C1C;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
}

html[data-color="swimming"] .btn:active{
  transform: translateY(0);
}

/* Icon buttons */
html[data-color="swimming"] .icon-btn{
  border: 2px solid transparent;
  border-radius: 4px;
  transition: all 120ms ease-out;
}

html[data-color="swimming"] .icon-btn:hover{
  background: rgba(234, 246, 255, 0.12);
  border-color: #C7D3DD;
  transform: translateY(-2px);
}

/* ===== STATUS BADGES ===== */
html[data-color="swimming"] .status--current{
  background: #D32F2F;
  color: #FFFFFF;
  border: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 2px;
}

html[data-color="swimming"] .status--next{
  background: rgba(251, 192, 45, 0.15);
  color: #FBC02D;
  border: 2px solid rgba(251, 192, 45, 0.4);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 2px;
}

html[data-color="swimming"] .status--done{
  background: rgba(56, 142, 60, 0.15);
  color: #388E3C;
}

/* ===== CHIPS ===== */
html[data-color="swimming"] .chip{
  border: 2px solid #C7D3DD;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: 2px;
  background: transparent;
  transition: all 120ms ease-out;
}

html[data-color="swimming"] .chip[aria-pressed="true"]{
  background: rgba(211, 47, 47, 0.15);
  border-color: #D32F2F;
  color: #D32F2F;
}

html[data-color="swimming"] .chip:hover{
  border-color: #FBC02D;
  color: #FBC02D;
  transform: translateY(-2px);
}

html[data-theme="light"][data-color="swimming"] .chip{
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(10, 37, 64, 0.2);
}

html[data-theme="light"][data-color="swimming"] .chip[aria-pressed="true"]{
  background: rgba(211, 47, 47, 0.1);
  border-color: #D32F2F;
  color: #D32F2F;
}

/* ===== SCHEDULE TABLE ===== */
html[data-color="swimming"] .schedule th{
  border-bottom: 4px solid #D32F2F;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(15, 58, 95, 0.6);
}

html[data-color="swimming"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(211, 47, 47, 0.2), rgba(211, 47, 47, 0.08), transparent);
  border-left: 4px solid #D32F2F;
}

html[data-color="swimming"] .schedule td{
  border-bottom: 2px solid rgba(199, 211, 221, 0.2);
  font-family: 'JetBrains Mono', monospace;
}

html[data-color="swimming"] .schedule tbody tr{
  background: rgba(15, 58, 95, 0.4);
  transition: all 120ms ease-out;
}

html[data-color="swimming"] .schedule tbody tr:hover{
  background: rgba(15, 58, 95, 0.6);
  transform: translateY(-1px);
}

html[data-theme="light"][data-color="swimming"] .schedule th{
  color: #0A2540;
  background: rgba(10, 37, 64, 0.05);
}

html[data-theme="light"][data-color="swimming"] .schedule td{
  border-bottom-color: rgba(10, 37, 64, 0.1);
}

html[data-theme="light"][data-color="swimming"] .schedule tbody tr{
  background: rgba(255, 255, 255, 0.6);
}

/* ===== DIALOGS/MODALS ===== */
html[data-color="swimming"] dialog{
  border: 2px solid #C7D3DD;
  border-radius: 4px;
  background: rgba(10, 37, 64, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"][data-color="swimming"] dialog{
  background: rgba(234, 246, 255, 0.98);
  border-color: #0F3A5F;
  box-shadow: 0 16px 48px rgba(10, 37, 64, 0.2);
}

html[data-color="swimming"] dialog::backdrop{
  background: rgba(10, 37, 64, 0.9);
}

html[data-color="swimming"] .modal-header{
  border-bottom: 2px solid #C7D3DD;
}

html[data-color="swimming"] .modal-header strong{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[data-theme="light"][data-color="swimming"] .modal-header strong{
  color: #0A2540;
}

/* ===== ONBOARDING ===== */
html[data-color="swimming"] .onboard-title{
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[data-color="swimming"] .onboard-card{
  border: 2px solid #C7D3DD;
  background: rgba(10, 37, 64, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}

html[data-theme="light"][data-color="swimming"] .onboard-card{
  background: rgba(234, 246, 255, 0.95);
  border-color: #0F3A5F;
}

html[data-theme="light"][data-color="swimming"] .onboard-title{
  color: #0A2540 !important;
}

/* ===== INPUTS ===== */
html[data-color="swimming"] input,
html[data-color="swimming"] select,
html[data-color="swimming"] textarea{
  border: 2px solid #C7D3DD;
  border-radius: 2px;
  background: rgba(15, 58, 95, 0.8);
  color: #EAF6FF;
  font-family: 'Inter', sans-serif;
  transition: all 120ms ease-out;
}

html[data-color="swimming"] input:focus,
html[data-color="swimming"] select:focus,
html[data-color="swimming"] textarea:focus{
  border-color: #D32F2F;
  outline: none;
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
}

html[data-theme="light"][data-color="swimming"] input,
html[data-theme="light"][data-color="swimming"] select,
html[data-theme="light"][data-color="swimming"] textarea{
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(10, 37, 64, 0.25);
  color: #0A2540;
}

/* ===== TABS ===== */
html[data-color="swimming"] .tabs{
  border-bottom: 2px solid #C7D3DD;
}

html[data-color="swimming"] .tab{
  color: #EAF6FF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all 120ms ease-out;
}

html[data-color="swimming"] .tab:hover{
  color: #FBC02D;
}

html[data-color="swimming"] .tab[aria-selected="true"]{
  color: #FFFFFF;
  border-bottom: 4px solid #D32F2F;
}

/* ===== QUICK ACTIONS ===== */
html[data-color="swimming"] .quick-action{
  border: 2px solid #C7D3DD;
  background: transparent;
  color: #EAF6FF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: 2px;
  transition: all 120ms ease-out;
}

html[data-color="swimming"] .quick-action:hover{
  background: rgba(234, 246, 255, 0.12);
  border-color: #EAF6FF;
  transform: translateY(-2px);
}

html[data-color="swimming"] .quick-action.danger{
  border-color: rgba(211, 47, 47, 0.5);
  color: #D32F2F;
}

html[data-color="swimming"] .quick-action.danger:hover{
  background: rgba(211, 47, 47, 0.1);
  border-color: #D32F2F;
}

/* ===== SCROLLBAR ===== */
html[data-color="swimming"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #D32F2F, #B71C1C);
  border-radius: 2px;
}

html[data-color="swimming"] ::-webkit-scrollbar-track{
  background: rgba(15, 58, 95, 0.5);
}

/* ===== KIOSK MODE ===== */
html[data-color="swimming"] .kiosk-modal-content{
  border: 2px solid #C7D3DD;
  background: rgba(10, 37, 64, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 4px;
}

html[data-color="swimming"] .kiosk-modal-title{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[data-color="swimming"] .kiosk-key{
  background: rgba(15, 58, 95, 0.9);
  border: 2px solid #C7D3DD;
  color: #EAF6FF;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  border-radius: 4px;
  transition: all 120ms ease-out;
}

html[data-color="swimming"] .kiosk-key:hover{
  background: #D32F2F;
  border-color: #D32F2F;
  color: #FFFFFF;
  transform: translateY(-2px);
}

html[data-color="swimming"] .kiosk-pin-dot{
  background: rgba(199, 211, 221, 0.2);
  border: 2px solid #C7D3DD;
  border-radius: 2px;
}

html[data-color="swimming"] .kiosk-pin-dot.filled{
  background: #D32F2F;
  border-color: #D32F2F;
}

/* ===== EDITOR ===== */
html[data-color="swimming"] .blocks-container{
  border: 2px dashed #C7D3DD;
  background: rgba(15, 58, 95, 0.4);
  border-radius: 4px;
}

/* ===== DAY OVER MESSAGE ===== */
html[data-color="swimming"] .dayover-message{
  border: 2px solid #C7D3DD;
  background: rgba(10, 37, 64, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 4px;
}

/* ===== LINKS ===== */
html[data-color="swimming"] a{
  color: #FBC02D;
  text-decoration: none;
  transition: all 120ms ease-out;
}

html[data-color="swimming"] a:hover{
  color: #FFFFFF;
  text-decoration: underline;
}

html[data-theme="light"][data-color="swimming"] a{
  color: #0A2540;
}

html[data-theme="light"][data-color="swimming"] a:hover{
  color: #D32F2F;
}

/* ===== HELP TEXT ===== */
html[data-color="swimming"] .help{
  color: #C7D3DD;
}

/* ===== KBD ===== */
html[data-color="swimming"] .kbd{
  background: rgba(15, 58, 95, 0.9);
  border: 2px solid #C7D3DD;
  color: #EAF6FF;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

/* ===== SELECTION ===== */
html[data-color="swimming"] ::selection{
  background: rgba(211, 47, 47, 0.4);
  color: #FFFFFF;
}

/* ===== MUTED TEXT COLORS ===== */
html[data-theme="dark"][data-color="swimming"] .label{
  color: #FFFFFF;
  font-size: 0.8em;
}

html[data-theme="dark"][data-color="swimming"] .muted,
html[data-theme="dark"][data-color="swimming"] #dateOut{
  color: #C7D3DD;
}

html[data-theme="dark"][data-color="swimming"] #schoolState{
  color: #388E3C;
  border-color: rgba(56, 142, 60, 0.4);
}

html[data-theme="light"][data-color="swimming"] .label{
  color: #0A2540;
}

html[data-theme="light"][data-color="swimming"] .muted,
html[data-theme="light"][data-color="swimming"] #dateOut{
  color: #4A6A85;
}

/* ===== MOTION - Fast, athletic, no bounce ===== */
/* Duration: 100-160ms, easing: linear or ease-out */
/* Effects: color shift, 2px translate only */