/* UVA-branded theme for the Flask app — ported from webapp/_uva_theme.py */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Libre+Franklin:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --uva-blue:#232D4B; --uva-blue-mid:#2E3D66; --uva-blue-25:#C8CBD2;
  --uva-orange:#E57200; --uva-orange-mid:#F08020; --uva-orange-25:#F9DCBF;
  --uva-cyan:#009FDF; --uva-teal:#25CAD3;
  --bg-base:#FFFFFF; --bg-raised:#F7F8FA; --bg-elevated:#EEF0F4;
  --text-primary:#232D4B; --text-secondary:#4A5568; --text-muted:#718096;
  --border-subtle:rgba(35,45,75,.08); --border-normal:rgba(35,45,75,.15);
  --border-orange:rgba(229,114,0,.35);
  --font-serif:'Libre Caslon Text',Georgia,serif;
  --font-sans:'Libre Franklin','Helvetica Neue',sans-serif;
  --font-mono:'DM Mono','Courier New',monospace;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font-sans); background:var(--bg-base); color:var(--text-primary);
  display:flex; flex-direction:column; min-height:100vh;
}
a { color:var(--uva-orange); text-decoration:none; }
a:hover { color:var(--uva-orange-mid); }
h1,h2,h3 { font-family:var(--font-serif); color:var(--text-primary); letter-spacing:-.01em; }

