.calendar-demo-section{padding:1.5rem 0 6rem;background:#eef2f7}.calendar-demo{position:relative}
.calendar-demo__controls{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;background:#fff;border-bottom:1px solid var(--cos-color-border)}.calendar-demo__date-nav{display:flex;align-items:center;gap:.7rem}.calendar-demo__date-nav>button,.calendar-demo__views button{padding:.55rem .7rem;border:1px solid var(--cos-color-border);border-radius:10px;background:#fff;cursor:pointer}.calendar-demo__date-nav div{min-width:220px}.calendar-demo__date-nav strong,.calendar-demo__date-nav span{display:block}.calendar-demo__date-nav span{color:var(--cos-color-muted);font-size:.68rem}.calendar-demo__views{display:flex;gap:.35rem;padding:.3rem;border-radius:12px;background:#f3f4f6}.calendar-demo__views button{border:0;background:transparent}.calendar-demo__views button.is-active{background:#fff;box-shadow:var(--cos-shadow-sm)}
.calendar-demo__summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;padding:1rem}.calendar-demo__summary article{padding:.85rem;border:1px solid var(--cos-color-border);border-radius:14px;background:#fff}.calendar-demo__summary span,.calendar-demo__summary strong,.calendar-demo__summary small{display:block}.calendar-demo__summary span,.calendar-demo__summary small{color:var(--cos-color-muted);font-size:.66rem}.calendar-demo__summary strong{margin:.3rem 0;font-size:1.15rem}
.calendar-demo__layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1rem;padding:0 1rem 1rem}.calendar-board{overflow:hidden;border:1px solid var(--cos-color-border);border-radius:18px;background:#fff}.calendar-board__header{display:grid;grid-template-columns:64px 1fr 1fr;border-bottom:1px solid var(--cos-color-border)}.calendar-board__time-head{padding:.8rem;color:var(--cos-color-muted);font-size:.68rem}.calendar-stylist-head{display:flex;align-items:center;gap:.6rem;padding:.7rem;border-left:1px solid var(--cos-color-border)}.calendar-stylist-head strong,.calendar-stylist-head small{display:block}.calendar-stylist-head small{color:var(--cos-color-muted);font-size:.65rem}.stylist-avatar{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:900}.stylist-avatar--gold{background:#fff8e8;color:#92400e}.stylist-avatar--blue{background:#eff6ff;color:#1d4ed8}
.calendar-board__body{display:grid;grid-template-columns:64px 1fr 1fr;min-height:680px}.calendar-time-axis{display:flex;flex-direction:column;justify-content:space-between;padding:.6rem;border-right:1px solid var(--cos-color-border);color:var(--cos-color-muted);font-size:.62rem}.calendar-lane{position:relative;border-right:1px solid var(--cos-color-border);background:repeating-linear-gradient(to bottom,#fff 0,#fff 84px,#eef2f7 85px)}.calendar-appointment,.calendar-gap,.calendar-drop-zone{position:absolute;left:7px;right:7px;top:var(--top);height:var(--height);border-radius:11px;text-align:left}.calendar-appointment{padding:.55rem .6rem;border:1px solid;border-left-width:4px;cursor:grab}.calendar-appointment:active{cursor:grabbing}.calendar-appointment strong,.calendar-appointment small,.calendar-appointment em{display:block}.calendar-appointment strong{font-size:.68rem}.calendar-appointment small,.calendar-appointment em{font-size:.59rem;color:var(--cos-color-muted);font-style:normal}.appointment-status{position:absolute;right:.45rem;top:.45rem;width:7px;height:7px;border-radius:50%;background:#10b981}.appointment-gold{border-color:#ead8aa;border-left-color:#c8a96a;background:#fff8e8}.appointment-blue{border-color:#bfdbfe;border-left-color:#3b82f6;background:#eff6ff}.appointment-green{border-color:#a7f3d0;border-left-color:#10b981;background:#ecfdf5}.appointment-slate{border-color:#cbd5e1;border-left-color:#64748b;background:#f8fafc}.calendar-gap{padding:.5rem;border:1px dashed #f59e0b;background:#fffbeb;color:#92400e;cursor:pointer}.calendar-gap strong,.calendar-gap small{display:block}.calendar-gap strong{font-size:.65rem}.calendar-gap small{font-size:.58rem}.calendar-drop-zone{display:grid;place-items:center;border:1px dashed #94a3b8;background:rgba(241,245,249,.75);color:#64748b;font-size:.62rem;opacity:.35}.calendar-drop-zone.is-active{opacity:1;border-color:var(--cos-color-accent-dark);background:#fff8e8}.calendar-now-line{position:absolute;left:0;right:0;top:var(--top);height:2px;background:var(--cos-color-danger);z-index:3}.calendar-now-line::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--cos-color-danger)}.calendar-now-line span{position:absolute;right:3px;top:-15px;padding:.1rem .3rem;border-radius:5px;background:var(--cos-color-danger);color:#fff;font-size:.52rem}
.calendar-intelligence{padding:1rem;border:1px solid var(--cos-color-border);border-radius:18px;background:#fff;height:max-content}.calendar-intelligence__header{display:flex;justify-content:space-between;gap:1rem}.calendar-intelligence__header small,.calendar-intelligence__header h2{display:block}.calendar-intelligence__header small{color:var(--cos-color-muted)}.calendar-intelligence__header h2{font-size:1rem}.calendar-intelligence__header>span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--cos-color-midnight);color:var(--cos-color-accent);font-weight:900}.calendar-intelligence>p{margin-top:.7rem;color:var(--cos-color-muted);font-size:.75rem}.waitlist-matches{display:grid;gap:.55rem;margin-top:1rem}.waitlist-matches button{display:grid;grid-template-columns:34px 1fr auto;gap:.55rem;align-items:center;padding:.65rem;border:1px solid var(--cos-color-border);border-radius:12px;background:#fff;text-align:left;cursor:pointer}.waitlist-matches button.is-selected{border-color:var(--cos-color-accent);background:#fff8e8}.waitlist-matches button>span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#f3f4f6;font-weight:900;font-size:.65rem}.waitlist-matches strong,.waitlist-matches small{display:block}.waitlist-matches strong{font-size:.7rem}.waitlist-matches small{color:var(--cos-color-muted);font-size:.6rem}.waitlist-matches em{font-size:.55rem;color:#047857;font-style:normal}.calendar-fill-gap{width:100%;margin-top:1rem;padding:.75rem;border:0;border-radius:11px;background:var(--cos-color-midnight);color:#fff;font-weight:850;cursor:pointer}.calendar-fill-gap:disabled{opacity:.45;cursor:not-allowed}.calendar-intelligence__tip{margin-top:1rem;padding:.75rem;border-radius:12px;background:#f8fafc}.calendar-intelligence__tip strong,.calendar-intelligence__tip span{display:block}.calendar-intelligence__tip span{margin-top:.25rem;color:var(--cos-color-muted);font-size:.66rem}
.calendar-week-view{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;padding:1rem}.calendar-week-column{min-height:420px;padding:.7rem;border:1px solid var(--cos-color-border);border-radius:13px;background:#f8fafc}.calendar-week-column strong,.calendar-week-column span{display:block}.week-load{margin:.25rem 0 .8rem;color:var(--cos-color-muted);font-size:.62rem}.week-block{margin-top:.55rem;border-radius:9px}.week-block--gold{background:#fff8e8;border-left:4px solid #c8a96a}.week-block--blue{background:#eff6ff;border-left:4px solid #3b82f6}.week-block--green{background:#ecfdf5;border-left:4px solid #10b981}
.calendar-agenda-view{padding:1rem}.calendar-agenda-view article{display:grid;grid-template-columns:85px 1fr auto;gap:1rem;align-items:center;padding:.85rem;border-bottom:1px solid var(--cos-color-border)}.calendar-agenda-view time{font-weight:850}.calendar-agenda-view strong,.calendar-agenda-view small{display:block}.calendar-agenda-view small{color:var(--cos-color-muted)}.calendar-agenda-view article>span{padding:.3rem .55rem;border-radius:999px;background:#ecfdf5;color:#047857;font-size:.62rem;font-weight:800}
.calendar-appointment-drawer{position:fixed;right:0;top:0;bottom:0;width:min(430px,92vw);z-index:1250;padding:1.2rem;background:#fff;box-shadow:-20px 0 60px rgba(17,24,39,.22)}.calendar-appointment-drawer[hidden],.calendar-drawer-backdrop[hidden]{display:none}.calendar-drawer-backdrop{position:fixed;inset:0;z-index:1240;background:rgba(17,24,39,.45)}.calendar-appointment-drawer__header{display:flex;justify-content:space-between;gap:1rem}.calendar-appointment-drawer__header button{width:38px;height:38px;border:1px solid var(--cos-color-border);border-radius:11px;background:#fff}.calendar-appointment-drawer__status{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem;padding:.8rem;border-radius:12px;background:#ecfdf5;color:#047857}.calendar-appointment-drawer__status select{padding:.4rem;border:1px solid #a7f3d0;border-radius:8px;background:#fff}.calendar-appointment-drawer dl{margin-top:1rem}.calendar-appointment-drawer dl div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--cos-color-border)}.calendar-appointment-drawer dd{margin:0;font-weight:800}.calendar-appointment-drawer__notes{margin-top:1rem;padding:1rem;border-radius:13px;background:#f8fafc}.calendar-appointment-drawer__notes p{margin-top:.35rem;color:var(--cos-color-muted)}.calendar-appointment-drawer__actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}.calendar-appointment-drawer__actions button{padding:.7rem;border:1px solid var(--cos-color-border);border-radius:10px;background:#fff;font-weight:800}.calendar-appointment-drawer__actions button.is-primary{grid-column:1/-1;background:var(--cos-color-midnight);color:#fff}
.calendar-toast{position:fixed;right:1rem;bottom:1rem;z-index:1400;padding:1rem 1.2rem;border-radius:14px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;box-shadow:var(--cos-shadow-lg)}.calendar-toast[hidden]{display:none}.calendar-toast strong,.calendar-toast span{display:block}.calendar-toast span{margin-top:.25rem;font-size:.72rem}
.calendar-modal{position:fixed;inset:0;z-index:1300}.calendar-modal[hidden]{display:none}.calendar-modal__backdrop{position:absolute;inset:0;background:rgba(17,24,39,.55)}.calendar-modal__dialog{position:relative;width:min(520px,92vw);margin:9vh auto 0;padding:1.3rem;border-radius:22px;background:#fff}.calendar-modal__close{position:absolute;right:1rem;top:1rem;width:36px;height:36px;border:1px solid var(--cos-color-border);border-radius:10px;background:#fff}.calendar-modal__form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}.calendar-modal__form label{font-size:.72rem;font-weight:800}.calendar-modal__form input,.calendar-modal__form select{width:100%;margin-top:.35rem;padding:.65rem;border:1px solid var(--cos-color-border);border-radius:10px}
@media(max-width:1050px){.calendar-demo__layout{grid-template-columns:1fr}.calendar-intelligence{order:-1}.calendar-demo__summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.calendar-demo__controls{align-items:flex-start;flex-direction:column}.calendar-demo__date-nav{width:100%;flex-wrap:wrap}.calendar-demo__views{width:100%}.calendar-demo__views button{flex:1}.calendar-board__header{grid-template-columns:50px 1fr}.calendar-board__header .calendar-stylist-head:last-child{display:none}.calendar-board__body{grid-template-columns:50px 1fr}.calendar-lane:last-child{display:none}.calendar-week-view{grid-template-columns:repeat(2,1fr)}.calendar-demo__summary{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.calendar-demo__summary{grid-template-columns:1fr}.calendar-demo__layout{padding:.6rem}.calendar-modal__form{grid-template-columns:1fr}.calendar-week-view{grid-template-columns:1fr}.calendar-agenda-view article{grid-template-columns:70px 1fr}.calendar-agenda-view article>span{grid-column:2}}