:root{
  --navy:#0e1b33;--navy-2:#16294d;--navy-3:#22407a;
  --ink:#131c30;--muted:#67708a;--muted-2:#98a1b8;
  --bg:#eef1f7;--surface:#ffffff;--surface-2:#f6f8fc;
  --line:#e3e7f0;--line-2:#eef1f7;
  --red:#e0233a;--red-2:#bd1a2e;--red-soft:#fce6e9;
  --blue:#0b57c4;--blue-2:#0846a3;--blue-3:#3a7ce0;--blue-soft:#e4edfb;
  --pitch:#1c8f47;--pitch-d:#16793a;--pitch-l:#26a457;--pitch-deep:#0c5a2c;
  --green:#1c8f47;--green-soft:#e2f4e9;
  --sh-sm:0 1px 2px rgba(14,27,51,.07),0 1px 3px rgba(14,27,51,.05);
  --sh:0 6px 20px rgba(14,27,51,.08),0 2px 6px rgba(14,27,51,.05);
  --sh-lg:0 24px 55px rgba(14,27,51,.2),0 8px 20px rgba(14,27,51,.1);
  --r:18px;--r-sm:12px;--r-xs:9px;--sbw:246px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(11,87,196,.18)}
.mono-num{font-family:'Archivo',sans-serif;font-weight:800}

