/* pace schedule — built on the pace club design system (theme.css) */
:root {
  --bg:            #0d0c11;
  --bg-2:          #100f15;
  --card:          #16151c;
  --card-2:        #1d1c24;

  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  --text:          #f2f1f4;
  --text-dim:      #9b99a3;
  --text-faint:    #6a6873;

  --accent:  #65c4ff;  --accent-dim: rgba(101,196,255,0.12);
  --blue:    #65c4ff;  --blue-dim:   rgba(101,196,255,0.12);
  --green:   #4ade80;  --green-dim:  rgba(74,222,128,0.12);
  --amber:   #fbbf24;  --amber-dim:  rgba(251,191,36,0.12);
  --danger:  #f87171;  --danger-dim: rgba(248,113,113,0.12);
  --red:     #f87171;  --red-dim:    rgba(248,113,113,0.12);
  --purple:  #c084fc;  --purple-dim: rgba(192,132,252,0.12);
  --pink:    #f472b6;  --pink-dim:   rgba(244,114,182,0.12);
  --white:   #f2f1f4;  --white-dim:  rgba(242,241,244,0.12);

  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.13); border-radius: 5px; }

.gothic {
  font-family: 'League Gothic', 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.h1 { font-size: 30px; line-height: 1; }
.h2 { font-size: 22px; line-height: 1; }
.h3 { font-size: 17px; letter-spacing: .04em; }

.section-title {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: .05em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.meta  { font-size: 12px; color: var(--text-faint); }

.card  { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card-raised { background: var(--card-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 20px; }

.btn { border: 0; font-weight: 600; font-size: 13.5px; padding: 10px 18px; border-radius: 10px; cursor: pointer; transition: all .15s; }
.btn.primary { background: var(--accent); color: #0d0c11; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost   { background: transparent; color: var(--text-dim); border: 1px solid var(--border-strong); }
.btn.ghost:hover { color: var(--text); border-color: var(--text-dim); }
.btn.danger  { background: transparent; color: var(--danger); border: 1px solid var(--danger-dim); }
.btn.danger:hover { background: var(--danger-dim); }
.btn:disabled { opacity: .5; cursor: default; }

.icon-btn { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 15px; padding: 5px 8px; border-radius: 7px; transition: all .15s; }
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.icon-btn:disabled { opacity: .3; cursor: default; }

input, textarea, select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 11px 13px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input[type="time"] { -webkit-appearance: none; appearance: none; text-align: left; }
.field { margin-bottom: 16px; }

.pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 20px; }
.pill.blue  { color: var(--accent); background: var(--accent-dim); }
.pill.green { color: var(--green);  background: var(--green-dim); }
.pill.amber { color: var(--amber);  background: var(--amber-dim); }
.pill.red   { color: var(--danger); background: var(--danger-dim); }
.pill.purple{ color: var(--purple); background: var(--purple-dim); }
.pill.pink  { color: var(--pink);   background: var(--pink-dim); }
.pill.grey  { color: var(--text-dim); background: rgba(255,255,255,0.07); }

.chip { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; transition: all .12s; }
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-bg.show { display: flex; }
.modal { background: var(--card-2); border: 1px solid var(--border-strong); border-radius: var(--radius); width: min(440px, 100%); padding: 24px; max-height: 88vh; overflow-y: auto; }
.modal-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-row.split { justify-content: space-between; }

.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(90px); background: var(--card-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 20px; font-size: 13.5px; font-weight: 600; z-index: 200; transition: transform .3s cubic-bezier(.22,1,.36,1); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ============ LOGIN (same shell as pace-studios) ============ */
.login-wrap { position: fixed; inset: 0; z-index: 500; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg); background-image: radial-gradient(1200px 600px at 50% -10%, rgba(101,196,255,0.08), transparent 60%);
  transition: opacity .2s ease; }
.login-wrap.gone { opacity: 0; pointer-events: none; }
.login-wrap[hidden] { display: none; }
.login-card { width: min(460px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 40px 36px; }
.login-card .logo { display: flex; justify-content: center; margin-bottom: 6px; }
.login-card .logo svg { height: 46px; width: auto; }
.login-card .logo svg path { fill: var(--text); }
.login-card h2 { font-family: 'League Gothic', sans-serif; text-transform: uppercase; font-size: 24px; margin: 22px 0 14px; letter-spacing: .03em; font-weight: 400; }
.studio-grid { display: grid; gap: 10px; margin-bottom: 14px; }
.studio-btn { display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font-size: 16px; font-weight: 600; padding: 16px 18px; border-radius: 12px; cursor: pointer; transition: all .15s; }
.studio-btn:hover { border-color: var(--accent); background: var(--accent-dim); }
.studio-btn .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.studio-btn.admin .dot { background: var(--amber); }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12px; margin: 16px 0; text-transform: uppercase; letter-spacing: .1em; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* email + password step of the login */
.login-form h2 { margin-bottom: 16px; }
.login-form .field { margin-bottom: 12px; }
.login-error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 2px 0 6px; }
.login-form input.locked { opacity: .6; cursor: default; }
.login-actions { display: flex; gap: 10px; margin-top: 4px; }
.login-actions .btn { flex: 1; }

.app { max-width: 1480px; margin: 0 auto; padding: 14px 18px 48px; }

/* ---- topbar: logo left, title centred, month nav right (as on insights) ---- */
/* frosted glass: translucent fill + blur, so the grid shows through as it scrolls under */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 9px 20px; margin-bottom: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius); position: sticky; top: 8px; z-index: 50; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.topbar > .topbar-left { justify-self: start; display: flex; align-items: center; gap: 10px; }
.topbar .logo { display: block; text-decoration: none; }
/* location chip next to the logo — HQ for admin, the studio code otherwise */
.topbar-location { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-dim); background: var(--accent-dim); padding: 3px 8px; border-radius: 6px; }
.topbar-location[hidden] { display: none; }
.topbar-center { display: flex; align-items: center; gap: 12px; justify-self: center; }
.topbar-right { justify-self: end; display: flex; gap: 8px; align-items: center; }
.logo-svg { height: 28px; width: auto; display: block; }
.logo-svg path { fill: var(--text); }
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav .icon-btn { font-size: 18px; }

/* ---- burger menu (right of the month nav) ---- */
.menu-wrap { position: relative; display: flex; align-items: center; }
.burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 32px; padding: 0 10px; background: transparent; border: none; border-radius: 20px; cursor: pointer; }
.burger span { display: block; height: 2px; width: 16px; background: var(--text); border-radius: 2px; transition: all .15s; }
.burger:hover span { background: var(--accent); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; background: var(--card-2); border: 1px solid var(--border-strong); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 200; box-shadow: 0 12px 34px rgba(0,0,0,0.45); }
.menu-panel[hidden] { display: none; }
.menu-item { text-align: left; background: transparent; border: none; color: var(--text-dim); font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 9px; cursor: pointer; width: 100%; }
.menu-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.menu-item[hidden] { display: none; }
.menu-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 700; padding: 8px 12px 4px; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.menu-item.active { color: var(--accent); }
.menu-item.loc-item.active::after { content: "\25CF"; float: right; font-size: 8px; line-height: 18px; }
.assign-btn.static, .avail-btn.static { pointer-events: none; }
.avail-btn.static { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
.modal select:disabled, .modal input:disabled { opacity: .5; cursor: default; }

/* ---- Roles page (admin) ---- */
.roles-view { padding: 2px 0 40px; }
.roles-view[hidden] { display: none; }
.roles-inner { max-width: 820px; margin: 0 auto; }
.roles-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.roles-view .card + .card { margin-top: 18px; }
.roles-table-head, .role-row { display: grid; gap: 10px; align-items: center; }
.roles-table-head.studios, .role-row.studios { grid-template-columns: 1fr 1.5fr 38px; }
.roles-table-head.coaches, .role-row.coaches { grid-template-columns: 1fr 1fr 38px; }
.roles-table-head.classes, .role-row.classes { grid-template-columns: 1.8fr 0.8fr 1.1fr 38px; }
.roles-table-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; margin: 6px 0 8px; padding: 0 2px; }
.role-row { margin-bottom: 8px; }
.role-row input, .role-row select { font-size: 13.5px; padding: 9px 11px; }
.role-remove { width: 36px; height: 36px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-faint); border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.role-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-dim); }
.roles-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.roles-empty { color: var(--text-faint); font-size: 13px; padding: 8px 2px; }

