/* =====================================================================
   Point Five Pickle Court - styles (palette from the Point Five logo)
   ===================================================================== */
:root{
  /* Brand colours taken from the Point Five logo */
  --brand-blue:#3481F5;    /* logo outline */
  --brand-light:#8BB8FC;   /* "Point" lettering */
  --accent:#FD99CF;        /* "Five" lettering */
  --navy:#0A1325;          /* logo black, sidebar */
  /* Interface colours (all text pairs pass WCAG AA 4.5:1) */
  --primary:#1B66D8; --primary-dk:#154FA8; --primary-50:#EAF2FF; --primary-100:#D6E6FF;
  --accent-dk:#A8205F; --accent-50:#FFEDF6;
  --ink:#0E1729; --muted:#4A5672; --line:#C6D2E6; --line-2:#E4EAF4; --bg:#F4F7FD; --white:#fff;
  --amber-bg:#FFF1D6; --amber-ink:#7A4800; --red:#B42335; --red-bg:#FCE2E5; --red-ink:#8F1A28;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}
button,input,select,textarea{font-family:'DM Sans',system-ui,sans-serif}
[hidden]{display:none!important}
a{color:var(--primary)}

.sk{position:absolute;left:-9999px;top:8px;background:var(--primary);color:#fff;padding:8px 12px;border-radius:8px;z-index:60;font-size:14px;text-decoration:none}
.sk:focus{left:8px}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.hin{max-width:1240px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lg{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--ink);text-decoration:none}
.lm{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex:none}
.nv{display:flex;align-items:center;gap:4px}
.na{padding:10px 9px;border-radius:8px;border:0;background:transparent;text-align:left;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer}
.na.on{background:var(--primary-50);color:var(--primary-dk)}
.na:hover{background:var(--line-2)}
.cta{margin-left:8px;border:0;cursor:pointer;padding:11px 18px;border-radius:8px;background:var(--primary);color:#fff;font-size:15px;font-weight:500;text-decoration:none}
.hb{display:none;width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;cursor:pointer}
.mn{display:flex;flex-direction:column;gap:4px;max-width:1240px;margin:0 auto;padding:8px 24px 16px;border-top:1px solid var(--line-2)}
.na:focus-visible,.cta:focus-visible,.lg:focus-visible,.hb:focus-visible,.au:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ax{display:flex;align-items:center;gap:8px}
.au{height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.who{font-size:14px;color:var(--muted)}
.bg{display:inline-block;min-width:18px;padding:0 5px;margin-left:2px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:700;line-height:18px;text-align:center}
@media(max-width:1100px){.nv{display:none}.hb{display:block}.who{display:none}}
@media(min-width:1101px){.mn{display:none!important}}
.au{white-space:nowrap}
@media(max-width:600px){
  .hin{padding:10px 16px;gap:8px}
  .lg{font-size:15px;gap:8px;line-height:1.2}
  .ax{gap:6px}
  .au{padding:0 10px;font-size:14px}
  .ax > a.au{display:none}
  .page{padding:24px 16px}
  .amn{padding:20px 16px}
  .atb{margin:-20px -16px 0;padding:10px 16px}
}

/* ---------- Notifications popover ---------- */
.np{position:absolute;right:24px;top:100%;margin-top:4px;width:360px;max-width:calc(100% - 32px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:12px;display:flex;flex-direction:column;gap:8px;z-index:45;max-height:420px;overflow-y:auto}
.nt{padding:10px 12px;border-radius:8px;background:var(--bg);display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.nt b{font-size:14px;color:var(--ink)}
.nt.un{background:var(--primary-50)}
.nt .tm{font-size:12px}
button.nt{border:0;width:100%;text-align:left;cursor:pointer}
button.nt:hover{background:var(--line-2)}
button.nt.un:hover{background:var(--primary-100)}
.lk{font-size:12px;color:var(--primary);font-weight:500}

/* ---------- Page ---------- */
.page{width:100%;max-width:1100px;margin:0 auto;padding:32px 24px;display:flex;flex-direction:column;gap:24px}
.h1{margin:0;font-size:28px;font-weight:700}
.sub{margin:4px 0 0;font-size:14px;color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.card h2{margin:0;font-size:18px;font-weight:700}
.col{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}
.note{margin:0;font-size:13px;color:var(--muted)}
.small{font-size:12px;color:var(--muted)}
.pc{background:var(--primary-50);color:var(--primary-dk);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.pc.bad{background:var(--red-bg);color:var(--red-ink)}
.an{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--muted)}
.an b{color:var(--ink)}
.an .when{font-size:12px;color:var(--primary-dk);font-weight:500}

/* ---------- Booking layout ---------- */
.m{display:grid;gap:24px;grid-template-columns:340px minmax(0,1fr);grid-template-areas:"cal av" "bk av";align-items:start}
@media(max-width:820px){.m{grid-template-columns:minmax(0,1fr);grid-template-areas:"cal" "av" "bk"}}
.cal{grid-area:cal}.av{grid-area:av}.bk{grid-area:bk}
.w{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wd{font-size:12px;color:var(--muted);text-align:center;padding:4px 0}
.dy{height:44px;border-radius:8px;border:0;background:transparent;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.dy:hover{background:var(--line-2)}
.dy:disabled{color:#9AA6BD;cursor:default;background:transparent}
.td{box-shadow:inset 0 0 0 1px var(--primary)}
.sel,.sel:hover{background:var(--primary);color:#fff}
.dy.ap{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1}
.dy .dt{font-size:9px;color:var(--primary);height:10px}
.sel .dt{color:#fff}
.cf{box-shadow:inset 0 0 0 1px var(--red)}
.cf .dt{color:var(--red)}
.nb{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:18px;color:var(--ink);cursor:pointer;flex:none}
.nb:disabled{opacity:.4;cursor:default}

.g{display:grid;grid-template-columns:56px repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
.h{font-size:13px;color:var(--muted);padding:4px 0;text-align:center}
.t{font-size:13px;color:var(--muted);display:flex;align-items:center}
.s,.b,.k,.o,.x,.e{height:40px;border-radius:8px;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;padding:0;border:0}
.s{background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer}
.s:hover{border-color:var(--primary)}
.s.on,.s.on:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.s.pm{color:var(--accent-dk);font-weight:700}
.s.pm.on{color:#fff}
.b{background:var(--line-2);color:var(--muted)}
.k{background:var(--amber-bg);color:var(--amber-ink);padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o{background:var(--accent-50);color:var(--accent-dk)}
.x{background:var(--red-bg);color:var(--red-ink)}
.e{border:1px dashed var(--line-2)}
.sc{max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}
.hd{position:sticky;top:0;z-index:1;background:#fff;padding-bottom:4px}
.rr{display:flex;justify-content:space-between;padding:2px 8px;border-radius:6px;gap:8px}
.cur{background:var(--primary-50);color:var(--primary-dk);font-weight:500}
.sumbox{background:var(--bg);border-radius:8px;padding:8px;font-size:13px;line-height:1.7;color:var(--muted)}

/* ---------- Generic info cards ---------- */
.ic{flex:1 1 220px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;color:var(--ink)}
.ic h3{margin:0 0 6px;font-size:16px;font-weight:700}
.ic p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.oc{flex:1 1 320px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.op{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.ft{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.lv{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--primary-50);color:var(--primary-dk);font-size:12px;font-weight:700}
.ch{height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer}
.ch.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pr{display:flex;flex-wrap:wrap;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.pr:last-child{border-bottom:0}
.pr b{flex:0 0 160px;font-size:14px}
.pr span{flex:1 1 280px;font-size:14px;line-height:1.6;color:var(--muted);white-space:pre-line}
.btnlink{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none}
.btnlink.pri{border:0;background:var(--primary);color:#fff}

/* ---------- Leaderboard ---------- */
.lbw{overflow-x:auto}
.lb{display:grid;grid-template-columns:44px minmax(110px,1.6fr) 84px 64px 96px;gap:8px;align-items:center;padding:10px 12px;font-size:14px;min-width:460px}
.lh{font-size:12px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line)}
.lr{border-bottom:1px solid var(--line-2)}
.me{background:var(--primary-50);border-radius:8px;font-weight:500}
.bd{display:inline-block;justify-self:start;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.bv{background:var(--amber-bg);color:var(--amber-ink)}
.br{background:var(--primary-50);color:var(--primary-dk)}
.bn{background:var(--line-2);color:var(--muted)}
.stat-n{font-size:24px;font-weight:700}

/* ---------- Forms, modals ---------- */
.ov{position:fixed;inset:0;background:rgba(10,19,37,.6);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto;z-index:50}
.md{width:100%;max-width:440px;background:#fff;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);color:var(--ink)}
.mh{display:flex;justify-content:space-between;align-items:center}
.mh h2{margin:0;font-size:20px;font-weight:700}
.fl{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
.in{height:44px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font-size:15px;color:var(--ink);width:100%;background:#fff}
.in:focus,.ta:focus{outline:2px solid var(--primary);outline-offset:1px}
.ta{width:100%;min-height:80px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;color:var(--ink);resize:vertical}
.pb{height:48px;border-radius:8px;border:0;background:var(--primary);color:#fff;font-size:16px;font-weight:500;cursor:pointer;padding:0 20px}
.pb:disabled{opacity:.5;cursor:default}
.sb{height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:15px;cursor:pointer;padding:0 16px}
.sx{height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--ink);cursor:pointer}
.er{font-size:13px;color:var(--red);margin:0}
.ok{font-size:13px;color:var(--primary-dk);margin:0;font-weight:500}
.sm{background:var(--bg);border-radius:8px;padding:12px 16px;font-size:14px;line-height:1.7;color:var(--muted)}
.tb{flex:1;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer}
.tb.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ir{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.ir > span:first-child{color:var(--muted)}
.ir > span:last-child{text-align:right}
.pd{display:inline-block;background:var(--primary-50);color:var(--primary-dk);font-weight:700;font-size:12px;letter-spacing:.06em;padding:4px 10px;border-radius:999px}
.terms{border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:130px;overflow-y:auto;font-size:13px;line-height:1.6;color:var(--muted);white-space:pre-wrap}
.qrbox{width:220px;height:220px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff;display:flex;align-items:center;justify-content:center}
.qrbox img,.qrbox canvas{max-width:100%;height:auto}
.qrsm{width:96px;height:96px;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff;flex:none}
.qrsm img,.qrsm canvas{width:100%!important;height:auto!important}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;z-index:80;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:calc(100% - 32px);pointer-events:none}
.toast.bad{background:var(--red)}
.empty{font-size:14px;color:var(--muted);margin:16px 12px}
.loading{opacity:.6;pointer-events:none}

/* ---------- Admin ---------- */
.ad{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh;background:var(--bg)}
.asb{background:var(--navy);color:#fff;padding:20px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.ab{min-height:44px;padding:8px 12px;border-radius:10px;border:0;background:transparent;color:#DCE6F8;font:500 15px 'DM Sans',sans-serif;text-align:left;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:12px;width:100%;transition:background .15s,color .15s}
.ab:hover{background:rgba(255,255,255,.1);color:#fff}
.ab.on{background:var(--primary);color:#fff}
.amn{padding:28px 24px;display:flex;flex-direction:column;gap:20px;min-width:0;position:relative}
.atb{position:sticky;top:0;z-index:30;margin:-28px -24px 0;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;gap:12px}
.ah{margin:0;font-size:28px;font-weight:700}
.as{margin:4px 0 0;font-size:14px;color:var(--muted)}
.cd{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.cd h3{margin:0 0 12px;font-size:16px;font-weight:700}
.st{flex:1 1 200px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--ink);cursor:pointer;font-size:14px}
.st:hover{border-color:var(--primary)}
.st b{font-size:26px}
.st span{font-size:13px;color:var(--muted)}
.st span.lk{color:var(--primary)}
.tr{display:grid;gap:8px;align-items:center;padding:10px 12px;font-size:14px;border-bottom:1px solid var(--line-2)}
.t1{grid-template-columns:110px 150px minmax(150px,1.4fr) minmax(150px,1.4fr) 80px 90px 170px 100px 300px;min-width:1450px}
.t2{grid-template-columns:120px minmax(100px,1fr) minmax(170px,1.2fr) 120px 80px 60px 100px 90px;min-width:940px}
.t3{grid-template-columns:110px 130px minmax(120px,1fr) 80px 170px;min-width:680px}
.rb{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);text-align:left;font-size:14px;color:var(--ink);cursor:pointer}
.rb:hover{background:var(--bg)}
.hl{background:var(--primary-50)}
.phn{font-size:12px;color:var(--muted)}
.ib{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:8px 4px;font-size:14px;color:var(--muted);cursor:pointer;text-align:left;border-radius:6px}
.ib:hover{background:var(--bg)}
.ib.tot{font-weight:700;border-bottom:0}
.bars{display:flex;align-items:flex-end;gap:4px;height:150px;border-bottom:1px solid var(--line)}
.bw{flex:1;min-width:0;background:transparent;border:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;cursor:pointer;border-radius:6px}
.bw:hover,.bw.sl{background:var(--primary-50)}
.ba{background:var(--brand-light);border-radius:4px 4px 0 0;width:100%}
.ba.pk{background:var(--primary)}
.ba.lo{background:var(--accent)}
.blabels{display:flex;gap:4px}
.blabels div{flex:1;min-width:0;text-align:center;font-size:11px;line-height:1.3;color:var(--muted);white-space:pre-line}
.dl{font-size:13px;padding:8px 10px;border-radius:8px;background:var(--bg);color:var(--muted);margin-top:6px}
.dl.bad{background:var(--red-bg);color:var(--red-ink)}
.sr{flex:1;min-width:0;text-align:left;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:2px;color:var(--ink);font-size:14px}
.sr span{font-size:12px;color:var(--muted)}
.sr.on{border-color:var(--primary);background:var(--primary-50)}
.nmain{flex:1;min-width:0;text-align:left;background:transparent;border:0;padding:0;display:flex;flex-direction:column;gap:2px;cursor:pointer;color:var(--muted);font-size:13px}
.nmain b{color:var(--ink);font-size:14px}
.login-wrap{display:flex;justify-content:center;padding:64px 16px;min-height:100vh}

/* ---------- Open play slots ---------- */
.slots{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line-2);padding-top:12px}
.meter{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden}
.meter span{display:block;height:100%;background:var(--primary);border-radius:999px}
.slotline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:13px;color:var(--muted)}
.slotline b{color:var(--primary-dk)}
.slotline b.low{color:var(--amber-ink)}
.slotline b.full{color:var(--red)}

/* ---------- Terms checkbox ---------- */
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px}
.agree input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--primary)}

/* ---------- Reports ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:13px;color:var(--muted)}
.kpi b{font-size:22px}
.rbars{display:flex;align-items:flex-end;gap:3px;height:160px;border-bottom:1px solid var(--line)}
.rbar{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.rbar i{display:block;width:100%;background:var(--primary);border-radius:3px 3px 0 0;min-height:2px}
.rbar small{font-size:10px;color:var(--muted);margin-bottom:2px;white-space:nowrap}
.rlabels{display:flex;gap:3px}
.rlabels div{flex:1;min-width:0;text-align:center;font-size:10px;color:var(--muted);overflow:hidden}
.t6{grid-template-columns:110px minmax(130px,1fr) minmax(140px,1.2fr) minmax(150px,1.2fr) 80px 90px 120px;min-width:900px}

/* ---------- Activity log and outbox ---------- */
.t4{grid-template-columns:170px 120px 190px minmax(240px,1fr) 110px;min-width:900px;align-items:start}
.t5{grid-template-columns:150px 70px 200px minmax(260px,1fr) 120px;min-width:880px;align-items:start}
.t6{grid-template-columns:150px 80px 190px minmax(240px,1fr) 190px 150px;min-width:1040px;align-items:start}
.t4 > div,.t5 > div,.t6 > div{word-break:break-word}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;font-size:13px;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.filters .fl{font-size:12px;font-weight:500}
.filters .in{height:40px;font-size:14px}

@media print{
  .asb,.atb,.noprint{display:none!important}
  .ad{display:block;min-height:0}
  .amn{padding:0}
  body{background:#fff}
  .cd,.kpi{break-inside:avoid}
}

/* ---------- Login / sign-up fields ---------- */
.req{color:var(--red);font-weight:700}
.grp{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.grp legend{padding:0 6px;font-size:13px;font-weight:700;color:var(--primary-dk)}
.inwrap{position:relative;display:flex}
.inwrap .in{flex:1}
.inwrap .in[type=password],.inwrap .in[name=password],.inwrap .in[name=confirm]{padding-right:68px}
.eye{position:absolute;right:6px;top:6px;height:32px;padding:0 10px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px;cursor:pointer}
.eye:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.in.bad{border-color:var(--red);background:#FFF7F8}
.in.bad:focus{outline-color:var(--red)}
.fe{margin:2px 0 0;font-size:13px;font-weight:500;color:var(--red)}
.fh{margin:2px 0 0;font-size:12px;font-weight:400;color:var(--muted)}

/* ---------- Brand touches ---------- */
.hdr{border-bottom:0}
.hdr::after{content:'';display:block;height:3px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-light) 48%,var(--accent) 52%,var(--accent))}
.lg img{display:block;height:60px;width:auto}
.lg picture,.lg{display:block}
.side-logo{display:block;width:100%;max-width:200px;height:auto;margin:0 auto}
.side-sub{text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-light);margin:6px 0 14px}
.login-logo{display:block;width:220px;max-width:80%;height:auto;margin:0 auto 4px}
.pc.promo{background:var(--accent-50);color:var(--accent-dk)}
.bp{background:var(--accent-50);color:var(--accent-dk)}
.asb .ab.on{background:var(--primary);box-shadow:inset 3px 0 0 var(--accent)}
.st b,.kpi b{color:var(--ink)}
@media(max-width:600px){.lg img{height:46px}}

/* ---------- Footer (all pages) ---------- */
body.has-ft{min-height:100vh;display:flex;flex-direction:column}
body.has-ft > .page,body.has-ft > .login-wrap{flex:1 0 auto}
body.has-ft > .ad{flex:1 0 auto}
.login-wrap{min-height:0}
.site-ft{flex:none;font-size:13px;line-height:1.6}
.site-ft p{margin:0}
.ft-in{max-width:1240px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px}
.site-ft-public{background:var(--navy);color:#C9D6EE}
.site-ft-public::before{content:'';display:block;height:3px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-light) 48%,var(--accent) 52%,var(--accent))}
.site-ft-public strong{color:#fff}
.site-ft-admin{margin:auto -24px -28px;border-top:1px solid var(--line-2);color:var(--muted);background:#fff}
.site-ft-admin .ft-in{padding:14px 24px}
.site-ft-admin strong{color:var(--ink)}
.amn{min-height:100vh}
@media(max-width:600px){
  .ft-in{padding:16px;flex-direction:column;align-items:flex-start}
  .site-ft-admin{margin:auto -16px -20px}
}
@media print{.site-ft-public{background:#fff;color:#4A5672}.site-ft-public::before{display:none}.site-ft-public strong{color:#0E1729}}

/* ---------- Payment accounts and QR codes ---------- */
.accts{display:flex;flex-direction:column;gap:8px}
.acct{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;cursor:pointer}
.acct span{font-size:13px;color:var(--muted)}
.acct.on{border-color:var(--primary);background:var(--primary-50);box-shadow:inset 0 0 0 1px var(--primary)}
.qrbox{width:240px;height:240px}
.qrbox img{width:100%;height:100%;object-fit:contain;border-radius:6px}
.qrbox.noqr{background:var(--primary-50);border-style:dashed}
.qrbox.noqr div{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:12px}
.qrbox.noqr b{font-size:18px}
.qrbox.noqr span{font-size:20px;font-weight:700;letter-spacing:.04em;word-break:break-all}
.qrbox.noqr small{font-size:13px;color:var(--muted)}
.refqr{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px dashed var(--line);border-radius:12px;padding:14px;background:#fff}
.qrref{width:150px;height:150px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center}
.qrref img,.qrref canvas{width:136px!important;height:136px!important}
.reflbl{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.refno{font-size:20px;font-weight:700;letter-spacing:.08em;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink)}
.pacct{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2);flex-wrap:wrap}
.pacct.off{opacity:.7}
.pqr{width:72px;height:72px;flex:none;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pqr img{width:100%;height:100%;object-fit:contain}
.pqr span{font-size:11px;color:var(--muted);text-align:center;padding:4px}
.pinfo{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.pinfo > span{color:var(--muted);overflow-wrap:anywhere}
.pinfo > span.small{overflow-wrap:normal;line-height:1.7}
.pact{display:flex;gap:6px;flex-wrap:wrap}
.qrprev{width:200px;height:200px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:4px 0}
.qrprev img{width:100%;height:100%;object-fit:contain}
.qrprev span{font-size:13px;font-weight:400;color:var(--muted);text-align:center;padding:12px}
.linkbtn{border:0;background:none;padding:0;color:var(--primary-dk);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
@media(max-width:600px){.qrbox{width:220px;height:220px}}

/* ---------- Offline review badge (admin top bar) ---------- */
.modebadge{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;background:var(--amber-bg);color:var(--amber-ink);font-size:12px;font-weight:700;vertical-align:middle}
@media(max-width:600px){.modebadge{display:block;width:max-content;margin:4px 0 0}}

/* ---------- Many payment methods ---------- */
.mtabs .tb{flex:1 1 120px;min-width:0;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmethod .pmhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sb.danger{color:var(--red);border-color:var(--red)}

/* ---------- Payment options: e-wallets and banks ---------- */
.payopts{display:flex;flex-direction:column;gap:10px}
.pglbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.payopts > .pglbl{font-size:14px;letter-spacing:0;text-transform:none;margin:0}
.pogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.po{height:48px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po:hover{border-color:var(--primary)}
.po.on{background:var(--primary);border-color:var(--primary);color:#fff}
.kindtag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;vertical-align:middle;background:var(--primary-50);color:var(--primary-dk)}
.kindtag.bank{background:var(--accent-50);color:var(--accent-dk)}
.quickadd .ch{height:36px;font-size:13px;padding:0 12px}

/* ---------- Payment choice in "Your details" ---------- */
.paychoice{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.paywith{margin:0;font-size:12px;color:var(--muted)}

/* ---------- Hours on hold: "Payment is ongoing" bubble ---------- */
.hold{position:relative;height:40px;border-radius:8px;font:500 13px 'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--amber-ink);color:var(--amber-ink);cursor:help;padding:0;
  background:repeating-linear-gradient(135deg,var(--amber-bg) 0 8px,#fff 8px 14px)}
.hold .bubble{display:none;position:absolute;z-index:5;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:220px;
  background:var(--navy);color:#fff;font-size:12px;font-weight:400;line-height:1.45;text-align:left;padding:10px 12px;border-radius:10px;
  box-shadow:0 8px 24px rgba(10,19,37,.25);pointer-events:none}
.hold .bubble b{display:block;font-size:13px;margin-bottom:2px;color:var(--accent)}
.hold .bubble::after{content:'';position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--navy)}
.hold:hover .bubble,.hold:focus .bubble,.hold.show .bubble{display:block}
.g .hold:nth-child(2) .bubble{left:0;transform:none}
.g .hold:last-child .bubble{left:auto;right:0;transform:none}
.g .hold:nth-child(2) .bubble::after{left:24px}
.g .hold:last-child .bubble::after{left:auto;right:18px}
.gapnote{margin:6px 8px 0;padding:6px 10px;border-radius:8px;background:var(--accent-50);color:var(--accent-dk);font-size:12px;font-weight:500}

/* ---------- Staff roles ---------- */
.whoami{display:flex;flex-direction:column;gap:4px;padding:10px 14px;margin-bottom:6px;border-top:1px solid rgba(255,255,255,.12);font-size:14px}
.rolebadge{align-self:flex-start;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--primary);color:#fff}
.rolebadge.fd{background:var(--accent);color:var(--navy)}
.t7{grid-template-columns:minmax(140px,1.2fr) minmax(120px,1fr) 130px 90px 110px 250px;min-width:880px}
.roledesc{font-size:12px;color:var(--muted);margin:0}

/* ---------- QR check-in ---------- */
.scanview{position:relative;background:var(--navy);border-radius:12px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.scanview video{width:100%;height:100%;object-fit:cover;display:block}
.scanframe{position:absolute;inset:16% 22%;border:3px solid var(--accent);border-radius:16px;box-shadow:0 0 0 999px rgba(10,19,37,.35);pointer-events:none}
.scanview.found .scanframe{border-color:#3FD07A}
.scanmsg{position:absolute;inset:auto 12px 12px;margin:0;color:#fff;font-size:13px;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.scanidle{color:#C7D6F2;font-size:14px;text-align:center;padding:24px;line-height:1.5}
.ckres{border-width:2px}
.ckres.ok{border-color:#1E8E4E;background:#F0FBF4}
.ckres.warn{border-color:var(--amber-ink);background:var(--amber-bg)}
.ckres.bad{border-color:var(--red);background:var(--red-bg)}
.ckres.done{border-color:var(--primary);background:var(--primary-50)}
.ckres .big{font-size:18px;font-weight:700;margin:0}
.ckres.ok .big{color:#17663A}.ckres.warn .big{color:var(--amber-ink)}.ckres.bad .big{color:var(--red-ink)}.ckres.done .big{color:var(--primary-dk)}
.ckrow{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.ckrow:last-child{border-bottom:0}
.ckin{color:#17663A;font-weight:700;font-size:13px}
.bg-ok{background:#E3F6EA;color:#17663A}
.filebtn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}

/* ---------- Time column: start and end of each hour (the last row ends "to 12 MN") ---------- */
.g .t{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.15}
.g .t small{font-size:10px;color:var(--muted);opacity:.85}
[hidden]{display:none!important}

/* ---------- Court calendar (front desk dashboard) ---------- */
.ccal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ccal .wd{font-size:12px;color:var(--muted);text-align:center}
.cday{min-height:64px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:6px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;cursor:pointer;font:500 13px 'DM Sans',sans-serif;color:var(--ink);text-align:left}
.cday:hover{border-color:var(--primary)}
.cday.sel{outline:2px solid var(--primary);border-color:var(--primary)}
.cday.td .dn{background:var(--primary);color:#fff;border-radius:999px;padding:0 6px}
.cday .bar{height:5px;border-radius:3px;background:var(--line-2);width:100%;overflow:hidden;margin-top:auto}
.cday .bar i{display:block;height:100%;background:var(--primary)}
.cday .bar i.hi{background:var(--accent-dk)}
.cday small{font-size:11px;color:var(--muted)}
.cgrid .g{grid-template-columns:62px repeat(3,minmax(0,1fr))}
.cgrid .b,.cgrid .in,.cgrid .hold,.cgrid .s0,.cgrid .k,.cgrid .o,.cgrid .pp{height:40px;border-radius:8px;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;padding:0 6px;border:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;font-family:'DM Sans',sans-serif}
.cgrid .b{background:var(--primary-100);color:var(--primary-dk);cursor:pointer}
.cgrid .in{background:#E3F6EA;color:#17663A;cursor:pointer}
.cgrid .hold{cursor:pointer}
.cgrid .s0{background:#fff;border:1px solid var(--line);color:var(--muted)}
.cgrid .pp{background:var(--line-2);color:var(--muted);opacity:.7}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}

.calstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.calstats .st b{font-size:24px}
.cday.sel,.cday.sel:hover{background:var(--primary-50);color:var(--ink);outline:2px solid var(--primary)}
.cday.sel small{color:var(--primary-dk)}
.calrow{width:100%;background:none;border:0;border-bottom:1px solid var(--line-2);text-align:left;cursor:pointer;font:inherit;color:inherit;grid-template-columns:minmax(120px,240px) minmax(0,1fr) auto}
.calrow:hover{background:var(--bg)}
@media(max-width:600px){.calrow{grid-template-columns:minmax(0,1fr) auto}.calrow>div:first-child{grid-column:1/-1}}

/* ---------- Help tooltips (assets/js/tips.js) ---------- */
.tipbox{position:fixed;z-index:95;max-width:min(280px,calc(100vw - 16px));background:var(--navy);color:#fff;font:400 13px/1.45 'DM Sans',sans-serif;
  padding:8px 11px;border-radius:9px;box-shadow:0 8px 24px rgba(10,19,37,.28);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s;--ax:50%}
.tipbox.tipshow{opacity:1;transform:none}
.tipbox::after{content:'';position:absolute;left:var(--ax);margin-left:-6px;top:100%;border:6px solid transparent;border-top-color:var(--navy)}
.tipbox.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--navy)}
.tiptoggle{width:44px;min-width:44px;padding:0;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
.tiptoggle[aria-pressed="true"]{background:var(--primary-50);border-color:var(--primary);color:var(--primary-dk)}
.tiptoggle.off{color:var(--muted);text-decoration:line-through}
@media print{.tipbox,.tiptoggle{display:none!important}}
/* Tooltip: name of the page, button or field, then what it does */
.tipbox{max-width:min(260px,calc(100vw - 16px));padding:9px 12px 10px;display:flex;flex-direction:column;gap:2px}
.tipbox .tipname{font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em}
.tipbox .tiptext{font-size:12.5px;color:#C7D6F2;line-height:1.4}
.tipbox .tipname[hidden],.tipbox .tiptext[hidden]{display:none}
.tipbox.side::after{left:auto;right:100%;top:var(--ay);margin:-6px 0 0;border-color:transparent;border-right-color:var(--navy)}

/* ---------- Footer credit: GhostByte ---------- */
.ft-dev{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gb{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.gb-mark{height:22px;width:auto;display:block}
.gb-name{font-weight:700;letter-spacing:.04em}
.gb-byte{color:#0082FB}
.site-ft-admin .gb-byte,.site-ft-invoice .gb-byte{color:#006FD6}
@media print{.site-ft-public .gb-mark{content:url(../img/ghostbyte-mark-dark.png)}.site-ft-public .gb-byte{color:#006FD6}}

/* ---------- Admin menu: collapsible sidebar, phone drawer ---------- */
.adnav{display:flex;flex-direction:column;gap:2px}
.abi{flex:none;opacity:.85}
.ab.on .abi,.ab:hover .abi{opacity:1}
.abt{flex:1;min-width:0;line-height:1.25}
.ab .bg{margin-left:auto;flex:none}
.ab:focus-visible,.hbg:focus-visible,.asb-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.asb nav{flex:1 1 auto;margin-top:6px}
.asb-ft{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:14px}
.asb-ft .ab{gap:0}
.asb-x{display:none;position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;align-items:center;justify-content:center}
.asb-x:hover{background:rgba(255,255,255,.16)}
.asb-bd{display:none}
.atl{display:flex;align-items:center;gap:10px;min-width:0}
.atn{font-size:14px;color:var(--muted);min-width:0}
.hbg{position:relative;flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.hbg:hover{background:var(--primary-50);border-color:var(--primary)}
.hbg:focus-visible{outline-color:var(--primary)}

/* Desktop: the menu can be tucked away with the three-line button */
@media(min-width:901px){
  .ad{transition:grid-template-columns .22s ease}
  .ad.side-off{grid-template-columns:0 minmax(0,1fr)}
  .ad.side-off .asb{visibility:hidden;overflow:hidden;padding-left:0;padding-right:0}
}

/* Phone and small tablet: the menu becomes a slide-in drawer */
@media(max-width:900px){
  .ad{grid-template-columns:minmax(0,1fr)}
  .asb{position:fixed;top:0;left:0;bottom:0;height:100%;width:min(300px,86vw);z-index:60;padding:18px 12px calc(18px + env(safe-area-inset-bottom));
    transform:translateX(-102%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;box-shadow:none;overscroll-behavior:contain}
  .ad.nav-open .asb{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s;box-shadow:8px 0 32px rgba(0,0,0,.35)}
  .asb-x{display:inline-flex}
  .asb-bd{display:block;position:fixed;inset:0;z-index:55;background:rgba(10,19,37,.55);animation:bdin .2s ease}
  .asb-bd[hidden]{display:none}
  .ab{min-height:48px}
  body.nav-lock{overflow:hidden}
}
@keyframes bdin{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.atn{font-size:13px}.atn b{display:inline-block;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.atl{gap:8px}}
@media(prefers-reduced-motion:reduce){.asb,.ad,.asb-bd{transition:none!important;animation:none!important}}
@media print{.hbg,.asb-bd,.asb-x{display:none!important}}

/* ---------- Inactivity warning (client log-out) ---------- */
.idlebar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:95;width:min(480px,calc(100% - 32px));background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.idlebar > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;color:#DCE6F8}
.idlebar > div > b{font-size:16px;color:#fff}
.idlebar .pb{flex:none;width:auto;padding:0 16px;height:44px}
@media(max-width:480px){.idlebar{flex-direction:column;align-items:stretch}.idlebar .pb{width:100%}}
@media print{.idlebar{display:none!important}}