/* ============================================================
   PRMSU ATHLETE HUB  |  Professional Athletic Management System
   President Ramon Magsaysay State University
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ── Core palette ── */
  --navy:       #060E1F;
  --navy2:      #0D1B35;
  --navy3:      #132545;
  --navy4:      #1C3461;
  --gold:       #E9A620;
  --gold-l:     #F5C45A;
  --gold-d:     #C48010;
  --gold-glow:  rgba(233,166,32,.2);

  /* ── Surfaces ── */
  --white:      #FFFFFF;
  --off:        #F3F6FC;
  --off2:       #EAF0FA;
  --card:       #FFFFFF;

  /* ── Text ── */
  --t1:         #0A1628;
  --t2:         #445470;
  --t3:         #8B9DB8;
  --t4:         #B8C5D8;

  /* ── Borders ── */
  --bdr:        #E0E8F4;
  --bdr2:       #C6D5EC;

  /* ── Semantic ── */
  --red:        #CF3A34;
  --green:      #17956E;
  --amber:      #D97E0A;
  --blue:       #1E6FB8;
  --info:       #0891B2;

  /* ── Layout ── */
  --sb-w:       272px;
  --sb-col:     68px;
  --tb-h:       62px;

  /* ── Radii ── */
  --r:          18px;
  --rs:         12px;
  --rxs:        7px;
  --rpill:      100px;

  /* ── Shadows ── */
  --sh:   0 1px 2px rgba(6,14,31,.04),0 4px 12px rgba(6,14,31,.06);
  --sh2:  0 4px 8px rgba(6,14,31,.07),0 16px 40px rgba(6,14,31,.12);
  --sh3:  0 8px 24px rgba(6,14,31,.12),0 32px 80px rgba(6,14,31,.2);
  --sh-gold: 0 6px 24px rgba(233,166,32,.4);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.08);

  /* ── Transitions ── */
  --tr:      .18s cubic-bezier(.4,0,.2,1);
  --tr-slow: .32s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--off);
  color:var(--t1);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }

/* ══════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════ */
.app-wrapper { display:flex; min-height:100vh; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.sidebar {
  width:var(--sb-w);
  background:var(--navy);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;
  overflow:hidden;
  box-shadow:none;
  border-right:1px solid rgba(255,255,255,.04);
  will-change:transform;
}
.sidebar.sb-open {
  transform:translateX(0);
  box-shadow:8px 0 40px rgba(0,0,0,.45);
}
.sidebar::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:100%;
  background:
    radial-gradient(ellipse 70% 40% at 100% 0%, rgba(233,166,32,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(30,52,97,.6) 0%, transparent 60%);
  pointer-events:none;
}
/* .sidebar.collapsed — unused, sidebar hides via transform now */

/* Brand */
.sb-brand {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.06);
  min-height:74px; flex-shrink:0; position:relative;
}
.sb-logo { display:flex; align-items:center; gap:13px; overflow:hidden; }
.sb-icon {
  width:40px; height:40px; flex-shrink:0; border-radius:12px;
  background:linear-gradient(140deg, var(--gold) 0%, var(--gold-d) 100%);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-size:18px; font-weight:700;
  box-shadow:0 2px 8px rgba(233,166,32,.25);
  position:relative;
}
.sb-icon::after {
  content:''; position:absolute; inset:-1px;
  border-radius:13px; border:1px solid rgba(255,255,255,.15);
}
.sb-text { display:flex; flex-direction:column; line-height:1.1; white-space:nowrap; }
.sb-name { font-family:'Bebas Neue'; font-size:19px; color:var(--gold); letter-spacing:2px; }
.sb-sub  { font-size:9px; color:rgba(255,255,255,.3); letter-spacing:.8px; text-transform:uppercase; margin-top:2px; }
.sb-collapse {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.25); font-size:13px;
  padding:6px; flex-shrink:0; border-radius:8px;
  transition:all var(--tr);
}
.sb-collapse:hover { color:var(--gold); background:rgba(255,255,255,.07); }
.sidebar.collapsed .sb-collapse { transform:rotate(180deg); }
.sidebar.collapsed .sb-text,
.sidebar.collapsed .sb-collapse { display:none; }
.sidebar.collapsed .sb-logo { justify-content:center; width:100%; }

/* User card */
.sb-user {
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
  background:rgba(255,255,255,.025);
  position:relative;
}
.sb-avatar { position:relative; flex-shrink:0; }
.sb-avatar img {
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(233,166,32,.5);
  transition:border-color var(--tr);
}
.sb-avatar img:hover { border-color:var(--gold); }
.sb-dot {
  width:9px; height:9px; border-radius:50%;
  background:#22C55E; border:2px solid var(--navy);
  position:absolute; bottom:1px; right:1px;
  box-shadow:0 0 6px rgba(34,197,94,.5);
}
.sb-userinfo { overflow:hidden; flex:1; }
.sb-fullname {
  display:block; color:var(--white); font-weight:600; font-size:.875rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-badge {
  display:inline-block; font-size:11px; font-weight:700;
  letter-spacing:.7px; padding:2px 8px; border-radius:4px;
  margin-top:4px; text-transform:uppercase;
}
.sb-badge.admin   { background:var(--gold); color:var(--navy); }
.sb-badge.coach   { background:#1E6FB8; color:#fff; }
.sb-badge.athlete { background:rgba(255,255,255,.1); color:var(--gold-l); }
.sb-badge.coordinator { background:#6B48C8; color:#fff; }
.sidebar.collapsed .sb-userinfo,
.sidebar.collapsed .sb-user .sb-badge { display:none; }
.sidebar.collapsed .sb-user { justify-content:center; padding:14px 10px; }

/* Nav */
.sb-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 0 8px; }
.sb-nav::-webkit-scrollbar { width:3px; }
.sb-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:2px; }
.sb-section { margin-bottom:2px; }
.sb-label {
  display:block; font-size:18px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:rgba(255,255,255,.22); padding:12px 20px 5px;
  white-space:nowrap; transition:opacity var(--tr);
}
.sidebar.collapsed .sb-label { opacity:0; height:0; padding:0; overflow:hidden; }

.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:9px 20px; color:rgba(255,255,255,.42);
  font-size:.855rem; font-weight:500; white-space:nowrap;
  transition:all var(--tr); border-left:3px solid transparent;
  margin:1px 0; cursor:pointer; position:relative;
}
.nav-item i { font-size:15px; width:18px; text-align:center; flex-shrink:0; transition:color var(--tr); }
.nav-item:hover {
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.8);
  border-left-color:rgba(233,166,32,.35);
}
.nav-item:hover i { color:rgba(233,166,32,.7); }
.nav-item.active {
  background:linear-gradient(90deg,rgba(233,166,32,.14) 0%,rgba(233,166,32,.03) 100%);
  color:var(--gold);
  border-left-color:var(--gold);
  font-weight:600;
}
.nav-item.active i { color:var(--gold); }
.nav-item.active::before {
  content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:2px; height:60%; background:var(--gold);
  border-radius:0 2px 2px 0; filter:blur(.5px);
}
.sidebar.collapsed .nav-item {
  justify-content:center; padding:12px 0;
  border-left:none; border-right:3px solid transparent;
}
.sidebar.collapsed .nav-item.active { border-right-color:var(--gold); }
.sidebar.collapsed .nav-item span { display:none; }