/* Coaches grouped by studio, each foldable */
.coach-group { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: rgba(255,255,255,0.015); overflow: hidden; }
.coach-group-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: transparent; border: 0; color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.coach-group-head:hover { background: rgba(255,255,255,0.03); }
.coach-group-head .cg-caret { font-size: 11px; color: var(--text-faint); transition: transform .12s; flex: 0 0 auto; }
.coach-group.open .cg-caret { transform: rotate(90deg); }
.coach-group-head .cg-name { font-weight: 700; font-size: 14px; }
.coach-group-head .cg-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-faint); background: rgba(255,255,255,0.07); border-radius: 20px; padding: 2px 9px; min-width: 22px; text-align: center; }
.coach-group-body { display: none; padding: 4px 14px 14px; }
.coach-group.open .coach-group-body { display: block; }
.coach-group-body .role-row { margin-bottom: 8px; }
.role-row.coach-row { grid-template-columns: 1fr 38px; }
.coach-group-body .cg-add { margin-top: 4px; font-size: 12.5px; padding: 8px 14px; }

/* ---- Stats: first-timer retention ---- */
.stats-view { padding: 2px 0 40px; }
.stats-view[hidden] { display: none; }
.stats-inner { max-width: 1120px; margin: 0 auto; }
.stats-head { margin-bottom: 16px; }
.stats-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.stats-loc-label { font-family: 'League Gothic', sans-serif; font-size: 26px; letter-spacing: .01em; color: var(--text); text-transform: uppercase; }
.stats-updated { font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.stats-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.stats-filter-bar .dd-trigger .lbl { font-weight: 600; }

.stats-card { margin-top: 4px; }
.stats-note { margin: -4px 0 10px; max-width: 700px; line-height: 1.5; }
.stats-explain { margin: 0 0 18px; }
.stats-explain > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); list-style: none; display: inline-flex; align-items: center; gap: 9px; user-select: none; }
.stats-explain > summary:hover { text-decoration: underline; }
.stats-explain > summary::-webkit-details-marker { display: none; }
.stats-explain > summary::before { content: '▸'; font-size: 15px; line-height: 1; transition: transform .12s; }
.stats-explain[open] > summary::before { transform: rotate(90deg); }
.stats-explain-body { margin-top: 10px; max-width: 700px; }
.stats-explain-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; margin: 10px 0 6px; }
.stats-explain-body ul { margin: 0 0 6px; padding-left: 18px; }
.stats-explain-body li { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 3px; }
.stats-explain-body b { color: var(--text); font-weight: 600; }
.stats-empty { color: var(--text-faint); font-size: 13.5px; padding: 22px 2px; text-align: center; }

