* { box-sizing:border-box; }
:root {
  font-family:"Golos Text","Inter","Segoe UI",sans-serif;
  color:#251c21; background:#f7f4f3; line-height:1.5;
  --ink:#251c21; --muted:#6b5b64; --line:#eee4e6; --paper:#fff;
  --wine:#330e1e; --red:#b0153e; --light:#f9e9ed; --pink:#fec9d7;
  --shadow:0 12px 36px #4012230b;
}
body { margin:0; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:0; border-radius:12px; min-height:44px; padding:.62rem .95rem; color:inherit; background:var(--light); font-weight:680; transition:background .18s,box-shadow .18s; }
button:hover { background:#f2d8df; }
button:disabled { opacity:.65; cursor:wait; }
:focus-visible { outline:3px solid #c32052; outline-offset:3px; }
.primary { background:var(--red); color:white; box-shadow:0 8px 17px #a40c3326; }
.primary:hover { background:#8c1032; }
.danger { color:#8b1737; background:#fce8ed; }
.quiet { background:white; border:1px solid var(--line); }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(2.15rem,4.4vw,4.2rem); letter-spacing:-.065em; line-height:1.03; font-weight:780; }
h2 { font-size:1.25rem; letter-spacing:-.035em; line-height:1.25; }
h3 { font-size:1rem; letter-spacing:-.018em; }
small,.muted { color:var(--muted); }
.ico { flex:none; width:20px; height:20px; vertical-align:middle; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.shell { min-height:100svh; display:grid; grid-template-columns:238px minmax(0,1fr); }
aside { position:sticky; top:0; height:100svh; background:var(--wine); color:#fff6f8; padding:28px 16px 18px; display:flex; flex-direction:column; gap:40px; }
.brand { display:flex; align-items:center; gap:12px; font-size:1.04rem; font-weight:760; letter-spacing:-.03em; line-height:1.13; }
aside .brand { padding:0 8px; }
.logo { width:44px; height:44px; flex:none; background:var(--pink); color:#5b0d2a; border-radius:14px; display:grid; place-items:center; }
.logo .ico { width:25px; height:25px; }
nav { display:grid; gap:6px; }
nav button { display:flex; align-items:center; gap:11px; background:transparent; color:#efd9e1; text-align:left; padding:12px 14px; }
nav button:hover { background:#ffffff15; }
nav button[aria-current="page"] { background:#6d1a36; color:#fff; }
nav button[aria-current="page"] .ico { color:var(--pink); }
aside :focus-visible { outline-color:var(--pink); }
.profile { margin-top:auto; border-top:1px solid #ffffff27; padding:16px 0 0; display:flex; align-items:center; gap:9px; }
.avatar { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#582033; background:#f5ccda; font-size:.78rem; font-weight:800; }
.profile div { min-width:0; flex:1; }
.profile strong { font-size:.82rem; overflow-wrap:anywhere; }
.profile p { color:#dfb5c4; font-size:.75rem; }
.icon-button { display:grid; place-items:center; flex:none; min-width:44px; padding:0; color:inherit; background:transparent; }
.icon-button:hover { background:#ffffff19; }
main { padding:clamp(20px,4vw,62px); min-width:0; }
.container { max-width:1270px; margin:auto; }
.page-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:27px; }
.page-header p { color:var(--red); font-size:.8rem; font-weight:800; margin-bottom:7px; }
.header-actions { display:flex; gap:12px; align-items:end; }
.child-select { min-width:180px; }
.summary-grid { display:grid; grid-template-columns:minmax(230px,1.8fr) repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:23px; }
.next-session,.metric { min-height:157px; border-radius:21px; padding:16px; }
.next-session { position:relative; isolation:isolate; overflow:hidden; color:white; background:linear-gradient(125deg,#7d1336,#410e24); }
.next-session::after { position:absolute; z-index:-1; content:""; width:155px; height:105px; right:-61px; top:26px; transform:rotate(-18deg); border:1px solid #ffffff45; background:linear-gradient(90deg,transparent 49.7%,#ffffff48 50%,transparent 50.3%),radial-gradient(circle at 50%,transparent 21px,#ffffff49 22px,transparent 23px); border-radius:12px; }
.summary-title { color:#ffdce7; font-size:.8rem; font-weight:700; display:flex; gap:7px; align-items:center; margin-bottom:12px; }
.summary-title .ico,.next-base .ico { width:15px; height:15px; }
.next-session h2 { font-size:clamp(1.08rem,2.2vw,1.58rem); margin-bottom:3px; }
.next-session p { font-size:.88rem; }
.next-base { display:flex; align-items:center; gap:6px; color:#ffdae7; margin-top:8px; }
.metric { border:1px solid var(--line); background:white; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:start; }
.metric-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--light); color:var(--red); }
.metric b { margin-top:7px; font-size:clamp(1.75rem,3.5vw,2.45rem); letter-spacing:-.065em; line-height:1.12; font-variant-numeric:tabular-nums; }
.metric p { color:var(--muted); margin-top:4px; font-size:.81rem; font-weight:620; }
.panel { background:white; border:1px solid var(--line); border-radius:21px; padding:clamp(15px,2vw,24px); box-shadow:var(--shadow); margin-bottom:16px; }
.bar,.actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bar { justify-content:space-between; margin-bottom:16px; }
.section-heading p { margin-top:3px; color:var(--muted); font-size:.83rem; }
.filters,.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:12px; }
.filters { padding:0 0 16px; }
.filters:has(>label:only-child) { grid-template-columns:minmax(150px,240px); }
label { display:grid; gap:5px; color:#54404a; font-weight:650; font-size:.85rem; }
input,select,textarea { width:100%; min-width:0; min-height:44px; border:1px solid #ded0d6; border-radius:11px; padding:.55rem .72rem; background:#fff; color:var(--ink); }
select { padding-right:1.5rem; cursor:pointer; }
form { display:grid; gap:14px; }
form .primary { justify-self:start; }
.listing { display:grid; gap:9px; }
article { display:grid; grid-template-columns:minmax(110px,1fr) minmax(120px,1fr) minmax(120px,1fr) auto; align-items:center; gap:15px; padding:14px; background:white; border:1px solid var(--line); border-radius:15px; }
article p, article strong { overflow-wrap:anywhere; }
.schedule-panel .listing { gap:0; }
.training { border:0; border-top:1px solid var(--line); border-radius:0; padding:13px 0; grid-template-columns:minmax(122px,.88fr) minmax(105px,1fr) minmax(120px,1.12fr) minmax(110px,auto); }
.training:last-child { padding-bottom:0; }
.training-time,.training-base { display:flex; align-items:center; gap:9px; min-width:0; }
.training-time strong { white-space:nowrap; font-size:.86rem; font-variant-numeric:tabular-nums; }
.training-base .ico { color:var(--red); width:16px; height:16px; }
.training-base strong { font-size:.91rem; }
.training .muted { font-size:.8rem; }
.weekday { text-transform:capitalize; }
.date-tile { flex:none; display:grid; place-content:center; text-align:center; min-width:43px; min-height:49px; border-radius:10px; background:#faecef; color:#771733; line-height:1.04; }
.date-tile b { font-size:1.24rem; font-variant-numeric:tabular-nums; }
.date-tile span { font-size:.69rem; margin-top:3px; }
.training-state { display:grid; gap:5px; justify-items:start; }
.training-state .actions:empty { display:none; }
.training-state .quiet { min-height:40px; padding:.45rem .64rem; font-size:.78rem; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:.22rem .58rem; border-radius:99px; background:#f3eff1; color:#574450; font-size:.74rem; font-weight:700; }
.badge::before { content:""; width:6px; height:6px; flex:none; border-radius:50%; background:currentColor; opacity:.7; }
.badge.present { background:#e6f3e9; color:#225f3c; }
.badge.absent,.badge.cancelled { background:#fce7ec; color:#8b1737; }
.badge.frozen { background:#e7edfb; color:#304883; }
.badge.excused { background:#fbefda; color:#784e19; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr)); gap:14px; }
.cards .panel { margin:0; }
.roster-row { border-top:1px solid var(--line); padding:14px 0; margin-top:6px; display:grid; gap:8px; }
.roster-row form { display:flex; align-items:end; flex-wrap:wrap; }
.roster-row label { flex:1 1 130px; }
dialog { width:min(690px,calc(100% - 24px)); max-height:90svh; border:1px solid var(--line); border-radius:23px; box-shadow:0 22px 65px #330b2570; padding:clamp(15px,4vw,30px); color:inherit; }
dialog::backdrop { background:#260917a8; backdrop-filter:blur(4px); }
#notice { position:fixed; bottom:18px; right:18px; background:var(--wine); color:white; border-radius:13px; padding:.8rem 1rem; max-width:min(425px,calc(100% - 36px)); z-index:3; box-shadow:var(--shadow); }
#notice:empty { display:none; }
.login { display:grid; grid-template-columns:1.18fr 1fr; min-height:100svh; padding:14px; gap:14px; }
.login-cover { border-radius:23px; padding:clamp(24px,5vw,65px); color:white; display:flex; flex-direction:column; justify-content:space-between; gap:48px; min-height:420px; background:linear-gradient(180deg,#2a09156e 0%,#2a09151f 35%,#290917d6 100%),url("/football-cover.webp") 79% center/cover,#4b1229; }
.cover-copy h1 { font-size:clamp(2.9rem,6.5vw,7rem); }
.cover-copy h1 span { color:#ff9db8; }
.cover-copy p { color:#ffe0e8; font-size:clamp(.95rem,2vw,1.2rem); margin-top:13px; font-weight:600; }
.login-main { display:grid; place-items:center; padding:clamp(18px,5vw,62px); }
.login-form { width:min(100%,390px); }
.login-form h2 { font-size:clamp(1.8rem,4vw,3rem); }
.login form { margin-top:22px; }
.login form .primary { justify-self:stretch; margin-top:3px; }
.empty { padding:26px 12px; text-align:center; color:var(--muted); }
[hidden] { display:none!important; }
@media(max-width:1140px) {
  .shell { grid-template-columns:202px minmax(0,1fr); }
  .summary-grid { grid-template-columns:minmax(165px,1.4fr) repeat(3,minmax(0,1fr)); }
  .training { gap:9px; }
}
@media(max-width:890px) {
  .shell { grid-template-columns:1fr; }
  aside { height:auto; position:static; padding:13px 16px; gap:0; }
  aside .brand { padding:0 48px 0 0; }
  aside .logo { width:38px; height:38px; border-radius:11px; }
  .profile { position:absolute; right:13px; top:10px; border:0; padding:0; }
  .profile div,.profile .avatar { display:none; }
  nav { position:fixed; z-index:2; inset:auto 0 0; display:flex; gap:3px; padding:5px 8px calc(5px + env(safe-area-inset-bottom)); background:white; color:var(--ink); border-top:1px solid var(--line); box-shadow:0 -6px 25px #43122710; }
  nav button { color:#5d4c54; flex:1; min-width:0; padding:6px 2px; flex-direction:column; justify-content:center; gap:3px; text-align:center; line-height:1.15; font-size:.73rem; }
  nav button[aria-current="page"] { background:var(--light); color:#831230; }
  nav button[aria-current="page"] .ico { color:var(--red); }
  nav button:hover { background:#f7edf0; }
  .shell main { padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  #notice { bottom:calc(76px + env(safe-area-inset-bottom)); }
}
@media(max-width:650px) {
  main { padding:19px 14px; }
  .page-header { display:grid; gap:13px; margin-bottom:16px; }
  .header-actions:empty { display:none; }
  .child-select { width:100%; }
  .summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:15px; }
  .next-session { grid-column:1/-1; min-height:0; padding:14px; border-radius:16px; }
  .summary-title { margin-bottom:7px; }
  .metric { min-height:0; padding:10px; border-radius:14px; }
  .metric-icon { width:29px; height:29px; border-radius:8px; }
  .metric-icon .ico { width:17px; height:17px; }
  .metric p { font-size:.72rem; line-height:1.23; overflow-wrap:anywhere; }
  .filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  article,.training { grid-template-columns:1fr 1fr; }
  .training-time { grid-column:1; grid-row:1; }
  .training-team { grid-column:2; grid-row:1; }
  .training-state { grid-column:2; }
  .training-status { overflow-wrap:anywhere; }
  .training-base { align-items:start; }
  .login { grid-template-columns:1fr; gap:12px; padding:10px; }
  .login-cover { min-height:clamp(250px,47svh,420px); }
  .login-main { padding:16px 14px 36px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }



/* Payments, order queues and stock */
.commerce-panel .bar { margin-bottom:12px; }
.commerce-list { display:grid; }
.commerce-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(92px,auto) minmax(0,auto); align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.commerce-row h3,.commerce-row p { overflow-wrap:anywhere; }
.commerce-row p,.commerce-row small { font-size:.82rem; }
.row-value { display:grid; justify-items:start; gap:4px; }
.row-value strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.row-actions { max-width:285px; justify-content:end; }
.row-actions:empty { display:none; }
.overview-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.metric-link { text-align:start; color:var(--ink); }
.metric-link:hover { background:#fff7f9; }
.metric-link > span:last-child { color:var(--muted); margin-top:4px; font-size:.82rem; }
.overview-queues { display:grid; grid-template-columns:1fr; gap:12px; }
.overview-queues .panel { margin:0; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); gap:12px; }
.product { border:1px solid var(--line); border-radius:16px; background:linear-gradient(160deg,#fff9fa,white 65%); padding:16px; display:grid; gap:8px; align-content:start; }
.product .bar { margin:6px 0 0; }
.product-icon { width:44px; height:44px; display:grid; place-items:center; background:var(--light); border-radius:12px; color:var(--red); margin-bottom:4px; }
.product-photo { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:12px; background:#fbf4f6; }
.product .primary { justify-self:start; }
.text-link { color:#8e1538; font-weight:700; text-underline-offset:.22em; display:inline-flex; align-items:center; min-height:40px; }
.payment-detail { display:grid; justify-items:start; gap:12px; }
.payment-amount { font-size:2rem; font-weight:780; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.qr-surface { border:1px solid var(--line); padding:12px; border-radius:14px; background:white; }
.qr-surface img { display:block; height:auto; max-width:100%; object-fit:contain; }
.dialog-copy { margin-bottom:12px; }
.form-error,.review-note { color:#8b1737; }
.form-error { background:#fff0f3; padding:10px 12px; border-radius:10px; }
@media(max-width:890px) {
  .role-admin nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .role-admin main { padding-bottom:calc(128px + env(safe-area-inset-bottom)); }
  body:has(.role-admin) #notice { bottom:calc(116px + env(safe-area-inset-bottom)); }
}
@media(max-width:640px) {
  .commerce-row { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .row-actions { grid-column:1/-1; justify-content:start; max-width:none; }
  .overview-tiles { gap:7px; }
  .metric-link > span:last-child { font-size:.72rem; line-height:1.25; }
  .role-parent nav button { font-size:clamp(.59rem,2.65vw,.73rem); }
}