/* V7 visual system, adapted to the production CRM's existing controls and workflows. */
:root {
 --v7-bg:#18181f;--v7-surface:#25252c;--v7-panel:#2c2b34;--v7-raised:#33323d;
 --v7-input:#202027;--v7-nav:#1d1c24;--v7-ink:#f4f2f3;--v7-muted:#c1bdc4;
 --v7-line:#46434f;--v7-divider:#36343e;--v7-wine:#49182c;
 --v7-brand:linear-gradient(112deg,#49182c,#8c2038 54%,#c13338);
 --v7-section-header:linear-gradient(112deg,#49182c,#782336);--v7-section-header-line:#9b4055;
 --v7-planned-bg:#5b4426;--v7-planned-line:#bb9354;--v7-planned-ink:#fff5e3;
 --bg-primary:var(--v7-bg);--bg-secondary:var(--v7-nav);--surface-solid:var(--v7-surface);
 --surface-elevated:var(--v7-raised);--text-primary:var(--v7-ink);--text-secondary:var(--v7-muted);
 --text-muted:var(--v7-muted);--border:var(--v7-line);--border-subtle:var(--v7-divider);
 --accent:#b93446;--accent-hover:#9b293c;--accent-soft:#8c203824;
 --radius-md:9px;--shadow-surface:0 4px 14px #00000013;
}
:root[data-theme=light] {
 --v7-bg:#f0ede7;--v7-surface:#fff;--v7-panel:#f9f7f3;--v7-raised:#f0ece6;
 --v7-input:#fdfbf8;--v7-nav:#faf7f1;--v7-ink:#2c2830;--v7-muted:#686168;
 --v7-line:#d1c8bf;--v7-divider:#e5dfd7;--accent:#982e41;--accent-hover:#812438;
 --shadow-surface:0 3px 10px #49352b09;
 --v7-planned-bg:#fff0d0;--v7-planned-line:#c89847;--v7-planned-ink:#674412;
}
#app #main-content, :root body > dialog {
 --ws-bg:var(--v7-bg);--ws-panel:var(--v7-surface);--ws-raised:var(--v7-panel);--ws-input:var(--v7-input);
 --ws-line:var(--v7-line);--ws-line-soft:var(--v7-divider);--ws-ink:var(--v7-ink);--ws-muted:var(--v7-muted);
 --ws-red:#d88c9b;--ws-shadow:var(--shadow-surface);--bl-brand:#8c2038;--bl-brand-bright:#b93446;--bl-brand-deep:#6c1b32;
 --bl-canvas:var(--v7-bg);--bl-surface:var(--v7-surface);--bl-header:var(--v7-brand);--bl-shadow:var(--shadow-surface);
}
:root[data-theme=light] #app #main-content, :root[data-theme=light] body > dialog {--ws-red:#982e41}
body {background:var(--v7-bg);color:var(--v7-ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
html:has(#app:not(.hidden)),body:has(#app:not(.hidden)) {height:100%;overflow:hidden;scrollbar-gutter:auto}
#app {height:100dvh;min-height:0;overflow:hidden}
#app .topbar {
 position:fixed;inset:0 auto 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:max-content;align-content:start;align-items:stretch;
 width:252px;height:100dvh;padding:18px 16px 12px;gap:8px;overflow:auto;
 border:0;border-right:1px solid var(--v7-divider);background:var(--v7-nav);box-shadow:none;backdrop-filter:none;
 scrollbar-width:thin;z-index:30;
}
#app .topbar .brand {grid-column:1/-1;order:0;display:flex;justify-content:flex-start;gap:4px;margin:0;padding:0 8px 8px;font-size:28px}
#app .topbar .wordmark__suffix {display:none}
#app .topbar .wordmark__black {color:var(--v7-ink)}
#app .topbar .wordmark__lab {color:var(--v7-ink);font-size:1em;padding:0 .05em .05em}
#app .topbar .wordmark__lab::before {background:linear-gradient(110deg,#8c2038,#c13338);opacity:.85;clip-path:none;border-radius:2px;inset:auto -.02em 0;height:.24em;box-shadow:none}
#app .topbar .wordmark__lab::after {display:none}
#app .topbar #calendar-navigation {grid-column:1/-1;order:1;flex:none;margin:0;padding:0 0 8px;border:0;border-bottom:1px solid var(--v7-divider);border-radius:0;background:none}
#app .topbar #calendar-navigation > summary {display:none}
#app .topbar #calendar-navigation .calendar-sidebar {max-width:none;padding:0}
#app .topbar #calendar-navigation .calendar-month-day {height:32px;min-height:32px;padding:0;font-size:13px}
#app .topbar #calendar-navigation .calendar-month-days {gap:2px}
#app .topbar #calendar-navigation .calendar-month-weekdays {margin-bottom:6px;font-size:12px}
#app .topbar #calendar-navigation .calendar-search-disclosure {margin-top:6px;padding-top:0}
#app .topbar #calendar-navigation .calendar-search-disclosure > summary {min-height:28px;padding:4px 0;font-size:12px}
#app .topbar #calendar-navigation .calendar-month-toolbar {display:flex}
#app .topbar #calendar-navigation :is(.calendar-month-weekdays,.calendar-month-days) {display:grid}
#app .topbar #calendar-navigation .calendar-month-toolbar strong {font-size:15px}
#app .topbar #calendar-navigation .calendar-month-day[aria-pressed=true] {background:#8c2038;color:#fff;border-color:#8c2038}
#app .topbar .tabs {grid-column:1/-1;order:2;display:flex;flex-direction:column;flex-wrap:nowrap;flex:none;gap:2px;padding:0;margin:0;overflow:visible}
#app .topbar .tab {display:flex;align-items:center;justify-content:flex-start;flex:none;gap:11px;width:100%;min-height:38px;padding:7px 11px;border:1px solid transparent;border-radius:9px;color:var(--v7-muted);font-size:13px}
#app .topbar .tab .nav-icon {width:17px;height:17px;flex:none}
#app .topbar .tab.active {background:var(--v7-brand);border-color:#a03a50;color:#fff;box-shadow:0 3px 9px #49182c20}
#app .topbar .tab.active::after {width:4px;height:4px;inset:50% 10px auto auto;border-radius:50%;background:#fff}
#app .topbar .tab:hover:not(.active) {background:var(--v7-surface);border-color:var(--v7-line);color:var(--v7-ink)}
#app .topbar :is(#signed-in-name,#notifications-btn,#logout-btn) {font-size:11px;color:var(--v7-muted);min-height:30px;margin:0;text-align:left;padding:6px 10px}
#app .topbar #signed-in-name {grid-column:1/-1;order:4;min-height:0;border:0;padding:2px 10px 0}
#app .topbar #notifications-btn {order:5}
#app .topbar #logout-btn {order:6}
#app .topbar > .theme-toggle {grid-column:1/-1;order:3;font-size:11px;min-height:30px;justify-content:flex-start;padding:5px 10px;margin-top:2px}
#app .topbar .theme-toggle__label {display:inline}
#app #main-content {margin-left:252px;padding:14px 18px;min-width:0;min-height:0;height:100dvh;overflow:auto;background:var(--v7-bg);scrollbar-width:thin;scrollbar-color:var(--v7-line) var(--v7-bg)}
#app .workspace-brand-header {display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 18px;margin-bottom:12px;border:1px solid #9a3b4d;border-radius:12px;background:var(--v7-brand);box-shadow:0 4px 14px #49182c1a;color:#fff}
.workspace-brand-copy {min-width:0;flex:1}
.workspace-brand-copy p {display:none}
.workspace-brand-copy > strong {font:700 22px/1.25 var(--font-heading);letter-spacing:-.6px;color:#fff}
#app .workspace-brand-header .theme-toggle {display:grid;place-items:center;width:42px;height:42px;flex:none;padding:0;border:1px solid #ffffff35;border-radius:9px;background:#260d1924;color:#fff}
.workspace-navigation-toggle,.workspace-navigation-close {display:none}
.workspace-navigation-backdrop[hidden] {display:none}
#app[data-view=calendar] #main-content {display:flex;flex-direction:column;overflow:hidden}
#app[data-view=calendar] .workspace-brand-header {display:none}
#app #view-calendar {flex:1;min-height:0;height:auto}
#app #view-calendar :is(.calendar-workspace,.calendar-workspace-main) {height:100%;min-height:0}
#app #view-calendar .calendar-workspace-main {display:flex;flex-direction:column}
#app #view-calendar .calendar-command-panel {flex:none;padding:10px 14px 8px;margin:0 0 10px;background:var(--v7-surface);border:1px solid var(--v7-line);border-top-color:#9a3b4d;border-radius:12px;box-shadow:none}
#app #view-calendar .calendar-command-panel > .calendar-toolbar:first-child {padding:0 0 8px;margin:0;background:none;border:0;border-radius:0;gap:8px 14px;color:var(--v7-ink)}
#app #view-calendar .calendar-date-navigation {display:flex;flex-wrap:wrap;gap:5px}
#app #view-calendar .calendar-toolbar #calendar-date-picker .date-display {min-width:155px;background:transparent;color:var(--v7-ink);border-color:transparent;font:700 20px/1.4 var(--font-heading);padding:4px 8px}
#app #view-calendar .calendar-command-panel > .calendar-toolbar:first-child :is(#today-btn,#prev-day,#next-day,summary) {background:transparent;color:var(--v7-ink);border-color:var(--v7-line)}
#app #view-calendar .calendar-toolbar-actions {display:flex;flex-wrap:wrap;width:auto;margin-left:auto;gap:7px}
#app #view-calendar #new-appointment-btn {order:3;background:var(--v7-brand)!important;border:1px solid #8c2038!important;color:#fff;box-shadow:none!important}
#app #view-calendar .calendar-toolbar .calendar-menu-panel {background:var(--v7-surface);border-color:var(--v7-line);color:var(--v7-ink)}
#app #view-calendar .calendar-toolbar .calendar-menu-panel :is(button,p,h2,label) {color:var(--v7-ink)}
#app #view-calendar .calendar-secondary-toolbar {display:flex;align-items:center;flex-wrap:wrap;padding:6px 0 0;margin:0;border:0;border-top:1px solid var(--v7-divider);border-radius:0;background:none;gap:4px 14px}
#app #view-calendar .calendar-filter-controls {display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;flex:1}
#app #view-calendar .calendar-context-bar {display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;margin:0;flex:0 1 auto}
#app #view-calendar .calendar-context-bar > p {font-size:10px;line-height:16px}
#app #view-calendar .calendar-staff-filter {width:184px;max-width:100%;flex:0 1 184px;min-width:130px}
#app #view-calendar .calendar-staff-filter .bl-select-trigger {background:var(--v7-input);color:var(--v7-ink);border-color:var(--v7-line);font-size:12px}
#app #view-calendar .calendar-toolbar-menu > summary {white-space:nowrap;width:auto;min-width:40px;flex-shrink:0;font-size:12px}
#app #view-calendar .calendar-status-menu > summary {min-width:76px;padding-inline:10px}
#app #view-calendar #calendar-status-menu .calendar-display-panel {left:0;right:auto}
#app #view-calendar .calendar-actions-menu > summary {width:40px}
#app #view-calendar .calendar-team-details {margin:0}
#app #view-calendar .calendar-load-state:not(.hidden) {margin-top:8px}
#app #view-calendar .workspace-calendar-stage {display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-height:0;gap:16px}
#app #view-calendar .workspace-calendar-stage > .calendar-scroll {height:100%;min-height:0;max-height:none;border:1px solid var(--v7-line);border-radius:12px;background:var(--v7-input);overflow:auto;scrollbar-width:thin}
#app #view-calendar .calendar-grid {background:var(--v7-input);--cal-off-shift-gradient:repeating-linear-gradient(135deg,var(--v7-input) 0,var(--v7-input) 5px,var(--v7-panel) 5px,var(--v7-panel) 6px)}
#app #view-calendar #calendar-grid .cal-header-cell {background:var(--v7-panel);border-color:var(--v7-line);border-radius:0;min-height:44px;box-shadow:none;color:var(--v7-ink)}
#app #view-calendar #calendar-grid .cal-staff-name {font-size:14px;line-height:20px;color:var(--v7-ink);text-align:left}
#app #view-calendar #calendar-grid .cal-header-cell:not(.time-col)::after {display:none}
#app #view-calendar #calendar-grid .cal-time {background:var(--v7-input);color:var(--v7-muted)}
#app #view-calendar #calendar-grid .appt.is-refined {background:color-mix(in srgb,var(--payment-color) 9%,var(--v7-surface));border-color:color-mix(in srgb,var(--payment-color) 40%,var(--v7-line));border-left-color:var(--payment-color);box-shadow:0 2px 5px #00000014;border-radius:7px}
#app #view-calendar #calendar-grid .appt.is-refined :is(.appt-client-link,.appt-service) {color:var(--v7-ink)}
#app .workspace-visit-preview {display:none;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--v7-line);border-radius:12px;background:var(--v7-surface);overflow:hidden}
#app .workspace-visit-preview .workspace-preview-heading {display:flex;align-items:center;justify-content:space-between;flex:none;gap:8px;margin:0;padding:12px 16px;font-size:12px;line-height:1.5;letter-spacing:.6px}
#app .workspace-visit-preview .workspace-preview-heading::before {display:none}
#app .workspace-visit-preview .workspace-preview-caption {display:grid;min-width:0;gap:3px}
#app .workspace-visit-preview [data-workspace-preview=index] {font-size:13px;letter-spacing:0;color:#f1dce2;text-transform:none;font-weight:500}
#app .workspace-visit-preview .workspace-preview-arrows {display:flex;flex:none;gap:5px}
#app .workspace-visit-preview .workspace-preview-arrows button {display:grid;place-items:center;width:34px;min-width:34px;min-height:34px;padding:7px;border:1px solid #ffffff35;border-radius:8px;background:#ffffff0c;color:#fff}
#app .workspace-visit-preview .workspace-preview-arrows button:hover:not(:disabled) {background:#ffffff20;border-color:#ffffff70}
#app .workspace-visit-preview .workspace-preview-arrows button:disabled {opacity:.4;cursor:default}
#app .workspace-visit-preview .workspace-preview-arrows button:focus-visible {outline:2px solid #fff;outline-offset:2px}
#app .workspace-visit-preview .workspace-preview-arrows svg {width:18px;height:18px}
#app .workspace-visit-preview .workspace-preview-body {display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;padding:16px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:var(--booking-rail)}
#app .workspace-visit-preview :is(.booking-summary-visit,.booking-summary-services,.booking-summary-pin)[hidden] {display:none}
#app .workspace-visit-preview :is(.booking-summary-client,.workspace-preview-empty)[hidden] {display:none}
#app .workspace-visit-preview .workspace-preview-empty {display:grid;gap:12px;align-content:start;padding:8px 0;color:var(--booking-muted)}
#app .workspace-visit-preview .workspace-preview-empty > svg {width:32px;height:32px;margin-bottom:4px}
#app .workspace-visit-preview .workspace-preview-empty h3 {margin:0;color:var(--booking-ink);font-size:18px;line-height:1.45;font-weight:600;overflow-wrap:anywhere}
#app .workspace-visit-preview .workspace-preview-empty p {margin:0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
#app .workspace-visit-preview .workspace-preview-empty button {justify-self:start;max-width:100%;padding:9px 12px;min-height:40px;white-space:normal;font-size:14px;line-height:1.5;color:var(--booking-ink);background:var(--booking-surface);border-color:var(--booking-line)}
#app #view-calendar .workspace-calendar-state {display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--v7-line);border-radius:10px;background:var(--v7-surface);color:var(--v7-ink)}
#app #view-calendar .workspace-calendar-state[hidden] {display:none}
#app #view-calendar .workspace-calendar-state h3 {margin:0;font-size:15px;line-height:1.5;font-weight:600}
#app #view-calendar .workspace-calendar-state p {margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--v7-muted)}
#app #view-calendar .workspace-calendar-state button {flex:none;max-width:100%;min-height:40px;padding:8px 12px;font-size:14px;line-height:1.5;white-space:normal;color:var(--v7-ink);border:1px solid var(--v7-line);background:var(--v7-panel)}
@media(max-width:800px) {#app #view-calendar .workspace-calendar-state {align-items:flex-start;flex-direction:column;gap:8px}}
#app .workspace-visit-preview .booking-summary-cost strong {font-size:30px;white-space:normal;overflow-wrap:anywhere}
#app .workspace-visit-preview .booking-summary-cost > span {font-size:13px;line-height:1.5}
#app .workspace-visit-preview[data-payment-tone=planned] .booking-summary-pin {background:var(--v7-planned-bg);border-color:var(--v7-planned-line)}
#app .workspace-visit-preview .booking-summary-visit > div {font-size:13px;line-height:1.5}
#app .workspace-visit-preview .workspace-preview-payment {max-width:65%;text-align:right;color:var(--booking-ink);font-weight:600;overflow-wrap:anywhere}
#app .workspace-visit-preview[data-payment-tone=planned] .workspace-preview-payment {padding:3px 8px;border:1px solid var(--v7-planned-line);border-radius:7px;background:var(--v7-planned-bg);color:var(--v7-planned-ink)}
#app .workspace-visit-preview .booking-summary-services strong {overflow-wrap:anywhere}
#app .workspace-visit-preview > .booking-summary-payment-link {flex:none;width:calc(100% - 32px);margin:0 16px 16px;font-size:14px;line-height:1.5}
#app .workspace-visit-preview[data-visit-status=pending] {--booking-summary-status-ink:var(--booking-status-pending)}
#app .workspace-visit-preview[data-visit-status=confirmed] {--booking-summary-status-ink:var(--booking-status-confirmed)}
#app .workspace-visit-preview[data-visit-status=arrived] {--booking-summary-status-ink:var(--booking-status-arrived)}
#app .workspace-visit-preview[data-visit-status=noshow] {--booking-summary-status-ink:var(--booking-status-noshow)}
#app .workspace-visit-preview[data-visit-status=cancelled] {--booking-summary-status-ink:var(--booking-status-cancelled)}
#app .workspace-visit-preview .workspace-preview-staff {max-width:65%;text-align:right;overflow-wrap:anywhere;color:var(--booking-ink);font-weight:600}
#app .workspace-visit-preview .workspace-preview-comment {padding-top:14px;border-top:1px solid var(--booking-divider)}
#app .workspace-visit-preview .workspace-preview-comment[hidden] {display:none}
#app .workspace-visit-preview .workspace-preview-comment-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
#app .workspace-visit-preview .workspace-preview-comment h4 {margin:0;font-size:12px;line-height:1.5;letter-spacing:.8px;text-transform:uppercase;color:var(--booking-muted);font-weight:600}
#app .workspace-visit-preview .workspace-preview-comment-heading button {min-height:32px;padding:5px 9px;font-size:13px;line-height:1.5;background:var(--booking-surface);color:var(--booking-ink);border-color:var(--booking-line)}
#app .workspace-visit-preview [data-workspace-preview=comment] {margin:0;font-size:14px;line-height:1.6;color:var(--booking-muted);white-space:pre-wrap;overflow-wrap:anywhere}
#app .workspace-visit-preview [data-workspace-comment-message] {margin:8px 0 0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#app .workspace-visit-preview [data-workspace-comment-message]:empty {display:none}
#app #view-calendar[data-preview-hidden=true] .workspace-calendar-stage {grid-template-columns:minmax(0,1fr)}
#app #view-calendar[data-preview-hidden=true] .workspace-visit-preview {display:none}
#app #view-calendar .workspace-preview-dialog {position:fixed;inset:16px 16px 16px auto;margin:0;padding:0;width:min(360px,calc(100vw - 32px));max-width:none;height:calc(100dvh - 32px);max-height:900px;border:0;border-radius:12px;background:var(--v7-surface);color:var(--v7-ink);overflow:clip;box-shadow:0 18px 60px #0007}
#app #view-calendar .workspace-preview-dialog::backdrop {background:#0006}
#app #view-calendar .workspace-preview-dialog[open] > .workspace-visit-preview {display:flex;width:100%;height:100%;max-height:none;box-sizing:border-box}
#app .workspace-visit-preview .workspace-preview-arrows [data-workspace-close-preview] {display:none}
#app .workspace-preview-dialog[open] [data-workspace-close-preview] {display:grid}
#app .workspace-visit-preview .workspace-preview-comment-editor {display:grid;gap:10px}
#app .workspace-visit-preview .workspace-preview-comment-editor[hidden] {display:none}
#app .workspace-visit-preview .workspace-preview-comment-editor textarea {width:100%;min-width:0;box-sizing:border-box;resize:vertical;min-height:96px;padding:10px;border:1px solid var(--booking-line);border-radius:9px;background:var(--booking-input);color:var(--booking-ink);font:450 16px/1.6 var(--font)}
#app .workspace-visit-preview .workspace-preview-comment-editor textarea:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
#app .workspace-visit-preview .workspace-preview-comment-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
#app .workspace-visit-preview .workspace-preview-comment-actions button {min-height:40px;padding:8px 12px;font-size:13px;white-space:normal}
#app .workspace-visit-preview .workspace-preview-comment-conflict {margin:0;padding:10px;border:1px solid var(--booking-line);border-radius:8px;background:var(--booking-band);font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
/* Reuse every directory, report and form, with the reference's neutral surfaces. */
#app #main-content > .view:not(#view-calendar) {font-size:14px;color:var(--v7-ink);max-width:none}
#app #main-content > .view:not(#view-calendar) .page-heading {padding:0 0 10px;margin:0 0 12px;border:0;border-bottom:1px solid var(--v7-divider);border-radius:0;background:none;box-shadow:none;gap:12px;flex-wrap:wrap}
#app #main-content > .view:not(#view-calendar) .page-heading h1 {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#app #main-content > .view:not(#view-calendar) .page-heading :is(p,.clients-eyebrow) {color:var(--v7-muted);font-size:12px;margin:0}
#app #main-content .page-heading .clients-eyebrow {display:none}
#app #main-content > .view:not(#view-calendar) .page-heading button.ghost {color:var(--v7-ink);background:var(--v7-surface);border-color:var(--v7-line)}
#app #main-content > .view:not(#view-calendar) .page-heading button,
#app #main-content #view-clients #new-client-btn {min-height:38px;padding:8px 12px;font-size:13px;border-radius:9px}
#app #main-content > .view:not(#view-calendar) :is(.toolbar,.table-wrap,.report-section,.settings-section,.card,.service-group,.package-card,.premium-category) {background:var(--v7-surface);border-color:var(--v7-line);box-shadow:var(--shadow-surface);border-radius:12px}
#app #main-content > .view:not(#view-calendar) :is(input:not([type=checkbox],[type=radio],[type=color]),select,.bl-select-trigger,.date-display) {background:var(--v7-input);border-color:var(--v7-line);color:var(--v7-ink);min-height:42px;font-size:13px;border-radius:9px}
#app #main-content > .view:not(#view-calendar) .toolbar-filter {min-width:140px;max-width:100%}
#app #main-content > .view:not(#view-calendar) .toolbar-filter .bl-select {width:100%;min-width:0;max-width:100%}
#app #main-content > .view:not(#view-calendar) .toolbar-filter .bl-select-trigger {min-width:0;width:100%;max-width:100%}
#app #main-content > .view:not(#view-calendar) .toolbar {padding:12px;gap:10px;margin-bottom:12px}
#app #main-content > .view:not(#view-calendar) .toolbar-filter {gap:5px}
#app #main-content .report-toolbar {flex-wrap:wrap}
#app #main-content > .view:not(#view-calendar) :is(th,td) {padding:13px 15px;font-size:13px;border-color:var(--v7-divider)}
#app #main-content > .view:not(#view-calendar) th {background:var(--v7-panel);font-size:11px;color:var(--v7-muted)}
#app #main-content > .view:not(#view-calendar) :is(.report-section,.settings-section) {padding:16px}
#app #main-content :is(.client-section-nav,.abonement-section-nav,.settings-nav) {gap:6px;background:transparent;border:0;border-radius:0;padding:0;margin-bottom:12px;box-shadow:none;flex-wrap:wrap}
#app #main-content :is(.client-section-nav,.abonement-section-nav) button {font-size:12px;min-height:36px;padding:7px 12px;background:var(--v7-surface);border:1px solid var(--v7-line);color:var(--v7-muted);border-radius:9px;box-shadow:none}
#app #main-content :is(.client-section-nav,.abonement-section-nav) button[aria-pressed=true] {background:#8c203826;border-color:#ad6575;color:var(--v7-ink)}
#app #main-content .card .value {font:650 29px/1.4 var(--font-heading);letter-spacing:-.7px;color:var(--v7-ink)}
#app #main-content #dashboard-cards > .card:first-child {background:var(--v7-surface);border-color:var(--v7-line)}
#app #main-content :is(.bar-fill,.report-bar-fill) {background:#b096d6}
#app #main-content :is(button.primary,button[type=submit]:not(.ghost):not(.danger)),:root body > dialog button.primary {background:var(--v7-brand);border-color:#8c2038;color:#fff;box-shadow:0 3px 9px #49182c20}
:root body > dialog:not(#appointment-dialog) :is(.dialog-header,.client-drawer-header) {background:var(--v7-brand)!important;border-color:#9a3b4d!important}
:root[data-theme] body > dialog:not(#appointment-dialog) :is(.dialog-header,.client-drawer-header) :is(h2,.client-drawer-title,.icon-close) {color:#fff!important}
:root body > dialog .bl-select-list {background:var(--v7-surface);color:var(--v7-ink);border-color:var(--v7-line)}
body > dialog#appointment-details-dialog {width:min(1100px,calc(100vw - 32px));max-width:calc(100vw - 32px)}
body > dialog#appointment-details-dialog .appointment-payment-panel {grid-column:1/-1;min-width:0;width:100%;background:var(--v7-surface);border-color:var(--v7-line)}
/* Existing directory forms share the same fields, validation and submit handlers. */
:root body > dialog.form-dialog:not(#appointment-dialog) {background:var(--v7-bg);border-color:var(--v7-line);border-radius:14px}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-header {padding:12px 18px;gap:12px}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-header h2 {margin:0;font:650 21px/1.3 var(--font-heading);letter-spacing:-.4px}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-header .icon-close {width:38px;min-width:38px;min-height:38px;padding:0;border:1px solid #ffffff40;border-radius:9px;font-size:23px;background:transparent}
:root body > dialog.form-dialog:not(#appointment-dialog) .required-legend {padding:7px 18px 0;font-size:12px}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-body {padding:14px 18px;gap:12px 16px;background:var(--v7-bg)}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-body > p:not(.field-error) {margin:0;line-height:1.5}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-field-readonly {padding:6px 10px;border:1px solid var(--v7-divider);border-radius:8px;background:var(--v7-surface);font-size:12px;color:var(--v7-muted)}
:root body > dialog.form-dialog:not(#appointment-dialog) .field-label {margin:0;gap:5px;font-size:13px}
:root body > dialog#abonement-dialog.form-dialog .dialog-field--wide > .field-label {display:block}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-field-caption {line-height:1.4;color:var(--v7-muted)}
:root body > dialog.form-dialog:not(#appointment-dialog) :where(input:not([type=checkbox],[type=radio],[type=hidden],[type=color]),select:not(.bl-select-native),textarea,.bl-select-trigger,.date-display) {min-height:42px;padding:9px 11px;border-color:var(--v7-line);border-radius:9px;background:var(--v7-input);color:var(--v7-ink);font-size:14px;line-height:1.4}
:root body > dialog.form-dialog:not(#appointment-dialog) .date-field.block > .date-display {width:100%;text-align:left}
:root body > dialog.form-dialog:not(#appointment-dialog) .date-popover {position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(320px,calc(100vw - 48px));max-height:calc(100dvh - 180px);overflow:auto;background:var(--v7-surface);border-color:var(--v7-line);color:var(--v7-ink);box-shadow:0 12px 36px #0005}
:root body > dialog.form-dialog:not(#appointment-dialog) input[type=color] {min-height:42px;padding:4px;border-color:var(--v7-line);border-radius:9px;background:var(--v7-input)}
:root body > dialog.form-dialog:not(#appointment-dialog) textarea {min-height:72px}
:root body > dialog.form-dialog:not(#appointment-dialog) :is(input,select,textarea,.bl-select-trigger,.date-display):focus-visible {outline:2px solid var(--accent);outline-offset:2px}
:root body > dialog.form-dialog:not(#appointment-dialog) :is(.is-invalid,[aria-invalid=true]),
:root body > dialog.form-dialog:not(#appointment-dialog) :is(.bl-select.is-invalid,.field-label:has(select.is-invalid)) .bl-select-trigger,
:root body > dialog.form-dialog:not(#appointment-dialog) .date-field.is-invalid .date-display {border-color:var(--danger);box-shadow:0 0 0 1px color-mix(in srgb,var(--danger) 25%,transparent)}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-footer {padding:12px 18px;gap:8px;background:var(--v7-surface);border-color:var(--v7-line)}
:root body > dialog.form-dialog:not(#appointment-dialog) .dialog-footer button {min-height:40px;padding:9px 14px;border-radius:9px;font-size:13px}
:root body > dialog#client-create-dialog.form-dialog {width:min(960px,calc(100vw - 24px))}
:root body > dialog#client-profile-edit-dialog.form-dialog {width:min(720px,calc(100vw - 24px))}
/* Keep the established profile layout; convey financial states through card surfaces. */
:root body > dialog#client-drawer.client-profile-compact {--profile-due-ink:#ef9296}
:root[data-theme=light] body > dialog#client-drawer.client-profile-compact {--profile-due-ink:#a73846}
:root body > dialog#client-drawer.client-profile-compact .client-profile-finance-card {background:var(--v7-panel);border-color:var(--v7-line)}
:root body > dialog#client-drawer.client-profile-compact .client-profile-finance-card > span {color:var(--v7-ink)}
:root body > dialog#client-drawer.client-profile-compact .client-profile-finance-card > strong {color:var(--v7-ink)}
:root body > dialog#client-drawer.client-profile-compact .client-profile-finance-card[data-finance-state=paid] {background:var(--bl-paid-bg);border-color:var(--bl-paid-line)}
:root body > dialog#client-drawer.client-profile-compact .client-profile-finance-card[data-finance-state=due] {background:color-mix(in srgb,var(--profile-due-ink) 7%,var(--v7-panel));border-color:color-mix(in srgb,var(--profile-due-ink) 45%,var(--v7-line))}
:root body > dialog#client-drawer.client-profile-compact button.primary:not(.danger) {background:var(--v7-brand);border-color:#8c2038;color:#fff}
:root body > dialog#client-drawer.client-profile-compact .client-drawer-header button.primary {background:#fff;border-color:#fff;color:#75223a}
:root body > dialog#client-drawer.client-profile-compact .client-drawer-header :is(button.ghost,.icon-close) {background:transparent;border-color:#ffffff40;color:#fff;border-radius:9px}
:root body > dialog#client-drawer.client-profile-compact .client-drawer-section h3::before {background:#b93446}
:root body > dialog#client-drawer.client-profile-compact .client-profile-history > summary {border-left-color:#b93446}
:root body > dialog#client-drawer.client-profile-compact .client-profile-service small {color:var(--ws-red)}
@media(max-width:640px) {
 :root body > dialog.form-dialog:not(#appointment-dialog) :is(.dialog-header,.dialog-body,.dialog-footer) {padding:12px}
 :root body > dialog.form-dialog:not(#appointment-dialog) .required-legend {padding:7px 12px 0}
 :root body > dialog.form-dialog:not(#appointment-dialog) .dialog-header h2 {font-size:20px}
 :root body > dialog.form-dialog:not(#appointment-dialog) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select:not(.bl-select-native),textarea) {font-size:16px}
}
/* Sold packages retain their original balances, lifecycle chips, amounts and actions. */
#app #main-content .package-card-header {background:var(--v7-panel);border-color:var(--v7-divider)}
#app #main-content .package-card-header h3 {border:0;padding:0;color:var(--v7-ink);font-size:16px}
#app #main-content .package-card-actions {background:transparent;border-color:var(--v7-divider)}
[data-balance-tone=full] {--balance-ink:#c5a6ef}
[data-balance-tone=healthy] {--balance-ink:#88c9a4}
[data-balance-tone=low] {--balance-ink:#e5ae6e}
[data-balance-tone=critical] {--balance-ink:#ef9296}
[data-balance-tone=neutral] {--balance-ink:var(--v7-muted)}
:root[data-theme=light] [data-balance-tone=full] {--balance-ink:#71509a}
:root[data-theme=light] [data-balance-tone=healthy] {--balance-ink:#31724f}
:root[data-theme=light] [data-balance-tone=low] {--balance-ink:#9b5b23}
:root[data-theme=light] [data-balance-tone=critical] {--balance-ink:#a73846}
#app #main-content [data-balance-tone] .premium-sessions strong,
body > dialog [data-balance-tone] .sessions-left {color:var(--balance-ink)}
[data-balance-tone] progress::-webkit-progress-value {background:var(--balance-ink)!important}
[data-balance-tone] progress::-moz-progress-bar {background:var(--balance-ink)!important}
#app #main-content #view-abonements.view .package-card.package-type-card {position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:'heading heading' 'count body' 'actions actions';background:var(--v7-brand);border-color:#a95061;color:#fff}
#app #main-content .package-type-card::before {content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(130deg,transparent 0,transparent 18px,#ffffff08 18px,#ffffff08 19px)}
#app #main-content .package-type-card::after {content:attr(data-design-session-count);grid-area:count;display:block;padding:10px 0 0 14px;font:750 44px/1.1 var(--font-heading);letter-spacing:-1px;color:#fff}
#app #main-content .package-type-card .package-card-header {grid-area:heading;display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:62px;padding:10px 14px;background:transparent;border:0;align-items:start}
#app #main-content .package-type-card .package-card-header h3 {color:#fff;font-size:14px}
#app #main-content .package-type-card .package-card-body {grid-area:body;padding-top:10px;gap:12px;background:transparent}
#app #main-content .package-type-card :is(.package-type-price strong,.package-type-price span,.package-type-details dt,.package-type-details dd,.muted) {color:#fff}
#app #main-content .package-type-card .package-type-price strong {font-size:23px}
#app #main-content .package-type-card .package-type-details {border-color:#ffffff29;padding-top:10px;gap:10px}
#app #main-content .package-type-card .package-type-details dd {font-size:16px}
#app #main-content .package-type-card .package-card-actions {grid-area:actions;display:grid;grid-template-columns:1fr 1.2fr;align-items:stretch;background:transparent;border-color:#ffffff29}
#app #main-content #view-abonements.view .package-type-card .package-card-actions button {min-width:0;min-height:36px;padding:7px 8px;font-size:12px;white-space:normal;background:#ffffff0d;color:#fff;border-color:#ffffff40;box-shadow:none}
#app #main-content .package-type-card .package-card-actions .primary {margin-left:0;background:#ffffff18!important;border-color:#ffffff50;color:#fff}
/* Compact directories without moving or removing the existing controls. */
#app #main-content .premium-list-heading {margin:16px 0 10px}
#app #main-content #view-clients .client-section-nav {padding:0;margin-bottom:12px;border:0}
#app #main-content #view-clients .client-section-nav button {min-height:36px;padding:7px 12px;font-size:12px}
#app #main-content #view-clients #client-level-overview {margin-bottom:14px}
#app #main-content #view-clients .clients-level-heading {margin-bottom:8px}
#app #main-content #view-clients .clients-level-heading button {min-height:28px;padding:4px 8px;font-size:12px}
#app #main-content #view-clients .clients-level-grid {gap:10px}
#app #main-content #view-clients .clients-level-card {min-height:72px;padding:12px;gap:10px;flex-wrap:nowrap;border-radius:11px}
#app #main-content #view-clients .clients-level-icon {width:32px;height:32px;flex-basis:32px;border-radius:9px}
#app #main-content #view-clients .clients-level-icon svg {width:21px;height:21px}
#app #main-content #view-clients .clients-level-copy {gap:4px}
#app #main-content #view-clients .clients-level-copy strong {font-size:15px}
#app #main-content #view-clients .clients-level-copy > span {font-size:12px}
#app #main-content #view-clients .clients-level-number {display:grid;width:auto;padding:0;gap:2px;text-align:right}
#app #main-content #view-clients .clients-level-number strong {font-size:24px}
#app #main-content #view-clients #client-base-panel > .toolbar {padding:12px;gap:8px}
#app #main-content #view-clients #client-base-panel .premium-client-tools {padding-top:6px;margin-top:0;gap:6px}
#app #main-content #view-clients .premium-client-tools :is(button,.import-btn) {min-height:32px;padding:6px 10px;font-size:12px}
#app #main-content #view-clients .premium-list-heading {margin:14px 0 10px}
#app #main-content #view-clients #clients-list th {height:42px;padding:0 12px}
#app #main-content #view-clients #clients-list .client-sort-button {min-height:40px;padding:8px 0}
#app #main-content #view-clients #clients-list td {height:56px;padding:10px 12px}
#app #main-content #view-clients #clients-list .premium-avatar {width:32px;height:32px;flex-basis:32px}
#app #main-content #view-clients #clients-list .client-name-link {font-size:14px}
#app #main-content :is(#view-abonements,#view-staff) > .toolbar,
#app #main-content #abonement-clients-panel > .toolbar {padding:8px 12px}
#app #main-content #view-staff > .toolbar .toolbar-filter,
#app #main-content #abonement-clients-panel > .toolbar .toolbar-filter {display:flex;align-items:center;gap:10px;min-width:230px;flex:0 1 260px}
#app #main-content .list-scope-note {margin:0 0 8px;font-size:12px}
#app #main-content .abonement-overview {gap:10px;margin-bottom:0}
#app #main-content .abonement-overview > div {padding:12px 56px 12px 14px;border-radius:11px}
#app #main-content .abonement-overview span {font-size:12px;margin-bottom:4px}
#app #main-content .abonement-overview strong {font-size:24px}
#app #main-content .abonement-overview .section-icon {width:32px;height:32px;right:14px;top:14px}
#app #main-content .package-directory {gap:14px}
#app #main-content #package-types-list {grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch}
#app #main-content .package-card-header {padding:12px 14px;gap:8px}
#app #main-content .package-card-body {padding:14px;gap:12px}
#app #main-content .package-balance {gap:12px}
#app #main-content .package-balance .premium-sessions {gap:6px}
#app #main-content .package-finance > div {padding:10px 8px}
#app #main-content .package-finance dt {margin-bottom:4px}
#app #main-content .package-finance dd {font-size:18px}
#app #main-content .package-card-actions {padding:10px 14px;gap:6px}
#app #main-content .package-card-actions > button {min-height:36px;padding:7px 10px}
#app #main-content .package-catalog-note {padding:10px 12px;margin-bottom:12px}
#app #main-content #services-list .service-group-header {padding:12px 16px}
#app #main-content .service-entry {padding:12px 14px;gap:12px}
#app #main-content .service-identity .service-motion-icon {width:32px;height:32px;flex-basis:32px}
#app #main-content .staff-directory {gap:14px}
#app #main-content .staff-card-header {padding:14px;gap:10px}
#app #main-content .staff-card-header .premium-avatar {width:40px;height:40px;flex-basis:40px;font-size:14px}
#app #main-content .staff-card-header h3 {font-size:17px}
#app #main-content .staff-card-details {padding:4px 14px}
#app #main-content .staff-card-details > div {padding:8px 0}
#app #main-content .staff-card-order {padding:6px 14px 10px}
#app #main-content .staff-card-actions {padding:10px 14px}
#app #main-content #view-dashboard.view {gap:12px}
#app #main-content #view-dashboard.view > :is(.page-heading,.toolbar,.premium-list-heading,.cards,.report-section) {margin:0}
#app #main-content #dashboard-cards {gap:10px}
#app #main-content #dashboard-cards .metric-card {min-height:104px;padding:14px 56px 14px 14px;gap:8px}
#app #main-content #dashboard-cards .section-icon {width:32px;height:32px;right:12px;top:14px}
#app #main-content #view-dashboard .analytics-structure {gap:12px}
#app #main-content #view-dashboard.view .analytics-structure .report-section {margin:0}
#app #main-content #settings-form {gap:12px}
#app #main-content #settings-form > .required-legend {margin:0 4px}
#app #main-content #view-settings.view .settings-section {margin-top:0}
#app #main-content #view-settings .settings-section > h3 {margin-bottom:12px;font-size:17px}
#app #main-content #view-settings .settings-section > .section-description {margin:-4px 0 14px}
#app #main-content #view-settings .settings-grid {gap:14px 18px}
#app #main-content .settings-save-row {margin-top:0;padding:10px 14px;bottom:10px}
@media(min-width:1200px) {
 #app #main-content .service-entry-actions {display:flex;align-items:center;flex-wrap:wrap;gap:6px}
}
@media(max-width:1250px) {
 #app #main-content #view-clients #clients-list tr {padding:14px;gap:10px 14px}
 #app #main-content #view-clients #clients-list td {height:auto;padding:0}
}
@media(min-width:1680px) and (min-height:800px) {
 /* Keep the full schedule width on ordinary desktop windows. */
 #app #view-calendar .workspace-calendar-stage {grid-template-columns:minmax(0,1fr) 280px}
 #app .workspace-visit-preview {display:flex}
 #app #view-calendar #calendar-grid .appt.is-preview-selected:not(.is-filtered) {outline:2px solid color-mix(in srgb,var(--v7-ink) 50%,var(--ws-red));outline-offset:1px}
 #app #view-calendar .workspace-calendar-state {display:none}
}
@media(max-width:1179px) {
 #app .topbar #calendar-navigation > summary {display:block;padding:5px 4px;font-size:13px}
 #app .topbar #calendar-navigation > summary::before {content:'›';display:inline-block;margin-right:7px}
 #app .topbar #calendar-navigation[open] > summary::before {transform:rotate(90deg)}
}
@media(min-width:801px) and (max-width:1100px) {
 #app #main-content {padding:12px}
 #app #view-calendar #calendar-status-menu .calendar-display-panel {position:fixed;inset:50% auto auto calc(50% + 126px);transform:translate(-50%,-50%);max-height:calc(100dvh - 32px)}
}
@media(max-width:800px) {
 #app .topbar {width:252px;max-width:calc(100vw - 40px);transform:translateX(-100%);transition:transform 180ms ease;z-index:80}
 #app[data-navigation-open=true] .topbar {transform:translateX(0)}
 #app .workspace-navigation-close {display:block;position:absolute;top:10px;right:8px;width:30px;min-height:30px;padding:0;font-size:22px;color:var(--v7-ink)}
 #app .topbar .brand {padding-right:24px}
 #app #main-content {margin-left:0;padding:10px;height:100dvh;overflow:auto}
 #app .workspace-brand-header {position:sticky;top:0;z-index:20;min-height:54px;padding:7px 10px;gap:9px;border-radius:10px;margin-bottom:8px}
 #app[data-view=calendar] .workspace-brand-header {display:flex;flex:none;margin-bottom:8px}
 .workspace-brand-copy > strong {font-size:20px}
 #app .workspace-brand-header .theme-toggle {width:36px;height:36px}
 #app .workspace-navigation-toggle {display:block;width:34px;min-height:40px;flex:none;background:transparent;border:0;padding:0;color:#fff;font-size:18px}
 #app .workspace-navigation-backdrop:not([hidden]) {display:block;position:fixed;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#0008;z-index:70}
 #app #view-calendar .calendar-command-panel {padding:8px 10px 6px;margin-bottom:8px}
 #app #view-calendar .calendar-command-panel > .calendar-toolbar:first-child {padding:0 0 6px;gap:6px;border-radius:0}
 #app #view-calendar .calendar-date-navigation {width:100%;gap:4px}
 #app #view-calendar .calendar-toolbar #calendar-date-picker .date-display {min-width:0;font-size:14px;padding-inline:4px}
 #app #view-calendar .calendar-toolbar-actions {width:100%;justify-content:flex-end;margin:0}
 #app #view-calendar .calendar-secondary-toolbar {position:relative;padding:4px 0 0;gap:4px}
 #app #view-calendar .calendar-secondary-toolbar .calendar-toolbar-menu {position:static}
 #app #view-calendar .calendar-secondary-toolbar .calendar-menu-panel {top:calc(100% + 6px);right:0}
 #app #view-calendar #calendar-status-menu .calendar-display-panel {position:fixed;inset:auto 16px 16px;width:calc(100vw - 32px);max-width:none;max-height:calc(100dvh - 32px);overflow:auto}
 #app #view-calendar .calendar-filter-controls {flex:1 1 100%;gap:6px}
 #app #view-calendar .calendar-staff-filter {flex:1 1 130px;width:auto;min-width:100px}
 #app #view-calendar .calendar-context-bar {width:100%;justify-content:space-between}
 #app #view-calendar .calendar-context-bar > p {max-width:100%;font-size:10px}
 #app #view-calendar .workspace-calendar-stage {grid-template-columns:minmax(0,1fr);gap:0}
 #app .workspace-visit-preview {display:none}
 #app #view-calendar .calendar-toolbar .calendar-menu-panel {max-width:calc(100vw - 40px)}
 #app #view-calendar .calendar-status-menu .calendar-menu-panel {right:0}
 #app #view-calendar .calendar-legend-menu .calendar-menu-panel {right:0}
 #app #main-content > .view:not(#view-calendar) .page-heading {gap:8px;padding-bottom:10px}
 #app #main-content > .view:not(#view-calendar) .page-heading .page-actions {width:100%}
 #app #main-content > .view:not(#view-calendar) .toolbar {padding:12px;gap:10px}
 #app #main-content > .view:not(#view-calendar) :is(.report-section,.settings-section) {padding:15px}
 #app #main-content > .view:not(#view-calendar) .directory-search {min-width:0;max-width:100%}
 #app #main-content > .view:not(#view-calendar) .toolbar .toolbar-filter {min-width:130px;max-width:100%;flex:1 1 130px}
 #app #main-content .package-type-card::after {font-size:38px}
 #app #main-content .package-type-card .package-type-price {flex-wrap:wrap;gap:4px 10px}
 #app #main-content .abonement-overview > div {padding:10px 12px}
 #app #main-content #dashboard-cards .metric-card {display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:start;padding:12px;min-height:100px}
 #app #main-content #dashboard-cards .metric-card .label {grid-column:1;grid-row:1}
 #app #main-content #dashboard-cards .metric-card .section-icon {position:static;grid-column:2;grid-row:1;width:28px;height:28px}
 #app #main-content #dashboard-cards .metric-card .value {grid-column:1/-1;grid-row:2}
 #app #main-content #view-dashboard #dashboard-cards .value {font-size:22px;line-height:1.3;letter-spacing:-.5px}
 #app #main-content #view-dashboard #dashboard-cards .trend {font-size:.7em;margin-left:4px}
 #app #main-content #view-settings.view .settings-section {scroll-margin-top:76px}
}
@media(min-width:600px) and (max-width:800px) {
 #app #view-calendar .calendar-date-navigation {width:auto;flex:0 1 auto}
 #app #view-calendar .calendar-toolbar-actions {width:auto;margin-left:auto}
 #app #view-calendar .calendar-filter-controls {width:auto;flex:0 1 auto}
 #app #view-calendar .calendar-context-bar {width:auto;flex:1;justify-content:flex-end}
}
@media(max-height:800px) {
 #app .topbar {padding-top:12px;gap:5px}
 #app .topbar .brand {font-size:26px;padding-bottom:5px}
 #app .topbar #calendar-navigation .calendar-month-day {min-height:28px;height:28px}
 #app .topbar #calendar-navigation .calendar-month-toolbar {margin-bottom:6px}
 #app .topbar .tab {min-height:34px;padding-block:5px}
 #app .topbar :is(#notifications-btn,#logout-btn) {min-height:28px;padding-block:4px}
}
@media(max-height:680px) {
 #app #view-calendar .workspace-calendar-stage {grid-template-columns:minmax(0,1fr)}
 #app .workspace-visit-preview {display:none}
}
@media(prefers-reduced-motion:reduce) {#app .topbar {transition:none}}

/* Section headers keep the existing controls, sorting and payment states. */
:root body > dialog#appointment-dialog .appointment-payment-heading {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:-15px -15px 14px;padding:12px 15px;border-bottom:1px solid var(--v7-section-header-line);border-radius:13px 13px 0 0;background:var(--v7-section-header)}
:root body > dialog#appointment-dialog .appointment-payment-heading > h3 {margin:0 auto 0 0;padding:0;border:0;color:#fff;font:650 17px/1.4 var(--font-heading)}
:root body > dialog#appointment-dialog .appointment-payment-heading > button {min-height:32px;padding:5px 10px;border:1px solid #ffffff40;border-radius:8px;background:#ffffff0d;color:#fff;font-size:12px}
:root body > dialog#appointment-dialog .appointment-payment-heading > button:hover:not(:disabled) {background:#ffffff20;border-color:#ffffff70}
:root body > dialog:is(#appointment-dialog,#appointment-details-dialog,#client-drawer) .appointment-payment-state[data-payment-tone=planned] {background:var(--v7-planned-bg);border:1px solid var(--v7-planned-line);border-radius:7px;color:var(--v7-planned-ink);font-weight:600}
#app #main-content #view-clients #client-base-panel > .toolbar,
#app #main-content #view-dashboard.view > .toolbar {position:relative;isolation:isolate;padding:0 12px 12px;gap:8px}
#app #main-content #view-clients #client-base-panel > .toolbar::before,
#app #main-content #view-dashboard.view > .toolbar::before {content:'';position:absolute;inset:0 0 auto;height:38px;z-index:-1;pointer-events:none;border-radius:11px 11px 0 0;border-bottom:1px solid var(--v7-section-header-line);background:var(--v7-section-header)}
#app #main-content #view-clients #client-base-panel > .toolbar > .toolbar-filter,
#app #main-content #view-dashboard.view > .toolbar > .toolbar-filter {gap:8px}
#app #main-content #view-clients #client-base-panel > .toolbar > .toolbar-filter > .dialog-field-caption,
#app #main-content #view-dashboard.view > .toolbar > .toolbar-filter > .dialog-field-caption {display:flex;align-items:center;min-height:38px;margin:0;color:#fff;font-size:12px;font-weight:600;line-height:1.4}
#app #main-content #view-clients #clients-list thead {background:var(--v7-section-header)}
#app #main-content #view-clients #clients-list thead th {background:transparent;color:#fff;border-bottom-color:var(--v7-section-header-line)}
#app #main-content #view-clients #clients-list thead .client-sort-button {color:inherit}
#app #main-content .package-card:not(.package-type-card) > .package-card-header {background:var(--v7-section-header);border-bottom-color:var(--v7-section-header-line)}
#app #main-content .package-card:not(.package-type-card) > .package-card-header h3 {color:#fff}
@media(max-width:1000px) {
 #app #main-content #view-clients #client-base-panel > .toolbar,
 #app #main-content #view-dashboard.view > .toolbar {padding:12px}
 #app #main-content #view-clients #client-base-panel > .toolbar::before,
 #app #main-content #view-dashboard.view > .toolbar::before {display:none}
 #app #main-content #view-clients #client-base-panel > .toolbar > .toolbar-filter > .dialog-field-caption,
 #app #main-content #view-dashboard.view > .toolbar > .toolbar-filter > .dialog-field-caption {min-height:30px;padding:5px 9px;border-radius:7px;background:var(--v7-section-header);font-size:11px}
}
@media(max-width:640px) {
 :root body > dialog#appointment-dialog .appointment-payment-heading > .appointment-payment-state {flex-basis:100%;white-space:normal}
}

/* Separate the payment totals, service settlement and wallet without changing checkout. */
:root body > dialog#appointment-dialog .appointment-payment-panel {background:color-mix(in srgb,var(--booking-input) 70%,var(--booking-canvas));border-color:var(--booking-line)}
:root body > dialog#appointment-dialog .appointment-payment-summary {display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0;margin:0 0 18px;border:1px solid var(--booking-line);border-radius:11px;background:var(--booking-band)}
:root body > dialog#appointment-dialog .appointment-payment-summary > div {display:grid;grid-column:auto;align-content:start;align-items:start;gap:8px;min-width:0;min-height:104px;padding:14px 16px;border:0;border-radius:0;background:transparent}
:root body > dialog#appointment-dialog .appointment-payment-summary > div + div {border-left:1px solid var(--booking-line)}
:root body > dialog#appointment-dialog .appointment-payment-summary span {margin:0;color:var(--booking-muted);opacity:1;font-size:12px;line-height:1.5}
:root body > dialog#appointment-dialog .appointment-payment-summary > div strong {color:var(--booking-ink);font:650 24px/1.3 var(--font-heading);font-variant-numeric:tabular-nums}
:root body > dialog#appointment-dialog .appointment-payment-summary .payment-remaining strong {font-size:30px}
:root body > dialog#appointment-dialog .appointment-payment-plan {gap:10px;margin:16px 0;padding:14px 16px;border:1px solid var(--booking-line);border-radius:12px;background:var(--booking-surface)}
:root body > dialog#appointment-dialog .appointment-payment-plan > strong {display:block;margin:-14px -16px 2px;padding:11px 16px;border-bottom:1px solid var(--booking-line);border-radius:11px 11px 0 0;background:var(--booking-band);color:var(--booking-ink);font:650 14px/1.5 var(--font-heading)}
:root body > dialog#appointment-dialog .appointment-payment-plan p {margin:0;line-height:1.6}
:root body > dialog#appointment-dialog .appointment-payment-plan small {color:var(--booking-muted);line-height:1.5}
:root body > dialog#appointment-dialog .appointment-payment-plan .appointment-package-hint {padding:2px 0 2px 10px;border-left:2px solid var(--booking-line);border-radius:0;background:transparent;color:var(--booking-muted);font-size:12px}
:root body > dialog#appointment-dialog .appointment-package-planned {margin:0 0 16px;padding:10px 12px;border:1px solid var(--v7-planned-line);border-radius:8px;background:color-mix(in srgb,var(--v7-planned-bg) 42%,var(--booking-input));color:var(--booking-ink);font-size:12px;line-height:1.6}
:root body > dialog#appointment-dialog .appointment-wallet-balance {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin:16px 0;padding:12px 2px;border:0;border-block:1px solid var(--booking-divider);border-radius:0;background:transparent;color:var(--booking-muted);font-size:13px}
:root body > dialog#appointment-dialog .appointment-wallet-balance strong {color:var(--booking-ink);font-size:16px;white-space:nowrap}
:root body > dialog#appointment-dialog .appointment-payment-complete {margin:14px 0;padding:11px 13px;border-left:3px solid var(--payment-color,var(--booking-line));border-radius:0 8px 8px 0;background:var(--booking-surface);color:var(--booking-ink);font-size:13px;line-height:1.6}
:root body > dialog#appointment-dialog .appointment-payment-panel[data-payment-tone=planned] .appointment-payment-complete {border-left-color:var(--v7-planned-line)}
:root body > dialog#appointment-dialog .appointment-payment-history {margin:0;border-bottom:1px solid var(--booking-divider)}
:root body > dialog#appointment-dialog .appointment-payment-history > summary {padding:12px 2px;color:var(--booking-muted);font-size:12px}
:root body > dialog#appointment-dialog .appointment-payment-history[open] > summary {color:var(--booking-ink)}
:root body > dialog#appointment-dialog .appointment-payment-history > p {padding:0 2px 12px;color:var(--booking-muted)}
/* Only settled payment tones make the pinned cost card green. */
:root :is(body > dialog#appointment-dialog,aside.workspace-visit-preview):is([data-payment-tone=paid],[data-payment-tone=cash],[data-payment-tone=card],[data-payment-tone=transfer],[data-payment-tone=deposit],[data-payment-tone=package],[data-payment-tone=mixed]) .booking-summary-pin {background:var(--booking-total-bg);border-color:var(--booking-total-line);box-shadow:none}
:root :is(body > dialog#appointment-dialog,aside.workspace-visit-preview):is([data-payment-tone=paid],[data-payment-tone=cash],[data-payment-tone=card],[data-payment-tone=transfer],[data-payment-tone=deposit],[data-payment-tone=package],[data-payment-tone=mixed]) .booking-summary-cost > span {color:var(--booking-ink)}
@media(max-width:1100px) and (min-width:801px),(max-width:600px) {
 :root body > dialog#appointment-dialog .appointment-payment-summary {grid-template-columns:repeat(2,minmax(0,1fr))}
 :root body > dialog#appointment-dialog .appointment-payment-summary > div {min-height:88px;padding:12px}
 :root body > dialog#appointment-dialog .appointment-payment-summary > .payment-remaining {display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:12px;min-height:68px;border-bottom:1px solid var(--booking-line)}
 :root body > dialog#appointment-dialog .appointment-payment-summary > .payment-received {border-left:0}
 :root body > dialog#appointment-dialog .appointment-payment-summary > div strong {font-size:22px}
 :root body > dialog#appointment-dialog .appointment-payment-summary .payment-remaining strong {font-size:28px}
}

/* Checkout package balances share the sold-package card's heading and progress palette. */
:root body > dialog#appointment-dialog .appointment-payment-plan > strong {background:var(--v7-section-header);border-bottom-color:var(--v7-section-header-line);color:#fff;font-size:15px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package {display:grid;gap:12px;min-width:0;padding:2px 0 6px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package-name {display:grid;gap:3px;min-width:0}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package-name > strong {color:var(--v7-ink);font-size:14px;font-weight:550;overflow-wrap:anywhere}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .package-balance {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 20px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .premium-sessions {display:grid;min-width:0;gap:8px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .premium-sessions > span {color:var(--v7-ink);font-size:13px;line-height:1.5}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .sessions-left {padding:0 3px;color:var(--balance-ink,var(--v7-ink));font:650 26px/1.3 var(--font-heading);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package progress {display:block;width:100%;height:8px;border:0;border-radius:10px;overflow:hidden;background:var(--v7-divider)}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package progress::-webkit-progress-bar {background:var(--v7-divider);border-radius:10px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package progress::-webkit-progress-value {background:var(--balance-ink,var(--v7-muted));border-radius:10px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package progress::-moz-progress-bar {background:var(--balance-ink,var(--v7-muted));border-radius:10px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .package-expiry {gap:5px;align-self:center;padding:0}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .package-expiry > span {font-size:11px;color:var(--v7-muted)}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .package-expiry > strong {font-size:15px;color:var(--v7-ink);font-weight:600}
@media(max-width:450px) {
 body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .package-balance {grid-template-columns:minmax(0,1fr);gap:12px}
 body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package .package-expiry {display:flex;align-items:baseline;justify-content:space-between;gap:8px;text-align:left}
}
/* A settled service needs only its package balance; the outcome is shown below the wallet. */
:root body > dialog#appointment-dialog .appointment-payment-plan:has(.appointment-checkout-package[data-package-state=consumed]) {gap:8px;padding:10px 14px}
:root body > dialog#appointment-dialog .appointment-payment-plan:has(.appointment-checkout-package[data-package-state=consumed]) > strong {margin:-10px -14px 0;padding:9px 14px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-checkout-package[data-package-state=consumed] {gap:8px;padding:0}

/* Readable captions and controls use the available space instead of miniature type. */
:root {--font:"Manrope","Segoe UI",system-ui,sans-serif;--font-heading:"Manrope","Segoe UI",system-ui,sans-serif;--font-body:var(--font);--v7-body-size:15px;--v7-caption-size:13px;--v7-control-size:15px}
body {font-size:var(--v7-body-size);font-weight:450;line-height:1.55}
#app .topbar .tab {font-size:14px;line-height:1.45}
#app .topbar :is(#signed-in-name,#notifications-btn,#logout-btn),
#app .topbar > .theme-toggle,
#app .topbar #calendar-navigation .calendar-search-disclosure > summary {font-size:13px}
#app #main-content > .view:not(#view-calendar) {font-size:var(--v7-body-size)}
#app #main-content > .view:not(#view-calendar) :is(p.muted,small,.section-description,.list-scope-note,.list-count,.page-heading p) {font-size:var(--v7-caption-size);line-height:1.6}
#app #main-content > .view:not(#view-calendar) :is(button,.import-btn,.import-btn span) {font-size:14px;line-height:1.45}
#app #main-content > .view:not(#view-calendar) :is(input:not([type=checkbox],[type=radio],[type=color]),select,.bl-select-trigger,.date-display) {font-size:var(--v7-control-size)}
#app #main-content > .view:not(#view-calendar) :is(th,.dialog-field-caption,.toolbar-filter > span) {font-size:13px;line-height:1.45}
#app #main-content > .view:not(#view-calendar) td {font-size:14px;line-height:1.5}
#app #main-content #view-clients #clients-list .client-sort-button {font-size:13px}
#app #main-content #view-clients #clients-list .client-name-link {font-size:15px}
#app #main-content #view-clients #new-client-btn {font-size:14px}
#app #main-content #view-clients #client-base-panel > .toolbar > .toolbar-filter > .dialog-field-caption,
#app #main-content #view-dashboard.view > .toolbar > .toolbar-filter > .dialog-field-caption {font-size:14px}
#app #main-content #view-clients :is(.clients-level-copy > span,.clients-level-number,.clients-level-heading,.premium-client-tools) {font-size:13px}
#app #main-content #view-clients .client-section-nav button,
#app #main-content .abonement-section-nav button {font-size:14px}
#app #main-content .package-card-header h3 {font-size:17px;line-height:1.5}
#app #main-content .package-type-card .package-card-header h3 {font-size:16px}
#app #main-content #view-abonements.view .package-type-card .package-card-actions button {font-size:14px}
#app #main-content > .view:not(#view-calendar) :is(.status-chip,.loyalty-chip) {font-size:13px;line-height:1.5}
#app #main-content .package-type-card .package-type-details {column-gap:14px}
/* Give all three package terms the card's full width, including two-digit packages. */
#app #main-content #view-abonements.view .package-card.package-type-card {grid-template-rows:auto auto auto auto;grid-template-areas:'heading heading' 'count price' 'terms terms' 'actions actions'}
#app #main-content .package-type-card .package-card-body {display:contents}
#app #main-content .package-type-card .package-card-header {min-height:68px}
#app #main-content .package-type-card .package-type-price {grid-area:price;min-width:0;min-height:62px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;padding:10px 14px 0 8px}
#app #main-content .package-type-card .package-type-details {grid-area:terms;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-flow:column;gap:8px 12px;padding:10px 14px 12px;margin:6px 0 0;border-top:1px solid #ffffff29}
#app #main-content .package-type-card .package-type-details > div {display:contents}
#app #main-content :is(.package-type-details dt,.package-expiry > span,.package-finance dt,.service-parameters dt,.settings-section > .section-description,.report-section .muted) {font-size:13px;line-height:1.5}
#app #main-content :is(.package-type-details dd,.service-parameters dd,.package-expiry strong) {font-size:16px;line-height:1.5}
#app #main-content .package-balance .premium-sessions > span {font-size:15px}
#app #main-content #view-dashboard .metric-card .label {font-size:14px;line-height:1.5}
#app #main-content #view-dashboard .metric-card {min-height:114px}
#app #main-content #view-calendar :is(.calendar-visits-count,.calendar-context-bar > p,.calendar-team-details,.calendar-legend-menu > summary) {font-size:13px}
:root body > dialog {font-size:var(--v7-body-size)}
:root body > dialog.form-dialog:not(#appointment-dialog) :is(.field-label,.dialog-field-caption,.required-legend,.dialog-field-readonly,.dialog-footer button) {font-size:14px;line-height:1.5}
:root body > dialog.form-dialog:not(#appointment-dialog) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select:not(.bl-select-native),textarea,.bl-select-trigger,.date-display) {font-size:15px}
:root body > dialog#appointment-dialog {font-size:15px}
:root body > dialog#appointment-dialog .booking-window-nav button {font-size:14px}
:root body > dialog#appointment-dialog :is(.booking-header-copy p,.booking-window-nav .required-legend,.booking-section-heading p,.booking-status-note,.booking-time-options > summary,.booking-time-options .appointment-slot-hint) {font-size:13px;line-height:1.5}
:root body > dialog#appointment-dialog :is(.booking-status-option,#appointment-add-item,.booking-item-settings > summary,.booking-resource-heading,.booking-repeat-settings > summary,.booking-item-duration-settings > summary) {font-size:14px;line-height:1.5}
:root body > dialog#appointment-dialog .appointment-item-grid > .field-label {font-size:14px;line-height:1.5;grid-template-rows:minmax(21px,auto) auto}
:root body > dialog#appointment-dialog .appointment-item-grid .bl-select-trigger {font-size:15px}
:root body > dialog#appointment-dialog :is(.appointment-item-money-field .appointment-item-calc-label,#appointment-items .appt-sessions-field .muted,.booking-service-exact-duration,.booking-service-exact-duration > summary) {font-size:13px;line-height:1.5}
:root body > dialog#appointment-dialog #appointment-items .appointment-item-head > button {font-size:13px}
:root body > dialog#appointment-dialog [data-service-motion-toggle] {font-size:13px;line-height:1.5;min-height:32px}
:root body > dialog#appointment-dialog :is(.appointment-item-timing,.service-time-duration) {font-size:14px}
:root body > dialog#appointment-dialog .appointment-payment-heading > button {font-size:14px}
:root body > dialog#appointment-dialog :is(.appointment-payment-summary span,.appointment-payment-plan small,.appointment-payment-plan .appointment-package-hint,.appointment-package-planned,.appointment-payment-history > summary) {font-size:13px;line-height:1.55}
:root body > dialog#appointment-dialog :is(.appointment-payment-complete,.appointment-wallet-balance,.appointment-payment-plan p,.appointment-payment-plan label) {font-size:14px;line-height:1.6}
:root body > dialog#appointment-dialog .appointment-checkout-package-name > strong {font-size:15px}
:root body > dialog#appointment-dialog .appointment-checkout-package .premium-sessions > span {font-size:14px}
:root body > dialog#appointment-dialog .appointment-checkout-package .package-expiry > span {font-size:13px;line-height:1.5}
:root :is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary :is(.booking-summary-heading,.booking-summary-services h4) {font-size:12px;line-height:1.5;letter-spacing:.8px}
:root :is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary :is(.booking-summary-client button,.booking-summary-visit > span,.booking-summary-visit > div,.booking-summary-metrics span,.booking-summary-cost span,[data-booking-summary=payment] > div,.booking-summary-note,.booking-summary-services span,.booking-summary-services small) {font-size:13px;line-height:1.5}
:root :is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary :is(.booking-summary-payment-link,.booking-summary-services strong) {font-size:14px;line-height:1.5}
:root :is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-visit :is([data-booking-summary=status],[data-workspace-preview=status]) {font-size:13px}
:root :is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-services li {gap:5px}
:root body > dialog#appointment-dialog .dialog-footer button {font-size:14px}
:root body > dialog#client-drawer.client-profile-compact :is(.client-profile-finance-card > span,.client-drawer-stat .label,.client-funds-help summary,.client-profile-aside .client-profile-section-heading > span,.client-density-package-heading > span) {font-size:13px;line-height:1.5}
:root body > dialog#client-drawer.client-profile-compact :is(.client-drawer-item-meta,.client-drawer-finance-row,.client-profile-finance-help summary,.client-drawer-actions > button,.family-package-card,.family-packages p,.client-wallet p) {font-size:14px;line-height:1.55}
@media(min-width:1500px) {
 :root {--v7-body-size:16px;--v7-caption-size:14px;--v7-control-size:16px}
 #app #main-content > .view:not(#view-calendar) :is(.dialog-field-caption,.toolbar-filter > span) {font-size:14px}
 :root body > dialog#appointment-dialog :is(.booking-section-heading p,.appointment-payment-summary span,.appointment-checkout-package .package-expiry > span) {font-size:14px}
}
@media(max-width:640px) {
 :root body > dialog.form-dialog:not(#appointment-dialog) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select:not(.bl-select-native),textarea,.bl-select-trigger,.date-display) {font-size:16px}
 :root body > dialog#appointment-dialog .booking-time-picker .bl-select-trigger {font-size:14px}
}
@media(max-width:1000px) {
 #app #main-content #view-clients #client-base-panel > .toolbar > .toolbar-filter > .dialog-field-caption,
 #app #main-content #view-dashboard.view > .toolbar > .toolbar-filter > .dialog-field-caption {font-size:13px}
}

/* Client profile: V7 surfaces around the existing live sections and actions. */
:root body > dialog#client-drawer.client-profile-dense .client-wallet {border-top:1px solid var(--v7-line)!important}
:root body > dialog#client-drawer.client-profile-dense :is(.client-profile-packages,.client-wallet,.family-packages) > .client-profile-section-heading {
 margin:-14px -14px 12px;padding:10px 14px;min-height:44px;gap:8px 12px;align-items:center;
 border-bottom:1px solid var(--v7-section-header-line);border-radius:11px 11px 0 0;background:var(--v7-section-header);color:#fff;
}
:root body > dialog#client-drawer.client-profile-dense :is(.client-wallet,.family-packages) > .client-profile-section-heading {margin-top:-12px}
:root body > dialog#client-drawer.client-profile-dense .client-profile-section-heading h3 {font-size:16px;line-height:1.45}
:root body > dialog#client-drawer.client-profile-dense :is(.client-profile-packages,.client-wallet,.family-packages) > .client-profile-section-heading h3 {color:#fff;padding:0;border:0}
:root body > dialog#client-drawer.client-profile-dense :is(.client-profile-packages,.client-wallet,.family-packages) > .client-profile-section-heading h3::before {display:none}
:root body > dialog#client-drawer.client-profile-dense .client-density-package-heading > span {color:#f1dce2}
:root body > dialog#client-drawer.client-profile-dense #client-drawer-add-abonement {background:#ffffff12;border-color:#ffffff50;color:#fff;white-space:normal}
:root body > dialog#client-drawer.client-profile-dense #client-drawer-add-abonement:hover {background:#ffffff25}
:root body > dialog#client-drawer.client-profile-dense [data-wallet-balance] {color:#fff;font-size:24px;line-height:1.3;overflow-wrap:anywhere}
:root body > dialog#client-drawer.client-profile-dense .family-package-card {border:1px solid var(--v7-line);background:var(--v7-panel);border-radius:9px;overflow-wrap:anywhere}
:root body > dialog#client-drawer.client-profile-dense .family-package-card > strong {display:block;font-size:15px;line-height:1.5}
:root body > dialog#client-drawer.client-profile-dense .family-members > span {align-items:start;flex-wrap:wrap;border-bottom:1px solid var(--v7-divider);font-size:14px}
:root body > dialog#client-drawer.client-profile-dense .family-members button {min-height:36px;padding:6px 10px;font-size:13px;margin-left:auto;white-space:normal}
:root body > dialog#client-drawer.client-profile-dense :is(.wallet-history article,.family-event) {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;border-color:var(--v7-divider);font-size:14px;line-height:1.5}
:root body > dialog#client-drawer.client-profile-dense :is(.wallet-history article,.family-event) > :first-child {min-width:0;overflow-wrap:anywhere}
:root body > dialog#client-drawer.client-profile-dense :is(.wallet-history article,.family-event) > strong {color:var(--v7-ink);font-variant-numeric:tabular-nums;text-align:right;white-space:normal;overflow-wrap:anywhere;max-width:140px}
:root body > dialog#client-drawer.client-profile-dense :is(.wallet-history small,.family-event small) {font-size:13px;line-height:1.5;color:var(--v7-muted)}
:root body > dialog#client-drawer.client-profile-dense :is(.wallet-history article,.family-event):last-child {border-bottom:0}
:root body > dialog#client-drawer.client-profile-dense :is(.client-wallet,.family-packages) summary {font-size:14px;padding-block:4px;overflow-wrap:anywhere}
:root body > dialog#client-drawer.client-profile-dense .wallet-operation[open] {padding-bottom:12px;border-bottom:1px solid var(--v7-divider)}
:root body > dialog#client-drawer.client-profile-dense .wallet-confirm {align-items:start;line-height:1.55}
:root body > dialog#client-drawer.client-profile-dense .wallet-confirm input {margin-top:3px}
:root body > dialog#client-drawer.client-profile-dense :is(.wallet-fields,.family-package-card) label {font-size:14px;color:var(--v7-muted);min-width:0}
:root body > dialog#client-drawer.client-profile-dense :is(.wallet-fields,.family-package-card) :is(input,select,.bl-select-trigger) {min-height:42px;font-size:15px;background:var(--v7-input);color:var(--v7-ink);border-color:var(--v7-line)}
:root body > dialog#client-drawer.client-profile-dense .client-drawer-body > details:is(.client-profile-history,.client-profile-training-debts,.client-density-completed) {padding:0 14px 12px}
:root body > dialog#client-drawer.client-profile-dense .client-drawer-body > details:is(.client-profile-history,.client-profile-training-debts,.client-density-completed) > summary {
 margin:0 -14px -12px;padding:12px 14px;border:0;border-radius:11px;background:var(--v7-section-header);color:#fff;font-size:15px;line-height:1.55;font-weight:600;overflow-wrap:anywhere;
}
:root body > dialog#client-drawer.client-profile-dense .client-drawer-body > details:is(.client-profile-history,.client-profile-training-debts,.client-density-completed)[open] > summary {margin-bottom:12px;border-radius:11px 11px 0 0;border-bottom:1px solid var(--v7-section-header-line)}
:root body > dialog#client-drawer.client-profile-dense .client-visit-row {display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px 0;margin:0;border-color:var(--v7-divider);background:transparent}
:root body > dialog#client-drawer.client-profile-dense .client-visit-date {min-width:0;gap:4px}
:root body > dialog#client-drawer.client-profile-dense .client-visit-date :is(strong,span) {font-size:13px}
:root body > dialog#client-drawer.client-profile-dense .client-visit-content > strong {font-size:15px;overflow-wrap:anywhere}
:root body > dialog#client-drawer.client-profile-dense .client-visit-content > :is(span,small) {font-size:13px;overflow-wrap:anywhere}
:root body > dialog#client-drawer.client-profile-dense .client-visit-row > button {margin:0;max-width:none;min-height:38px;padding:8px 10px;font-size:13px}
:root body > dialog#client-drawer.client-profile-dense .client-visit-labels > span {font-size:13px;line-height:1.45;white-space:normal}
/* Actual debt uses the same palette as the service-debt cards; future payments retain their tone. */
:root body > dialog#client-drawer .client-visit-labels > .appointment-payment-state[data-payment-tone=debt] {--payment-color:#e56b6b;--payment-text:#ffd2d2;--payment-surface:#432729}
:root[data-theme=light] body > dialog#client-drawer .client-visit-labels > .appointment-payment-state[data-payment-tone=debt] {--payment-color:#dba5a0;--payment-text:#922b29;--payment-surface:#fcebe9}
:root body > dialog#client-drawer.client-profile-dense .client-profile-service > span {font-size:14px;line-height:1.5}
:root body > dialog#client-drawer.client-profile-dense .client-profile-service small {font-size:13px}
:root body > dialog#client-drawer :is(.client-drawer-empty,.client-drawer-loading,.client-drawer-error) {padding:14px;border:1px dashed var(--v7-line);border-radius:9px;background:var(--v7-panel);color:var(--v7-muted);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
:root body > dialog#client-drawer.client-profile-dense .client-density-upcoming-empty .client-drawer-empty {padding:0;border:0;background:transparent}
:root body > dialog#client-drawer.client-profile-dense :is([data-funds-message],#client-profile-book-error):not(:empty) {padding:12px;border:1px solid var(--profile-due-ink);border-radius:9px;background:color-mix(in srgb,var(--profile-due-ink) 9%,var(--v7-panel));color:var(--v7-ink);font-size:14px;line-height:1.55;overflow-wrap:anywhere}
:root body > dialog#client-drawer.client-profile-dense :is(.client-drawer-title,.client-drawer-subtitle,.client-drawer-note) {overflow-wrap:anywhere}

/* Related finance windows keep their original forms, confirmation and handlers. */
:root body > dialog:is(#client-package-debit-dialog,#abonement-cancel-dialog,#abonement-payment-dialog,#abonement-receipt-dialog) {max-height:calc(100dvh - 24px);padding:0;overflow:hidden;border:1px solid var(--v7-line);border-radius:14px;background:var(--v7-surface);color:var(--v7-ink)}
:root body > dialog:is(#client-package-debit-dialog,#abonement-cancel-dialog,#abonement-payment-dialog,#abonement-receipt-dialog)[open],
:root body > dialog:is(#abonement-cancel-dialog,#abonement-payment-dialog) > form {display:flex;flex-direction:column;min-height:0}
:root body > dialog:is(#abonement-cancel-dialog,#abonement-payment-dialog) > form {max-height:calc(100dvh - 26px);overflow:hidden}
:root body > dialog:is(#client-package-debit-dialog,#abonement-cancel-dialog,#abonement-payment-dialog,#abonement-receipt-dialog) :is(.dialog-header,.client-package-debit-header) {flex:none;margin:0;padding:14px 18px;background:var(--v7-brand);border-bottom:1px solid var(--v7-section-header-line);color:#fff;gap:12px}
:root body > dialog:is(#client-package-debit-dialog,#abonement-cancel-dialog,#abonement-payment-dialog,#abonement-receipt-dialog) :is(.dialog-header,.client-package-debit-header) h2 {margin:0;font-size:21px;line-height:1.4;color:#fff;overflow-wrap:anywhere}
:root body > dialog#client-package-debit-dialog .client-package-debit-header p {color:#f1dce2;font-size:14px;overflow-wrap:anywhere}
:root body > dialog:is(#client-package-debit-dialog,#abonement-cancel-dialog,#abonement-payment-dialog,#abonement-receipt-dialog) :is(.icon-close,[data-close]) {min-width:38px;min-height:38px;flex-shrink:0}
:root body > dialog:is(#client-package-debit-dialog,#abonement-cancel-dialog,#abonement-payment-dialog,#abonement-receipt-dialog) :is(.client-package-debit-body,.package-cancel-body,.dialog-body,.sale-receipt-body) {flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 18px;scrollbar-width:thin}
:root body > dialog:is(#abonement-cancel-dialog,#abonement-payment-dialog) :is(.dialog-footer,.package-cancel-actions) {flex:none;padding:12px 18px;border-color:var(--v7-divider);background:var(--v7-surface)}
:root body > dialog#client-package-debit-dialog [data-debit-message]:not(:empty),
:root body > dialog#abonement-cancel-dialog :is(.package-cancel-error,.package-cancel-blocked):not(:empty) {border:1px solid var(--v7-line);border-radius:9px;background:var(--v7-panel);color:var(--v7-ink);font-size:14px;line-height:1.55}
:root body > dialog#client-package-debit-dialog :is(.client-package-empty,.client-package-confirm,.client-package-debit-success) {padding:14px;border:1px solid var(--v7-line);border-radius:10px;background:var(--v7-panel);font-size:15px;line-height:1.6;overflow-wrap:anywhere}
:root body > dialog#client-package-debit-dialog [data-debit-visit] {background:var(--v7-panel);border-color:var(--v7-line);min-width:0;overflow-wrap:anywhere}
:root body > dialog#client-package-debit-dialog [data-debit-visit]:hover {border-color:var(--ws-red)}
:root body > dialog#client-package-debit-dialog [data-debit-visit] b {white-space:normal;text-align:right}
:root body > dialog#abonement-payment-dialog :is(input,select,.bl-select-trigger) {background:var(--v7-input);color:var(--v7-ink);border-color:var(--v7-line);font-size:15px;min-height:42px}
:root body > dialog#abonement-payment-dialog .dialog-body > label {display:grid;gap:6px;margin-top:12px;font-size:14px;min-width:0}
:root body > dialog#abonement-payment-dialog #abonement-payment-label {overflow-wrap:anywhere;font-size:14px;line-height:1.55}
:root body > dialog#abonement-cancel-dialog .package-cancel-summary > div {flex-wrap:wrap;gap:4px 12px}
:root body > dialog#abonement-cancel-dialog .package-cancel-summary dd {margin-left:auto;white-space:normal;overflow-wrap:anywhere}
:root body > dialog#appointment-dialog [data-refund-fields]:not([hidden]) {display:grid;gap:12px;margin-top:12px;padding:14px;border:1px solid var(--v7-line);border-radius:10px;background:var(--v7-panel);font-size:14px;line-height:1.55}
:root body > dialog#appointment-dialog .appointment-refund-reason {display:grid;gap:7px;color:var(--v7-muted)}
:root body > dialog#appointment-dialog [data-refund-reason] {min-height:84px;width:100%;box-sizing:border-box;resize:vertical;font:inherit;color:var(--v7-ink);background:var(--v7-input);border:1px solid var(--v7-line);border-radius:8px;padding:10px}
:root body > dialog#appointment-dialog [data-confirm-refund] {justify-self:start;white-space:normal}
@media(max-width:640px) {
 :root body > dialog#client-drawer.client-profile-dense .client-visit-row {grid-template-columns:88px minmax(0,1fr);gap:8px 12px}
 :root body > dialog#client-drawer.client-profile-dense .client-visit-row > button {grid-column:2;justify-self:start}
 :root body > dialog#client-drawer.client-profile-dense .client-profile-header-actions {flex-wrap:wrap}
 :root body > dialog#client-drawer.client-profile-dense :is(.wallet-fields,.family-package-card) :is(input,select,.bl-select-trigger),
 :root body > dialog#abonement-payment-dialog :is(input,select,.bl-select-trigger),
 :root body > dialog#appointment-dialog [data-refund-reason] {font-size:16px}
 :root body > dialog#client-drawer.client-profile-dense .client-drawer-finance {grid-template-columns:repeat(2,minmax(0,1fr))}
 :root body > dialog#client-drawer.client-profile-dense .client-drawer-finance-row:last-child {grid-column:1 / -1}
 :root body > dialog:is(#client-package-debit-dialog,#abonement-cancel-dialog,#abonement-payment-dialog,#abonement-receipt-dialog) :is(.dialog-header,.client-package-debit-header,.client-package-debit-body,.package-cancel-body,.dialog-body,.sale-receipt-body) {padding:12px 14px}
}

/* Report tabs expose the existing blocks without reloading or resetting their fields. */
#app #main-content #view-dashboard .analytics-tabs {display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0}
#app #main-content #view-dashboard :is(.analytics-tabs,[data-analytics-panel])[hidden] {display:none}
#app #main-content #view-dashboard .analytics-tabs > button {min-height:42px;padding:9px 15px;border:1px solid var(--v7-line);border-radius:9px;background:var(--v7-surface);color:var(--v7-ink);font-size:14px;line-height:1.5;font-weight:550;white-space:normal}
#app #main-content #view-dashboard .analytics-tabs > button:hover {border-color:var(--ws-red);background:var(--v7-panel)}
#app #main-content #view-dashboard .analytics-tabs > button[aria-selected=true] {background:var(--v7-section-header);border-color:var(--v7-section-header-line);color:#fff}
#app #main-content #view-dashboard .analytics-summary-panel {display:grid;gap:12px;min-width:0}
#app #main-content #view-dashboard .analytics-summary-panel > :is(.premium-list-heading,.cards,.analytics-structure) {margin:0}
#app #main-content #view-dashboard [data-analytics-panel]:focus-visible,
#app #main-content #view-dashboard .analytics-tabs > button:focus-visible {outline:2px solid var(--ws-red);outline-offset:3px}

/* Refund presentation reads the existing quote; confirmation remains the original action. */
:root body > dialog#appointment-dialog .appointment-refund-summary {display:grid;gap:10px;min-width:0}
:root body > dialog#appointment-dialog .appointment-refund-summary h4 {margin:0;color:var(--v7-ink);font-size:16px;font-weight:650;line-height:1.5}
:root body > dialog#appointment-dialog .appointment-refund-summary p {margin:0;color:var(--v7-muted);font-size:14px;line-height:1.55}
:root body > dialog#appointment-dialog .appointment-refund-summary dl {margin:0;display:grid;min-width:0;border:1px solid var(--v7-line);border-radius:9px;background:var(--v7-surface);overflow:hidden}
:root body > dialog#appointment-dialog .appointment-refund-summary dl > div {display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;padding:10px 12px;border-bottom:1px solid var(--v7-divider)}
:root body > dialog#appointment-dialog .appointment-refund-summary dl > div:last-child {border-bottom:0}
:root body > dialog#appointment-dialog .appointment-refund-summary dt {min-width:0;color:var(--v7-muted);font-size:14px;overflow-wrap:anywhere}
:root body > dialog#appointment-dialog .appointment-refund-summary dd {margin:0;flex-shrink:0;color:var(--v7-ink);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
:root body > dialog#appointment-dialog .appointment-refund-summary .appointment-refund-total {background:var(--v7-panel)}
:root body > dialog#appointment-dialog .appointment-refund-reasons {display:grid;gap:7px;min-width:0;padding-top:12px;border-top:1px solid var(--v7-divider);color:var(--v7-muted)}
:root body > dialog#appointment-dialog .appointment-refund-reasons > div {display:flex;flex-wrap:wrap;gap:7px}
:root body > dialog#appointment-dialog .appointment-refund-reasons button {min-height:38px;padding:7px 10px;border:1px solid var(--v7-line);border-radius:8px;background:var(--v7-surface);color:var(--v7-ink);font-size:13px;line-height:1.5;text-align:left;white-space:normal;overflow-wrap:anywhere}
:root body > dialog#appointment-dialog .appointment-refund-reasons button:hover {border-color:var(--ws-red)}
:root body > dialog#appointment-dialog .appointment-refund-reason small {font-size:13px;line-height:1.5}
@media(max-width:480px) {
 #app #main-content #view-dashboard .analytics-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #app #main-content #view-dashboard .analytics-tabs > button {min-width:0;padding:9px 8px}
 :root body > dialog#appointment-dialog .appointment-refund-summary dl > div {flex-wrap:wrap;gap:4px 12px}
 :root body > dialog#appointment-dialog .appointment-refund-summary dd {margin-left:auto}
}

/* The day list shares the calendar's loaded rows and keeps the grid's geometry. */
#app #view-calendar .workspace-calendar-view {display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--v7-line);border-radius:9px;background:var(--v7-input)}
#app #view-calendar .workspace-calendar-view[hidden] {display:none}
#app #view-calendar .workspace-calendar-view > button {min-height:32px;padding:6px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--v7-muted);font-size:13px;line-height:1.5;white-space:nowrap}
#app #view-calendar .workspace-calendar-view > button[aria-pressed=true] {background:var(--v7-section-header);border-color:var(--v7-section-header-line);color:#fff}
#app #view-calendar .workspace-calendar-stage > :is(.calendar-scroll,.workspace-day-list) {grid-column:1;grid-row:1}
#app #view-calendar .workspace-calendar-stage > .workspace-visit-preview {grid-column:2;grid-row:1}
#app #view-calendar[data-calendar-view=list] .workspace-calendar-stage > .calendar-scroll {visibility:hidden;pointer-events:none}
#app #view-calendar[data-calendar-view=list] #calendar-load-state {display:none}
#app #view-calendar[data-calendar-view=list]:has(.workspace-day-list[data-list-empty=true]) .workspace-calendar-state {display:none}
#app #view-calendar .workspace-day-list {display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;padding:12px;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid var(--v7-line);border-radius:12px;background:var(--v7-input)}
#app #view-calendar .workspace-day-list[hidden] {display:none}
#app #view-calendar .workspace-day-list > ol {display:grid;align-content:start;gap:10px;margin:0;padding:0;list-style:none}
#app #view-calendar .workspace-day-item {min-width:0;margin:0;padding:0}
#app #view-calendar .workspace-day-card {display:grid;grid-template-columns:105px minmax(0,1fr) minmax(140px,220px);align-items:start;gap:12px 18px;width:100%;min-width:0;box-sizing:border-box;margin:0;padding:16px;border:1px solid var(--v7-line);border-left:3px solid var(--v7-section-header-line);border-radius:10px;background:var(--v7-surface);color:var(--v7-ink);font:15px/1.5 var(--font);text-align:left;white-space:normal;box-shadow:none}
#app #view-calendar button.workspace-day-card:hover {background:var(--v7-panel);border-color:var(--ws-red)}
#app #view-calendar .workspace-day-card[aria-pressed=true] {outline:2px solid var(--ws-red);outline-offset:-2px}
#app #view-calendar :is(.workspace-day-card,.workspace-calendar-view > button):focus-visible {outline:2px solid var(--ws-red);outline-offset:2px}
#app #view-calendar .workspace-day-time {font-size:15px;font-weight:650;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums}
#app #view-calendar .workspace-day-copy {display:grid;min-width:0;gap:5px}
#app #view-calendar .workspace-day-title {font-size:16px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
#app #view-calendar :is(.workspace-day-service,.workspace-day-detail,.workspace-day-staff,.workspace-day-payment,.workspace-day-warning) {font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#app #view-calendar :is(.workspace-day-service,.workspace-day-detail,.workspace-day-staff,.workspace-day-payment) {color:var(--v7-muted)}
#app #view-calendar .workspace-day-service {display:grid;gap:2px}
#app #view-calendar .workspace-day-service small {font-size:13px;line-height:1.5;color:var(--v7-muted)}
#app #view-calendar .workspace-day-staff {margin-top:3px}
#app #view-calendar .workspace-day-meta {display:flex;align-items:flex-end;flex-direction:column;gap:8px;min-width:0;text-align:right}
#app #view-calendar .workspace-day-status {--day-status:var(--v7-muted);display:inline-flex;max-width:100%;box-sizing:border-box;align-items:center;padding:3px 8px;border:1px solid color-mix(in srgb,var(--day-status) 45%,var(--v7-line));border-radius:7px;background:color-mix(in srgb,var(--day-status) 12%,var(--v7-surface));color:var(--day-status);font-size:13px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
#app #view-calendar .workspace-day-status[data-status=pending] {--day-status:var(--booking-status-pending)}
#app #view-calendar .workspace-day-status[data-status=confirmed] {--day-status:var(--booking-status-confirmed)}
#app #view-calendar .workspace-day-status[data-status=arrived] {--day-status:var(--booking-status-arrived)}
#app #view-calendar .workspace-day-status[data-status=noshow] {--day-status:var(--booking-status-noshow)}
#app #view-calendar .workspace-day-status[data-status=cancelled] {--day-status:var(--booking-status-cancelled)}
#app #view-calendar .workspace-day-price {padding:5px 10px;border:1px solid var(--v7-line);border-radius:8px;background:var(--v7-panel);color:var(--booking-ink);font-size:18px;line-height:1.5;font-weight:650;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#app #view-calendar .workspace-day-card:is([data-payment-tone=paid],[data-payment-tone=cash],[data-payment-tone=card],[data-payment-tone=transfer],[data-payment-tone=deposit],[data-payment-tone=package],[data-payment-tone=mixed]) .workspace-day-price {background:var(--booking-total-bg);border-color:var(--booking-total-line)}
#app #view-calendar .workspace-day-card[data-payment-tone=planned] :is(.workspace-day-price,.workspace-day-payment) {padding:5px 10px;border:1px solid var(--v7-planned-line);border-radius:8px;background:var(--v7-planned-bg);color:var(--v7-planned-ink)}
#app #view-calendar .workspace-day-warning {color:var(--booking-status-noshow)}
#app #view-calendar .workspace-day-card:not([data-day-kind=appointment]) {grid-template-columns:105px minmax(0,1fr);border-left-color:var(--v7-muted)}
#app #view-calendar .workspace-day-card[data-day-kind=masked] {border-style:dashed;background:var(--v7-panel)}
#app #view-calendar .workspace-day-card[data-day-kind=masked] .workspace-day-title {color:var(--v7-muted)}
#app #view-calendar .workspace-day-list-message {margin:auto;max-width:400px;padding:24px 12px;color:var(--v7-muted);text-align:center;font-size:15px;line-height:1.6}
#app #view-calendar .workspace-day-list-message[hidden] {display:none}
#app #view-calendar .workspace-day-list-message > p:first-child {margin:0 0 8px;color:var(--v7-ink);font-size:18px;font-weight:600;line-height:1.5}
#app #view-calendar .workspace-day-list-message > [data-day-list-description] {margin:0;font-size:14px;line-height:1.6}
#app #view-calendar .workspace-day-list-message button {margin-top:12px;min-height:40px;max-width:100%;padding:9px 12px;white-space:normal;border:1px solid var(--v7-line);border-radius:8px;background:var(--v7-panel);color:var(--v7-ink);font-size:14px;line-height:1.5}
@media(max-width:1000px) {
 #app #view-calendar .workspace-day-card {grid-template-columns:95px minmax(0,1fr);gap:10px 14px;padding:14px}
 #app #view-calendar .workspace-day-meta {grid-column:2;align-items:center;flex-direction:row;flex-wrap:wrap;text-align:left}
}
@media(max-width:480px) {
 #app #view-calendar .workspace-day-list {padding:8px}
 #app #view-calendar .workspace-day-card,#app #view-calendar .workspace-day-card:not([data-day-kind=appointment]) {grid-template-columns:minmax(0,1fr);gap:8px;padding:12px}
 #app #view-calendar .workspace-day-meta {grid-column:1;gap:7px}
 #app #view-calendar .workspace-day-time {font-size:14px}
 #app #view-calendar .workspace-day-title {font-size:16px}
 #app #view-calendar .workspace-day-price {margin-left:auto;font-size:16px}
}

/* Sales history uses existing transaction facts and original refund controls. */
:root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) {padding:0;overflow:hidden;max-height:calc(100dvh - 24px);border:1px solid var(--v7-line);border-radius:14px;background:var(--v7-surface);color:var(--v7-ink);--sale-completed-bg:#284338;--sale-completed-line:#537b65;--sale-returned-bg:#493039;--sale-returned-line:#8b5969}
:root[data-theme=light] body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) {--sale-completed-bg:#e9f4ec;--sale-completed-line:#98bba4;--sale-returned-bg:#faecef;--sale-returned-line:#d8a5b2}
:root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) > form {display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 26px);overflow:hidden}
:root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) .dialog-header {flex:none;padding:14px 18px;gap:12px}
:root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) .dialog-header h2 {margin:0;font-size:21px;line-height:1.4;overflow-wrap:anywhere}
:root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) .dialog-body {display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto;padding:18px;gap:14px;background:var(--v7-surface);color:var(--v7-ink);scrollbar-width:thin}
:root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) .dialog-footer {flex:none;padding:12px 18px;border-top:1px solid var(--v7-line);background:var(--v7-panel)}
:root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) :is(input,textarea) {background:var(--v7-input);color:var(--v7-ink);border-color:var(--v7-line);font-size:15px}
:root body > dialog.sales-history-dialog .operations-toolbar > input {min-width:0;flex:1 1 210px}
:root body > dialog.sales-history-dialog .operations-toolbar button {white-space:normal;min-height:40px}
:root body > dialog.sales-history-dialog .dialog-body > p.muted {margin:0;font-size:14px;line-height:1.55}
:root body > dialog.sales-history-dialog [data-list] {display:grid;gap:12px;min-width:0}
:root body > dialog.sales-history-dialog [data-list]:not([data-sales-state=ready]) + .operations-pages {display:none}
:root body > dialog.sales-history-dialog .sale-history-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,auto);align-items:start;gap:18px;padding:16px;border:1px solid var(--v7-line);border-radius:10px;background:var(--v7-panel);color:var(--v7-ink);box-shadow:none}
:root body > dialog.sales-history-dialog .sale-history-heading {display:grid;gap:5px}
:root body > dialog.sales-history-dialog .sale-history-heading > strong {font-size:16px;line-height:1.5;color:var(--v7-ink)}
:root body > dialog.sales-history-dialog :is(.sale-history-reference,.sale-history-meta,.sale-history-total > span:first-child) {font-size:13px;line-height:1.55;color:var(--v7-muted)}
:root body > dialog.sales-history-dialog .sale-history-client {margin:8px 0 3px;font-size:15px;line-height:1.5;color:var(--v7-ink)}
:root body > dialog.sales-history-dialog .sale-history-meta {margin:0}
:root body > dialog.sales-history-dialog .sale-history-facts {display:flex;flex-wrap:wrap;gap:10px 24px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--v7-divider)}
:root body > dialog.sales-history-dialog .sale-history-facts > div {display:grid;gap:2px;min-width:0}
:root body > dialog.sales-history-dialog .sale-history-facts dt {font-size:13px;color:var(--v7-muted)}
:root body > dialog.sales-history-dialog .sale-history-facts dd {margin:0;font-size:15px;color:var(--v7-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:root body > dialog.sales-history-dialog .sale-history-total {display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0;padding:10px 12px;border:1px solid var(--sale-completed-line);border-radius:9px;background:var(--sale-completed-bg)}
:root body > dialog.sales-history-dialog .sale-history-total > strong {font-size:21px;line-height:1.4;color:var(--v7-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:root body > dialog.sales-history-dialog .sale-history-status {font-size:13px;color:var(--v7-ink)}
:root body > dialog.sales-history-dialog .sale-history-total button {margin-top:7px;min-height:36px;border:1px solid var(--v7-line);background:var(--v7-surface);color:var(--v7-ink);font-size:14px}
:root body > dialog.sales-history-dialog [data-sale-state=returned] .sale-history-total {background:var(--sale-returned-bg);border-color:var(--sale-returned-line)}
:root body > dialog.sales-history-dialog .sale-history-certificate {display:grid;gap:5px;margin-top:12px;padding:12px;border:1px solid var(--v7-line);border-radius:8px;background:var(--v7-input)}
:root body > dialog.sales-history-dialog .sale-history-certificate > span {font-size:13px;color:var(--v7-muted)}
:root body > dialog.sales-history-dialog .sale-history-certificate > strong {font:600 15px/1.5 var(--font);color:var(--v7-ink);overflow-wrap:anywhere}
:root body > dialog.sales-history-dialog .sale-history-certificate p {margin:0;font-size:14px;color:var(--v7-muted)}
:root body > dialog.sales-history-dialog .sale-history-note {margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--v7-muted);white-space:pre-wrap}
:root body > dialog.sales-history-dialog .sale-history-return {margin-top:12px;padding:10px 12px;border-left:3px solid var(--sale-returned-line);border-radius:4px;background:var(--sale-returned-bg)}
:root body > dialog.sales-history-dialog .sale-history-return strong {font-size:13px;color:var(--v7-ink)}
:root body > dialog.sales-history-dialog .sale-history-return p {margin:5px 0 0;font-size:14px;white-space:pre-wrap;color:var(--v7-ink)}
:root body > dialog.sales-history-dialog .sale-history-empty {padding:36px 16px;border:1px dashed var(--v7-line);border-radius:10px;background:var(--v7-panel);color:var(--v7-muted)}
:root body > dialog.sales-history-dialog .sale-history-empty strong {font-size:17px;color:var(--v7-ink)}
:root body > dialog.sales-history-dialog .sale-history-empty p {margin:8px 0 0;font-size:14px}
:root body > dialog.operations-dialog .sale-refund-summary {padding:14px;border:1px solid var(--v7-line);border-radius:10px;background:var(--v7-panel);overflow-wrap:anywhere}
:root body > dialog.operations-dialog .sale-refund-summary > strong {font-size:16px;color:var(--v7-ink)}
:root body > dialog.operations-dialog .sale-refund-summary dl {display:grid;gap:10px;margin:14px 0 0}
:root body > dialog.operations-dialog .sale-refund-summary dl > div {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--v7-divider)}
:root body > dialog.operations-dialog .sale-refund-summary dt {font-size:14px;color:var(--v7-muted)}
:root body > dialog.operations-dialog .sale-refund-summary dd {margin:0 0 0 auto;font-size:16px;font-weight:600;color:var(--v7-ink);font-variant-numeric:tabular-nums}
:root body > dialog.operations-dialog .sale-refund-explanation {margin:0;font-size:14px;line-height:1.6;color:var(--v7-muted)}
@media(max-width:640px) {
 :root body > dialog.sales-history-dialog .operations-toolbar:first-child {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 :root body > dialog.sales-history-dialog .operations-toolbar:first-child button {padding-inline:8px;font-size:14px}
 :root body > dialog.sales-history-dialog .sale-history-row {grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
 :root body > dialog.sales-history-dialog .sale-history-total {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px}
 :root body > dialog.sales-history-dialog .sale-history-total > strong {grid-column:2;grid-row:1 / 3;text-align:right;font-size:20px}
 :root body > dialog.sales-history-dialog .sale-history-total button {grid-column:1 / -1;justify-self:start;margin-top:6px}
 :root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) :is(.dialog-header,.dialog-body,.dialog-footer) {padding:12px}
 :root body > dialog.operations-dialog:is(.sales-history-dialog,:has(.sale-refund-summary)) :is(input,textarea) {font-size:16px}
}

/* Remaining operations keep their existing controls and data sources. */
:root body > dialog.operations-workspace-dialog {padding:0;overflow:hidden;max-height:calc(100dvh - 24px);border:1px solid var(--v7-line);border-radius:14px;background:var(--v7-surface);color:var(--v7-ink)}
:root body > dialog.operations-workspace-dialog > form {display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 26px);overflow:hidden}
:root body > dialog.operations-workspace-dialog .dialog-header {flex:none;padding:14px 18px;gap:12px}
:root body > dialog.operations-workspace-dialog .dialog-header h2 {margin:0;font-size:21px;line-height:1.4;overflow-wrap:anywhere}
:root body > dialog.operations-workspace-dialog .dialog-body {flex:1 1 auto;min-height:0;overflow:auto;padding:18px;gap:14px;background:var(--v7-surface);color:var(--v7-ink);scrollbar-width:thin}
:root body > dialog.operations-workspace-dialog:not(.operations-form) .dialog-body {display:flex;flex-direction:column}
:root body > dialog.operations-workspace-dialog .dialog-footer {flex:none;padding:12px 18px;border-top:1px solid var(--v7-line);background:var(--v7-panel)}
:root body > dialog.operations-workspace-dialog :is(input,textarea,select,.bl-select-trigger) {background:var(--v7-input);color:var(--v7-ink);border-color:var(--v7-line);font-size:15px}
:root body > dialog.operations-workspace-dialog .operations-toolbar {padding:12px;border:1px solid var(--v7-line);border-radius:10px;background:var(--v7-panel);align-items:flex-end;gap:10px}
:root body > dialog.operations-workspace-dialog .operations-toolbar > input {flex:1 1 220px;min-width:0}
:root body > dialog.operations-workspace-dialog .operations-toolbar > :is(label,.bl-select) {flex:1 1 170px;min-width:0}
:root body > dialog.operations-workspace-dialog .operations-toolbar > label {font-size:13px}
:root body > dialog.operations-workspace-dialog .operations-toolbar button {min-height:40px;white-space:normal;font-size:14px}
:root body > dialog.operations-workspace-dialog .dialog-body > p.muted {margin:0;font-size:14px;line-height:1.55}
:root body > dialog.operations-workspace-dialog [data-list] {display:grid;gap:12px;min-width:0}
:root body > dialog.operations-workspace-dialog [data-list]:not([data-operation-state=ready]) + .operations-pages {display:none}
:root body > dialog.operations-workspace-dialog .operation-list-row {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;padding:16px;border:1px solid var(--v7-line);border-radius:10px;background:var(--v7-panel);color:var(--v7-ink);box-shadow:none}
:root body > dialog.operations-workspace-dialog .operation-row-main {min-width:0;overflow-wrap:anywhere}
:root body > dialog.operations-workspace-dialog .operation-row-heading {display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
:root body > dialog.operations-workspace-dialog .operation-row-heading > strong {font-size:16px;line-height:1.5;color:var(--v7-ink)}
:root body > dialog.operations-workspace-dialog .operation-state {display:inline-block;padding:3px 9px;border:1px solid var(--v7-line);border-radius:6px;background:var(--v7-surface);color:var(--v7-ink);font-size:13px;line-height:1.5}
:root body > dialog.operations-workspace-dialog [data-waitlist-state=waiting] .operation-state {background:var(--v7-planned-bg);border-color:var(--v7-planned-line);color:var(--v7-planned-ink)}
:root body > dialog.operations-workspace-dialog [data-waitlist-state=booked] .operation-state {border-color:#638a70}
:root body > dialog.operations-workspace-dialog :is([data-waitlist-state=cancelled],[data-notification-state=read]) .operation-state {color:var(--v7-muted)}
:root body > dialog.operations-workspace-dialog .operation-row-services {margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--v7-ink)}
:root body > dialog.operations-workspace-dialog .waitlist-facts {display:flex;flex-wrap:wrap;gap:10px 24px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--v7-divider)}
:root body > dialog.operations-workspace-dialog .waitlist-facts > div {display:grid;gap:3px;min-width:0}
:root body > dialog.operations-workspace-dialog .waitlist-facts dt {font-size:13px;color:var(--v7-muted)}
:root body > dialog.operations-workspace-dialog .waitlist-facts dd {margin:0;font-size:14px;line-height:1.6;color:var(--v7-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:root body > dialog.operations-workspace-dialog .operation-row-note {margin:12px 0 0;font-size:14px;line-height:1.6;white-space:pre-wrap;color:var(--v7-muted)}
:root body > dialog.operations-workspace-dialog .operation-row-client {margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--v7-ink)}
:root body > dialog.operations-workspace-dialog .operation-row-meta {margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--v7-muted)}
:root body > dialog.operations-workspace-dialog .operations-row-actions {max-width:240px;gap:8px}
:root body > dialog.operations-workspace-dialog .operations-row-actions button {min-height:38px;max-width:100%;white-space:normal;font-size:14px}
:root body > dialog.operations-workspace-dialog [data-notification-state=unread] {border-left:3px solid var(--ws-red)}
:root body > dialog.operations-workspace-dialog [data-notification-state=unread] .operation-state {background:color-mix(in srgb,var(--ws-red) 13%,var(--v7-surface));border-color:var(--ws-red)}
:root body > dialog.operations-workspace-dialog .operation-list-empty {padding:30px 16px;border:1px dashed var(--v7-line);border-radius:10px;background:var(--v7-panel);color:var(--v7-muted)}
:root body > dialog.operations-workspace-dialog .operation-list-empty strong {font-size:17px;color:var(--v7-ink)}
:root body > dialog.operations-workspace-dialog .operation-list-empty p {margin:8px 0 0;font-size:14px;line-height:1.6}
:root body > dialog.notifications-dialog .operations-toolbar > label {display:flex;align-items:center;gap:8px;flex:1 1 230px;font-size:14px}
:root body > dialog.notifications-dialog .operations-toolbar input[type=checkbox] {width:auto;flex:none}
:root body > dialog.notifications-dialog [data-backup] {display:block}
:root body > dialog.notifications-dialog [data-backup]:empty {display:none}
:root body > dialog.notifications-dialog .operations-backup {margin:0;padding:14px;border:1px solid var(--v7-line);border-radius:10px;background:var(--v7-panel)}
:root body > dialog.notifications-dialog .operations-backup > strong {font-size:16px;color:var(--v7-ink)}
:root body > dialog.notifications-dialog .operations-backup-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
:root body > dialog.notifications-dialog .operations-backup-grid > div {display:grid;align-content:start;gap:5px;padding:12px;border:1px solid var(--v7-line);border-radius:8px;background:var(--v7-input);overflow-wrap:anywhere}
:root body > dialog.notifications-dialog .operations-backup-grid [data-backup-state=warning] {border-color:var(--v7-planned-line);background:var(--v7-planned-bg)}
:root body > dialog.notifications-dialog .operations-backup-grid :is(span,p) {margin:0;font-size:13px;line-height:1.55;color:var(--v7-muted)}
:root body > dialog.notifications-dialog .operations-backup-grid strong {font-size:14px;line-height:1.55;color:var(--v7-ink)}
:root body > dialog.notifications-dialog .operations-backup > p {margin:12px 0 0;font-size:13px;line-height:1.55}
:root body > dialog .operation-reason-presets {display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:10px;border:1px solid var(--v7-line);border-radius:9px;min-width:0;background:var(--v7-panel)}
:root body > dialog .operation-reason-presets legend {padding:0 5px;font-size:13px;color:var(--v7-muted)}
:root body > dialog .operation-reason-presets button {min-height:36px;max-width:100%;padding:7px 10px;white-space:normal;text-align:left;border:1px solid var(--v7-line);border-radius:7px;background:var(--v7-surface);color:var(--v7-ink);font-size:14px;line-height:1.5}
:root body > dialog :is(.operation-reason-presets button,.operations-row-actions button):focus-visible {outline:2px solid var(--ws-red);outline-offset:2px}
@media(max-width:640px) {
 :root body > dialog.operations-workspace-dialog :is(.dialog-header,.dialog-body,.dialog-footer) {padding:12px}
 :root body > dialog.operations-workspace-dialog .operation-list-row {grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
 :root body > dialog.operations-workspace-dialog .operations-row-actions {max-width:none;justify-content:flex-start}
 :root body > dialog.operations-workspace-dialog .operations-toolbar {align-items:stretch}
 :root body > dialog.operations-workspace-dialog .operations-toolbar > :is(input,label,.bl-select) {flex-basis:100%}
 :root body > dialog.operations-workspace-dialog :is(input,textarea,select,.bl-select-trigger) {font-size:16px}
 :root body > dialog.notifications-dialog .operations-backup-grid {grid-template-columns:minmax(0,1fr)}
}