.stats-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table th, .stats-table td { padding: 10px 12px; text-align: left; white-space: nowrap; }
.stats-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; border-bottom: 1px solid var(--border-strong); user-select: none; cursor: pointer; transition: color .12s; }
.stats-table th:hover { color: var(--text-dim); }
.stats-table th.num, .stats-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.stats-table tbody td { border-bottom: 1px solid var(--border); }
.stats-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.stats-table .coach-name { font-weight: 600; color: var(--text); }
.stats-table .cnt { color: var(--text-faint); font-weight: 500; font-size: 11.5px; }
.stats-table .loc-tag { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-faint); background: rgba(255,255,255,0.06); border-radius: 5px; padding: 1px 6px; vertical-align: middle; }
.stats-table .sort-arrow { font-size: 8px; color: var(--accent); }
.stats-table tr.stats-total td { border-top: 1px solid var(--border-strong); border-bottom: none; font-weight: 700; color: var(--text); background: rgba(255,255,255,0.015); }
.stats-table tr.stats-total .cnt { color: var(--text-dim); }
/* coaches no longer in the roster: shown to admins only, dimmed, no best/worst colour */
.stats-table tr.stats-inactive td { color: var(--text-faint); }
.stats-table tr.stats-inactive .coach-name { color: var(--text-faint); font-weight: 500; }
.stats-table tr.stats-inactive:hover td { background: transparent; }
.stats-table .stats-former { display: inline-block; margin-left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); background: rgba(255,255,255,0.05); border-radius: 5px; padding: 1px 6px; vertical-align: middle; }

