/* Citymall v2: compact sign-in and enhanced operations presentation. */
:root { --navy:#121924; --teal:#2dc4b5; --soft-navy:#eaf1f8; --purple:#e8ddff; }
body { background:#f2f6f8; }
#authView:not([hidden]) { height:100dvh; min-height:100dvh; overflow:hidden; padding:16px; background:radial-gradient(circle at 85% 12%,#65dfd2 0,transparent 22%),radial-gradient(circle at 15% 88%,#ffd95c 0,transparent 17%),var(--navy); }
#authView .auth-card { max-height:calc(100dvh - 32px); overflow:hidden; padding:28px 34px; border-radius:26px; }
#authView .auth-card p { margin-bottom:16px; }
#authView .full { margin-top:16px; }
.auth-links { display:flex; justify-content:space-between; gap:12px; }
.auth-links .link { font-size:12px; }
header { background:linear-gradient(100deg,#101825,#1b2a3d); }
.primary { background:linear-gradient(110deg,#ffd31a,#ffbd2e); box-shadow:0 5px 13px #d1a60035; }
.secondary { background:#e8eef2; color:#1a3345; }
.login-state { display:block; color:#9de9de; font-weight:800; margin-top:2px; }
.login-reminder { background:#ddf8f3; border:1px solid #9be3d8; border-radius:11px; color:#155b53; font-weight:700; padding:12px 14px; margin-bottom:16px; }
.dashboard-split { grid-template-columns:repeat(3,1fr); }
.panel { box-shadow:0 7px 18px #24394b0b; }
.stat-row { display:grid; grid-template-columns:72px 1fr 40px; gap:8px; align-items:center; margin:11px 0; font-size:12px; font-weight:800; }
.stat-track { background:#e9eef1; height:9px; border-radius:10px; overflow:hidden; }.stat-fill { height:100%; border-radius:10px; background:linear-gradient(90deg,#2dc4b5,#87dfcb); }
.calendar-controls,.report-controls { display:flex; align-items:end; flex-wrap:wrap; gap:10px; margin-bottom:12px; }.calendar-controls label,.report-controls label { margin:0; min-width:160px; }.calendar-controls input,.report-controls input { margin-top:6px; }
.calendar-legend { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }.legend { border-radius:20px; padding:5px 9px; font-size:11px; font-weight:800; border:1px solid transparent; }
.legend.free,.time-slot.free { background:#dcf8e5; border-color:#a4e6bd; color:#16643e; }.legend.reservation,.booking-reservation { background:#ffd9e5; border-color:#f0a1ba; color:#8a2446; }.legend.coaching,.booking-coaching { background:#fff0b6; border-color:#efd46c; color:#745300; }.legend.pencil,.booking-pencil { background:#dcedff; border-color:#a6d2f3; color:#175f90; }.legend.balance,.booking-balance { background:#ffe1ba; border-color:#f2b46d; color:#8d4d04; }.legend.completed,.booking-completed { background:#dfe3e6; border-color:#b7bec4; color:#4b5560; }.legend.openplay,.booking-openplay { background:#e9dcff; border-color:#c7a8f5; color:#653d9c; }.legend.not-applicable,.booking-not_applicable { background:#eaedef; border-color:#c8d0d4; color:#4e5a61; }.legend.other,.booking-other { background:#d9f4f1; border-color:#95d8d1; color:#126c63; }
.legend.selection { background:#dceaff; border-color:#78a8ef; color:#145ca6; }.slot-selection-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 16px; padding:12px 14px; border:1px solid #8cb7f4; border-radius:12px; background:#edf5ff; color:#164e8d; }.slot-selection-bar strong { display:block; color:#103a69; }.slot-selection-bar small { display:block; margin-top:3px; color:#426d9e; font-weight:700; }.slot-selection-actions { display:flex; gap:8px; flex-wrap:wrap; }.slot-selection-actions button { white-space:nowrap; }
.schedule-calendar { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:16px; overflow:hidden; }.schedule-scroller { overflow:auto; }.schedule-grid { display:grid; min-width:1180px; }.schedule-corner,.schedule-date,.schedule-time,.time-slot { border-right:1px solid #edf0f1; border-bottom:1px solid #edf0f1; }.schedule-corner,.schedule-date { background:#f5f8f8; font-weight:800; padding:10px; min-height:52px; }.schedule-date small { display:block; color:var(--mute); font-weight:700; margin-top:2px; }.schedule-time { background:#fbfcfc; color:var(--mute); font-size:12px; font-weight:800; padding:10px 8px; }.time-slot { min-height:57px; width:100%; padding:4px; text-align:left; background:#fff; font:inherit; cursor:pointer; }.time-slot.free:hover { background:#beeecf; }.time-slot.has-booking { cursor:pointer; }.booking-chip { display:block; border-radius:6px; padding:5px; font-size:11px; font-weight:800; line-height:1.28; margin:1px 0; }.booking-chip small { display:block; font-weight:700; opacity:.82; margin-top:2px; }
.spreadsheet-court-grid { min-width:680px; }.spreadsheet-court-grid .schedule-corner { position:sticky; left:0; top:0; z-index:5; display:flex; align-items:center; justify-content:center; min-height:72px; padding:10px; background:#ffd133; color:#132131; font-size:16px; letter-spacing:.03em; text-transform:uppercase; }.spreadsheet-court-grid .spreadsheet-column-heading { position:sticky; top:0; z-index:4; min-height:72px; padding:0; text-align:center; background:#243342; color:#fff; }.spreadsheet-column-heading b { display:block; padding:9px 7px 7px; background:#ffd133; color:#132131; font-size:14px; letter-spacing:.02em; text-transform:uppercase; }.spreadsheet-column-heading small { display:block; margin:0; padding:7px 6px 9px; color:#fff; font-size:13px; font-weight:800; white-space:nowrap; }.spreadsheet-court-grid .schedule-time { position:sticky; left:0; z-index:3; display:flex; align-items:center; min-height:57px; padding:8px 12px; background:#fff9e7; color:#172437; font-size:13px; font-weight:900; white-space:nowrap; }.spreadsheet-court-grid .time-slot { min-height:57px; padding:5px; text-align:left; border:1px solid #dbe4e8; background:#fff; }.spreadsheet-court-grid .time-slot.free { background:#dff5e5; color:#17623f; }.spreadsheet-court-grid .time-slot.free:hover,.spreadsheet-court-grid .time-slot.free:focus-visible { background:#c6ebd2; outline:2px solid #2a9f67; outline-offset:-2px; }.spreadsheet-court-grid .time-slot.has-booking { background:#fff; }.spreadsheet-court-grid .booking-chip { min-height:42px; margin:0; padding:7px; border-radius:5px; font-size:12px; }.spreadsheet-court-grid .booking-chip small { margin-top:3px; font-size:10px; }
.spreadsheet-court-grid .time-slot.is-selected { background:#dceaff; border-color:#478cef; color:#0e4d96; box-shadow:inset 0 0 0 2px #478cef; }.spreadsheet-court-grid .time-slot.is-selected:hover,.spreadsheet-court-grid .time-slot.is-selected:focus-visible { background:#cbe0ff; outline:2px solid #1b6fd1; outline-offset:-2px; }
.report-periods { display:flex; gap:7px; }.report-period.active,.production-period.active { background:linear-gradient(110deg,#ffd31a,#ffbd2e); }.report-range { color:var(--mute); font-weight:700; margin:0 0 13px; }
.profile-grid,.production-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }.profile-grid { max-width:900px; }.production-split .panel { min-width:0; }.production-split h3 { margin:0 0 12px; }.title-actions { display:flex; gap:9px; flex-wrap:wrap; }.muted { color:var(--mute); font-size:13px; }.form-hint { padding:11px; border-radius:8px; background:#eff7f6; color:#155b53; font-weight:700; margin:10px 0; }.item-lines { margin:7px 0; }.item-line { display:grid; grid-template-columns:1fr 72px 75px 28px; gap:7px; margin:7px 0; align-items:center; }.item-line span { font-size:12px; font-weight:800; color:#1e5269; }.item-line button { border:0; color:#a52f3f; background:transparent; font-size:19px; }.price-breakdown { background:#f6faf9; border:1px solid #d9ece8; border-radius:9px; padding:10px; margin-top:8px; color:#175b53; font-weight:700; font-size:13px; }.today-action { border:0; border-radius:7px; padding:5px 8px; background:#e7f5f1; color:#146254; font-size:11px; font-weight:800; }
dialog textarea { min-height:80px; } #rescheduleFields { margin-top:10px; padding:10px; background:#f5f8f8; border-radius:9px; }
.court-form { display:grid; grid-template-columns:1fr 150px; gap:11px; align-items:end; margin:12px 0 18px; }.court-form label { margin:0; }.court-active { display:flex; align-items:center; gap:8px; font-weight:700; }.court-active input { width:auto; margin:0; }.court-form .dialog-actions { grid-column:1/-1; margin:0; }.court-form + .panel { box-shadow:none; border:1px solid var(--line); }
.court-day-summary { margin:0 0 16px; }.court-board { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }.court-board .schedule-calendar { margin:0; }.mini-calendar-panel { padding:16px; }.mini-calendar-heading { display:flex; align-items:start; justify-content:space-between; gap:9px; margin-bottom:12px; }.mini-calendar-heading h3,.mini-day-heading h3 { margin:0; font-size:16px; }.mini-calendar-heading p,.mini-day-heading small { color:var(--mute); font-size:12px; margin:4px 0 0; }.mini-nav { min-width:34px; padding:7px 9px; }.mini-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }.mini-weekday { color:var(--mute); font-size:10px; font-weight:800; text-align:center; padding:2px 0; }.mini-date { position:relative; min-height:43px; padding:5px 3px; border:1px solid #e7ecee; border-radius:8px; background:#fff; color:#294254; text-align:left; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }.mini-date:hover,.mini-date.selected { border-color:#e0ae00; background:#fff9dd; }.mini-date.empty { border:0; background:transparent; cursor:default; }.mini-date .mini-count { display:block; margin-top:3px; color:#61707a; font-size:9px; line-height:1.1; font-weight:700; }.mini-date.has-bookings { box-shadow:inset 3px 0 #ef8eaa; }.mini-date.has-open-play { box-shadow:inset 3px 0 #9d7ee7; }.mini-date.has-bookings.has-open-play { background:linear-gradient(135deg,#fff4f7 0 50%,#f5efff 50%); }.mini-day-heading { margin:17px 0 8px; padding-top:13px; border-top:1px solid var(--line); }.mini-day-schedule { max-height:295px; overflow:auto; }.mini-schedule-item { padding:10px 0; border-bottom:1px solid #edf0f1; }.mini-schedule-item:last-child { border-bottom:0; }.mini-schedule-item b { display:block; font-size:12px; }.mini-schedule-item small { color:var(--mute); display:block; margin-top:3px; }.mini-schedule-item .row-actions { margin-top:7px; }
@media(max-width:980px) { .dashboard-split,.production-split { grid-template-columns:1fr 1fr; }.court-board { grid-template-columns:1fr; }.mini-day-schedule { max-height:none; } }
@media(max-width:560px) { #authView:not([hidden]) { padding:12px; } #authView .auth-card { padding:24px; } #authView .auth-card h1 { font-size:27px; }.login-state { display:none; }.calendar-controls,.report-controls { align-items:stretch; }.calendar-controls label,.report-controls label,.calendar-controls button,.report-controls button { width:100%; }.report-periods { width:100%; }.report-period,.production-period { flex:1; }.dashboard-split,.profile-grid,.production-split,.court-form { grid-template-columns:1fr; }.title-actions { width:100%; }.title-actions button { flex:1; }.auth-links { display:block; }.auth-links .link { display:block; width:100%; text-align:left; }.item-line { grid-template-columns:1fr 63px 65px 24px; } }