/* Black Lab refinement: presentation only. Keep booking, payment and calendar state intact. */
#view-calendar .calendar-command-panel {
  background:linear-gradient(115deg,#1b2029 12%,#242a35 68%,#3b2735);
  border-color:#454451;border-top-color:#815565;
  box-shadow:0 5px 18px #0000001a,inset 0 1px 0 #ffffff05;
}
:root[data-theme=light] #view-calendar .calendar-command-panel {
  background:linear-gradient(115deg,#fff 22%,#fcfaf8 70%,#f3e6e8);
  border-color:#ded7d5;border-top-color:#c39ba5;
  box-shadow:0 4px 16px #49352b08;
}
#view-calendar .calendar-command-panel #calendar-date-picker .date-display {
  font-family:var(--font-heading);font-weight:750;letter-spacing:-.45px;
}
/* Opaque surfaces make fields legible above the calendar in both themes. */
body > dialog#appointment-dialog {background:var(--ws-bg);border-color:var(--ws-line)}
body > dialog#appointment-dialog > form,
body > dialog#appointment-dialog .booking-columns {background:var(--ws-bg)}
:root body > dialog:is(#appointment-dialog,#appointment-details-dialog) .dialog-header {
  background:linear-gradient(115deg,#141922 15%,#202632 70%,#392532)!important;
  border-bottom-color:#66505d;box-shadow:inset 0 1px 0 #ffffff07;
  padding:14px 20px;
}
:root[data-theme=light] body > dialog:is(#appointment-dialog,#appointment-details-dialog) .dialog-header {
  background:linear-gradient(115deg,#e9e5e1 10%,#f0edeb 66%,#ebdce1)!important;
  border-bottom-color:#d1c3c8;
}
:root[data-theme=light] body > dialog:is(#appointment-dialog,#appointment-details-dialog) .dialog-header :is(h2,h3,.icon-close) {color:#292b33!important}
body > dialog#appointment-dialog .dialog-header h2 {font-size:23px;letter-spacing:-.55px}
body > dialog#appointment-dialog .required-legend {padding:7px 20px;font-size:13px;margin:0}
body > dialog#appointment-dialog .booking-columns {gap:14px;padding:6px 18px 16px}
body > dialog#appointment-dialog .booking-main {gap:12px}
body > dialog#appointment-dialog .booking-col {gap:8px;border-radius:14px}
body > dialog#appointment-dialog .booking-col--client {gap:12px}
body > dialog#appointment-dialog :is(.booking-client-card,.appointment-recent-visits) {padding:14px;gap:10px;border-radius:14px}
body > dialog#appointment-dialog .booking-col h3 {font-size:17px;line-height:1.4;margin:0}
body > dialog#appointment-dialog .booking-col--schedule {gap:7px}
body > dialog#appointment-dialog .booking-time-main {gap:10px}
body > dialog#appointment-dialog .booking-time-tools {gap:4px 12px;align-items:center}
body > dialog#appointment-dialog .booking-time-tools > details {flex:1 1 200px}
body > dialog#appointment-dialog .booking-time-tools > details[open] {flex-basis:100%}
body > dialog#appointment-dialog .booking-time-tools summary,
body > dialog#appointment-dialog .booking-comment summary {padding:3px 0;font-size:14px}
body > dialog#appointment-dialog .booking-time-summary {padding:7px 10px;font-size:14px}
body > dialog#appointment-dialog .booking-comment {padding-top:4px}
body > dialog#appointment-dialog .appointment-slot-hint {font-size:13px;line-height:1.4}
body > dialog#appointment-dialog .booking-status-note {font-size:13px;line-height:1.45;margin:0}
body > dialog#appointment-dialog .appointment-items-panel {gap:8px}
body > dialog#appointment-dialog .appointment-items-panel > .appointment-item-head {
  padding:7px 0;background:none;border:0;border-radius:0;gap:8px;
}
body > dialog#appointment-dialog .appointment-items-panel > .appointment-item-head h3 {font-size:18px}
body > dialog#appointment-dialog #appointment-items .appointment-item {
  margin:8px 0 12px;padding:10px 12px;gap:7px;border-radius:12px;
  background:var(--ws-panel);border-color:var(--ws-line-soft);border-inline-start:3px solid var(--svc-accent);
  box-shadow:0 3px 12px #0000000c;
}
body > dialog#appointment-dialog #appointment-items .appointment-item-head {
  margin:-10px -12px 0;padding:9px 12px;gap:10px;border-radius:9px 11px 0 0;
  background:color-mix(in srgb,var(--svc-head) 48%,var(--ws-panel));
  border-bottom-color:color-mix(in srgb,var(--svc-accent) 24%,var(--ws-line-soft));
}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > strong {
  color:var(--ws-ink);font-size:17px;line-height:1.35;font-weight:700;
}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > .service-motion-icon {
  width:34px;height:34px;flex-basis:34px;border-radius:9px;
}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > .service-motion-icon svg {width:27px;height:27px}
body > dialog#appointment-dialog .booking-resource-heading {
  padding:3px 0;background:transparent;color:var(--ws-muted);font-size:14px;line-height:1.4;
}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field:not(.hidden) {
  padding:7px 10px;background:var(--ws-input);border:1px solid var(--ws-line-soft);border-radius:9px;
}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field .muted {font-size:13px;line-height:1.4}
body > dialog#appointment-dialog .appointment-item-calc {gap:7px;padding-top:7px}
body > dialog#appointment-dialog .appointment-item-money-field {
  padding:7px;border-color:color-mix(in srgb,var(--field-line) 65%,var(--ws-line-soft));
  background:color-mix(in srgb,var(--field-bg) 45%,var(--ws-panel));border-radius:9px;
}
body > dialog#appointment-dialog .appointment-item-money-field input {font-size:17px}
body > dialog#appointment-dialog .appointment-item-price-hint {
  font-size:13px;line-height:1.45;margin:0;color:var(--ws-muted);
}
:root body > dialog#appointment-dialog .appointment-item-timing {
  font-size:15px;padding:6px 9px;border-color:var(--ws-line-soft);border-radius:8px;
}
:root body > dialog#appointment-dialog .service-time-duration {font-size:15px;padding:2px 7px}
/* Existing payment controls and their order remain available, including family and manual debit. */
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-panel {
  padding:14px;border-radius:14px;background:var(--ws-panel);border:1px solid var(--ws-line);
  box-shadow:inset 0 3px 0 color-mix(in srgb,var(--accent) 55%,var(--ws-panel));
}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-heading {gap:8px;margin-bottom:12px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-heading h3 {font-size:18px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-summary {gap:8px;margin-bottom:12px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-summary > div {padding:9px 11px;gap:4px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-summary > .payment-remaining {
  background:color-mix(in srgb,var(--accent) 8%,var(--ws-panel));border-color:color-mix(in srgb,var(--accent) 40%,var(--ws-line));
}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-summary span {font-size:14px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-summary > div strong {font-size:20px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-summary .payment-remaining strong {font-size:28px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-panel :is(p,small,label,summary) {
  font-size:14px;line-height:1.5;
}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-panel :is(input,select,.bl-select-trigger) {font-size:14px}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-panel button {font-size:14px;white-space:normal}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-panel :is(.appointment-payment-plan,.appointment-package-apply) {padding:10px;margin:10px 0}
body > dialog:is(#appointment-dialog,#appointment-details-dialog) .appointment-payment-controls {padding-top:10px;gap:10px}
body > dialog#appointment-dialog .dialog-footer {padding:12px 20px;gap:10px;background:var(--ws-panel)}
body > dialog#appointment-dialog .booking-footer-summary {gap:2px 14px}
body > dialog#appointment-dialog .booking-footer-summary > span {font-size:15px}
body > dialog#appointment-dialog .booking-footer-summary small {font-size:13px;margin:0;line-height:1.4}
body > dialog#appointment-dialog .dialog-footer button {min-height:42px;font-size:15px;padding:8px 14px}
@media(max-width:800px) {
  body > dialog#appointment-dialog .booking-columns {padding:6px 12px 12px;gap:12px}
  body > dialog#appointment-dialog .dialog-header {padding:12px}
  body > dialog#appointment-dialog .dialog-header h2 {font-size:21px}
  body > dialog#appointment-dialog .required-legend {padding:6px 12px}
  body > dialog#appointment-dialog .dialog-footer {padding:12px}
}
@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 {font-size:16px;flex-basis:calc(100% - 50px)}
  body > dialog#appointment-dialog .booking-time-tools > details {flex-basis:100%}
  body > dialog#appointment-dialog .booking-footer-summary {width:100%}
}

/* Compact schedule controls; keep DOM order, validation and all time editors intact. */
body > dialog#appointment-dialog .booking-col--schedule {
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:start;
}
body > dialog#appointment-dialog .booking-col--schedule > h3 {grid-column:1;grid-row:1;align-self:center}
body > dialog#appointment-dialog .booking-col--schedule > :not(h3):not(.booking-time-summary) {grid-column:1/-1}
body > dialog#appointment-dialog .booking-col--schedule > .booking-time-summary {
  grid-column:2;grid-row:1;align-self:center;white-space:nowrap;width:auto;
  padding:4px 9px;font-size:14px;line-height:1.4;border-radius:7px;
}
body > dialog#appointment-dialog .booking-time-main {
  grid-template-columns:minmax(130px,.7fr) minmax(0,2fr);gap:10px;
}
body > dialog#appointment-dialog .booking-time-tools {gap:3px 18px;padding:0;align-items:center}
body > dialog#appointment-dialog .booking-time-tools > details {flex:0 1 auto}
body > dialog#appointment-dialog .booking-time-tools > details[open] {flex-basis:100%}
body > dialog#appointment-dialog .booking-time-tools summary {padding:4px 0;font-size:14px;line-height:1.4}
body > dialog#appointment-dialog .booking-time-tools #appointment-extend-schedule {
  min-height:28px;padding:4px 0;font-size:14px;line-height:1.4;width:auto;max-width:100%;flex:0 1 auto;
}
body > dialog#appointment-dialog .booking-comment {padding-top:5px}
body > dialog#appointment-dialog .booking-comment summary {padding:2px 0;font-size:14px;line-height:1.4}
body > dialog#appointment-dialog .appointment-slot-hint {font-size:13px;line-height:1.4}
@media(max-width:1100px) {
  body > dialog#appointment-dialog .booking-time-main {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px) {
  body > dialog#appointment-dialog .booking-col--schedule {grid-template-columns:minmax(0,1fr);gap:8px}
  body > dialog#appointment-dialog .booking-col--schedule > .booking-time-summary {grid-column:1;grid-row:auto;white-space:normal;justify-self:start}
  body > dialog#appointment-dialog .booking-time-tools {gap:3px}
  body > dialog#appointment-dialog .booking-time-tools > details {flex-basis:100%}
}

/* Calendar view controls use the same readable fields as the rest of the CRM. */
#view-calendar #calendar-status-menu .calendar-display-panel {
  width:348px;max-width:calc(100vw - 32px);left:0;right:auto;
  background:var(--ws-panel);border-color:var(--ws-line);color:var(--ws-ink);
}
#view-calendar #calendar-status-menu .calendar-display-heading {border-color:var(--ws-line-soft)}
#view-calendar #calendar-status-menu .calendar-display-heading h2 {font-family:var(--font-heading);color:var(--ws-ink)}
#view-calendar #calendar-status-menu .calendar-scale-filter {
  display:grid;grid-template-columns:minmax(0,1fr) 164px;align-items:center;
  gap:12px;margin:12px 0;font-size:14px;line-height:1.4;color:var(--ws-ink);
}
#view-calendar #calendar-status-menu .calendar-scale-filter > span {font-weight:600}
#view-calendar #calendar-status-menu .calendar-scale-filter .bl-select {width:100%;min-width:0}
#view-calendar #calendar-status-menu .calendar-scale-filter .bl-select-trigger {
  width:100%;min-height:44px;height:auto;padding:10px 12px;gap:10px;
  font-family:inherit;font-size:15px;font-weight:500;line-height:1.4;
  background:var(--ws-input);color:var(--ws-ink);border:1px solid var(--ws-line);
  border-radius:10px;box-shadow:inset 0 1px 0 #ffffff04;
}
#view-calendar #calendar-status-menu .calendar-scale-filter .bl-select-value {
  white-space:nowrap;overflow-wrap:normal;text-align:left;
}
#view-calendar #calendar-status-menu .calendar-scale-filter .bl-select-trigger:hover {
  border-color:var(--ws-red);background:var(--ws-raised);
}
#view-calendar #calendar-status-menu .calendar-scale-filter .bl-select-trigger[aria-expanded=true] {
  border-color:var(--ws-red);box-shadow:0 0 0 2px color-mix(in srgb,var(--ws-red) 15%,transparent);
}
@media(max-width:700px) {
  #view-calendar #calendar-status-menu .calendar-display-panel {width:calc(100vw - 32px);left:16px;right:16px}
}
@media(max-width:359px) {
  #view-calendar #calendar-status-menu .calendar-scale-filter {grid-template-columns:minmax(0,1fr);gap:6px}
}