/* ══════════ LOGIN ══════════ */
#login{font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:22px;background:var(--pitch)}
.pitchbg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(75% 55% at 50% 2%,rgba(170,230,170,.30),transparent 60%),radial-gradient(40% 30% at 18% 28%,rgba(255,255,255,.06),transparent 60%),radial-gradient(45% 34% at 82% 72%,rgba(0,0,0,.12),transparent 60%),linear-gradient(180deg,#2a9b57 0%,#1c8a45 40%,#127038 72%,#0c5b2c 100%)}
.pitchbg .stripes{position:absolute;inset:0;mix-blend-mode:soft-light;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0px,rgba(255,255,255,.02) 30px,rgba(0,0,0,.03) 34px,rgba(0,0,0,.12) 64px,rgba(0,0,0,.03) 94px,rgba(255,255,255,.02) 98px,rgba(255,255,255,.12) 128px)}
.pitchbg .sheen{position:absolute;inset:0;mix-blend-mode:soft-light;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px),linear-gradient(115deg,rgba(255,255,255,.12) 0%,transparent 42%,transparent 70%,rgba(0,0,0,.16) 100%)}
.pitchbg .flines{position:absolute;inset:0;width:100%;height:100%;opacity:.28;filter:drop-shadow(0 0 1px rgba(255,255,255,.25))}
.pitchbg .vig{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 42%,transparent 36%,rgba(3,22,11,.72) 100%),linear-gradient(180deg,rgba(3,22,11,.48),transparent 16%,transparent 70%,rgba(3,22,11,.6))}
.lcard{position:relative;z-index:3;width:100%;max-width:400px;border:2.5px solid transparent;border-radius:16px;background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.86)) padding-box,linear-gradient(140deg,var(--red) 0%,var(--blue) 100%) border-box;backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);box-shadow:0 24px 60px -18px rgba(3,20,10,.5),0 6px 20px rgba(3,20,10,.22);padding:34px 32px 28px;text-align:center;animation:pop .5s cubic-bezier(.22,1,.36,1) both}
.lcard::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 22%);mix-blend-mode:overlay}
.lcard .crest{width:100px;height:100px;margin:6px auto 16px;filter:drop-shadow(0 10px 20px rgba(14,27,51,.28))}
.lcard .crest img{width:100%;height:100%;object-fit:contain}
.lcard .wordmark{font-family:'Archivo',sans-serif;font-weight:900;font-size:28px;letter-spacing:-.6px;line-height:1;color:var(--navy)}
.lcard .wordmark em{font-style:normal;color:var(--red)}
.lcard .tagline{
  margin-top:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;

  font-size:10px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--muted-2);
  font-weight:700;
  line-height:1.35;
}
.lcard .lrule{height:1px;background:var(--line);margin:18px 0}
.field{margin-bottom:16px;text-align:left}
.field label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:7px;letter-spacing:.3px}
.field .wrap{position:relative}
.field .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-2);display:flex}
.field input{width:100%;padding:13px 14px 13px 42px;font-size:15px;font-weight:500;background:var(--surface-2);border:1.5px solid var(--line);border-radius:11px;outline:none;color:var(--ink);transition:.2s}
.field input:focus{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(14,27,51,.10),0 1px 2px rgba(14,27,51,.05)}
/* password show/hide eye toggle */
#pw{padding-right:44px}
/* hide the browser's native password reveal (Edge/IE) so only our eye shows */
#pw::-ms-reveal,#pw::-ms-clear{display:none}
.field .wrap .pweye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:auto;min-height:0;padding:6px;margin:0;background:none;border:0;border-radius:8px;color:var(--muted-2);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}
.field .wrap .pweye:hover{color:var(--navy)}
.field .wrap .pweye svg{width:19px;height:19px;display:block}
.slider{margin-top:18px;text-align:left}
.slider .lab{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--muted);margin-bottom:8px}
.track{position:relative;height:58px;border-radius:29px;background:var(--navy);overflow:hidden;user-select:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.track .fill{position:absolute;left:0;top:0;bottom:0;width:58px;border-radius:29px;background:linear-gradient(90deg,var(--pitch-d),var(--pitch-l));transition:width .05s linear}
.track .goalnet{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:28px;
  color:#ffffff;
  opacity:.82;
  pointer-events:none;
  z-index:1;
}

.track .goalnet svg{
  width:100%;
  height:100%;
}

.track.done .goalnet{
  opacity:1;
  animation:goalPulse .22s ease-out;
}

@keyframes goalPulse{
  0%{transform:translateY(-50%) scale(1)}
  45%{transform:translateY(-50%) scale(1.12)}
  100%{transform:translateY(-50%) scale(1)}
}
.track .txt{
  position:absolute;
  left:56px;
  right:56px;
  top:0;
  bottom:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#ffffff;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;

  pointer-events:none;
  z-index:2;
}
.knob{position:absolute;left:4px;top:4px;width:50px;height:50px;border-radius:50%;background:transparent;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 6px 16px rgba(3,22,11,.45),0 1px 3px rgba(0,0,0,.3);touch-action:none;z-index:3}
.knob:active{cursor:grabbing}
.knob .ball{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.track.done .fill{width:100%!important}
.track.done .txt{color:#fff}
.login-btn{width:100%;margin-top:8px;padding:14px;background:var(--navy);color:#fff;border:none;border-radius:11px;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;letter-spacing:.4px;transition:.2s}
.login-btn:hover{background:var(--navy-2)}
.demo{margin-top:18px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:11px;color:var(--muted);line-height:1.6}
.demo b{color:var(--ink)}
.switch-portal{margin-top:16px;font-size:12px;color:var(--muted)}
.switch-portal a{color:var(--blue);font-weight:700;text-decoration:none}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ══════════ APP LAYOUT ══════════ */
#app{display:none;height:100%}
#app.on{display:flex}
.sidebar{width:var(--sbw);flex:none;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:20px 14px;position:relative}
.sidebar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(58,124,224,.4),var(--red),transparent)}
.sb-brand{display:flex;align-items:center;gap:11px;padding:2px 8px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.sb-brand .c{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.sb-brand .c img{width:100%;height:100%;object-fit:contain}
.sb-brand .wm{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.3px;line-height:1.05}
.sb-brand .wm em{font-style:normal;color:#ff6b7d}
.sb-brand .wm .r{display:block;font-size:9px;letter-spacing:1.5px;color:rgba(255,255,255,.5);font-weight:700;font-family:'Plus Jakarta Sans',sans-serif}
.navitem{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:rgba(255,255,255,.62);font-weight:600;font-size:13.5px;border:none;background:none;width:100%;text-align:left;position:relative;transition:.16s;margin-bottom:3px}
.navitem svg{width:19px;height:19px;flex:none}
.navitem:hover{color:#fff;background:rgba(255,255,255,.05)}
.navitem.on{
  color:#fff;
  background:rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.navitem.on::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--red),var(--blue));
}
.navitem .count{margin-left:auto;font-size:11px;font-weight:800;background:var(--red);color:#fff;border-radius:20px;padding:2px 8px}
.sb-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.sb-user{display:flex;align-items:center;gap:11px;padding:6px 8px}
.sb-user .av{width:38px;height:38px;border-radius:11px;flex:none;background:linear-gradient(150deg,var(--blue-2),var(--blue-3));display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;color:#fff;font-size:14px}
.sb-user .nm{font-weight:700;font-size:13px}
.sb-user .rl{font-size:11px;color:rgba(255,255,255,.5)}
.sb-user .out{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.5);display:flex;padding:6px;border-radius:8px;transition:.2s}
.sb-user .out:hover{color:var(--red);background:rgba(255,255,255,.06)}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{flex:none;height:66px;padding:0 26px;display:flex;align-items:center;gap:18px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-logo{display:none;width:36px;height:36px;object-fit:contain;flex:none;margin-left:auto}
.topbar .hamb{display:none;background:none;border:1px solid var(--line);border-radius:9px;padding:8px;color:var(--ink)}
.pgtitle{font-family:'Archivo',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.4px}
.pgtitle .day{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.3px;margin-top:1px}
.search{margin-left:auto;position:relative;width:250px;max-width:36vw}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.search input{width:100%;padding:9px 12px 9px 36px;font-size:13px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;outline:none;transition:.2s;font-family:inherit}
.search input:focus{border-color:var(--blue);background:#fff}
.newbtn{flex:none;background:var(--navy);color:#fff;border:none;border-radius:10px;padding:10px 15px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px;transition:.2s}
.newbtn:hover{background:var(--navy-2)}
.newbtn svg{width:16px;height:16px}
.work{flex:1;overflow-y:auto;overflow-x:hidden;padding:26px;background:radial-gradient(115% 55% at 100% 0%,rgba(11,87,196,.06),transparent 55%),radial-gradient(85% 50% at 0% 100%,rgba(224,35,58,.04),transparent 60%),linear-gradient(180deg,rgba(238,242,249,.88),rgba(232,237,246,.60)),url('../assets/bg-pitch.jpg') center bottom/cover no-repeat fixed}
.work::-webkit-scrollbar{width:9px}
.work::-webkit-scrollbar-thumb{background:#d3d9e6;border-radius:8px;border:2px solid var(--bg)}

.view{display:none}
.view.on{display:block;animation:fade .32s ease;max-width:1320px}
/*#v-dash{
  max-width:1180px;
  margin:0 auto;--sri1
}
*/

#v-dash{
  max-width:1240px;
  margin:0;
}

/* in-view search (mobile-friendly, lives in toolbars) */
.viewsearch{position:relative;flex:1;min-width:180px}
.viewsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.viewsearch input{width:100%;padding:9px 12px 9px 36px;font-size:13px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;outline:none;font-family:inherit;transition:.2s}
.viewsearch input:focus{border-color:var(--blue);background:#fff}
.newbtn .nbtxt{display:inline}

/* mobile bottom nav (hidden on desktop) */
.mnav{display:none}
.seclabel{display:flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.seclabel .tick{width:14px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--red),var(--blue))}
/*.seclabel.mt{margin-top:28px}--sri3*/

.seclabel.mt{
  margin-top:20px;
}

.kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:18px;
}

.kpi{
  min-height:82px;
padding:12px 14px;

  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.84);
  border-radius:14px;

  display:grid;
  grid-template-columns:38px 1fr;
  column-gap:12px;
  align-items:center;

  box-shadow:0 3px 12px rgba(14,27,51,.06);

  position:relative;
  overflow:hidden;
}
.kpi::before{
  content:'';
  position:absolute;
  top:0;
  left:16px;
  width:28px;
  height:3px;
  border-radius:0 0 4px 4px;
  background:var(--navy);
}

.kpi:has(.chip.green)::before{
  background:var(--green);
}

.kpi:has(.chip.blue)::before{
  background:var(--blue);
}

.kpi:has(.chip.red)::before{
  background:var(--red);
}



.kpi .chip{
  grid-column:1;
  grid-row:1 / 4;

  width:44px;
  height:44px;
  border-radius:11px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0;
  border:0;
  box-shadow:none;
}

.kpi .chip img{
  width:26px;
  height:26px;
  display:block;
  object-fit:contain;
}

.kpi .v{
  grid-column:2;
  grid-row:1;

  font-family:'Archivo',sans-serif;
  font-weight:800;
  font-size:22px;
  line-height:1;
  letter-spacing:-.3px;
  color:var(--navy);
}

.kpi .l{
  grid-column:2;
  grid-row:2;
  font-size:10.5px;
  font-weight:600;
  color:var(--muted);
  margin-top:4px;
}

.kpi .trend{
  grid-column:2;
  grid-row:3;
  font-size:9.5px;
  font-weight:600;
  color:var(--muted);
  margin-top:4px;
}


.chip.navy{
  background:#eef3fb;
}

.chip.green{
  background:#e8f6ee;
}

.chip.blue{
  background:#edf3fd;
}

.chip.red{
  background:#fdecef;
}
/*
.dash{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);
  gap:16px;
  margin-top:18px;
  align-items:start;--sri2
}*/

.dash{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);
  gap:16px;
  margin-top:18px;
  align-items:start;
}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden}
.panel .ph{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.panel .ph h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.2px}
.panel .ph a{font-size:12px;color:var(--blue);font-weight:700;text-decoration:none;cursor:pointer}
.panel .pb{padding:8px 20px 16px}

.sesrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.sesrow:last-child{border-bottom:none}
.sestime{width:74px;flex:none;text-align:center}
.sestime .t{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--navy);white-space:nowrap}
.sestime .p{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.5px}
.sesbar{width:3px;align-self:stretch;border-radius:3px;flex:none}
.sesinfo{flex:1;min-width:0}
.sesinfo .ti{font-weight:700;font-size:14px}
.sesinfo .mt{font-size:12px;color:var(--muted);margin-top:2px}
.sescount{flex:none;text-align:right}
.sescount .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px}
.sescount .l{font-size:10px;color:var(--muted);letter-spacing:.3px}

.duerow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.duerow:last-child{border-bottom:none}
.duerow .av{width:36px;height:36px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;color:#fff;font-size:13px}
.duerow .nm{font-weight:700;font-size:13px}
.duerow .mt{font-size:11px;color:var(--muted)}
.duerow .amt{margin-left:auto;font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;color:var(--red)}

.actitem{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);align-items:flex-start}
.actitem:last-child{border-bottom:none}
.actitem .d{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none}
.actitem .tx{font-size:13px;color:var(--ink)}
.actitem .tx b{font-weight:700}
.actitem .tm{font-size:11px;color:var(--muted-2);margin-top:2px}

.grpgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,260px));
  gap:12px;
  justify-content:start;
}
.grpcard{
  min-height:auto;
  padding:14px 16px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:13px;
}
.grpcard .nm{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px}
.grpcard .nm .dot{width:9px;height:9px;border-radius:50%}
.grpcard .stat{font-size:12px;color:var(--muted);margin-top:8px}
.grpcard .stat b{font-family:'Archivo',sans-serif;color:var(--ink);font-weight:800}

.tablecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden}
.tabtools{display:flex;gap:10px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.filterchips{display:flex;gap:7px;flex-wrap:wrap}
.fchip{font-size:12px;font-weight:700;padding:6px 13px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);transition:.16s}
.fchip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);font-weight:800;padding:13px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tbl td{padding:14px 20px;border-bottom:1px solid var(--line-2);font-size:13px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
/* Center the Attendance/Fees columns in the desktop table (mobile card view untouched) */
@media(min-width:641px){ .tbl th.tc,.tbl td.tc{text-align:center} .tbl td.tc .attmini{justify-content:center} #trial-head th,#trial-body td{white-space:nowrap} .tablecard.fit{width:-moz-fit-content;width:fit-content;max-width:100%} .tablecard.fit .tbl{width:auto} }
.tbl tr:hover td{background:var(--surface-2)}
.pcell{display:flex;align-items:center;gap:14px}
.pcell .av{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;color:#fff;font-size:14px}
.pcell .nm{font-weight:700}
.pcell .sub{font-size:11px;color:var(--muted)}
.pcell>div:not(.av){flex:1;min-width:0;text-align:left}
.lvlchip{display:inline-flex;align-items:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;letter-spacing:.3px;color:var(--navy);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:3px 8px}
.attmini{display:flex;align-items:center;gap:9px}
.attmini .bar{width:66px;height:7px;background:var(--line-2);border-radius:5px;overflow:hidden}
.attmini .bar span{display:block;height:100%;border-radius:5px}
.attmini .pc{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;border-radius:20px;padding:5px 11px}
.pill.paid{color:var(--green);background:var(--green-soft)}
.pill.due{color:#8a5a00;background:rgba(230,160,20,.16)}
.pill.overdue{color:var(--red);background:var(--red-soft)}
.pill.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.rowbtn{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--navy);transition:.16s}
.rowbtn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

.rc-head{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.rc-session-wrap{
  position:relative;
  width:100%;
  max-width:420px;
}

.rc-select{
  width:100%;
  height:52px;
  padding:0 42px 0 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  font-family:inherit;
  font-size:14px;
  font-weight:650;
  color:var(--navy);
  outline:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:0 2px 8px rgba(14,27,51,.05);
}

.rc-session-arrow{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-52%);
  font-size:20px;
  line-height:1;
  color:var(--muted);
  pointer-events:none;
}
.rc-summary{margin-left:auto;display:flex;gap:22px}
.rc-summary .s{text-align:center}
.rc-summary .s .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;line-height:1}
.rc-summary .s .t{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.rc-summary .s.pr .n{color:var(--green)}.rc-summary .s.ab .n{color:var(--red)}.rc-summary .s.rt .n{color:var(--navy)}
.rc-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden}
.rc-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-2)}
.rc-row:last-child{border-bottom:none}
.rc-row .av{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;color:#fff;font-size:14px}
.rc-row .nm{font-weight:700;font-size:14px}
.rc-row .sub{font-size:11px;color:var(--muted)}
.seg{margin-left:auto;display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{border:none;background:none;padding:7px 15px;border-radius:8px;font-size:12px;font-weight:700;color:var(--muted);transition:.14s}
.seg button.on-p{background:var(--green);color:#fff}
.seg button.on-a{background:var(--red);color:#fff}
.rc-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}
.btn-ghost{background:var(--surface);border:1.5px solid var(--line);border-radius:11px;padding:11px 18px;font-weight:700;font-size:13px;color:var(--navy)}
.btn-primary{background:var(--navy);color:#fff;border:none;border-radius:11px;padding:11px 20px;font-weight:700;font-size:13px;transition:.2s}
.btn-primary:hover{background:var(--navy-2)}

.schgrid{display:grid;grid-template-columns:repeat(auto-fill,min(100%,300px));gap:16px}
.schcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden}
.schcard .bar{height:4px}
.schcard .in{padding:18px 20px}
.schcard .dt{font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;color:var(--navy)}
.schcard .ti{font-weight:800;font-size:16px;margin:8px 0 3px}
.schcard .mt{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:7px}
.schcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.schcard .coach{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.schcard .coach .cav{width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px}
.schcard .cap{font-size:12px;color:var(--muted);font-weight:700}

#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(26px) scale(.94);z-index:130;background:var(--navy);color:#fff;padding:10px 22px 10px 10px;border-radius:40px;box-shadow:0 20px 46px rgba(3,10,25,.55);font-weight:700;font-size:14px;display:flex;align-items:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .32s cubic-bezier(.34,1.56,.64,1)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
#toast .toast-ic{width:30px;height:30px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 3px 8px rgba(34,197,94,.4)}
#toast .toast-ic svg{width:17px;height:17px;color:#fff}

#modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.5);backdrop-filter:blur(3px)}
#modal.show{display:flex}
#sched-modal{position:fixed;inset:0;z-index:91;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#sched-modal.show{display:flex}
#squad-modal{position:fixed;inset:0;z-index:91;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#squad-modal.show{display:flex}
#loc-modal{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#loc-modal.show{display:flex}
#term-modal{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#term-modal.show{display:flex}
#profile{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.5);backdrop-filter:blur(3px)}
#profile.show{display:flex}
#perf{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#perf.show{display:flex}
.prof-head{display:flex;align-items:flex-start;gap:14px}
.prof-head .av{width:56px;height:56px;border-radius:15px;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;color:#fff;font-size:20px}
.prof-head .nm{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.3px;line-height:1.1}
.prof-head .sub{font-size:12px;color:var(--muted);margin-top:3px}
.prof-chips{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.prof-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:4px 10px;color:var(--navy)}
.prof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.prof-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center}
.prof-stat .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;line-height:1;text-transform:capitalize}
.prof-stat .t{font-size:10px;color:var(--muted);letter-spacing:.4px;margin-top:5px;text-transform:uppercase;font-weight:700}
.prof-fee{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.prof-fee .k{font-size:12px;color:var(--muted);font-weight:600}
.prof-fee .k b{color:var(--ink);font-weight:700;display:block;font-size:13px;margin-top:1px}
.prof-fee .amt{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px}
.prof-section-label{font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:18px 0 12px;display:flex;align-items:center;gap:9px}
.prof-section-label::after{content:'';flex:1;height:1px;background:var(--line)}
.prof-perf-tallies{display:flex;gap:10px;margin-bottom:14px}
.prof-perf-tallies .t{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 8px;text-align:center}
.prof-perf-tallies .t .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px}
.prof-perf-tallies .t .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:3px;font-weight:700}
.prof-sk{margin-bottom:9px}
.prof-sk .top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.prof-sk .top .s{font-weight:600}
.prof-sk .top .v{font-family:'Archivo',sans-serif;font-weight:800;color:var(--navy)}
.prof-sk .bar{height:7px;background:var(--line-2);border-radius:5px;overflow:hidden}
.prof-sk .bar span{display:block;height:100%;border-radius:5px}
.prof-note{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid;border-image:linear-gradient(180deg,var(--red),var(--blue)) 1;border-radius:0 10px 10px 0;padding:12px 14px;font-size:13px;font-style:italic;color:#41485e;line-height:1.5}
.prof-note.empty{font-style:normal;color:var(--muted-2)}
.rep-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.rep-item:last-child{border-bottom:none;padding-bottom:0}
.rep-item .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(180deg,var(--red),var(--blue));margin-top:5px;flex:none}
.rep-item .rd{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;color:var(--navy)}
.rep-item .rs{font-size:12.5px;color:#41485e;line-height:1.5;margin-top:2px}
.rep-empty{font-size:13px;color:var(--muted-2);padding:6px 0}
.pf-skill{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.pf-skill label{font-size:13px;font-weight:600}
.pf-skill .rng{display:flex;align-items:center;gap:10px;flex:1;max-width:210px}
.pf-skill input[type=range]{flex:1;accent-color:var(--blue)}
.pf-skill .num{font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;color:var(--navy);width:26px;text-align:right}
.pf-sublabel{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:6px 0 12px}
.modalcard{width:100%;max-width:440px;border:2px solid transparent;border-radius:22px;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,var(--red) 0%,var(--blue) 100%) border-box;box-shadow:0 28px 64px -20px rgba(14,27,51,.5),0 8px 22px rgba(14,27,51,.16);animation:pop .35s cubic-bezier(.22,1,.36,1) both;display:flex;flex-direction:column;max-height:calc(100dvh - 24px);overflow:hidden}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modalcard .mh{padding:22px 24px 0;display:flex;justify-content:space-between;align-items:flex-start}
.modalcard .mh h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px}
.modalcard .mh .x{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.modalcard .mb{padding:20px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mfield{margin-bottom:14px}
.mfield label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.mfield input,.mfield select,.mfield textarea{width:100%;padding:11px 13px;font-size:14px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface-2);outline:none;font-family:inherit;color:var(--ink);transition:.2s;resize:vertical}
.mfield textarea:focus{border-color:var(--blue);background:#fff}
.mfield input:focus,.mfield select:focus{border-color:var(--blue);background:#fff}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Bottom-align inputs when one label wraps to more lines than the other (keeps the two inputs level) */
.mrow-bottom .mfield{display:flex;flex-direction:column}
.mrow-bottom .mfield input{margin-top:auto}
.modalcard .mf{padding:16px 24px 22px;display:flex;justify-content:flex-end;gap:10px}

@media(max-width:1000px){.dash{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  #app.on{flex-direction:column}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:70;transform:translateX(-100%);transition:transform .28s cubic-bezier(.22,1,.36,1);box-shadow:var(--sh-lg)}
  .sidebar.open{transform:none}
  .topbar{padding:0 16px;gap:12px}
  .topbar .hamb{display:flex}
  .topbar-logo{display:block}
  .search{display:none}
  .newbtn .nbtxt{display:none}
  .newbtn{padding:10px}
  .pgtitle{font-size:18px}
  #scrim{position:fixed;inset:0;z-index:65;background:rgba(14,27,51,.4);display:none}
  #scrim.show{display:block}
  .work{padding:16px 16px 84px}
  /* mobile bottom nav */
  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:66;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 20px rgba(14,27,51,.06)}
  .mnb{flex:1;background:none;border:none;padding:9px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted-2);position:relative;transition:color .16s}
  .mnb.on{color:var(--navy)}
  .mnb.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--blue))}
  .mnb svg{width:21px;height:21px}
  .mnb .ml{font-size:9.5px;font-weight:700;letter-spacing:.2px}
  .mnb .mc{position:absolute;top:6px;right:calc(50% - 18px);min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--surface)}
}
@media(max-width:640px){

/* ===== Mobile squad overview ===== */

/* Squad overview: 2 compact cards per row, wraps to more rows automatically, no horizontal scroll */
.grpgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:2px 0 4px;
}