/* Footer */
.sb-footer { padding:12px 14px; border-top:1px solid rgba(255,255,255,.06); flex-shrink:0; }
.sb-logout {
  display:flex; align-items:center; gap:10px; padding:9px 13px;
  border-radius:var(--rs); color:rgba(255,255,255,.32); font-size:.855rem; font-weight:500;
  transition:all var(--tr); cursor:pointer;
}
.sb-logout:hover { background:rgba(207,58,52,.15); color:#F87171; }
.sidebar.collapsed .sb-logout { justify-content:center; }
.sidebar.collapsed .sb-logout span { display:none; }

/* ══════════════════════════════════════════════════════════
   MAIN WRAP + TOPBAR
   ══════════════════════════════════════════════════════════ */
.main-wrap {
  margin-left:0; flex:1;
  display:flex; flex-direction:column;
  min-height:100vh;
}
.main-wrap.sb-expanded { margin-left:0; }

.topbar {
  height:var(--tb-h); background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:100;
  box-shadow:0 1px 0 var(--bdr),0 4px 16px rgba(6,14,31,.04);
}
.tb-left,.tb-right { display:flex; align-items:center; gap:12px; }
.tb-mobile-btn {
  display:none; background:none; border:none; cursor:pointer;
  font-size:20px; color:var(--t2); padding:5px; border-radius:8px;
  transition:all var(--tr);
}
.tb-mobile-btn:hover { background:var(--off); color:var(--t1); }
.tb-breadcrumb { display:flex; align-items:center; gap:7px; font-size:.84rem; }
.tb-root { color:var(--gold-d); font-weight:700; letter-spacing:-.1px; }
.tb-sep  { color:var(--t4); font-size:10px; }
.tb-page { color:var(--t1); font-weight:600; }
.tb-clock { font-family:'Outfit'; font-size:1rem; font-weight:600; color:var(--t3); letter-spacing:.3px; }
.tb-avatar img {
  width:36px; height:36px; border-radius:50%; object-fit:cover;
  border:2px solid var(--bdr2); transition:all var(--tr); cursor:pointer;
}
.tb-avatar img:hover { border-color:var(--gold); transform:scale(1.07); }

.page-body { flex:1; padding:28px 30px; }

/* ══════════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════════ */
.ph {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:14px; margin-bottom:26px;
}
.ph-title h1 {
  font-family:'Outfit'; font-size:1.7rem; font-weight:800;
  letter-spacing:-.5px; color:var(--navy);
  display:flex; align-items:center; gap:11px; line-height:1;
}
.ph-icon { color:var(--gold); font-size:1.35rem; }
.ph-title p { color:var(--t3); font-size:.84rem; margin-top:6px; font-weight:400; }
.ph-actions { display:flex; gap:9px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════
   HERO BANNER
   ══════════════════════════════════════════════════════════ */
.hero {
  background:var(--navy);
  border-radius:var(--r); padding:32px 36px;
  position:relative; overflow:hidden; color:var(--white);
  margin-bottom:24px; box-shadow:var(--sh2);
  border:1px solid rgba(255,255,255,.04);
}
.hero::before {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(233,166,32,.12) 0%,transparent 65%);
  right:-100px; top:-200px;
}
.hero::after {
  content:''; position:absolute;
  width:200px; height:200px; border-radius:50%;
  background:rgba(30,52,97,.8); left:-60px; bottom:-80px;
}
.hero-inner { position:relative; z-index:1; }
.hero-inner h1 {
  font-family:'Bebas Neue'; font-size:2.2rem; letter-spacing:3px;
  line-height:1; text-shadow:0 2px 20px rgba(0,0,0,.2);
}
.hero-inner h1 em { color:var(--gold); font-style:normal; }
.hero-inner p { color:rgba(255,255,255,.45); margin-top:8px; font-size:.9rem; font-weight:400; }
.hero-bg-icon {
  position:absolute; right:36px; top:50%; transform:translateY(-50%);
  font-size:6rem; color:rgba(233,166,32,.07); z-index:0;
  pointer-events:none;
}
/* Decorative diagonal stripe */
.hero::after {
  content:'';
  position:absolute;
  bottom:-30px; right:220px;
  width:2px; height:180%;
  background:rgba(233,166,32,.06);
  transform:rotate(15deg);
  pointer-events:none;
}

/* ══════════════════════════════════════════════════════════
   STATS GRID
   ══════════════════════════════════════════════════════════ */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px; margin-bottom:24px;
}
.stat-card {
  background:var(--white); border-radius:var(--r);
  padding:22px 24px; position:relative; overflow:hidden;
  box-shadow:var(--sh); border:1px solid var(--bdr);
  transition:all var(--tr); cursor:default;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--sh2); }
