.court-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 260px),1fr)); gap:1rem; align-items:start; }
.court-card { background:var(--surface,#fff); border:1px solid var(--line,#dbe4eb); border-radius:14px; padding:1rem; min-width:0; }
.court-card h2 { font-size:1.1rem; margin:0 0 .75rem; overflow-wrap:anywhere; }
.court-toolbar,.court-tabs { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; margin-bottom:1rem; }
.court-tabs [aria-pressed="true"] { background:#173b53; color:#fff; }
.court-slot { display:flex; gap:.5rem; justify-content:space-between; align-items:center; padding:.5rem 0; border-top:1px solid var(--line,#dbe4eb); }
.court-slot > span { display:grid; gap:.15rem; overflow-wrap:anywhere; min-width:0; }
.court-slot.occupied { color:var(--muted,#40596a); }
.court-card > .btn { margin-top:.75rem; }
label.court-checkbox { display:flex; gap:.55rem; align-items:center; }
.court-checkbox input { width:auto; min-width:1rem; }
.court-checkbox[hidden] { display:none; }
.court-members { max-height:45vh; overflow:auto; }

.court-date-bar { align-items:center; padding:.65rem; background:var(--surface-soft); border-radius:12px; }
.court-date-bar label { display:flex; align-items:center; gap:.5rem; }
.court-date-bar input[type="date"] { width:auto; }
.court-key { display:flex; flex-wrap:wrap; gap:.45rem 1rem; margin:.2rem 0 .65rem; color:var(--muted); font-size:.8rem; }
.court-key span { display:inline-flex; align-items:center; gap:.35rem; }
.court-key span::before { content:""; width:.75rem; height:.75rem; border-radius:3px; border:1px solid var(--line); background:var(--court-state); }
.court-key-free,.court-cell.free { --court-state:#edf7f1; color:#24583e; }
.court-key-booked,.court-cell.booked { --court-state:#e2eef8; color:#244e70; }
.court-key-blocked,.court-cell.blocked { --court-state:#f5e9d8; color:#68491f; }
.court-key-closed,.court-cell.closed,.court-cell.past { --court-state:#eff1f3; color:#526575; }
.court-cell.personal { --court-state:#d9ebf7; color:#173b53; }
.court-timeline {
 --court-hour:84px;
 display:flex; overflow:auto; isolation:isolate; background:#fff;
 border:1px solid var(--line); border-radius:12px;
}
.court-ruler { flex:0 0 3.55rem; position:sticky; left:0; z-index:2; background:#f7fafc; border-right:1px solid var(--line); }
.court-ruler-head,.court-column-head { height:5.25rem; border-bottom:1px solid var(--line); }
.court-ruler-head,.court-hour { padding:.55rem .4rem; text-align:center; color:var(--muted); font-size:.78rem; font-weight:650; }
.court-ruler-head { display:grid; place-items:end center; }
.court-hour { height:var(--court-hour); border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.court-column { flex:1 0 10rem; min-width:0; border-right:1px solid var(--line); }
.court-column:last-child { border-right:0; }
.court-column-head {
 display:flex; flex-direction:column; justify-content:center; gap:.35rem; padding:.6rem .75rem  .6rem 1rem;
 background:#f4f8fb url('/static/court.svg') no-repeat right -1.1rem center / 5.5rem auto;
 box-shadow:inset 4px 0 var(--court-inside); padding-right:3.8rem;
}
.court-column:nth-child(odd) .court-column-head { box-shadow:inset 4px 0 var(--court-outside); }
.court-column-head h2 { font-size:.95rem; line-height:1.12; overflow-wrap:anywhere; }
.court-column-head > span { font-size:.74rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.court-column-body {
 position:relative; isolation:isolate;
 height:calc(var(--court-span) * var(--court-hour) / 60);
 background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--court-hour) - 1px), var(--line) calc(var(--court-hour) - 1px) var(--court-hour));
}
.court-segment {
 position:absolute; inset-inline:0;
 top:calc(var(--court-offset) * var(--court-hour) / 60);
 height:calc(var(--court-duration) * var(--court-hour) / 60);
}
.court-segment:has(.booked,.blocked,.personal) { z-index:1; }
.court-cell {
 display:flex; align-items:center; gap:.4rem; width:100%; height:100%; overflow:hidden;
 text-align:left; white-space:nowrap; border:0; border-bottom:1px solid var(--line);
 padding:0 .55rem; background:color-mix(in srgb, var(--court-state) 88%, transparent);
 font-size:.78rem; line-height:1.2;
}
.court-cell > span { flex-shrink:0; font-variant-numeric:tabular-nums; }
.court-cell strong { overflow:hidden; text-overflow:ellipsis; }
.court-cell.closed { align-items:flex-start; padding-top:.25rem; background:repeating-linear-gradient(135deg,transparent 0 6px,#e5e9ed99 6px 7px),#eff1f388; }
button.court-cell:hover { background:var(--court-state); box-shadow:inset 0 0 0 2px currentColor; }
button.court-cell:focus-visible { outline-offset:-3px; }
.court-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:760px) {
 .court-column { flex-basis:9.5rem; }
 .court-date-bar { gap:.35rem; }
 .court-date-bar .btn { padding-inline:.6rem; }
}
.court-column-head h2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }