[data-drag-item]{position:relative;min-width:0} .hb-drag-tools{display:flex;align-items:center;gap:2px;margin:0 0 6px;justify-content:flex-end} .hb-drag-handle,.hb-drag-step{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;padding:5px;border:0;border-radius:9px;background:transparent;color:#8490a1;font:inherit;cursor:pointer} .hb-drag-handle{touch-action:none;cursor:grab}.hb-drag-handle svg{width:18px;height:18px}.hb-drag-step{font-size:20px} .hb-drag-tools button:hover,.hb-drag-tools button:focus-visible{background:var(--hb-button-soft);color:#192d4b;outline-offset:2px;border-color:var(--hb-button-soft-border)} .hb-drag-active{opacity:.65;outline:2px solid #879bc3;outline-offset:2px}.hb-drag-ready>[data-drag-item]:not(.hb-drag-active){box-shadow:none} .hb-is-dragging{user-select:none;cursor:grabbing}.hb-drag-tools button{white-space:nowrap} .hb-domain-row>.hb-drag-tools{margin:0}.hb-domain-row{touch-action:auto!important} .hb-agenda-drag{border:0;background:transparent;color:#8490a1;cursor:grab;touch-action:none;padding:8px;border-radius:8px;width:34px;height:36px}.hb-agenda-drag svg{width:18px;height:18px} .hb-agenda-drag:hover{background:#f0f2f7;color:#192d4b}.hb-agenda-destinations{position:fixed;z-index:10020;bottom:16px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));max-height:45vh;overflow:auto;padding:14px;border:1px solid #d9dfed;border-radius:18px;background:#fff;box-shadow:0 12px 40px #192d4b26} .hb-agenda-days,.hb-agenda-times{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.hb-agenda-destinations [data-drop-day],.hb-agenda-destinations [data-drop-time]{padding:10px;border:1px dashed #cbd3e3;border-radius:10px;font-size:13px}.hb-agenda-destinations .is-over{background:#edf0fa;border-color:#7388b2} .hb-schedule-track{position:relative;height:44px;margin:8px 0 22px;border:1px solid #e1e5ed;border-radius:10px;background:repeating-linear-gradient(to right,#f7f8fb 0,#f7f8fb calc(100% / 24 - 1px),#dfe4ed calc(100% / 24 - 1px),#dfe4ed calc(100% / 24))} .hb-schedule-track:before,.hb-schedule-track:after{position:absolute;top:100%;font-size:10px;color:#8490a1;content:'00:00';left:0}.hb-schedule-track:after{content:'24:00';left:auto;right:0} .hb-schedule-bar{position:absolute;top:7px;height:28px;border:1px solid #b6c2dd;border-radius:8px;background:#e6ebf8;display:flex;align-items:center;color:#263d66;min-width:20px;touch-action:none} .hb-schedule-bar button{border:0;background:transparent;color:inherit;touch-action:none;padding:0;cursor:grab}.hb-schedule-bar [data-window-drag]{flex:1;min-width:0;height:100%;overflow:hidden;font-size:11px;white-space:nowrap}.hb-schedule-bar [data-window-edge]{width:8px;height:100%;cursor:ew-resize;flex:none}.hb-schedule-track.is-over{outline:2px dashed #7388b2} @media(pointer:coarse){.hb-drag-handle,.hb-drag-step{width:36px;height:40px}.hb-agenda-drag{height:44px}.hb-schedule-track{height:54px}.hb-schedule-bar{height:38px}.hb-schedule-bar [data-window-edge]{width:14px}} .hb-schedule-day>.hb-schedule-track{grid-column:1/-1;width:100%;min-width:0} .hb-drag-tools{flex-wrap:nowrap;max-width:100%} .hb-domain-name{min-width:0;overflow-wrap:anywhere} /* 0.3.547: one grip within the existing header; no extra toolbar. */ .hb-drag-tools{display:inline-flex;flex:none;gap:0;margin:0;align-items:center} .hb-drag-tools>.hb-drag-handle{width:36px;height:40px;min-width:36px;padding:8px;border:0;border-radius:8px} [data-drag-surface]{cursor:grab;touch-action:none;user-select:none} .hb-dash-header{padding-right:14px!important} .hb-dash-header h3{flex:1;min-width:0} .hb-dash-header>.hb-drag-tools{margin-left:auto;color:inherit} .hb-dash-header .hb-drag-handle{color:inherit} .hb-person-identity>.hb-drag-tools{position:absolute;right:6px;top:3px;z-index:2} .hb-person-identity .hb-drag-handle{color:white} .hb-person-identity .hb-drag-handle:hover{background:#ffffff26;color:white} .hb-domain-row>.hb-drag-tools{order:2;margin-left:auto} .hb-domain-row>.icon-btn{order:1} .hb-studio-photo>.hb-drag-tools,.hb-application-photo-item>.hb-drag-tools{position:absolute;right:6px;top:6px;z-index:3;background:#fffffff0;border-radius:9px} .hb-application-photo-item>.hb-drag-tools{right:48px} @media(max-width:650px){ .hb-drag-tools>.hb-drag-handle{width:44px;height:44px;min-width:44px;min-height:44px} .hb-domain-list .hb-domain-row{flex-wrap:wrap;gap:6px} .hb-domain-name{flex:1;min-width:0} .hb-studio-photos[data-drag-list]{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))} .hb-agenda-destinations{bottom:max(12px,env(safe-area-inset-bottom));max-height:45dvh;overscroll-behavior:contain} } .hb-ad-row>.panel-head>strong{flex:1;min-width:0} .hb-ad-row>.panel-head>.hb-drag-tools{margin-left:0} /* Match the round configuration control in every financial dashboard. */ .hb-dash-header>.hb-drag-tools>.hb-drag-handle,.hb-dash-header>.hb-dash-config{display:inline-grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;flex:0 0 36px;padding:8px;border:0;border-radius:50%;color:#fff;background:transparent;box-shadow:none} .hb-dash-header>.hb-drag-tools>.hb-drag-handle:is(:hover,:focus-visible),.hb-dash-header>.hb-dash-config:is(:hover,:focus-visible){background:#ffffff26;color:#fff} .hb-exp-dashboard .hb-dash-header>.hb-drag-tools>.hb-drag-handle,.hb-finance-chart [data-dash-id="trend"] .hb-drag-handle{color:#25252b} .hb-exp-dashboard .hb-dash-header>.hb-drag-tools>.hb-drag-handle:is(:hover,:focus-visible),.hb-finance-chart [data-dash-id="trend"] .hb-drag-handle:is(:hover,:focus-visible){background:#dedee3;color:#19191c} .hb-is-dragging,.hb-is-dragging *{overflow-anchor:none!important} .hb-drag-ready>[data-drag-item]{transition:none!important;animation:none!important} .hb-drag-active{opacity:1} @media(max-width:650px){.hb-dash-header>.hb-drag-tools>.hb-drag-handle,.hb-dash-header>.hb-dash-config{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px;padding:12px}} /* 0.3.566: fixed drag panel, independently scrolling dates/times and an always-visible close action. */ .hb-agenda-destinations{display:flex;flex-direction:column;box-sizing:border-box;bottom:max(12px,env(safe-area-inset-bottom));width:min(620px,calc(100vw - 24px));max-height:min(560px,65dvh);padding:0;overflow:hidden;border:1px solid #e1d9ef;border-radius:20px;box-shadow:0 16px 48px #192d4b24;overscroll-behavior:contain} .hb-agenda-tray-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #eee8f6;background:#fff;flex:none}.hb-agenda-tray-head>strong{font-size:18px;color:#192d4b}.hb-agenda-tray-head .icon-btn{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;margin:0;border-radius:50%;background:var(--hb-button-soft);border-color:var(--hb-button-soft-border)} .hb-agenda-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:14px 16px 18px;scrollbar-width:thin;scrollbar-color:#c9bedc transparent;touch-action:none}.hb-agenda-scroll>.small-note{margin:0 0 14px;font-size:13px;line-height:1.5} .hb-agenda-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:8px;margin:0 0 16px}.hb-agenda-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:8px;margin:0;padding-top:16px;border-top:1px solid #eee8f6} .hb-agenda-destinations [data-drop-day]{display:grid;gap:5px;align-content:center;text-align:center;min-height:64px;box-sizing:border-box;border:1px solid #e8e0f3;border-radius:13px;background:#faf8fd;padding:9px 7px;color:#493865}.hb-agenda-destinations [data-drop-day] small{font-size:12px}.hb-agenda-destinations [data-drop-day] strong{font-size:15px;font-weight:700} .hb-agenda-destinations [data-drop-time]{display:grid;place-items:center;min-height:44px;box-sizing:border-box;padding:10px 7px;border:1px solid #dce9e6;border-radius:11px;background:#f5fbf9;color:#15675d;font-size:15px;font-weight:600;font-variant-numeric:proportional-nums} .hb-agenda-destinations :is([data-drop-day],[data-drop-time]).is-over{background:#7039c6;border-color:#7039c6;color:#fff;box-shadow:0 0 0 2px #e4d7f6} dialog{overscroll-behavior:contain} /* 0.3.567: single outlines, pale lilac/blue availability, navy drop targets. */ .hb-agenda-destinations .hb-agenda-slot-heading{display:grid;gap:5px;margin:16px 0 10px;padding-top:14px;border-top:1px solid #eeeaf3;color:#263b59}.hb-agenda-slot-heading>strong{font-size:14px;line-height:1.45}.hb-agenda-slot-heading>small{font-size:12px;color:#7f8592;line-height:1.5} .hb-agenda-destinations .hb-agenda-times{border:0;padding-top:0} .hb-agenda-destinations .hb-agenda-times>span{display:grid;place-items:center;min-height:44px;box-sizing:border-box;padding:10px 7px;border:1px solid #d9e1f0;border-radius:11px;background:#edf2fc;color:#354e78;font-size:15px;font-weight:650;font-variant-numeric:proportional-nums;outline:0;box-shadow:none} .hb-agenda-destinations [data-drop-day]{border:1px solid #e4dcee;background:#faf8fd;outline:0;box-shadow:none}.hb-agenda-destinations [data-drop-day].has-slots{background:#f0eaf9;border-color:#d8caeb}.hb-agenda-destinations [data-drop-day].is-selected{background:#e9eef8;border-color:#aab9d2} .hb-agenda-destinations .hb-agenda-times>.is-unavailable,.hb-agenda-destinations [data-drop-day].is-unavailable{background:#f4f4f6;border-color:#e8e8ec;color:#a0a3ad;box-shadow:none;cursor:default} .hb-agenda-destinations :is([data-drop-day],[data-drop-time]).is-over{background:#192d4b;border-color:#192d4b;color:#fff;outline:0;box-shadow:none} .hb-agenda-destinations :is([data-drop-day],[data-drop-time]).is-over :is(small,strong){color:#fff!important} .hb-agenda-destinations [data-drop-day].is-unavailable.is-over{background:#ececf0;border-color:#dedee4;color:#9195a0}.hb-agenda-destinations [data-drop-day].is-unavailable.is-over :is(small,strong){color:inherit!important} .hb-agenda-destinations :is([data-drop-day],[data-drop-time])::before,.hb-agenda-destinations :is([data-drop-day],[data-drop-time])::after{content:none;display:none} /* Pointer-following previews for every sortable list, including dialogs. */ .hb-drag-floating,.hb-drag-floating *{pointer-events:none!important}.hb-drag-floating::backdrop{display:none!important}.hb-drag-ready>.hb-drag-active{opacity:.24!important;outline:2px dashed #9aa0aa;outline-offset:2px}.hb-drag-floating{cursor:grabbing!important} /* Colored expense KPI headers: both controls stay white, including hover/focus. */ .hb-exp-dashboard.hb-exp-packed>.hb-dash-card.hb-finance-chart-item .hb-dash-header :is(.hb-dash-config,.hb-drag-handle){color:#fff;background:transparent} .hb-exp-dashboard.hb-exp-packed>.hb-dash-card.hb-finance-chart-item .hb-dash-header :is(.hb-dash-config,.hb-drag-handle):is(:hover,:focus-visible){color:#fff;background:#ffffff26} .hb-exp-dashboard.hb-exp-packed>.hb-dash-card.hb-finance-chart-item .hb-dash-header :is(.hb-dash-config,.hb-drag-handle) svg{color:inherit} /* Schedule intervals: geometry is set through CSSOM, compatible with the strict CSP. */ .hb-schedule-track{height:54px;margin:14px 0 28px;border-radius:12px} .hb-schedule-bar{top:7px;height:38px;background:#e51e59;border:0;color:#fff;border-radius:8px;min-width:12px;box-sizing:border-box} .hb-schedule-bar [data-window-drag]{font-size:13px;font-weight:750;cursor:grab} .hb-schedule-bar [data-window-drag]:active{cursor:grabbing} .hb-schedule-bar [data-window-edge]{position:relative;width:18px;min-width:0;padding:0;border-radius:6px;cursor:ew-resize} .hb-schedule-bar [data-window-edge]::after{content:'';display:block;position:absolute;left:50%;top:9px;bottom:9px;width:3px;background:#fff;border-radius:2px;transform:translateX(-50%)} .hb-schedule-bar [data-window-edge]:hover{background:rgba(255,255,255,.2)} .hb-schedule-bar button:focus-visible{outline:2px solid #192d4b;outline-offset:2px} .hb-schedule-gap{background:#eef0f3;color:#58616f;border:1px dashed #c5cbd3} .hb-schedule-track.is-over{outline:2px solid rgba(229,30,89,.3);outline-offset:2px} #hb-schedule-form>.form-actions{position:sticky;bottom:0;z-index:4;background:transparent;padding:12px 0;margin-top:16px;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;justify-content:center} @media(pointer:coarse){.hb-schedule-bar [data-window-edge]{width:22px}.hb-schedule-bar{height:42px;top:5px}} #hb-schedule-form>.form-actions button[type=submit]{background:#192d4b;color:#fff;border-color:#192d4b;font-weight:750} #hb-schedule-form .hb-schedule-intro{font-size:15px;line-height:1.45} #hb-schedule-form .hb-schedule-business-hours{font-size:14px;color:#606875;margin:10px 0} #hb-schedule-form .hb-schedule-business-hours strong{color:#192d4b;font-weight:700} .hb-schedule-summary{display:grid;gap:5px;margin:12px 0;padding:12px 14px;background:#fff;border:1px solid #e6e8ec;border-radius:12px;font-size:14px;color:#535c68} .hb-schedule-summary-title{font-size:14px;color:#192d4b;margin:3px 0 5px;font-weight:750} .hb-schedule-summary-row{display:grid;grid-template-columns:minmax(60px,auto) 1fr;gap:14px;line-height:1.4} .hb-schedule-summary-row strong,.hb-schedule-summary-row b{color:#303844;font-weight:700} #hb-schedule-form .small-note{font-size:14px;line-height:1.45} @media(max-width:540px){.hb-schedule-summary-row{grid-template-columns:1fr;gap:2px}} .hb-schedule-track::before,.hb-schedule-track::after{margin-top:4px} /* 0.3.837.122 — balanced schedule layout, consistent controls and Billix accents. */ #modal:has(#hb-schedule-form){width:min(1080px,calc(100vw - 32px));max-width:1080px;padding:28px} #modal #hb-schedule-form{gap:24px;min-width:0;width:100%;container-type:inline-size;container-name:billix-schedule;color:#252b35} #modal #hb-schedule-form .hb-schedule-intro{padding:20px;gap:16px;background:#f4f4f5;border:1px solid #e6e6e9;border-radius:16px} #modal #hb-schedule-form .hb-schedule-intro>svg{width:24px;height:24px;flex:none;color:#e51e59} #modal #hb-schedule-form .hb-schedule-intro>div{min-width:0;flex:1} #modal #hb-schedule-form .hb-schedule-intro strong{font-size:16px;font-weight:700} #modal #hb-schedule-form .hb-schedule-intro p{font-size:14px;line-height:1.6;margin:8px 0;color:#667080} #modal #hb-schedule-form .hb-schedule-business-hours{padding-top:14px;border-top:1px solid #e2e2e6;margin-top:16px} #modal #hb-schedule-form .hb-schedule-business-hours strong{color:#e51e59;line-height:1.8} #modal #hb-schedule-form .hb-schedule-zone{display:block;margin-top:10px;font-size:12px;color:#7a808a} #modal #hb-schedule-form .hb-schedule-summary{display:block;margin:0;padding:0;border:0;background:transparent;font-size:14px} #modal #hb-schedule-form .hb-schedule-summary-title{font-size:16px;font-weight:700;color:#252b35;margin:0 0 16px} #modal #hb-schedule-form .hb-schedule-summary-week{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:14px 36px} #modal #hb-schedule-form .hb-schedule-summary-row{display:flex;flex:0 0 auto;align-items:baseline;gap:10px;max-width:100%;min-height:28px;padding:3px 0;border:0;line-height:1.5} #modal #hb-schedule-form .hb-schedule-summary-row strong{font-size:14px;color:#69717d} #modal #hb-schedule-form .hb-schedule-summary-row b{font-size:14px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:#252b35} #modal #hb-schedule-form .hb-schedule-off{font-size:13px;color:#7b828d} #modal #hb-schedule-form .hb-schedule-exceptions-summary{margin-top:26px;padding-top:22px;border-top:1px solid #e7e9ed} #modal #hb-schedule-form .hb-schedule-summary-exception{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 18px;margin-top:10px;border-radius:12px;background:#f4f4f5;line-height:1.6} #modal #hb-schedule-form .hb-schedule-date-range{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:700;color:#333943} #modal #hb-schedule-form .hb-schedule-date-range time{white-space:nowrap} #modal #hb-schedule-form .small-note{background:transparent;border:0;padding:0;font-size:14px;line-height:1.6;margin:12px 0;color:#727987} #modal #hb-schedule-form .check{margin:18px 0;font-size:15px;line-height:1.5} #modal #hb-schedule-form .hb-schedule-day{display:grid;grid-template-columns:minmax(284px,.7fr) minmax(0,1.3fr);align-items:start;gap:20px;padding:22px 0;border-bottom:1px solid #e8ebef} #modal #hb-schedule-form .hb-schedule-day>div{min-width:0} #modal #hb-schedule-form .hb-schedule-day h3{grid-column:1/-1;margin:0;line-height:24px;font-size:16px;color:#454d59} #modal #hb-schedule-form .hb-work-window{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;align-items:end;gap:10px;margin:0 0 10px} #modal #hb-schedule-form .hb-work-window .field{display:flex;flex-direction:column;gap:6px;min-height:0;margin:0} #modal #hb-schedule-form .hb-work-window .field>span:not(.hb-time-control){height:18px;min-height:18px;line-height:18px;font-size:12px;margin:0} #modal #hb-schedule-form .hb-work-window input,#modal #hb-schedule-form .hb-time-trigger{box-sizing:border-box;height:44px;min-height:44px;min-width:0;padding:10px;font-size:14px;border-radius:10px;font-variant-numeric:tabular-nums} #modal #hb-schedule-form .hb-time-trigger svg{width:16px;height:16px;flex:none} #modal #hb-schedule-form .hb-work-window .icon-btn{position:static;display:grid;place-items:center;align-self:end;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:11px;border:1px solid #e6e6e9;border-radius:10px;background:var(--hb-button-soft);color:#e51e59;transform:none;border-color:var(--hb-button-soft-border)} #modal #hb-schedule-form .hb-work-window .icon-btn:hover{background:var(--hb-button-soft);border-color:#e51e59;border-color:var(--hb-button-soft-border)} #modal #hb-schedule-form .hb-work-window .icon-btn svg{width:18px;height:18px} #modal #hb-schedule-form .hb-schedule-tool{min-height:40px;padding:8px 10px;gap:8px;font-size:13px;color:#e51e59} #modal #hb-schedule-form .hb-schedule-tool:disabled{color:#9299a4;opacity:.55} #modal #hb-schedule-form .hb-schedule-tool svg{width:17px;height:17px} #modal #hb-schedule-form .hb-schedule-closed{font-size:13px;line-height:1.6;color:#858c97;margin:24px 0 8px} #modal #hb-schedule-form .hb-schedule-section-head{margin-top:28px;gap:16px;align-items:center} #modal #hb-schedule-form .hb-schedule-section-head h3{font-size:17px} #modal #hb-schedule-form .hb-schedule-exception{padding:20px;margin-top:16px;border:1px solid #e4e7ec;border-radius:14px} #modal #hb-schedule-form .hb-schedule-exception-head{margin-bottom:16px;gap:16px} #modal #hb-schedule-form .hb-schedule-exception .form-grid{gap:20px;margin-bottom:20px} #modal #hb-schedule-form .hb-schedule-day>.hb-schedule-track{grid-column:auto;margin:24px 0 28px} #modal #hb-schedule-form .hb-schedule-track{box-sizing:border-box;height:44px;border:1px solid #e2e5ea;border-radius:10px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / 24 - 1px),#e5e8ed calc(100% / 24 - 1px),#e5e8ed calc(100% / 24)),#f8f9fb;isolation:isolate} #modal #hb-schedule-form .hb-schedule-track::before,#modal #hb-schedule-form .hb-schedule-track::after{display:none} .hb-schedule-ruler{position:absolute;left:0;right:0;top:calc(100% + 8px);height:16px;pointer-events:none;color:#87909d;font-size:11px;font-variant-numeric:tabular-nums} .hb-schedule-ruler span{position:absolute;transform:translateX(-50%)} .hb-schedule-ruler span:first-child{transform:none}.hb-schedule-ruler span:last-child{transform:translateX(-100%)} .hb-schedule-blocked{position:absolute;top:0;bottom:0;z-index:-1;background:repeating-linear-gradient(135deg,#e7eaf0 0,#e7eaf0 2px,#f1f3f6 2px,#f1f3f6 7px);pointer-events:none;border-radius:8px} #modal #hb-schedule-form .hb-schedule-bar{top:-1px;height:44px;box-sizing:border-box;min-width:0;background:#e51e59;border:1px solid #e51e59;border-radius:9px;color:white;box-shadow:none} #modal #hb-schedule-form .hb-schedule-bar [data-window-drag]{font-size:12px;font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;touch-action:none} #modal #hb-schedule-form .hb-schedule-bar [data-window-edge]{width:20px;max-width:25%;flex-shrink:0;touch-action:none} #modal #hb-schedule-form .hb-schedule-bar [data-window-edge]::after{width:2px;top:13px;bottom:13px;opacity:.7} #modal #hb-schedule-form .hb-schedule-gap{background:#f1f3f6;color:#7a8493;border:1px dashed #c6ced9;box-shadow:none} #modal #hb-schedule-form .hb-schedule-track.is-over{outline:2px solid #e51e59;outline-offset:4px} #modal #hb-schedule-form .hb-schedule-adjustment{display:flex;gap:12px;padding:16px 18px;background:#f4f4f5;border:1px solid #e6e6e9;border-radius:12px;font-size:14px;line-height:1.6} #modal #hb-schedule-form .hb-schedule-adjustment>svg{width:20px;height:20px;flex:none;color:#e51e59} #modal #hb-schedule-form .hb-schedule-adjustment p{margin:5px 0;color:#727987} #modal #hb-schedule-form .hb-schedule-adjustment small{color:#727987} #modal #hb-schedule-form>.form-actions{position:static;margin-top:12px;padding-top:12px;border-top:0;gap:12px;flex-wrap:wrap} #modal #hb-schedule-form>.form-actions button{height:46px;min-height:46px} .hb-time-list button:disabled{opacity:.28;cursor:not-allowed} @container billix-schedule (max-width:760px){ #modal #hb-schedule-form .hb-schedule-day{grid-template-columns:1fr;gap:16px} #modal #hb-schedule-form .hb-schedule-day>.hb-schedule-track{grid-column:1;margin:4px 0 26px} #modal #hb-schedule-form .hb-schedule-bar [data-window-edge]{width:24px} } @container billix-schedule (max-width:540px){ #modal #hb-schedule-form .hb-schedule-intro{padding:16px;gap:12px} #modal #hb-schedule-form .hb-schedule-summary-exception{display:grid;justify-content:stretch;padding:16px;gap:10px} #modal #hb-schedule-form .hb-schedule-day{grid-template-columns:1fr;gap:14px;padding:22px 0} #modal #hb-schedule-form .hb-schedule-day h3{margin:0;line-height:24px;font-size:15px} #modal #hb-schedule-form .hb-schedule-day>.hb-schedule-track{grid-column:1;margin:0 0 24px} #modal #hb-schedule-form .hb-schedule-exception{padding:16px} #modal #hb-schedule-form .hb-schedule-exception .form-grid{grid-template-columns:1fr;gap:16px} #modal #hb-schedule-form .hb-schedule-section-head{align-items:flex-start;flex-wrap:wrap} #modal #hb-schedule-form>.form-actions{flex-direction:row;align-items:center;justify-content:center;gap:10px} #modal #hb-schedule-form>.form-actions>.btn{flex:0 1 auto;width:auto;min-width:0;max-width:100%;height:46px;min-height:46px;padding:11px 16px;font-size:14px;line-height:1.4;margin:0} } #modal #hb-schedule-form .hb-work-window .hb-time-control{display:block;height:44px;min-height:44px;margin:0} #modal #hb-schedule-form .hb-schedule-business-hours>span{font-weight:700;color:#454d59} #modal #hb-schedule-form .hb-schedule-adjustment strong{font-weight:700;color:#252b35} /* Consistent emphasis for key schedule information. */ #modal #hb-schedule-form .hb-schedule-intro p b{font-weight:700;color:#454d59} #modal #hb-schedule-form .hb-schedule-day h3,#modal #hb-schedule-form .hb-schedule-summary-row strong,#modal #hb-schedule-form .hb-time-trigger>span,#modal #hb-schedule-form .hb-schedule-exception-head strong,#modal #hb-schedule-form .hb-schedule-section-head h3{font-weight:700} #modal #hb-schedule-form .hb-schedule-adjustment small{font-weight:600} /* Schedule hierarchy: identity and business context, followed by clear sections. */ #modal #hb-schedule-form .hb-schedule-intro{position:relative;background:#f4f4f5;border:0;padding:24px;gap:18px} #modal #hb-schedule-form .hb-schedule-intro>svg{margin-top:3px} #modal #hb-schedule-form .hb-schedule-intro>div{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,1fr);column-gap:32px;align-items:start} #modal #hb-schedule-form .hb-schedule-intro>div>strong{grid-column:1;font-size:21px;line-height:1.3;letter-spacing:-.3px} #modal #hb-schedule-form .hb-schedule-intro>div>p:not(.hb-schedule-business-hours){grid-column:1;margin:12px 0 0;max-width:50ch} #modal #hb-schedule-form .hb-schedule-intro .hb-schedule-business-hours{grid-column:2;grid-row:1/4;margin:0;padding:0;border-top:0;border-left:0;line-height:1.8} #modal #hb-schedule-form .hb-schedule-business-hours>span{font-size:12px;letter-spacing:.3px} #modal #hb-schedule-form .hb-schedule-intro .hb-schedule-business-hours strong{display:inline-block;margin:7px 0;font-size:17px;line-height:1.5} #modal #hb-schedule-form .hb-schedule-zone{grid-column:1;margin-top:14px} #modal #hb-schedule-form .hb-schedule-summary-title{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:16px} #modal #hb-schedule-form .hb-schedule-summary-title::before{content:'';width:4px;height:18px;border-radius:3px;background:#e51e59;flex:none} #modal #hb-schedule-form .hb-schedule-summary-week{column-gap:36px} #modal #hb-schedule-form .hb-schedule-day{padding:24px 0} #modal #hb-schedule-form .hb-schedule-day h3{font-size:17px;letter-spacing:-.2px} #modal #hb-schedule-form .hb-schedule-exception-head strong{font-size:15px} @container billix-schedule (max-width:740px){ #modal #hb-schedule-form .hb-schedule-intro{padding:18px;gap:12px} #modal #hb-schedule-form .hb-schedule-intro>div{grid-template-columns:minmax(0,1fr)} #modal #hb-schedule-form .hb-schedule-intro>div>strong{font-size:19px} #modal #hb-schedule-form .hb-schedule-intro .hb-schedule-business-hours{grid-column:1;grid-row:auto;margin-top:18px;padding:16px 0 0;border-left:0;border-top:1px solid #dedee3} #modal #hb-schedule-form .hb-schedule-zone{margin-top:12px} } /* The viewport controls only the shell; content responds to its actual container. */ #modal #hb-schedule-form fieldset,#modal #hb-schedule-form .field{min-width:0} #modal #hb-schedule-form .hb-schedule-intro>div>*{min-width:0;overflow-wrap:break-word} #modal #hb-schedule-form .hb-schedule-exception-head{flex-wrap:wrap} #modal #hb-schedule-form .hb-time-trigger{width:100%} @media(max-width:800px){#modal:has(#hb-schedule-form){padding:20px;width:calc(100vw - 24px)}} @media(max-width:540px){#modal:has(#hb-schedule-form){padding:18px;width:calc(100vw - 16px)}} #modal #hb-schedule-form .hb-schedule-intro>div{text-align:left} #modal #hb-schedule-form .hb-schedule-inherit-help{margin:0 0 18px;max-width:90ch;text-align:left} #modal #hb-schedule-form .hb-schedule-inherit-help b{font-weight:700;color:#454d59} /* Narrow schedule editors use the time selectors; dragging needs readable space. */ @container billix-schedule (max-width:760px){ #modal #hb-schedule-form .hb-schedule-track, #modal #hb-schedule-form .hb-schedule-drag-help{display:none} } @media(max-width:800px){ #modal #hb-schedule-form .hb-schedule-track, #modal #hb-schedule-form .hb-schedule-drag-help{display:none} } /* One daily shift; controls stay readable as the modal narrows. */ #modal #hb-schedule-form .hb-work-window{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #modal #hb-schedule-form .hb-schedule-day-toggle{margin:0 0 12px;font-size:14px;font-weight:600;min-height:24px} #modal #hb-schedule-form .hb-schedule-day>.hb-schedule-track{margin-top:60px} #modal #hb-schedule-form .hb-schedule-day.is-business-closed .hb-schedule-day-toggle{display:none} @container billix-schedule (max-width:900px){ #modal #hb-schedule-form .hb-schedule-track,#modal #hb-schedule-form .hb-schedule-drag-help{display:none} #modal #hb-schedule-form .hb-schedule-day{grid-template-columns:minmax(0,1fr)} #modal #hb-schedule-form .hb-schedule-day>div{width:100%;max-width:none} } @media(max-width:960px){#modal #hb-schedule-form .hb-schedule-track,#modal #hb-schedule-form .hb-schedule-drag-help{display:none}} #modal #hb-schedule-form .hb-schedule-day{border:0;border-radius:14px;background:#f4f4f5;padding:20px;gap:14px 24px;margin:0 0 12px} #modal #hb-schedule-form .hb-schedule-day h3{font-size:18px;line-height:24px;font-weight:750;color:#252529} #modal #hb-schedule-form .hb-schedule-day h3::before{content:'';display:inline-block;width:7px;height:7px;margin:0 10px 2px 0;border-radius:50%;background:#e51e59} #modal #hb-schedule-form .hb-schedule-allowed{margin:10px 0 0;padding:0;background:none;border:0;font-size:12px;line-height:1.5;font-weight:600;color:#62626b} #modal #hb-schedule-form .hb-schedule-allowed strong{font-size:13px;font-weight:750;color:#252529;white-space:nowrap} #modal #hb-schedule-form .hb-schedule-closed{margin:0;color:#62626b;font-weight:600} #modal #hb-schedule-form .hb-work-window .field>span:first-child{font-weight:700;color:#252529} #modal #hb-schedule-form .hb-time-trigger{background:#fff;color:#252529;font-weight:750} #modal #hb-schedule-form .hb-schedule-inherit-help{font-size:13px;line-height:1.55;margin-bottom:14px} #modal #hb-schedule-form .hb-schedule-drag-help{font-size:12px;line-height:1.5;margin:16px 0 18px} #modal #hb-schedule-form .hb-schedule-intro p{font-size:14px;line-height:1.6} @container billix-schedule (max-width:540px){#modal #hb-schedule-form .hb-schedule-day{padding:16px;gap:12px}#modal #hb-schedule-form .hb-schedule-day h3{font-size:17px}} /* Schedule identity and business hours use separate, readable columns. */ #modal #hb-schedule-form .hb-schedule-overview{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;padding:24px;border-radius:16px;background:#f4f4f5} .hb-schedule-identity{display:flex;align-items:center;gap:12px;min-width:0} .hb-schedule-identity>strong{font-size:19px;font-weight:750;line-height:1.4;color:#252529;overflow-wrap:anywhere} .hb-schedule-avatar{width:48px;height:48px;flex:0 0 48px;object-fit:cover;border-radius:50%;background:#e7e7e9} .hb-schedule-avatar-fallback{display:grid;place-items:center;font-size:21px;font-weight:750;color:#62626b} .hb-schedule-avatar-fallback svg{width:24px;height:24px} #modal #hb-schedule-form .hb-schedule-overview p{margin:12px 0;font-size:14px;line-height:1.65;color:#62626b} #modal #hb-schedule-form .hb-schedule-overview b{font-weight:700;color:#252529} #modal #hb-schedule-form .hb-schedule-overview small{font-size:12px;color:#62626b} #modal #hb-schedule-form .hb-schedule-business .hb-schedule-identity>strong{font-size:17px;color:#252529} #modal #hb-schedule-form .hb-schedule-hours-link{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:10px 0 0;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:#e51e59;font-size:18px;line-height:1.4;cursor:pointer} #modal #hb-schedule-form .hb-schedule-hours-link strong{font-weight:750;color:#e51e59} #modal #hb-schedule-form .hb-schedule-hours-link svg{width:18px;height:18px;flex:none} #modal #hb-schedule-form .hb-schedule-hours-link:hover{background:#e7e7e9} #modal #hb-schedule-form .hb-schedule-hours-link:focus-visible{outline:2px solid #e51e59;outline-offset:2px} #modal #hb-schedule-form .hb-schedule-business-days{margin:4px 0 0} #modal #hb-schedule-form .hb-schedule-inherit-help,#modal #hb-schedule-form .hb-schedule-booking-help{max-width:none;width:100%;font-size:15px;line-height:1.7;color:#62626b} #modal #hb-schedule-form .hb-schedule-inherit-help b,#modal #hb-schedule-form .hb-schedule-booking-help b{font-weight:700;color:#252529} .hb-business-hours-detail{display:grid;gap:20px;min-width:0} .hb-business-hours-detail>.btn{justify-self:start;min-height:46px} .hb-business-hours-detail small{color:#62626b} .hb-business-hours-week>div{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid #e7e7e9;font-size:14px;line-height:1.5} .hb-business-hours-week b{color:#e51e59;font-weight:700;white-space:nowrap} @container billix-schedule (max-width:740px){#modal #hb-schedule-form .hb-schedule-overview{grid-template-columns:minmax(0,1fr);gap:22px;padding:18px}.hb-schedule-identity>strong{font-size:18px}} .hb-schedule-back-icon{display:inline-flex;transform:rotate(180deg)}.hb-schedule-back-icon svg{width:18px;height:18px} #modal #hb-schedule-form .hb-schedule-summary-row{border-bottom:0} .hb-business-hours-week>div{border-bottom:0} #modal #hb-schedule-form .hb-schedule-overview{column-gap:28px;row-gap:14px} #modal #hb-schedule-form .hb-schedule-person{grid-column:1;grid-row:1;min-width:0} #modal #hb-schedule-form .hb-schedule-business{grid-column:2;grid-row:1;min-width:0} #modal #hb-schedule-form .hb-schedule-business-days{padding-inline:10px} #modal #hb-schedule-form .hb-schedule-business-link{display:block;padding:8px 10px;margin:-8px -10px;text-decoration:none;color:#252529;border-radius:9px} #modal #hb-schedule-form .hb-schedule-business-link:hover{background:#e7e7e9} #modal #hb-schedule-form .hb-schedule-business-link:focus-visible{outline:2px solid #e51e59;outline-offset:4px} @container billix-schedule (max-width:740px){ #modal #hb-schedule-form .hb-schedule-person{grid-column:1;grid-row:1} #modal #hb-schedule-form .hb-schedule-business{grid-column:1;grid-row:2} } .hb-schedule-avatar-open{display:inline-flex;flex:0 0 48px;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer} .hb-schedule-avatar-open:hover{opacity:.85} .hb-schedule-avatar-open:focus-visible{outline:2px solid #e51e59;outline-offset:3px} #modal #hb-schedule-form .hb-schedule-business-link{min-width:0;font-size:17px;font-weight:750;line-height:1.4;overflow-wrap:anywhere} #modal #hb-schedule-form .hb-schedule-summary-row.is-unavailable>strong{color:#e51e59}