.stat-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.c-gold::after  { background:linear-gradient(90deg,var(--gold),var(--gold-l)); }
.c-blue::after  { background:linear-gradient(90deg,#1E6FB8,#60A5FA); }
.c-green::after { background:linear-gradient(90deg,#17956E,#34D399); }
.c-red::after   { background:linear-gradient(90deg,#CF3A34,#F87171); }
.c-amber::after { background:linear-gradient(90deg,#D97E0A,#FCD34D); }
.sc-icon {
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:18px;
}
.c-gold  .sc-icon { background:rgba(233,166,32,.1);  color:var(--gold-d); }
.c-blue  .sc-icon { background:rgba(30,111,184,.1);  color:#1a5c99; }
.c-green .sc-icon { background:rgba(23,149,110,.1);  color:#0f6b4a; }
.c-red   .sc-icon { background:rgba(207,58,52,.1);   color:#9b2c28; }
.c-amber .sc-icon { background:rgba(217,126,10,.1);  color:#9a5a08; }
.sc-val {
  font-family:'Outfit'; font-size:2.4rem; font-weight:800;
  color:var(--navy); line-height:1; letter-spacing:-1px;
}
.sc-lbl { font-size:.78rem; color:var(--t3); margin-top:6px; font-weight:500; letter-spacing:.1px; }

/* ══════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════ */
.card {
  background:var(--white); border-radius:var(--r);
  box-shadow:var(--sh); border:1px solid var(--bdr); overflow:hidden;
}
.card-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 24px; border-bottom:1px solid var(--bdr);
  background:rgba(243,246,252,.6);
}
.card-title {
  font-family:'Outfit'; font-size:.88rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; color:var(--navy);
  display:flex; align-items:center; gap:9px;
}
.card-title i { color:var(--gold); font-size:.9rem; }
.card-body { padding:24px; }

/* ── Grids ── */
.dash-grid    { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ══════════════════════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════════════════════ */
/* Reusable fixed-column grids that collapse to 1 column on mobile.
   Use these instead of inline grid-template-columns so the mobile
   media query at the bottom of this file can actually reach them —
   inline styles can't be overridden by an external stylesheet. */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; }
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:.86rem; }
thead th {
  background:var(--navy); color:rgba(255,255,255,.5);
  font-family:'Outfit'; font-size:.71rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px;
  padding:12px 18px; text-align:left; white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--bdr); transition:background var(--tr); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(233,166,32,.025); }
tbody td { padding:13px 18px; vertical-align:middle; }
.td-user { display:flex; align-items:center; gap:11px; }
.td-avatar {
  width:36px; height:36px; border-radius:50%; object-fit:cover;
  border:2px solid var(--bdr); flex-shrink:0;
}
.td-user strong { display:block; font-weight:600; font-size:.86rem; color:var(--t1); }
.td-user small  { color:var(--t3); font-size:.77rem; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px; border-radius:var(--rs);
  font-family:'DM Sans'; font-size:.86rem; font-weight:600;
  border:2px solid transparent; cursor:pointer;
  transition:all var(--tr); white-space:nowrap; line-height:1.2;
  position:relative; overflow:hidden;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition:background var(--tr);
}
.btn:not(:disabled):hover::after { background:rgba(255,255,255,.08); }

.btn-gold {
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  color:var(--navy); border-color:transparent;
  box-shadow:0 2px 8px rgba(233,166,32,.25),var(--sh-inset);
  font-weight:700;
}
.btn-gold:not(:disabled):hover {
  box-shadow:var(--sh-gold); transform:translateY(-1px);
}

.btn-navy {
  background:var(--navy); color:var(--white);
  border-color:transparent; box-shadow:var(--sh-inset);
}
.btn-navy:not(:disabled):hover { background:var(--navy2); transform:translateY(-1px); box-shadow:var(--sh2); }

.btn-danger  { background:var(--red);   color:#fff; border-color:transparent; }
.btn-danger:not(:disabled):hover  { filter:brightness(1.1); transform:translateY(-1px); }
.btn-success { background:var(--green); color:#fff; border-color:transparent; }
.btn-success:not(:disabled):hover { filter:brightness(1.1); transform:translateY(-1px); }

.btn-ghost {
  background:transparent; color:var(--t2); border-color:var(--bdr);
}
.btn-ghost:not(:disabled):hover { background:var(--off); color:var(--t1); border-color:var(--bdr2); }

.btn-sm  { padding:6px 13px; font-size:.8rem; border-radius:var(--rxs); }
.btn-xs  { padding:4px 10px; font-size:.75rem; border-radius:var(--rxs); }
.act-group { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }

/* ══════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════ */
.fg   { display:grid; gap:16px; }
.fg-2 { grid-template-columns:1fr 1fr; }
.fg-3 { grid-template-columns:1fr 1fr 1fr; }
.fg-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.f-group { display:flex; flex-direction:column; gap:5px; }
label { font-size:.8rem; font-weight:600; color:var(--navy); letter-spacing:.1px; }
.req  { color:var(--red); margin-left:2px; }
.hint { font-size:.73rem; color:var(--t3); line-height:1.5; }

input, select, textarea {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--bdr); border-radius:var(--rs);
  font-family:'DM Sans'; font-size:.9rem; color:var(--t1);
  background:var(--white); outline:none;
  transition:border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
input:focus, select:focus, textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 4px var(--gold-glow);
  background:#FFFCF5;
}
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
  border-color:var(--bdr2);
}
input:disabled, select:disabled {
  background:var(--off); cursor:not-allowed; color:var(--t3);
}
textarea { resize:vertical; min-height:90px; }
select { cursor:pointer; }

.pw-wrap { position:relative; }
.pw-wrap input { padding-right:44px; }
.eye-btn {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--t3); font-size:14px;
  transition:color var(--tr); padding:4px;
}
.eye-btn:hover { color:var(--navy); }

/* ══════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════ */
.filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.s-wrap { flex:1; min-width:200px; position:relative; }
.s-wrap i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--t3); font-size:13px; }
.s-wrap input { padding-left:36px; border-radius:var(--rpill); }
.f-tabs { display:flex; gap:5px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════
   BADGE
   ══════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 11px; border-radius:var(--rpill);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.b-active   { background:rgba(23,149,110,.1);   color:#0f6b4a; border:1px solid rgba(23,149,110,.2); }
.b-archived { background:rgba(139,157,184,.1);  color:var(--t2); border:1px solid rgba(139,157,184,.2); }
.b-pending  { background:rgba(217,126,10,.12);  color:#7a4a08; border:1px solid rgba(217,126,10,.25); }
.b-inactive { background:rgba(207,58,52,.1);    color:#8b2020; border:1px solid rgba(207,58,52,.2); }
.b-admin    { background:rgba(233,166,32,.15);  color:#7a4e00; border:1px solid rgba(233,166,32,.3); }
.b-athlete  { background:rgba(30,111,184,.1);   color:#1a4d7c; border:1px solid rgba(30,111,184,.2); }
.b-coach    { background:rgba(30,111,184,.12);  color:#1a4d7c; border:1px solid rgba(30,111,184,.25); }
.b-coordinator { background:rgba(107,72,200,.12); color:#5a3a9e; border:1px solid rgba(107,72,200,.28); }

/* Generic severity badges — same red/amber/green as above, but named for
   meaning (danger/warn/ok) rather than account status, since "active" for
   an injury means the opposite of "active" for an account (bad vs good). */
.b-ok       { background:rgba(23,149,110,.1);   color:#0f6b4a; border:1px solid rgba(23,149,110,.2); }
.b-warn     { background:rgba(217,126,10,.12);  color:#7a4a08; border:1px solid rgba(217,126,10,.25); }
.b-danger   { background:rgba(207,58,52,.1);    color:#8b2020; border:1px solid rgba(207,58,52,.2); }
.b-info     { background:rgba(8,145,178,.1);    color:#065f70; border:1px solid rgba(8,145,178,.2); }

/* ══════════════════════════════════════════════════════════
   ALERT
   ══════════════════════════════════════════════════════════ */
.alert {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 18px; border-radius:var(--rs);
  font-size:.875rem; margin-bottom:18px;
  border-left:4px solid; line-height:1.6;
}
.alert i { flex-shrink:0; margin-top:2px; }
.a-success { background:rgba(23,149,110,.07);  border-color:var(--green); color:#0d5a3a; }
.a-error   { background:rgba(207,58,52,.07);   border-color:var(--red);   color:#7b1f1f; }
.a-warning { background:rgba(217,126,10,.08);  border-color:var(--amber); color:#7a4a08; }
.a-info    { background:rgba(30,111,184,.07);  border-color:var(--blue);  color:#1a3e5c; }

/* ══════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════ */
#toastBox {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:flex; flex-direction:column; gap:9px;
  pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; background:var(--navy2); color:var(--white);
  border-radius:var(--rs); box-shadow:var(--sh3);
  min-width:260px; max-width:380px; font-size:.875rem;
  border-left:4px solid var(--gold);
  animation:slideR .22s cubic-bezier(.4,0,.2,1);
  pointer-events:all;
  backdrop-filter:blur(10px);
}
.toast.t-ok   { border-left-color:var(--green); }
.toast.t-err  { border-left-color:var(--red); }
.toast.t-warn { border-left-color:var(--amber); }
.toast i { flex-shrink:0; font-size:15px; }
.toast.t-ok  i { color:#4ADE80; }
.toast.t-err i { color:#F87171; }
.toast.t-warn i { color:#FCD34D; }

/* ══════════════════════════════════════════════════════════
   CONFIRM DIALOG
   ══════════════════════════════════════════════════════════ */
.c-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(6,14,31,.8); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .18s ease;
}
.c-dialog {
  background:var(--white); border-radius:var(--r);
  padding:38px 32px; max-width:420px; width:100%;
  text-align:center; box-shadow:var(--sh3);
  animation:slideUp .22s cubic-bezier(.4,0,.2,1);
  border:1px solid var(--bdr);
}
.c-icon  { font-size:2.6rem; color:var(--amber); margin-bottom:16px; }
.c-title {
  font-family:'Outfit'; font-size:1.5rem; font-weight:800;
  color:var(--navy); margin-bottom:9px; letter-spacing:-.3px;
}
.c-text  { color:var(--t2); font-size:.9rem; margin-bottom:26px; line-height:1.65; }
.c-actions { display:flex; gap:10px; justify-content:center; }

/* ══════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════ */
.mp-overlay {
  position:fixed; inset:0; z-index:800;
  background:rgba(6,14,31,.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .18s ease;
}
.mp-panel {
  background:var(--white); border-radius:var(--r);
  width:100%; max-width:620px; max-height:92vh;
  display:flex; flex-direction:column;
  box-shadow:var(--sh3); border:1px solid var(--bdr);
  animation:slideUp .24s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.mp-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; border-bottom:1px solid var(--bdr);
  background:rgba(243,246,252,.7);
  flex-shrink:0;
}
.mp-head h2 {
  font-family:'Outfit'; font-size:1.15rem; font-weight:800;
  color:var(--navy); letter-spacing:-.3px;
}
.mp-close {
  background:none; border:none; cursor:pointer; font-size:18px;
  color:var(--t3); padding:5px; border-radius:8px;
  transition:all var(--tr); line-height:1;
}
.mp-close:hover { background:var(--off); color:var(--t1); }
.mp-body { padding:26px 28px; overflow-y:auto; flex:1; }
.mp-foot {
  display:flex; justify-content:flex-end; gap:10px;
  padding:16px 28px; border-top:1px solid var(--bdr);
  background:rgba(243,246,252,.7); flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════
   EVENT CARDS
   ══════════════════════════════════════════════════════════ */
.ev-list { display:flex; flex-direction:column; }
.ev-card {
  display:flex; border-radius:var(--rs);
  border:1px solid var(--bdr); overflow:hidden;
  transition:all var(--tr); background:var(--white); margin-bottom:10px;
}
.ev-card:hover { box-shadow:var(--sh2); border-color:var(--bdr2); transform:translateX(2px); }
.ev-date {
  width:80px; flex-shrink:0; background:var(--navy);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14px 10px; text-align:center; gap:0;
}
.ev-mon { font-size:.65rem; font-weight:700; text-transform:uppercase; color:var(--gold); letter-spacing:1px; }
.ev-day { font-family:'Bebas Neue'; font-size:2.2rem; color:var(--white); line-height:1; }
.ev-yr  { font-size:.62rem; color:rgba(255,255,255,.35); margin-top:1px; }
.ev-body { flex:1; padding:14px 18px; }
.ev-cat  { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--gold-d); margin-bottom:5px; }
.ev-title{ font-weight:700; color:var(--navy); font-size:.95rem; line-height:1.3; margin-bottom:6px; }
.ev-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--t3); }
.ev-mi   { display:flex; align-items:center; gap:5px; }
.ev-mi i { font-size:.72rem; color:var(--gold-d); }
.ev-actions {
  display:flex; flex-direction:column; gap:5px; justify-content:center;
  padding:12px; border-left:1px solid var(--bdr);
}

/* ══════════════════════════════════════════════════════════
   COACH CARDS
   ══════════════════════════════════════════════════════════ */
.coach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.coach-card {
  background:var(--white); border-radius:var(--r);
  box-shadow:var(--sh); border:1px solid var(--bdr);
  overflow:hidden; transition:all var(--tr);
}
.coach-card:hover { transform:translateY(-4px); box-shadow:var(--sh2); }
.cc-banner {
  height:80px; background:linear-gradient(135deg,var(--navy),var(--navy3));
  position:relative; display:flex; align-items:flex-end; padding:0 16px 10px;
}
.cc-sport-tag {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--gold); background:rgba(233,166,32,.15); border:1px solid rgba(233,166,32,.3);
  padding:2px 9px; border-radius:var(--rpill);
}
.cc-photo {
  width:70px; height:70px; border-radius:50%; object-fit:cover;
  border:3px solid var(--white); margin:-35px auto 12px;
  display:block; box-shadow:var(--sh2);
}
.cc-body { padding:0 18px 18px; text-align:center; }
.cc-name  { font-weight:700; font-size:1rem; color:var(--navy); line-height:1.2; margin-bottom:4px; }
.cc-sport { font-size:.78rem; color:var(--gold-d); font-weight:600; margin-bottom:6px; }
.cc-email { font-size:.74rem; color:var(--t3); margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-bio   { font-size:.8rem; color:var(--t2); line-height:1.55; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cc-actions { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════
   PROGRAMS
   ══════════════════════════════════════════════════════════ */
.prog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.prog-card {
  background:var(--white); border-radius:var(--r);
  box-shadow:var(--sh); overflow:hidden;
  transition:all var(--tr); display:flex; flex-direction:column;
  border:1px solid var(--bdr);
}
.prog-card:hover { transform:translateY(-3px); box-shadow:var(--sh2); }
.prog-archived { opacity:.6; }
.prog-band {
  background:linear-gradient(135deg,var(--navy),var(--navy3));
  padding:14px 18px; display:flex; align-items:center;
  justify-content:space-between; gap:8px;
}
.prog-sport-tag {
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--gold); background:rgba(233,166,32,.14);
  border:1px solid rgba(233,166,32,.28);
  padding:3px 10px; border-radius:var(--rpill);
}
.prog-body { padding:18px; flex:1; display:flex; flex-direction:column; gap:9px; }
.prog-name { font-weight:700; font-size:1rem; color:var(--navy); line-height:1.25; }
.prog-coach { font-size:.8rem; color:var(--t2); font-weight:500; }
.prog-desc { font-size:.82rem; color:var(--t2); line-height:1.55; flex:1; }
.prog-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:.76rem; color:var(--t3); }
.prog-meta span { display:flex; align-items:center; gap:5px; }
.prog-meta i { color:var(--gold-d); font-size:.72rem; }
.prog-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }

/* ══════════════════════════════════════════════════════════
   PROFILE
   ══════════════════════════════════════════════════════════ */
.prof-hero {
  background:var(--white); border-radius:var(--r);
  border:1px solid var(--bdr); box-shadow:var(--sh);
  padding:28px 30px; display:flex; align-items:center;
  gap:24px; margin-bottom:22px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.prof-hero::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l),var(--gold));
}
.prof-av {
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold); flex-shrink:0; box-shadow:var(--sh-gold);
}
.prof-info { flex:1; }
.prof-info h2 { font-family:'Outfit'; font-size:1.55rem; font-weight:800; color:var(--navy); letter-spacing:-.5px; margin-bottom:4px; }
.prof-sport { font-size:.85rem; color:var(--gold-d); font-weight:600; margin-bottom:8px; }
.prof-meta  { display:flex; gap:18px; flex-wrap:wrap; font-size:.8rem; color:var(--t3); }
.prof-meta span { display:flex; align-items:center; gap:6px; }
.prof-meta i { color:var(--gold-d); font-size:.75rem; }
.prof-badge { margin-left:auto; flex-shrink:0; }

/* Photo upload */
.photo-area {
  border:2px dashed var(--bdr2); border-radius:var(--rs);
  padding:20px; text-align:center; cursor:pointer;
  transition:all var(--tr); background:var(--off);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.photo-area:hover { border-color:var(--gold); background:rgba(233,166,32,.04); }
.photo-prev {
  width:100px; height:100px; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold); margin:0 auto; display:block;
  box-shadow:0 4px 16px rgba(232,160,32,.2);
  transition:opacity var(--tr);
}
.photo-area:hover .photo-prev { opacity:.8; }
/* Camera overlay */
.photo-wrap {
  position:relative; display:inline-block;
}
.photo-wrap::after {
  content:'\f030';
  font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; inset:0; border-radius:50%;
  background:rgba(11,24,41,.5); color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--tr); pointer-events:none;
}
.photo-area:hover .photo-wrap::after { opacity:1; }
.photo-hint { font-size:.8rem; color:var(--t3); line-height:1.5; }
.photo-hint span { color:var(--gold-d); font-weight:600; }
/* ── Styled photo upload zone (profile pages) ─────────────── */
.photo-upload-zone {
  display:flex; align-items:center; gap:20px;
  padding:16px; background:var(--off);
  border-radius:var(--r); border:1.5px dashed var(--bdr);
  cursor:pointer; transition:all var(--tr);
}
.photo-upload-zone:hover {
  border-color:var(--gold); background:rgba(233,166,32,.04);
}
.photo-upload-zone .puz-img {
  position:relative; flex-shrink:0;
}
.photo-upload-zone .puz-img img {
  width:80px; height:80px; border-radius:50%;
  object-fit:cover; border:3px solid var(--gold);
  box-shadow:0 4px 16px rgba(232,160,32,.3);
  display:block;
}
.photo-upload-zone .puz-cam {
  position:absolute; bottom:0; right:0;
  width:26px; height:26px; background:var(--gold);
  border-radius:50%; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
}
.photo-upload-zone .puz-cam i { font-size:.65rem; color:#fff; }
.photo-upload-zone .puz-info .puz-title {
  font-weight:700; font-size:.9rem; color:var(--navy); margin-bottom:3px;
}
.photo-upload-zone .puz-info .puz-hint {
  font-size:.78rem; color:var(--t3);
}

input[type=file] { display:block; width:100%; padding:0; border:1.5px solid var(--bdr); border-radius:var(--rs); font-size:.87rem; font-family:inherit; background:var(--off); cursor:pointer; box-sizing:border-box; overflow:hidden; }
input[type=file]::file-selector-button {
  padding:9px 16px; margin:0; border:none; border-right:1.5px solid var(--bdr);
  background:var(--navy); color:var(--gold); font-family:inherit; font-size:.82rem;
  font-weight:700; cursor:pointer; letter-spacing:.3px; text-transform:uppercase;
  transition:background .18s;
}
input[type=file]::file-selector-button:hover { background:#162840; }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; padding:0; border:none; border-radius:0; background:transparent; z-index:2; }

/* ══════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════ */
.empty {
  text-align:center; padding:60px 20px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.empty i {
  font-size:2.8rem; color:var(--t4);
  width:70px; height:70px; border-radius:50%;
  background:var(--off); display:flex; align-items:center; justify-content:center;
}
.empty h3 { font-family:'Outfit'; font-size:1.1rem; font-weight:700; color:var(--navy); letter-spacing:-.2px; }
.empty p  { font-size:.87rem; color:var(--t3); max-width:300px; line-height:1.65; }

/* ══════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════ */
.tab-container { margin-bottom:0; }
.tab-bar {
  display:flex; gap:2px; margin-bottom:20px;
  background:var(--off); padding:5px; border-radius:var(--rs);
  border:1px solid var(--bdr); width:fit-content;
}
.tab-btn {
  padding:8px 20px; border:none; cursor:pointer; border-radius:var(--rxs);
  font-family:'DM Sans'; font-size:.84rem; font-weight:600;
  background:none; color:var(--t2); transition:all var(--tr);
}
.tab-btn.active { background:var(--white); color:var(--navy); box-shadow:var(--sh); }
.tab-btn:hover:not(.active) { color:var(--t1); background:rgba(255,255,255,.6); }
.tab-pane { display:none; }
.tab-pane.active { display:block; animation:fadeIn .2s ease; }

/* ══════════════════════════════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════════════════════════════ */
/* ── AUTH PAGES — Bold Sports Design ─────────────────────────── */
.auth-page {
  min-height:100vh; display:flex;
  background:#060e1a;
  position:relative;
}

/* Auth decorative shapes (unused but referenced in HTML) */
.auth-shapes { display:none; }
.auth-sh { display:none; }

/* ── LEFT HERO PANEL ─────────────────────────────────────────── */
.auth-left {
  width:48%; min-height:100vh;
  background:linear-gradient(135deg, #060e1a 0%, #0d1f38 50%, #0a1628 100%);
  display:flex; flex-direction:column; justify-content:center;
  padding:0; position:relative; overflow:hidden;
  flex-shrink:0;
}

/* Diagonal stripe background */
.hero-stripes {
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
.hero-stripes span {
  position:absolute; display:block;
  background:linear-gradient(90deg,transparent,rgba(233,166,32,.04),transparent);
  transform:skewX(-15deg);
}
.hero-stripes span:nth-child(1){width:120px;height:100%;left:5%}
.hero-stripes span:nth-child(2){width:80px;height:100%;left:22%}
.hero-stripes span:nth-child(3){width:200px;height:100%;left:38%}
.hero-stripes span:nth-child(4){width:60px;height:100%;left:62%}
.hero-stripes span:nth-child(5){width:100px;height:100%;left:75%}

/* Giant decorative number */
.hero-accent-num {
  position:absolute; top:-20px; right:-40px;
  font-family:'Bebas Neue'; font-size:min(28rem, 55vw); line-height:1;
  color:rgba(233,166,32,.04); letter-spacing:-10px;
  pointer-events:none; z-index:0; user-select:none;
  overflow:hidden; max-width:100%;
}

/* Gold diagonal slash accent */
.auth-left::before {
  content:'';
  position:absolute; bottom:0; right:0;
  width:6px; height:100%;
  background:linear-gradient(180deg,transparent 0%,var(--gold) 30%,var(--gold-d) 70%,transparent 100%);
  z-index:2;
}

.hero-content {
  position:relative; z-index:1;
  padding:48px 44px;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}

.hero-tag {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(233,166,32,.12); border:1px solid rgba(233,166,32,.3);
  color:var(--gold); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  padding:6px 14px; border-radius:4px; margin-bottom:24px;
}

.hero-title {
  font-family:'Bebas Neue'; font-size:6.5rem; line-height:.9;
  color:var(--white); letter-spacing:4px; margin:0 0 16px;
}
/* Gold first letter accent */
.hero-title::first-letter { color:var(--gold); }

.hero-sub {
  font-size:.68rem; text-transform:uppercase; letter-spacing:3px;
  color:rgba(255,255,255,.3); font-weight:700; margin-bottom:28px;
}

.hero-divider {
  width:48px; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-d));
  margin-bottom:20px;
}

.hero-desc {
  color:rgba(255,255,255,.45); font-size:.88rem; line-height:1.8;
  max-width:300px; margin-bottom:40px;
}
.hero-desc strong { color:var(--gold); font-weight:600; }

/* Stats row */
.hero-stats {
  display:flex; gap:28px; align-items:flex-end;
}
.hero-stat {
  display:flex; flex-direction:column; gap:2px;
}
.hs-num {
  font-family:'Bebas Neue'; font-size:2.2rem; line-height:1;
  color:var(--white); letter-spacing:1px;
}
.hs-lbl {
  font-size:.65rem; text-transform:uppercase; letter-spacing:1.5px;
  color:rgba(255,255,255,.3); font-weight:700;
}

/* ── RIGHT SIGN-IN PANEL ─────────────────────────────────────── */
.auth-right {
  width:52%; display:flex; align-items:center; justify-content:center;
  padding:40px; position:relative; z-index:1;
  background:#f4f7fc; overflow-y:auto; min-height:100vh;
}
.auth-card {
  background:#fff; border-radius:var(--r);
  padding:48px 44px; width:100%; max-width:520px;
  box-shadow:0 4px 40px rgba(0,0,0,.08);
  animation:slideUp .3s cubic-bezier(.4,0,.2,1);
}
.auth-card h2 {
  font-family:'Bebas Neue'; font-size:2.8rem; font-weight:400;
  color:var(--navy); letter-spacing:3px; margin-bottom:4px;
}
.auth-sub { font-size:.875rem; color:var(--t3); margin-bottom:24px; line-height:1.5; }
.auth-foot {
  text-align:center; margin-top:24px; font-size:.85rem; color:var(--t3);
  padding-top:20px; border-top:1px solid var(--bdr);
}
.auth-foot a { color:var(--gold-d); font-weight:700; }
.auth-foot a:hover { color:var(--gold); }
.auth-note {
  text-align:center; margin-top:14px; font-size:.74rem; color:var(--t4);
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════ */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideR  { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }


/* ══════════════════════════════════════════════════════════
   DARK MODE  — applied via class="dark" on <html>
   ══════════════════════════════════════════════════════════ */
html.dark {
  --white:   #1a2234;
  --off:     #111827;
  --off2:    #0d1420;
  --card:    #1a2234;
  --t1:      #e8edf8;
  --t2:      #8fa8c8;
  --t3:      #4e6285;
  --t4:      #2e4060;
  --bdr:     #263450;
  --bdr2:    #2e3f60;
  --sh:   0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.5);
  --sh2:  0 4px 8px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.6);
  --sh3:  0 8px 24px rgba(0,0,0,.6), 0 32px 80px rgba(0,0,0,.7);
}

html.dark body            { background: var(--off); color: var(--t1); }
html.dark .topbar         { background: #1a2234; border-bottom-color: var(--bdr); }
html.dark .card           { background: var(--white); border-color: var(--bdr); }
html.dark .card-head      { background: rgba(255,255,255,.03); border-bottom-color: var(--bdr); }
html.dark .mp-panel       { background: var(--white); }
html.dark .mp-body        { background: var(--white); }
html.dark .mp-foot        { background: rgba(255,255,255,.03); border-top-color: var(--bdr); border-radius: 0 0 var(--r) var(--r); }
html.dark .auth-card      { background: #1a2234; }
html.dark input,
html.dark select,
html.dark textarea        { background: #111827; border-color: var(--bdr); color: var(--t1); }
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus  { border-color: var(--gold); }
html.dark input:disabled,
html.dark select:disabled { background: #0d1420; color: var(--t3); }
html.dark .btn-ghost      { background: rgba(255,255,255,.05); border-color: var(--bdr); color: var(--t2); }
html.dark .btn-ghost:hover{ background: rgba(255,255,255,.1); color: var(--t1); }
html.dark tbody tr:hover  { background: rgba(233,166,32,.05); }
html.dark thead th        { background: #0d1420; }
html.dark .stat-card      { background: var(--white); border-color: var(--bdr); }
html.dark .coach-card,
html.dark .prog-card,
html.dark .ev-card        { background: var(--white); border-color: var(--bdr); }
html.dark .f-group label  { color: var(--t1); }
html.dark .c-dialog,
html.dark .mp-panel       { background: #1a2234; }
html.dark .toast          { background: #263450; }
html.dark .filter-bar .s-wrap input { background: #111827; }
html.dark .hbox           { background: rgba(255,255,255,.05); border-color: var(--bdr); }
html.dark .tab-btn.active { color: var(--t1); background: rgba(233,166,32,.08); }
html.dark .off            { background: #0d1420; }
html.dark [style*="background:var(--off)"]  { background: #111827 !important; }
html.dark [style*="background:var(--white)"]{ background: #1a2234 !important; }
html.dark .prog-body,
html.dark .cc-body        { background: var(--white); }
html.dark .prof-hero      { background: linear-gradient(135deg,#060e1f,#132545); }
html.dark .sb-user        { background: rgba(255,255,255,.04); }
html.dark .alert          { opacity: .9; }

/* Dark mode toggle button */
.dark-toggle {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1.5px solid var(--bdr);
  color: var(--t3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; transition: all var(--tr); flex-shrink: 0;
}
.dark-toggle:hover { background: rgba(233,166,32,.12); color: var(--gold); border-color: rgba(233,166,32,.5); }
html.dark .dark-toggle    { background: rgba(233,166,32,.12); color: var(--gold); border-color: rgba(233,166,32,.4); }


/* ══════════════════════════════════════════════════════════
   SIDEBAR SLIDE-IN ON HOVER
   ══════════════════════════════════════════════════════════ */

/* Sidebar transform is defined in the base .sidebar rule above */

/* Content fills full width — no offset */
.main-wrap { margin-left: 0 !important; }
.main-wrap.sb-expanded { margin-left: 0 !important; }

/* Invisible hover trigger strip on left edge */
.sb-trigger {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 18px;
  z-index: 199;
  cursor: e-resize;
}

/* Overlay backdrop when sidebar is open */
.sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.sb-backdrop.visible { display: block; }

/* ── Tooltips ── */
.nav-item { position: relative; }
.nav-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(var(--sb-w) + 6px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--navy2);
  color: var(--white);
  font-size: .78rem; font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--sh2);
  border: 1px solid rgba(255,255,255,.08);
  z-index: 9999;
  transition: opacity .15s, transform .15s;
}
.nav-item[data-tooltip]::before {
  content: '';
  position: absolute;
  left: calc(var(--sb-w) + 0px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--navy2);
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity .15s;
}
.sidebar.sb-open .nav-item[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar.sb-open .nav-item[data-tooltip]:hover::before {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media(max-width:1200px){
  .auth-left{width:42%}
  .auth-right{width:58%}
  .hero-title{font-size:5rem}
  .hero-content{padding:48px 40px}
}
@media(max-width:900px){
  .auth-page{flex-direction:column}
  .auth-left{width:100%;min-height:0;justify-content:flex-start}
  .auth-right{width:100%;padding:24px 20px}
  .hero-content{padding:36px 28px}
  .hero-title{font-size:4rem}
  .hero-accent-num{font-size:16rem}
  .hero-stats{gap:20px}
}
@media(max-width:600px){
  .auth-left{display:none}
  .auth-right{min-height:100vh;align-items:flex-start;padding:28px 16px}
  .auth-card{padding:28px 20px;border-radius:var(--r);box-shadow:none}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sb-trigger{display:none}
  .main-wrap{padding-left:0}
  .topbar{padding:0 14px}
  .tb-mobile-btn{display:flex;align-items:center;justify-content:center}
  .tb-clock{display:none}
  .tb-breadcrumb{font-size:.78rem}
  .card{padding:16px}
  .fg.fg-2,.fg.fg-3,.fg.fg-4{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .dash-grid{grid-template-columns:1fr}
  .ph{gap:12px}
  .ph-title h1{font-size:1.4rem}
  .ph-actions{width:100%}
  .ph-actions .btn{flex:1;justify-content:center}
  .mp-overlay{padding:10px}
  .mp-body{padding:18px 20px}
  .mp-head{padding:16px 20px}
  .mp-foot{padding:14px 20px}
  .mp-foot .btn{flex:1;justify-content:center}
  .coach-grid{grid-template-columns:1fr}
  .profile-grid{grid-template-columns:1fr}
  .prof-hero{padding:20px 18px;gap:16px}
  .prof-badge{margin-left:0}
  .f-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}

  /* Filter dropdowns (status/role/campus, etc.) were wrapping into a
     full-width vertical stack on narrow screens since .filter-bar's
     flex-wrap had nowhere else to put them — keep them in one
     horizontal, scrollable row instead, same treatment as .f-tabs. */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .filter-bar select{flex-shrink:0;width:auto;min-width:130px}
  .filter-bar .s-wrap{flex-shrink:0;min-width:180px}
  .sb-user{padding:14px 16px}
  .page-body{padding:16px}
  table{font-size:.78rem}
  thead th,tbody td{padding:8px 10px!important;white-space:nowrap}

  /* Prevent iOS Safari's forced zoom-in when focusing any field under
     16px font-size — every form in the app used .9rem (14.4px), which
     triggers this on every single tap into a text field, select, or
     textarea on an iPhone. */
  input,select,textarea{font-size:16px!important}

  /* Icon-only action buttons (edit/delete/verify in tables) were only
     ~20-24px tall — well under the ~44px minimum recommended touch
     target size, making mis-taps likely. Keep visual size the same,
     just pad out the tappable area. */
  .btn-xs,.btn-sm{min-height:40px;min-width:40px}
  .tbl-wrap .btn-xs{padding:8px 10px}

  /* Printable/official-layout forms (SCUAA eligibility form, ID cards)
     intentionally keep their fixed document proportions so they still
     look right when saved as PDF or printed — but the outer padding
     doesn't need to eat into a 375px screen the same way it does on
     paper. */
  #eligibilityForm{padding:20px 18px!important}
}
@media(max-width:420px){
  .ph-actions{flex-direction:column}
  .stat-card{padding:14px}
}