/* ==========================================================
   Athlevia — "Cockpit" skin (v1.5)
   Futuristic, simple: deep surfaces, brand gradient (blue -> teal),
   glass bars, techy numerals, colour-coded inputs.
   Loaded after app.css; only overrides look & feel.
   ========================================================== */
:root{
  --display:"Space Grotesk", var(--font);
  --bg:#F3F5FA; --surface:#FFFFFF; --surface-2:#F6F8FC; --sunk:#EDF0F7;
  --line:#E3E7F0; --line-2:#D2D8E6;
  --grad:linear-gradient(135deg,#2B407F 0%,#3466D6 55%,#2CB3C1 100%);
  --grad-soft:linear-gradient(135deg,rgba(52,102,214,.10),rgba(44,179,193,.10));
  --glow:0 10px 30px -8px rgba(52,102,214,.45);
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(21,25,50,.08);
  --card-shadow:0 1px 2px rgba(21,25,50,.04), 0 12px 32px -18px rgba(21,25,50,.18);
  --r:20px; --r-sm:14px;
  --topbar-bg:rgba(243,245,250,.78);
  --s1:#D93B3F; --s2:#E8742A; --s3:#D9A400; --s4:#5BB36A; --s5:#14945F;   /* 1–5 wellness scale */
}
:root[data-theme="dark"]{
  --bg:#060914; --surface:#0E1324; --surface-2:#131A30; --sunk:#18203A;
  --line:rgba(148,163,214,.12); --line-2:rgba(148,163,214,.22);
  --grad:linear-gradient(135deg,#5878F0 0%,#4C9BEF 50%,#45D1DC 100%);
  --grad-soft:linear-gradient(135deg,rgba(88,120,240,.16),rgba(69,209,220,.12));
  --glow:0 10px 34px -8px rgba(76,155,239,.55);
  --glass:rgba(14,19,36,.70);
  --glass-line:rgba(148,163,214,.14);
  --card-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 16px 40px -24px rgba(0,0,0,.8);
  --topbar-bg:rgba(6,9,20,.72);
  --s1:#FF6B6E; --s2:#FF9A55; --s3:#F2C744; --s4:#7FD48A; --s5:#43C98F;
}

/* ---------- canvas ---------- */
body{background:var(--bg)}
body::before{ /* faint cockpit glow at the top */
  content:""; position:fixed; inset:0 0 auto 0; height:420px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 70% at 15% 0%, rgba(52,102,214,.12), transparent 70%),
             radial-gradient(45% 60% at 95% 5%, rgba(44,179,193,.12), transparent 70%);
}
:root[data-theme="dark"] body::before{
  background:radial-gradient(60% 70% at 15% 0%, rgba(88,120,240,.20), transparent 70%),
             radial-gradient(45% 60% at 95% 5%, rgba(69,209,220,.14), transparent 70%);
}
h1,h2,h3,.brand-name{font-family:var(--display); letter-spacing:-.02em}
.ph h1,.hero h1{font-weight:700; letter-spacing:-.035em}
.eyebrow{font-family:var(--display); font-size:11.5px; letter-spacing:.16em; color:var(--teal-ink)}
.num,.kpi .v,.hero .big,.bigscore .s,.m .v,.jersey,.ring .c,td.n,.row .extra,.tile .sc{font-family:var(--display)}

/* ---------- glass chrome ---------- */
.topbar{background:var(--topbar-bg); border-bottom:1px solid var(--glass-line)}
.iconbtn{background:var(--surface); border:1px solid var(--line); box-shadow:none; border-radius:14px}
.iconbtn:hover{color:var(--teal-ink); border-color:var(--line-2)}

.bottomnav{
  background:var(--glass); border-radius:24px; padding:8px;
  backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:var(--nav-shadow), 0 0 0 1px var(--glass-line);
}
.bottomnav .navbtn{font-size:10.5px; letter-spacing:.01em}
.bottomnav .navbtn svg{padding:5px 14px; border-radius:14px}
.bottomnav .navbtn[aria-current="page"]{color:var(--ink)}
.bottomnav .navbtn[aria-current="page"] svg{background:var(--grad); color:#fff; box-shadow:var(--glow)}

@media (min-width:720px){
  .side{background:var(--glass); border-right:1px solid var(--glass-line);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
  .side .navbtn[aria-current="page"]{background:var(--grad); color:#fff; box-shadow:var(--glow)}
  .side .navbtn:hover:not([aria-current="page"]){background:var(--surface-2)}
}

/* ---------- surfaces ---------- */
.card,.kpi,.phead{border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--card-shadow)}
.card-h h2{font-size:16px; font-weight:600}
.kpi{padding:16px 16px 14px; overflow:hidden}
.kpi::after{ /* thin gradient edge on top */
  content:""; position:absolute; left:16px; right:16px; top:0; height:2px; border-radius:0 0 2px 2px;
  background:var(--grad); opacity:.55;
}
.kpi .ico{background:var(--grad-soft); color:var(--blue); border-radius:12px}
.kpi .k{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.kpi .v{font-weight:700; font-size:30px; letter-spacing:-.04em}
.m{background:var(--surface-2); border:1px solid var(--line); border-radius:14px}
.m .k{font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.m .v{font-weight:700}

/* hero (Beranda) */
.hero .big{font-weight:700; font-size:56px; letter-spacing:-.05em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .big small{-webkit-text-fill-color:var(--muted); color:var(--muted)}
.hero .zones span{background:var(--surface); border:1px solid var(--line)}
.hero .btn-hero{background:var(--grad); color:#fff; border-radius:16px; height:50px; box-shadow:var(--glow); font-family:var(--display); letter-spacing:.01em}

/* ---------- buttons, inputs ---------- */
.btn{border-radius:14px; box-shadow:none; font-weight:600}
.btn-p{background:var(--grad); border:0; color:#fff; box-shadow:var(--glow)}
.btn-p:hover{background:var(--grad); filter:brightness(1.06)}
.btn-p:disabled{box-shadow:none; filter:grayscale(.4)}
.inp, select.inp, textarea.inp{border-radius:14px; background:var(--surface-2)}
.inp:focus{border-color:var(--teal-ink); box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%,transparent)}
.seg{background:var(--sunk); border-radius:14px}
.seg button{border-radius:11px}
.seg button[aria-pressed="true"]{background:var(--grad); color:#fff; box-shadow:var(--glow)}
.chip{border-radius:999px; background:var(--surface)}
.chip[aria-pressed="true"]{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--glow)}
.tabs{background:var(--sunk); border:0; border-radius:16px}
.tabs button{border-radius:12px}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px var(--line), var(--card-shadow)}

/* ---------- readiness board ---------- */
.ring .c{background:var(--surface-2); color:var(--ink); font-weight:700}
.ring.ok svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ok) 55%,transparent))}
.ring.warn svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--warn) 55%,transparent))}
.ring.crit svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--crit) 60%,transparent))}
.jersey{background:var(--grad-soft); color:var(--blue); font-weight:700}
.jersey.asing,.jersey.heritage{background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--teal-ink); color:var(--teal-ink)}
.row,.acc-h{border-radius:16px}
.pill{font-family:var(--display); letter-spacing:.01em}
.pill::before{box-shadow:0 0 8px currentColor}

