/* Compact appointment editor: visual layout only. */
#appointmentModal{background:color-mix(in srgb,#181821 28%,transparent);backdrop-filter:blur(12px) saturate(1.08)}
#appointmentModal .appointment-edit-sheet{width:min(1120px,calc(100vw - 28px));max-height:min(94dvh,920px);padding:18px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:22px;background:color-mix(in srgb,var(--surface-solid) 97%,transparent);box-shadow:0 30px 90px rgba(20,18,42,.25);scrollbar-gutter:stable}
#appointmentModal .modal-header{top:-18px;margin:-18px -18px 10px;padding:14px 18px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent);background:color-mix(in srgb,var(--surface-solid) 91%,transparent);backdrop-filter:blur(24px) saturate(1.3)}
#appointmentModal .modal-header-close{width:38px;height:38px;border-radius:12px;background:var(--surface-muted)}
#appointmentModal .appointment-form-section{margin:0;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--surface-solid) 96%,var(--surface-muted));box-shadow:0 8px 24px rgba(25,22,55,.035)}
#appointmentModal .appointment-section-title{min-height:36px;margin-bottom:8px}
#appointmentModal .appointment-section-title>span{width:24px;height:24px;flex-basis:24px;border-radius:8px}
#appointmentModal .appointment-section-title strong{font-size:12px;letter-spacing:-.15px}
#appointmentModal .appointment-barcode-button{width:34px;height:34px;border-radius:10px}
#appointmentModal .client-workflow-section{padding:10px 12px}
#appointmentModal .client-compact-tools{min-height:36px;margin-bottom:7px}
#appointmentModal .client-comment-bubble{min-height:34px;padding:0 12px;border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#appointmentModal .client-history-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px}
#appointmentModal .client-history-icon svg{width:16px;height:16px}
#appointmentModal .appointment-client-lookup .field{margin:0}
#appointmentModal .appointment-client-lookup input{height:44px;border-radius:12px;background:color-mix(in srgb,var(--green-soft) 48%,var(--surface-solid));font-size:13px;font-weight:850}
#appointmentModal .booking-service-field{margin:0 0 8px}
#appointmentModal .appointment-add-item{margin:0}
#appointmentModal .appointment-add-item input{height:38px;border-radius:10px}
#appointmentModal .appointment-check-items{gap:6px;margin:0}
#appointmentModal .appointment-check-row{min-height:42px;padding:6px 8px;border-radius:10px}
#appointmentModal .appointment-check-row>span strong{font-size:10px}
#appointmentModal .appointment-check-total{min-height:42px;padding:7px 10px;background:linear-gradient(105deg,color-mix(in srgb,var(--primary) 8%,var(--surface-solid)),color-mix(in srgb,var(--primary) 14%,var(--surface-solid)))}
#appointmentModal .appointment-order-prices{gap:7px}
#appointmentModal .appointment-order-prices em{border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);border-radius:999px}
#appointmentModal .appointment-order-prices strong{font-size:14px;color:var(--primary)}
#appointmentModal .payment-console-heading{min-height:42px;margin:0;padding:7px 10px}
#appointmentModal .payment-console-heading>strong{font-size:16px}
#appointmentModal .payment-console-heading .appointment-status-chip{width:36px;height:36px;border-radius:11px}
#appointmentModal .payment-console-heading .appointment-status-chip svg{width:17px;height:17px}
#appointmentModal .payment-value-row{margin:0;padding:10px;border-radius:14px}
#appointmentModal .paid-amount-field{padding-right:10px}
#appointmentModal .paid-amount-heading>span{font-size:11px;font-weight:800}
#appointmentModal .paid-amount-field .unit-input input{height:40px;background:var(--surface-muted);font-size:13px;font-weight:800}
#appointmentModal .payment-method-switch{grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;border-radius:10px}
#appointmentModal .payment-method-switch:has(.subscription-payment-option:not([hidden])){grid-template-columns:repeat(4,minmax(0,1fr))}
#appointmentModal .payment-method-switch span{height:32px;border-radius:8px}
#appointmentModal .split-payment-toggle{min-height:26px;margin:0 0 5px}
#appointmentModal .split-payment-fields{gap:6px}
#appointmentModal .split-payment-fields .unit-input input{height:36px;border-radius:9px}
#appointmentModal .compact-payment-extras{padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--surface-solid)}
#appointmentModal .appointment-consumables-fields{padding:0;border:0;background:transparent}
#appointmentModal .appointment-consumable-rows{gap:5px}
#appointmentModal .appointment-consumable-row{min-height:42px;padding:5px 6px;border-radius:10px}
#appointmentModal .consumables-cost-field,#appointmentModal .tips-field{border-radius:11px}
#appointmentModal .modal-actions{bottom:-18px;margin:10px -18px -18px;padding:11px 18px calc(11px + max(env(safe-area-inset-bottom),var(--tg-content-safe-bottom,0px)));gap:8px;background:color-mix(in srgb,var(--surface-solid) 91%,transparent);backdrop-filter:blur(24px) saturate(1.25)}
#appointmentModal .modal-actions button{min-height:40px;border-radius:12px}