/* ---- filter dropdowns (same pattern as the coach insights page) ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-bottom: 12px; }
.dd { position: relative; }
.dd-trigger { display: inline-flex; align-items: center; gap: 7px; }
.dd-trigger .caret { font-size: 10px; opacity: .7; }
.dd-panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 250px; max-height: 340px; overflow-y: auto; background: var(--card-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 2px; }
.dd-panel[hidden] { display: none; }
.dd-opt { display: flex; align-items: center; gap: 9px; text-align: left; background: transparent; border: 0; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.dd-opt:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.dd-opt.active { color: var(--accent); }
.dd-opt .box { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; flex: 0 0 auto; }
.dd-opt.active .box { background: var(--accent); border-color: var(--accent); color: var(--bg); }
/* status-filter count (no .dd-counts wrapper) stays a plain grey number */
.dd-opt .dd-count { margin-left: auto; padding-left: 12px; font-size: 11.5px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.dd-opt.active .dd-count { color: var(--accent); }

/* coach dropdown: three clickable number pills — assigned · pre-assigned · free.
   Each filters the schedule by its category; greyish by default, tinted on hover,
   filled when it's the active filter, and coloured on a selected / top row. */
.dd-opt .dd-counts { margin-left: auto; padding-left: 12px; display: inline-flex; align-items: center; gap: 10px; }
.dd-counts .dd-count, .dd-counts .dd-pre, .dd-counts .dd-avail {
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 30px; text-align: center; cursor: pointer; color: var(--text-faint);
  border: 1px solid transparent; border-radius: 20px; padding: 1px 7px;
  transition: all .12s; box-sizing: border-box;
}
.dd-opt .dd-counts .dd-count { margin-left: 0; }
/* coloured on a selected (checkbox) or the top "All coaches" row */
.dd-opt.active .dd-counts .dd-count { color: var(--accent); }
.dd-opt.active .dd-pre { color: var(--green); }
.dd-opt.active .dd-avail { color: #fb923c; }
/* hover tints each pill in its category colour */
.dd-counts .dd-count:hover  { color: var(--accent); background: var(--accent-dim); border-color: var(--accent); }
.dd-counts .dd-pre:hover    { color: var(--green);  background: var(--green-dim);  border-color: var(--green); }
.dd-counts .dd-avail:hover  { color: #fb923c; background: rgba(251,146,60,0.16); border-color: rgba(251,146,60,0.5); }
/* the pill currently driving the filter is filled */
.dd-counts .dd-count.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.dd-counts .dd-pre.on   { background: var(--green);  border-color: var(--green);  color: #0d1b0d; }
.dd-counts .dd-avail.on { background: #fb923c; border-color: #fb923c; color: #1a1206; }
.dd-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.reset-filters { background: transparent; border-color: var(--border-strong); color: var(--text-faint); font-weight: 600; }
.reset-filters:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-dim); }
.reset-filters[hidden] { display: none; }

/* ---- month grid: weeks stacked, each week a row of 7 day columns ---- */
.month-grid { display: flex; flex-direction: column; gap: 64px; }
/* content sits inset from the full-width nav bar, like the insights app */
.app > .month-grid, .app > .filter-bar { margin-left: 20px; margin-right: 20px; }
/* each week reads as its own raised card: lighter surface, stronger edge,
   and a soft shadow so the dark page recedes behind it */
.week-row { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.38); }
/* the actions strip and the day-name band together form one header block
   at the top of the week card */
.week-label { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 6px 10px; background: rgba(255,255,255,0.03); }
.week-actions { display: flex; gap: 6px; }
.week-actions .chip { font-size: 10px; padding: 3px 9px; text-transform: none; letter-spacing: normal; font-weight: 600; }
/* the bulk "Pre-assign" week action reads green (draft); "Assign" reads amber
   (the promote action), matching the per-coach buttons in the modal */
.week-actions .chip.week-preassign { color: var(--green); border-color: var(--green-dim); }
.week-actions .chip.week-preassign:hover { color: var(--green); border-color: var(--green); background: var(--green-dim); }
.week-actions .chip.week-assign { color: var(--amber); border-color: var(--amber-dim); }
.week-actions .chip.week-assign:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
.week-actions .week-delete:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-dim); }
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.day-col { border-right: 1px solid var(--border); padding: 7px; }
.day-col:last-child { border-right: none; }
.day-col.today { background: rgba(101,196,255,0.05); }
/* a day belonging to the previous/next month: keeps the column slot so the
   weekday grid stays aligned, but shows nothing at all */
