:root {
  --background: #f3f6f5;
  --foreground: #10211b;
  --card: #ffffff;
  --card-foreground: #10211b;
  --popover: #ffffff;
  --popover-foreground: #10211b;
  --primary: #087a55;
  --primary-foreground: #ffffff;
  --secondary: #e7f3ef;
  --secondary-foreground: #145f49;
  --muted: #eef3f1;
  --muted-foreground: #64736d;
  --accent: #e9f5f1;
  --accent-foreground: #075f43;
  --destructive: #c7404c;
  --border: #d9e3df;
  --input: #cdd9d4;
  --ring: #0b8f65;
  --radius: .75rem;
  --app-height: 100vh;
}

@supports (height: 100svh) { :root { --app-height: 100svh; } }
@supports (height: 100dvh) { :root { --app-height: 100dvh; } }

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 5px);
  --font-sans: "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--background); }
body { min-height: 100%; margin: 0; background: var(--background); color: var(--foreground); font-family: "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 16px; }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgb(11 143 101 / 28%); outline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.reservation-app { width: min(1180px, 100%); height: var(--app-height); min-height: 0; display: flex; flex-direction: column; margin: 0 auto; padding: 18px 22px; color: #15362c; background: #f3f7f5; font-variant-numeric: tabular-nums; }
.app-header { position: relative; z-index: 30; flex-shrink: 0; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #153a2f; border-radius: 16px 16px 0 0; color: #fff; background: #0c3c30; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; background: #25c889; color: #08241a; font-size: 1.02rem; font-weight: 950; }
.header-title { min-width: 0; }
.header-title span { display: block; overflow: hidden; color: #a9c3ba; font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
.header-title h1 { margin: 1px 0 0; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.02em; }
.connection { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 99px; color: #c8d8d3; font-size: .72rem; font-weight: 700; }
.connection svg { width: 15px; }
.connection.is-online svg { color: #36d49a; }
.connection.is-offline { color: #ffd58b; }
.menu-button { color: #fff !important; }
.menu-button:hover { background: rgb(255 255 255 / 10%) !important; }
.menu-button svg { width: 25px; height: 25px; stroke-width: 3; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; }
.main-menu { position: absolute; z-index: 50; top: calc(100% + 4px); right: 10px; width: min(320px, calc(100vw - 24px)); max-height: calc(var(--app-height) - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; padding: 12px; border: 1px solid #385c4c; border-radius: 12px; background: #102f27; color: #eff8f3; box-shadow: 0 16px 40px rgb(4 22 15 / 32%); }
.main-menu[hidden] { display: none; }
.main-menu strong { display: block; padding: 5px 12px 9px; color: #aac9ba; font-size: 12px; }
.main-menu button, .main-menu a { width: 100%; min-height: 46px; display: flex; align-items: center; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: #eff8f3; text-align: left; text-decoration: none; font-size: 15px; }
.main-menu button:hover, .main-menu a:hover { background: #234b3a; color: #fff; }
.main-menu hr { margin: 7px 0; border: 0; border-top: 1px solid #385c4c; }
.menu-chevron { margin-left: auto; font-size: 19px; }
.settings-submenu { margin: 3px 0 7px 14px; padding: 4px 0 4px 8px; border-left: 2px solid #45735b; }
.settings-submenu button { min-height: 44px; color: #d7eee1; font-size: 14px; }
.connection-icon { color: #36d49a; font-size: .7rem; }
.connection.is-offline .connection-icon { color: #ffd58b; }

.week-controls { flex-shrink: 0; min-height: 55px; display: grid; grid-template-columns: minmax(145px, auto) 1fr minmax(145px, auto); align-items: center; gap: 8px; padding: 6px 10px; background: #f3f7f5; }
.week-button { height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #dbe5df; border-radius: 10px; background: #fff; color: #078761; font-weight: 750; }
.week-button:hover { border-color: #a9c8bc; background: #f3f8f6; }
.week-button svg { width: 17px; }
.week-title { min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 3px 6px; border: 0; border-radius: 10px; background: #fff; color: #15362c; }
.week-title svg { width: 20px; color: #087a55; }
.week-title span { display: grid; text-align: center; }
.week-title strong { font-size: 14px; line-height: 1.2; }
.week-title small { margin-top: 3px; color: #71867c; font-size: 11px; }

.schedule-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dbe5df; border-bottom: 0; background: #fff; touch-action: pan-y; }
.schedule-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; display: grid; align-content: start; grid-template-columns: 76px repeat(7, minmax(0, 1fr)); grid-template-rows: 53px; grid-auto-rows: var(--slot-height, 53px); }
.time-head, .day-head { position: sticky; top: 0; z-index: 2; min-height: 53px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid #dbe5df; background: #0c3c30; color: #fff; }
.time-head span { color: #fff; font-size: 10px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase; }
.day-head { border-left: 1px solid rgb(255 255 255 / 10%); }
.day-head span { color: #bdd6cb; font-size: 11px; font-weight: 650; }
.day-head strong { margin-top: 3px; font-size: 17px; }
.day-head.is-today { background: #078761; box-shadow: inset 0 -3px #71e7b9; }
.day-head.is-today { z-index: 3; }
.day-head.is-today::before { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; right: -2px; border-left: 2px solid #15996c; border-right: 2px solid #15996c; pointer-events: none; }
.day-head.is-today span { color: #fff; }

.time-cell { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 0; border-bottom: 1px solid #dbe5df; background: #e7efe9; color: inherit; }
.time-cell strong { font-size: 14px; line-height: 1.2; }
.time-cell span { margin-top: 3px; color: #71867c; font-size: 11px; }
.slot, .slot-skeleton { position: relative; min-width: 0; min-height: 0; border: 0; border-left: 1px solid #dbe5df; border-bottom: 1px solid #dbe5df; }
.slot { display: flex; align-items: center; justify-content: center; padding: 0 1px; transition: background 100ms ease; }
.slot svg { width: 16px; height: 16px; }
.slot span { font-size: 12px; font-weight: 600; }
.slot.is-empty { background: #fff; color: #078761; }
.slot.is-empty:hover { background: #eaf8f2; }
.slot.is-empty svg { width: 15px; }
.slot.is-full { background: #ffe1ca; color: #9c491d; }
.slot.is-full:hover { background: #ffe5ce; }
.slot.is-full.is-pending { background: #fff7d8; color: #9a7310; }
.slot.is-full.is-pending span { font-size: 10px; }
.slot.is-empty.is-today, .slot-skeleton.is-today { background: #e5f5ed; }
.slot.is-empty.is-today:hover { background: #d6f0e2; }
.slot.is-today { z-index: 1; }
.slot.is-today::after, .slot-skeleton.is-today::before { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; right: -2px; pointer-events: none; border-left: 2px solid #15996c; border-right: 2px solid #15996c; }
.slot.is-full svg[aria-label="Uyarı kaydı"] { color: #c73f4c; fill: #fff; }
.slot-skeleton { position: relative; overflow: hidden; background: #f4f6f5; }
.slot-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 80%), transparent); animation: shimmer 1.1s infinite; }

.court-switcher { position: relative; z-index: 4; flex: 0 0 auto; min-height: 61px; display: flex; overflow-x: auto; gap: 8px; margin-top: 0; padding: 10px; border: 1px solid #c5d7cc; border-top: 0; border-radius: 0 0 14px 14px; background: #dcebe2; box-shadow: 0 -5px 14px rgb(21 54 44 / 12%); }
.court-switcher button { flex: 1 0 86px; min-width: 0; height: 41px; display: grid; place-items: center; padding: 0 6px; border: 1px solid #c5d7cc; border-radius: 6px; background: #fff; color: #365b48; box-shadow: 0 2px 4px rgb(21 54 44 / 9%); }
.court-switcher button span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
.court-switcher button.is-active { border-color: #078761; background: #078761; color: #fff; box-shadow: 0 3px 7px rgb(7 135 97 / 22%); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 10px; background: rgb(4 25 18 / 55%); backdrop-filter: blur(2px); }
.modal-backdrop[hidden] { display: none; }
.modal-card { position: relative; width: min(600px, 100%); max-height: calc(100vh - 20px); overflow-y: auto; padding: 22px; border: 1px solid var(--border); border-radius: 15px; background: #fff; box-shadow: 0 24px 80px rgb(4 25 18 / 30%); }
.modal-card h2 { margin: 0; font-size: 1.12rem; }
.modal-card > p { margin: 5px 0 17px; color: #6c7a74; font-size: .78rem; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #f1f5f3; color: #5f716a; font-size: 1.25rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.primary-button, .secondary-button, .auth-submit { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 9px; font-weight: 800; text-decoration: none; }
.primary-button, .auth-submit { border: 1px solid #087a55; background: #087a55; color: #fff; }
.primary-button:hover, .auth-submit:hover { background: #066b4a; }
.primary-button:disabled { opacity: .55; cursor: not-allowed; }
.secondary-button { border: 1px solid var(--border); background: #fff; color: #52635c; }
.booking-dialog, .settings-dialog { max-height: calc(100vh - 20px); overflow-y: auto; }
.selected-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 5px; color: #087a55; font-size: .76rem; }
.selected-slot span { padding: 3px 7px; border-radius: 5px; background: #e4f5ef; font-weight: 850; }
.selected-slot strong { color: #456059; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 5px 0 2px; }
.field { display: grid; gap: 6px; color: #40534c; font-size: .78rem; font-weight: 750; }
.field.full { grid-column: 1 / -1; }
.field input, .field select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--input); border-radius: 8px; background: #fff; color: var(--foreground); font-weight: 500; }
.field input:focus, .field select:focus { border-color: #0b8f65; outline: 3px solid rgb(11 143 101 / 12%); }
.phone-field, .money-field { position: relative; }
.phone-field input { padding-right: 42px; }
.inline-warning { position: absolute; right: 9px; top: 8px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: #fff0d7; color: #bd6b09; }
.inline-warning svg { position: static; width: 16px; }
.error-text { color: #bd3543; font-weight: 650; }
.warning-text { color: #a15e08; font-weight: 650; }
.blacklist-booking-alert { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 13px 14px; border: 2px solid #b91c2b; border-radius: 13px; background: linear-gradient(135deg,#b20f24,#dc293d); color: #fff; box-shadow: 0 10px 25px rgb(139 13 32 / 28%); }
.blacklist-booking-alert[hidden] { display: none; }
.blacklist-booking-alert > b { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid rgb(255 255 255 / 72%); border-radius: 50%; background: rgb(255 255 255 / 14%); font-size: 25px; line-height: 1; }
.blacklist-booking-alert > span { display: grid; gap: 4px; min-width: 0; }
.blacklist-booking-alert strong { font-size: 13px; line-height: 1.25; letter-spacing: .025em; }
.blacklist-booking-alert small { color: #fff; font-size: 11px; font-weight: 650; line-height: 1.45; opacity: .94; }
.blacklist-booking-alert.is-attention { animation: blacklist-alert-attention .72s ease-out 2; }
.phone-field .inline-warning { background: #c5142a; color: #fff; font-weight: 900; box-shadow: 0 0 0 4px rgb(197 20 42 / 15%); }
.blacklist-setting-options { display: grid; gap: 12px; margin: 18px 0 12px; }
.blacklist-setting-option { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 12px; width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--card); color: var(--foreground); text-align: left; cursor: pointer; }
.blacklist-setting-option > span:last-child { display: grid; gap: 5px; }
.blacklist-setting-option strong { font-size: 14px; line-height: 1.35; }
.blacklist-setting-option small { color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
.blacklist-setting-check { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--border); border-radius: 50%; color: transparent; font-size: 16px; font-weight: 900; }
.blacklist-setting-option[aria-pressed="true"] { border-color: #087a55; background: linear-gradient(135deg,#e8f7ef,#f8fcfa); box-shadow: 0 0 0 2px rgb(8 122 85 / 12%); }
.blacklist-setting-option[aria-pressed="true"] .blacklist-setting-check { border-color: #087a55; background: #087a55; color: #fff; }
.blacklist-setting-option:focus-visible { outline: 3px solid rgb(8 122 85 / 20%); outline-offset: 2px; }
@keyframes blacklist-alert-attention { 0% { transform: scale(.98); box-shadow: 0 0 0 0 rgb(197 20 42 / 38%); } 45% { transform: scale(1.012); box-shadow: 0 0 0 9px rgb(197 20 42 / 0%); } 100% { transform: scale(1); box-shadow: 0 10px 25px rgb(139 13 32 / 28%); } }
@media (prefers-reduced-motion: reduce) { .blacklist-booking-alert.is-attention { animation: none; } }
.balance-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 9px; background: #eef6f3; color: #53675f; font-size: .82rem; }
.balance-row strong { color: #103f30; font-size: 1rem; }
.sms-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: #6b7a74; font-size: .72rem; }
.sms-note svg { width: 16px; color: #087a55; }
.start-options label { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; padding: 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.start-options label.is-selected { border-color: #178963; background: #edf9f5; box-shadow: 0 0 0 1px #178963; }
.start-options label > input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: #087a55; }
.start-options label span { display: grid; gap: 3px; }
.start-options label strong { font-size: .86rem; }
.start-options label small { color: #6f7d78; font-size: .72rem; line-height: 1.4; }

@keyframes court-in { from { opacity: .45; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shimmer { to { transform: translateX(100%); } }

@media (max-width: 720px) {
  .reservation-app { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  .app-header { min-height: 51px; gap: 10px; padding: 0 12px; border: 0; border-radius: 0; }
  .brand-mark { width: 33px; height: 33px; border-radius: 10px; background: #30d7a0; font-size: 19px; }
  .header-title span { font-size: 11px; }
  .header-title h1 { font-size: 1rem; }
  .connection { width: 12px; min-height: 24px; justify-content: center; padding: 0; border: 0; }
  .connection .connection-text { display: none; }
  .connection .connection-icon { display: inline; }
  .icon-button { width: 30px; height: 30px; }
  .week-controls { grid-template-columns: 43px 1fr 43px; }
  .week-button { padding: 0; }
  .week-button span { display: none; }
  .schedule-panel { border-right: 0; border-left: 0; border-radius: 0; }
  .court-switcher { border: 0; border-radius: 0; }
  .schedule-grid { grid-template-columns: 57px repeat(7, minmax(0, 1fr)); }
  .booking-dialog, .settings-dialog { width: calc(100% - 14px); }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
}

@media (max-width: 380px) {
  .schedule-grid { grid-template-columns: 53px repeat(7, minmax(0, 1fr)); }
  .time-cell strong { font-size: 13px; }
  .slot span { font-size: 11px; }
  .week-title strong { font-size: 13px; }
  .week-title small { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 200; max-width: min(420px, calc(100% - 24px)); transform: translateX(-50%); padding: 11px 15px; border-radius: 10px; background: #102f27; color: #fff; box-shadow: 0 12px 30px rgb(6 38 27 / 28%); font-size: .8rem; font-weight: 700; }
.toast[hidden] { display: none; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at top, #dff5ed, #f4f7f6 46%); }
.auth-card { width: min(430px, 100%); padding: 28px; border: 1px solid var(--border); border-radius: 17px; background: #fff; box-shadow: 0 18px 60px rgb(16 47 39 / 12%); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.auth-brand > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #087a55; color: #fff; font-weight: 950; }
.auth-brand div { display: grid; }
.auth-brand strong { letter-spacing: .04em; }
.auth-brand small { color: #76847f; font-size: .7rem; }
.auth-card h1 { margin: 0; font-size: 1.3rem; }
.auth-card > p { margin: 7px 0 20px; color: #6d7b76; font-size: .82rem; line-height: 1.5; }
.auth-card form { display: grid; gap: 13px; }
.auth-card label { display: grid; gap: 6px; color: #42564e; font-size: .78rem; font-weight: 750; }
.auth-card input { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid var(--input); border-radius: 8px; }
.auth-error { margin: 0 0 15px; padding: 10px 12px; border: 1px solid #f1b8be; border-radius: 8px; background: #fff0f1; color: #a6303c; font-size: .76rem; line-height: 1.45; }
.auth-submit { width: 100%; margin-top: 4px; }
.field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--input); border-radius: 8px; background: var(--card); color: var(--foreground); font: inherit; font-weight: 500; resize: vertical; }
.booking-context { position: sticky; top: -22px; z-index: 2; margin: 0 0 17px; padding: 12px 14px; border-radius: 9px; background: #e5f3ec; color: #153e2c; box-shadow: 0 3px 8px rgb(13 49 31 / 8%); }
.booking-dialog .modal-close { position: sticky; top: 0; float: right; z-index: 4; margin: 0 -6px -34px 0; }
.booking-context > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
#selected-slot-text { display: grid; grid-template-columns: 1fr; gap: 5px; align-items: center; }
#selected-date { font-size: 17px; }
#selected-day { grid-column: 1; text-transform: capitalize; font-size: 14px; }
#selected-time { grid-column: 1; grid-row: 3; font-size: 18px; white-space: nowrap; }
.booking-dialog .booking-context { position: static; box-shadow: none; }
.booking-dialog .booking-context > span { margin: 8px 0 0; opacity: .75; }
.compact-payment-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; margin-top: 12px; }
.compact-payment-row .field { min-width: 0; }
.compact-payment-row .field > span { font-size: 12px; }
.compact-payment-row input, .compact-payment-row select { width: 100%; min-width: 0; padding-left: 8px; padding-right: 8px; }
.compact-balance { min-width: 0; display: flex; flex-direction: column; gap: 0; color: var(--foreground); }
.compact-balance span { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; opacity: 1; }
.compact-balance strong { min-height: 48px; display: flex; align-items: center; font-size: 19px; font-weight: 750; overflow-wrap: anywhere; }
.booking-payment { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }
.booking-payment h3 { margin: 0 0 10px; font-size: 15px; }
.booking-payment .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.payment-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 10px 0 15px; }
.payment-methods button { min-height: 42px; padding: 0 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--foreground); font-size: 14px; }
.payment-methods button[aria-pressed="true"] { border-color: #0b956b; background: #087a55; color: #fff; }
.reservation-context { display: grid; gap: 5px; margin: 16px 0; padding: 12px; border-radius: 8px; background: var(--muted); }
.reservation-context > span { font-size: 13px; text-transform: capitalize; }
.reservation-context strong { font-size: 17px; }
.reservation-context b { font-size: 20px; }
.reservation-customer { display: grid; gap: 6px; }
.reservation-customer > strong { font-size: 18px; }
.reservation-customer > a { width: fit-content; color: var(--primary); font-size: 15px; }
.reservation-customer p { margin: 4px 0 8px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.subscriber-label { width: fit-content; padding: 4px 8px; border-radius: 5px; background: #ede0cf; color: #66421e; font-size: 12px; font-weight: 700; }
.reservation-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 17px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.reservation-money span { font-size: 12px; color: var(--muted-foreground); }
.reservation-money strong { display: block; margin-top: 4px; color: var(--foreground); font-size: 16px; }
.reservation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.reservation-actions button { min-height: 47px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); color: var(--foreground); font-size: 14px; font-weight: 650; }
.reservation-actions button:disabled { opacity: .5; cursor: default; }
#reservation-operation h3 { font-size: 16px; }
.slot .subscriber-mark { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 3px; background: #6f462b; color: #fff4dc; font-size: 8px; font-weight: 750; }
body[data-theme="dark"] .booking-context { background: #234535; color: #e0eae5; }
body[data-theme="dark"] .subscriber-label { background: #533d29; color: #ffe0af; }
body[data-theme="dark"] .slot .subscriber-mark { background: #ecd5b8; color: #55351f; }

/* Independent settings sections and four calendar appearances. */
.settings-section > p { color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
.settings-section h3 { margin: 18px 0 10px; font-size: 14px; }
.settings-demo-note { padding: 9px 11px; border: 1px solid #e4c08f; border-radius: 7px; background: #fff4df; color: #80551c !important; line-height: 1.4; }
.settings-list { display: grid; gap: 7px; margin: 15px 0; }
.settings-list-item { display: flex; align-items: center; gap: 7px; padding: 11px 9px; border: 1px solid var(--border); border-radius: 7px; }
.settings-list-item > div { flex: 1; min-width: 0; }
.settings-list-item strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.settings-list-item small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 11px; }
.settings-list-item button { min-height: 35px; padding: 0 7px; border: 0; border-radius: 5px; background: var(--muted); color: var(--foreground); font-size: 12px; }
.settings-list-item button.text-danger { color: #c23b45; }
.delete-confirm { margin-top: 15px; padding: 12px; border: 1px solid #e9b6b9; border-radius: 8px; background: #fff1f1; color: #8f2932; font-size: 13px; line-height: 1.5; }
.danger-button { min-height: 42px; padding: 0 12px; border: 0; border-radius: 7px; background: #ae3340; color: #fff; font-weight: 700; }
.hours-generator { margin-top: 15px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); }
.settings-hint { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.hour-slots { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.hour-slots button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
.hour-slots button span { color: var(--muted-foreground); font-size: 18px; }
.hour-slots button.hours-boundary-add { min-width: 48px; border-color: var(--primary); background: var(--secondary); color: var(--primary); font-size: 26px; font-weight: 600; }
.hours-generator > summary { color: var(--primary); cursor: pointer; font-size: 14px; font-weight: 700; }
.blacklist-page { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; background: #eef2ed; border-radius: 0 0 16px 16px; }
.blacklist-surface { padding: 20px; border: 1px solid #d7e1d7; border-radius: 12px; background: var(--card); box-shadow: 0 8px 28px rgb(21 54 44 / 5%); }
.blacklist-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 17px; }
.blacklist-heading > span { display: block; margin-bottom: 5px; color: #a38647; font-size: 9px; font-weight: 800; letter-spacing: 2px; }
.blacklist-heading h2 { margin: 0; color: var(--foreground); font-size: 21px; letter-spacing: -.5px; }
.blacklist-toolbar-actions { display: flex; gap: 7px; align-items: center; }
.blacklist-add { height: 42px; padding: 0 16px; border: 1px solid #087a55; border-radius: 7px; background: #087a55; color: #fff; font-size: 13px; font-weight: 750; box-shadow: 0 3px 8px rgb(8 122 85 / 12%); }
.blacklist-theme { height: 40px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--muted-foreground); font-size: 12px; }
.blacklist-search-box { display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #b9cdc1; border-radius: 9px; background: var(--card); box-shadow: 0 2px 5px rgb(21 54 44 / 3%); }
.blacklist-search-box:focus-within { border-color: #087a55; box-shadow: 0 0 0 3px rgb(8 122 85 / 10%); }
.blacklist-search-box svg { flex-shrink: 0; width: 18px; color: #547665; }
.blacklist-search-box input { min-width: 0; flex: 1; height: 48px; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: 14px; }
.blacklist-scope-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 15px; }
.blacklist-scope-row > span { color: var(--muted-foreground); font-size: 12px; }
.blacklist-scope-options { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--muted); }
.blacklist-scope-options button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 5px; background: transparent; color: var(--muted-foreground); font-size: 12px; font-weight: 650; }
.blacklist-scope-options button[aria-pressed="true"] { background: var(--card); color: var(--primary); box-shadow: 0 1px 4px rgb(21 54 44 / 12%); }
.blacklist-query-result { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 12px; border: 1px solid #eed6a3; border-radius: 8px; background: #fff8e9; color: #795018; }
.blacklist-query-result.is-clear { border-color: #c7ded1; background: #eef8f1; color: #236241; }
.blacklist-query-result.is-pending { border-color: var(--border); background: var(--muted); color: var(--muted-foreground); }
.blacklist-result-mark { display: grid; place-items: center; flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%; background: rgb(176 126 33 / 12%); font-size: 16px; font-weight: 800; }
.blacklist-query-result strong, .blacklist-query-result div > span { display: block; }
.blacklist-query-result strong { font-size: 13px; }
.blacklist-query-result div > span { margin-top: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.blacklist-status { margin: 14px 0; color: var(--muted-foreground); font-size: 13px; }
.blacklist-table-head, .blacklist-entry { display: grid; grid-template-columns: 185px minmax(0, 1fr) 115px 136px; gap: 12px; align-items: center; }
.blacklist-table-head { margin-top: 16px; padding: 10px 12px; border-radius: 6px; background: var(--muted); color: var(--muted-foreground); font-size: 10px; font-weight: 750; letter-spacing: .2px; }
.blacklist-list { display: grid; gap: 0; margin: 0 0 12px; }
.blacklist-entry { min-height: 62px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--card); }
.blacklist-entry:hover { background: #f7faf7; }
.blacklist-entry strong { display: block; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blacklist-entry p { overflow: hidden; margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.blacklist-entry time { color: var(--muted-foreground); font-size: 11px; }
.blacklist-entry-actions { display: flex; justify-content: flex-end; gap: 6px; }
.blacklist-entry-actions button { min-height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--foreground); font-size: 11px; }
.blacklist-entry-actions .text-danger { border-color: #ead0d1; color: #b14a50; }
.blacklist-dialog .form-grid { margin-top: 16px; }
.blacklist-empty { margin: 0; padding: 35px 12px; color: var(--muted-foreground); text-align: center; font-size: 13px; }
.members-new { margin-top: 16px; }
.member-plan { max-width: 120px; min-height: 38px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--foreground); font-size: 12px; }
body[data-theme="dark"] .blacklist-page { background: #0d2018; }
body[data-theme="dark"] .blacklist-surface { border-color: #345442; box-shadow: 0 8px 28px rgb(0 0 0 / 12%); }
body[data-theme="dark"] .blacklist-heading > span { color: #c9ad72; }
body[data-theme="dark"] .blacklist-entry:hover { background: #193628; }
body[data-theme="dark"] .blacklist-query-result { background: #3c301d; border-color: #675333; color: #f2d7a1; }
body[data-theme="dark"] .blacklist-query-result.is-clear { background: #1b3928; border-color: #395d47; color: #b3e5cf; }
body[data-theme="dark"] .blacklist-query-result.is-pending { background: var(--muted); border-color: var(--border); color: var(--muted-foreground); }
@media (max-width: 720px) {
  .blacklist-page { padding: 10px; border-radius: 0; }
  .blacklist-surface { padding: 12px; border-radius: 10px; }
  .blacklist-toolbar { gap: 8px; margin-bottom: 12px; }
  .blacklist-heading h2 { font-size: 18px; }
  .blacklist-add { padding: 0 11px; font-size: 12px; }
  .blacklist-theme { padding: 0 8px; font-size: 11px; }
  .blacklist-search-box { gap: 7px; padding: 0 10px; }
  .blacklist-search-box input { font-size: 16px; }
  .blacklist-scope-row { flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
  .blacklist-scope-row > span { font-size: 10px; }
  .blacklist-scope-options { flex: 1; }
  .blacklist-scope-options button { flex: 1; min-height: 34px; padding: 0 7px; font-size: 11px; white-space: nowrap; }
  .blacklist-table-head { display: none; }
  .blacklist-entry { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; min-height: 64px; padding: 9px 0; }
  .blacklist-entry strong { grid-column: 1; font-size: 14px; }
  .blacklist-entry p { grid-column: 1; grid-row: 2; font-size: 11px; }
  .blacklist-entry time { display: none; }
  .blacklist-entry-actions { grid-column: 2; grid-row: 1 / 3; gap: 5px; }
  .blacklist-entry-actions button { min-height: 40px; padding: 0 8px; font-size: 10px; }
}
/* Rounded card layout inspired by the supplied customer/account screens. */
.blacklist-page { padding: 22px; background: var(--background); color: var(--foreground); }
.blacklist-surface { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.blacklist-heading > span { color: var(--muted-foreground); }
.blacklist-heading h2 { color: inherit; font-size: 24px; }
.blacklist-add { height: 44px; border: 0; border-radius: 14px; background: #087a55; box-shadow: 0 6px 18px rgb(8 122 85 / 16%); }
.blacklist-theme { border-color: var(--border); border-radius: 13px; background: var(--card); color: var(--muted-foreground); }
.blacklist-search-box { padding: 0 15px; border-color: var(--border); border-radius: 18px; background: var(--card); box-shadow: 0 4px 14px rgb(21 54 44 / 4%); }
.blacklist-search-box:focus-within { border-color: #087a55; box-shadow: 0 0 0 3px rgb(8 122 85 / 10%); }
.blacklist-search-box svg { color: var(--muted-foreground); }
.blacklist-scope-options { gap: 6px; padding: 0; border: 0; background: transparent; }
.blacklist-scope-options button { min-height: 36px; border: 1px solid var(--border); border-radius: 99px; background: var(--card); color: var(--muted-foreground); }
.blacklist-scope-options button[aria-pressed="true"] { border-color: #087a55; background: #087a55; color: #fff; box-shadow: 0 3px 10px rgb(8 122 85 / 14%); }
.blacklist-list { gap: 10px; }
.blacklist-entry { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 13px; min-height: 88px; padding: 13px 17px; border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: 0 4px 16px rgb(21 54 44 / 4%); }
.blacklist-entry:hover { background: var(--card); border-color: #a9c8bc; }
.blacklist-entry-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #cc4054; background: #fbecee; font-size: 24px; font-weight: 800; }
.blacklist-entry-copy { min-width: 0; }
.blacklist-entry strong { font-size: 16px; font-weight: 750; }
.blacklist-entry p { margin: 4px 0; color: var(--muted-foreground); }
.blacklist-entry time { display: block; color: var(--muted-foreground); line-height: 1.4; }
.blacklist-entry-actions button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: #e7f3ef; color: #145f49; font-weight: 700; }
.blacklist-entry-actions .text-danger { background: #fbecee; color: #c13e50; }
body[data-theme="dark"] .blacklist-page { background: var(--background); color: var(--foreground); }
body[data-theme="dark"] .blacklist-heading > span { color: var(--muted-foreground); }
body[data-theme="dark"] .blacklist-entry, body[data-theme="dark"] .blacklist-search-box, body[data-theme="dark"] .blacklist-theme, body[data-theme="dark"] .blacklist-scope-options button:not([aria-pressed="true"]) { background: var(--card); border-color: var(--border); color: var(--foreground); }
body[data-theme="dark"] .blacklist-entry:hover { background: #193628; }
body[data-theme="dark"] .blacklist-search-box input { color: var(--foreground); }
body[data-theme="dark"] .blacklist-entry p, body[data-theme="dark"] .blacklist-entry time { color: var(--muted-foreground); }
body[data-theme="dark"] .blacklist-entry-mark, body[data-theme="dark"] .blacklist-entry-actions .text-danger { background: #452c3c; color: #ffa5b2; }
body[data-theme="dark"] .blacklist-entry-actions button:not(.text-danger) { background: #234535; color: #b3e5cf; }
@media (max-width: 720px) {
  .blacklist-page { padding: 16px 12px; }
  .blacklist-heading h2 { font-size: 22px; }
  .blacklist-list { gap: 8px; }
  .blacklist-entry { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; min-height: 88px; padding: 10px; border-radius: 18px; }
  .blacklist-entry-mark { width: 34px; height: 38px; border-radius: 12px; font-size: 21px; }
  .blacklist-entry strong { font-size: 14px; }
  .blacklist-entry p { font-size: 11px; }
  .blacklist-entry time { display: block; font-size: 10px; }
  .blacklist-entry-actions { grid-column: auto; grid-row: auto; flex-direction: column; gap: 4px; }
  .blacklist-entry-actions button { min-height: 32px; min-width: 57px; padding: 0 7px; font-size: 10px; border-radius: 9px; }
}
.hour-add-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.appearance-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 17px 0; }
.appearance-option { padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); }
.appearance-option.is-selected { border-color: #0b9b72; box-shadow: 0 0 0 2px #0b9b72; }
.appearance-option > strong { display: block; margin-top: 10px; font-size: 12px; }
.appearance-sample { display: flex; justify-content: space-around; align-items: center; height: 52px; border-radius: 5px; font-size: 12px; }
.appearance-sample b { padding: 12px 8px; border-radius: 3px; font-weight: 600; }
.light-sample { background: #e5f5ed; color: #078761; }
.light-sample b { background: #ffe1ca; color: #9c491d; }
.dark-sample { background: #15382a; color: #b3e5cf; }
.dark-sample b { background: #8a5030; color: #ffe5d2; }
.demo-option { display: flex; gap: 10px; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--border); cursor: pointer; }
.demo-option input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--primary); }
.demo-option strong, .demo-option small { display: block; font-size: 13px; }
.demo-option small { margin-top: 5px; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.schedule-empty { grid-column: 1 / -1; padding: 15px; color: var(--muted-foreground); font-size: 13px; }
.slot .cell-time { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cell-time strong { font-size: 12px; font-weight: 700; }
.cell-time small { font-size: 10px; font-weight: 500; opacity: .8; }
.time-cell.is-hour-selected { background: #236d8c; color: #fff; }
.time-cell.is-hour-selected span { color: #d7edf6; }
.slot.is-empty.is-hour-selected { background: #e5f2fa; }
.slot.is-empty.is-hour-selected.is-today { background: #d6eee5; }
.slot.is-hour-selected, .slot-skeleton.is-hour-selected { box-shadow: inset 0 2px #69a4bf, inset 0 -2px #69a4bf; }
.time-cell:hover { box-shadow: inset 0 0 0 1px #69a4bf; }

body[data-theme="dark"] { --background: #0b1713; --foreground: #e0eae5; --card: #142b21; --border: #2b4539; --input: #3c584a; --muted: #1c3329; --muted-foreground: #a0b7ab; --primary: #75ddb5; color-scheme: dark; }
body[data-theme="dark"] .reservation-app { background: #0b1713; color: #e0eae5; }
body[data-theme="dark"] .week-controls { background: #10231b; }
body[data-theme="dark"] .court-switcher { background: #244635; box-shadow: 0 -5px 14px rgb(0 0 0 / 25%); }
body[data-theme="dark"] .week-title, body[data-theme="dark"] .week-button, body[data-theme="dark"] .court-switcher button:not(.is-active) { background: #183026; border-color: #2b4539; color: #d5e6db; }
body[data-theme="dark"] .week-title small { color: #a0b7ab; }
body[data-theme="dark"] .schedule-panel { background: #12251c; border-color: #2b4539; }
body[data-theme="dark"] .slot, body[data-theme="dark"] .time-cell { border-color: #2b4539; }
body[data-theme="dark"] .time-cell:not(.is-hour-selected) { background: #20392c; color: #dce9e1; }
body[data-theme="dark"] .time-cell:not(.is-hour-selected) span { color: #a0b7ab; }
body[data-theme="dark"] .slot.is-empty { background: #14281f; color: #b3e5cf; }
body[data-theme="dark"] .slot.is-empty.is-today { background: #1b3c2e; }
body[data-theme="dark"] .slot.is-empty:hover { background: #244936; }
body[data-theme="dark"] .slot.is-full { background: #8a5030; color: #ffe5d2; }
body[data-theme="dark"] .slot.is-full:hover { background: #a2603a; }
body[data-theme="dark"] .slot.is-full.is-pending { background: #635022; color: #fff0b3; }
body[data-theme="dark"] .slot.is-empty.is-hour-selected { background: #203d4b; }
body[data-theme="dark"] .slot.is-empty.is-hour-selected.is-today { background: #244840; }
body[data-theme="dark"] .modal-card, body[data-theme="dark"] .modal-actions { background: #142b21; color: #e0eae5; }
body[data-theme="dark"] .main-menu button, body[data-theme="dark"] .main-menu a { color: #d5e6db; }
body[data-theme="dark"] .main-menu button:hover, body[data-theme="dark"] .main-menu a:hover { background: #244936; }
body[data-theme="dark"] .field, body[data-theme="dark"] .auth-card label { color: #c3d6ca; }
body[data-theme="dark"] .field input, body[data-theme="dark"] .field select, body[data-theme="dark"] .secondary-button, body[data-theme="dark"] .modal-close { background: #1b3529; color: #e0eae5; }
body[data-theme="dark"] .start-options label.is-selected { background: #234535; }
body[data-theme="dark"] .blacklist-setting-option[aria-pressed="true"] { background: #193e30; border-color: #37b887; }
body[data-theme="dark"] .start-options label small, body[data-theme="dark"] .modal-card > p { color: #a0b7ab; }
body[data-theme="dark"] .balance-row { background: #234535; color: #c3d6ca; }
body[data-theme="dark"] .balance-row strong { color: #e0eae5; }
body[data-theme="dark"] .selected-slot span { background: #234535; }
body[data-theme="dark"] .selected-slot strong { color: #c3d6ca; }

@media (max-width: 720px) {
  .booking-context { top: -19px; }
  .modal-card { padding: 19px 16px; }
  .modal-actions { position: sticky; bottom: 0; margin: 18px -16px -19px; padding: 12px 16px; border-top: 1px solid var(--border); background: #fff; }
  .modal-actions .primary-button { flex: 1; }
}
/* Only visible when a connection or synchronization needs attention. */
#sync-banner { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #fff3db; color: #654512; font-size: 12px; }
#sync-banner[hidden] { display: none; }
#sync-banner button { margin-left: auto; border: 0; border-radius: 8px; padding: 7px 10px; background: #0c3c30; color: white; cursor: pointer; }
.offline-record { padding: 12px; margin: 10px 0; border: 1px solid #b9d6cb; border-radius: 12px; overflow-wrap: anywhere; }
.offline-record p { margin: 5px 0; }
.management-dialog { width: min(760px, calc(100vw - 24px)); }
.management-row { padding: 12px 14px; border: 1px solid #bdd7cc; border-radius: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.management-row p { margin: 5px 0; font-size: 13px; }
.management-row small { display: block; opacity: .7; }
.management-row button { margin: 8px 6px 0 0; }
.auth-card .remember-choice { display:flex; align-items:center; gap:10px; }
.auth-card .remember-choice input { width:20px; height:20px; margin:0; }
#court-edit-modal { z-index: 110; }
.slot.is-subscriber { background: #d6e9fa; color: #153e61; }
.slot.is-hour-selected:not(.is-pending) { background-image: linear-gradient(#087b5620, #087b5620); }
.color-settings { display: grid; gap: 14px; margin: 20px 0; }
.color-settings label { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 10px; background: var(--muted); }
.color-settings input { width: 70px; height: 44px; border: 1px solid var(--border); border-radius: 8px; }

/* Floating-calendar booking form. */
.booking-dialog { padding: 0; width: min(440px, 100%); border-radius: 23px; }
.booking-floating-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 52px; background: #103e30; color: #fff; }
.booking-floating-header h2 { padding-top: 7px; font-size: 23px; }
.booking-dialog .booking-floating-header .modal-close { position: static; float: none; margin: 0; flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #ffffff18; color: #fff; }
.booking-dialog .booking-context { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 15px; position: relative; margin: -29px 18px 18px; padding: 14px; border: 1px solid var(--border); border-radius: 17px; background: var(--card); color: var(--foreground); box-shadow: 0 7px 18px #103e3012; }
.booking-calendar { overflow: hidden; border-radius: 12px; background: #fff0e2; text-align: center; }
#selected-month { display: block; background: #a9501d; color: #fff; padding: 5px 3px; font-size: 11px; font-weight: 750; letter-spacing: .6px; }
#selected-number { display: block; padding: 4px 0 0; font-size: 31px; line-height: 1.2; color: #79401d; }
#selected-year { display: block; padding: 2px 0 8px; font-size: 11px; color: #795845; }
.booking-dialog #selected-slot-text { display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr); }
.booking-dialog #selected-day { font-size: 20px; font-weight: 750; color: var(--foreground); }
.booking-dialog #selected-time { grid-row: auto; font-size: 23px; font-weight: 800; }
#selected-facility { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.booking-dialog #selected-court { font-size: 24px; font-weight: 800; color: var(--primary); overflow-wrap: anywhere; }
.booking-dialog #booking-form { padding: 0 18px; }
.booking-customer-panel { padding: 14px; border-radius: 16px; background: var(--secondary); gap: 11px; }
.booking-dialog .field input, .booking-dialog .field select, .booking-dialog .field textarea { min-height: 48px; border-radius: 11px; font-size: 16px; }
.booking-dialog .field textarea { min-height: 63px; }
.booking-dialog .booking-payment { margin-top: 16px; padding: 14px; border: 0; border-radius: 16px; background: var(--muted); }
.booking-dialog .sms-note { margin: 12px 2px; font-size: 12px; }
.booking-dialog .modal-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.7fr; margin: 14px -18px 0; padding: 15px 18px 20px; background: var(--card); border-top: 1px solid var(--border); z-index: 3; }
.booking-dialog .modal-actions button { min-height: 50px; border-radius: 12px; font-size: 16px; }
body[data-theme="dark"] .booking-dialog .booking-context { background: var(--card); color: var(--foreground); }
body[data-theme="dark"] .booking-calendar { background: #553a25; }
body[data-theme="dark"] #selected-number, body[data-theme="dark"] #selected-year { color: #ffdfbf; }
/* Reservation details share the floating-calendar form, with a receipt ledger below the balance. */
.reservation-dialog { background:var(--card); }
.reservation-dialog .reservation-context { position:relative; display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:15px; margin:-29px 18px 16px; padding:14px; border:1px solid var(--border); border-radius:17px; background:var(--card); box-shadow:0 7px 18px #103e3012; }
.detail-month { display:block; background:#a9501d; color:white; padding:5px 3px; font-size:11px; font-weight:750; letter-spacing:.6px; }
.reservation-context .detail-day-number { display:block; padding:4px 0 0; font-size:31px; line-height:1.2; color:#79401d; }
.detail-year { display:block; padding:2px 0 8px; font-size:11px; color:#795845; }
.detail-slot { display:grid; gap:5px; min-width:0; }
.detail-slot > span { font-size:19px; font-weight:750; }
.detail-slot > b { font-size:22px; font-weight:800; }
.detail-slot > strong { color:var(--primary); font-size:22px; font-weight:800; overflow-wrap:anywhere; }
.reservation-content { padding:0 18px 18px; }
.reservation-customer { padding:14px; border-radius:16px; background:var(--secondary); }
.reservation-contact-heading { display:flex; align-items:center; gap:11px; }
.reservation-avatar { flex-shrink:0; display:grid; place-items:center; width:42px; height:46px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--primary); font-size:21px; font-weight:800; }
.reservation-contact-heading > div { min-width:0; flex:1; }
.reservation-contact-heading small { display:block; margin-bottom:4px; font-size:9px; letter-spacing:.08em; color:var(--muted-foreground); }
.reservation-contact-heading strong { display:block; font-size:18px; font-weight:800; overflow-wrap:anywhere; }
.reservation-contact-heading a { display:inline-block; margin-top:5px; color:var(--primary); font-size:14px; text-decoration:none; }
.reservation-contact-heading .subscriber-label { flex-shrink:0; border-radius:7px; background:#fff0e2; color:#945021; font-size:10px; padding:5px 7px; }
.reservation-customer #reservation-note { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--border); font-size:13px; }
.reservation-customer #reservation-note:before { content:'NOT'; display:block; margin-bottom:4px; font-size:9px; font-weight:750; color:var(--muted-foreground); letter-spacing:.08em; }
.reservation-dialog .reservation-money { display:block; margin:14px 0 0; padding:0; border:1px solid var(--border); border-radius:16px 16px 0 0; overflow:hidden; background:var(--muted); }
.reservation-totals { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:13px 15px; }
.reservation-totals > span + span { padding-left:15px; border-left:1px solid var(--border); }
.reservation-totals strong { font-size:19px; }
.reservation-balance { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 15px; background:var(--secondary); border-top:1px solid var(--border); box-shadow:inset 3px 0 #d8975f; }
.reservation-balance > span { color:var(--foreground); font-size:14px; font-weight:750; }
.reservation-balance > strong { margin:0; font-size:29px; font-weight:850; line-height:1.2; overflow-wrap:anywhere; text-align:right; }
.reservation-balance.is-settled { box-shadow:inset 3px 0 var(--primary); }
.reservation-balance.is-settled > strong { color:var(--primary); }
.reservation-payments { border:1px solid var(--border); border-top:0; border-radius:0 0 16px 16px; margin:0 0 16px; padding:12px 15px 4px; }
.reservation-payments h3 { margin:0 0 6px; font-size:12px; color:var(--muted-foreground); font-weight:750; }
.reservation-receipt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.reservation-receipt > div { min-width:0; }
.reservation-receipt strong { font-size:13px; font-weight:750; overflow-wrap:anywhere; }
.reservation-receipt strong span { font-weight:500; color:var(--muted-foreground); }
.reservation-receipt time { display:block; margin-top:4px; font-size:11px; color:var(--muted-foreground); }
.reservation-receipt > b { flex-shrink:0; font-size:17px; color:var(--primary); font-weight:800; }
.reservation-receipt.is-refund > b { color:var(--destructive); }
.reservation-payment-empty { margin:8px 0 12px; font-size:12px; color:var(--muted-foreground); }
.reservation-dialog .reservation-actions { padding:0; gap:8px; }
.reservation-dialog .reservation-actions button { min-height:46px; border-radius:11px; background:var(--card); font-size:13px; text-align:left; padding:10px 12px; }
.reservation-dialog .reservation-actions .reservation-payment-action { grid-column:1/-1; min-height:48px; background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); font-size:16px; text-align:center; }
.reservation-dialog .reservation-actions .text-danger { color:var(--destructive); }
.reservation-dialog #reservation-operation { border:1px solid var(--border); border-radius:16px; padding:14px; background:var(--muted); }
.reservation-dialog #operation-title { margin:0 0 12px; font-size:18px; }
.reservation-dialog #reservation-operation .modal-actions { margin:16px 0 0; padding:0; border:0; background:transparent; position:static; }
.reservation-dialog #reservation-confirm-text { line-height:1.65; font-size:13px; }
.reservation-dialog #receipt-error { line-height:1.6; font-size:13px; }
body[data-theme="dark"] .detail-day-number,body[data-theme="dark"] .detail-year { color:#ffdfbf; }
body[data-theme="dark"] .reservation-contact-heading .subscriber-label { background:#553a25; color:#ffdfbf; }
body[data-theme="dark"] .reservation-customer { background:#1c3529; }
body[data-theme="dark"] .reservation-balance { background:#20392c; }
@media(max-width:360px) { .reservation-dialog .reservation-context { margin-inline:12px; padding:11px; gap:11px; grid-template-columns:62px minmax(0,1fr); }.reservation-content { padding-inline:12px; }.detail-slot > b { font-size:20px; }.detail-slot > strong { font-size:20px; }.reservation-contact-heading { gap:8px; }.reservation-avatar { width:34px; }.reservation-balance > strong { font-size:25px; } }
/* Shared visual language across settings, staff, record details and other menu dialogs. */
.modal-card:not(.booking-dialog) { border-radius: 23px; background: var(--card); }
.modal-card:not(.booking-dialog) > h2 { margin: -22px -22px 22px; padding: 24px 65px 24px 22px; min-height: 76px; border-bottom: 3px solid #deac79; border-radius: 22px 22px 0 0; background: #103e30; color: white; font-size: 22px; }
.modal-card:not(.booking-dialog) > .modal-close { top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 12px; background: #ffffff18; color: white; }
.modal-card:not(.booking-dialog) .field input, .modal-card:not(.booking-dialog) .field select, .modal-card:not(.booking-dialog) .field textarea { min-height: 46px; border-radius: 11px; font-size: 16px; }
.field textarea { display: block; width: 100%; resize: vertical; padding: 11px; border: 1px solid var(--input); background: var(--card); color: var(--foreground); font: inherit; font-weight: 500; border-radius: 11px; }
.field textarea:focus { outline: 3px solid #0b8f651f; border-color: #0b8f65; }
.modal-card:not(.booking-dialog) .form-grid { gap: 13px; }
.settings-section > p { color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
.soft-panel { padding: 16px; margin: 14px 0; background: var(--secondary); border-radius: 16px; }
.soft-panel h3 { margin: 0 0 10px; font-size: 16px; }
.settings-list-item, .management-row { background: var(--muted); border-radius: 14px; }
.settings-dialog .modal-actions button { min-height: 46px; border-radius: 12px; }
.hours-court-selector { margin: 18px 0 22px; padding: 16px; border-radius: 16px; background: var(--secondary); border: 1px solid var(--border); box-shadow: inset 4px 0 #087a55; }
.hours-court-selector > span { color: var(--primary); font-size: 11px; letter-spacing: .055em; font-weight: 800; }
.hours-court-selector #hours-court { min-height: 54px; font-size: 20px; font-weight: 800; color: var(--foreground); }
#business-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.business-logo-row { display:flex; align-items:center; gap:15px; margin:18px 0; }
.business-logo-row > img,.business-logo-placeholder { width:76px; height:76px; object-fit:contain; border:1px solid var(--border); border-radius:16px; background:var(--muted); padding:8px; }
.business-logo-placeholder { display:grid; place-items:center; color:var(--primary); font-weight:800; font-size:28px; }
.business-logo-row > div > strong { display:block; font-size:15px; margin-bottom:9px; }
.business-logo-row > div > div { display:flex; align-items:center; gap:12px; }
.business-logo-row label { cursor:pointer; min-height:38px; font-size:12px; }
.business-logo-file { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.business-logo-row label:focus-within { outline:2px solid var(--primary); }
.business-logo-row button { background:transparent; border:0; font-size:12px; padding:8px; }
.business-branch-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 22px 0 12px; }
.business-branch-heading h3 { margin: 0 0 6px; font-size: 18px; }
.business-branch-heading p { margin: 0; line-height: 1.5; }
.business-branch-heading > button { flex-shrink: 0; }
.business-branch { background: var(--muted); border: 1px solid var(--border); }
.business-branch-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.business-branch-title h4 { margin: 0; font-size: 15px; }
.business-branch-title button { min-height: 40px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; font-weight: 700; }
.demo-option[hidden] { display: none; }
body[data-theme="dark"] .hours-court-selector select { background: var(--card); }
@media (max-width: 720px) {
  .modal-card:not(.booking-dialog) > h2 { margin: -19px -16px 20px; padding: 23px 66px 23px 18px; }
  .soft-panel { padding: 13px; }
  .business-branch-heading { align-items: flex-start; flex-direction: column; }
}
/* Premium, high-contrast application navigation without extra headings. */
.brand-mark { text-decoration:none; }
.brand-mark:hover { background:#58e4af; }
.menu-button { border:1px solid #ffffff22; background:#ffffff09; border-radius:11px; }
.menu-button[aria-expanded="true"] { background:#ffffff1c; border-color:#ffffff45; }
.main-menu { top:calc(100% + 8px); right:8px; width:min(356px,calc(100vw - 24px)); padding:10px; border:1px solid #486957; border-radius:19px; background:#103b2e; box-shadow:0 20px 65px #08231d55; animation:menu-enter .14s ease-out; scrollbar-width:thin; scrollbar-color:#4f7c62 transparent; }
.main-menu #management-menu > button,.main-menu #management-menu > a { display:flex; align-items:center; gap:13px; width:100%; min-height:48px; padding:12px 13px; margin:2px 0; color:#f1f8f3; border:1px solid transparent; border-radius:11px; font-size:15px; font-weight:650; text-decoration:none; line-height:1.3; text-align:left; }
.main-menu #management-menu > button:hover,.main-menu #management-menu > a:hover { background:#ffffff0e; border-color:#ffffff0b; }
.main-menu button[aria-current="page"] { background:#21875d36; border-color:#68b98b36!important; color:#c9f6db!important; }
.menu-item-icon { width:19px; height:19px; flex-shrink:0; stroke-width:1.8; color:#91b8a0; }
.main-menu button[aria-current="page"] .menu-item-icon { color:#97e9b7; }
.main-menu .menu-chevron { margin-left:auto; color:#93b6a0; }
.main-menu hr { margin:10px 9px; border:0; border-top:1px solid #ffffff12; }
.main-menu #settings-menu { margin:5px 2px 10px 21px; padding:6px 0 6px 8px; border-left:1px solid #5b8565; background:transparent; }
.main-menu #settings-menu > button { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px; border-radius:10px; color:#cbdfcf; font-size:13px; }
.main-menu #settings-menu .menu-item-icon { width:14px; height:14px; color:#83aa8c; }
.main-menu #management-menu > a { margin-top:9px; color:#b9ccc0; border-top:1px solid #ffffff18; border-radius:0 0 9px 9px; }
.auth-links { font-size:12px!important; text-align:center; }.auth-links a { color:var(--primary); text-decoration:none; }
@keyframes menu-enter { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
/* Blacklist: clear search focus, private local records, compact dated cards. */
.blacklist-page { padding:24px; background:var(--background); }
.blacklist-surface { width:min(1000px,100%); margin:auto; }
.blacklist-toolbar { position:relative; display:flex; align-items:center; gap:18px; min-height:115px; margin:0 0 22px; padding:24px; border-radius:23px; overflow:hidden; color:white; background:#103e30; box-shadow:0 10px 24px #103e300c; }
.blacklist-toolbar:after { content:''; position:absolute; z-index:0; right:80px; top:-85px; width:205px; height:205px; border:35px solid #80bf9620; border-radius:50%; pointer-events:none; }
.blacklist-heading,.blacklist-toolbar-actions { position:relative; z-index:1; }
.blacklist-heading > span,body[data-theme="dark"] .blacklist-heading > span { color:#96bba3; font-size:9px; letter-spacing:.12em; margin-bottom:7px; }
.blacklist-heading h2 { color:white; font-size:30px; letter-spacing:-.055em; }
.blacklist-heading-dot { color:#efb987; margin-left:3px; }
.blacklist-toolbar-actions { margin-left:auto; gap:8px; }
.blacklist-add { display:flex; align-items:center; gap:9px; min-height:46px; border:1px solid #bddcc8; border-radius:13px; background:#d3f1df; color:#17442c; padding-inline:16px; box-shadow:0 4px 15px #052d2020; font-size:13px; font-weight:800; }
.blacklist-add > span { font-size:23px; font-weight:400; line-height:1; }
.blacklist-theme { min-height:44px; border:1px solid #ffffff24; border-radius:12px; background:#ffffff0b; color:#c4dccd; font-size:11px; }
.blacklist-search-panel { padding:20px; background:var(--card); border:1px solid var(--border); border-radius:20px; box-shadow:0 6px 20px #163c3004; }
.blacklist-search-label { display:block; margin:0 0 11px 2px; color:var(--muted-foreground); font-size:10px; letter-spacing:.08em; font-weight:800; }
.blacklist-search-box { min-height:54px; border:1px solid var(--input); border-radius:13px; background:var(--muted); box-shadow:none; padding:0 15px; }
.blacklist-search-box input { height:54px; font-size:17px; letter-spacing:.005em; }
.blacklist-search-box svg { width:21px; color:var(--primary); }
.blacklist-scope-row { padding:0 3px; margin:17px 0 24px; gap:12px; }
.blacklist-scope-options button { border-radius:10px; min-height:40px; padding:0 15px; font-size:12px; box-shadow:none!important; }
.blacklist-records-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:22px 3px 12px; }
.blacklist-records-heading h3 { margin:0; font-size:17px; color:var(--foreground); letter-spacing:-.02em; }
.blacklist-records-heading > span { color:var(--muted-foreground); font-size:10px; background:var(--muted); padding:6px 9px; border-radius:8px; }
.blacklist-list { gap:9px; }
.blacklist-entry-origin { align-self:center; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background:var(--muted); color:var(--muted-foreground); font-size:10px; white-space:nowrap; }
.blacklist-entry { grid-template-columns:38px minmax(0,1fr) auto; gap:13px; min-height:91px; padding:15px 17px; border-radius:17px; border-color:var(--border); background:var(--card); box-shadow:0 3px 13px #163c3003; }
.blacklist-entry-mark { width:38px; height:43px; border-radius:11px; background:#fff0df; border:1px solid #f0dcc4; color:#a57442; font-size:23px; font-weight:700; }
.blacklist-entry-copy strong { font-size:17px; letter-spacing:-.02em; color:var(--foreground); }
.blacklist-entry-copy p { margin:6px 0; font-size:12px; line-height:1.4; color:var(--muted-foreground); }
.blacklist-entry-copy time { display:block; margin-top:5px; color:var(--muted-foreground); font-size:10px; }
.blacklist-entry-actions { display:flex; gap:6px; }
.blacklist-entry-actions button { min-height:42px; min-width:55px; padding:0 10px; border-radius:10px; border-color:var(--border); background:var(--muted); font-size:11px; font-weight:700; }
.blacklist-entry-actions .text-danger { background:#fbf0ea; border-color:#eedbd0; color:#a66b53; }
.blacklist-query-result { margin-top:15px; border-radius:16px; min-height:75px; padding:15px; background:#fff3e5; border-color:#eed3b2; }
.blacklist-query-result.is-clear { background:var(--secondary); border-color:var(--border); }
.blacklist-empty { padding:40px 15px; border:1px dashed var(--border); border-radius:17px; background:var(--card); }
body[data-theme="dark"] .blacklist-entry-mark { background:#493a24; border-color:#645337; color:#e5c28e; }
body[data-theme="dark"] .blacklist-entry-actions .text-danger { background:#422f27; border-color:#584234; color:#e4b79a; }
@media(max-width:720px) {
  .menu-button { width:34px; height:34px; }
  .main-menu { right:8px; top:calc(100% + 7px); max-height:calc(var(--app-height) - 78px); }
  .blacklist-page { padding:14px 12px; }
  .blacklist-toolbar { min-height:107px; margin-bottom:16px; padding:20px 18px; border-radius:19px; flex-wrap:wrap; gap:14px; }
  .blacklist-heading h2 { font-size:29px; }
  .blacklist-toolbar-actions { margin:0; }
  .blacklist-add { min-height:43px; padding-inline:14px; font-size:12px; }
  .blacklist-search-panel { padding:15px; border-radius:17px; }
  .blacklist-search-box { min-height:50px; padding:0 12px; }
  .blacklist-search-box input { height:50px; font-size:16px; }
  .blacklist-scope-row { margin:13px 0 18px; gap:9px; }
  .blacklist-scope-options button { min-height:38px; padding-inline:10px; font-size:11px; }
  .blacklist-records-heading { margin-top:18px; }
  .blacklist-entry { grid-template-columns:32px minmax(0,1fr) auto; min-height:95px; padding:12px; gap:9px; border-radius:16px; }
  .blacklist-entry-mark { width:32px; height:38px; font-size:21px; }
  .blacklist-entry-copy strong { font-size:15px; }
  .blacklist-entry-copy p { font-size:11px; }
  .blacklist-entry-copy time { font-size:9px; }
  .blacklist-entry-actions { flex-direction:column; gap:4px; }
  .blacklist-entry-actions button { min-height:34px; padding:0 9px; font-size:10px; }
}

/* Statistics, public visibility settings and customer confirmation state. */
.statistics-page{flex:1;min-height:0;overflow-y:auto;padding:24px;background:var(--background);color:var(--foreground);border-radius:0 0 16px 16px}.statistics-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.statistics-toolbar>div>span,.statistics-block-heading span{display:block;color:#5f8d78;font-size:9px;font-weight:850;letter-spacing:.14em}.statistics-toolbar h2{margin:5px 0 2px;font-size:29px;letter-spacing:-.04em}.statistics-toolbar p{margin:0;color:var(--muted-foreground);font-size:12px}.statistics-toolbar label{display:grid;gap:6px;color:var(--muted-foreground);font-size:11px;font-weight:750}.statistics-toolbar select{min-height:42px;padding:0 34px 0 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--foreground);font-weight:750}.statistics-status{margin:20px 0;color:var(--muted-foreground);font-size:13px}.statistics-summary{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-bottom:16px}.statistics-summary article{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 20px;padding:22px;border:1px solid #cfe0d6;border-radius:18px;background:linear-gradient(135deg,#e2f2e8,#f7fbf8)}.statistics-summary article.is-cancellation{border-color:#ecd7c2;background:linear-gradient(135deg,#fff0e2,#fffaf4)}.statistics-summary span{font-size:12px;font-weight:800;color:#517060}.statistics-summary strong{grid-row:1/3;grid-column:2;font-size:38px;line-height:1;color:#087a55;letter-spacing:-.05em}.statistics-summary .is-cancellation strong{color:#b36028}.statistics-summary small{font-size:11px;color:#75847d}.statistics-block{padding:20px;margin-top:14px;border:1px solid var(--border);border-radius:18px;background:var(--card)}.statistics-block-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.statistics-block-heading h3{margin:5px 0 0;font-size:20px;letter-spacing:-.03em}.statistics-block-heading p{max-width:270px;margin:0;color:var(--muted-foreground);font-size:11px;line-height:1.5}.statistics-bars{display:grid;gap:9px}.statistics-bar-row{display:grid;grid-template-columns:minmax(130px,190px) minmax(100px,1fr) 55px;align-items:center;gap:12px}.statistics-bar-row>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.statistics-bar-row strong{font-size:12px}.statistics-bar-row span{color:var(--muted-foreground);font-size:10px;white-space:nowrap}.statistics-bar-row>b{text-align:right;font-size:12px}.statistics-bar-track{height:9px;overflow:hidden;border-radius:99px;background:var(--muted)}.statistics-bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0b8b63,#36c991)}.cancellations-block .statistics-bar-track i{background:linear-gradient(90deg,#c76d30,#f2a35d)}.cancellation-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px}.cancellation-columns h4{margin:0 0 12px;font-size:13px}.cancellation-columns>div>div{display:grid;gap:9px}.cancellation-columns .statistics-bar-row{grid-template-columns:minmax(115px,150px) minmax(70px,1fr) 48px}.statistics-empty{margin:0;padding:13px;border-radius:10px;background:var(--muted);color:var(--muted-foreground);font-size:12px}.statistics-note{margin:13px 4px 0;color:var(--muted-foreground);font-size:10px}.business-sharing{display:grid;gap:16px;margin-top:18px}.business-sharing h3{margin:0}.public-availability-option{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer}.public-availability-option input{width:18px;height:18px;margin:2px 0 0;accent-color:#087a55}.public-availability-option span{display:grid;gap:4px}.public-availability-option strong{font-size:13px}.public-availability-option small{color:var(--muted-foreground);font-size:11px;line-height:1.5}.reservation-response{display:grid;gap:3px;margin:10px 0;padding:12px 14px;border:1px solid #b8dec9;border-radius:12px;background:#e9f7ef;color:#176846}.reservation-response.is-cancel-request{border-color:#efc89e;background:#fff2e5;color:#9a571f}.reservation-response strong{font-size:13px}.reservation-response span{font-size:11px;line-height:1.45}.reservation-actions [data-reservation-action="confirmation"]{border-color:#8dccb1;background:#e9f7ef;color:#087a55}
.statistics-period-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-width:520px;padding:5px;border:1px solid var(--border);border-radius:14px;background:var(--muted)}.statistics-period-tabs button{min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted-foreground);font-weight:800}.statistics-period-tabs button[aria-selected="true"]{background:var(--primary);color:var(--primary-foreground);box-shadow:0 5px 15px rgb(7 135 97 / 18%)}.statistics-period-picker{display:grid;grid-template-columns:44px minmax(150px,260px) auto 44px;align-items:end;gap:8px;margin:10px 0 20px}.statistics-period-picker>button{min-height:44px;padding:0 13px;border:1px solid var(--border);border-radius:11px;background:var(--card);color:var(--primary);font-size:22px;font-weight:800}.statistics-period-picker>button:disabled{opacity:.35}.statistics-period-picker .statistics-current{font-size:12px;white-space:nowrap}.statistics-period-picker label{display:grid;gap:4px}.statistics-period-picker label span{color:var(--muted-foreground);font-size:10px;font-weight:800}.statistics-period-picker input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:11px;background:var(--card);color:var(--foreground);font-weight:800;color-scheme:light}
.move-dialog{width:min(930px,100%);height:min(780px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);display:flex;flex-direction:column;overflow:hidden;padding:0;border-radius:20px}.move-header{position:relative;display:flex;justify-content:space-between;gap:20px;padding:18px 22px 14px;background:#0c3c30;color:#fff}.move-header>div>span{font-size:9px;font-weight:850;letter-spacing:.14em;color:#8eddbf}.move-header h2{margin:5px 0 3px;font-size:22px}.move-header p{margin:0;color:#bdd6cb;font-size:11px}.move-header .modal-close{position:static;flex:0 0 auto;background:rgb(255 255 255 / 10%);color:#fff}.move-week-controls{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:8px 12px;background:#f3f7f5}.move-week-controls>button{height:40px;border:1px solid #dbe5df;border-radius:10px;background:#fff;color:#078761;font-size:23px}.move-week-controls>div{display:grid;text-align:center}.move-week-controls strong{font-size:14px}.move-week-controls small{margin-top:2px;color:var(--muted-foreground);font-size:10px}.move-status{min-height:0;margin:0;padding:0 14px;background:#f3f7f5;color:var(--muted-foreground);font-size:11px}.move-status:not(:empty){min-height:31px;padding-block:8px}.move-schedule-panel{flex:1;min-height:0;overflow:hidden;border-top:1px solid var(--border);background:var(--card)}.move-schedule-grid{height:100%;--slot-height:52px}.move-schedule-grid .slot.is-move-available{font-weight:850;color:#087a55}.move-schedule-grid .slot.is-move-current{background:#fff1df!important;color:#a25824!important}.move-schedule-grid .slot.is-move-past{background:var(--muted)!important;color:var(--muted-foreground)!important;opacity:.7}.move-court-switcher{border-radius:0;box-shadow:0 -6px 20px rgb(21 54 44 / 14%)}
body[data-theme="dark"] .statistics-summary article{border-color:#315140;background:linear-gradient(135deg,#1d3b2d,#172e24)}body[data-theme="dark"] .statistics-summary article.is-cancellation{border-color:#60452f;background:linear-gradient(135deg,#442f21,#2e251d)}body[data-theme="dark"] .statistics-summary span{color:#b6cfc2}body[data-theme="dark"] .business-sharing,body[data-theme="dark"] .public-availability-option{background:var(--card)}body[data-theme="dark"] .reservation-response{border-color:#315b45;background:#1d402f;color:#aee8ca}body[data-theme="dark"] .reservation-response.is-cancel-request{border-color:#6c4d31;background:#463020;color:#f1c18f}
body[data-theme="dark"] .statistics-period-picker input{color-scheme:dark}body[data-theme="dark"] .move-week-controls,body[data-theme="dark"] .move-status{background:#10231b}body[data-theme="dark"] .move-week-controls>button{background:#183026;border-color:#2b4539;color:#75ddb5}body[data-theme="dark"] .move-header{background:#071f18}
@media(max-width:720px){.statistics-page{padding:16px 12px;border-radius:0}.statistics-toolbar{align-items:start}.statistics-toolbar h2{font-size:25px}.statistics-period-tabs{max-width:none}.statistics-period-picker{grid-template-columns:42px minmax(0,1fr) 42px}.statistics-period-picker .statistics-current{grid-column:1/-1;grid-row:2}.statistics-summary{grid-template-columns:1fr}.statistics-summary strong{font-size:34px}.statistics-block{padding:16px 13px}.statistics-block-heading{display:block}.statistics-block-heading p{margin-top:7px}.statistics-bar-row{grid-template-columns:105px minmax(70px,1fr) 43px;gap:8px}.statistics-bar-row>div:first-child{display:grid;gap:2px}.statistics-bar-row span{font-size:8px}.cancellation-columns{grid-template-columns:1fr;gap:22px}.cancellation-columns .statistics-bar-row{grid-template-columns:105px minmax(70px,1fr) 43px}.move-dialog{width:100%;height:calc(100dvh - 8px);max-height:calc(100dvh - 8px);border-radius:16px}.move-header{padding:14px 16px 12px}.move-header h2{font-size:19px}.move-header p{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.move-schedule-grid{grid-template-columns:57px repeat(7,minmax(0,1fr));--slot-height:51px}.move-schedule-grid .slot span{font-size:10px}.move-court-switcher{border:0}}
@media(prefers-reduced-motion:reduce) { .main-menu { animation:none; } }
.bank-eyebrow { color:var(--primary); font-size:10px; font-weight:800; letter-spacing:.12em; }
.bank-settings-intro { display:flex; align-items:center; gap:16px; justify-content:space-between; margin:6px 0 15px; }
.bank-settings-intro h3 { margin:8px 0; font-size:22px; }
.bank-settings-intro p { margin:0; max-width:340px; }
.bank-settings-intro > button { flex-shrink:0; min-height:44px; }
.bank-account-card { margin:12px 0; padding:20px; border:1px solid var(--border); border-radius:18px; background:var(--card); }
.bank-account-heading { display:flex; gap:12px; align-items:center; }
.bank-account-heading > div { min-width:0; flex:1; }
.bank-account-heading strong { display:block; font-size:16px; overflow-wrap:anywhere; }
.bank-account-heading > div > span { display:block; margin-top:5px; font-size:13px; color:var(--muted-foreground); overflow-wrap:anywhere; }
.bank-account-icon { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:12px; color:var(--primary); background:var(--secondary); }
.bank-account-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.bank-account-iban { margin:17px 0; padding:12px; border-radius:10px; background:var(--muted); font:800 16px/1.7 "Segoe UI",Arial,sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; overflow-x:auto; user-select:all; }
.bank-account-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bank-account-actions button { min-height:40px; padding:9px 12px; font-size:12px; }
.bank-account-actions .text-danger { margin-left:auto; border:0; background:transparent; }
.bank-empty { padding:32px 15px; text-align:center; border:1px dashed var(--border); border-radius:16px; color:var(--muted-foreground); }
.bank-editor { width:min(500px,calc(100vw - 28px)); }
.bank-editor > h2 { padding-right:35px; }
.bank-editor .soft-panel { padding:17px; margin:18px 0; }
.bank-editor .field small { font-size:10px; font-weight:500; color:var(--muted-foreground); }
.bank-iban-input { display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.bank-iban-input:focus-within { outline:2px solid var(--primary); outline-offset:1px; }
.bank-iban-prefix { padding-left:12px; font-weight:800; font-size:16px; }
.bank-editor #bank-iban { min-width:0; flex:1; width:100%; border:0; border-radius:10px; background:transparent; padding-left:0; font:700 16px "Segoe UI",Arial,sans-serif; font-variant-numeric:tabular-nums; outline:none; box-shadow:none; }
#bank-form-error { padding:12px; border-radius:10px; background:#fff0e7; color:#945437; font-size:12px; line-height:1.6; }
.bank-display { width:min(450px,calc(100vw - 28px)); padding:27px; }
.bank-display > h2 { padding-right:30px; margin-top:10px; font-size:25px; }
.bank-recipient-panel,.bank-iban-panel { padding:15px 17px; margin:13px 0; background:var(--secondary); border:1px solid var(--border); border-radius:14px; }
.bank-iban-panel { background:var(--muted); }
.bank-display small { display:block; margin-bottom:9px; font-size:9px; letter-spacing:.1em; color:var(--muted-foreground); }
#bank-display-holder { display:block; font-size:22px; line-height:1.4; overflow-wrap:anywhere; user-select:all; }
#bank-display-iban { display:block; font:800 19px/1.65 Consolas,monospace; overflow-wrap:normal; word-break:normal; user-select:all; }
.bank-display-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:19px; }
.bank-display-actions button { padding:12px 8px; min-height:44px; font-size:12px; }
.bank-display-actions .primary-button { grid-column:1/-1; }
@media(max-width:520px) { .bank-settings-intro { flex-wrap:wrap; gap:13px; }.bank-account-card { padding:15px; }.bank-account-iban { font-size:15px; }.bank-account-actions button { padding-inline:10px; font-size:11px; }.bank-display { padding:24px 20px; } }
@media (max-width: 360px) {
  .booking-dialog .booking-context { grid-template-columns: 59px minmax(0, 1fr); gap: 10px; margin-left: 12px; margin-right: 12px; padding: 12px; }
  .booking-dialog #booking-form { padding-left: 12px; padding-right: 12px; }
  .booking-dialog #selected-day { font-size: 18px; }
  .booking-dialog #selected-time { font-size: 20px; }
  .booking-dialog #selected-court { font-size: 22px; }
  .booking-dialog .booking-customer-panel, .booking-dialog .booking-payment { padding: 11px; }
  .booking-dialog .modal-actions { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}
/* Global blacklist backgrounds: same layout; only the page canvas changes. */
#blacklist-page[data-background]:not([data-background="none"]) {
  background-color:var(--background);
  background-image:linear-gradient(#f3f6f52e,#f3f6f52e),var(--blacklist-background);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
#blacklist-page[data-background]:not([data-background="none"]) .blacklist-records-heading {
  background:#fffffff0; box-shadow:0 0 0 8px #fffffff0; border-radius:5px;
}
#blacklist-page[data-background]:not([data-background="none"]) .blacklist-scope-options button:not([aria-pressed="true"]) { background:#fffffff5; }
body[data-theme="dark"] #blacklist-page[data-background]:not([data-background="none"]) {
  background-image:linear-gradient(#081b18b3,#081b18b3),var(--blacklist-background);
}
body[data-theme="dark"] #blacklist-page[data-background]:not([data-background="none"]) .blacklist-records-heading {
  background:#10251ff0; box-shadow:0 0 0 8px #10251ff0;
}
body[data-theme="dark"] #blacklist-page[data-background]:not([data-background="none"]) .blacklist-scope-options button:not([aria-pressed="true"]) { background:#10251ff5; }
.blacklist-preview-body .reservation-app { width:100%; padding:0; }
.blacklist-preview-body .app-header { border-radius:0; }
.blacklist-preview-body .preview-readonly { font-size:10px; color:#bed6cc; padding:8px; }
.blacklist-preview-body .blacklist-page { border-radius:0; }
.blacklist-entry { grid-template-columns:28px minmax(0,1fr) auto; gap:11px; }
.blacklist-entry .blacklist-entry-mark,body[data-theme="dark"] .blacklist-entry .blacklist-entry-mark {
  width:28px;height:34px;border:0;background:transparent;color:#4d7965;
}
.blacklist-entry-mark svg { width:21px;height:21px;stroke-width:1.7; }
.facility-background-settings { margin-top:24px;padding-top:18px;border-top:1px solid var(--border); }
.facility-background-settings h3 { margin:0 0 14px;font-size:17px; }
.offline-compare-dialog { width:min(760px,calc(100vw - 20px));height:min(950px,calc(var(--app-height,100dvh) - 20px));display:flex;flex-direction:column;overflow:hidden; }
.offline-compare-dialog > h2,.offline-compare-dialog > p { flex-shrink:0; }
#offline-compare-fields { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; }
.offline-compare-heading,.offline-compare-row { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px; }
.offline-compare-heading { position:sticky;top:0;z-index:1;padding:12px 10px;background:var(--primary);color:var(--primary-foreground);border-radius:12px 12px 0 0;font-size:12px; }
.offline-compare-row { padding:11px 10px;border-bottom:1px solid var(--border);background:var(--card); }
.offline-compare-row.is-different { background:#fff0da;color:#633d14; }
body[data-theme="dark"] .offline-compare-row.is-different { background:#493823;color:#ffe3ba; }
.offline-compare-row small { display:block;font-size:10px;opacity:.7;margin-bottom:5px; }
.offline-compare-row strong { display:block;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere; }
.offline-compare-actions { flex-shrink:0;display:grid;gap:8px;padding-top:12px;background:var(--card); }
.offline-compare-actions button { min-height:44px; }
#export-offline-queue { margin:12px 8px 0 0; }
.facility-background-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.facility-background-option { padding:5px;border:2px solid var(--border);border-radius:14px;background:var(--card);color:var(--foreground);text-align:center; }
.facility-background-option[aria-pressed="true"] { border-color:var(--primary);box-shadow:0 0 0 3px rgb(8 122 85 / 12%); }
.facility-background-option img { display:block;width:100%;height:140px;object-fit:cover;border-radius:9px; }
.facility-background-option span { display:block;padding:10px 0 7px;font-size:12px;font-weight:700; }
@media(max-width:480px) { .facility-background-option img { height:116px; }.facility-background-option span { font-size:10px; } }
.blacklist-search-panel .sr-only { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
body[data-theme="dark"] .blacklist-entry .blacklist-entry-mark { color:#a5c8b4; }
#blacklist-page[data-background]:not([data-background="none"]) .blacklist-entry {
  background:rgb(255 255 255 / 76%);border-color:rgb(255 255 255 / 60%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#blacklist-page[data-background]:not([data-background="none"]) .blacklist-entry:hover { background:rgb(255 255 255 / 84%); }
body[data-theme="dark"] #blacklist-page[data-background]:not([data-background="none"]) .blacklist-entry {
  background:rgb(16 37 31 / 78%);border-color:rgb(166 202 182 / 20%);
}
body[data-theme="dark"] #blacklist-page[data-background]:not([data-background="none"]) .blacklist-entry:hover { background:rgb(16 37 31 / 86%); }
.blacklist-search-box .blacklist-quick-add {
  display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;
  border:1px solid #b7d9c7;border-radius:50%;background:#dff1e7;color:#126d49;
}
.blacklist-search-box .blacklist-quick-add svg { width:22px;height:22px;color:inherit;stroke-width:2.2; }
body[data-theme="dark"] .blacklist-search-box .blacklist-quick-add { border-color:#3f6b54;background:#254b38;color:#c4eed6; }
.blacklist-search-box .blacklist-search-clear { display:grid;place-items:center;flex:0 0 32px;width:32px;height:40px;border:0;padding:6px;background:transparent;color:var(--muted-foreground);border-radius:50%; }
.blacklist-search-box .blacklist-search-clear svg { width:17px;height:17px;color:inherit;stroke-width:2; }
.blacklist-search-box input::-webkit-search-cancel-button { -webkit-appearance:none; }
.blacklist-search-summary { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 1px 14px;padding:13px 15px;border:1px solid #c5dfd0;border-left:4px solid var(--primary);border-radius:14px;background:var(--card); }
.blacklist-search-summary > div { min-width:0;display:grid;gap:4px; }
.blacklist-search-summary strong { color:var(--foreground);font-size:14px; }
.blacklist-search-summary #blacklist-search-query { color:var(--muted-foreground);font-size:12px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums; }
.blacklist-search-summary small { max-width:130px;flex-shrink:0;text-align:right;color:var(--primary);font-size:11px;font-weight:700;line-height:1.5; }
.blacklist-entry-copy strong mark { padding:1px 0;border-radius:3px;background:#ffe0ad;color:#603b13;box-shadow:0 0 0 2px #ffe0ad; }
.blacklist-search-origin { display:table;margin-top:6px;padding:3px 7px;border-radius:6px;background:#fff0de;color:#915622;font-size:9px;font-weight:750;line-height:1.4; }
.blacklist-search-origin.is-own { background:#def1e7;color:#176244; }
body[data-theme="dark"] .blacklist-entry-copy strong mark { background:#f2c383;color:#34220e;box-shadow:0 0 0 2px #f2c383; }
body[data-theme="dark"] .blacklist-search-origin { background:#4c3825;color:#f4c28d; }
body[data-theme="dark"] .blacklist-search-origin.is-own { background:#244d3b;color:#b7e2ca; }
body[data-theme="dark"] .blacklist-search-summary small { color:#9ed8bb; }
@media(max-width:720px) {
  .blacklist-entry { grid-template-columns:24px minmax(0,1fr) auto;gap:9px; }
  .blacklist-entry .blacklist-entry-mark { width:24px; }
}