/* One dark header treatment for every modal, including dynamically created forms. */
:root body > dialog :is(.dialog-header,.client-drawer-header) {
  background:radial-gradient(ellipse at 95% 0%,#74203755,transparent 65%),linear-gradient(115deg,#11141b,#080b11 70%,#1b101a)!important;
  color:#f7f5f7;border-bottom:1px solid #67505e;box-shadow:0 5px 20px #00000024,inset 0 1px 0 #ffffff09;
}
:root body > dialog :is(.dialog-header,.client-drawer-header) :is(h2,h3,.icon-close) {color:#f7f5f7!important}
:root body > dialog .dialog-header :is(.ghost,.icon-btn) {color:#ede7ed;border-color:#756675;background:#ffffff08}
:root body > dialog .dialog-header .joint-dialog-heading > span {color:#efb8c5}
:root body > dialog :is(.dialog-header,.client-drawer-header) :is(p,.client-drawer-subtitle) {color:#c7bfca}
:root body > dialog .client-drawer-header :is(.client-drawer-subtitle a,.ghost,.icon-btn) {color:#f1eaf2;border-color:#756675}
body > dialog.training-debt-dialog .dialog-header {margin:-24px -24px 4px;padding:20px 24px;border-radius:13px 13px 0 0}
body > dialog.training-debt-dialog .dialog-header h3 {margin:0;font:700 21px/1.4 var(--font-heading)}

[data-service-kind] {--svc-accent:#a9b4d0;--svc-head:#2b3245;--svc-ink:#dce3f6}
[data-service-kind=training] {--svc-accent:#d3af72;--svc-head:#3c3225;--svc-ink:#f4d9a5}
[data-service-kind=massage] {--svc-accent:#6ebdb3;--svc-head:#203c3b;--svc-ink:#b7ede4}
[data-service-kind=barrel] {--svc-accent:#e3a06a;--svc-head:#443024;--svc-ink:#ffd8b8}
[data-service-kind=stretch] {--svc-accent:#a99ce3;--svc-head:#33304a;--svc-ink:#dfd6ff}
[data-service-kind=gym] {--svc-accent:#7eafe1;--svc-head:#24384d;--svc-ink:#c7e3ff}
[data-service-kind=beauty] {--svc-accent:#db91b7;--svc-head:#452c3d;--svc-ink:#ffd1e8}
[data-service-kind=package] {--svc-accent:#b29bdc;--svc-head:#362e48;--svc-ink:#e5d4ff}
:root[data-theme=light] [data-service-kind] {--svc-head:#e9edf7;--svc-ink:#3b4b72}
:root[data-theme=light] [data-service-kind=training] {--svc-head:#f3e6ce;--svc-ink:#67471d}
:root[data-theme=light] [data-service-kind=massage] {--svc-head:#dceee9;--svc-ink:#255f58}
:root[data-theme=light] [data-service-kind=barrel] {--svc-head:#f7e3d3;--svc-ink:#7d461c}
:root[data-theme=light] [data-service-kind=stretch] {--svc-head:#e9e3f7;--svc-ink:#584780}
:root[data-theme=light] [data-service-kind=gym] {--svc-head:#dfebf8;--svc-ink:#2e567e}
:root[data-theme=light] [data-service-kind=beauty] {--svc-head:#f6e1ed;--svc-ink:#7e365d}
:root[data-theme=light] [data-service-kind=package] {--svc-head:#ece2f7;--svc-ink:#604180}

body > dialog#appointment-dialog #appointment-items .appointment-item {background:var(--ws-panel);border:1px solid var(--ws-line);border-inline-start:4px solid var(--svc-accent);border-radius:16px;padding:16px;margin:18px 0;box-shadow:0 6px 18px #00000013}
body > dialog#appointment-dialog #appointment-items .appointment-item-head {margin:-16px -16px 14px;padding:14px 16px;display:flex;flex-wrap:nowrap;gap:12px;background:linear-gradient(110deg,#ffffff06,transparent),var(--svc-head);border-radius:12px 15px 0 0;border-bottom:1px solid color-mix(in srgb,var(--svc-accent) 45%,transparent)}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > strong {font:700 18px/1.4 var(--font-heading);letter-spacing:-.2px;color:var(--svc-ink);flex:1;min-width:0;overflow-wrap:anywhere}
body > dialog#appointment-dialog #appointment-items .appointment-item-head button {color:var(--svc-ink);font-size:14px;min-height:36px;margin-left:auto;flex:none}
body > dialog#appointment-dialog .booking-resource-heading {margin:0 0 12px;padding:8px 10px;background:var(--ws-raised);font-size:14px;color:var(--ws-ink)}
body > dialog#appointment-dialog .booking-resource-heading span:first-child {border-left-color:var(--svc-accent)}
body > dialog#appointment-dialog .appointment-items-panel > .appointment-item-head {background:linear-gradient(100deg,#a32b4029,transparent),var(--ws-input);padding:12px 14px;border:1px solid var(--ws-line);border-radius:12px;flex-wrap:wrap}
body > dialog#appointment-dialog .appointment-items-panel > .appointment-item-head h3 {font:700 19px/1.4 var(--font-heading);margin:0 auto 0 0;color:var(--ws-ink)}
body > dialog#appointment-dialog .service-motion-toggle {font-size:12px;min-height:34px;color:var(--ws-muted)}

/* Each financial field has its own label and colour, not colour alone. */
body > dialog#appointment-dialog .appointment-item-money-field {padding:10px;border-radius:12px;border:1px solid var(--field-line);background:var(--field-bg);--field-bg:#243749;--field-line:#527694;--field-ink:#cce7ff}
body > dialog#appointment-dialog [data-money-field=discount] {--field-bg:#3e3424;--field-line:#937648;--field-ink:#f5d59c}
body > dialog#appointment-dialog [data-money-field=total] {--field-bg:#243d33;--field-line:#4c806b;--field-ink:#c9eedb}
:root[data-theme=light] body > dialog#appointment-dialog .appointment-item-money-field {--field-bg:#eaf2fc;--field-line:#b7cce3;--field-ink:#2d547d}
:root[data-theme=light] body > dialog#appointment-dialog [data-money-field=discount] {--field-bg:#fbf0db;--field-line:#dcc299;--field-ink:#76541d}
:root[data-theme=light] body > dialog#appointment-dialog [data-money-field=total] {--field-bg:#e5f2e9;--field-line:#aecfba;--field-ink:#2b6244}
body > dialog#appointment-dialog .appointment-item-money-field .appointment-item-calc-label {font:600 14px/1.4 var(--font);color:var(--field-ink);margin-bottom:8px}
body > dialog#appointment-dialog .appointment-item-money-field input {font:650 18px/1.4 var(--font);color:var(--field-ink);background:var(--ws-input);border:1px solid var(--field-line);border-radius:8px;min-height:44px;height:44px;padding:9px 10px;font-variant-numeric:tabular-nums}
body > dialog#appointment-dialog .appointment-item-money-field input:focus-visible {outline:2px solid var(--field-ink);outline-offset:2px}
body > dialog#appointment-dialog .appointment-item-money-total input {font-weight:750;background:transparent;border-color:transparent}
body > dialog#appointment-dialog .appointment-item-qty-block {padding:10px 0}
body > dialog#appointment-dialog .appointment-item-calc-label {font-size:14px;color:var(--ws-muted)}

/* Time is a legible final row of each service. */
:root body > dialog#appointment-dialog .appointment-item-timing {display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:4px;padding:12px 14px;background:var(--ws-input);border:1px solid var(--ws-line);border-radius:10px;color:var(--ws-ink);font:650 16px/1.4 var(--font)}
.service-time-range {display:inline-flex;align-items:center;gap:9px}
.service-time-range svg {width:20px;height:20px;flex:none;color:var(--svc-accent)}
:root body > dialog#appointment-dialog .service-time-duration {font:700 16px/1.4 var(--font-heading);color:var(--svc-ink);background:var(--svc-head);border:1px solid color-mix(in srgb,var(--svc-accent) 55%,transparent);padding:5px 10px;border-radius:8px;white-space:nowrap}
body > dialog#appointment-dialog .booking-item-duration-settings > summary {font-size:14px;color:var(--ws-muted)}
body > dialog#appointment-dialog .dialog-footer {padding:16px 22px;border-top:1px solid var(--ws-line);box-shadow:0 -5px 20px #00000012}
body > dialog#appointment-dialog .booking-footer-summary > span {font:600 16px/1.4 var(--font);color:var(--ws-ink)}
body > dialog#appointment-dialog .booking-footer-summary small {display:block;font:400 14px/1.45 var(--font);color:var(--ws-muted);margin-top:3px}
body > dialog#appointment-dialog .dialog-footer button {font:600 16px/1.4 var(--font);min-height:46px;padding:10px 16px}
body > dialog#appointment-dialog .booking-footer-summary strong {font-size:24px}
:root[data-theme=light] body > dialog#appointment-dialog .dialog-footer #appointment-delete {color:#a52d43}

/* Distinct animated pictograms; no remote images or GIF decoding. */
.service-motion-icon {display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;flex:0 0 52px;border:1px solid color-mix(in srgb,var(--svc-accent) 55%,transparent);border-radius:14px;background:var(--svc-head);color:var(--svc-ink);box-shadow:inset 0 1px 0 #ffffff0c;overflow:hidden}
.service-motion-icon svg {width:42px;height:42px;display:block;overflow:visible}
.service-motion-icon svg g {transform-box:view-box;transform-origin:24px 24px;animation-play-state:paused}
.si-rotate {animation:service-rotate 8s linear infinite}
.si-back {opacity:.45;stroke-width:1.6}
.si-hand-left {animation:service-knead-left 2.6s ease-in-out infinite}
.si-hand-right {animation:service-knead-right 2.6s ease-in-out infinite}
.si-steam {animation:service-steam 3.2s ease-in-out infinite}
.si-breathe {animation:service-breathe 3.5s ease-in-out infinite}
.si-step {animation:service-step 2.8s ease-in-out infinite}
.si-spark {animation:service-spark 3s ease-in-out infinite;transform-box:view-box;transform-origin:center;animation-play-state:paused}
:root[data-service-motion=on] :is(dialog[open],#view-services:not(.hidden)) .service-motion-icon svg :is(g,.si-spark) {animation-play-state:running}
:root[data-service-motion=off] .service-motion-icon svg :is(g,.si-spark) {animation:none!important}
body > dialog#appointment-dialog #appointment-service-cards .booking-service-card {background:var(--ws-panel);border-color:var(--ws-line);border-top:3px solid var(--svc-accent);gap:8px}
body > dialog#appointment-dialog #appointment-service-cards .service-motion-icon {color:var(--svc-ink);background:var(--svc-head)}
body > dialog#appointment-dialog #appointment-service-cards .booking-service-card strong {font:650 15px/1.4 var(--font-heading);color:var(--ws-ink)}
body > dialog#appointment-dialog #appointment-service-cards .booking-service-card > span:not(.service-motion-icon) {font-size:13px;color:var(--ws-muted)}
#app #main-content .service-identity h4 {display:flex;align-items:center;gap:12px}
#app #main-content .service-identity h4 > span:last-child {flex:1;min-width:0}
#app #main-content .service-entry .service-motion-icon {width:44px;height:44px;flex-basis:44px;color:var(--svc-ink)}
#app #main-content .service-entry .service-motion-icon svg {width:36px;height:36px}
@keyframes service-rotate {to{transform:rotate(360deg)}}
@keyframes service-knead-left {0%,100%{transform:translate(0,0)}50%{transform:translate(3px,2px)}}
@keyframes service-knead-right {0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,2px)}}
@keyframes service-steam {0%,100%{transform:translateY(1px);opacity:.6}50%{transform:translateY(-3px);opacity:1}}
@keyframes service-breathe {0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
@keyframes service-step {0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes service-spark {0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce) {.service-motion-icon svg :is(g,.si-spark) {animation:none!important}}
@media(max-width:600px){
  body > dialog#appointment-dialog #appointment-items .appointment-item-head {gap:9px;flex-wrap:wrap}
  body > dialog#appointment-dialog #appointment-items .appointment-item-head > strong {font-size:16px;flex-basis:calc(100% - 65px)}
  body > dialog#appointment-dialog #appointment-items .appointment-item-head button {margin-left:auto}
  body > dialog#appointment-dialog .appointment-item-money-field {padding:9px}
  body > dialog#appointment-dialog .appointment-item-money-field input {font-size:16px;padding:8px}
  :root body > dialog#appointment-dialog .appointment-item-timing {padding:10px;font-size:15px}
  :root body > dialog#appointment-dialog .service-time-duration {font-size:15px}
  body > dialog#appointment-dialog .dialog-footer {padding:12px}
  body > dialog#appointment-dialog .booking-footer-summary small {font-size:13px;line-height:1.4}
  body > dialog#appointment-dialog .booking-footer-summary > span {font-size:15px}
  body > dialog#appointment-dialog .dialog-footer button {font-size:15px;min-height:42px;padding:8px 12px}
  body > dialog#appointment-dialog .service-motion-toggle {font-size:12px;padding:6px 8px}
}

/* Compact booking cards: retain readable fields and resource colours without stacked spacing. */
body > dialog#appointment-dialog #appointment-items .appointment-item {padding:12px;margin:12px 0;gap:8px;border-radius:14px}
body > dialog#appointment-dialog #appointment-items .appointment-item-head {margin:-12px -12px 0;padding:10px 12px;gap:10px;border-radius:10px 13px 0 0}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > .service-motion-icon {width:40px;height:40px;flex-basis:40px;border-radius:11px}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > .service-motion-icon svg {width:32px;height:32px}
body > dialog#appointment-dialog .booking-resource-heading {margin:0;padding:6px 8px;gap:8px;font-size:14px}
body > dialog#appointment-dialog .booking-item-settings {margin:0}
body > dialog#appointment-dialog .booking-item-settings > summary {font-size:14px;line-height:1.45;color:var(--ws-muted);padding:3px 0}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field:not(.hidden) {margin:0;padding:8px 10px;gap:4px 10px;font-size:14px;grid-template-columns:minmax(0,1fr) 72px}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field input {min-height:38px;height:38px;font-size:16px;padding:6px 8px}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field .muted {line-height:1.4}
body > dialog#appointment-dialog .appointment-item-calc {padding-top:8px;gap:8px}
body > dialog#appointment-dialog .appointment-item-money-field {padding:8px;border-radius:10px}
body > dialog#appointment-dialog .appointment-item-money-field .appointment-item-calc-label {margin-bottom:4px}
body > dialog#appointment-dialog .appointment-item-money-field input {min-height:40px;height:40px;padding:7px 8px}
body > dialog#appointment-dialog .appointment-item-qty-block {padding:8px 0}
:root body > dialog#appointment-dialog .appointment-item-timing {margin:0;padding:7px 10px;gap:8px}
:root body > dialog#appointment-dialog .service-time-duration {padding:3px 8px}
body > dialog#appointment-dialog .booking-item-duration-settings > summary {padding:3px 0;line-height:1.45}
body > dialog#appointment-dialog .booking-col {padding:14px;gap:10px}
body > dialog#appointment-dialog .booking-col--client {padding:0}
body > dialog#appointment-dialog .booking-status-option {font-size:14px;min-height:38px}
body > dialog#appointment-dialog .booking-service-picker {padding:12px}
body > dialog#appointment-dialog #appointment-service-cards {grid-template-columns:repeat(2,minmax(0,1fr))}
body > dialog#appointment-dialog #appointment-service-cards .booking-service-card {display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:10px;border-top:1px solid var(--ws-line);border-left:3px solid var(--svc-accent)}
body > dialog#appointment-dialog #appointment-service-cards .service-motion-icon {grid-column:1;grid-row:1/4;width:36px;height:36px;min-width:0;flex-basis:36px;border-radius:10px}
body > dialog#appointment-dialog #appointment-service-cards .service-motion-icon svg {width:29px;height:29px}
body > dialog#appointment-dialog #appointment-service-cards .booking-service-card strong {grid-column:2;grid-row:1;font-size:15px}
body > dialog#appointment-dialog #appointment-service-cards .booking-resource-label {grid-column:2;grid-row:2;font-size:12px;line-height:1.4}
body > dialog#appointment-dialog #appointment-service-cards .booking-service-card > span:not(.service-motion-icon):not(.booking-service-card-action) {grid-column:2;grid-row:3;font-size:13px}
body > dialog#appointment-dialog #appointment-service-cards .booking-service-card-action {grid-column:3;grid-row:1/4;margin:0;font-size:13px;color:var(--svc-ink);white-space:nowrap}
body > dialog#appointment-dialog .appointment-payment-methods {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
body > dialog#appointment-dialog .appointment-payment-methods button {font-size:14px;min-height:38px}
body > dialog#appointment-dialog .appointment-payment-panel :is(label,summary) {font-size:14px}
body > dialog#appointment-dialog .appointment-payment-plan select {font-size:14px}
body > dialog#appointment-dialog [data-payment-message]:empty {display:none}
@media(max-width:1100px) {
  body > dialog#appointment-dialog #appointment-service-cards {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px) {
  body > dialog#appointment-dialog #appointment-items .appointment-item-head {flex-wrap:wrap}
  body > dialog#appointment-dialog #appointment-items .appointment-item-head > strong {flex-basis:calc(100% - 60px)}
  body > dialog#appointment-dialog .booking-col {padding:12px}
  body > dialog#appointment-dialog .booking-col--client {padding:0}
  body > dialog#appointment-dialog #appointment-service-cards .booking-service-card {grid-template-columns:32px minmax(0,1fr);gap:3px 8px}
  body > dialog#appointment-dialog #appointment-service-cards .service-motion-icon {width:32px;height:32px}
  body > dialog#appointment-dialog #appointment-service-cards .booking-service-card-action {grid-column:2;grid-row:4}
}

/* Stable card positions regardless of service count, attendance or payment. */
#view-calendar #calendar-grid .appt:not(.is-filtered) {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:14px minmax(13px,max-content) 15px;align-items:start;align-content:start;gap:0 8px;padding:2px 28px 2px 6px}
#view-calendar #calendar-grid .appt:not(.is-filtered) .appt-row-meta {display:contents}
#view-calendar #calendar-grid .appt:not(.is-filtered) .appt-time {grid-column:2;grid-row:1;font-size:10px;line-height:13px;white-space:nowrap;text-align:right;justify-self:end}
#view-calendar #calendar-grid .appt:not(.is-filtered) .appt-client-link {display:block;grid-column:1;grid-row:1;text-align:left;line-height:14px;min-height:0;padding:0;font-size:12px}
#view-calendar #calendar-grid .appt:not(.is-filtered) > .appt-service {display:block;grid-column:1/-1;grid-row:2;min-height:13px;font-size:11px;line-height:13px}
#view-calendar #calendar-grid .appt:not(.is-filtered) .appt-payment-chip {grid-column:1;grid-row:3;font-size:10px;line-height:13px;padding:0 4px;max-width:100%}
#view-calendar #calendar-grid .appt:not(.is-filtered) .appt-status-chip {display:inline-flex;grid-column:2;grid-row:3;justify-self:end;align-items:center;max-width:100%;font-size:10px;line-height:12px;padding:0 4px}
#view-calendar #calendar-grid .appt.status-arrived .appt-status-chip {color:#a5e7c5;background:#264b3c;border:1px solid #548e70;border-radius:5px}
:root[data-theme=light] #view-calendar #calendar-grid .appt.status-arrived .appt-status-chip {color:#236346;background:#deefe4;border-color:#92bba2}
#view-calendar #calendar-grid .appt.is-group:not(.is-filtered) {grid-template-rows:14px minmax(13px,1fr) 15px}
#view-calendar #calendar-grid .appt.is-group > .appt-service-list {display:flex;flex-direction:column;align-self:stretch;list-style:none;gap:1px;width:100%;max-width:none;min-height:13px;margin:0;padding:0;white-space:normal;-webkit-line-clamp:unset;overflow:auto}
#view-calendar #calendar-grid .appt.is-group .appt-service-list li {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;min-height:13px;height:var(--appt-service-row-height,13px);flex:none;padding:0;border:0;border-radius:0;background:transparent;font-size:11px;line-height:13px}
#view-calendar #calendar-grid .appt.is-group .appt-service-list li span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-calendar #calendar-grid .appt.is-group .appt-service-list time {font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-secondary)}
/* Two rows for short slots: keep both the client and service visible. */
#view-calendar #calendar-grid .appt.is-inline-card:not(.is-filtered) {grid-template-rows:13px minmax(13px,1fr);padding:0 26px 0 5px}
#view-calendar #calendar-grid .appt.is-inline-card .appt-client-link {font-size:11px;line-height:13px}
#view-calendar #calendar-grid .appt.is-inline-card > .appt-service {display:block;grid-column:1;grid-row:2}
#view-calendar #calendar-grid .appt.is-inline-card .appt-payment-chip {grid-column:2;grid-row:2;justify-self:end;max-width:130px;font-size:10px;line-height:12px;padding:0 3px}
#view-calendar #calendar-grid .appt.is-inline-card .appt-status-chip {display:none}