/* Shared modal sizing: content may scroll only when it cannot fit the viewport. */
:root { --paid: #f19b46; --paid-text: #ffd3a6; --paid-surface: #4a3020; --package-paid: #b794f4; --package-paid-text: #e4d5ff; --package-paid-surface: #38294d; }
body:has(dialog[open]), body:has(.client-drawer.is-open) { overflow: hidden; }
.booking-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}
.booking-dialog.narrow { width: min(560px, calc(100vw - 32px)); }
.booking-dialog.form-dialog { width: min(880px, calc(100vw - 32px)); }
.booking-dialog > form { max-height: calc(100dvh - 34px); }
.booking-dialog .dialog-header, .booking-dialog .dialog-footer { padding: 12px 20px; }
.booking-dialog .dialog-body { padding: 16px 20px; gap: 12px; }
.booking-dialog :is(input,select,textarea,.bl-select) { min-width: 0; max-width: 100%; }
.booking-dialog textarea { min-height: 72px; resize: vertical; }
.booking-dialog p:empty { display: none; }
.booking-dialog .required-legend { margin: 0; padding: 8px 20px 0; }
.dialog-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.dialog-form-grid > :not(.dialog-field), .dialog-form-grid .dialog-field--wide { grid-column: 1 / -1; }
.dialog-field { display: grid; align-content: start; gap: 4px; min-width: 0; }
.dialog-field p { margin: 0; }
.dialog-field-caption { display: block; }
.dialog-form-grid #service-create-package-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
#client-create-dialog { width: min(1060px,calc(100vw - 32px)); }
#client-create-dialog .dialog-form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
#schedule-dialog.booking-dialog { max-height: calc(100dvh - 32px); }
#schedule-dialog .dialog-body { overflow: auto; flex: 1 1 auto; }

/* A single, red primary action style, including older dynamically-created forms. */
button.primary, button[type="submit"]:not(.ghost):not(.danger), button.btn-abonement-action {
  background: var(--accent); border: 1px solid transparent; color: #fff;
  border-radius: var(--control-radius); min-height: var(--control-height);
  padding: var(--control-padding-y) var(--control-padding-x); font-weight: 600;
}
button.primary:hover:not(:disabled), button[type="submit"]:not(.ghost):not(.danger):hover:not(:disabled), button.btn-abonement-action:hover:not(:disabled) {
  background: var(--accent-hover); border-color: transparent; color: #fff; filter: none;
}
button.primary:active:not(:disabled), button[type="submit"]:not(.ghost):not(.danger):active:not(:disabled), button.btn-abonement-action:active:not(:disabled) { background: var(--accent-active); }
button.primary:focus-visible, button[type="submit"]:focus-visible { box-shadow: var(--focus-ring); }

/* Calendar editor: time / services / client and payment. */
#appointment-dialog { width: min(1580px,calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
#appointment-dialog > form { max-height: calc(100dvh - 26px); }
#appointment-dialog .booking-columns { grid-template-columns: 180px minmax(0,1fr) 330px; }
#appointment-dialog .booking-col { padding: 12px 16px; gap: 10px; }
#appointment-dialog .booking-col--schedule { padding-inline: 12px; }
#appointment-dialog .booking-col--schedule textarea { min-height: 80px; }
#appointment-dialog .appointment-item { padding: 12px; gap: 10px; }
#appointment-dialog .appointment-item-grid { gap: 10px; }
#appointment-dialog .appointment-item-head strong { font-size: 13px; }
#appointment-dialog .appointment-item-head button { min-height: 28px; padding: 2px 8px; }
#appointment-dialog .appointment-item-calc { grid-template-columns: minmax(108px,1.05fr) repeat(3,minmax(0,1fr)); gap: 10px; }
#appointment-dialog .appointment-qty { gap: 2px; }
#appointment-dialog .appointment-qty button { min-width: 24px; padding-inline: 4px; }
#appointment-dialog .appointment-qty input { width: 44px; min-width: 0; }
#appointment-dialog .appointment-item-price-hint { font-size: 11px; }
#appointment-dialog .appointment-item-timing { font-size: 12px; }
#appointment-dialog .new-client-block label { margin-top: 8px; }
#appointment-dialog .appointment-payment-panel { margin-top: 2px; padding: 14px; }
#appointment-dialog .appointment-payment-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
#appointment-dialog .appointment-payment-summary > :last-child { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
#appointment-dialog .appointment-payment-summary > :last-child strong { font-size: 14px; }
#appointment-dialog .appointment-payment-controls { display: grid; gap: 10px; }
#appointment-dialog .appointment-payment-methods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
#appointment-dialog .appointment-payment-methods button { padding-inline: 6px; font-size: 12px; }

