/* PIVOT CONTROL OS — Appointment workspace. Presentation only; legacy DOM hooks preserved. */

/* While editing, give the time canvas all remaining room. */
body.pivot-ui:has(#appointmentModal[open]) #view-agenda .pivot-pulse{display:none!important}
body.pivot-ui:has(#appointmentModal[open]) #view-agenda .pivot-timecanvas-shell{grid-template-columns:minmax(0,1fr)!important}

@media(min-width:1200px){
  #appointmentModal.k-appointment-dialog[open]{
    position:fixed!important;
    inset:80px 8px 8px auto!important;
    width:clamp(640px,43vw,700px)!important;
    max-width:calc(100vw - 110px)!important;
    height:calc(100dvh - 88px)!important;
    max-height:calc(100dvh - 88px)!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:16px!important;
    overflow:hidden!important;background:#fff!important;
    box-shadow:0 24px 70px rgba(18,18,22,.20)!important;
  }
  #appointmentModal .k-appointment-form{width:100%!important;height:100%!important;overflow:hidden!important;background:#fff!important}
  #appointmentModal .k-event-layout{
    width:100%!important;height:100%!important;display:grid!important;
    grid-template-columns:minmax(220px,36%) minmax(0,64%)!important;gap:0!important;
    background:#fff!important;overflow:hidden!important;
  }
  #appointmentModal .k-services-side{
    width:100%!important;height:100%!important;padding:0!important;margin:0!important;
    border-right:1px solid var(--pc-line)!important;background:#f7f6f4!important;overflow:hidden!important;
  }
  #appointmentModal .k-side-head{
    width:100%!important;height:54px!important;min-height:54px!important;padding:0 12px 0 16px!important;
    border:0!important;border-bottom:1px solid var(--pc-line)!important;background:#f7f6f4!important;box-shadow:none!important;
  }
  #appointmentModal .k-side-head h3{font:720 13px/1 var(--pc-font)!important;color:var(--pc-ink)!important;letter-spacing:-.01em!important}
  #appointmentModal .k-side-close{width:32px!important;min-width:32px!important;height:32px!important;background:transparent!important;color:#767982!important;font:400 22px/1 Arial,sans-serif!important}
  #appointmentModal .k-service-search{width:100%!important;height:54px!important;padding:10px 12px!important;background:#f7f6f4!important}
  #appointmentModal .k-service-search input{
    width:100%!important;height:34px!important;min-height:34px!important;padding:0 12px!important;margin:0!important;
    border:1px solid #ddd9d4!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important;
    font:500 12px/1 var(--pc-font)!important;color:var(--pc-ink)!important
  }
  #appointmentModal .k-search-mark{display:none!important}
  #appointmentModal .k-service-picker{
    width:100%!important;height:calc(100% - 108px)!important;min-height:0!important;padding:4px 8px 10px!important;
    background:#f7f6f4!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable!important
  }
  #appointmentModal .k-service-picker .picker-header,
  #appointmentModal .k-service-picker .picker-header.k-preferred-header{
    width:100%!important;height:34px!important;min-height:34px!important;padding:0 10px!important;margin:4px 0!important;
    border-radius:8px!important;background:#ece9e5!important;box-shadow:none!important;
    color:#747780!important;font:750 9px/1 var(--pc-font)!important;letter-spacing:.09em!important;text-transform:uppercase!important
  }
  #appointmentModal .k-service-picker .picker-service{
    width:100%!important;height:40px!important;min-height:40px!important;padding:0 10px 0 12px!important;margin:2px 0!important;
    border:0!important;border-left:3px solid var(--k-service-color,#3f51b5)!important;border-radius:8px!important;
    background:#fff!important;color:var(--pc-ink)!important;font:560 12px/1.2 var(--pc-font)!important;
    box-shadow:0 1px 0 rgba(18,18,22,.03)!important
  }
  #appointmentModal .k-service-picker .picker-service:hover{background:#fff5f8!important}

  #appointmentModal .k-event-main{width:100%!important;height:100%!important;min-width:0!important;background:#fff!important;overflow:hidden!important}
  #appointmentModal .k-main-head{
    width:100%!important;height:54px!important;min-height:54px!important;padding:0 92px 0 48px!important;
    border-bottom:1px solid var(--pc-line)!important;background:#fff!important;box-shadow:none!important
  }
  #appointmentModal .k-main-head h3{font:730 14px/1 var(--pc-font)!important;color:var(--pc-ink)!important;letter-spacing:-.015em!important}
  #appointmentModal .k-back,#appointmentModal .k-delete-event,#appointmentModal .k-save-event{
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:6px!important;border-radius:9px!important;background:#f6f4f1!important
  }
  #appointmentModal .k-back{left:8px!important}.k-appointment-dialog #kDeleteEvent{right:46px!important}.k-appointment-dialog .k-save-event{right:8px!important}
  #appointmentModal .k-delete-event img,#appointmentModal .k-save-event img{width:20px!important;height:20px!important}

  #appointmentModal .k-event-body{
    box-sizing:border-box!important;width:100%!important;height:calc(100% - 54px)!important;max-height:calc(100% - 54px)!important;
    margin:0!important;padding:14px 14px 24px!important;overflow-y:auto!important;overflow-x:hidden!important;
    background:#fbfaf8!important;background-image:none!important;scrollbar-gutter:stable!important;
    font-family:var(--pc-font)!important
  }
  #appointmentModal .k-client-row,#appointmentModal .k-phone-row{
    width:100%!important;height:auto!important;min-height:70px!important;display:grid!important;
    grid-template-columns:minmax(0,1fr) 38px!important;gap:6px!important;margin:0!important;padding:0!important
  }
  #appointmentModal .k-client-main,#appointmentModal .k-phone-main{width:100%!important;min-width:0!important;padding:8px 0!important}
  #appointmentModal .k-field-label{height:auto!important;margin:0 0 6px!important;color:#777b83!important;font:750 8px/1 var(--pc-font)!important;letter-spacing:.10em!important}
  #appointmentModal .k-client-picker{width:100%!important;height:38px!important}
  #appointmentModal #aClientSearch,#appointmentModal #aPhone{
    width:100%!important;height:38px!important;min-height:38px!important;margin:0!important;padding:0 34px 0 11px!important;
    border:1px solid #ddd9d4!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important;
    font:520 13px/1 var(--pc-font)!important;color:var(--pc-ink)!important
  }
  #appointmentModal .k-side-action{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;margin:0 0 8px!important;padding:8px!important;align-self:end!important}
  #appointmentModal .k-side-action img,#appointmentModal .k-whatsapp-action .p744l-whatsapp-glyph{width:20px!important;height:20px!important}
  #appointmentModal .k-client-history{width:100%!important;padding:0 0 10px!important}
  #appointmentModal .k-client-history-box{width:100%!important;height:auto!important;min-height:62px!important;max-height:110px!important;border:1px solid #ddd9d4!important;border-radius:10px!important;box-shadow:none!important;font:500 12px/1.4 var(--pc-font)!important}
  #appointmentModal .k-event-divider{width:100%!important;height:1px!important;margin:8px 0 12px!important;background:var(--pc-line)!important}

  #appointmentModal .k-date-time{width:100%!important;height:auto!important;min-height:0!important;padding:0!important;margin:0 0 10px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
  #appointmentModal .k-date-item{width:100%!important;height:42px!important;display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;padding:0!important;border:1px solid #ddd9d4!important;border-radius:10px!important;background:#fff!important}
  #appointmentModal .k-date-item img{width:18px!important;height:18px!important;margin:0 auto!important}
  #appointmentModal .k-date-item input{width:100%!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0 8px!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;font:560 12px/1 var(--pc-font)!important}

  #appointmentModal .k-event-phases,#appointmentModal .k-phase{width:100%!important;max-width:100%!important}
  #appointmentModal .k-phase{margin:0 0 10px!important;padding:10px!important;border:1px solid var(--pc-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}
  #appointmentModal .k-phase-caption{height:auto!important;padding:0 0 8px!important;color:#9699a0!important;font:750 8px/1 var(--pc-font)!important;letter-spacing:.08em!important}
  #appointmentModal .k-phase-row{width:100%!important;height:42px!important;grid-template-columns:30px minmax(0,1fr) 70px!important;gap:6px!important}
  #appointmentModal .k-phase-icon{width:30px!important;height:42px!important}.k-appointment-dialog .k-phase-icon svg{width:18px!important;height:18px!important}
  #appointmentModal .k-phase-row select{height:38px!important;min-height:38px!important;padding:0 8px!important;border:1px solid #e3dfdb!important;border-radius:9px!important;background:#fbfaf8!important;font:520 12px/1 var(--pc-font)!important;color:#555962!important}
  #appointmentModal .k-remove-phase{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;margin:auto!important;padding:6px!important}
  #appointmentModal .p744o-color-wrap{width:66px!important;height:34px!important;margin:0!important;grid-template-columns:28px 38px!important;justify-self:end!important}
  #appointmentModal .p744o-palette-button{width:28px!important;height:34px!important}.k-appointment-dialog .p744o-palette-button svg{width:19px!important;height:19px!important}
  #appointmentModal .p744o-color-swatch{width:36px!important;height:28px!important;border-width:2px!important}
  #appointmentModal .p744o-color-popover{right:0!important;left:auto!important;top:36px!important}

  #appointmentModal .k-phase-time{width:100%!important;height:auto!important;min-height:44px!important;padding:8px 0 0!important;gap:8px!important}
  #appointmentModal .k-time-card,#appointmentModal .k-time-card.k-wait{width:auto!important;min-width:0!important;height:38px!important;flex:1 1 0!important;grid-template-columns:28px minmax(0,1fr) 26px 26px!important;border:1px solid #e3dfdb!important;border-radius:9px!important;box-shadow:none!important}
  #appointmentModal .k-time-card svg{width:18px!important;height:18px!important;margin-left:5px!important}.k-appointment-dialog .k-time-value{font:560 11px/1 var(--pc-font)!important;white-space:nowrap!important}
  #appointmentModal .k-time-card button{width:26px!important;height:36px!important;min-width:26px!important;font-size:18px!important}

  #appointmentModal .k-add-phase{width:100%!important;height:38px!important;min-height:38px!important;padding:0 10px!important;grid-template-columns:1fr 38px 1fr!important}
  #appointmentModal .k-add-phase span{background:#dfdcd7!important}.k-appointment-dialog .k-add-phase b{font-size:21px!important;color:#686b72!important}
  #appointmentModal .k-notes-field{width:100%!important;height:auto!important;min-height:104px!important;padding:10px 0 0!important;color:#777b83!important}
  #appointmentModal #aNotes{width:100%!important;height:78px!important;min-height:78px!important;margin:6px 0 0!important;padding:10px!important;border:1px solid #ddd9d4!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important;font:520 12px/1.4 var(--pc-font)!important}

  #appointmentModal #p744oAdvanced{width:100%!important;max-width:100%!important;margin:8px 0 0!important;border-top:1px solid var(--pc-line)!important}
  #appointmentModal #p744oAdvanced>summary{width:100%!important;height:40px!important;min-height:40px!important;color:#6e7179!important;font:680 10px/40px var(--pc-font)!important}
  #appointmentModal #p744oAdvanced .p744o-advanced-content{width:100%!important;max-width:100%!important;padding:8px 0 10px!important}
  #appointmentModal #p744oAdvanced .p744o-copy-grid{width:100%!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
  #appointmentModal #aPromo,#appointmentModal #aCopyUntil,#appointmentModal .p744o-week-stepper{height:38px!important;min-height:38px!important;border:1px solid #ddd9d4!important;border-radius:9px!important;box-shadow:none!important;background:#fff!important}

  #appointmentModal #kSendConfirmation,#appointmentModal #kNoShow{
    position:static!important;width:100%!important;max-width:100%!important;height:38px!important;min-height:38px!important;
    margin:10px 0 0!important;padding:0 12px!important;border-radius:10px!important;box-shadow:none!important;
    font:680 11px/1 var(--pc-font)!important;line-height:1!important
  }
  #appointmentModal #kSendConfirmation{background:var(--pc-red)!important;color:#fff!important}
  #appointmentModal #kSendConfirmation:disabled{background:#e6a4b7!important;color:#fff!important}
  #appointmentModal #kNoShow{background:#1b1b1f!important;color:#fff!important;margin-bottom:8px!important}
  #appointmentModal .k-advanced:not([open]) ~ #kNoShow{display:none!important}
}

/* Compact desktop / split-screen: use only the form panel, keeping services in the phase selector. */
@media(min-width:761px) and (max-width:1199px){
  #appointmentModal.k-appointment-dialog[open]{
    position:fixed!important;inset:72px 6px 6px auto!important;width:min(440px,48vw)!important;max-width:calc(100vw - 100px)!important;
    height:calc(100dvh - 78px)!important;max-height:calc(100dvh - 78px)!important;margin:0!important;padding:0!important;border:0!important;border-radius:14px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 20px 60px rgba(18,18,22,.20)!important
  }
  #appointmentModal .k-services-side{display:none!important}
  #appointmentModal .k-event-layout,#appointmentModal .k-event-main,#appointmentModal .k-appointment-form{display:block!important;width:100%!important;max-width:100%!important;height:100%!important;min-width:0!important}
}

/* Phone: fit exactly between Pivot command line and primary navigation. */
@media(max-width:760px){
  #appointmentModal.k-appointment-dialog[open],#appointmentModal.event-dialog[open].k-appointment-dialog{
    inset:58px 0 62px 0!important;width:100vw!important;max-width:100vw!important;height:calc(100dvh - 120px)!important;max-height:calc(100dvh - 120px)!important;
    margin:0!important;padding:0!important;border-radius:0!important;background:#fff!important;overflow:hidden!important
  }
  #appointmentModal .k-services-side{display:none!important}
  #appointmentModal .k-event-layout,#appointmentModal .k-event-main,#appointmentModal .k-appointment-form{display:block!important;width:100%!important;max-width:100%!important;height:100%!important;min-width:0!important}
  #appointmentModal .k-main-head{height:50px!important;min-height:50px!important;background:#fff!important;border-bottom:1px solid var(--pc-line)!important;box-shadow:none!important}
  #appointmentModal .k-event-body{width:100%!important;height:calc(100% - 50px)!important;max-height:calc(100% - 50px)!important;padding:12px 12px 22px!important;background:#fbfaf8!important;background-image:none!important;overflow-y:auto!important;overflow-x:hidden!important}
}