.grpcard{
  width:auto;
  min-width:0;
  min-height:auto;
  padding:12px 13px;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(14,27,51,.05);
}

.grpcard .nm{font-size:13px;min-width:0}
.grpcard .nm>span:not(.dot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grpcard .stat{font-size:11px;margin-top:6px;overflow-wrap:anywhere}

/* Upcoming Sessions: never overflow the panel on mobile */
.sesrow{gap:10px}
.sestime{width:68px}
.sesinfo{min-width:0}
.sesinfo .ti,.sesinfo .mt{overflow-wrap:anywhere}
.sescount{min-width:0}

  .tabtools{gap:12px}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm);margin-bottom:12px;overflow:hidden}
  .tbl tr:hover td{background:transparent}
  .tbl td{border:none;border-top:1px solid var(--line-2);padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:right}
  .tbl td::before{content:attr(data-label);font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted-2);text-align:left}
  .tbl td.cell-player{border-top:none;background:var(--surface-2);padding:13px 16px}
  .tbl td.cell-player::before{display:none}
  .tbl td.cell-player .pcell{width:100%}
  .tbl td.cell-action{padding:12px 16px}
  .tbl td.cell-action::before{display:none}
  .tbl td.cell-action .rowbtn{flex:1;padding:11px;text-align:center}
  .attmini{justify-content:flex-end}
  .tbl td[colspan]{display:block;text-align:center;padding:24px 16px}
  .tbl td[colspan]::before{display:none}
}
@media(max-width:560px){.rc-summary{width:100%;margin-left:0;justify-content:space-between}}
@media(max-width:480px){
  .rc-row{gap:10px;padding:10px 14px}
  .rc-row .av{width:34px;height:34px;font-size:13px}
  .seg button{padding:7px 12px;font-size:12px}

  .rc-session-wrap{
    width:100%;
    max-width:none;
  }

  .rc-select{
    width:100%;
    height:48px;
    padding-left:14px;
    padding-right:40px;
    font-size:14px !important;
  }
}
@media(max-width:400px){.kpis{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.lrow{display:flex;align-items:center;justify-content:space-between;margin:2px 0 18px;font-size:12.5px}
.remember{display:inline-flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;user-select:none}
.remember input{width:15px;height:15px;accent-color:var(--navy);cursor:pointer}
.remember span{font-weight:500}
.forgot{color:var(--navy);font-weight:500;text-decoration:none;transition:opacity .15s}
.forgot:hover{opacity:.65;text-decoration:underline}
.switch-portal a{transition:opacity .15s}
.switch-portal a:hover{opacity:.7}
.knob{transition:box-shadow .2s}
.knob:hover{box-shadow:0 8px 20px rgba(3,22,11,.5),0 2px 4px rgba(0,0,0,.3)}
.lspin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;vertical-align:-2px;margin-right:8px;animation:lspin .6s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}


@media(max-width:560px){
  .mrow{grid-template-columns:1fr}
  .mh{padding:16px 18px}

  /* Modal footer - stays below form fields */
  .mf{
    padding:16px 18px 18px;
    position:static;
    bottom:auto;
    background:var(--surface);
    border-top:1px solid var(--line);
    flex-shrink:0;
  }

  .modalcard .mf{
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }

  .modalcard .mf button{
    min-height:44px;
    margin:0;
  }

  /* attendance */
  .rc-row{gap:8px;padding:10px 12px}
  .rc-row .av{width:32px;height:32px;font-size:12px}
  .seg{margin-left:auto}
  .seg button{padding:7px 10px;font-size:12px;min-height:38px}
  .rc-summary{width:100%;margin-left:0;justify-content:space-between;flex-wrap:wrap;gap:8px}
}
  


@media(max-width:400px){
  .mb{padding:16px 16px}
  .rc-summary .s{min-width:0}
}


/* ===== Real football on the sign-in slider (green fully masked) ===== */
.knob{ background: var(--navy); }
.knob .ball{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.track .fill{
  left: 4px;
  top: 4px;
  bottom: auto;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

/* ===== Footer: match the parent portal (one line) ===== */
.lfoot{margin-top:16px;font-size:11px;color:var(--muted-2);text-align:center;white-space:nowrap}
.lfoot b{color:var(--navy)}

/* ===== Dashboard: cards & rows are clickable (visual affordance) ===== */
.kpi[onclick], .sesrow[onclick], .duerow[onclick], .grpcard[onclick]{
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.sesrow[onclick]:hover, .duerow[onclick]:hover{
  background: var(--surface-2);
  border-radius: 12px;
}
.ph a{ cursor: pointer; }

.schcard[onclick]{ transition: transform .12s ease, box-shadow .12s ease; }
.schcard[onclick]:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(14,27,51,.12); }

/* Inventory modal */
#inv-modal{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#inv-modal.show{display:flex}
#req-modal{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#req-modal.show{display:flex}
/* Required field validation */
.req{color:var(--red);font-weight:800}
.req-msg{display:none;color:var(--red);font-size:12px;margin-top:5px;font-weight:600}
.req-msg.show{display:block}
.input-error{border-color:var(--red) !important;box-shadow:0 0 0 2px rgba(224,35,58,.14) !important}
#coach-edit-modal,#coach-add-modal{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#coach-edit-modal.show,#coach-add-modal.show{display:flex}

/* ===== Tactile button feedback (hover + press) ===== */
.btn-primary,.btn-ghost,.newbtn,.rowbtn,.modalcard .mh .x{
  cursor:pointer;
  transition:transform .08s ease, background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary:active,.btn-ghost:active,.newbtn:active,.rowbtn:active,.modalcard .mh .x:active{
  transform:scale(.95);
}
.btn-primary:hover,.newbtn:hover{ box-shadow:0 6px 16px rgba(14,27,51,.22); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--muted-2); }
.modalcard .mh .x:hover{ background:var(--line); color:var(--navy); }
.btn-primary:disabled,.newbtn:disabled,.rowbtn:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
#toast .toast-ic .ic-err{display:none}
#toast.err .toast-ic{background:var(--red);box-shadow:0 3px 8px rgba(224,35,58,.4)}
#toast.err .ic-ok{display:none}
#toast.err .ic-err{display:block}

/* ---- Button loading spinner (async action feedback) ---- */
@keyframes ek-btn-spin{ to{ transform:rotate(360deg); } }
.is-loading{ position:relative !important; color:transparent !important; pointer-events:none !important; }
.is-loading > *{ opacity:0 !important; }
.is-loading::after{
  content:""; position:absolute; top:50%; left:50%;
  width:15px; height:15px; margin:-8px 0 0 -8px; box-sizing:border-box;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:ek-btn-spin .6s linear infinite;
}
/* light-background buttons get a navy spinner instead of white */
.btn-ghost.is-loading::after, .rowbtn.is-loading::after{
  border-color:rgba(14,27,51,.25); border-top-color:#0e1b33;
}
/* inline spinner shown next to a visible label (e.g. "Sending...") */
.btnspin{display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-2px;box-sizing:border-box;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:ek-btn-spin .6s linear infinite}

/* ---- Mobile: 16px inputs so iOS Safari does not zoom in on focus ---- */
@media (max-width: 768px){
  input, select, textarea { font-size: 16px !important; }
}

/* ---- Mobile: keep login card compact on large phones (match iPhone density) ---- */
@media (max-width: 480px){
  #login{padding:16px}
  .lcard{max-width:344px;padding:26px 22px 22px}
  .lcard .crest{width:78px;height:78px;margin:2px auto 10px}
  .lcard .wordmark{font-size:23px}
  .lcard .tagline{font-size:9.5px;letter-spacing:1.9px}
  .lfoot{white-space:normal;font-size:9.5px;letter-spacing:0}
}

/* ---- Mobile: KPI cards to 2 columns so labels do not clip ---- */
@media (max-width: 640px){
  .kpis, #rep-kpis, #pay-kpis, #inv-kpis { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Date inputs: left-align and normalize the oversized/centered iOS box ---- */
.mfield input[type="date"]{ text-align: left; -webkit-appearance: none; appearance: none; }
.mfield input[type="date"]::-webkit-date-and-time-value{ text-align: left; }

/* ---- Location filter dropdown ---- */
.fselect{ width: 100%; max-width: 320px; padding: 10px 34px 10px 12px; border: 1px solid var(--line); border-radius: 11px; background-color: var(--surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237f8aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; -webkit-appearance: none; appearance: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); outline: none; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.fselect:focus{ border-color: var(--blue); background: #fff; }

/* #1 Attendance overflow fix: name block must shrink so the segment buttons never push past the viewport */
.rc-row{ min-width:0; }
.rc-row > div:not(.av):not(.seg){ min-width:0; flex:1 1 auto; }
.rc-row .nm, .rc-row .sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-head{ min-width:0; flex-wrap:wrap; }
.rc-select{ min-width:0; max-width:100%; }

@media(max-width:560px){
  #m-age,
  #m-group,
  #m-pos{
    padding:8px 12px !important;
    min-height:44px;
  }
}

@media(max-width:560px){

  #modal{
    align-items:flex-start;
    overflow-y:auto;
    padding:12px;
  }
  
#modal .modalcard{
  max-height:none;
  overflow:visible;
  margin:0 auto 24px;
}

  #modal .modalcard .mb{
    overflow:visible;
  }

  #modal .modalcard .mf{
    position:static;
    padding:16px 18px 18px;
    border-top:1px solid var(--line);
    background:var(--surface);
  }
}

@media(max-width:820px){
  body.admin-mobile .work{
    padding-bottom:20px;
  }
}
/* ============================================================
   Batch A - mobile fixes (do not affect desktop layout)
   ============================================================ */

/* Item 13: payment approval / receipt cards - clean row, stacks on mobile */
.pay-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.pay-sub:last-child{border-bottom:none}
.pay-sub-meta{min-width:0}
.pay-sub-meta .nm{font-weight:700;color:var(--navy);font-size:14px}
.pay-sub-meta .amt{font-family:'Archivo',sans-serif;font-weight:800;color:var(--navy);font-size:15px;margin-top:1px}
.pay-sub-meta .sub{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.pay-sub-actions{display:flex;gap:8px;align-items:center;flex:none;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:560px){
  .pay-sub{flex-direction:column;align-items:stretch;gap:10px}
  .pay-sub-actions{justify-content:stretch;width:100%}
  .pay-sub-actions .rowbtn,.pay-sub-actions a.rowbtn{flex:1;text-align:center}
}

/* Item 3: slider label stays on one line on very small screens */
@media(max-width:420px){ .track .txt{font-size:11px;letter-spacing:1px;left:48px;right:48px} }

/* Item 2 + 16: mobile select full width; global no horizontal overflow */
@media(max-width:640px){
  /* Match the "All locations" dropdown to the squad filter chips (compact pill, not full width) */
  .fselect{width:auto;max-width:none;padding:6px 30px 6px 13px;font-size:12px;font-weight:700;border-radius:20px;background-position:right 11px center}
  .work{overflow-x:hidden}
  .panel,.pb,.dash>div{max-width:100%;min-width:0}
}

/* Item 7: cancel-class modal wrapper */
#cancel-modal{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,27,51,.55);backdrop-filter:blur(3px)}
#cancel-modal.show{display:flex}

/* Item 12: Under review pill (amber) in the payments table */
.pill.under_review{color:#b7791f;background:rgba(230,160,20,.14)}

/* Item 14: not-due pill (neutral) in the payments table */
.pill.not_due{color:var(--muted);background:var(--surface-2)}

/* Login: gently spinning football in the slide-to-sign-in knob (keeps its 1.18 scale while rotating) */
@keyframes ekBallSpin{ from{ transform:rotate(0deg) scale(1.18); } to{ transform:rotate(360deg) scale(1.18); } }
.knob .ball{ animation:ekBallSpin 6s linear infinite; will-change:transform; }
@media(prefers-reduced-motion:reduce){ .knob .ball{ animation:none; } }

/* Mobile drawer: disable horizontal page scroll while the drawer is open */
body.ek-drawer-open{overflow-x:hidden}

/* ============================================================
   Dashboard welcome hero (admin + coach) - court photo like parent
   ============================================================ */
.dash-hero{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:22px 24px;
  margin-bottom:20px;
  color:#fff;
  background:
    linear-gradient(115deg, rgba(6,18,38,.78) 0%, rgba(6,18,38,.46) 55%, rgba(6,18,38,.26) 100%),
    url('../assets/parent_dash.jpg') center/cover no-repeat,
    linear-gradient(135deg,#0b1f3a 0%,#0e2b52 100%);
  box-shadow:0 14px 30px rgba(7,20,45,.20),0 3px 8px rgba(7,20,45,.10);
}
.dash-hero-eyebrow{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.76)}
.dash-hero-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.4px;margin:5px 0 4px;color:#fff}
.dash-hero-sub{font-size:13px;color:rgba(255,255,255,.82);margin:0}
@media (max-width:768px){
  .dash-hero{padding:18px 18px;border-radius:14px;margin-bottom:16px}
  .dash-hero-title{font-size:20px}
}
@media (min-width:900px){
  .dash-hero{min-height:180px;padding:32px 30px;display:flex;flex-direction:column;justify-content:center}
  .dash-hero-title{font-size:28px}
}

/* Short desktop viewports (e.g. a 150%-scaled 1080p laptop, ~1280x800): shrink the
   sign-in card so it is not oversized. Phones (<641px) keep their own mobile layout. */
@media (min-width:641px) and (max-height:860px){
  #login{padding:16px}
  #login .lcard{padding:22px 30px 18px}
  #login .crest{width:70px;height:70px;margin:2px auto 10px}
  #login .wordmark{font-size:23px}
  #login .tagline{margin-top:6px}
  #login .lrule{margin:12px 0}
  #login .slider{margin-top:12px}
  #login .lfoot{font-size:10px;margin-top:12px;white-space:nowrap}
}

/* Upcoming Sessions time: lighter + slightly smaller on laptops only (900-1536px).
   Big monitors (>1536px) and phones (<900px) keep their current sizing. */
@media (min-width:900px) and (max-width:1536px){
  .sestime .t{font-weight:600;font-size:13.5px}
}