/* The daily calendar uses the available width; other business pages keep their layout. */
.business-salon #page-schedule{max-width:none;width:100%}
.business-salon:has(#page-schedule.active) #request-incoming-banner{padding:5px 12px;margin:5px 0;gap:8px;font-size:.8rem}
.business-salon:has(#page-schedule.active) #request-incoming-banner button{min-height:32px;padding:6px 10px;font-size:.75rem}
#salon-workspace{max-width:none;margin:0}
#salon-workspace .salon-top{margin-bottom:8px;gap:12px}
#salon-workspace .salon-top h1{font-size:clamp(1.25rem,1.8vw,1.7rem);margin:0 0 4px}
#salon-workspace .salon-top .salon-eyebrow{display:none}
#salon-workspace .salon-top .meta{margin:0;font-size:.8rem}
#salon-workspace .salon-toolbar{padding:8px 0;margin:0;gap:10px;flex-wrap:wrap}
#salon-workspace .salon-view{margin-left:auto}
.salon-day-layout-switch{display:flex;gap:4px}
#salon-workspace .salon-day-layout-switch[hidden]{display:none}
#salon-workspace .salon-toolbar button{min-height:36px;padding:7px 12px;font-size:.8rem}
#salon-workspace .salon-date input{min-height:36px;height:36px}
#salon-workspace .salon-filter{margin:8px 0;gap:8px}
#salon-workspace .salon-filter label{flex:0 1 250px;font-size:.75rem}
#salon-workspace .salon-filter input,#salon-workspace .salon-filter select{min-height:38px;height:38px;margin-top:3px;box-sizing:border-box;padding:7px 10px;line-height:1.25}
#salon-workspace .salon-filter button{min-height:38px;font-size:.78rem;padding:8px 12px}
#salon-workspace .salon-staff-legend{gap:6px;margin:6px 0 10px}
#salon-workspace .salon-legend-chip{min-height:28px;padding:4px 9px;font-size:.72rem}
#salon-workspace .salon-next{padding:8px 12px;margin:8px 0;gap:12px}
#salon-workspace .salon-next-time{font-size:1.2rem}
#salon-workspace .salon-next strong{font-size:.9rem}
#salon-workspace .salon-next small{font-size:.6rem}
#salon-workspace .salon-next span:not(.salon-next-time){font-size:.75rem}
.salon-plan-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}
.salon-plan-caption h2{font-size:.95rem;margin:0}.salon-plan-caption small{font-size:.75rem;opacity:.8}
.salon-plan-scroll{overflow:auto;border:1px solid var(--salon-line);border-radius:12px;background:var(--panel,#fff);scrollbar-width:thin}
.salon-plan-board{min-width:900px}
.salon-plan-axis,.salon-plan-row{display:grid;grid-template-columns:150px minmax(0,1fr)}
.salon-plan-axis{height:36px;background:var(--salon-soft);font-size:.72rem;border-bottom:1px solid var(--salon-line)}
.salon-plan-axis>strong{padding:11px 10px}.salon-plan-axis>div{position:relative;margin-right:12px}
.salon-plan-axis span{position:absolute;top:11px;transform:translateX(-50%);white-space:nowrap}.salon-plan-axis span:first-child{transform:none}.salon-plan-axis span.last{transform:translateX(-100%)}
.salon-plan-person{position:sticky;left:0;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px;background:var(--panel,#fff);border-right:1px solid var(--salon-line);min-width:0}
.salon-plan-person strong{font-size:.8rem;overflow-wrap:anywhere;border-left:3px solid var(--staff-color);padding-left:7px}.salon-plan-person small{font-size:.68rem;opacity:.75;padding-left:10px}
.salon-plan-row+.salon-plan-row{border-top:1px solid var(--salon-line)}
.salon-plan-track{position:relative;height:calc(var(--lanes)*76px + 12px);background:repeating-linear-gradient(135deg,transparent,transparent 4px,#75634b09 4px,#75634b09 8px);margin-right:12px}
.salon-plan-working{position:absolute;top:0;bottom:0;background:var(--panel,#fff)}
.salon-plan-track::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent,transparent calc(var(--hour-width) - 1px),var(--salon-line) calc(var(--hour-width) - 1px),var(--salon-line) var(--hour-width));pointer-events:none;z-index:1}
#salon-workspace .salon-plan-add{position:absolute;top:0;bottom:0;min-width:0;min-height:0;border:0;border-radius:0;padding:0;color:transparent;background:transparent;z-index:2;box-shadow:none}
#salon-workspace .salon-plan-add:hover,#salon-workspace .salon-plan-add:focus-visible{color:var(--ink,#3c3024);background:var(--salon-soft);outline:1px dashed var(--business-accent);outline-offset:-2px}
#salon-workspace .salon-plan-booking{position:absolute;top:calc(6px + var(--lane)*76px);height:70px;min-height:0;min-width:0;margin:0!important;padding:6px 7px!important;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px!important;border:1px solid color-mix(in srgb,var(--staff-color) 45%,transparent)!important;border-left:3px solid var(--staff-color)!important;border-radius:7px!important;background:color-mix(in srgb,var(--staff-color) 10%,var(--panel,#fff))!important;box-sizing:border-box;overflow:hidden;z-index:3;box-shadow:none}
.salon-plan-booking time{font-size:.65rem!important;font-weight:600!important;min-width:0!important;white-space:nowrap}.salon-plan-booking strong{font-size:.78rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;text-align:left}.salon-plan-booking small{font-size:.65rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;text-align:left}
#salon-workspace .salon-plan-booking time{flex:0 0 auto;line-height:1.1}
#salon-workspace .salon-plan-booking strong{flex:0 0 auto;display:-webkit-box;font-size:.74rem;line-height:1.1;max-height:2.2em;margin:0;white-space:normal}
#salon-workspace .salon-plan-booking small{flex:0 0 auto;display:block;font-size:.65rem;line-height:1.1;margin:0}
#salon-workspace .salon-plan-booking.salon-state-cancelled strong,#salon-workspace .salon-plan-booking.salon-state-no_show strong{text-decoration:line-through}
.salon-plan-now{position:absolute;top:0;bottom:0;width:2px;background:#bd403a;z-index:3;pointer-events:none}
.salon-plan-key{display:flex;gap:18px;flex-wrap:wrap;font-size:.7rem;opacity:.8;margin:8px 0}.salon-plan-key span:first-child::before{content:'';display:inline-block;width:12px;height:10px;border:1px solid var(--salon-line);margin-right:6px;background:var(--panel,#fff)}
#salon-workspace .salon-day-compact{max-height:none;overflow:visible}
#salon-workspace .salon-day-compact>h2{position:static;padding:6px 0;margin:6px 0;font-size:.9rem}
#salon-workspace .salon-day-compact>.salon-appointment{display:grid!important;grid-template-columns:90px minmax(0,1fr) auto;min-height:54px;padding:8px 12px!important;margin-bottom:5px;gap:10px!important;border-radius:8px!important}
.salon-day-compact .salon-appointment-main{display:grid;grid-template-columns:minmax(130px,1.2fr) minmax(120px,1fr) minmax(120px,1fr);align-items:center;gap:10px}.salon-day-compact .salon-appointment-main strong{font-size:.85rem}.salon-day-compact .salon-appointment-main>span:not(.salon-staff-label){font-size:.75rem}.salon-day-compact .salon-room-label{display:none}.salon-day-compact .salon-staff-label{margin:0;font-size:.7rem!important}.salon-day-compact time{font-size:.9rem}.salon-day-compact time small{display:inline;margin-left:5px;font-size:.7rem}.salon-day-compact .salon-status{font-size:.65rem;padding:4px 7px}
@media(max-width:999px){#salon-workspace .salon-toolbar{gap:6px}#salon-workspace .salon-view{margin-left:0}.salon-day-layout-switch{margin-left:auto}.salon-day-compact .salon-appointment-main{grid-template-columns:1fr}.salon-day-compact .salon-appointment-main>span:not(.salon-staff-label){display:none}.salon-plan-caption{align-items:start;flex-direction:column;gap:5px}}
@media(max-width:700px){#salon-workspace .salon-toolbar .salon-view{width:auto;flex:1}#salon-workspace .salon-dates{width:100%}.salon-day-layout-switch{margin-left:0}#salon-workspace .salon-toolbar button{padding:7px 9px;font-size:.72rem;min-height:36px}#salon-workspace .salon-filter label{font-size:.7rem}#salon-workspace .salon-filter{margin:6px 0}#salon-workspace .salon-staff-legend{margin:3px 0 7px}#salon-workspace .salon-day-compact>.salon-appointment{grid-template-columns:68px minmax(0,1fr) auto;min-height:58px;padding:7px 8px!important;gap:7px!important}.salon-day-compact time small{display:block;margin:2px 0 0}.salon-day-compact .salon-appointment-main{gap:2px}.salon-day-compact .salon-status{margin:0;font-size:.58rem}.salon-day-compact .salon-appointment-main strong{font-size:.8rem}.salon-day-compact .salon-staff-label{font-size:.65rem!important}.salon-plan-person{padding:8px}.salon-plan-key{gap:8px}}
#salon-workspace .salon-week{max-height:65vh;max-height:65dvh;overscroll-behavior:contain;scroll-padding-top:54px;scrollbar-gutter:stable;isolation:isolate}
#salon-workspace .salon-week .salon-day-heading{position:sticky;top:0;z-index:5;display:block;width:calc(100% + 18px);min-height:48px;margin:-9px -9px 12px;padding:12px 16px;border:0;border-bottom:1px solid var(--salon-line);border-radius:14px 14px 0 0;background:var(--panel,#fff);color:inherit;text-align:left;box-shadow:0 2px 4px #00000008}
#salon-workspace .salon-week .salon-day-heading:focus-visible{outline:2px solid var(--business-accent);outline-offset:-3px}
#salon-workspace .salon-week:focus-visible{outline:2px solid var(--business-accent);outline-offset:3px}

/* All simultaneous bookings are separate accessible cards, grouped by next start. */
#salon-workspace .salon-next-group{margin:10px 0 14px;padding:0;border:0}
#salon-workspace .salon-next-group>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
#salon-workspace .salon-next-group h2{font-size:.86rem;margin:0;line-height:1.4}
#salon-workspace .salon-next-group>header>span{font-size:.72rem;color:var(--muted,#716a63)}
#salon-workspace .salon-next-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:9px}
#salon-workspace button.salon-next-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;min-height:110px;width:100%;padding:11px 36px 11px 13px!important;border:1px solid var(--salon-line)!important;border-left:3px solid var(--staff-color)!important;border-radius:10px!important;background:var(--panel,#fff)!important;color:inherit!important;font:inherit;text-align:left;box-shadow:none;cursor:pointer}
#salon-workspace button.salon-next-card:hover{background:var(--salon-soft)!important}
#salon-workspace button.salon-next-card:focus-visible{outline:3px solid var(--business-accent,#a38254);outline-offset:2px}
#salon-workspace .salon-next-card-time{font-size:.73rem;font-weight:700;color:var(--muted,#716a63);font-variant-numeric:tabular-nums}
#salon-workspace .salon-next-card>strong{font-size:.85rem;line-height:1.35;overflow-wrap:anywhere}
#salon-workspace .salon-next-card-service{font-size:.72rem;line-height:1.35;overflow-wrap:anywhere;color:var(--muted,#716a63)}
#salon-workspace .salon-next-card .salon-staff-label{font-size:.7rem;line-height:1.4;overflow-wrap:anywhere}
#salon-workspace .salon-next-card-arrow{position:absolute;right:10px;top:calc(50% - 10px);color:var(--muted,#716a63)}
#salon-workspace .salon-next-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px;font-size:.72rem}
#salon-workspace .salon-next-pager>span{margin-right:auto}
#salon-workspace .salon-next-pager button{min-height:38px;font-size:.72rem}
#salon-workspace [data-next-appointment][hidden]{display:none!important}
@media(max-width:700px){#salon-workspace .salon-next-cards{grid-template-columns:1fr}#salon-workspace .salon-next-group>header{align-items:flex-start}#salon-workspace .salon-next-group>header>span{text-align:right}#salon-workspace button.salon-next-card{min-height:100px}}
/* Mobile calendar: secondary controls collapse; active filters remain visible in the summary. */
#salon-workspace .salon-filter-panel{border:0;margin:0;padding:0;min-width:0}
#salon-workspace .salon-filter-panel>summary{display:none}
#salon-workspace .salon-filter-body{min-width:0}
#salon-workspace .salon-filter-body>.salon-filter-hint,#salon-workspace [data-close-calendar-filters]{display:none}
#salon-workspace .salon-filter-actions{display:flex;justify-content:flex-end;gap:8px;margin:6px 0}
#salon-workspace .salon-filter-actions:has([data-clear-calendar-filters][hidden]){margin:0}
@media(max-width:700px){
 #salon-workspace>.salon-page-purpose{display:none}
 #salon-workspace .salon-filter-panel{margin:7px 0 9px;border:1px solid var(--salon-line);border-radius:12px;background:var(--panel,#fffdf9)}
 #salon-workspace .salon-filter-panel>summary{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:3px 8px;min-height:44px;padding:8px 12px;cursor:pointer;list-style:none;color:inherit;box-sizing:border-box}
 #salon-workspace .salon-filter-panel>summary::-webkit-details-marker{display:none}
 #salon-workspace .salon-filter-panel>summary::marker{content:''}
 #salon-workspace .salon-filter-title{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700}
 #salon-workspace [data-active-filter-count]{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:var(--accent,#9e794b);color:var(--accent-ink,#fff);font-size:.72rem}
 #salon-workspace [data-active-filter-count][hidden]{display:none}
 #salon-workspace .salon-filter-selection{grid-column:1;font-size:.74rem;line-height:1.3;overflow-wrap:anywhere;color:var(--muted);max-width:100%}
 #salon-workspace .salon-filter-selection:empty{display:none}
 #salon-workspace .salon-filter-chevron{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;transform:rotate(90deg)}
 #salon-workspace .salon-filter-panel[open] .salon-filter-chevron{transform:rotate(-90deg)}
 #salon-workspace .salon-filter-body{padding:0 12px 12px}
 #salon-workspace .salon-filter-body>.salon-filter-hint{display:block;font-size:.75rem;line-height:1.4;color:var(--muted);margin:4px 0 12px}
 #salon-workspace .salon-filter-panel .salon-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px;align-items:end}
 #salon-workspace .salon-filter label{min-width:0;font-size:.76rem}
 #salon-workspace .salon-filter label:nth-of-type(2){grid-column:1 / -1;grid-row:2}
 #salon-workspace .salon-filter label:first-child{grid-column:1 / -1}
 #salon-workspace .salon-filter input,#salon-workspace .salon-filter select{font-size:16px;min-height:44px;height:44px;width:100%}
 #salon-workspace .salon-filter button{min-height:44px;white-space:normal;padding:9px 8px}
 #salon-workspace .salon-filter [data-free]{grid-column:1 / -1}
 #salon-workspace .salon-filter-panel .salon-staff-legend{display:flex;flex-wrap:wrap;overflow:visible;gap:6px;margin:0 0 10px}
 #salon-workspace .salon-filter-panel .salon-legend-chip{max-width:100%;white-space:normal;min-height:38px}
 #salon-workspace [data-close-calendar-filters]{display:inline-flex;align-items:center;justify-content:center}
 #salon-workspace .salon-filter-actions{justify-content:space-between;flex-wrap:wrap;margin:10px 0 0!important}
 #salon-workspace .salon-filter-actions button{min-height:44px}
}