* { box-sizing: border-box; }
:root {
  color-scheme: light;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: #172b4d;
  background: #f2f5f9;
}
body { min-width: 320px; margin: 0; background: #f2f5f9; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(98vw, 1900px); margin: 0 auto; padding: 22px 0 28px; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark {
  display:grid; width:54px; height:54px; place-items:center; border-radius:50%;
  background:linear-gradient(145deg,#00c9a7,#1769aa); color:#fff; font-size:17px;
  font-weight:900; letter-spacing:-1px;
}
.eyebrow { margin:0 0 2px; color:#728198; font-size:10px; font-weight:800; letter-spacing:.13em; }
h1 { margin:0; color:#102a43; font-size:clamp(21px,3vw,29px); line-height:1.25; }
.page-subtitle { margin:3px 0 0; color:#718096; font-size:14px; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.connection-status { max-width:260px; color:#5c7188; font-size:12px; overflow-wrap:anywhere; }
.connection-status--error { color:#b42318; }
.primary-button,.secondary-button,.danger-button,.today-button {
  min-height:40px; padding:0 14px; border:1px solid transparent; border-radius:8px;
  font-size:13px; font-weight:750; white-space:nowrap;
}
.primary-button { background:#102a43; color:#fff; box-shadow:0 3px 8px #102a4324; }
.primary-button:hover:not(:disabled) { background:#1c4263; }
.secondary-button,.today-button { border-color:#d6dee8; background:#fff; color:#42556b; }
.secondary-button:hover:not(:disabled),.today-button:hover { background:#eef3f8; }
.danger-button { border-color:#f2c2c0; background:#fff5f4; color:#b42318; }
.danger-button:hover:not(:disabled) { background:#fee4e2; }
button:disabled { cursor:wait; opacity:.55; }

.control-panel {
  display:flex; min-height:72px; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:12px; padding:12px 16px; border:1px solid #e0e6ed; border-radius:12px;
  background:#fff; box-shadow:0 2px 7px #19324b0b;
}
.date-controls { display:flex; align-items:center; gap:9px; }
.date-label { color:#44566c; font-size:13px; font-weight:700; white-space:nowrap; }
#date-select { min-width:175px; min-height:40px; padding:0 10px; border:1px solid #d6dee8; border-radius:8px; background:#f8fafc; color:#102a43; font-weight:700; }
.icon-button {
  display:inline-grid; width:38px; height:38px; flex:0 0 auto; place-items:center;
  border:1px solid #d6dee8; border-radius:8px; background:#fff; color:#42556b;
  font-size:25px; line-height:1;
}
.icon-button:hover { background:#eef3f8; }
.legend { display:flex; flex-wrap:wrap; align-items:center; gap:14px; color:#53657a; font-size:12px; }
.legend-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.legend-swatch { width:12px; height:12px; border:1px solid transparent; border-radius:4px; }
.legend-swatch--course { border-color:#8cb7e2; background:#e8f2fc; }
.legend-swatch--coach { border-color:#c8b4ea; background:#f1ebfa; }
.legend-swatch--public { border-color:#8bd0b1; background:#e6f6ee; }
.legend-swatch--pickleball { border-color:#f0b47c; background:#fff0e2; }

.schedule-panel { min-height:310px; overflow:hidden; border:1px solid #e0e6ed; border-radius:12px; background:#fff; box-shadow:0 3px 12px #19324b0d; }
.schedule-viewport { max-height:75vh; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.schedule-table { width:100%; min-width:1780px; table-layout:fixed; border-collapse:separate; border-spacing:0; color:#20364e; font-size:12px; }
.schedule-table th,.schedule-table td { width:132px; min-width:132px; max-width:132px; padding:5px; border-right:1px solid #e1e6ed; border-bottom:1px solid #e1e6ed; }
.schedule-table .time-heading,.schedule-table .time-cell { width:60px; min-width:60px; max-width:60px; text-align:center; }
.schedule-table thead th { position:sticky; top:0; z-index:4; height:48px; padding:8px 6px; color:#fff; font-size:12px; font-weight:750; text-align:center; }
.schedule-table thead .time-heading { left:0; z-index:6; background:#e9eef4; color:#3d5066; }
.court-heading--coach { background:#173c70; }
.court-heading--coach-blue { background:#386fc2; }
.court-heading--public { background:#238263; }
.court-heading--park,.court-heading--other { background:#8a5a24; }
.schedule-table tbody th,.schedule-table tbody td { height:54px; }
.sticky-cell { position:sticky; left:0; }
.time-cell { z-index:2; background:#fff; color:#596a7e; font-size:12px; font-weight:700; }
.hour-row .time-cell,.hour-row .empty-court-cell,.hour-row .booking-cell { border-top:1px solid #b9c4d1; }
.half-hour-row .time-cell,.half-hour-row .empty-court-cell,.half-hour-row .booking-cell { border-top:1px solid #edf0f4; }
.empty-court-cell { padding:0 !important; }
.court-cell--coach,.court-cell--coach-blue { background:#f4f7fc; }
.court-cell--public { background:#f2faf6; }
.court-cell--park,.court-cell--other { background:#fbf7f0; }
.booking-cell { height:1px !important; padding:4px !important; vertical-align:top; }
.booking-stack { display:flex; width:100%; height:100%; min-height:44px; align-items:stretch; gap:4px; }
.booking-card {
  display:flex; min-width:0; min-height:44px; flex-direction:column; align-items:flex-start;
  justify-content:center; overflow:hidden; padding:6px 7px; border:1px solid transparent;
  border-radius:7px; cursor:pointer; text-align:left; transition:filter 120ms ease,transform 120ms ease;
}
.booking-card:hover { filter:brightness(.97); transform:translateY(-1px); }
.booking-card--course { border-color:#a8c9e8; background:#e8f2fc; color:#214e79; }
.booking-card--coach { border-color:#c9b5e8; background:#f1ebfa; color:#563d7c; }
.booking-card--public { border-color:#9bd5b9; background:#e6f6ee; color:#21634a; }
.booking-card--pickleball { border-color:#f2bd8c; background:#fff0e2; color:#8a4b16; }
.booking-card--other { border-color:#cbd3dc; background:#f1f3f6; color:#48576a; }
.booking-name { width:100%; overflow:hidden; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.booking-time { width:100%; margin-top:2px; font-size:10px; font-weight:650; white-space:nowrap; }
.booking-note { max-width:100%; margin-top:3px; overflow:hidden; padding:1px 4px; border-radius:4px; background:#ffffff9c; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }

.empty-state { display:flex; min-height:310px; flex-direction:column; align-items:center; justify-content:center; padding:28px; color:#718096; text-align:center; }
.empty-state-icon { display:grid; width:52px; height:52px; place-items:center; margin-bottom:9px; border-radius:14px; background:#edf2f7; color:#52667d; font-size:27px; }
.empty-state h2 { margin:3px 0 7px; color:#243b53; font-size:18px; }
.empty-state p { max-width:540px; margin:0; font-size:13px; line-height:1.7; }
.reference-note { margin:12px 4px 0; color:#718096; font-size:12px; line-height:1.7; }

.modal-overlay { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:#0f172a80; }
.modal-dialog { width:min(100%,700px); max-height:min(90vh,850px); overflow:auto; border:1px solid #e1e7ee; border-radius:14px; background:#fff; box-shadow:0 20px 50px #102a4340; }
.modal-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid #e5eaf0; background:#f8fafc; }
.modal-header h2 { margin:0; color:#172b4d; font-size:18px; }
.close-button { width:34px; height:34px; font-size:22px; }
.booking-form { padding:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.form-field { display:flex; min-width:0; flex-direction:column; gap:5px; }
.form-label { color:#52667d; font-size:12px; font-weight:750; }
.form-field input,.form-field select,.form-field textarea { width:100%; min-height:40px; padding:8px 10px; border:1px solid #d6dee8; border-radius:7px; background:#fff; color:#20364e; font-size:14px; }
.form-field textarea { resize:vertical; }
.full-width { grid-column:1 / -1; }
.form-error { min-height:20px; margin:10px 0 0; color:#b42318; font-size:13px; }
.form-actions,.detail-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:8px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px; }
.detail-item { min-width:0; padding:10px; border-radius:7px; background:#f6f8fb; }
.detail-label { display:block; margin-bottom:4px; color:#728198; font-size:11px; }
.detail-value { display:block; overflow-wrap:anywhere; color:#243b53; font-size:14px; font-weight:700; }
.detail-actions { padding:0 16px 16px; }

@media (min-width:761px) and (max-width:1200px) {
  .schedule-table { min-width:100%; }
  .schedule-table th,.schedule-table td { width:86px; min-width:86px; max-width:86px; padding:3px; }
  .schedule-table .time-heading,.schedule-table .time-cell { width:48px; min-width:48px; max-width:48px; }
  .schedule-table thead th { height:46px; padding:4px 2px; font-size:10px; }
  .booking-stack { gap:2px; }
  .booking-card { padding:4px 3px; }
  .booking-name { font-size:9px; }
  .booking-time,.booking-note { font-size:8px; }
}

@media (max-width:760px) {
  .app-shell { width:auto; padding:14px 10px 22px; }
  .page-header { align-items:flex-start; flex-wrap:wrap; }
  .brand { gap:9px; }
  .brand-mark { width:43px; height:43px; font-size:14px; }
  .page-subtitle { font-size:12px; }
  .header-actions { width:100%; justify-content:space-between; gap:6px; }
  .connection-status { max-width:130px; font-size:10px; }
  .primary-button,.secondary-button,.danger-button,.today-button { min-height:38px; padding:0 10px; font-size:12px; }
  .control-panel { align-items:flex-start; flex-direction:column; gap:11px; padding:11px; }
  .date-controls { width:100%; gap:6px; }
  .date-label { font-size:12px; }
  #date-select { min-width:0; width:100%; flex:1; font-size:13px; }
  .legend { gap:9px 12px; font-size:11px; }
  .schedule-viewport { max-height:70vh; }
  .schedule-table th,.schedule-table td { width:116px; min-width:116px; max-width:116px; }
  .schedule-table .time-heading,.schedule-table .time-cell { width:52px; min-width:52px; max-width:52px; }
  .schedule-table thead th { height:44px; font-size:11px; }
  .schedule-table tbody th,.schedule-table tbody td { height:52px; }
  .booking-card { padding:4px; }
  .booking-name { font-size:10px; }
  .booking-time,.booking-note { font-size:9px; }
  .detail-grid,.form-grid { grid-template-columns:1fr; }
  .full-width { grid-column:auto; }
  .detail-actions { flex-wrap:wrap; }
}



.logout-form { margin: 0; }
.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 20px;
}
.login-card {
  width: min(100%, 420px);
  padding: 28px;
  border: 1px solid #e0e6ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 36px #19324b12;
}
.login-card .eyebrow { margin-bottom: 6px; }
.login-card h1 { margin-bottom: 8px; }
.login-description { margin: 0; color: #718096; font-size: 14px; line-height: 1.7; }
.login-account {
  margin: 18px 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: #f2f5f9;
  color: #42556b;
  font-size: 13px;
}
.login-form { display: grid; gap: 12px; }
.login-form label { display: grid; gap: 6px; color: #52667d; font-size: 13px; font-weight: 700; }
.login-form input {
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #d6dee8;
  border-radius: 8px;
  background: #fff;
  color: #20364e;
  font-size: 15px;
}
.login-error { min-height: 20px; margin: 0; color: #b42318; font-size: 13px; }
.login-form .primary-button { width: 100%; }