/* ==============================================================================
   THE WINDWARD SCHOOL DESIGN SYSTEM (app/static/style.css)
   ==============================================================================
   🧒 5TH-GRADE ANALOGY:
   If HTML is the wooden skeleton of a house, then CSS is the interior decorator!
   It picks the paint colors, the comfy furniture, the glowing lamps, and the carpets.
   
   This stylesheet styles our entire app using the official branding colors of
   The Windward School:
     - Windward Navy: #003865 (the deep, rich midnight blue of the school crest)
     - Windward Gold: #FFD100 (the bright, energetic gold for buttons and accents)
   
   It uses modern CSS tokens (:root variables) so any color or border radius
   can be customized in one place.
   ============================================================================== */

:root {
  --bg: #020b18;
  --bg-gradient: radial-gradient(circle at top right, #001c3e 0%, #010c1c 45%, #000711 100%);
  --panel: rgba(0, 27, 61, 0.65);
  --panel-hover: rgba(0, 38, 85, 0.75);
  --panel-border: rgba(255, 209, 0, 0.16);
  --panel-border-subtle: rgba(255, 255, 255, 0.08);
  --panel-b: rgba(255, 255, 255, 0.1);
  --text: #f0f4fa;
  --text-bright: #ffffff;
  --muted: #8fa5c2;
  --windward-navy: #003865;
  --windward-navy-dark: #001f3d;
  --windward-gold: #ffd100;
  --windward-gold-hover: #f5b800;
  --windward-gold-glow: rgba(255, 209, 0, 0.35);
  --accent: #ffd100;
  --accent-blue: #3b82f6;
  --accent-2: #38bdf8;
  --ok: #22c55e;
  --warn: #ffd100;
  --bad: #f43f5e;
  --radius: 14px;
  --radius-sm: 8px;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  font: 15px/1.6 var(--font-sans);
  position: relative;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

/* Ambient glow spheres matching Windward Gold & Windward Navy */
.glow {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.glow-gold {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(255, 209, 0, 0.18) 0%, rgba(255, 209, 0, 0) 70%);
  filter: blur(100px);
  top: -180px;
  right: -120px;
}
.glow-navy {
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(0, 56, 101, 0.45) 0%, rgba(0, 24, 56, 0) 70%);
  filter: blur(120px);
  bottom: -200px;
  left: -200px;
}

a {
  color: var(--windward-gold);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: #fff;
  text-decoration: underline;
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: rgba(0, 38, 85, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.15em 0.45em;
  border-radius: 6px;
  color: #dbeafe;
}

h1 {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0.2em 0 0.35em;
  color: var(--text-bright);
}
h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.6em;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}
.lead {
  color: var(--muted);
  max-width: 66ch;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}
.muted { color: var(--muted); }
.white { color: #fff; }

/* Top navigation bar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 36px;
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(1, 14, 32, 0.88);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text-bright);
  text-decoration: none !important;
}
.brand-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 245px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(255, 209, 0, 0.45));
  transition: transform 0.2s ease;
}
.brand:hover .brand-logo {
  transform: scale(1.03);
}
.brand-text strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.brand-text small {
  display: block;
  color: var(--windward-gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
}


.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav a {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.nav a:hover {
  color: var(--windward-gold);
  text-decoration: none;
}
.inline { display: inline; margin: 0; }
.link {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}
.link:hover { color: #f43f5e; }

/* Main layout */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 24px 64px;
}

.foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0 24px 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 40px;
}
.foot-brand {
  font-weight: 700;
  color: #dbeafe;
  margin-bottom: 4px;
  padding-top: 24px;
}
.foot-sub {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Cards & containers */
.card {
  background: var(--panel);
  border: 1px solid var(--panel-border-subtle);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 11, 26, 0.45);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.card:hover {
  border-color: rgba(255, 209, 0, 0.28);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}
.grid .card {
  margin: 0;
}
.grid .card:hover {
  border-color: rgba(255, 209, 0, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 11, 26, 0.6);
}
.card-featured {
  border-left: 4px solid var(--windward-gold);
  background: linear-gradient(180deg, rgba(255, 209, 0, 0.08) 0%, rgba(0, 31, 68, 0.75) 100%);
  border-top-color: rgba(255, 209, 0, 0.25);
  border-right-color: rgba(255, 209, 0, 0.2);
  border-bottom-color: rgba(255, 209, 0, 0.2);
}
.login-card {
  max-width: 420px;
  margin: 9vh auto 0;
  border-top: 3px solid var(--windward-gold);
}

/* Forms & inputs */
.stack { display: flex; flex-direction: column; gap: 12px; }
label {
  font-size: 0.88rem;
  color: #c5d4e6;
  font-weight: 600;
}
input[type=text], input[type=password], input:not([type]) {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 14, 33, 0.6);
  color: var(--text-bright);
  font: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus {
  border-color: var(--windward-gold);
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.22);
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text);
  font-size: 0.94rem;
  cursor: pointer;
}
.check input {
  margin-top: 4px;
  accent-color: var(--windward-gold);
}

