/* SurfTribe Admin — shared design system (2026-08-01 redesign).
   One source of visual truth for users / training / logs / templates.
   Mobile-first, Rubik, app palette (cyan #00d4ff on deep-navy glass).
   Loaded AFTER each page's own <style>, so these tokens + components win. */

/* ── Rubik (he + cyrillic + latin, self-hosted) ───────────────────────────── */
@font-face{font-family:'Rubik';src:url('/fonts/Rubik-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Rubik';src:url('/fonts/Rubik-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Rubik';src:url('/fonts/Rubik-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  /* App palette (matches welcome.html + mobile tokens.ts) */
  --bg-dark:#0a0f1e;
  --bg-panel:#121a30;
  --bg-elev:#18223c;
  --text-main:#f5f8ff;
  --text-muted:rgba(245,248,255,.60);
  --text-faint:#7c869a;
  --accent:#00d4ff;            /* brand cyan (was sky-blue #38bdf8) */
  --accent-strong:#22e0ff;
  --accent-ink:#05101a;        /* text on a cyan button */
  --accent-glow:rgba(0,212,255,.35);
  --violet:#7c3aed;
  --violet-light:#a78bfa;
  --green:#10b981;
  --orange:#f59e0b;
  --red:#ef4444;
  --glass-bg:rgba(18,26,48,.72);
  --glass-border:rgba(255,255,255,.09);
  --hair:rgba(255,255,255,.07);
  --radius:16px;
  --radius-sm:10px;
  --tap:44px;
  --shell-max:1160px;
  --font:'Rubik',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(0,212,255,.10), transparent 60%),
    radial-gradient(900px 560px at 8% 108%, rgba(124,58,237,.12), transparent 62%),
    var(--bg-dark);
  color:var(--text-main);
  min-height:100vh;
  overflow-x:hidden;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

/* ── Top bar: logo + horizontal scroll tabs (never overflows) ──────────────── */
nav{
  background:var(--glass-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--glass-border);
  padding:10px max(14px,env(safe-area-inset-left)) 10px max(14px,env(safe-area-inset-right));
  display:flex;
  align-items:center;
  gap:14px;
  position:sticky;
  top:0;
  z-index:100;
}
nav .logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-size:1.15rem;font-weight:700;flex-shrink:0}
nav .logo img{height:32px;width:32px;border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 14px var(--accent-glow)}
nav .logo span span:last-child{color:var(--accent)}

.nav-tabs{
  display:flex;align-items:center;gap:6px;
  margin-inline-start:auto;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tabs a,.btn-nav{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;min-height:var(--tap);
  border-radius:11px;
  background:rgba(255,255,255,.05);
  color:var(--text-main);text-decoration:none;
  font-size:.88rem;font-weight:500;white-space:nowrap;
  border:1px solid transparent;transition:all .18s;
}
.nav-tabs a:hover,.btn-nav:hover{background:rgba(0,212,255,.10);border-color:var(--accent-glow);color:var(--accent)}
.nav-tabs a.active{background:rgba(0,212,255,.16);border-color:var(--accent);color:var(--accent);font-weight:600}

/* ── Shell container + page header ────────────────────────────────────────── */
.container,.shell{max-width:var(--shell-max);margin:24px auto 60px;padding:0 16px}
.header-section{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.header-section h1{font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:11px;margin:0;letter-spacing:-.01em}
.header-section h1 i{color:var(--accent)}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary,.btn-submit{
  background:linear-gradient(180deg,var(--accent-strong),var(--accent));
  color:var(--accent-ink);border:none;padding:11px 18px;min-height:var(--tap);
  border-radius:12px;cursor:pointer;font-weight:700;font-family:var(--font);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;
  box-shadow:0 6px 18px -6px var(--accent-glow);transition:transform .15s,filter .15s;
}
.btn-primary:hover,.btn-submit:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-cancel{background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text-main);padding:11px 18px;min-height:var(--tap);border-radius:12px;cursor:pointer;font-family:var(--font);font-size:.92rem;transition:background .15s}
.btn-cancel:hover{background:rgba(255,255,255,.10)}
.btn-danger{background:var(--red);color:#fff;border:none;padding:11px 18px;min-height:var(--tap);border-radius:12px;cursor:pointer;font-weight:700;font-family:var(--font);transition:filter .15s}
.btn-danger:hover{filter:brightness(1.08)}

/* ── Cards + stat plates ──────────────────────────────────────────────────── */
.card{background:var(--bg-panel);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat-plate{background:var(--bg-panel);border:1px solid var(--glass-border);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden}
.stat-plate::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--accent),transparent)}
.stat-plate .val{font-size:1.7rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.stat-plate .lbl{color:var(--text-muted);font-size:.82rem;margin-top:3px}

/* ── Tab buttons (admin.html training tabs) ───────────────────────────────── */
.tab-btn{background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text-main);padding:10px 18px;min-height:var(--tap);border-radius:12px;cursor:pointer;font-weight:600;font-family:var(--font);transition:all .18s}
.tab-btn:hover{background:rgba(0,212,255,.08);border-color:var(--accent-glow)}
.tab-btn.active{background:rgba(0,212,255,.16);border-color:var(--accent);color:var(--accent)}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge{padding:4px 11px;border-radius:20px;font-size:.76rem;font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.badge.admin{background:rgba(0,212,255,.16);color:var(--accent);border:1px solid var(--accent)}
.badge.user{background:rgba(148,163,184,.16);color:var(--text-muted);border:1px solid rgba(148,163,184,.4)}
.badge.pro{background:rgba(124,58,237,.20);color:var(--violet-light);border:1px solid var(--violet)}

/* ── Alerts + spinner ─────────────────────────────────────────────────────── */
.error-msg{background:rgba(239,68,68,.12);border:1px solid var(--red);color:#ffb4b4;padding:13px 16px;border-radius:12px;margin-bottom:18px;display:none}
.success-msg{background:rgba(16,185,129,.12);border:1px solid var(--green);color:#8ef0c8;padding:13px 16px;border-radius:12px;margin-bottom:18px;display:none}
.spinner{width:38px;height:38px;border:4px solid rgba(255,255,255,.12);border-top-color:var(--accent);border-radius:50%;animation:adm-spin 1s linear infinite;margin:44px auto}
@keyframes adm-spin{to{transform:rotate(360deg)}}

/* ── Modals ───────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(4,8,18,.72);backdrop-filter:blur(6px);display:none;justify-content:center;align-items:flex-end;z-index:1000;opacity:0;transition:opacity .25s;padding:0}
.modal-overlay.active{display:flex;opacity:1}
.modal{background:var(--bg-panel);border:1px solid var(--glass-border);border-top:1px solid var(--accent-glow);border-radius:20px 20px 0 0;width:100%;max-width:520px;padding:24px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px -20px rgba(0,0,0,.7);transform:translateY(28px);transition:transform .25s;max-height:92vh;overflow-y:auto}
.modal-overlay.active .modal{transform:translateY(0)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-header h2{font-size:1.22rem;margin:0}
.btn-close{background:transparent;border:none;color:var(--text-muted);font-size:1.15rem;cursor:pointer;width:var(--tap);height:var(--tap);border-radius:10px}
.btn-close:hover{color:var(--red);background:rgba(255,255,255,.05)}
.modal-footer{margin-top:22px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

/* ── Forms + toggles ──────────────────────────────────────────────────────── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:.86rem;color:var(--text-muted);margin-bottom:6px}
.form-control{width:100%;padding:12px 14px;min-height:var(--tap);background:rgba(0,0,0,.25);border:1px solid var(--glass-border);border-radius:11px;color:#fff;font-size:1rem;font-family:var(--font);outline:none;transition:border-color .15s}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.feature-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:rgba(0,0,0,.14);border:1px solid var(--glass-border);border-radius:12px;margin-bottom:9px;cursor:pointer;min-height:var(--tap)}
.feature-toggle:hover{background:rgba(0,212,255,.05)}
.feature-title{font-weight:600}
.feature-desc{font-size:.78rem;color:var(--text-muted);margin-top:2px}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.14);transition:.3s;border-radius:34px}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background:var(--text-muted);transition:.3s;border-radius:50%}
input:checked + .slider{background:var(--accent)}
input:checked + .slider:before{transform:translateX(20px);background:#fff}

/* ── Responsive table → cards ─────────────────────────────────────────────── */
.table-responsive{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left}
th,td{padding:13px 16px;border-bottom:1px solid var(--hair)}
th{background:rgba(0,0,0,.22);font-weight:700;color:var(--accent);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0}
tr:last-child td{border-bottom:none}
tbody tr:hover td,tbody tr:hover td{background:rgba(255,255,255,.03)}

/* Card list (mobile) is hidden on desktop; the <table> shows instead. */
.cards-list{display:none;flex-direction:column;gap:12px}
.u-card{background:var(--bg-panel);border:1px solid var(--glass-border);border-radius:var(--radius);padding:14px}
.u-card .u-top{display:flex;align-items:center;gap:11px}
.u-avatar{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,var(--accent),var(--violet));display:flex;align-items:center;justify-content:center;font-weight:700;color:#05101a;flex-shrink:0;font-size:1rem}
.u-card .u-name{font-weight:700;font-size:1rem;line-height:1.15;word-break:break-word}
.u-card .u-sub{color:var(--text-muted);font-size:.82rem;word-break:break-all}
.u-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.u-metrics{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:11px;padding-top:11px;border-top:1px solid var(--hair);font-size:.82rem;color:var(--text-muted)}
.u-metrics b{color:var(--text-main);font-variant-numeric:tabular-nums}
.u-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.u-actions button{flex:1;min-width:120px;min-height:var(--tap)}

@media (max-width:760px){
  .header-section h1{font-size:1.28rem}
  .table-responsive,.table-card{display:none}
  .cards-list{display:flex}
  .modal-footer{justify-content:stretch}
  .modal-footer > *{flex:1}
}
@media (min-width:761px){
  .modal-overlay{align-items:center;padding:20px}
  .modal{border-radius:20px;border-top:1px solid var(--glass-border);transform:translateY(20px)}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}