@media(min-width:980px){
  #appointmentModal #appointmentEditForm{display:grid;grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);grid-template-rows:auto 52px auto auto;align-items:start;gap:10px 12px}
  #appointmentModal .client-workflow-section{grid-column:1/-1;grid-row:1}
  #appointmentModal .service-workflow-section{grid-column:1;grid-row:2/span 2;align-self:stretch;min-height:0}
  #appointmentModal .compact-payment-section,#appointmentModal #appointmentPaymentContent{display:contents}
  #appointmentModal .payment-console-heading{grid-column:2;grid-row:2;height:52px;border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;background:var(--surface-solid)}
  #appointmentModal .payment-value-row{grid-column:2;grid-row:3;grid-template-columns:minmax(150px,.78fr) minmax(250px,1.22fr);align-self:stretch;border-radius:0 0 16px 16px;background:var(--surface-solid)}
  #appointmentModal .compact-payment-extras{grid-column:1/-1;grid-row:4;display:grid!important;grid-template-columns:minmax(0,1fr)!important;margin:0}
  #appointmentModal .compact-payment-extras:has(#appointmentConsumablesField:not([hidden])){grid-template-columns:minmax(0,1fr)!important;align-items:start}
  #appointmentModal .compact-payment-extras:has(#appointmentConsumablesField:not([hidden])) .tips-field{align-self:auto}
  #appointmentModal .compact-payment-extras:has(#appointmentConsumablesField:not([hidden])) .tips-field{grid-template-columns:minmax(0,1fr) minmax(170px,220px)}
  #appointmentModal .appointment-consumable-row{grid-template-columns:minmax(240px,1fr) minmax(110px,150px) minmax(82px,100px) 30px}
  #appointmentModal .modal-actions{grid-column:1/-1;grid-row:5}
}

@media(max-width:979px){
  #appointmentModal .appointment-edit-sheet{width:min(760px,calc(100vw - 20px));padding:14px}
  #appointmentModal .modal-header{top:-14px;margin:-14px -14px 9px;padding:13px 14px 11px}
  #appointmentModal #appointmentEditForm{display:grid;gap:9px}
  #appointmentModal .compact-payment-section #appointmentPaymentContent{padding:10px}
  #appointmentModal .modal-actions{bottom:-14px;margin:9px -14px -14px;padding-left:14px;padding-right:14px}
}