/* Nav */
.nav {
  display:flex; align-items:center; gap:24px;
  background:var(--uva-blue); padding:12px 28px; border-bottom:2px solid var(--uva-orange);
}
.nav-brand { font-family:var(--font-serif); font-weight:700; font-size:18px; color:#fff; }
.nav-brand span { color:var(--uva-orange); }
.nav-links { display:flex; gap:18px; flex:1; }
.nav-links a { color:rgba(255,255,255,.85); font-size:14px; font-weight:500; }
.nav-links a:hover { color:var(--uva-orange); }
.nav-user { display:flex; align-items:center; gap:12px; }
.nav-who { color:var(--uva-blue-25); font-family:var(--font-mono); font-size:12px; }

/* Layout */
.wrap { flex:1; width:100%; max-width:1100px; margin:0 auto; padding:28px 28px 48px; }
.page-header { margin:8px 0 24px; }
.page-title { font-size:clamp(28px,4vw,42px); font-weight:700; margin:0 0 6px; }
.page-title .accent { color:var(--uva-orange); }
.page-sub { color:var(--text-secondary); font-weight:300; margin:0; }

/* Hero (login) */
.hero {
  background:linear-gradient(160deg,var(--uva-blue) 0%,#2E3D66 100%);
  color:#fff; padding:48px 28px; text-align:center;
}
.hero .badge {
  display:inline-block; background:rgba(229,114,0,.12); border:1px solid rgba(229,114,0,.32);
  border-radius:20px; padding:5px 18px; font-family:var(--font-mono); font-size:11px;
  color:var(--uva-orange); letter-spacing:.1em; margin-bottom:18px;
}
.hero h1 { color:#fff; font-size:clamp(30px,5vw,52px); margin:0; }
.hero h1 .accent { color:var(--uva-orange); }
.hero p { color:rgba(255,255,255,.8); font-weight:300; max-width:620px; margin:14px auto 0; }

/* Buttons */
.btn {
  display:inline-block; font-family:var(--font-sans); font-size:14px; font-weight:500;
  border-radius:6px; padding:10px 18px; border:1px solid var(--border-orange);
  background:transparent; color:var(--uva-orange); cursor:pointer; transition:all .18s;
}
.btn:hover { background:rgba(229,114,0,.12); border-color:var(--uva-orange); color:var(--uva-orange-mid); }
.btn-primary { background:var(--uva-orange); border-color:var(--uva-orange); color:#fff; }
.btn-primary:hover { background:var(--uva-orange-mid); color:#fff; }
.btn-ghost { border-color:var(--border-normal); color:var(--text-secondary); }
.btn-ghost:hover { border-color:var(--uva-orange); color:var(--uva-orange); background:transparent; }
.btn-danger { border-color:rgba(200,40,40,.4); color:#c22; }
.btn-danger:hover { background:rgba(200,40,40,.1); border-color:#c22; }
.btn-sm { font-size:12px; padding:6px 12px; }

/* Cards */
.card {
  background:var(--bg-raised); border:1px solid var(--border-subtle);
  border-radius:12px; padding:22px; margin-bottom:16px;
}
.card:hover { border-color:var(--border-orange); }
.card-title { font-family:var(--font-serif); font-size:16px; font-weight:700; margin:0 0 8px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }

/* Forms */
label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin:12px 0 5px; }
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea {
  width:100%; background:var(--bg-elevated); border:1px solid var(--border-normal);
  border-radius:6px; color:var(--text-primary); font-family:var(--font-sans);
  font-size:14px; padding:10px 12px;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--uva-orange); box-shadow:0 0 0 2px rgba(229,114,0,.2); outline:none;
}
input[type=file] { padding:8px; }
.form-row { display:flex; gap:14px; flex-wrap:wrap; }
.form-row > div { flex:1; min-width:120px; }
.help { font-size:12px; color:var(--text-muted); margin-top:4px; }
fieldset { border:1px solid var(--border-subtle); border-radius:10px; padding:14px 16px; margin:0 0 16px; }
legend { font-size:12px; color:var(--uva-orange); font-family:var(--font-mono); letter-spacing:.06em; padding:0 6px; }

/* Tables */
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border-subtle); }
th { color:var(--text-muted); font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
tbody tr:hover { background:var(--bg-elevated); }

/* Badges / status */
.badge { display:inline-block; font-family:var(--font-mono); font-size:10px; padding:2px 9px;
  border-radius:4px; letter-spacing:.04em; border:1px solid; }
.badge-orange { background:rgba(229,114,0,.12); border-color:rgba(229,114,0,.28); color:var(--uva-orange); }
.badge-cyan   { background:rgba(0,159,223,.10); border-color:rgba(0,159,223,.25); color:var(--uva-cyan); }
.badge-teal   { background:rgba(37,202,211,.10); border-color:rgba(37,202,211,.25); color:var(--uva-teal); }
.badge-dim    { background:rgba(106,122,155,.12); border-color:rgba(106,122,155,.22); color:var(--text-muted); }
.badge-green  { background:rgba(37,160,90,.12); border-color:rgba(37,160,90,.3); color:#2a9d5a; }
.badge-red    { background:rgba(200,40,40,.1); border-color:rgba(200,40,40,.3); color:#c22; }

/* Alert boxes */
.box { border-radius:9px; padding:14px 18px; margin-bottom:14px; font-size:14px; }
.box-warn    { background:rgba(229,114,0,.08); border:1px solid rgba(229,114,0,.25); color:var(--text-secondary); }
.box-info    { background:rgba(0,159,223,.07); border:1px solid rgba(0,159,223,.22); color:var(--text-secondary); }
.box-success { background:rgba(37,202,211,.07); border:1px solid rgba(37,202,211,.22); color:var(--text-secondary); }

/* Progress */
.progress { background:var(--bg-elevated); border-radius:6px; height:10px; overflow:hidden; margin:8px 0; }
.progress-bar { height:100%; background:var(--uva-orange); transition:width .4s; }

/* Steps */
.steps { counter-reset:step; }
.step-h { display:flex; align-items:center; gap:12px; margin:24px 0 10px; }
.step-h .num { width:26px; height:26px; border-radius:50%; background:var(--uva-orange); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.step-h .lbl { font-weight:600; }

/* Auth split */
.auth-tabs { display:flex; gap:8px; margin-bottom:18px; }
.auth-tab { flex:1; text-align:center; padding:10px; border-bottom:2px solid var(--border-subtle);
  cursor:pointer; color:var(--text-muted); font-weight:500; }
.auth-tab.active { color:var(--uva-orange); border-bottom-color:var(--uva-orange); }
.auth-card { max-width:420px; margin:32px auto; }
.mono { font-family:var(--font-mono); }
.muted { color:var(--text-muted); }
.right { text-align:right; }
.center { text-align:center; }

/* Footer */
.footer {
  background:var(--uva-blue); color:var(--uva-blue-25); border-top:2px solid var(--uva-orange);
  text-align:center; padding:22px; font-family:var(--font-mono); font-size:12px;
}
.footer strong { color:var(--uva-orange); font-family:var(--font-serif); }

/* Mobile nav toggle (hidden on desktop) */
.nav-toggle {
  display:none; background:transparent; border:1px solid rgba(255,255,255,.45);
  color:#fff; border-radius:6px; font-size:18px; line-height:1; padding:6px 11px; cursor:pointer;
}
.nav-toggle:hover { border-color:var(--uva-orange); color:var(--uva-orange); }

/* ── Responsive: tablets & phones ─────────────────────────────────────── */
@media (max-width:860px) {
  .nav { flex-wrap:wrap; gap:10px 16px; padding:12px 16px; }
  .nav-toggle { display:inline-block; margin-left:auto; }
  .nav-links, .nav-user { display:none; flex-basis:100%; }
  .nav-links { flex-direction:column; gap:0; }
  .nav-links a { padding:11px 2px; border-top:1px solid rgba(255,255,255,.12); }
  .nav-user { gap:14px; padding-top:8px; border-top:1px solid rgba(255,255,255,.12); }
  .nav.open .nav-links, .nav.open .nav-user { display:flex; }

  .wrap { padding:20px 16px 40px; }

  /* Wide tables scroll horizontally instead of breaking the layout */
  table { display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
}