:root{--bg:#f3f5f2;--surface:#fff;--ink:#142019;--muted:#6d7871;--line:#dde4df;--dark:#0b2a21;--volt:#d8ff3e;--volt-ink:#1b2500;--soft:#f5ffd2;--red:#b93642;--blue:#2e63b7;--amber:#8a6113;--radius:18px;--shadow:0 10px 28px rgba(11,42,33,.08)}*{box-sizing:border-box}html,body{margin:0;background:#102e25;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{min-height:100vh}a{color:inherit}.app{width:min(100%,460px);min-height:100vh;margin:auto;background:var(--bg);position:relative;padding-bottom:84px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(11,42,33,.97);color:#fff;padding:calc(12px + env(safe-area-inset-top)) 16px 12px}.brand{text-decoration:none;display:block}.brand strong{display:block;font-size:13px;line-height:1.1}.brand span{font-size:11px;color:#c2d3ca}.logo{width:40px;height:40px;border-radius:10px;background:#fff;border:2px solid #111;display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.25)}.logo:before{content:"";position:absolute;width:15px;height:54px;background:#d41f32;left:3px;top:-7px;transform:rotate(19deg)}.logo b{position:relative;color:#111;font-size:12px}main{padding:14px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:10px}.hero{background:var(--dark);color:#fff;border-radius:24px;padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end}.hero h1{font-size:28px;line-height:1.05;margin:0 0 7px}.hero p{margin:0;color:#c8d8cf}.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;text-decoration:none;border:0;border-radius:13px;padding:12px 14px;background:var(--volt);color:var(--volt-ink);font-weight:900;cursor:pointer}.btn.secondary{background:#fff;color:#263300;border:1px solid #819600}.btn.danger{background:var(--red);color:#fff}.btn.small{padding:8px 10px;font-size:12px}.field{margin-bottom:12px}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:5px}.input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;color:var(--ink);font:inherit}.input:focus,select:focus,textarea:focus{outline:3px solid rgba(216,255,62,.45);border-color:#6e8200}.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}.small{font-size:12px;color:var(--muted)}h1,h2,h3,p{margin-top:0}.badge{display:inline-block;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:850;background:var(--soft);color:#374500}.badge.red{background:#fde7ea;color:#962a34}.badge.blue{background:#e7efff;color:#2858a1}.badge.amber{background:#fff1d3;color:#76510e}.flash{margin:10px 14px 0;border-radius:13px;padding:11px 12px;font-size:13px}.flash.success{background:#eaf8d0;color:#263800}.flash.error{background:#fde7e9;color:#8d2730}.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,460px);display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:30}.nav a{text-decoration:none;text-align:center;padding:9px 2px 8px;font-size:18px;color:#536159}.nav span{display:block;font-size:9px;font-weight:800;margin-top:2px}.legal{display:flex;gap:14px;justify-content:center;padding:18px 10px 8px;font-size:11px;color:var(--muted)}.legal a{color:inherit}.court-grid{display:grid;grid-template-columns:52px repeat(3,1fr);gap:5px}.court-grid .head{font-size:10px;font-weight:800;color:var(--muted);text-align:center}.time{font-size:11px;color:var(--muted);display:flex;align-items:center;justify-content:flex-end}.slot{min-height:40px;border-radius:9px;background:#e8f8d8;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;font-weight:850;text-decoration:none;color:#284100;padding:4px}.slot.booked{background:#fde7e9;color:#902b34}.slot.blocked{background:#e7eae8;color:#4c5851}.slot.training{background:#e7efff;color:#27599f}.list{display:grid;gap:8px}.person,.item{border:1px solid var(--line);border-radius:13px;padding:10px;background:#fff}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 8px}.section-title h2,.section-title h3{margin:0}.notice{border-radius:13px;padding:11px;background:#f5ffd4;color:#334100;font-size:12px}.notice.warn{background:#fff1d3;color:#684b13}.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}.kpi strong{font-size:22px;display:block}.checkboxes{display:grid;gap:8px}.checkboxes label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);padding:9px;border-radius:12px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.admin-grid .card{margin:0}.profile-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#d5ddd8}.muted-link{color:#4d6100;font-weight:800}.public-note{font-size:12px;color:var(--muted)}@media(min-width:720px){body{padding:24px 0}.app{border-radius:28px;min-height:calc(100vh - 48px)}.nav{bottom:24px;border-radius:0 0 28px 28px}}
.club-logo{width:50px;height:72px;object-fit:contain;display:block;flex:0 0 auto;filter:drop-shadow(0 5px 10px rgba(0,0,0,.24))}
.legal-copy{line-height:1.58}
.legal-copy h2{margin-top:1.6rem;margin-bottom:.55rem;font-size:1.08rem}
.legal-copy p{margin:.55rem 0}
.legal-copy ul{padding-left:1.25rem;margin:.55rem 0 1rem}
.legal-copy li{margin:.28rem 0}
.legal-copy a{text-decoration:underline;text-underline-offset:2px}

/* Date navigation for court calendar */
.date-navigation{padding:12px;margin-top:10px}
.date-nav-row{display:grid;grid-template-columns:46px 46px 1fr 46px 46px;gap:6px;align-items:center;margin-bottom:10px}
.date-nav-btn,.date-nav-today{min-height:38px;border:1px solid var(--line);border-radius:11px;background:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--ink)}
.date-nav-btn{font-size:16px}.date-nav-today{font-size:12px;padding:0 8px}.date-nav-today.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.date-nav-btn.disabled{opacity:.3;pointer-events:none;background:#f0f2f0}
.date-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:12px}
.date-chip{min-width:0;text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:11px;padding:7px 2px 6px;text-align:center;color:var(--ink)}
.date-chip span{display:block;font-size:9px;color:var(--muted);font-weight:850;text-transform:uppercase}.date-chip strong{display:block;font-size:15px;margin-top:2px}
.date-chip.today{border-color:#809500}.date-chip.selected{background:var(--volt);border-color:#8da400;color:var(--volt-ink);box-shadow:0 4px 10px rgba(108,128,0,.14)}
.date-chip.selected span{color:#4d5d00}
.date-picker-row{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:10px;margin-top:2px;margin-bottom:7px}.date-picker-row label{font-size:11px;font-weight:850;white-space:nowrap}.date-picker{padding:8px 9px;font-size:12px;min-width:0}


.training-slot-link{text-decoration:none;cursor:pointer;position:relative}
.training-slot-link:after{content:'›';position:absolute;right:7px;top:50%;transform:translateY(-50%);font-weight:800;opacity:.58}
.training-slot-link:hover,.training-slot-link:focus-visible{filter:brightness(.97);outline:2px solid var(--dark);outline-offset:-2px}
.training-detail-head{gap:12px;align-items:flex-start}
.training-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.training-meta-grid>div{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.training-rsvp{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.participant-card{overflow:hidden}
.participant-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;font-size:.82rem;color:var(--muted)}
.participant-legend span{display:flex;align-items:center;gap:6px}
.legend-dot{display:inline-block;width:11px;height:11px;border-radius:50%}
.legend-dot.team{background:#bfe8c8;border:1px solid #69a877}
.legend-dot.guest{background:#ffe79a;border:1px solid #c9a63b}
.training-participants{display:grid;gap:8px}
.training-participant{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;border:1px solid transparent}
.training-participant.team-member{background:#dff3e3;border-color:#9fd1a9;color:#183f22}
.training-participant.external-player{background:#fff1b9;border-color:#e0c45b;color:#554400}
.participant-name{font-weight:750}
.participant-state{font-size:.78rem;font-weight:650;opacity:.78;text-align:right}
.rsvp-active{box-shadow:0 0 0 3px rgba(11,42,33,.16);font-weight:800}
.rsvp-active-secondary{box-shadow:0 0 0 3px rgba(11,42,33,.10);font-weight:800}
@media(max-width:640px){.training-rsvp{align-items:stretch;flex-direction:column}.training-rsvp .row{display:grid;grid-template-columns:1fr 1fr}.training-rsvp form,.training-rsvp button{width:100%}.participant-state{font-size:.72rem}.training-detail-head{flex-direction:column}.training-meta-grid{grid-template-columns:1fr 1fr}}


/* Searchable multi-select for booking partners */
.member-picker{position:relative;display:block}
.member-picker-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.member-picker-toggle:focus{outline:3px solid rgba(216,255,62,.45);border-color:#6e8200}
.member-picker-chevron{font-size:18px;line-height:1;color:var(--muted)}
.member-picker-panel{position:static;z-index:auto;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px;box-shadow:0 8px 22px rgba(11,42,33,.10)}
.member-search{margin-bottom:8px}
.member-options{max-height:260px;overflow:auto;display:grid;gap:5px;padding-right:2px}
.member-option{display:flex!important;align-items:center;gap:9px;margin:0!important;padding:9px 10px;border:1px solid transparent;border-radius:10px;cursor:pointer;font-size:13px!important;font-weight:650!important}
.member-option:hover{background:#f4f7f4}
.member-option.selected{background:var(--soft);border-color:#bbd050}
.member-option.disabled{opacity:.42;cursor:not-allowed}
.member-option input{width:18px;height:18px;accent-color:#6f8300;flex:0 0 auto}
.member-empty{padding:12px;text-align:center}
.member-picker-hint{margin-top:5px}

.member-option[hidden]{display:none!important}

/* Clickable personal bookings in the day calendar */
.own-booking-slot{text-decoration:none;cursor:pointer;position:relative;box-shadow:inset 0 0 0 2px rgba(144,43,52,.13)}
.own-booking-slot:after{content:'›';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-weight:900;opacity:.58}
.own-booking-slot:hover,.own-booking-slot:focus-visible{outline:2px solid #902b34;outline-offset:-2px;filter:brightness(.98)}
.booking-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.booking-detail-grid>div{display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff}

.member-picker-close{width:100%;margin-top:8px}
.generic-participants{display:grid;gap:8px}
.generic-participant{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.participant-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px;background:#eef2ef}
.participant-avatar-fallback{display:grid;place-items:center;font-size:13px;font-weight:850;color:#425047}
@media(max-width:640px){
  .member-options{max-height:210px}
  .member-picker-panel{box-shadow:none}
}

.role-permission-summary{display:grid;gap:8px;margin:12px 0 16px}
.role-permission-summary>div{display:grid;gap:2px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fff}
.role-permission-summary span{font-size:.86rem;color:var(--muted)}
.role-user-list{display:grid;gap:10px}
.role-user-head{gap:10px;align-items:flex-start}
.role-badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.role-super{background:var(--dark);color:#fff}
.role-checkbox-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.role-choice{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.role-choice input{margin-top:4px;flex:0 0 auto}
.role-choice span{display:grid;gap:2px}
.role-choice small{color:var(--muted);line-height:1.25}
.role-choice:has(input:checked){border-color:#8aa119;background:#f4ffd1}
@media(max-width:720px){
  .role-checkbox-grid{grid-template-columns:1fr}
  .role-user-head{align-items:flex-start}
}

.past-slot{
  background:#f0f2f0;
  color:#9aa29d;
  cursor:not-allowed;
  text-decoration:none;
  box-shadow:none;
  opacity:.78;
}