/* Facility workspace design standards (2026-10-21). Loaded LAST so every facility page (dashboard, schedule, coaches,
   memberships, athletes, testing...) shares one grid, one header, one KPI card, one panel and one control size.
   Page files keep their own content styles; this file only sets the shared measurements. Change a token here, not
   on a page. */
.cw {
  --side-w: 224px;     /* sidebar */
  --pad: 24px;         /* page outer padding */
  --gap: 16px;         /* between cards */
  --section: 20px;     /* between sections (header -> KPIs -> content) */
  --radius: 14px;      /* cards */
  --ctl-h: 40px;       /* buttons, search, selects, segmented tabs */
  --ctl-r: 10px;
  --kpi-h: 80px;
  --kpi-ic: 40px;
  --panel-w: 400px;    /* right detail panel (Schedule, Coaches, Memberships) */
  --row-pad: 10px 14px;
  --ink: #0b0f17; --muted: #6b7280; --line: #e8eaee;
}
@media (max-width: 1600px) { .cw { --panel-w: 360px; } }

/* ---- Shell: sidebar + main -------------------------------------------------------------------------------- */
.cw { grid-template-columns: var(--side-w) minmax(0, 1fr); }
.cw-main { padding: var(--pad); }
@media (min-width: 1201px) and (min-height: 640px) {
  .cw-main:has(.fx-dash), .cw-main:has(.sc), .cw-main:has(.cp) { padding-bottom: var(--pad); }
}
.cw-item, .cw-group { min-height: 42px; padding: 0 12px; }

/* ---- PageHeader: title, subtitle, actions on the right; same height on every page --------------------------- */
.cw-main .fx-head, .cw-main .sc-head, .cw-main .cp-head { min-height: 56px; margin-bottom: var(--section); align-items: center; }
.cw-main .fx-head .fx-eyebrow, .cw-main .cp-head .fx-eyebrow { display: none; } /* the facility name is in the sidebar */
.cw-main .fx-head h1, .cw-main .sc-head h1, .cw-main .cp-head h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.cw-main .fx-head .fx-sub, .cw-main .sc-head .fx-sub, .cw-main .cp-head .fx-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.cw-main .fx-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cw-main .fx-head-r > .fx-actions { width: auto; }

/* ---- Buttons and controls: one height everywhere ------------------------------------------------------------ */
.cw-main .fx-btn, .cw-main .cp-btn, .cw-main .sc-btn, .cw-main .fx-head .btn, .cw-main .fx-range-b { min-height: var(--ctl-h); border-radius: var(--ctl-r); padding: 0 16px; font-size: 14px; }
.cw-main .sc-sq, .cw-main .cp-sq.ctl { width: var(--ctl-h); height: var(--ctl-h); border-radius: var(--ctl-r); }
.cw-main .sc-pill { min-height: var(--ctl-h); border-radius: var(--ctl-r); }
.cw-main .fx-search, .cw-main .cp-search, .cw-main .sc-search { min-height: var(--ctl-h); border-radius: var(--ctl-r); }
.cw-main .ms-sel select, .cw-main .ws-select, .cw-main .sc-by select, .cw-main #sc-by { min-height: var(--ctl-h); border-radius: var(--ctl-r); }

