:root{--bg:#08080d;--card:#14141d;--card2:#1b1b26;--line:#2a2a3a;--pur:#8E6FE0;--pur2:#A98EF0;--txt:#fff;--mut:#9a9ab2;--good:#5BD6A0;--warn:#E6B15A;--bad:#E06B6B;--grad:linear-gradient(135deg,#7B5FD0,#A98EF0);}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font-body,-apple-system,Segoe UI,Roboto,Arial,sans-serif);}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#000;border-bottom:1px solid #1e1e2a;}
.top img{height:28px;}
/* .nav was the single row of eleven tabs the side rail replaced (see .rail
   below). The rules are kept because the login screen and the modals still
   inherit .top, and removing them wholesale is a bigger diff than it looks. */
.nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;}
.nav div{padding:7px 12px;border-radius:9px;font-size:12px;color:var(--mut);cursor:pointer;font-weight:600;letter-spacing:.2px;white-space:nowrap;flex:none;position:relative;}
/* All three nav badges share one style. The Applications and Messages
   badges had no CSS at all, so their counts rendered as bare text glued to
   the tab label. */
#ov_navbadge:empty,#ap_navbadge:empty,#msg_navbadge:empty,#su_navbadge:empty{display:none;}
#ov_navbadge,#ap_navbadge,#msg_navbadge,#su_navbadge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:5px;border-radius:999px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;vertical-align:middle;font-family:var(--font-mono,inherit);}
.nav div.on{background:var(--grad);color:#fff;}
.top .r{font-size:12px;color:var(--mut);}
.wrap{max-width:1240px;margin:0 auto;padding:22px;}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;}
.kpi .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1px;}
.kpi .n{font-size:28px;font-weight:800;margin-top:6px;font-family:var(--font-mono,inherit);font-variant-numeric:tabular-nums;} .kpi .d{font-size:12px;margin-top:4px;}
.up{color:var(--good);} .down{color:var(--bad);}
.row{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:20px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;}
.h{font-size:12px;color:var(--pur2);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:14px;}
.main{display:grid;grid-template-columns:330px 1fr;gap:16px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 6px;border-bottom:1px solid var(--line);}
td{padding:9px 6px;border-bottom:1px solid #20202c;}
tr.cl{cursor:pointer;} tr.cl:hover{background:var(--card2);} tr.cl.sel{background:rgba(123,95,208,.18);}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;}
.dg{background:var(--good);} .dr{background:var(--bad);} .dm{background:#44445a;}
.prof-h{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.av{width:46px;height:46px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;}
.tabs{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap;}
.tabs div{padding:8px 14px;border-radius:10px;background:var(--card2);border:1px solid var(--line);font-size:13px;color:var(--mut);cursor:pointer;}
.tabs div.on{background:var(--grad);color:#fff;border:0;}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ch{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:14px;}
.ch .t{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;}
.flag{display:inline-block;font-size:11px;padding:3px 9px;border-radius:12px;margin:2px 4px 2px 0;}
.f-w{background:rgba(230,177,90,.16);color:var(--warn);border:1px solid rgba(230,177,90,.4);}
canvas{max-height:190px;}
.ptitle{font-size:12px;color:var(--pur2);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin:16px 0 8px;}
.scroll{overflow-x:auto;} .dt{font-size:12px;white-space:nowrap;}
.dt th,.dt td{padding:7px 9px;text-align:center;}
.dt th:first-child,.dt td:first-child{text-align:left;position:sticky;left:0;background:var(--card);font-weight:600;}
/* The Clients table's select checkbox lives inside the name cell, so the
   one sticky column is the name. It used to be a 28px checkbox column of
   its own - which meant scrolling right pinned the checkbox and scrolled
   the name away, leaving rows of numbers with nothing to tie them to. */
.dt-sel td:first-child,.dt-sel th:first-child{min-width:150px;}
.dt-sel .namecell{display:flex;align-items:center;gap:9px;text-align:left;}
.dt-sel .namecell input[type=checkbox]{width:auto;flex:none;margin:0;}
.dt-sel .namecell .nm{min-width:0;cursor:pointer;}
/* Every .dt table's first column is always a name (sticky, left-aligned);
   every other column is always a data value (centred) - so the data
   columns can safely take the mono face without ever catching a name. */
.dt th:not(:first-child),.dt td:not(:first-child){font-family:var(--font-mono,inherit);font-variant-numeric:tabular-nums;}
.u{color:var(--good);} .d2{color:var(--bad);} .s{color:var(--mut);} .cellup{background:rgba(91,214,160,.12);} .celldn{background:rgba(224,107,107,.10);} .pd{font-weight:700;}
label{display:block;font-size:11px;color:var(--mut);margin:0 0 5px;letter-spacing:.3px;text-transform:uppercase;}
input,select{width:100%;padding:11px;border-radius:10px;border:1px solid var(--line);background:#0e0e16;color:var(--txt);font-size:14px;}
.sel3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.templ{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.templ button{width:auto;padding:9px 14px;border:1px solid var(--pur);background:transparent;color:var(--pur2);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;}
.grid-h,.exrow{display:grid;grid-template-columns:1.1fr 1.6fr 60px 80px 80px 1.4fr 30px;gap:8px;align-items:center;}
.grid-h{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;padding:0 2px 6px;}
.exrow{margin-bottom:8px;} .exrow input,.exrow select{padding:9px;font-size:13px;}
.x{background:transparent;border:0;color:var(--mut);font-size:18px;cursor:pointer;}
.btn{padding:12px 18px;border:0;border-radius:11px;background:var(--grad);color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(123,95,208,.35);}
.btn.sec{background:transparent;border:1px solid var(--pur);color:var(--pur2);box-shadow:none;}
.vol{display:flex;gap:8px;flex-wrap:wrap;} .vchip{background:#0e0e16;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;} .vchip b{color:var(--pur2);font-family:var(--font-mono,inherit);font-variant-numeric:tabular-nums;}
.msg{color:var(--good);font-size:13px;margin-top:10px;display:inline-block;}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.stat{background:#0e0e16;border:1px solid var(--line);border-radius:13px;padding:14px;text-align:center;}
.stat .n{font-size:24px;font-weight:800;font-family:var(--font-mono,inherit);font-variant-numeric:tabular-nums;} .stat .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-top:3px;}
.daycol{background:#0e0e16;border:1px solid var(--line);border-radius:13px;padding:14px;}
.daycol h4{margin:0 0 10px;font-size:14px;} .daycol .r2{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #20202c;font-size:14px;}
.daycol .r2 b{font-family:var(--font-mono,inherit);font-variant-numeric:tabular-nums;}
.hi{color:var(--good);}
.hide{display:none;}
/* Slide-out panel for the weekly/phase adjustments, so the check-in data
   stays on screen while the numbers are being set. */
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,94vw);overflow-y:auto;background:var(--card);border-left:1px solid var(--line);padding:18px;z-index:60;box-shadow:-12px 0 44px rgba(0,0,0,.55);}
.drawer-ov{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:50;}
/* The program builder's exercise rows are a fixed 8-column grid about
   620px wide. Without this they ran off the edge of a phone screen and the
   reps, rest, cue and remove button could not be reached at all. */
.pbscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.adjbar{position:sticky;bottom:14px;display:flex;justify-content:flex-end;margin:10px 0 4px;pointer-events:none;}
.adjbar .btn{pointer-events:auto;box-shadow:0 8px 26px rgba(0,0,0,.45);}
tr.exhead td{background:var(--card2);border-top:1px solid var(--line);}
h2.login-t{font-size:13px;letter-spacing:3px;color:var(--mut);text-align:center;font-weight:600;margin:12px 0 22px;}
@media(max-width:820px){
  .kpis{grid-template-columns:1fr 1fr;}
  .row,.main,.pgrid{grid-template-columns:1fr;}
  /* Header stacks and the tab strip wraps - every tab visible at once
     instead of an eleven-tab strip squeezed into a scrolling sliver. */
  .top{flex-wrap:wrap;gap:10px;padding:12px 14px;}
  .nav{order:3;width:100%;flex-wrap:wrap;overflow-x:visible;gap:6px;}
  .nav div{padding:8px 11px;font-size:12px;}
  /* Three equal columns inside a 366px slide-out drawer gave every field
     about 110px, so the macro numbers the coach types every week were
     clipped. One column on a phone, two in the drawer where it fits. */
  .sel3{grid-template-columns:1fr;gap:10px;}
  /* iOS Safari zooms the whole page whenever a focused input is under 16px,
     and then leaves it zoomed - so every tap on a macro field, a goal or the
     search box shunted the layout sideways. 16px stops the zoom. */
  input,select,textarea{font-size:16px !important;}
  .exrow input,.exrow select{font-size:16px !important;padding:10px;}
  /* The program builder sets font-size inline per cell for density; on a
     phone that inline 11-12px is exactly what triggers the zoom. */
  .pbscroll input,.pbscroll select{font-size:16px !important;}
  .drawer{width:100vw;padding:14px;}
}
@media(min-width:560px) and (max-width:820px){.sel3{grid-template-columns:1fr 1fr;}}

/* ---- The side rail -------------------------------------------------------
   Replaces the single row of eleven tabs. Two levels: a section, and its
   views underneath when it is the open one - only the open section's
   sub-items are rendered, so the rail stays short enough to read.

   Below 900px it slides in from the left instead of taking a column, because
   the dashboard does get opened on a phone between clients. */
.shell{display:flex;align-items:flex-start;}
.rail{
  flex:0 0 212px; position:sticky; top:0; align-self:stretch;
  min-height:calc(100vh - 57px);
  background:#0b0b12; border-right:1px solid #1e1e2a;
  padding:14px 10px; display:flex; flex-direction:column; gap:2px;
}
.shell .wrap{flex:1 1 auto; min-width:0;}
.rail .rsec{display:flex;flex-direction:column;}
.rail .ritem{
  display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:var(--mut); cursor:pointer; letter-spacing:.2px;
}
.rail .ritem:hover{color:var(--txt);background:#14141d;}
.rail .rsec.on > .ritem{background:var(--grad);color:#fff;}
.rail .ritem .ri{font-size:10px;opacity:.9;width:12px;text-align:center;flex:none;}
.rail .ritem .rl{flex:1 1 auto;min-width:0;}
.rail .rsub{display:flex;flex-direction:column;gap:1px;margin:3px 0 8px 22px;padding-left:9px;border-left:1px solid #22222e;}
.rail .rsub div{
  padding:7px 9px; border-radius:7px; font-size:12.5px; color:var(--mut);
  cursor:pointer; display:flex; align-items:center; gap:7px;
}
.rail .rsub div:hover{color:var(--txt);background:#14141d;}
.rail .rsub div.on{color:var(--pur2);background:#16121f;font-weight:600;}
/* The badge markup is shared with the old nav, so it keeps the same shape. */
.rail span:empty{display:none;}
.railtoggle{display:none;background:#1a1a24;border:1px solid var(--line);color:var(--mut);width:auto;padding:5px 11px;font-size:14px;border-radius:8px;cursor:pointer;}
@media (max-width:900px){
  .railtoggle{display:inline-block;}
  .rail{
    position:fixed; left:0; top:57px; bottom:0; z-index:400; width:230px; flex-basis:230px;
    transform:translateX(-100%); transition:transform .18s ease; overflow-y:auto;
  }
  body.railopen .rail{transform:none;box-shadow:6px 0 24px rgba(0,0,0,.5);}
  .shell{display:block;}
}
@media (prefers-reduced-motion:reduce){.rail{transition:none;}}

/* ---- Client profile side sub-menu ---------------------------------------
   The profile's own sections, down the side rather than as a tab strip that
   wrapped onto three lines at nine items. */
.prof{display:flex;gap:18px;align-items:flex-start;}
.prof-nav{flex:0 0 186px;display:flex;flex-direction:column;gap:2px;}
.prof-nav div{
  padding:9px 11px;border-radius:8px;font-size:13px;color:var(--mut);cursor:pointer;font-weight:600;
}
.prof-nav div:hover{color:var(--txt);background:#14141d;}
.prof-nav div.on{background:#16121f;color:var(--pur2);}
.prof-body{flex:1 1 auto;min-width:0;}
@media (max-width:760px){
  .prof{display:block;}
  .prof-nav{flex-direction:row;overflow-x:auto;gap:6px;margin-bottom:12px;}
  .prof-nav div{white-space:nowrap;flex:none;}
}