/* charts */
.chart .bar{rx:4px; ry:4px}
.chart .bar.dim{fill:color-mix(in srgb,var(--teal-ink) 35%,var(--surface))}
.chart .line{stroke:var(--teal-ink)}
.chart .dot{fill:var(--teal-ink)}

/* tables */
th{background:transparent; border-bottom:1px solid var(--line-2); font-size:10.5px; letter-spacing:.1em}
th:first-child,th:last-child{border-radius:0}
.box thead .stk{background:var(--surface)}

/* sheets */
.sheet{border:1px solid var(--line); border-bottom:0}
.sheet-h h2{font-weight:700}
.toast{border-radius:16px; font-family:var(--display)}

/* ==========================================================
   Faster check-in
   ========================================================== */
.ci-prog{display:flex; align-items:center; gap:12px; padding:14px 20px 0}
.ci-prog .bar{flex:1; height:8px; border-radius:99px; background:var(--sunk); overflow:hidden}
.ci-prog .bar i{display:block; height:100%; border-radius:99px; background:var(--grad); box-shadow:var(--glow); transition:width .3s}
.ci-prog b{font-family:var(--display); font-size:15px; font-variant-numeric:tabular-nums}
.ci-prog small{color:var(--muted); font-size:12px}

.acc-i.open{background:var(--surface-2); box-shadow:0 0 0 1px var(--line-2) inset}
.qs{gap:10px}
.q{display:grid; gap:6px}
.q > span{margin-bottom:0; align-items:baseline}
@media (min-width:520px){
  .q{grid-template-columns:minmax(120px,1fr) minmax(250px,1.6fr); align-items:center; gap:12px}
}
@media (min-width:720px){ .qs{grid-template-columns:1fr} }
@media (min-width:1100px){ .qs{grid-template-columns:1fr 1fr; column-gap:28px} }
.scale{gap:6px}
.scale button{height:44px; border-radius:14px; background:var(--surface); font-family:var(--display); font-weight:700; transition:transform .08s, background .12s, box-shadow .12s}
.scale button:active{transform:scale(.94)}
.scale button[aria-pressed="true"]{color:#fff; border-color:transparent}
.scale:not(.rpe) button[data-v="1"][aria-pressed="true"]{background:var(--s1); box-shadow:0 6px 16px -6px var(--s1)}
.scale:not(.rpe) button[data-v="2"][aria-pressed="true"]{background:var(--s2); box-shadow:0 6px 16px -6px var(--s2)}
.scale:not(.rpe) button[data-v="3"][aria-pressed="true"]{background:var(--s3); box-shadow:0 6px 16px -6px var(--s3)}
.scale:not(.rpe) button[data-v="4"][aria-pressed="true"]{background:var(--s4); box-shadow:0 6px 16px -6px var(--s4)}
.scale:not(.rpe) button[data-v="5"][aria-pressed="true"]{background:var(--s5); box-shadow:0 6px 16px -6px var(--s5)}
:root[data-theme="dark"] .scale button[aria-pressed="true"]{color:#060914}
.rpe button[aria-pressed="true"]{background:var(--grad); box-shadow:var(--glow)}
.rpe button{height:40px}

.quick{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:2px 0 12px}
.quick > span{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:4px}
.quick .chip{padding:6px 12px; font-size:12.5px}
@media (max-width:430px){ .quick > span:first-child{display:none} .quick .chip{padding:6px 10px} }
.ci-nums{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:4px}
.ci-nums .inp{text-align:center; font-family:var(--display); font-size:17px; font-weight:600}
.live{border-top:1px dashed var(--line-2)}
.live .btn-p{min-width:132px}

.srpe-all{display:grid; gap:8px; padding:12px 14px; border:1px dashed var(--line-2); border-radius:16px; background:var(--grad-soft); margin-bottom:6px}
.srpe-all .t{font-size:12.5px; font-weight:700; color:var(--ink-2)}