/* Appointment details: payment remains beside the visit, with secondary details collapsed. */
#appointment-details-dialog { width: min(1320px,calc(100vw - 32px)); }
#appointment-details-dialog .dialog-body { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,1fr); max-height: none; align-items: start; gap: 16px; }
#appointment-details-dialog .appt-details-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#appointment-details-dialog .appt-details-side { display: grid; gap: 12px; min-width: 0; }
#appointment-details-dialog .appt-details-section { padding: 12px; }
#appointment-details-dialog .appt-details-dl { gap: 8px; }
#appointment-details-dialog .appt-details-dl > div { grid-template-columns: minmax(78px,.75fr) minmax(0,1.25fr); }
#appointment-details-dialog .appointment-payment-panel { margin: 0; padding: 16px; }
#appointment-details-dialog .appointment-payment-controls { display: grid; grid-template-columns: 1fr; gap: 10px; }
#appointment-details-dialog .appointment-payment-methods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.appt-details-options summary { cursor: pointer; font-weight: 600; }
.appt-details-options[open] summary { margin-bottom: 12px; }
.appt-details-options label { margin-block: 10px; }
.appointment-payment-panel h3 { margin-bottom: 12px; }
.appointment-payment-summary { gap: 12px; margin-bottom: 12px; }
.appointment-payment-summary strong { font-size: 18px; }
.appointment-payment-history { margin-block: 10px; }
.appointment-payment-panel p { margin-block: 8px; }
.appointment-payment-methods button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: #fff; }