/* ---- StatCard: same height, padding, icon, type on every page ------------------------------------------------ */
.cw-main .fx-kpis, .cw-main .cp-kpis, .cw-main .sc-kpis { gap: var(--gap); margin-bottom: var(--section); }
.cw-main .sc-kpis { margin-bottom: 0; } /* the schedule grid adds its own row gap */
.cw-main .fx-kpi, .cw-main .cp-kpi { height: var(--kpi-h); min-width: 0; box-sizing: border-box; padding: 10px 16px; gap: 12px; align-items: center; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cw-main .fx-kpi-ic, .cw-main .cp-kpi-ic, .cw-main .fx-kpis .fx-kpi-ic, .cw-main .msp .cp-kpi-ic { width: var(--kpi-ic); height: var(--kpi-ic); border-radius: 10px; flex-shrink: 0; }
.cw-main .fx-kpi-ic .ic, .cw-main .cp-kpi-ic .ic, .cw-main .fx-kpis .fx-kpi-ic .ic { width: 20px; height: 20px; }
.cw-main .fx-kpi-b, .cw-main .cp-kpi-b { min-width: 0; }
.cw-main .fx-kpi-b b, .cw-main .cp-kpi-b b, .cw-main .fx-kpis .fx-kpi-b b, .cw-main .sc-kpi .fx-kpi-b b { font-size: 22px; line-height: 1.1; }
.cw-main .fx-kpi-l, .cw-main .cp-kpi-b span { font-size: 13px; color: #1f2937; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-main .fx-kpi-s, .cw-main .cp-kpi-b small, .cw-main .msp .cp-kpi-b small { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-main .msp .cp-kpi-b span { white-space: nowrap; }
.cw-main .fx-kpi .fx-chev, .cw-main .cp-kpi .cp-chev { top: 10px; right: 12px; }
/* Four cards next to a detail panel would be squeezed: the KPI row reflows to 2 x 2 when its column gets narrow. */
.cp-left { container-type: inline-size; }
@container (max-width: 860px) { .ms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .cw-main .fx-kpis, .cw-main .ms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Narrow windows: shorter tiles without the grey subtitle, so the KPI row stays a thin strip. */
@media (max-width: 1200px) {
  .cw-main .fx-kpi, .cw-main .cp-kpi { height: 60px; padding: 8px 14px; }
  .cw-main .fx-kpi-s, .cw-main .cp-kpi-b small, .cw-main .ts-kpis small { display: none; }
  .cw-main .fx-kpis, .cw-main .cp-kpis, .cw-main .sc-kpis, .cw-main .ts-kpis, .cw-main .ms-kpis { gap: 10px; margin-bottom: 14px; }
}
@media (max-width: 760px) { .cw-main .fx-kpis, .cw-main .cp-kpis, .cw-main .ms-kpis, .cw-main .sc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cw-main .fx-kpis, .cw-main .cp-kpis, .cw-main .ms-kpis, .cw-main .sc-kpis { grid-template-columns: minmax(0, 1fr); } }

/* ---- Content grid: main column + one panel width, panels start level with the KPI row ------------------------- */
.cw-main .fx-dash { gap: var(--gap); }
.cw-main .sc-grid { grid-template-columns: minmax(0, 1fr) var(--panel-w); column-gap: var(--gap); row-gap: var(--gap); }
.cw-main .sc-grid.no-panel { grid-template-columns: minmax(0, 1fr); }   /* no panel open: the schedule uses the whole width */
.cw-main .cp.open, .cw-main .msp.open { grid-template-columns: minmax(0, 1fr) var(--panel-w); column-gap: var(--gap); }
@media (max-width: 1200px) { .cw-main .cp.open, .cw-main .msp.open { grid-template-columns: minmax(0, 1fr); } }

/* ---- DetailPanel: same shell, header, tabs and type on Schedule, Coaches and Memberships ---------------------- */
.cw-main .cp-panel, .cw-main .sc-panel { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cw-main .cp-p-head { padding: 18px 20px 10px; }
.cw-main .sc-panel { padding: 18px 20px; }
.cw-main .cp-p-head h2, .cw-main .sc-panel h2 { font-size: 18px; line-height: 1.25; }
.cw-main .cp-p-head p { font-size: 13px; }
.cw-main .cp-ptabs { padding: 0 14px; }
.cw-main .cp-ptabs button, .cw-main .sc-panel .sc-tabs button { min-height: 40px; padding: 0 6px; font-size: 13.5px; white-space: nowrap; }
.cw-main .cp-p-body { padding: 4px 20px 12px; }
.cw-main .cp-sec { padding: 14px 0; }
.cw-main .cp-p-foot, .cw-main .sc-p-foot { gap: 10px; }
.cw-main .cp-p-foot .cp-btn, .cw-main .sc-p-foot .sc-btn { min-height: var(--ctl-h); }

/* ---- SectionTabs: segmented and underline tabs share a height ------------------------------------------------ */
.cw-main .cp-tabs button { min-height: var(--ctl-h); padding: 0 14px; }
.cw-main .ms-seg button, .cw-main .sc-seg button { min-height: var(--ctl-h); border-radius: var(--ctl-r); }

/* ---- DataTable: header and row heights, checkbox, badges ----------------------------------------------------- */
.cw-main .cp-th { min-height: 42px; padding: 0 14px; display: grid; align-items: center; }
.cw-main .cp-rows .cp-tr { padding: var(--row-pad); min-height: 60px; }
.cw-main .cp-ck input, .cw-main .sc-ct input[type="checkbox"] { width: 18px; height: 18px; accent-color: #2563eb; }
.cw-main .cp-status, .cw-main .ms-st, .cw-main .fx-pill { padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.cw-main .cp-bulk, .cw-main .sc-bulk { min-height: 44px; padding: 0 16px; border-radius: var(--ctl-r); }
.cw-main .ms-pager { min-height: 52px; }
/* Header buttons: page files set 38px with more specific selectors; match them so every page is 40px. */
.cw-main .cp-head .cp-btn, .cw-main .cp-head .cp-btn.blue, .cw-main .sc-head .sc-btn { min-height: var(--ctl-h); }
/* Dashboard KPIs: its compact rules are more specific, so restate the standard there. */
.cw-main:has(.fx-dash) .fx-kpi { padding: 10px 16px; gap: 12px; }
.cw-main:has(.fx-dash) .fx-kpis .fx-kpi-ic { width: var(--kpi-ic); height: var(--kpi-ic); }
.cw-main:has(.fx-dash) .fx-kpis .fx-kpi-ic .ic { width: 20px; height: 20px; }
.cw-main:has(.fx-dash) .fx-kpis .fx-kpi-b b { font-size: 22px; }
.cw-main:has(.fx-dash) .fx-kpi-l { font-size: 13px; }
.cw-main:has(.fx-dash) .fx-kpi-s { font-size: 12px; }
.cw-main:has(.fx-dash) .fx-head { margin-bottom: var(--section); }
.cw-main:has(.fx-dash) .fx-kpis { margin-bottom: var(--section); gap: var(--gap); }
/* Titles sit at the same spot even when a page's header has two rows of controls (Athletes: search + actions). */
.cw-main .fx-head-l { align-self: flex-start; }
/* Narrow detail panels: stack two-column sections and let the tab row scroll instead of clipping. */
.cw-main .cp-panel { container-type: inline-size; }
@container (max-width: 390px) {
  .ms-info { grid-template-columns: minmax(0, 1fr); }
  .cp-ptabs { overflow-x: auto; scrollbar-width: none; }
  .cp-ptabs button { flex: 0 0 auto; padding: 0 8px; }
  .msp .cp-sec-h { flex-wrap: wrap; }
}
/* Narrower sidebar (224px): a little less inner padding so labels and the facility name still fit on one line. */
.cw-side { padding: 18px 12px; }
.cw-item, .cw-group { padding: 0 10px; gap: 11px; }
.cw-fac { padding: 10px; }
.cw-fac span { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Sidebar items that aren't built yet: dimmer, with "Coming soon" under the name (facility menu and Settings menu alike) ---- */
.cw-side .cw-item.soon { opacity: .8; }
.cw-side .cw-item.soon:hover { opacity: 1; }
.cw-side .cw-item.soon small { display: block; margin-top: 1px; color: #e0b44c; font-size: 11.5px; font-weight: 600; line-height: 1.2; }

/* ---- First-run card on the owner Home: waiting for approval, or the athlete code ---- */
.cw-main .fx-start { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--section); padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.cw-main .fx-start b { font-size: 15px; }
.cw-main .fx-start p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.cw-main .fx-start .code { display: flex; align-items: center; gap: 10px; }
.cw-main .fx-start .code b { padding: 6px 12px; border-radius: 8px; background: #f3f4f6; font-size: 18px; letter-spacing: .12em; }

/* The logo loader inside a facility screen (a screen's data is still arriving) appears only if that takes more than a quarter second, so a quick tab
   switch never flashes it. Most clicks need no loader at all: warm.js has the data ready. */
.cw-main .loading { opacity: 0; animation: cw-show .01s .25s forwards; }
@keyframes cw-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cw-main .loading { animation: cw-show .01s .25s forwards; } }

/* Moving between facility tabs: the screen you're leaving stays on while the next one loads. app.css dims the whole page to 60% for that, which reads as
   a washed-out flash. Keep the sidebar solid and only soften the page content a little. */
#app.busy:has(.cw) { opacity: 1; }
#app.busy .cw-main { opacity: .82; pointer-events: none; transition: opacity .15s .1s; }

/* ---- Half-width windows: desktop is unchanged above 1100px; below it, headers and tiles reflow instead of running off the right edge --------- */
@media (max-width: 1100px) {
  .cw { grid-template-columns: 200px minmax(0, 1fr); }
  .cw-main { min-width: 0; }
  .cw-main .fx-head, .cw-main .sc-head, .cw-main .cp-head { flex-wrap: wrap; row-gap: 10px; }
  .cw-main .sc-head h1 { white-space: normal; }
  .cw-main .fx-head-r, .cw-main .sc-head-r, .cw-main .sc-nav { flex-wrap: wrap; justify-content: flex-start; }
  .cw-main .sc-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* app.css stacks the schedule into one column of areas here; drop the panel column too, or the page keeps an empty 360px track. */
  .cw-main .sc-grid, .cw-main .sc-grid.no-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Phones and narrow windows (<= 860px): the sidebar becomes a top bar with a menu button (coach.js), and the
   menu opens as a drawer over the page. The main area gets the full width. ------------------------------------------ */
.cw-burger { display: none; }
@media (max-width: 860px) {
  .cw { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; --pad: 16px; }
  .cw-side { position: sticky; top: 0; z-index: 60; height: 56px; box-sizing: border-box; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 0 8px 0 14px; overflow: visible; }
  .cw-side .cw-logo { padding: 0; margin-right: auto; flex-shrink: 0; }
  .cw-side .cw-logo svg { height: 24px; }
  .cw-side > .cw-fac { display: block; order: 1; margin: 0; padding: 0 2px; border: 0; min-width: 0; max-width: 46vw; }
  .cw-side > .cw-fac .st-fac-sub { display: none; }
  .cw-side > .cw-fac > span:first-child { display: block; }
  .cw-side > nav, .cw-side > .cw-me { display: none; }
  .cw-burger { order: 2; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 10px; background: none; color: #fff; cursor: pointer; }
  .cw-burger:hover, .cw-burger:focus-visible { background: #141a26; }
  .cw-burger svg { width: 24px; height: 24px; }
  /* Open: the bar turns into the full sidebar, docked on the left, over a dimmed page. */
  .cw.nav-open .cw-side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100svh; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; padding: 12px 12px 16px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 0 0 100vmax rgba(11, 15, 23, .5); }
  .cw.nav-open .cw-side .cw-logo { order: 0; margin: 0; padding: 8px 8px 12px; }
  .cw.nav-open .cw-burger { order: 0; position: absolute; top: 8px; right: 8px; }
  .cw.nav-open .cw-side > .cw-fac { order: 0; max-width: none; margin: 0 0 8px; padding: 10px; border: 1px solid #1f2633; }
  .cw.nav-open .cw-side > .cw-fac .st-fac-sub { display: block; }
  .cw.nav-open .cw-side > nav { display: grid; order: 0; }
  .cw.nav-open .cw-side > .cw-me { display: flex; order: 0; }
  .cw.nav-open .cw-main { margin-top: 56px; }   /* the bar left the flow: keep the page where it was */
  .cw-side .cw-item, .cw-side .cw-sub { min-height: 44px; }
  .cw-me button#cw-out { min-width: 44px; min-height: 44px; }
}

/* Below 760px page headers stack (app.css, coaches.css): title on top, controls under it, both left-aligned. */
@media (max-width: 760px) {
  .cw-main .fx-head, .cw-main .sc-head, .cw-main .cp-head { align-items: stretch; }
  .cw-main .fx-head-r, .cw-main:has(.fx-dash) .fx-head-r, .cw-main .fx-head-r > .fx-actions, .cw-main .cp-head-r, .cw-main .sc-head-r { justify-content: flex-start; }
  .cw-main .panel-h { flex-wrap: wrap; row-gap: 4px; }
  .cw-main .fx-search, .cw-main .cp-search, .cw-main .sc-search { min-width: 0; }
}
@media (max-width: 480px) { .cw-main .sc-kpis { grid-template-columns: minmax(0, 1fr); } }