.day-col.empty { background: rgba(255,255,255,0.012); }

/* the day names form one continuous header band across the week: it bleeds
   past the column padding so the strip reads as a single row, which is what
   marks where each week starts */
.day-head { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: -7px -7px 7px; padding: 8px 8px 7px; background: rgba(255,255,255,0.065); border-bottom: 1px solid var(--border-strong); }
.day-head .dname { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.day-head .dnum { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.day-col.today .dnum { color: var(--accent); }
.day-col.outside { opacity: .48; }

/* holiday day: warm amber wash — the colour alone signals the day is non-standard */
.day-col.holiday { background: linear-gradient(var(--amber-dim), var(--amber-dim)), var(--bg); }
.day-col.holiday .day-head { background: rgba(251,191,36,0.10); border-bottom-color: rgba(251,191,36,0.35); }
.day-col.holiday .dnum { color: var(--amber); }
/* admin-only footer control to un-mark a holiday */
.chip.day-clear-holiday { margin-top: 4px; color: var(--amber); border-color: rgba(251,191,36,0.4); background: var(--amber-dim); font-size: 10px; padding: 4px 4px; text-transform: none; letter-spacing: normal; font-weight: 600; text-align: center; }
.chip.day-clear-holiday:hover { background: rgba(251,191,36,0.22); color: #ffd569; border-color: var(--amber); }
/* studios: spillover-month classes are look-only (switch month to edit) */
.class-box.locked { cursor: default; }
.class-box.locked:hover { filter: none; transform: none; }

/* the timeline: a fixed-height track (06:00–21:15, 15-min steps) that
   class boxes are absolutely positioned inside, so their vertical
   position and height are proportional to real clock time. */
.day-timeline { position: relative; }

/* studios read the same time-grid as admins; they just have no week-actions bar */
.role-studio .week-label { display: none; }

/* neutral card with only the left border carrying the class-type colour */
.class-box { position: absolute; left: 0; right: 0; border-radius: 7px; padding: 3px 6px; cursor: pointer; border-left: 3px solid; transition: filter .12s, transform .12s; background: var(--card-2); overflow: hidden; display: flex; align-items: stretch; gap: 5px; }
.class-box:hover { filter: brightness(1.15); transform: translateY(-1px); z-index: 2; }
/* open = no coach assigned yet → outline + lighter fill so it reads as actionable */
.class-box.open { border-top: 1px solid rgba(255,255,255,0.20); border-right: 1px solid rgba(255,255,255,0.20); border-bottom: 1px solid rgba(255,255,255,0.20); background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), var(--card-2); }
.class-box .box-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.class-box .ctime { font-size: 9.5px; font-weight: 700; color: var(--text-dim); line-height: 1.15; flex: 0 0 auto; }
.class-box .cname { font-size: 10.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: auto 0; }
/* coach initials stack vertically down the RIGHT edge of the box. Once a coach
   is assigned, only the green assigned chip is shown here; the rest collapse to +N */
.class-box .box-coaches-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; overflow: hidden; }
/* available coaches read amber; the assigned one reads green */
.class-box .cinit { display: inline-block; background: var(--amber-dim); color: var(--amber); border-radius: 20px; padding: 0 5px; font-weight: 700; font-size: 9.5px; line-height: 1.5; }
.class-box .cinit.assigned { background: var(--green-dim); color: var(--green); }
/* pre-assigned (admin draft): hollow, dashed green — tentative vs the filled assigned chip */
.class-box .cinit.preassigned { background: transparent; color: var(--green); border: 1px dashed var(--green); padding: 0 4px; }
.class-box .box-coaches-col.has-assigned .cinit.preassigned { font-size: 12px; padding: 2px 7px; }
/* an assigned coach stands out: bigger chip, vertically centred on the box */
.class-box .box-coaches-col.has-assigned { justify-content: center; }
.class-box .box-coaches-col.has-assigned .cinit.assigned { font-size: 12px; padding: 3px 8px; }
.class-box .cmore { color: var(--text-faint); font-weight: 700; font-size: 9px; line-height: 1.35; }

.day-foot { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.add-class-btn { display: block; width: 100%; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-faint); font-size: 10px; font-weight: 600; padding: 5px; border-radius: 8px; cursor: pointer; text-align: center; transition: all .12s; }
.add-class-btn:hover { color: var(--text); border-color: var(--text-dim); background: rgba(255,255,255,0.03); }
/* Save day / Paste day sit under "+ add class" in the day footer */
.day-actions { display: flex; gap: 4px; }
.day-actions .chip { flex: 1; font-size: 10px; padding: 4px 4px; text-transform: none; letter-spacing: normal; font-weight: 600; text-align: center; justify-content: center; }

/* ---- saved-week template list (paste picker) ---- */
.tpl-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); background: var(--bg); border-radius: 10px; overflow: hidden; transition: all .12s; }
.tpl-row:hover { border-color: var(--accent); }
.tpl-row-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; cursor: pointer; }
.tpl-row .tpl-name { font-weight: 600; font-size: 14px; }
.tpl-row .tpl-count { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.tpl-row .tpl-del { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--text-faint); margin-right: 6px; }
.tpl-row .tpl-del:hover { color: var(--danger); background: var(--danger-dim); }
/* holiday toggle on a saved day */
.tpl-row .tpl-holiday { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); padding: 6px; }
.tpl-row .tpl-holiday:hover { color: var(--amber); background: var(--amber-dim); }
.tpl-row .tpl-holiday.on { color: var(--amber); }
.tpl-row.is-holiday { border-color: rgba(251,191,36,0.4); }
.tpl-holiday-tag { margin-left: 8px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--amber); background: var(--amber-dim); border: 1px solid rgba(251,191,36,0.4); border-radius: 20px; padding: 1px 7px; vertical-align: middle; }

