/* Shared production UI from the reviewed prototype. No navigation-rail overrides. */
.bl-select-list .bl-select-option {min-width:0;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
#appointment-dialog #appt-status-actions {display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
#appointment-dialog .booking-status-option {--status-ink:#c5c9d2;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--status-ink) 45%,transparent);border-radius:10px;background:color-mix(in srgb,var(--status-ink) 7%,var(--ws-panel));color:var(--status-ink);font-size:14px;font-weight:550;line-height:1.4}
#appointment-dialog .booking-status-option[data-status=pending] {--status-ink:#e7c978}
#appointment-dialog .booking-status-option[data-status=confirmed] {--status-ink:#92c2f3}
#appointment-dialog .booking-status-option[data-status=arrived] {--status-ink:#86d6ae}
#appointment-dialog .booking-status-option[data-status=noshow] {--status-ink:#f1a0a5}
:root[data-theme=light] #appointment-dialog .booking-status-option {--status-ink:#566171}
:root[data-theme=light] #appointment-dialog .booking-status-option[data-status=pending] {--status-ink:#805c12}
:root[data-theme=light] #appointment-dialog .booking-status-option[data-status=confirmed] {--status-ink:#235e99}
:root[data-theme=light] #appointment-dialog .booking-status-option[data-status=arrived] {--status-ink:#246847}
:root[data-theme=light] #appointment-dialog .booking-status-option[data-status=noshow] {--status-ink:#a03443}
#appointment-dialog .booking-status-option:hover {background:color-mix(in srgb,var(--status-ink) 15%,var(--ws-panel))}
#appointment-dialog .booking-status-option[aria-pressed=true] {border-color:var(--status-ink);box-shadow:inset 0 0 0 1px var(--status-ink);background:color-mix(in srgb,var(--status-ink) 20%,var(--ws-panel));font-weight:700}
#appointment-dialog .booking-status-check {visibility:hidden;display:inline-block;width:14px;flex-shrink:0}
#appointment-dialog [aria-pressed=true] .booking-status-check {visibility:visible}
#appointment-dialog .booking-status-note {font-size:13px;line-height:1.5;color:var(--ws-muted);margin:8px 0 16px}
#main-content, body > dialog {
  --ws-bg:#101216; --ws-panel:#22262e; --ws-raised:#2a2f39; --ws-input:#191c22;
  --ws-line:#3b424f; --ws-line-soft:#2d333e; --ws-ink:#f3f3f5; --ws-muted:#b7bdc9;
  --ws-shadow:0 5px 20px #0000001a;
}
:root[data-theme="light"] :is(#main-content,body > dialog) {
  --ws-bg:#f5f3ef; --ws-panel:#fff; --ws-raised:#f8f6f2; --ws-input:#fff;
  --ws-line:#bfc6cf; --ws-line-soft:#d6dbe1; --ws-ink:#222832; --ws-muted:#495463;
  --ws-shadow:0 5px 20px #332c2208;
}
#app #main-content > .view:not(#view-calendar) {font-size:15px;line-height:1.5}
#app #main-content #view-clients {--ws-bg:inherit;--ws-panel:inherit;--ws-raised:inherit;--ws-input:inherit;--ws-line:inherit;--ws-line-soft:inherit;--ws-muted:inherit}
#app #main-content > .view:not(#view-calendar) .page-heading {margin-bottom:20px;padding:0 0 18px;gap:16px;align-items:center}
#app #main-content > .view:not(#view-calendar) .page-heading h1 {font-size:28px;line-height:1.3;letter-spacing:-.7px;margin:0 0 5px;font-weight:700}
#app #main-content > .view:not(#view-calendar) .page-heading p {font-size:14px;line-height:1.5}
#app #main-content > .view:not(#view-calendar) .page-heading::after {display:none}
#app #main-content > .view:not(#view-calendar) .page-heading :is(button.primary,#new-client-btn) {min-height:42px;padding:10px 16px;font-size:14px;border-radius:10px;white-space:nowrap}
.page-actions {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#app #main-content > .view:not(#view-calendar) :is(.toolbar,.table-wrap,.report-section,.settings-section,.card) {background:var(--ws-panel);border-radius:16px;box-shadow:var(--ws-shadow)}
#app #main-content > .view:not(#view-calendar) .toolbar {padding:14px;gap:12px;margin-bottom:18px}
#app #main-content > .view:not(#view-calendar) :is(input:not([type=checkbox],[type=radio],[type=color]),select,.bl-select-trigger,.date-display) {min-height:42px;font-size:14px}
#app #main-content > .view:not(#view-calendar) :is(th,td) {padding:13px 14px;font-size:14px}
#app #main-content > .view:not(#view-calendar) th {font-size:12.5px;font-weight:600;letter-spacing:.1px;height:44px;padding-block:10px}
#app #main-content > .view:not(#view-calendar) td {line-height:1.5}
#app #main-content > .view:not(#view-calendar) .table-actions .ghost {font-size:13px;padding:7px 9px;min-height:34px}
#app #main-content > .view:not(#view-calendar) :is(.report-section,.settings-section) {padding:20px;margin-top:18px}
#app #main-content > .view:not(#view-calendar) :is(.report-section,.settings-section) h3 {font-size:18px;letter-spacing:-.25px}
#app #main-content > .view:not(#view-calendar) .card {padding:18px}
#app #main-content > .view:not(#view-calendar) .card .value {font-size:29px;letter-spacing:-.7px}
#app #main-content > .view:not(#view-calendar) .card .label {font-size:13px}
#app #main-content #services-list.services-groups {background:none;border:0;box-shadow:none}
#app #main-content #services-list .service-group {border-radius:16px;margin-bottom:18px;box-shadow:var(--ws-shadow)}
#app #main-content #services-list .service-group-header {padding:16px 18px;background:var(--ws-raised)}
#app #main-content #services-list .service-group-header h3 {font-size:18px}
#app #main-content #services-list tbody td {height:56px}
#app #main-content #view-clients .clients-level-card {padding:16px;min-height:96px;box-shadow:var(--ws-shadow)}
#app #main-content #view-clients .clients-level-copy strong {font-size:16px}
#app #main-content #view-clients .clients-level-number strong {font-size:25px}
#app #main-content #view-clients .clients-eyebrow {font-size:11px;margin-bottom:6px}
#app #main-content #view-clients .client-section-nav {background:transparent;border-radius:0;box-shadow:none}
#app #main-content #view-clients .premium-category {padding:20px;gap:18px;border-radius:16px}
#app #main-content #view-clients .premium-category h3 {font-size:24px}
#app #main-content #view-clients .premium-category-count strong {font-size:30px}
#app #main-content #view-clients .loyalty-category-grid {gap:14px}
#app #main-content #view-settings .settings-grid {gap:16px}
#app #main-content #view-settings .settings-section:first-child {margin-top:0}
.abonement-overview {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.abonement-overview > div {padding:17px 18px;background:var(--ws-panel);border:1px solid var(--ws-line-soft);border-radius:14px;box-shadow:var(--ws-shadow);min-width:0}
.abonement-overview span {display:block;color:var(--ws-muted);font-size:13px;margin-bottom:7px}
.abonement-overview strong {font:650 26px/1.3 var(--font-heading);font-variant-numeric:tabular-nums;color:var(--ws-ink);overflow-wrap:anywhere}
.abonement-overview .has-debt strong {color:var(--ws-red)}
.list-scope-note {color:var(--ws-muted);font-size:13px;margin:0 0 12px}
#app #main-content #view-abonements .premium-sessions strong {font-size:22px}
#app #main-content #view-abonements .table-actions {min-width:165px}
#app #main-content #view-abonements .abonement-row-actions {display:block;margin-top:6px}
#app #main-content #view-abonements .abonement-row-actions summary {cursor:pointer;font-size:13px;line-height:1.5;color:var(--ws-muted);padding:5px 0}
#app #main-content #view-abonements .abonement-row-actions > div {display:grid;gap:6px;margin-top:8px}
#app #main-content #view-abonements .ab-pay-btn {background:var(--accent);color:#fff;border-color:var(--accent)}
#app #main-content :is(#view-abonements,#view-staff) > .toolbar {background:transparent;box-shadow:none;border:0;padding:0}
body > dialog {background:var(--ws-panel);color:var(--ws-ink);border-color:var(--ws-line);border-radius:20px;font-size:14px}
body > dialog :is(.dialog-header,.dialog-footer) {background:var(--ws-raised);border-color:var(--ws-line-soft)}
body > dialog .dialog-header h2 {font:700 23px/1.35 var(--font-heading);letter-spacing:-.5px}
body > dialog :is(.dialog-field-caption,.field-label,.field-hint,.muted) {color:var(--ws-muted)}
body > dialog .dialog-field-caption {font-size:13px;line-height:1.45}
body > dialog :is(input:not([type=checkbox],[type=radio],[type=color],[type=hidden]),select,textarea,.bl-select-trigger) {background:var(--ws-input);color:var(--ws-ink);border-color:var(--ws-line);font-size:14px;border-radius:10px}
body > dialog :is(input:not([type=checkbox],[type=radio],[type=color],[type=hidden]),select,.bl-select-trigger) {min-height:40px}
body > dialog :is(.dialog-body,.client-drawer-body) {scrollbar-width:thin}
body > dialog :is(.dialog-footer button,.dialog-footer .primary) {font-size:14px;min-height:42px;border-radius:10px}
body > dialog :is(.appointment-item,.appt-details-section,.appointment-payment-panel) {background:var(--ws-panel);border-color:var(--ws-line-soft);border-radius:14px}
body > dialog#appointment-dialog :is(.booking-section-title,.appointment-item-head strong) {font-size:15px}
body > dialog#client-drawer .client-drawer-title {font-size:24px}
#view-calendar .calendar-density-hint {font-size:12px;line-height:1.5;color:var(--text-muted);margin:0}
#view-calendar #calendar-grid.is-fit-dense .cal-time.minor .cal-time-label {visibility:hidden}
#view-calendar #calendar-grid.is-fit-dense .appt.is-hour .appt-client-link {display:block}
#view-calendar #calendar-grid.is-fit-dense .appt.is-hour .appt-payment-chip {display:block}
#app #main-content :is(button,input,select,summary):focus-visible,body > dialog :is(button,input,select,summary):focus-visible {outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px) {
  #app #main-content > .view:not(#view-calendar) .page-heading {flex-wrap:wrap;align-items:flex-start;gap:12px}
  #app #main-content > .view:not(#view-calendar) .page-heading h1 {font-size:25px}
  #app #main-content > .view:not(#view-calendar) :is(.report-section,.settings-section) {padding:16px}
  .abonement-overview {grid-template-columns:1fr;gap:8px}
  .abonement-overview > div {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px}
  .abonement-overview span {margin:0}
  .abonement-overview strong {font-size:23px}
  body > dialog .dialog-header h2 {font-size:21px}
}