/* Buttons - Windward Gold & Midnight Navy System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 43, 97, 0.6);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.btn:hover {
  background: rgba(0, 56, 128, 0.85);
  border-color: rgba(255, 209, 0, 0.4);
  text-decoration: none;
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-primary {
  border: none;
  background: linear-gradient(135deg, #ffd100 0%, #e6a800 100%);
  color: #00142b !important;
  font-weight: 800;
  box-shadow: 0 6px 20px var(--windward-gold-glow);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #ffe04d 0%, #f0b400 100%);
  box-shadow: 0 8px 26px rgba(255, 209, 0, 0.55);
  transform: translateY(-1px);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #dbeafe;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 209, 0, 0.35);
  color: #ffffff;
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.input-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #011229;
  color: var(--text-bright);
  font: inherit;
  outline: none;
}
.input-select:focus {
  border-color: var(--windward-gold);
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.22);
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.scheduler-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
}
.scheduler-config {
  margin-top: 14px;
  border-top: 1px solid var(--panel-b);
  padding-top: 12px;
}
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 14px; }
.ml-1 { margin-left: 8px; }
.ml-2 { margin-left: 12px; }
.small { font-size: 0.84rem; }

/* Flashes / Alerts */
.flash {
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 18px;
  border: 1px solid;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.flash-info {
  background: rgba(0, 56, 101, 0.5);
  border-color: rgba(255, 209, 0, 0.4);
  color: #fff;
}
.flash-warn {
  background: rgba(255, 209, 0, 0.12);
  border-color: rgba(255, 209, 0, 0.45);
  color: #ffd100;
}
.flash-error {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.45);
  color: #fca5a5;
}

/* Key Value details */
.kv {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 10px 18px;
  margin: 0;
}
.kv dt {
  color: var(--muted);
  font-weight: 600;
}
.kv dd { margin: 0; }

.checks {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}
.checks li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.92rem;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.ok .dot {
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
}
.bad .dot {
  background: var(--bad);
  box-shadow: 0 0 10px var(--bad);
}

.run-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Stat cards */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 16px 0 22px;
}
.stat {
  background: rgba(0, 24, 56, 0.6);
  border: 1px solid var(--panel-b);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}
.stat span {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 4px;
}
.stat.accent span { color: var(--windward-gold); }
.stat.danger span { color: var(--bad); }

.commit-card {
  border-color: rgba(255, 209, 0, 0.4);
  background: linear-gradient(160deg, rgba(255, 209, 0, 0.08) 0%, rgba(0, 31, 68, 0.7) 100%);
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.table th {
  text-align: left;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-b);
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.table tr:hover td {
  background: rgba(0, 56, 128, 0.2);
}
.scroll {
  overflow: auto;
  max-height: 560px;
}

/* Status Badges / Pills */
.pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-b);
  letter-spacing: 0.02em;
}
.pill-succeeded, .pill-set, .pill-update {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.35);
}
.pill-running, .pill-queued {
  color: var(--windward-gold);
  background: rgba(255, 209, 0, 0.12);
  border-color: rgba(255, 209, 0, 0.4);
  animation: pulse 1.4s infinite;
}
.pill-failed, .pill-blocked, .pill-interrupted {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.12);
  border-color: rgba(251, 113, 133, 0.4);
}
.pill-clear {
  color: var(--windward-gold);
  background: rgba(255, 209, 0, 0.12);
  border-color: rgba(255, 209, 0, 0.4);
}

@keyframes pulse { 50% { opacity: 0.5; } }

.tabs {
  display: flex;
  gap: 6px;
  background: rgba(0, 14, 33, 0.6);
  padding: 5px;
  border-radius: 10px;
  border: 1px solid var(--panel-b);
}
.tabs a {
  padding: 6px 16px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.tabs a.on {
  background: var(--windward-navy);
  color: #fff;
  border: 1px solid rgba(255, 209, 0, 0.3);
}
.tabs a:hover {
  text-decoration: none;
  color: #fff;
}

.log {
  font-family: var(--mono);
  font-size: 0.82rem;
  background: rgba(0, 11, 26, 0.8);
  border: 1px solid var(--panel-b);
  border-radius: 10px;
  padding: 16px;
  margin: 0;
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #dbeafe;
}

details summary {
  cursor: pointer;
  font-weight: 700;
  color: #dbeafe;
}
.plain {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  max-height: 240px;
  overflow: auto;
}

@media (max-width: 680px) {
  .topbar { padding: 14px 18px; }
  .container { padding: 24px 16px 48px; }
  .kv { grid-template-columns: 1fr; }
}