/* ---- coach availability + assignment list (modal) ---- */
.coach-list { display: flex; flex-direction: column; gap: 8px; }
.coach-opt { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 9px 9px 9px 13px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg); transition: all .12s; }
.coach-id { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; }
.coach-id .cname2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-opt .cavatar { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.09); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.coach-opt .cname2 { font-weight: 600; font-size: 13.5px; }
/* grouped sections: Regulars / Available / All coaches */
.coach-group { margin-bottom: 6px; }
.coach-group + .coach-group { margin-top: 14px; }
.coach-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.coach-group-title { font-family: 'League Gothic', sans-serif; text-transform: uppercase; font-size: 15px; letter-spacing: .05em; color: var(--text-dim); }
.coach-group-count { font-size: 10px; font-weight: 700; color: var(--text-faint); background: rgba(255,255,255,0.06); border-radius: 20px; padding: 1px 7px; }
.coach-group .coach-opt + .coach-opt { margin-top: 8px; }
.coach-empty { font-size: 12px; color: var(--text-faint); padding: 2px 2px 4px; }

.coach-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.star-btn { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-faint); font-size: 13px; line-height: 1; border-radius: 8px; cursor: pointer; transition: all .12s; }
.star-btn.active { background: var(--amber-dim); border-color: var(--amber); color: var(--amber); }

