/* Attack on Titan Theme - Industrial/Military + Stone + Smoke */
/* Design: Cold neutrals, constrained red accents, sharp typography, low-radius UI */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html[data-color="aot"]{ --brand-h:0; }

/* Core Palette - Dark Theme */
html[data-theme="dark"][data-color="aot"]{
  --bg: #0b0d10;                    /* Near-black slate */
  --card: #11151b;                  /* Surface 1 */
  --text: #e8edf6;                  /* Light text */
  --muted: #8b95a7;                 /* Muted gray */
  --line: #2a3340;                  /* Border */
  --surface-2: #161c24;
  --surface-3: #1c232e;
  --accent: #c0171f;                /* Signal red */
  --accent-2: #ff3b30;              /* Hot highlight */
  --wall-1: #c9c1b3;                /* Wall limestone */
  --wall-2: #9b948a;
  --rust-1: #8b4a2f;                /* Rust/metal */
  --rust-2: #5a3224;
  --ok: #2fbf71;
  --warn: #ffb020;
}

/* Core Palette - Light Theme */
html[data-theme="light"][data-color="aot"]{
  --bg: #e8edf6;
  --card: #ffffff;
  --text: #0b0d10;
  --muted: #5a6270;
  --line: #c9c1b3;
  --surface-2: #f0f2f5;
  --surface-3: #e4e7ec;
  --accent: #c0171f;
  --accent-2: #ff3b30;
  --wall-1: #9b948a;
  --wall-2: #7a746c;
  --rust-1: #8b4a2f;
  --rust-2: #5a3224;
  --ok: #2fbf71;
  --warn: #ffb020;
}

/* Typography - Sharp, military feel */
html[data-color="aot"]{
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html[data-color="aot"] .clock,
html[data-color="aot"] #clockOut{
  font-family: 'Inter', var(--font-sans) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

html[data-color="aot"] h1,
html[data-color="aot"] h2,
html[data-color="aot"] h3,
html[data-color="aot"] .modal-header strong,
html[data-color="aot"] .onboard-title{
  font-family: 'Inter', var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
}

html[data-color="aot"] .label,
html[data-color="aot"] .muted{
  font-family: 'Inter', var(--font-sans);
  font-weight: 500;
}

html[data-color="aot"] .countdown,
html[data-color="aot"] #elapsedOut,
html[data-color="aot"] #leftOut,
html[data-color="aot"] #nextInOut{
  font-family: var(--font-mono) !important;
  font-weight: 600;
}

/* Background - Radial gradient with smoky overlay + background image */
html[data-color="aot"] body{
  background: 
    radial-gradient(1200px 600px at 20% 10%, rgba(192, 23, 31, 0.18), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(139, 74, 47, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(11, 13, 16, 0.85), rgba(7, 9, 12, 0.9)),
    url('../backrounds/attackontitan-backround.avif') center/cover no-repeat fixed;
}

html[data-theme="light"][data-color="aot"] body{
  background: 
    radial-gradient(1200px 600px at 20% 10%, rgba(192, 23, 31, 0.08), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(139, 74, 47, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(232, 237, 246, 0.92), rgba(221, 226, 235, 0.95)),
    url('../backrounds/attackontitan-backround.avif') center/cover no-repeat fixed;
}

/* Container - Surface with highlight */
html[data-color="aot"] .container{
  border: 1px solid #2a3340;
  border-radius: 14px;
  background: #11151b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding-top: 32px;
  padding-bottom: 32px;
  position: relative;
}

html[data-color="aot"] .container::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
  border-radius: 14px 14px 0 0;
}

html[data-theme="light"][data-color="aot"] .container{
  background: #ffffff;
  border-color: #c9c1b3;
}

/* Cards - Surface with top highlight */
html[data-color="aot"] .card{
  border: 1px solid #2a3340;
  border-radius: 14px;
  background: #11151b;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

html[data-color="aot"] .card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

html[data-color="aot"] .card:hover{
  border-color: rgba(192, 23, 31, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"][data-color="aot"] .card{
  background: #ffffff;
  border-color: #c9c1b3;
}

/* Themed cards - Red accent glow */
html[data-color="aot"] .themed-card::before{
  background: linear-gradient(135deg, rgba(192, 23, 31, 0.9), rgba(139, 74, 47, 0.85));
}

html[data-color="aot"] .themed-card{
  color: #e8edf6;
  border: 1px solid rgba(192, 23, 31, 0.55);
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(192, 23, 31, 0.15);
}

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

/* Clock styling */
html[data-theme="dark"][data-color="aot"] #clockOut{
  color: #e8edf6;
  text-shadow: 0 0 40px rgba(192, 23, 31, 0.3);
}

html[data-theme="dark"][data-color="aot"] .label,
html[data-theme="dark"][data-color="aot"] .muted,
html[data-theme="dark"][data-color="aot"] #dateOut,
html[data-theme="dark"][data-color="aot"] #schoolState{
  color: #8b95a7;
}

html[data-theme="light"][data-color="aot"] #clockOut{
  color: #0b0d10;
}

