:root{--green:#16ad98;--ink:#353c40;--muted:#858992;--line:#e4e5e9;--bg:#fff}body{font-size:14px;background:#fff}.shell{grid-template-columns:230px minmax(0,1fr)}aside{background:#f5f5f5;padding:14px 16px;height:100vh;overflow-y:auto;border-right:0}.brand{order:3;padding:24px 4px 6px;margin-top:auto;font-size:15px;color:#777}.brand .logo{width:27px;height:27px;font-size:20px;border-radius:7px;background:#e0dfed;color:#7a77aa}.brand small{font-size:8px;letter-spacing:1px}aside .sectionlabel,aside footer{display:none}#mini-calendar{border-bottom:1px solid #d7d7da;padding-bottom:15px;margin-bottom:15px}.month-title{display:flex;align-items:center;gap:4px;margin:0 0 20px;padding:0 4px}.month-title strong{flex:1;font-size:14px;font-weight:600;text-transform:capitalize}.month-title button{border:0;background:none;font-size:25px;padding:0 6px}.mini-days,.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.mini-days span{color:#83838a;text-align:center;font-size:12px;padding-bottom:12px}.mini-grid button{padding:0;height:30px;border:0;background:none;color:#73767a;border-radius:9px;font-size:14px}.mini-grid button.outside{color:#b5b6ba}.mini-grid button.today{box-shadow:inset 0 0 0 1px #d4bd64}.mini-grid button.selected{background:#ffd500;color:#333;font-weight:700;text-decoration:underline;text-underline-offset:5px}.mini-grid button:hover{background:#e7e7eb}.mini-grid button.selected:hover{background:#ffd500}nav{gap:3px}nav button{padding:12px 8px;border-radius:5px;font-size:15px;color:#36383b;gap:12px}nav button.active{background:#e9e8ee;color:#333}nav button .nav-icon{width:23px;font-size:24px;line-height:1;font-weight:400;color:#555}nav button .nav-chevron{margin-left:auto;width:auto;color:#aaa;font-size:14px}header{padding:9px 20px;min-height:48px}.demo{background:#fafafa;border-color:#e7e7ea;color:#858992;font-size:10px;letter-spacing:0}header button{font-size:11px;padding:5px 9px}button,input,select{border-radius:5px}button.primary{background:#16ad98;border-color:#16ad98}button.primary:hover{background:#129682}.content{padding:24px;max-width:none}h1{font-size:25px}.panel,.stat{border-radius:7px}th{background:#fafafa}.schedule-page .content{padding:0 14px 18px}.schedule-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0 8px}.schedule-toolbar button,.schedule-toolbar input,.schedule-toolbar select{padding:6px 9px;font-size:12px}.schedule-toolbar select{max-width:210px}.view-switch{display:flex}.view-switch button{border-radius:0;margin-left:-1px}.view-switch button:first-child{border-radius:5px 0 0 5px}.view-switch button:last-child{border-radius:0 5px 5px 0}.view-switch button[aria-pressed=true]{background:#ededf4;border-color:#d9d8e6;color:#504b71}.schedule-caption{display:flex;align-items:center;gap:15px;padding:4px 2px 12px}.schedule-caption h1{font-size:16px;font-weight:600;letter-spacing:0;margin:0;text-transform:capitalize}.schedule-caption>span{font-size:11px}.room-calendar{border:1px solid #e4e6ef;border-radius:12px 12px 0 0;overflow:auto;height:calc(100vh - 192px);min-height:400px;background:#fff;scrollbar-color:#c9ccd2 #f5f5f7}.room-canvas{min-width:1040px}.room-headers,.room-body{display:grid;grid-template-columns:54px repeat(7,minmax(132px,1fr)) 38px}.room-headers{position:sticky;top:0;z-index:4;background:#fff;border-bottom:1px solid #dfe0e6;min-height:94px}.room-heading{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:10px 7px;line-height:1.3;font-size:14px;gap:3px}.room-heading b{display:block;color:#858992;font-weight:400}.room-heading small{color:#a1a3aa;font-size:10px}.room-icon{width:25px;height:25px;background:#dedaff;color:#fff;font-size:23px;line-height:25px;border-radius:5px;text-align:center;margin-bottom:3px}.room-body{position:relative;margin-top:20px;margin-bottom:20px}.time-axis{position:relative;background:#fff}.time-axis span{position:absolute;right:8px;transform:translateY(-50%);line-height:1;color:#858992;font-size:13px}.time-axis span.hour{font-size:21px;color:#343b40;letter-spacing:-1px}.time-axis sup{font-size:12px;color:#7c818b;letter-spacing:0;vertical-align:super}.time-axis.right span{right:2px}.room-column{position:relative;margin:0 4px;background:repeating-linear-gradient(to bottom,#d8d9dd 0,#d8d9dd 1px,transparent 1px,transparent 22px,#f0f0f3 22px,#f0f0f3 23px,transparent 23px,transparent 45px)}.free-slot{position:absolute;width:100%;height:45px;border:0;background:transparent;border-radius:0;padding:0}.free-slot:hover{background:#16ad980d}.free-slot:focus-visible{outline:2px solid #16ad98;outline-offset:-2px}.appointment{position:absolute;padding:0;border:0;border-radius:4px;overflow:hidden;text-align:left;line-height:1.15;font-size:11px;box-shadow:0 0 0 1px #fff3;min-height:0;background:#a7e5d9;color:#2f5654;z-index:2;display:flex;flex-direction:column}.appointment:hover{background:#a7e5d9;filter:brightness(.97);box-shadow:0 1px 8px #0003;z-index:3}.appointment.done,.appointment.done:hover{background:#ffb17e;color:#70472f}.appointment.absent,.appointment.absent:hover{background:#ff8c90;color:#773b3e}.appointment.cancelled,.appointment.cancelled:hover,.appointment.moved,.appointment.moved:hover{background:#e1e2e8;color:#6e727e}.appointment-time{display:flex;justify-content:space-between;align-items:center;gap:2px;background:#17b39a;color:#fff;padding:3px 4px;white-space:nowrap;font-weight:650;font-size:11px;flex-shrink:0;width:100%}.appointment-time b{border-radius:50%;background:#fff;color:#17b39a;width:12px;height:12px;line-height:12px;text-align:center;flex-shrink:0}.appointment-body{display:flex;flex-direction:column;gap:4px;padding:4px;width:100%;overflow:hidden;overflow-wrap:anywhere}.appointment-body>strong{color:#2e4142;font-size:11px}.appointment-staff{font-size:11px}.appointment-client,.appointment-phone{font-size:12px}.appointment-body small{font-size:10px;margin-top:2px}.appointment.short .appointment-body{display:none}.now-line{pointer-events:none;position:absolute;left:44px;right:0;border-top:1px solid #343b40;z-index:3;box-shadow:0 1px 3px #0003}.now-line span{position:absolute;left:-40px;transform:translateY(-50%);background:#343b40;color:#ffda00;border-radius:4px;font-size:11px;padding:3px 5px}.schedule-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:#666;padding:12px 0;align-items:center}.schedule-legend>span{display:flex;align-items:center;gap:5px}.key{display:inline-block;width:10px;height:10px;border-radius:2px;background:#a7e5d9}.key.done{background:#ffb17e}.key.absent{background:#ff8c90}.key.cancelled{background:#e1e2e8}.unplaced{margin-top:12px;background:#fffaf1;border:1px solid #e9dfc9;border-radius:6px;padding:12px}.unplaced summary{cursor:pointer;font-weight:600;font-size:13px}.unplaced p{font-size:12px;color:#8c795b;margin:8px 0}.unplaced .tablewrap{max-height:320px}.unplaced td,.unplaced th{padding:8px 10px}.notice{background:#f5f5f9;border-color:#e3e3ed}.rowedit.slots{background:#f5f5f9}dialog{border-radius:10px}.modalhead{padding:16px 24px}.modalbody{padding:20px 24px}.avatar{background:#efedf7;color:#77728f}.link{color:#168b7c}input:focus,select:focus{outline-color:#b0d5cd}
@media(min-width:1600px){.shell{grid-template-columns:250px minmax(0,1fr)}aside{padding:22px 18px}.mini-grid button{height:34px}.room-heading{font-size:16px}.appointment,.appointment-time,.appointment-body>strong,.appointment-staff{font-size:13px}.appointment-client,.appointment-phone{font-size:14px}.room-headers,.room-body{grid-template-columns:60px repeat(7,minmax(132px,1fr)) 45px}}
@media(max-width:1050px){.shell{grid-template-columns:200px minmax(0,1fr)}aside{padding:12px}.schedule-toolbar{align-items:flex-start}.room-calendar{height:calc(100vh - 220px)}.schedule-caption{flex-wrap:wrap;gap:5px}.schedule-toolbar select{max-width:175px}nav button{font-size:14px}.mini-grid{gap:1px}}
@media(max-width:760px){.shell{display:block}aside{height:auto;padding:10px}#mini-calendar,.brand{display:none}nav{display:flex}nav button{font-size:12px;padding:8px;gap:5px}nav button .nav-icon{font-size:16px;width:18px}nav button .nav-chevron{display:none}header{padding:7px 12px}.schedule-page .content{padding:0 10px}.room-calendar{height:65vh}.schedule-caption h1{font-size:14px}.schedule-toolbar .tools{gap:5px}.schedule-toolbar select{max-width:170px}.content{padding:20px 12px}.schedule-legend{gap:10px}}

.appointment.tone-green,.appointment.tone-green:hover{background:#a7e5c2;color:#315b40}.appointment.tone-yellow,.appointment.tone-yellow:hover{background:#ffe59a;color:#69541e}.appointment.tone-red,.appointment.tone-red:hover{background:#ff999c;color:#773b3e}.appointment.tone-grey,.appointment.tone-grey:hover{background:#e1e2e8;color:#6e727e}.appointment.tone-green .appointment-time{background:#24a96d}.appointment.tone-yellow .appointment-time{background:#e7b72e;color:#473b18}.appointment.tone-red .appointment-time{background:#dd666b}.key.tone-green{background:#a7e5c2}.key.tone-yellow{background:#ffe59a}.key.tone-red{background:#ff999c}.key.tone-grey{background:#e1e2e8}.duration-fields,.price-fields{padding:12px;background:#f7f8fa;border-radius:7px}.duration-fields p,.price-fields p{margin:8px 0 0}

/* Adjustable timeline and dynamic room/staff columns. */
.room-headers,.room-body{grid-template-columns:54px repeat(var(--schedule-columns,7),minmax(0,1fr)) 38px}.room-column{background:repeating-linear-gradient(to bottom,#d8d9dd 0,#d8d9dd 1px,transparent 1px,transparent 45px)}.time-axis span.hour{font-size:13px;letter-spacing:0}.time-axis span.half{font-size:11px}.now-line{border-top:2px solid #e34d55;z-index:3;right:38px;transition:top 1s linear}.now-line[hidden]{display:none}.now-line span{background:#e34d55;color:#fff}.schedule-staff-picker{display:grid;gap:7px;font-size:12px;margin-top:16px}.schedule-staff-picker select{width:100%;min-width:0;font-size:12px}.appointment.unknown-duration{outline:1px dashed #777}.appointment.unknown-duration .appointment-time{font-size:9px}.appointment.unknown-duration .appointment-body{padding:2px 4px}.appointment.unknown-duration .appointment-client{font-size:11px}.schedule-toolbar label{font-size:12px}.room-heading{overflow-wrap:anywhere}@media(max-width:760px){#mini-calendar{display:block}.mini-grid,.mini-days,.month-title{display:none}.schedule-staff-picker{margin-top:0}}

.event-client-picker{display:flex;flex-direction:column;gap:6px;position:relative;align-items:stretch}.event-client-picker input{width:100%;min-width:0}.client-suggestions{position:absolute;top:75px;left:0;right:0;z-index:20;max-height:230px;overflow:auto;background:white;border:1px solid #cdd6d0;border-radius:8px;box-shadow:0 8px 22px #0002}.client-suggestions[hidden]{display:none}.client-suggestions button{display:block;width:100%;text-align:left;border:0;border-radius:0;background:white;padding:10px 12px;white-space:normal}.client-suggestions button:hover,.client-suggestions button[aria-selected=true]{background:#e7f3e9}.client-no-match{padding:12px;color:#68736b}

.free-slot:hover{background:transparent}.free-slot .new-session-hint{position:absolute;top:0;left:0;right:0;height:26px;display:flex;align-items:center;padding:0 6px;border-radius:5px;background:#17b39a;color:#fff;font-size:12px;font-weight:650;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none}.free-slot:hover .new-session-hint,.free-slot:focus-visible .new-session-hint{opacity:1}
.appointment[draggable="true"]{cursor:grab}
.appointment.dragging{opacity:.45;cursor:grabbing}
.drop-time-hint{position:absolute;left:3px;right:3px;z-index:10;background:#0b876b;color:white;border:2px solid #fff;border-radius:5px;padding:5px;font-size:12px;pointer-events:none;box-shadow:0 2px 8px #0003}
.clickable-row{cursor:pointer}
.clickable-row:hover{background:#eaf8f2}
.staff-submenu{padding-left:18px;max-height:300px;overflow:auto}
.staff-submenu button{font-size:12px}
.staff-week-day{margin:16px 0 24px}
.room-headers{z-index:1000}
.appointment:focus-visible{outline:3px solid #315a93;outline-offset:-3px}
.appointment-shell{position:absolute}
.appointment-delete{position:absolute;z-index:5;right:2px;top:2px;width:22px;height:22px;padding:0;line-height:20px;border:1px solid #b05a5a;background:#fff;color:#a32121;font-size:20px;border-radius:4px;opacity:0}
.appointment-shell:hover .appointment-delete,.appointment-shell:focus-within .appointment-delete{opacity:1}
.appointment-delete:focus-visible{outline:2px solid #a32121}
.appointment-shell .appointment-time{padding-right:25px}
.client-return-bar{position:sticky;top:0;z-index:20;background:white;padding:0 0 12px;margin-bottom:8px}

.event-pricing{display:grid;grid-template-columns:220px 180px;gap:16px;max-width:100%}@media(max-width:520px){.event-pricing{grid-template-columns:minmax(0,1fr);max-width:240px}}

.modalbody,.modalbody p,.modalbody input,.modalbody textarea,td,.note-text{user-select:text;-webkit-user-select:text}
.text-edit-menu{position:fixed;z-index:100000;background:white;border:1px solid #ccd6d5;border-radius:8px;padding:5px;box-shadow:0 5px 20px #0003;min-width:180px}.text-edit-menu button{display:block;width:100%;text-align:left;border:0;background:white;padding:8px}.text-edit-menu button:hover{background:#e7f5ef}