/* Shared presentation only. Appointment rules and tenant permissions stay in their modules. */
:root{--line:#dce5df;--ink:#18332d;--quiet:#53685e}
body{line-height:1.5;-webkit-font-smoothing:antialiased}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button{font-weight:600;min-height:42px;transition:background-color .15s ease,box-shadow .15s ease}
button:disabled{cursor:wait;opacity:.62}input:disabled,select:disabled{background:#f2f5f3;color:#53685e}
input,select,textarea{min-height:44px;box-shadow:0 1px 2px #18332d05;transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{outline:0;border-color:#438c70;box-shadow:0 0 0 3px #438c7024}
textarea{resize:vertical;line-height:1.6}input[type=checkbox]{min-height:0;accent-color:var(--brand,#174e3e)}
.shell{grid-template-columns:240px minmax(0,1fr)}
.shell aside{padding:28px 18px;gap:6px}
.aside-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#toggleNavigation{display:none;background:#ffffff16;color:inherit;border:1px solid #ffffff45;border-radius:9px;padding:8px 12px}
.tag{margin:4px 0 24px;letter-spacing:.09em}
#nav button,#nav a{min-height:44px;font-size:14px}#nav a{border-radius:10px}
#nav button:hover,#nav a:hover,.nav-section summary:hover{background:#ffffff12}
#nav button.active{box-shadow:inset 3px 0 currentColor;font-weight:750}
.nav-section summary{font-size:14px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-section summary::-webkit-details-marker{display:none}.nav-section summary::after{content:'＋';font-size:17px;font-weight:400;opacity:.7}.nav-section[open]>summary::after{content:'−'}
.nav-section[open]{background:#ffffff08;border-radius:12px}.nav-section button{margin:2px 0;padding-left:25px}
.shell main{padding:30px clamp(20px,3vw,44px);max-width:none}
h1{font-size:clamp(27px,2.4vw,36px);line-height:1.2;margin:8px 0 10px;letter-spacing:-.04em}h2{line-height:1.3;letter-spacing:-.025em}
.top{align-items:center}.top>div{min-width:0}.top .muted{display:block;max-width:640px}.eyebrow{font-size:11px;letter-spacing:.13em;overflow-wrap:anywhere}
#businessPicker{max-width:360px;margin-bottom:14px;font-size:14px}
.banner{margin:22px 0;padding:11px 15px;line-height:1.6;border-radius:12px}
.stats{gap:14px;margin-bottom:20px}.stat{box-shadow:0 3px 14px #18332d04}.stat strong{font-size:28px;line-height:1.2;margin:8px 0}.stat small{display:block;font-size:11px;line-height:1.4}
.toolbar{gap:12px;margin:16px 0}.date-controls{flex:1;gap:7px;min-width:0}.date-controls input{width:174px;flex:none}.date-controls button{padding:9px 13px}
.agenda-view-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.agenda-view-controls>label{min-width:132px;font-size:12px}.view-switch{display:flex;gap:3px;background:#eaf0ec;border:1px solid #dce5df;border-radius:11px;padding:3px}.view-switch .secondary{background:transparent;border-color:transparent;padding:8px 13px;min-height:38px}.view-switch .secondary[aria-pressed=true]{background:white;border-color:#d7e4db;box-shadow:0 1px 4px #18332d12}
.toolbar>label{font-size:12px;min-width:160px}.toolbar>label input,.toolbar>label select{font-size:14px}.toolbar>button{align-self:end}
.calendar{box-shadow:0 4px 18px #18332d04}.staff{position:sticky;top:0;background:#fff;z-index:5;padding:16px 12px;font-size:13px}.time{font-variant-numeric:tabular-nums;color:#53685e;background:#fafcfb}.event{line-height:1.5;padding:10px;overflow-wrap:anywhere}.event .pill{background:#ffffff9c;color:inherit;font-weight:650;padding:2px 7px;margin-top:4px}.slot{padding:5px}.note-flag{vertical-align:middle;background:#ffffff70}
.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:18px}.card{box-shadow:0 3px 16px #18332d04;overflow-wrap:anywhere}.card h2{margin:13px 0 9px}.card p{margin:10px 0}.avatar{border:1px solid #d5e5db}.card .secondary,.card .primary{margin-top:4px}.empty{border:1px dashed #cadbd0;padding:28px;color:#53685e}
.booking{border:1px solid var(--line);box-shadow:0 4px 20px #18332d05}.booking h2{margin-top:0}.search-label{max-width:520px}.search-label input{background:white}
.summary-rows{font-size:14px}.summary-rows th{font-size:12px;color:#53685e;background:#f7faf8}.summary-rows td{overflow-wrap:anywhere}
dialog{max-width:620px;padding:28px;border:1px solid #dbe5de}dialog h2{margin:0 0 20px;font-size:25px}dialog form{gap:16px}dialog label{font-size:12px;letter-spacing:.01em}dialog fieldset{margin:0;min-width:0}legend{padding:0 7px;font-weight:700;font-size:13px;color:#335647}.form-contact{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-contact>label:nth-of-type(-n+2){grid-column:1/-1}.form-contact>legend{grid-column:1/-1}.actions{padding-top:12px;border-top:1px solid #e5ece7;gap:9px}.actions .primary{margin-left:auto}.error:empty{display:none}.error:not(:empty){padding:10px 12px;border-radius:8px;background:#fff0f0;border:1px solid #efcdcd;line-height:1.5}.muted{line-height:1.6}
.toast{max-width:min(480px,calc(100vw - 32px));right:16px;bottom:calc(16px + env(safe-area-inset-bottom));line-height:1.55;font-size:14px;z-index:3000;overflow-wrap:anywhere}
#sessionLoading{margin-top:12vh!important;text-align:center;max-width:420px}#sessionLoading .brand{margin-bottom:18px}#loadingStatus{color:#53685e}
@media(min-width:801px){.shell aside{position:sticky;top:0;height:100dvh;overflow-y:auto}.aside-bottom{margin-top:24px}.top .primary{flex:none}}
@media(max-width:1000px) and (min-width:801px){.shell{grid-template-columns:215px minmax(0,1fr)}.shell aside{padding:24px 14px}.shell main{padding:26px 20px}.toolbar>label{min-width:140px}.cards{gap:14px}.stats{gap:10px}}
@media(max-width:800px){.shell{grid-template-columns:1fr}.shell aside{padding:16px 18px;gap:4px}.aside-heading{width:100%}#toggleNavigation{display:block}#nav{display:none!important;margin-top:12px}.nav-open #nav{display:flex!important;gap:5px}.nav-open #nav>button{flex:1;text-align:center;min-width:85px}.nav-open #nav details{flex-basis:100%;min-width:0}.nav-open #nav a{flex-basis:100%}.business-logo{max-height:68px;max-width:170px;margin:0 auto 12px}.shell main{padding:22px 16px}.top{gap:15px;align-items:stretch}.top .primary{padding:12px 16px}.banner{font-size:12px;margin:18px 0}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stat{padding:12px!important;font-size:11px}.stat strong{font-size:22px}.stat small{font-size:10px}.toolbar{width:100%;align-items:stretch;flex-direction:row}.date-controls{width:100%;flex-basis:100%;flex-wrap:nowrap}.date-controls input{width:auto;min-width:0;flex:1}.agenda-view-controls{width:100%;justify-content:space-between;gap:8px}.agenda-view-controls>label{min-width:130px;flex:1}.view-switch .secondary{padding:8px 10px}.toolbar>label{flex:1;min-width:min(140px,100%)}.toolbar>label:first-child{flex-basis:100%}.toolbar>button{width:100%}.grid{min-width:650px}.calendar{overscroll-behavior-x:contain}.cards{grid-template-columns:1fr}.booking{padding:22px 18px}.appearance-layout{gap:14px}dialog{padding:22px 18px;max-height:calc(100dvh - 24px);width:calc(100% - 24px)}dialog h2{font-size:23px}.form-contact{grid-template-columns:1fr}.form-contact>label{grid-column:1}.actions button{flex:1;min-width:110px}.actions .primary{margin-left:0}.footer{margin-top:22px}#businessPicker{max-width:100%}.two{gap:12px}.toast{left:16px;right:16px;max-width:none}.top{flex-direction:column}.stat strong{letter-spacing:-.03em}}
@media(prefers-reduced-motion:reduce){button,input,select,textarea{transition:none}}

#appointmentMailStatus:empty{display:none}.cards>.muted{grid-column:1/-1;border:1px dashed #cadbd0;border-radius:14px;background:#fff;padding:24px;color:#53685e}

.agenda-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 15px}.agenda-tools small{flex:1;min-width:220px;font-size:12px}.empty-slot{width:100%;min-height:50px;background:transparent;border:0;color:transparent;border-radius:6px}.empty-slot:hover,.empty-slot:focus-visible{background:#e7f3ec;color:#286548}.event[draggable=true]{cursor:grab}.move-review{white-space:pre-wrap;background:#eef5f0;padding:14px;border-radius:10px}.move-review:empty{display:none}.available-results{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:40vh;overflow:auto}.available-results:empty{display:none}@media(max-width:600px){.available-results{grid-template-columns:1fr}.agenda-tools button{flex:1}}

#agendaActionDialog>label{margin-top:14px}#agendaActionDialog>small{display:block;color:#53685e;line-height:1.6}#agendaActionDialog .move-review{margin:18px 0}

/* Payment is separate from the attendance color. */
.event.has-payment{border-left:6px solid #15803d}
.payment-badge{display:block;width:fit-content;max-width:100%;margin:5px 0 2px;padding:3px 7px;border-radius:6px;background:#dcfce7;color:#14532d;font-size:12px;font-weight:750;line-height:1.35;overflow-wrap:anywhere}
#appointmentPaymentFields{margin:16px 0;padding:14px;border:1px solid #cbded4;border-radius:12px;background:#f7fbf8}
#appointmentPaymentFields legend{font-weight:700;padding:0 5px}
#appointmentPaymentSummary{font-size:13px;line-height:1.5}

/* A circular presentation shared by the business mark and its preview. */
.business-logo,.appearance-preview #previewLogo{width:112px;height:112px;max-width:112px;max-height:112px;box-sizing:border-box;object-fit:contain;object-position:center;border-radius:50%;background:transparent;padding:0;border:0;box-shadow:none;margin:0 auto 20px;flex:none}
@media(max-width:800px){.business-logo,.appearance-preview #previewLogo{width:80px;height:80px;max-width:80px;max-height:80px;padding:0;margin-bottom:12px}}

/* One appointment spans its actual duration across fixed time rows. */
.continuous-day{grid-auto-rows:var(--day-row-height,180px);grid-template-rows:auto;isolation:isolate}
.continuous-day>.slot{position:relative;min-height:0;height:var(--day-row-height,180px);box-sizing:border-box;overflow:visible}
.continuous-day>.time{height:var(--day-row-height,180px);box-sizing:border-box}
.continuous-day .continuous-event{position:absolute;left:5px;right:5px;width:auto;margin:0;box-sizing:border-box;z-index:2;overflow:auto;min-height:0;text-align:left}
.continuous-day .continuous-event:focus-visible{z-index:4}
/* Professional options: checkbox and its label remain on the same aligned row. */
#staffServices{display:grid;gap:8px;margin:12px 0}#staffServices label,#staffHoursFields label:has(>input[type=checkbox]){display:flex;align-items:center;gap:10px;min-height:40px;margin:0;padding:8px 10px;border-radius:8px;background:#f7faf8;line-height:1.45}#staffHoursFields input[type=checkbox]{width:18px!important;height:18px;flex:0 0 18px;padding:0;margin:0;accent-color:#174e3e}#staffHoursFields label>span:has(input[type=checkbox]){display:flex;align-items:center;gap:10px;min-height:36px}#staffHoursFields fieldset{padding:16px;margin:4px 0;border:1px solid #dce5df;border-radius:12px}#staffHoursFields fieldset>small{display:block;margin-top:12px;line-height:1.5}#staffServices label:has(input:disabled){color:#738278}