@media(min-width:761px) and (max-width:1199px){
  #appointmentModal .k-event-main{overflow:hidden!important;background:#fff!important}
  #appointmentModal .k-main-head{width:100%!important;height:52px!important;min-height:52px!important;padding:0 90px 0 46px!important;background:#fff!important;border-bottom:1px solid var(--pc-line)!important;box-shadow:none!important}
  #appointmentModal .k-main-head h3{font:720 14px/1 var(--pc-font)!important;color:var(--pc-ink)!important}
  #appointmentModal .k-event-body{box-sizing:border-box!important;width:100%!important;height:calc(100% - 52px)!important;max-height:calc(100% - 52px)!important;padding:12px!important;background:#fbfaf8!important;background-image:none!important;overflow-y:auto!important;overflow-x:hidden!important}
  #appointmentModal .k-client-row,#appointmentModal .k-phone-row{width:100%!important;height:auto!important;min-height:68px!important;grid-template-columns:minmax(0,1fr) 38px!important;gap:6px!important}
  #appointmentModal .k-client-main,#appointmentModal .k-phone-main{width:100%!important;min-width:0!important;padding:7px 0!important}
  #appointmentModal .k-client-picker,#appointmentModal #aClientSearch,#appointmentModal #aPhone{width:100%!important;max-width:100%!important;min-width:0!important}
  #appointmentModal #aClientSearch,#appointmentModal #aPhone{height:38px!important;margin:0!important;padding:0 10px!important;border:1px solid #ddd9d4!important;border-radius:9px!important;box-shadow:none!important;background:#fff!important;font:520 13px/1 var(--pc-font)!important}
  #appointmentModal .k-client-history,#appointmentModal .k-client-history-box,#appointmentModal .k-event-divider,#appointmentModal .k-date-time,#appointmentModal .k-event-phases,#appointmentModal .k-phase,#appointmentModal .k-phase-row,#appointmentModal .k-phase-time,#appointmentModal .k-add-phase,#appointmentModal .k-notes-field,#appointmentModal #aNotes,#appointmentModal #p744oAdvanced,#appointmentModal #p744oAdvanced .p744o-advanced-content{width:100%!important;max-width:100%!important;min-width:0!important}
  #appointmentModal .k-event-divider{margin:8px 0 12px!important;background:var(--pc-line)!important}
  #appointmentModal .k-date-time{height:auto!important;min-height:0!important;padding:0!important;margin:0 0 10px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  #appointmentModal .k-date-item{width:100%!important;height:42px!important;grid-template-columns:32px minmax(0,1fr)!important;padding:0!important;border:1px solid #ddd9d4!important;border-radius:9px!important;background:#fff!important}
  #appointmentModal .k-date-item img{width:18px!important;height:18px!important;margin:0 auto!important}
  #appointmentModal .k-date-item input{width:100%!important;height:40px!important;margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
  #appointmentModal .k-phase{padding:9px!important;margin-bottom:9px!important;border:1px solid var(--pc-line)!important;border-radius:11px!important;background:#fff!important;box-shadow:none!important}
  #appointmentModal .k-phase-row{height:42px!important;grid-template-columns:30px minmax(0,1fr) 64px!important;gap:5px!important}
  #appointmentModal .k-phase-icon{width:30px!important;height:42px!important}
  #appointmentModal .k-phase-row select{height:38px!important;min-height:38px!important;border:1px solid #e3dfdb!important;border-radius:9px!important;background:#fbfaf8!important;font:520 12px/1 var(--pc-font)!important}
  #appointmentModal .p744o-color-wrap{width:60px!important;height:34px!important;margin:0!important;grid-template-columns:26px 34px!important;justify-self:end!important}
  #appointmentModal .p744o-color-swatch{width:32px!important;height:28px!important;border-width:2px!important}
  #appointmentModal .k-phase-time{height:auto!important;min-height:44px!important;padding:7px 0 0!important;gap:7px!important}
  #appointmentModal .k-time-card,#appointmentModal .k-time-card.k-wait{width:auto!important;min-width:0!important;flex:1 1 0!important;height:38px!important;grid-template-columns:27px minmax(0,1fr) 25px 25px!important;border:1px solid #e3dfdb!important;border-radius:9px!important;box-shadow:none!important}
  #appointmentModal .k-add-phase{height:38px!important;min-height:38px!important;padding:0 8px!important}
  #appointmentModal .k-notes-field{height:auto!important;min-height:104px!important;padding:9px 0 0!important}
  #appointmentModal #aNotes{height:78px!important;min-height:78px!important;margin:6px 0 0!important;border:1px solid #ddd9d4!important;border-radius:9px!important;box-shadow:none!important;background:#fff!important}
  #appointmentModal #p744oAdvanced{margin:8px 0 0!important;border-top:1px solid var(--pc-line)!important}
  #appointmentModal #p744oAdvanced>summary{width:100%!important;height:40px!important;min-height:40px!important}
  #appointmentModal #kSendConfirmation,#appointmentModal #kNoShow{position:static!important;width:100%!important;max-width:100%!important;height:38px!important;min-height:38px!important;margin:10px 0 0!important;border-radius:9px!important;box-shadow:none!important}
  #appointmentModal #kNoShow{margin-bottom:8px!important;background:#1b1b1f!important;color:#fff!important}
}