/* "Assign" reads amber to invite the click; once confirmed it turns green */
.assign-btn { flex: 0 0 auto; border: 1px solid var(--amber-dim); background: transparent; color: var(--amber); font-size: 11.5px; font-weight: 700; padding: 7px 11px; border-radius: 8px; cursor: pointer; transition: all .12s; white-space: nowrap; }
.assign-btn.active { background: var(--green-dim); border-color: var(--green); color: var(--green); }

/* "Pre-assign" — an admin-only draft step. Green to hint it's on the way to
   assigned; the drafted state ("Pre-assigned") shows dashed to read as tentative. */
.preassign-btn { flex: 0 0 auto; border: 1px solid var(--green-dim); background: transparent; color: var(--green); font-size: 11.5px; font-weight: 700; padding: 7px 11px; border-radius: 8px; cursor: pointer; transition: all .12s; white-space: nowrap; }
.preassign-btn.active { border-style: dashed; border-color: var(--green); background: var(--green-dim); }

/* "Available" — the promote action shown on All-coaches rows */
.avail-btn { flex: 0 0 auto; border: 1px solid var(--border-strong); background: transparent; color: var(--text-dim); font-size: 11.5px; font-weight: 700; padding: 7px 11px; border-radius: 8px; cursor: pointer; transition: all .12s; white-space: nowrap; }

/* × to take a coach back out of Available */
.coach-remove { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-faint); font-size: 17px; line-height: 1; border-radius: 8px; cursor: pointer; transition: all .12s; }

/* Hover highlights only on real pointers (mouse). On touch screens a tapped
   button that then reflows under the finger would otherwise keep a "stuck"
   amber highlight — this stops that. */
@media (hover: hover) {
  .coach-opt:hover { border-color: var(--text-dim); }
  .star-btn:hover { color: var(--amber); border-color: var(--amber); }
  .assign-btn:hover:not(.active) { border-color: var(--amber); background: var(--amber-dim); }
  .preassign-btn:hover:not(.active) { border-color: var(--green); background: var(--green-dim); }
  .avail-btn:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
  .coach-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-dim); }
}

/* below 900px the 7-day week scrolls sideways within its card, with each day
   snapping into view so a thumb-swipe lands cleanly on the next column */
@media (max-width: 900px) {
  .week-days { grid-template-columns: repeat(7, minmax(128px, 1fr)); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .week-days > .day-col { scroll-snap-align: start; }
  .week-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 720px) {
  .app { width: 96%; max-width: 96%; padding: 12px 0 44px; margin: 0 auto; }
  html, body { overflow-x: hidden; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar .h2 { font-size: 18px; }
  .month-nav { gap: 6px; }
  .month-nav .icon-btn { font-size: 16px; }
  #monthLabel { min-width: 0 !important; font-size: 16px; white-space: nowrap; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .topbar-center .h2 { white-space: nowrap; }
  .month-grid { gap: 44px; }
  /* keep the schedule content a touch narrower than the top bar on mobile too,
     mirroring the desktop inset — just smaller to fit the screen */
  .app > .month-grid, .app > .filter-bar { margin-left: 10px; margin-right: 10px; }
  /* keep time + name + initials legible in the tighter columns */
  .class-box { padding: 3px 6px; }
  .class-box .cname { font-size: 10px; }
  .class-box .ctime, .class-box .cinit, .class-box .cmore { font-size: 9px; }
  /* stats: line the title + filters up with the card's content (same inset) */
  .stats-card { padding: 16px; }
  .stats-head-top, .stats-filter-bar { padding-left: 16px; padding-right: 16px; }
}