/* Stop-gap for utilities used in index.php but missing from the compiled tailwind.css.
   Loaded AFTER tailwind.css. Values are Tailwind v3 default-palette values. Delete this file once
   tailwind.css is rebuilt from index.php (see the rebuild checklist). */
.-mt-2{margin-top:-.5rem}
.basis-full{flex-basis:100%}
.bg-amber-950\/40{background-color:rgb(69 26 3 / .4)}
.bg-purple-950{background-color:rgb(59 7 100)}
.bg-rose-950\/40{background-color:rgb(76 5 25 / .4)}
.bg-teal-950{background-color:rgb(4 47 46)}
.bg-slate-950\/10{background-color:rgb(2 6 23 / .1)}
.bg-slate-950\/30{background-color:rgb(2 6 23 / .3)}
.border-\[\#ccff00\]\/50{border-color:rgb(204 255 0 / .5)}
.border-amber-700{border-color:rgb(180 83 9)}
.border-dashed{border-style:dashed}
.border-none{border-style:none}
.border-emerald-800\/50{border-color:rgb(6 95 70 / .5)}
.border-purple-800{border-color:rgb(107 33 168)}
.border-rose-400{border-color:rgb(251 113 133)}
.border-rose-800\/70{border-color:rgb(159 18 57 / .7)}
.border-separate{border-collapse:separate}
.border-teal-800{border-color:rgb(17 94 89)}
.h-3\.5{height:.875rem}
.h-56{height:14rem}
.h-9{height:2.25rem}
.inline-flex{display:inline-flex}
.list-decimal{list-style-type:decimal}
.list-inside{list-style-position:inside}
.max-h-48{max-height:12rem}
.max-h-\[65vh\]{max-height:65vh}
.min-w-0{min-width:0}
.min-w-\[220px\]{min-width:220px}
.ml-1{margin-left:.25rem}
.mt-3{margin-top:.75rem}
.pt-3{padding-top:.75rem}
.rotate-180{transform:rotate(180deg)}
.text-purple-300{color:rgb(216 180 254)}
.text-slate-200{color:rgb(226 232 240)}
.text-teal-300{color:rgb(94 234 212)}
.w-3\.5{width:.875rem}
.w-32{width:8rem}
.w-9{width:2.25rem}
.space-y-1\.5>:not([hidden])~:not([hidden]){margin-top:.375rem}
.hover\:border-emerald-400:hover{border-color:rgb(52 211 153)}
.hover\:border-purple-400:hover{border-color:rgb(192 132 252)}
.hover\:border-rose-500\/60:hover{border-color:rgb(244 63 94 / .6)}
.hover\:brightness-125:hover{filter:brightness(1.25)}
.hover\:text-rose-400:hover{color:rgb(251 113 133)}
.focus\:border-rose-400:focus{border-color:rgb(251 113 133)}
@media (min-width:640px){
.sm\:h-64{height:16rem}
.sm\:p-4{padding:1rem}
.sm\:p-5{padding:1.25rem}
.sm\:text-\[13px\]{font-size:13px}
.sm\:text-base{font-size:1rem;line-height:1.5rem}
}
@media (min-width:1024px){
.lg\:flex-row{flex-direction:row}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Red asterisk shown inside the <label> of every required form field. */
.req-star{color:#ef4444;font-weight:700;margin-left:.25rem}

/* Backgrounds for the Paid / Mark Unpaid action buttons (these classes were missing from the compiled
   tailwind.css, so the buttons rendered with no background). */
.bg-lime-900\/80{background-color:rgb(54 83 20 / .8)}
.hover\:bg-lime-800:hover{background-color:rgb(63 98 18)}
.border-lime-700\/60{border-color:rgb(77 124 15 / .6)}
.text-lime-200{color:rgb(217 249 157)}
.bg-slate-800\/80{background-color:rgb(30 41 59 / .8)}
.hover\:bg-slate-700:hover{background-color:rgb(51 65 85)}
.border-slate-600{border-color:rgb(71 85 105)}

/* Edit / Reschedule modal: balance-due box border (same amber the ticket's Balance Due box uses). */
.border-amber-700\/70{border-color:rgb(180 83 9 / .7)}
/* ===== Reservations report summary =====
   Panel under the export buttons in "Reservations Approval & List" (also printed with Print / PDF).
   Plain CSS on purpose (not Tailwind utilities), so it renders without rebuilding tailwind.css.
   Neutral translucent greys + inherited text colour keep it readable in both dark and light theme. */
.rsum{border:1px solid rgba(128,128,128,.35);border-radius:.75rem;padding:.75rem;background:rgba(128,128,128,.07)}
.rsum-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;flex-wrap:wrap}
.rsum-title{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.rsum-scope{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-top:.25rem;font-size:11px;opacity:.9}
.rsum-toggle{padding:.35rem .7rem;border:1px solid rgba(128,128,128,.45);border-radius:.6rem;font-size:10px;font-weight:700;background:transparent;color:inherit;cursor:pointer}
.rsum-toggle:hover{border-color:#ccff00}
.rsum-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-top:.75rem}
.rsum-kpi{border:1px solid rgba(128,128,128,.3);border-radius:.6rem;padding:.55rem .7rem;background:rgba(128,128,128,.08);min-width:0}
.rsum-kpi-label{font-size:10px;font-weight:800;text-transform:uppercase;opacity:.75}
.rsum-kpi-value{font-size:1.15rem;font-weight:900;line-height:1.35;overflow-wrap:anywhere}
.rsum-kpi-sub{font-size:10px;opacity:.7}
.rsum-kpi.money .rsum-kpi-value{color:#6b8a00}
.dark .rsum-kpi.money .rsum-kpi-value{color:#ccff00}
.rsum-kpi.good .rsum-kpi-value{color:#059669}
.dark .rsum-kpi.good .rsum-kpi-value{color:#34d399}
.rsum-kpi.bad .rsum-kpi-value{color:#e11d48}
.dark .rsum-kpi.bad .rsum-kpi-value{color:#fb7185}
.rsum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:.75rem;margin-top:.75rem}
.rsum-box{border:1px solid rgba(128,128,128,.3);border-radius:.6rem;padding:.55rem;min-width:0}
.rsum-wide{grid-column:1/-1}
.rsum-box-title{margin-bottom:.35rem;font-size:11px;font-weight:800;text-transform:uppercase}
.rsum-scroll{overflow-x:auto}
.rsum-table{width:100%;border-collapse:collapse;font-size:11px}
.rsum-table th{padding:.35rem .5rem;border-bottom:1px solid rgba(128,128,128,.45);font-size:10px;text-align:left;text-transform:uppercase;white-space:nowrap}
.rsum-table td{padding:.3rem .5rem;border-bottom:1px solid rgba(128,128,128,.2)}
.rsum-table .rsum-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rsum-table tr.rsum-strong td{font-weight:800;border-top:1px solid rgba(128,128,128,.5)}
.rsum-note{margin-top:.3rem;font-size:10px;opacity:.7}
@media print{
.rsum{background:transparent !important;border:1px solid #999 !important}
.rsum-kpis{grid-template-columns:repeat(5,1fr)}
.rsum-grid{grid-template-columns:repeat(2,1fr)}
.rsum-box,.rsum-kpi{background:transparent !important;border:1px solid #999 !important;break-inside:avoid}
.rsum-kpi .rsum-kpi-value,.rsum-kpi .rsum-kpi-label,.rsum-kpi .rsum-kpi-sub{color:#000 !important}
.rsum-table th,.rsum-table td{font-size:9px !important}
.rsum-table .rsum-num{text-align:right !important}
}

/* "Include booking list" checkbox next to the export buttons; hides the table in a summary-only printout. */
.rsum-opt{display:inline-flex;align-items:center;gap:.4rem;padding:0 .25rem;font-size:11px;font-weight:700;cursor:pointer;user-select:none}
.rsum-opt input{width:1rem;height:1rem;cursor:pointer;accent-color:#88aa00}
@media print{.rsum-hide-print{display:none !important}}

.rsum-foot{display:flex;justify-content:flex-end;margin-top:.75rem}

/* ===== Performance Analytics: Peak Hours panel =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css.
   Same dark surface as the neighbouring analytics chart cards, with explicit light text so it
   reads the same in dark and light theme. */
.pk-panel{background:rgba(15,23,42,.6);border:1px solid rgba(55,65,81,.6);border-radius:.75rem;padding:1rem;color:#e2e8f0}
.pk-panel>*+*{margin-top:.75rem}
.pk-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .75rem}
.pk-title{font-size:.75rem;font-weight:800;text-transform:uppercase;color:#ff8c00}
.pk-sub{font-size:10px;color:#94a3b8}
.pk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.pk-card{border:1px solid rgba(148,163,184,.25);border-radius:.6rem;padding:.55rem .7rem;background:rgba(2,6,23,.35);min-width:0}
.pk-card-label{font-size:10px;font-weight:800;text-transform:uppercase;color:#94a3b8}
.pk-card-value{font-size:1.05rem;font-weight:900;line-height:1.35;color:#00e5ff;overflow-wrap:anywhere}
.pk-card-value.pk-money{color:#ccff00}
.pk-card-value.pk-warn{color:#fbbf24}
.pk-card-sub{font-size:10px;color:#94a3b8;overflow-wrap:anywhere}
.pk-note{font-size:10px;color:#94a3b8}
@media print{.pk-panel{display:none !important}}

/* ===== Recurring (weekly) bookings modal (🔁 Recurring on the dashboard) =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css.
   Neutral translucent greys + inherited text colour keep it readable in dark and light theme. */
.rec-card{border:1px solid rgba(128,128,128,.35);border-radius:.75rem;padding:.75rem;background:rgba(128,128,128,.07)}
.rec-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;flex-wrap:wrap}
.rec-card-main{min-width:0;flex:1 1 220px}
.rec-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.rec-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.rec-chip{display:inline-block;padding:.1rem .5rem;border:1px solid rgba(128,128,128,.4);border-radius:999px;font-size:10px;font-weight:700}
.rec-chip-on{border-color:#88aa00;color:#6b8a00}
.dark .rec-chip-on{border-color:#ccff00;color:#ccff00}
.rec-sessions{margin-top:.75rem;border-top:1px solid rgba(128,128,128,.3);padding-top:.5rem;max-height:18rem;overflow-y:auto}
.rec-session{display:grid;grid-template-columns:minmax(7.5rem,1fr) auto auto;gap:.25rem .75rem;align-items:center;padding:.35rem 0;border-bottom:1px solid rgba(128,128,128,.18);font-size:11px}
.rec-s-date{font-weight:700}
.rec-s-status{font-size:10px;opacity:.8;text-transform:uppercase}
.rec-s-amt{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.rec-s-btns{grid-column:1/-1;display:flex;gap:.35rem;flex-wrap:wrap}
.rec-s-btns:empty{display:none}
.rec-dim{opacity:.55}
.rec-table{border:1px solid rgba(128,128,128,.3);border-radius:.6rem;max-height:50vh;overflow-y:auto}
.rec-row{display:grid;grid-template-columns:auto minmax(7rem,1fr) minmax(0,1.4fr) auto;gap:.6rem;align-items:center;padding:.45rem .65rem;border-bottom:1px solid rgba(128,128,128,.18);font-size:11px;cursor:pointer}
.rec-row:last-child{border-bottom:none}
.rec-row input{width:1rem;height:1rem;accent-color:#88aa00;cursor:pointer}
.rec-row-bad{cursor:default;background:rgba(225,29,72,.08)}
.rec-row-bad input{cursor:not-allowed}
.rec-row-bad .rec-r-note{color:#e11d48}
.dark .rec-row-bad .rec-r-note{color:#fb7185}
.rec-r-date{font-weight:700}
.rec-r-note{font-size:10px;opacity:.85;overflow-wrap:anywhere}
.rec-r-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
@media (max-width:520px){.rec-row{grid-template-columns:auto 1fr auto}.rec-r-note{grid-column:2/-1;order:4}}

/* ===== Recurring bookings preview: price-per-session highlight + "pay at the counter" note =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css. */
.rec-price-banner{text-align:center;padding:.7rem .75rem;border:2px solid #88aa00;border-radius:.75rem;background:rgba(136,170,0,.12)}
.dark .rec-price-banner{border-color:#ccff00;background:rgba(204,255,0,.10)}
.rec-price-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.rec-price-value{font-size:1.75rem;font-weight:900;line-height:1.2;color:#6b8a00;overflow-wrap:anywhere}
.dark .rec-price-value{color:#ccff00}
.rec-price-sub{font-size:10px;opacity:.7}
.rec-paynote{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem .8rem;border:1px solid #f59e0b;border-left-width:5px;border-radius:.6rem;background:rgba(245,158,11,.13);font-size:12px;line-height:1.4}
.dark .rec-paynote{border-color:#fbbf24;background:rgba(251,191,36,.12)}
.rec-paynote strong{font-weight:900;color:#b45309}
.dark .rec-paynote strong{color:#fbbf24}
.rec-paynote-icon{font-size:1.25rem;line-height:1.2}
.rec-r-amt{font-size:13px;font-weight:900;color:#6b8a00}
.dark .rec-r-amt{color:#ccff00}
.rec-row-bad .rec-r-amt{color:inherit;font-weight:700;opacity:.6}
@media print{.rec-price-banner,.rec-paynote{display:none !important}}
/* ===== Dashboard collapsible sections (Tools / Summary / Equipment / Analytics / Court Schedule / Reservations) =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css.
   .sec-head = clickable header row, .sec-chev = the chevron box, .sec-body = the part that folds away,
   .sec-contents = wrapper that does not affect the flex layout of the buttons inside it. */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;min-height:2.75rem;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sec-bar{min-height:2.25rem}
.sec-chev{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;height:2.5rem;border:2px solid #88aa00;border-radius:.65rem;background:rgba(136,170,0,.14);color:#4d6600;font-size:20px;font-weight:900;line-height:1;cursor:pointer;transition:transform .15s,background .15s}
.dark .sec-chev{border-color:#ccff00;background:rgba(204,255,0,.14);color:#ccff00}
.sec-head:hover .sec-chev,.sec-chev:hover{background:rgba(136,170,0,.3)}
.dark .sec-head:hover .sec-chev,.dark .sec-chev:hover{background:rgba(204,255,0,.28)}
.sec-head[aria-expanded="false"] .sec-chev,.sec-chev[aria-expanded="false"]{transform:rotate(-90deg)}
.sec-sum{font-size:11px;opacity:.75;overflow-wrap:anywhere}
.sec-contents{display:contents}
/* Printing always shows the full content, whatever is folded on screen. */
@media print{.sec-body{display:block !important}.sec-chev{display:none !important}}
/* ===== Open Play (public cards + Join window + dashboard Open Play window) =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css.
   Neutral translucent greys + inherited text colour keep it readable in dark and light theme;
   purple matches the Open Play colour used on the Court Availability grids. */
.op-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;flex-wrap:wrap}
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:.75rem}
.op-card{display:flex;flex-direction:column;gap:.45rem;border:1px solid rgba(128,128,128,.35);border-left:4px solid #a855f7;border-radius:.75rem;padding:.75rem;background:rgba(168,85,247,.06);min-width:0}
.op-title{font-size:.9rem;font-weight:900;line-height:1.25;overflow-wrap:anywhere}
.op-when{font-size:12px;font-weight:800;color:#7e22ce}
.dark .op-when{color:#d8b4fe}
.op-chip{display:inline-block;flex-shrink:0;padding:.1rem .5rem;border:1px solid rgba(168,85,247,.6);border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;color:#7e22ce}
.dark .op-chip{color:#d8b4fe}
.op-notes{font-size:11px;opacity:.85;white-space:pre-line;overflow-wrap:anywhere}
.op-meter{height:.45rem;border-radius:999px;background:rgba(128,128,128,.25);overflow:hidden}
.op-meter-fill{height:100%;background:linear-gradient(90deg,#a855f7,#ccff00);border-radius:999px}
.op-price{font-size:1.05rem;font-weight:900;color:#6b8a00;white-space:nowrap}
.dark .op-price{color:#ccff00}
.op-price-unit{font-size:10px;font-weight:700;opacity:.75}
.op-disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.op-lookup{display:flex;gap:.5rem;flex-wrap:wrap}
.op-lookup-result{border-left-color:#00e5ff;background:rgba(0,229,255,.06)}
.op-stepper{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.op-stepper button{width:2.25rem;height:2.25rem;border:2px solid #88aa00;border-radius:.6rem;background:rgba(136,170,0,.12);color:inherit;font-size:18px;font-weight:900;line-height:1;cursor:pointer}
.dark .op-stepper button{border-color:#ccff00}
.op-stepper button:disabled{opacity:.35;cursor:not-allowed}
.op-stepper-val{min-width:1.5rem;text-align:center;font-size:1.1rem;font-weight:900}
.op-status{display:inline-block;margin-left:.35rem;padding:.08rem .45rem;border-radius:999px;border:1px solid currentColor;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;vertical-align:middle;white-space:nowrap}
.op-st-pending{color:#b45309}.dark .op-st-pending{color:#fbbf24}
.op-st-approved{color:#059669}.dark .op-st-approved{color:#34d399}
.op-st-declined,.op-st-cancelled{color:#e11d48}.dark .op-st-declined,.dark .op-st-cancelled{color:#fb7185}
.op-st-ended{color:#64748b}.dark .op-st-ended{color:#94a3b8}
.op-badge{position:absolute;top:-.4rem;right:-.4rem;min-width:1.2rem;height:1.2rem;padding:0 .3rem;border-radius:999px;background:#f59e0b;color:#111;font-size:10px;font-weight:900;line-height:1.2rem;text-align:center}
.op-btn-violet{background:rgba(88,28,135,.85);color:#e9d5ff}
.op-btn-violet:hover{background:rgb(107,33,168)}
.op-tabs{display:inline-flex;border:1px solid rgba(128,128,128,.4);border-radius:.6rem;overflow:hidden}
.op-tabs button{padding:.4rem .8rem;font-size:11px;font-weight:800;background:transparent;color:inherit;cursor:pointer;border:0}
.op-tabs button.op-tab-on{background:rgba(168,85,247,.25);color:#7e22ce}
.dark .op-tabs button.op-tab-on{color:#e9d5ff}
.op-cancelled{opacity:.75;border-left-color:#e11d48;background:rgba(225,29,72,.05)}
.op-focus{box-shadow:0 0 0 2px #a855f7}
.op-stats{display:flex;gap:.9rem;flex-wrap:wrap}
.op-stats>div{display:flex;flex-direction:column;align-items:flex-end}
.op-stat-num{font-size:1rem;font-weight:900;font-variant-numeric:tabular-nums}
.op-stat-lbl{font-size:9px;font-weight:800;text-transform:uppercase;opacity:.7}
.op-money{color:#6b8a00}.dark .op-money{color:#ccff00}
.op-warn{color:#b45309}.dark .op-warn{color:#fbbf24}
.op-refund{padding:.45rem .6rem;border:1px solid #f59e0b;border-left-width:4px;border-radius:.5rem;background:rgba(245,158,11,.12);font-size:11px;font-weight:700}
.op-walkin{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.4rem;padding:.6rem;border:1px dashed rgba(128,128,128,.5);border-radius:.6rem}
.op-walkin-actions{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:.4rem;flex-wrap:wrap}
.op-walkin-actions span{margin-right:auto}
.op-players{border-top:1px solid rgba(128,128,128,.3);margin-top:.25rem;max-height:22rem;overflow-y:auto}
.op-player{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;align-items:center;padding:.45rem 0;border-bottom:1px solid rgba(128,128,128,.18);font-size:12px}
.op-player-right{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.op-amt{font-weight:900;font-variant-numeric:tabular-nums}
.op-player-btns{grid-column:1/-1;display:flex;gap:.35rem;flex-wrap:wrap}
.op-player-btns:empty{display:none}
@media print{#open-play-section{display:none !important}}
/* Full Open Play session card (no spots left): red edge + muted. */
.op-full{border-left-color:#e11d48;background:rgba(100,116,139,.10)}
.op-full .op-meter-fill{background:#e11d48}
/* Open Play window > players list: status labels are plain text (no pill border), so they don't look like buttons. */
.op-players .op-status{border:0;padding-left:0;padding-right:0;margin-left:0}/* Open Play classes used by index.php that had no style yet: the "🏓 Open Play · N players" tag on
   Reservations / Find Your Booking / Ticket, the Join window's equipment rows, the public card's
   "Full — Join Waitlist" button, the Waitlist heading in the dashboard window, and the Completed label. */
.op-tag{display:inline-block;margin-top:.15rem;padding:.08rem .45rem;border:1px solid rgba(168,85,247,.6);border-radius:999px;background:rgba(168,85,247,.12);color:#7e22ce;font-size:10px;font-weight:800;line-height:1.4;white-space:nowrap;vertical-align:middle;text-transform:none}
.dark .op-tag{color:#d8b4fe}
.op-rental-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .65rem;border:1px solid rgba(128,128,128,.35);border-radius:.6rem;background:rgba(128,128,128,.06)}
.op-waitlist-btn{border:2px solid #f59e0b;background:rgba(245,158,11,.14);color:#b45309;cursor:pointer}
.op-waitlist-btn:hover{background:rgba(245,158,11,.26)}
.dark .op-waitlist-btn{border-color:#fbbf24;color:#fbbf24}
.op-wl-title{margin-top:.5rem;padding-top:.4rem;border-top:1px dashed rgba(128,128,128,.4);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;opacity:.8}
.op-st-completed{color:#0891b2}.dark .op-st-completed{color:#22d3ee}
/* ===== Performance: no live background blur =====
   backdrop-filter (the "glass" blur) on 200+ cards and on every full-screen modal overlay made the
   browser re-blur the whole page behind them on every repaint - each typed character and every
   blink of the text cursor - which is a big part of why typing felt laggy, worst inside modals.
   The cards are already 85-95% opaque and the overlays 80% black, so the blur was barely visible. */
.glass-card,.backdrop-blur-sm,.backdrop-blur-md{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
/* ===== Uniform form footer: [Cancel / ← Back]  [Primary action] =====
   Used by every form and form-like modal (booking steps, Open Play join, staff/courts/sports/rental items/
   branches/payment methods/carousel/pre-launch, Block Court, Recurring, Open Play, Edit / Reschedule).
   Always: a divider line, buttons on the RIGHT, Cancel/Back first, the main action last.
   "Cancel" = leave the form without saving. "← Back" = go back one step and keep what was typed.
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css. */
.form-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:.25rem;padding-top:.75rem;border-top:1px solid rgba(128,128,128,.3)}
.form-back-btn,.form-primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:2.5rem;padding:.5rem 1.1rem;border-radius:.75rem;font-size:12px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:border-color .15s,background .15s}
.form-back-btn{border:1px solid rgba(128,128,128,.5);background:rgba(128,128,128,.08);color:inherit}
.form-back-btn:hover{border-color:#88aa00;background:rgba(136,170,0,.12)}
.dark .form-back-btn:hover{border-color:#ccff00;background:rgba(204,255,0,.10)}
.form-primary-btn{border:1px solid transparent;font-weight:900}
.form-back-btn:disabled,.form-primary-btn:disabled{opacity:.5;cursor:not-allowed}
/* Compact version for small inline rows (e.g. Open Play "Add walk-in player"). */
.form-btn-sm{min-height:2rem;padding:.35rem .8rem;font-size:10px;border-radius:.6rem}
/* Phones: both buttons share the row equally so they are easy to tap. */
@media (max-width:480px){.form-actions>.form-back-btn,.form-actions>.form-primary-btn{flex:1 1 0}}
@media print{.form-actions{display:none !important}}/* Utilities used in index.php that were missing from the compiled tailwind.css (found in the pre-launch audit). */
.align-top{vertical-align:top}
.bg-slate-950\/20{background-color:rgb(2 6 23 / .2)}
.border-slate-700\/30{border-color:rgb(51 65 85 / .3)}
.border-t-2{border-top-width:2px}
.h-16{height:4rem}
.w-16{width:4rem}
.h-32{height:8rem}
.max-h-\[70vh\]{max-height:70vh}
.mt-1\.5{margin-top:.375rem}
.normal-case{text-transform:none}
.opacity-60{opacity:.6}
.pb-1{padding-bottom:.25rem}
.pt-0{padding-top:0}
.tracking-wide{letter-spacing:.025em}
/* ===== "No QR set" placeholder =====
   Shown wherever a payment QR image would appear but none has been uploaded
   (booking checkout, Open Play join, transaction-fee payment, payment-method lists).
   Plain CSS so it renders without rebuilding tailwind.css; readable in dark and light theme. */
.qr-empty{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px dashed rgba(128,128,128,.55);border-radius:.5rem;background:rgba(128,128,128,.10);color:#64748b;font-weight:900;text-transform:uppercase;text-align:center;line-height:1.2;letter-spacing:.03em}
.dark .qr-empty{color:#94a3b8}
.qr-empty-lg{width:11rem;height:11rem;font-size:13px}
.qr-empty-md{width:10rem;height:10rem;font-size:12px}
.qr-empty-sm{width:3rem;height:3rem;padding:.15rem;font-size:8px;border-width:1px}
/* ===== Block Court / Remove Block modals: court checkbox list =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css.
   Neutral translucent greys + inherited text colour keep it readable in dark and light theme;
   orange matches the maintenance colour of the Block Court button and the court grid. */
.blk-courts-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem}
.blk-all{display:inline-flex;align-items:center;gap:.35rem;font-size:10px;font-weight:800;text-transform:uppercase;cursor:pointer;user-select:none}
.blk-all input,.blk-court input{width:1rem;height:1rem;flex-shrink:0;accent-color:#f97316;cursor:pointer}
.blk-courts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:.4rem;max-height:14rem;overflow-y:auto;padding:.1rem}
.blk-court{display:flex;align-items:center;gap:.5rem;min-width:0;padding:.5rem .6rem;border:1px solid rgba(128,128,128,.4);border-radius:.6rem;background:rgba(128,128,128,.06);font-size:12px;font-weight:700;cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.blk-court:hover{border-color:#fb923c}
.blk-court-on{border-color:#f97316;background:rgba(249,115,22,.14)}
.blk-court-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blk-courts-sum{margin-top:.35rem;font-size:10px;opacity:.75}
/* Remove Block: court name + its own date/time (shown when a court of the block was rescheduled). */
.blk-court-text{display:flex;flex-direction:column;min-width:0}
.blk-court-when{font-size:10px;font-weight:600;opacity:.75;white-space:normal;overflow-wrap:anywhere}/* ===== Developer Dashboard > Danger Zone: Reset Booking Data =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css.
   Red edge marks it as destructive; neutral greys + inherited text keep it readable in both themes. */
.rst-zone{border-color:rgba(225,29,72,.6) !important;border-left-width:4px !important}
.rst-title{color:#e11d48}
.dark .rst-title{color:#fb7185}
.rst-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.5rem;padding:.5rem 1rem;border:1px solid #be123c;border-radius:.75rem;background:#be123c;color:#fff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:background .15s}
.rst-btn:hover{background:#9f1239}
.rst-btn:disabled{opacity:.45;cursor:not-allowed}
.rst-warn{padding:.6rem .75rem;border:1px solid #f59e0b;border-left-width:4px;border-radius:.6rem;background:rgba(245,158,11,.12)}
.rst-ok{padding:.6rem .75rem;border:1px solid #10b981;border-left-width:4px;border-radius:.6rem;background:rgba(16,185,129,.12)}
.rst-table{width:100%;border-collapse:collapse;font-size:11px}
.rst-table td{padding:.3rem .5rem;border-bottom:1px solid rgba(128,128,128,.2)}
.rst-num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rst-check{display:flex;align-items:flex-start;gap:.5rem;font-size:11px;cursor:pointer;user-select:none}
.rst-check input{width:1rem;height:1rem;margin-top:.1rem;flex-shrink:0;accent-color:#e11d48;cursor:pointer}
.rst-backups{border-top:1px solid rgba(128,128,128,.3);padding-top:.6rem}
.rst-backup-row{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;padding:.3rem 0;border-bottom:1px solid rgba(128,128,128,.15);font-size:11px}
.rst-backup-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;margin-right:auto}
.rst-link{background:transparent;border:0;padding:0;color:#0891b2;font-size:11px;font-weight:800;text-decoration:underline;cursor:pointer}
.dark .rst-link{color:#22d3ee}
.rst-link-danger{color:#e11d48}
.dark .rst-link-danger{color:#fb7185}
/* Reset window: error message (e.g. wrong password), red in both themes. */
.rst-error{padding:.55rem .75rem;border:1px solid #e11d48;border-left-width:4px;border-radius:.6rem;background:rgba(225,29,72,.12);color:#be123c;font-size:12px;font-weight:800}
.dark .rst-error{color:#fb7185}/* ===== Open Play: "Show all" button + "All Open Play" window (date filter, sessions grouped by day) =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css.
   Neutral greys + inherited text colour for both themes; purple/lime match the other .op-* styles. */
.op-showall-row{display:flex;justify-content:center;padding-top:.25rem}
.op-all-box>*+*{margin-top:1rem}
.op-all-top>*+*{margin-top:.75rem}
.op-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.op-filter-chip{min-height:2.1rem;padding:.35rem .8rem;border:1px solid rgba(128,128,128,.45);border-radius:999px;background:rgba(128,128,128,.08);color:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:border-color .15s,background .15s}
.op-filter-chip:hover{border-color:#a855f7}
.op-filter-on{border-color:#a855f7 !important;background:rgba(168,85,247,.22) !important;color:#7e22ce}
.dark .op-filter-on{color:#e9d5ff}
.op-filter-date{display:inline-flex}
.op-filter-date input{min-height:2.1rem;border-radius:999px;font-weight:700}
.op-filter-clear{padding:.35rem .5rem;border:0;background:transparent;color:#e11d48;font-size:11px;font-weight:800;cursor:pointer}
.dark .op-filter-clear{color:#fb7185}
.op-day>*+*{margin-top:.5rem}
.op-day-head{display:flex;align-items:center;gap:.5rem;padding-bottom:.35rem;border-bottom:1px solid rgba(128,128,128,.3);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#7e22ce}
.dark .op-day-head{color:#d8b4fe}
.op-day-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;height:1.3rem;padding:0 .35rem;border-radius:999px;background:rgba(168,85,247,.2);font-size:10px;font-weight:900}/* ===== Developer Dashboard > Backups card + "Last backup" line =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css. Readable in both themes. */
.bk-glance{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border:1px solid currentColor;border-radius:999px;background:transparent;font-size:11px;font-weight:800;cursor:pointer;text-align:left}
.bk-status{padding:.6rem .75rem;border:1px solid currentColor;border-left-width:4px;border-radius:.6rem;font-size:12px;overflow-wrap:anywhere}
.bk-ok{color:#047857;background:rgba(16,185,129,.10)}.dark .bk-ok{color:#34d399}
.bk-warn{color:#b45309;background:rgba(245,158,11,.12)}.dark .bk-warn{color:#fbbf24}
.bk-bad{color:#be123c;background:rgba(225,29,72,.12)}.dark .bk-bad{color:#fb7185}
.bk-glance.bk-ok,.bk-glance.bk-warn,.bk-glance.bk-bad{background:transparent}
.bk-ok-text{color:#047857}.dark .bk-ok-text{color:#34d399}
.bk-unlock{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.bk-pw{width:12rem;max-width:100%}
.bk-list{border:1px solid rgba(128,128,128,.3);border-radius:.6rem;max-height:20rem;overflow-y:auto}
.bk-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:.6rem;align-items:center;padding:.45rem .65rem;border-bottom:1px solid rgba(128,128,128,.18);font-size:12px}
.bk-row:last-child{border-bottom:none}
.bk-when{font-weight:700;overflow-wrap:anywhere}
.bk-kind{padding:.05rem .45rem;border:1px solid rgba(128,128,128,.45);border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase}
.bk-kind-weekly{border-color:#0891b2;color:#0891b2}.dark .bk-kind-weekly{color:#22d3ee}
.bk-kind-monthly{border-color:#a855f7;color:#7e22ce}.dark .bk-kind-monthly{color:#d8b4fe}
.bk-kind-manual{border-color:#f59e0b;color:#b45309}.dark .bk-kind-manual{color:#fbbf24}
.bk-size{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:480px){.bk-row{grid-template-columns:minmax(0,1fr) auto}.bk-size{text-align:left}}
@media print{#backups-card,.bk-glance{display:none !important}}/* ===== Discounts (Senior Citizen / PWD / Promo...) - Discount box, Pay window, ticket lines, Discounts manager =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css.
   Neutral translucent greys + inherited text colour for both themes; amber marks a discount everywhere. */
.disc-box{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border:1px solid rgba(245,158,11,.45);border-left:4px solid #f59e0b;border-radius:.75rem;background:rgba(245,158,11,.07)}
.disc-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.disc-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#b45309}
.dark .disc-title{color:#fbbf24}
.disc-opt{font-size:10px;font-weight:600;text-transform:none;letter-spacing:0;opacity:.7}
.disc-clear{padding:0;border:0;background:transparent;color:#e11d48;font-size:10px;font-weight:800;text-decoration:underline;cursor:pointer}
.dark .disc-clear{color:#fb7185}
.disc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:.5rem}
.disc-field{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.disc-wide{grid-column:1/-1}
.disc-lbl{font-size:10px;font-weight:800;text-transform:uppercase}
.disc-fixed{min-height:2.1rem;display:flex;align-items:center;gap:.35rem;font-size:13px;font-weight:900}
.disc-seg{display:inline-flex;border:1px solid rgba(128,128,128,.45);border-radius:.5rem;overflow:hidden;align-self:flex-start}
.disc-seg button{min-height:2.1rem;padding:.3rem .8rem;border:0;background:transparent;color:inherit;font-size:11px;font-weight:800;cursor:pointer}
.disc-seg button.disc-seg-on{background:rgba(245,158,11,.25);color:#b45309}
.dark .disc-seg button.disc-seg-on{color:#fbbf24}
.disc-preview{font-size:13px;font-weight:900;color:#b45309;overflow-wrap:anywhere}
.dark .disc-preview{color:#fbbf24}
.disc-problem{padding:.4rem .6rem;border:1px solid #e11d48;border-left-width:4px;border-radius:.5rem;background:rgba(225,29,72,.10);color:#be123c;font-size:11px;font-weight:700}
.dark .disc-problem{color:#fb7185}
.disc-line-lbl{font-weight:700;color:#b45309}
.dark .disc-line-lbl{color:#fbbf24}
.disc-line-amt{font-weight:900;color:#b45309;white-space:nowrap}
.dark .disc-line-amt{color:#fbbf24}
.disc-line-sub{font-size:10px;opacity:.75;overflow-wrap:anywhere;margin-top:.1rem}
.disc-tag{display:inline-block;margin-top:.15rem;padding:.05rem .4rem;border:1px solid rgba(245,158,11,.6);border-radius:999px;background:rgba(245,158,11,.12);color:#b45309;font-size:9px;font-weight:800;line-height:1.4;text-transform:none;white-space:normal;overflow-wrap:anywhere}
.dark .disc-tag{color:#fbbf24}
.disc-tag.disc-tag-plain{background:none;border:0;border-radius:0;padding:0}
.op-walkin-disc{grid-column:1/-1}
.disc-admin-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;padding:.6rem .75rem;border:1px solid rgba(128,128,128,.35);border-radius:.6rem;background:rgba(128,128,128,.06)}
.disc-admin-card{display:flex;flex-direction:column;gap:.5rem;padding:.65rem .75rem;border:1px solid rgba(128,128,128,.35);border-left:4px solid #f59e0b;border-radius:.6rem;background:rgba(128,128,128,.05)}
.disc-admin-main{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem}
.disc-admin-btns{display:flex;gap:.3rem;flex-wrap:wrap;margin-left:auto}
.disc-admin-btns button:disabled{opacity:.35;cursor:not-allowed}
.disc-admin-flags{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:11px;font-weight:700}
.disc-admin-flags label{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;user-select:none}
.disc-admin-flags input{width:1rem;height:1rem;accent-color:#f59e0b;cursor:pointer}
.disc-admin-flags input:disabled{cursor:not-allowed;opacity:.4}
@media print{.disc-box,.disc-clear{display:none !important}.disc-tag{border-color:#999 !important;color:#000 !important;background:transparent !important}}
/* Utilities used by the Discounts screens that were missing from the compiled tailwind.css. */
.w-24{width:6rem}
.hover\:border-amber-400:hover{border-color:rgb(251 191 36)}/* ===== Payment Methods: schedule (auto switch OFF / ON) =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css. Readable in both themes. */
.pm-sched{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border:1px solid rgba(0,176,255,.4);border-left:4px solid #00b0ff;border-radius:.75rem;background:rgba(0,176,255,.06)}
.pm-sched-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#0284c7}
.dark .pm-sched-title{color:#38bdf8}
.pm-sched-opt{font-size:10px;font-weight:600;text-transform:none;letter-spacing:0;opacity:.7}
.pm-sched-help{font-size:10px;opacity:.75;line-height:1.4}
.pm-sched-row{display:flex;gap:.35rem;align-items:center}
.pm-sched-clear{flex-shrink:0;padding:0 .25rem;border:0;background:transparent;color:#e11d48;font-size:10px;font-weight:800;text-decoration:underline;cursor:pointer}
.dark .pm-sched-clear{color:#fb7185}
.pm-sched-tag{display:inline-block;margin-top:.2rem;margin-right:.25rem;padding:.05rem .45rem;border:1px solid currentColor;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}
.pm-sched-off{color:#b45309}.dark .pm-sched-off{color:#fbbf24}
.pm-sched-on{color:#047857}.dark .pm-sched-on{color:#34d399}
/* ===== Login ID hint under the Username/Email field (Manage Staff & Admin) ===== */
.login-id-hint{display:block;margin-top:.15rem;font-size:9px;opacity:.75}
/* Payment method schedule: type / repeat pickers, rule summary, recurring rule line in the list. */
.pm-seg{display:inline-flex;flex-wrap:wrap;border:1px solid rgba(128,128,128,.45);border-radius:.6rem;overflow:hidden;align-self:flex-start}
.pm-seg button{min-height:2.1rem;padding:.35rem .8rem;border:0;background:transparent;color:inherit;font-size:11px;font-weight:800;cursor:pointer}
.pm-seg button+button{border-left:1px solid rgba(128,128,128,.35)}
.pm-seg button.pm-seg-on{background:rgba(0,176,255,.22);color:#0284c7}
.dark .pm-seg button.pm-seg-on{color:#7dd3fc}
.pm-sched-summary{padding:.45rem .6rem;border:1px dashed rgba(0,176,255,.5);border-radius:.5rem;font-size:11px;font-weight:700;line-height:1.4}
.pm-sched-rule{margin-top:.2rem;font-size:10px;font-weight:700;color:#0284c7;overflow-wrap:anywhere}
.dark .pm-sched-rule{color:#7dd3fc}
/* Payment Methods modal: always-visible scrollbar (all screen sizes) so it is clear the form scrolls. */
.pm-modal-scroll{overflow-y:scroll !important;scrollbar-width:auto;scrollbar-color:#88aa00 rgba(136,170,0,.15);scrollbar-gutter:stable}
.dark .pm-modal-scroll{scrollbar-color:#ccff00 rgba(204,255,0,.15)}
.pm-modal-scroll::-webkit-scrollbar{display:block;width:10px}
.pm-modal-scroll::-webkit-scrollbar-track{background:rgba(136,170,0,.15);border-radius:999px}
.dark .pm-modal-scroll::-webkit-scrollbar-track{background:rgba(204,255,0,.15)}
.pm-modal-scroll::-webkit-scrollbar-thumb{background-color:#88aa00;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.dark .pm-modal-scroll::-webkit-scrollbar-thumb{background-color:#ccff00}
/* ===== Court Booking Form: Book Now + "← Back to Dashboard" row =====
   Phone: Book Now on top (full width), Back to Dashboard under it. sm and up: [Back] [Book Now] side by side. */
.book-actions{display:flex;flex-direction:column-reverse;align-items:stretch;gap:.5rem}
@media (min-width:640px){.book-actions{flex-direction:row;align-items:center}}
@media print{.book-actions{display:none !important}}/* ===== Open Play: player names + small circle photos (public cards, Join window, dashboard Open Play window) =====
   Plain CSS (not Tailwind utilities) so it renders without rebuilding tailwind.css. Readable in both themes.
   .op-avatar = the circle (a photo, or initials on a colour from opAvatarColor() when no photo was added). */
.op-people{display:flex;flex-wrap:wrap;gap:.3rem .35rem;align-items:center}
.op-person{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;min-width:0;padding:.12rem .5rem .12rem .12rem;border:1px solid rgba(168,85,247,.35);border-radius:999px;background:rgba(168,85,247,.08);font-size:11px;font-weight:700;line-height:1.2}
.op-person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9.5rem}
.op-person-plus{font-size:10px;font-weight:900;opacity:.7}
.op-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:999px;object-fit:cover;background:rgba(128,128,128,.25);border:1px solid rgba(128,128,128,.4)}
.op-avatar-ini{color:#fff;font-size:10px;font-weight:900;letter-spacing:.02em;user-select:none}
.op-avatar-lg{width:3rem;height:3rem;font-size:14px}
.op-people-more{padding:.2rem .55rem;border:1px dashed rgba(168,85,247,.6);border-radius:999px;background:transparent;color:#7e22ce;font-size:10px;font-weight:800;cursor:pointer}
.dark .op-people-more{color:#d8b4fe}
.op-photo-pick{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.op-player-main{display:flex;align-items:flex-start;gap:.5rem}
.op-avatar-btn{padding:0;border:0;background:transparent;cursor:zoom-in;flex-shrink:0}
.op-walkin-photo{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;cursor:pointer}
.op-walkin-photo input{flex:1 1 10rem}