/* FitForge — administration panel.
   Palette and type deliberately match /app/styles.css so the admin area reads
   as part of the same product rather than a bolted-on tool. */

:root{
  color-scheme:dark;
  --bg:#07090d; --surface:#11151c; --surface2:#171d26; --line:#293241;
  --text:#f3f6fa; --muted:#9aa8b8;
  --blue:#1685e7; --blue2:#62bcff; --orange:#ef8a19;
  --danger:#ff6b6b; --ok:#48d597; --warn:#f0b429;
  --shadow:0 18px 55px rgba(0,0,0,.35);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0; min-height:100%;
  background:radial-gradient(circle at 20% 0,#0b2542 0,transparent 35%),var(--bg);
  color:var(--text);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)}
h1,h2,h3{margin:0}
a{color:var(--blue2)}

.eyebrow{
  text-transform:uppercase; letter-spacing:.16em; color:var(--blue2);
  font-size:.72rem; font-weight:700; margin:0 0 .3rem;
}

:focus-visible{outline:2px solid var(--blue2); outline-offset:2px}

/* ── Buttons ──────────────────────────────────────────────────────── */
.primary,.secondary,.ghost,.danger{
  border-radius:11px; padding:11px 16px; border:1px solid transparent;
  font-weight:700; text-decoration:none; display:inline-block; text-align:center;
}
.primary{background:linear-gradient(135deg,#0877d1,#1697ff); color:#fff; box-shadow:0 7px 22px rgba(8,119,209,.25)}
.secondary{background:var(--surface2); color:var(--text); border-color:#354154}
.ghost{background:transparent; color:var(--muted); border-color:#354154}
.danger{background:transparent; color:var(--danger); border-color:rgba(255,107,107,.4)}
.compact{padding:8px 12px; font-size:.82rem}
.full{width:100%}

/* ── Signed-out gate ──────────────────────────────────────────────── */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px}
.gate-card{
  width:min(440px,100%); text-align:center;
  background:linear-gradient(145deg,rgba(23,29,38,.96),rgba(11,14,20,.98));
  border:1px solid var(--line); border-radius:24px; padding:28px; box-shadow:var(--shadow);
}
.gate-logo{width:100%; max-height:140px; object-fit:contain; border-radius:16px; margin-bottom:16px}
.gate-card h1{font-size:1.9rem; margin:.2rem 0 .6rem}
.gate-card .primary{margin-top:18px}

/* ── Chrome ───────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20; height:66px;
  background:rgba(7,9,13,.94); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-left));
  gap:12px;
}
.brand{display:flex; align-items:center; gap:11px; min-width:0}
.brand img{width:38px; height:38px; border-radius:10px; object-fit:cover; flex:none}
.brand div{display:grid; min-width:0}
.brand strong{font-size:.94rem}
.brand span{font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top-actions{display:flex; align-items:center; gap:8px; flex:none}
.pill{
  display:inline-flex; align-items:center; border:1px solid #3b4655; background:#111821;
  border-radius:999px; padding:6px 11px; font-size:.72rem; color:#c7d0da; white-space:nowrap;
}

.tabs{
  position:sticky; top:66px; z-index:19;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  background:rgba(7,9,13,.94); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:8px max(12px,env(safe-area-inset-left));
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:transparent; border:1px solid transparent; color:var(--muted);
  border-radius:999px; padding:8px 14px; font-size:.84rem; font-weight:600; white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.active{background:var(--surface2); border-color:#354154; color:var(--blue2)}

.main{width:min(1180px,100%); margin:0 auto; padding:22px 16px calc(48px + env(safe-area-inset-bottom))}
.panel-page{display:none}
.panel-page.active{display:block}

.page-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px; margin-bottom:18px; flex-wrap:wrap;
}
.page-head h2{font-size:clamp(1.5rem,4vw,2.1rem)}

/* ── KPIs ─────────────────────────────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.kpi{
  background:linear-gradient(145deg,rgba(23,29,38,.94),rgba(14,18,24,.96));
  border:1px solid var(--line); border-radius:16px; padding:16px; display:grid; gap:6px;
}
.kpi span{color:var(--muted); font-size:.76rem}
.kpi strong{font-size:1.7rem; font-variant-numeric:tabular-nums}

/* ── Cards, forms ─────────────────────────────────────────────────── */
.card{
  background:linear-gradient(145deg,rgba(23,29,38,.94),rgba(14,18,24,.96));
  border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:16px;
}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.card-head h3{font-size:1.05rem}
.stack{display:grid; gap:10px}

.form{display:grid; gap:16px}
.grid{display:grid; gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.span-two{grid-column:span 2}
label{display:grid; gap:7px; font-size:.84rem; color:#c8d1db; font-weight:600}
label.inline{display:flex; align-items:center; gap:9px; font-weight:500; color:var(--muted)}
label.inline input{width:auto}
input,select,textarea{
  width:100%; background:#090d13; border:1px solid #354154; color:var(--text);
  border-radius:11px; padding:11px 12px; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,133,231,.15)}
textarea{resize:vertical}
input[type=checkbox]{width:18px; height:18px; accent-color:var(--blue)}

fieldset.roles{border:1px solid #354154; border-radius:12px; padding:14px; margin:0}
fieldset.roles legend{padding:0 6px; font-size:.8rem; color:var(--muted); font-weight:700}
.checks{display:flex; flex-wrap:wrap; gap:10px 18px}
.checks label{flex-direction:row; align-items:center; display:flex; gap:8px; font-weight:500}

.form-actions{display:flex; gap:10px; flex-wrap:wrap}

.toolbar{display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.toolbar input[type=search]{flex:1; min-width:180px}

/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto; border:1px solid #2c3541; border-radius:12px; background:#0b1017}
table{border-collapse:collapse; width:100%; min-width:640px}
th,td{padding:11px 12px; border-bottom:1px solid #28313d; text-align:left; font-size:.83rem; vertical-align:middle}
th{
  position:sticky; top:0; background:#151b24; color:#aeb9c6; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(22,133,231,.06)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
td.actions{text-align:right; white-space:nowrap}
td.actions button{margin-left:6px}

.badge{
  display:inline-block; border-radius:999px; padding:3px 9px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.badge.on{background:rgba(72,213,151,.14); color:var(--ok); border:1px solid rgba(72,213,151,.4)}
.badge.off{background:rgba(154,168,184,.12); color:var(--muted); border:1px solid #3b4655}
.badge.warn{background:rgba(240,180,41,.13); color:var(--warn); border:1px solid rgba(240,180,41,.4)}
.role-tag{
  display:inline-block; background:#141b24; border:1px solid #354154; color:#c7d0da;
  border-radius:6px; padding:2px 7px; font-size:.7rem; margin:2px 4px 2px 0;
}

.empty{padding:26px; text-align:center; color:var(--muted); font-size:.86rem}

.definitions{display:grid; grid-template-columns:minmax(150px,.4fr) 1fr; gap:10px 16px; margin:0}
.definitions dt{color:var(--muted); font-size:.82rem}
.definitions dd{margin:0; word-break:break-word; font-size:.86rem}

.row-item{
  border:1px solid #2d3745; background:#0c1118; border-radius:12px; padding:13px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.row-item h4{margin:0 0 4px; font-size:.94rem}
.row-item p{margin:0; color:var(--muted); font-size:.79rem}
.row-item .value{text-align:right; font-variant-numeric:tabular-nums}
.row-item .value strong{display:block; font-size:1.05rem}

/* ── Toast ────────────────────────────────────────────────────────── */
.toast{
  position:fixed; z-index:50; left:50%; bottom:24px; transform:translateX(-50%);
  max-width:min(460px,92vw); background:#18212c; border:1px solid #3c4a5b;
  border-radius:12px; padding:12px 16px; box-shadow:var(--shadow); font-size:.86rem;
}
.toast.error{border-color:rgba(255,107,107,.55); color:#ffc9c9}
.toast.ok{border-color:rgba(72,213,151,.5); color:#bdf3da}

/* ── Narrow screens ───────────────────────────────────────────────── */
@media(max-width:760px){
  .topbar{height:58px}
  .tabs{top:58px}
  .brand span{display:none}
  .top-actions .pill{display:none}
  .main{padding:16px 12px 40px}
  .grid.two{grid-template-columns:1fr}
  .span-two{grid-column:auto}
  .definitions{grid-template-columns:1fr; gap:4px}
  .definitions dd{padding-bottom:9px; border-bottom:1px solid var(--line)}
  .page-head{align-items:flex-start}
  .form-actions button{flex:1}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}