html[data-theme="light"][data-color="aot"] .label,
html[data-theme="light"][data-color="aot"] .muted,
html[data-theme="light"][data-color="aot"] #dateOut,
html[data-theme="light"][data-color="aot"] #schoolState{
  color: #5a6270;
}

/* Pills - Wall limestone accent */
html[data-color="aot"] .pill{
  border: 1px solid #2a3340;
  background: #161c24;
  color: #c9c1b3;
  font-family: 'Inter', var(--font-sans);
  font-weight: 600;
  border-radius: 8px;
}

html[data-theme="light"][data-color="aot"] .pill{
  background: #f0f2f5;
  color: #5a6270;
  border-color: #c9c1b3;
}

/* Progress bar - Signal red */
html[data-color="aot"] .progress{
  background: linear-gradient(90deg, #c0171f, #8b4a2f);
  box-shadow: 0 0 10px rgba(192, 23, 31, 0.4);
}

html[data-color="aot"] .progress-wrap{
  background: #161c24;
  border: 1px solid #2a3340;
  border-radius: 6px;
}

/* Buttons - Dark base with red edge glow on hover */
html[data-color="aot"] .btn{
  background: #161c24;
  color: #e8edf6;
  border: 1px solid rgba(192, 23, 31, 0.55);
  font-family: 'Inter', var(--font-sans);
  font-weight: 600;
  border-radius: 12px;
  transition: all 200ms ease;
}

html[data-color="aot"] .btn:hover{
  box-shadow: 0 0 0 4px rgba(192, 23, 31, 0.14), 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Secondary buttons - Icon buttons */
html[data-color="aot"] .icon-btn{
  border: 1px solid transparent;
  transition: all 200ms ease;
  border-radius: 10px;
}

html[data-color="aot"] .icon-btn:hover{
  background: #161c24;
  border-color: #2a3340;
}

/* Status badges */
html[data-color="aot"] .status--current{
  background: #c0171f;
  color: #e8edf6;
  border: 1px solid rgba(255, 59, 48, 0.3);
  font-family: 'Inter', var(--font-sans);
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(192, 23, 31, 0.3);
}

html[data-color="aot"] .status--next{
  background: #161c24;
  color: #c9c1b3;
  border: 1px solid #2a3340;
  font-family: 'Inter', var(--font-sans);
  font-weight: 600;
  border-radius: 8px;
}

html[data-color="aot"] .status--done{
  background: rgba(42, 51, 64, 0.5);
  color: #8b95a7;
  text-decoration: line-through;
}

/* Chips */
html[data-color="aot"] .chip{
  border: 1px solid #2a3340;
  font-family: 'Inter', var(--font-sans);
  transition: all 200ms ease;
  border-radius: 10px;
  background: transparent;
}

html[data-color="aot"] .chip[aria-pressed="true"]{
  background: rgba(192, 23, 31, 0.15);
  border-color: rgba(192, 23, 31, 0.55);
  color: #ff3b30;
}

html[data-color="aot"] .chip:hover{
  border-color: #8b95a7;
  color: #e8edf6;
}

/* Schedule table */
html[data-color="aot"] .schedule{
  font-family: 'Inter', var(--font-sans);
}

html[data-color="aot"] .schedule th{
  border-bottom: 2px solid #c0171f;
  color: #c9c1b3;
  font-family: 'Inter', var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

html[data-color="aot"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(192, 23, 31, 0.12), transparent);
  border-left: 3px solid #c0171f;
}

html[data-color="aot"] .schedule td{
  border-bottom: 1px solid rgba(42, 51, 64, 0.5);
}

/* Dialogs/Modals */
html[data-color="aot"] dialog{
  border: 1px solid #2a3340;
  border-radius: 14px;
  background: #11151b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

html[data-color="aot"] dialog::backdrop{
  background: rgba(11, 13, 16, 0.9);
}

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

html[data-color="aot"] .modal-header strong{
  font-family: 'Inter', var(--font-sans);
  color: #e8edf6;
}

/* Onboarding */
html[data-color="aot"] .onboard-title{
  font-family: 'Inter', var(--font-sans) !important;
  color: #e8edf6 !important;
}

html[data-color="aot"] .onboard-card{
  border: 1px solid #2a3340;
  background: #11151b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border-radius: 14px;
}

/* Scrollbar */
html[data-color="aot"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #2a3340, #161c24);
  border: 1px solid #0b0d10;
  border-radius: 6px;
}

html[data-color="aot"] ::-webkit-scrollbar-track{
  background: #0b0d10;
}

/* Section alternating */
html[data-color="aot"] section:nth-child(odd){
  background: rgba(17, 21, 27, 0.5);
}

html[data-color="aot"] section:nth-child(even){
  background: rgba(22, 28, 36, 0.5);
}

/* Navigation elements */
html[data-color="aot"] .tabs,
html[data-color="aot"] nav{
  border-bottom: 1px solid #2a3340;
}

html[data-color="aot"] .tab{
  color: #8b95a7;
  font-family: 'Inter', var(--font-sans);
  transition: all 200ms ease;
}

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

html[data-color="aot"] .tab[aria-selected="true"]{
  color: #e8edf6;
  border-bottom: 2px solid #c0171f;
}

/* Quick action buttons */
html[data-color="aot"] .quick-action{
  border: 1px solid #2a3340;
  background: transparent;
  color: #8b95a7;
  font-family: 'Inter', var(--font-sans);
  transition: all 200ms ease;
  border-radius: 10px;
}

html[data-color="aot"] .quick-action:hover{
  background: #161c24;
  border-color: #8b95a7;
  color: #e8edf6;
}

html[data-color="aot"] .quick-action.danger{
  border-color: rgba(192, 23, 31, 0.55);
  color: #c0171f;
}

html[data-color="aot"] .quick-action.danger:hover{
  background: rgba(192, 23, 31, 0.1);
  box-shadow: 0 0 0 4px rgba(192, 23, 31, 0.14);
}

/* Tips section */
html[data-color="aot"] section:last-of-type{
  border: 1px solid #2a3340;
  border-radius: 14px;
}

/* Kiosk mode */
html[data-color="aot"] .kiosk-modal-content{
  border: 1px solid rgba(192, 23, 31, 0.55);
  background: #0b0d10;
  border-radius: 14px;
}

html[data-color="aot"] .kiosk-modal-title{
  font-family: 'Inter', var(--font-sans);
  color: #e8edf6;
}

html[data-color="aot"] .kiosk-key{
  background: #161c24;
  border: 1px solid #2a3340;
  color: #e8edf6;
  font-family: var(--font-mono);
  transition: all 200ms ease;
  border-radius: 10px;
}

html[data-color="aot"] .kiosk-key:hover{
  background: #c0171f;
  border-color: #ff3b30;
}

html[data-color="aot"] .kiosk-pin-dot{
  background: #2a3340;
  border-color: #c0171f;
}

html[data-color="aot"] .kiosk-pin-dot.filled{
  background: #c0171f;
  box-shadow: 0 0 8px rgba(192, 23, 31, 0.5);
}

/* Editor blocks */
html[data-color="aot"] .blocks-container{
  border: 1px dashed #2a3340;
  background: rgba(22, 28, 36, 0.5);
  border-radius: 12px;
}

/* Day over message */
html[data-color="aot"] .dayover-message{
  border: 1px solid rgba(192, 23, 31, 0.55);
  background: linear-gradient(135deg, #0b0d10, #11151b);
  font-family: 'Inter', var(--font-sans);
  border-radius: 14px;
}

/* Input fields */
html[data-color="aot"] input,
html[data-color="aot"] select,
html[data-color="aot"] textarea{
  border: 1px solid #2a3340;
  border-radius: 10px;
  background: #161c24;
  color: #e8edf6;
  font-family: 'Inter', var(--font-sans);
}

html[data-color="aot"] input:focus,
html[data-color="aot"] select:focus,
html[data-color="aot"] textarea:focus{
  border-color: rgba(192, 23, 31, 0.55);
  outline: none;
  box-shadow: 0 0 0 4px rgba(192, 23, 31, 0.14);
}

html[data-theme="light"][data-color="aot"] input,
html[data-theme="light"][data-color="aot"] select,
html[data-theme="light"][data-color="aot"] textarea{
  background: #ffffff;
  color: #0b0d10;
}

/* Selection */
html[data-color="aot"] ::selection{
  background: rgba(192, 23, 31, 0.3);
  color: #e8edf6;
}

/* Links - Muted by default, brighten on hover */
html[data-color="aot"] a{
  color: #8b95a7;
  text-decoration: none;
  transition: all 200ms ease;
}

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

/* Help text */
html[data-color="aot"] .help{
  color: #8b95a7;
  font-family: 'Inter', var(--font-sans);
}

/* Kbd elements */
html[data-color="aot"] .kbd{
  background: #161c24;
  border: 1px solid #2a3340;
  color: #c9c1b3;
  font-family: var(--font-mono);
  border-radius: 6px;
}