/* Paid status is distinct from attendance. Text accompanies the orange tone. */
.appt.payment-paid:not(.is-filtered) { background: var(--paid-surface); border-color: var(--paid); border-left-color: var(--paid); }
.appt.payment-paid:not(.is-filtered):hover { background: #603c24; }
.appt.payment-paid .appt-client-accent { background: var(--paid); }
.appt-payment-chip { display: inline-flex; width: fit-content; max-width: 100%; font-size: 10px; line-height: 1.3; padding: 1px 5px; border-radius: 4px; }
.payment-paid .appt-payment-chip, .payment-status-paid { color: var(--paid-text); background: rgba(241,155,70,.16); border: 1px solid rgba(241,155,70,.45); }
.payment-status-partial, .payment-partial > .appt-payment-chip { color: #f6d58a; background: rgba(232,184,77,.13); }
.appt.payment-package:not(.is-filtered) { background: var(--package-paid-surface); border-color: var(--package-paid); border-left-color: var(--package-paid); }
.appt.payment-package:not(.is-filtered):hover { background: #493460; }
.appt.payment-package .appt-client-accent { background: var(--package-paid); }
.payment-status-package, .payment-package .appt-payment-chip { color: var(--package-paid-text); background: rgba(183,148,244,.16); border: 1px solid rgba(183,148,244,.45); }
.appt-group-segment.payment-package { border-left: 3px solid var(--package-paid); padding-left: 5px; background: rgba(183,148,244,.12); }
.appt-group-segment.payment-paid { border-left: 3px solid var(--paid); padding-left: 5px; background: rgba(241,155,70,.12); }
.appt-payment-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }
.appt-payment-legend::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--paid); }
.appt-payment-legend--package::before { background: var(--package-paid); }
.appt-payment-legends { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.appt-payment-legend--due::before { background: #eac54f; }
.appt.has-payment-due:not(.is-filtered) { background: #403917; border-color: #eac54f; border-left-color: #eac54f; }
.appt.has-payment-due:not(.is-filtered):hover { background: #504820; }
.appt.has-payment-due .appt-payment-chip, .payment-status-due { color: #fff1af; background: rgba(234,197,79,.16); border: 1px solid rgba(234,197,79,.5); }
.appointment-payment-panel.has-payment-due { border-color: #eac54f; background: #37321c; }
.appointment-payment-panel.has-payment-due h3 { color: #fff1af; }
#appt-details-message:not(:empty) { flex-basis: 100%; margin: 0; }
.appointment-payment-panel.is-paid { border-color: var(--paid); background: #332b24; }
.appointment-payment-panel.is-paid h3, .appointment-payment-panel.is-paid .appointment-payment-complete { color: var(--paid-text); }
.appointment-payment-panel.is-package { border-color: var(--package-paid); background: var(--package-paid-surface); }
.appointment-payment-panel.is-package h3, .appointment-payment-panel.is-package .appointment-payment-complete { color: var(--package-paid-text); }
.appointment-payment-state { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.appointment-payment-line.payment-status-paid { padding-inline: 8px; border-radius: 5px; }
.appointment-payment-lines { margin-block: 12px; }
.appointment-payment-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 12px; }
.appointment-payment-heading h3 { margin: 0; }
#appointment-dialog .appointment-item.is-paid { border-color: var(--paid); background: rgba(241,155,70,.08); }
#appointment-dialog .appointment-item.is-package { border-color: var(--package-paid); background: rgba(183,148,244,.08); }
#appointment-dialog .appointment-item.has-payment-due { border-color: #eac54f; background: rgba(234,197,79,.08); }
.appointment-item-payment-state { margin-left: 8px; }
.appt.is-tiny > .appt-payment-chip { display: none; }

/* Other application windows use the same available height and field layout. */
.operations-dialog.operations-wide { width: min(1280px,calc(100vw - 32px)); }
.operations-dialog.operations-form { width: min(940px,calc(100vw - 32px)); }
.operations-form .dialog-body { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.operations-form .dialog-body > :is([data-error],[data-total]) { grid-column: 1 / -1; }
.operations-form .dialog-body > :is(label,div,details,fieldset) { min-width: 0; }
.operations-form .operations-services { max-height: 260px; }
.operations-form .operations-grid { align-content: start; }
.operations-dialog .operations-backup { padding: 12px; }
.operations-dialog:has([data-backup]) [data-backup] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.training-debt-dialog { width: min(600px,calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: auto; background: var(--surface-elevated); color: var(--text-primary); border-color: var(--border); }
.training-debt-dialog :is(input,select) { background: var(--surface-solid); color: var(--text-primary); border-color: var(--border); }
.client-drawer-panel { width: min(1280px,96vw); }
.client-drawer-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; align-items: start; gap: 16px; }
.client-drawer-body > :not(.client-drawer-section) { grid-column: 1 / -1; }
.client-drawer-body .client-drawer-section { min-width: 0; margin: 0; }
.client-drawer-section > summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }
.client-drawer-completed summary { cursor: pointer; margin: 10px 0; }

@media (min-width: 1100px) and (max-height: 800px) {
  #appointment-dialog .booking-col { gap: 8px; }
  #appointment-dialog .appointment-item-grid { gap: 8px; }
  .booking-dialog .dialog-header, .booking-dialog .dialog-footer { padding-block: 10px; }
}
@media (max-width: 1150px) {
  .client-drawer-body { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #appointment-dialog .booking-columns { grid-template-columns: 160px minmax(0,1fr) 290px; }
  #appointment-dialog .booking-col { padding-inline: 10px; }
  #appointment-dialog .appointment-item-calc { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #appointment-details-dialog .appt-details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  #appointment-dialog .booking-columns { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  #appointment-dialog .booking-col--schedule { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid var(--border-subtle); }
  #appointment-dialog .booking-col--schedule > :is(h3,.field-error,.booking-time-summary,.appointment-single-fields) { grid-column: 1 / -1; }
  #appointment-details-dialog .dialog-body { grid-template-columns: 1fr 1fr; }
  #client-create-dialog .dialog-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .booking-dialog, .booking-dialog.narrow, .booking-dialog.form-dialog, #appointment-dialog, #appointment-details-dialog, #client-create-dialog {
    width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 12px;
  }
  .booking-dialog > form, #appointment-dialog > form { max-height: calc(100dvh - 14px); }
  .booking-dialog .dialog-header, .booking-dialog .dialog-footer, .booking-dialog .dialog-body { padding: 12px; }
  .dialog-form-grid, #client-create-dialog .dialog-form-grid, .operations-form .dialog-body, #appointment-details-dialog .dialog-body, #appointment-dialog .booking-columns, .operations-dialog:has([data-backup]) [data-backup] { grid-template-columns: 1fr; }
  #appointment-dialog .booking-col--schedule { grid-template-columns: 1fr 1fr; }
  #appointment-dialog .booking-col { border-right: 0; }
  #appointment-dialog .appointment-item-calc { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #appointment-dialog .appointment-item-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dialog-footer button { flex: 1 1 auto; }
  .client-drawer-panel { width: 100vw; }
  .client-drawer-body { grid-template-columns: 1fr; }
}