:root { color-scheme: light; --ink:#14231b; --muted:#637168; --line:#dce4df; --panel:#fff; --bg:#f4f7f5; --green:#0d6b43; --red:#a72b2b; --amber:#98620b; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--bg); }
.topbar { min-height:64px; display:flex; align-items:center; gap:28px; padding:0 5vw; background:#102b20; color:#fff; flex-wrap:wrap; }
.brand { color:#fff; font-size:20px; font-weight:750; text-decoration:none; }
nav { display:flex; gap:18px; flex:1; }
nav a,.account a,.link-button { color:#dcebe3; text-decoration:none; }
.account { display:flex; align-items:center; gap:12px; font-size:13px; }
.account form { margin:0; }
.link-button { border:0; background:none; padding:0; cursor:pointer; font:inherit; }
.container { width:min(1180px,92vw); margin:32px auto 56px; }
h1 { margin:0 0 6px; font-size:30px; }
h2 { margin:0 0 16px; font-size:20px; }
.lede,.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:24px 0; }
.card,.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 3px 14px rgb(14 47 31 / 5%); }
.card { padding:18px; }
.card .label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.card .value { margin-top:5px; font-size:20px; font-weight:700; }
.panel { padding:20px; margin:20px 0; overflow:auto; }
.notice { padding:12px 14px; border-radius:8px; margin:16px 0; }
.success { background:#e2f5e9; color:#185c36; }
.warning { background:#fff0d2; color:#704600; }
.error { background:#fde5e5; color:#812020; }
.status-good { color:var(--green); }.status-bad { color:var(--red); }.status-warn { color:var(--amber); }
table { width:100%; border-collapse:collapse; min-width:720px; }
th,td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.badge { display:inline-block; border-radius:999px; padding:3px 9px; font-size:12px; font-weight:700; background:#e6eee9; }
.badge.booked { background:#ffe1df; color:#8a2520; }.badge.cancelled { background:#dff4e7; color:#17643b; }
.filters,.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; align-items:end; }
.dashboard-filters { overflow:visible; }.filter-actions { display:flex; gap:8px; align-items:end; flex-wrap:wrap; }.filter-actions .button { padding:9px 14px; }
.quick-date-selects { grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:13px; }.quick-date-selects button { padding:6px 10px; background:#52645a; font-size:13px; }
label { display:block; font-weight:650; margin-bottom:4px; }
input,select { width:100%; border:1px solid #b8c5bd; border-radius:7px; padding:9px 10px; background:#fff; font:inherit; }
button,.button { border:0; border-radius:7px; background:var(--green); color:#fff; padding:9px 14px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary,.button.secondary { background:#52645a; }
button.danger { background:var(--red); }
.validation-summary-errors,.field-validation-error { color:var(--red); }
.pagination { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions form { display:flex; gap:6px; align-items:center; margin:0; }
.actions select,.actions input { width:auto; max-width:180px; }
.access-editor { display:grid; grid-template-columns:minmax(180px,1fr) 1fr 2fr auto; gap:18px; align-items:start; padding:18px 0; border-bottom:1px solid var(--line); }
.access-editor:last-child { border-bottom:0; }.access-editor fieldset { border:0; padding:0; margin:0; }.access-editor legend { font-weight:700; margin-bottom:6px; }.checkbox { display:flex; align-items:center; gap:7px; font-weight:400; margin:5px 0; }.checkbox input { width:auto; }
.auth-panel { width:min(440px,100%); margin:8vh auto; }
.availability-board { margin:28px 0; padding:24px; background:#edf1ef; border-radius:14px; }
.availability-board-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.availability-board-heading h2 { margin-bottom:3px; }
.availability-board-heading p { margin:0; }
.availability-legend { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.availability-legend span { display:flex; align-items:center; gap:5px; }
.legend-swatch { width:14px; height:14px; border:1px solid #cad4ce; display:inline-block; }
.legend-swatch.available { background:#fff; }.legend-swatch.unavailable { background:#a5abb1; border-color:#a5abb1; }.legend-swatch.past { background:repeating-linear-gradient(45deg,#a5abb1 0,#a5abb1 5px,#fff 5px,#fff 10px); }
.legend-swatch.booked { background:#a72b2b; border-color:#a72b2b; }.legend-swatch.cancelled { background:repeating-linear-gradient(45deg,#4c9c6d 0,#4c9c6d 5px,#e5f5ea 5px,#e5f5ea 10px); border-color:#4c9c6d; }.legend-swatch.no-record { background:#fff; }
.availability-chart-card { margin:20px 0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 5px 14px rgb(14 47 31 / 10%); }.availability-chart-card:last-child { margin-bottom:0; }
.availability-chart-card header { padding:17px 20px 12px; }.availability-chart-card h3 { margin:0; font-size:18px; }.availability-chart-card header p { margin:3px 0 0; color:var(--muted); }
.availability-chart-scroll { overflow-x:auto; }.availability-chart { min-width:1040px; width:100%; border-collapse:collapse; table-layout:fixed; }
.availability-chart th,.availability-chart td { padding:0; border:0; }.availability-chart .court-heading,.availability-chart .court-name { width:190px; text-align:left; padding:0 18px; background:#fff; white-space:nowrap; }
.availability-chart .court-heading { height:42px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid #ccd3d0; }.availability-chart .court-name { height:54px; font-size:14px; font-weight:700; border-top:1px solid #d7dfda; }
.availability-chart .hour-heading { height:42px; color:#52645a; font-size:12px; font-weight:700; border-left:1px solid #ccd3d0; border-bottom:1px solid #ccd3d0; }.availability-chart .slot { height:54px; border-left:1px solid #d7dfda; border-top:1px solid #d7dfda; background:#fff; }
.availability-chart .slot.available { background:#fff; }.availability-chart .slot.unavailable { background:#a5abb1; }.availability-chart .slot.past { background:repeating-linear-gradient(45deg,#a5abb1 0,#a5abb1 12px,#fff 12px,#fff 24px); }
.history-chart .slot.booked { background:#a72b2b; }.history-chart .slot.cancelled { background:repeating-linear-gradient(45deg,#4c9c6d 0,#4c9c6d 12px,#e5f5ea 12px,#e5f5ea 24px); }.history-chart .slot.no-record { background:#fff; }
.dashboard-detail-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:20px; align-items:start; }.dashboard-detail-grid .panel { margin:0; }.availability-times-heading { margin-bottom:14px; }.availability-times-heading h2 { margin-bottom:3px; }.availability-times-heading p { margin:0; }.availability-times-grid { display:grid; gap:16px; }.availability-times-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:0 3px 14px rgb(14 47 31 / 5%); }.availability-times-card header { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }.availability-times-card h3,.availability-times-card h4 { margin:0; }.availability-times-card header p { margin:3px 0 0; color:var(--muted); font-size:13px; }.copy-times { background:#52645a; padding:6px 10px; font-size:13px; }.court-times { padding-top:14px; }.court-times h4 { font-size:15px; margin-bottom:4px; }.court-times p { margin:0; }.time-range { font-variant-numeric:tabular-nums; }
footer { color:var(--muted); text-align:center; padding:20px; font-size:12px; }
@media (max-width:900px) { .dashboard-detail-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .topbar { padding:14px 4vw; gap:12px; } nav { order:3; width:100%; overflow:auto; } .account span { display:none; } .availability-board { padding:16px; margin-left:-2px; margin-right:-2px; } .availability-board-heading { align-items:start; flex-direction:column; } }
@media (max-width:760px) { .access-editor { grid-template-columns:1fr; } }