@media(max-width:700px){
  #appointmentModal{padding:0;align-items:flex-end}
  #appointmentModal .appointment-edit-sheet{width:100%;height:calc(var(--modal-viewport-height,var(--tg-viewport-height,100dvh)) - var(--app-safe-top));max-height:none;padding:12px;border-radius:20px 20px 0 0}
  #appointmentModal .modal-header{top:-12px;margin:-12px -12px 8px;padding:12px 12px 10px}
  #appointmentModal .appointment-form-section{padding:10px;border-radius:14px}
  #appointmentModal .client-compact-tools{flex-wrap:nowrap}
  #appointmentModal .client-comment-bubble{max-width:42%}
  #appointmentModal .payment-console-heading{align-items:flex-start;flex-wrap:wrap}
  #appointmentModal .payment-console-heading .appointment-status-controls{width:auto;flex:1;justify-content:flex-end}
  #appointmentModal .payment-value-row{grid-template-columns:1fr}
  #appointmentModal .paid-amount-field{padding:0 0 9px;border-right:0;border-bottom:1px solid var(--line)}
  #appointmentModal .payment-method-switch{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appointmentModal .split-payment-fields,#appointmentModal .split-payment-fields:has(.split-subscription-field:not([hidden])){grid-template-columns:1fr}
  #appointmentModal .compact-payment-extras:has(#appointmentConsumablesField:not([hidden])){grid-template-columns:1fr!important}
  #appointmentModal .appointment-consumable-row{grid-template-columns:minmax(0,1fr) 72px 54px 27px}
  #appointmentModal .modal-actions{bottom:calc(-12px - var(--app-safe-bottom));margin:8px -12px calc(-12px - var(--app-safe-bottom));padding:10px 12px calc(10px + var(--app-safe-bottom));display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #appointmentModal .modal-actions button{min-width:0;width:100%}
  #appointmentModal .modal-actions .primary-button{grid-column:1/-1}
}

@media(max-width:430px){
  #appointmentModal .appointment-consumable-row{grid-template-columns:minmax(0,1fr) 64px 27px}
  #appointmentModal .appointment-consumable-subtotal{grid-column:1/3;text-align:right}
  #appointmentModal .remove-appointment-consumable{grid-column:3;grid-row:1}
  #appointmentModal .appointment-order-prices{gap:4px}
  #appointmentModal .appointment-order-prices small{display:none}
  #appointmentModal .modal-actions{grid-template-columns:1fr}
  #appointmentModal .modal-actions .primary-button{grid-column:auto}
}

html[data-theme="dark"] #appointmentModal .appointment-edit-sheet{background:color-mix(in srgb,var(--surface-solid) 96%,#11131a);box-shadow:0 34px 100px rgba(0,0,0,.5)}
html[data-theme="dark"] #appointmentModal .appointment-form-section,html[data-theme="dark"] #appointmentModal .payment-console-heading,html[data-theme="dark"] #appointmentModal .payment-value-row,html[data-theme="dark"] #appointmentModal .compact-payment-extras{background:color-mix(in srgb,var(--surface-solid) 94%,#222531)}

@media(max-width:650px){
  #appointmentModal{padding:var(--appointment-modal-safe-top) max(6px,var(--app-safe-right)) 0 max(6px,var(--app-safe-left))}
  #appointmentModal .appointment-edit-sheet{
    width:100%;max-width:100%;height:calc(var(--modal-viewport-height,var(--tg-viewport-height,100dvh)) - var(--appointment-modal-safe-top));padding-inline:10px;overflow-x:hidden;
  }
  #appointmentModal .modal-header{align-items:flex-start;padding:14px 46px 10px 12px}
  #appointmentModal .modal-heading-with-colors{width:100%;min-width:0;padding-top:58px}
  #appointmentModal .appointment-creation-meta{left:0;top:40px;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #appointmentModal .modal-header-close{position:absolute;z-index:5;top:12px;right:8px;width:36px;height:36px;margin:0}
  #appointmentModal .modal-title-color-row{top:0;left:0;width:100%;height:38px;min-width:0;padding:0 0 0 116px}
  #appointmentModal .compact-color-picker{left:0;top:7px;gap:3px;max-width:112px;overflow:visible}
  #appointmentModal .modern-color-picker.compact-color-picker>span{width:16px;height:16px;flex-basis:16px;border-radius:5px}
  #appointmentModal .modal-title-color-row .booking-header-master{position:relative;inset:auto;width:100%;max-width:none;min-width:0}
  #appointmentModal .booking-header-master select{width:100%;min-width:0;height:32px;padding-left:8px;padding-right:20px;font-size:8px}
  #appointmentModal .appointment-header-datetime{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px;gap:5px;margin:0;padding:0}
  #appointmentModal .appointment-header-datetime>label:first-child{grid-column:1/-1}
  #appointmentModal .appointment-header-datetime input,#appointmentModal .appointment-header-datetime select{width:100%;min-width:0}
  #appointmentModal .appointment-header-datetime>strong{min-width:0;width:48px}
}