.staff-calendar-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0}.staff-calendar-nav h2{margin:0 auto}.staff-calendar-nav .button{margin:0;min-height:44px}.staff-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.calendar-weekday{text-align:center;color:#c0c9cc;padding:8px}.calendar-day,.calendar-empty{min-width:0;min-height:150px;border:1px solid #465052;border-radius:8px;background:#1c2021;padding:10px}.calendar-empty{opacity:.35}.calendar-day h3{font-size:.95rem;margin:0 0 9px}.calendar-day.today{outline:2px solid #27b9ee;outline-offset:1px}.calendar-event{display:grid;gap:4px;padding:9px;margin-top:8px;border-left:4px solid #777;border-radius:5px;background:#292e30;color:#f6f6f2;text-decoration:none;overflow-wrap:anywhere;font-size:.8rem;line-height:1.5}.calendar-event:focus-visible{outline:3px solid #fff}.state-provisional{border-color:#f4b942;background:#35301e}.state-payment_pending{border-color:#27b9ee;background:#1b3037}.state-confirmed{border-color:#65cd8a;background:#1d3528}.state-cancel_pending{border-color:#fa8c8c;background:#3a2525}.calendar-free{color:#aeb8b9;font-size:.8rem}.finance-warning{padding:12px;border-left:4px solid #fa8c8c;background:#3a2525;overflow-wrap:anywhere}.finance-record{margin:15px 0;padding:16px;border:1px solid #657174;border-radius:8px;overflow-wrap:anywhere}@media(max-width:700px){.staff-calendar{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-weekday,.calendar-empty{display:none}.calendar-day{min-height:140px}.staff-calendar-nav h2{order:-1;width:100%;text-align:center}.staff-calendar-nav .button{flex:1;text-align:center}}@media(max-width:340px){.staff-calendar{grid-template-columns:minmax(0,1fr)}}
.state-phone{border-color:#c59afa;background:#30253e}.calendar-phone-button{display:block;width:100%;margin-top:12px;padding:10px 6px;min-height:44px;text-align:center;font-size:.8rem;background:#68508a;white-space:normal;overflow-wrap:anywhere}.phone-booking-form{margin:20px 0;scroll-margin-top:16px}.phone-booking-form details{margin-top:16px}.phone-booking-form summary,.phone-release summary{cursor:pointer;min-height:44px;padding:10px 0;line-height:1.5;overflow-wrap:anywhere}.phone-booking-form summary:focus-visible,.phone-release summary:focus-visible,.calendar-phone-button:focus-visible{outline:3px solid #fff;outline-offset:2px}.phone-release{border-top:1px solid #66527d;margin-top:8px}.phone-release p{margin:4px 0;font-size:.8rem}.phone-release button{width:100%;min-height:44px;margin-top:10px;padding:10px 6px;white-space:normal}.phone-release .confirm{align-items:flex-start}.phone-release input[type=checkbox],.phone-time-details input[type=checkbox]{min-width:22px;min-height:22px;flex:none}.phone-booking-form input{min-width:0;max-width:100%}

/* Keep weekday columns on small screens; scroll details instead of reordering days. */
.staff-calendar-scroll{max-width:100%;overflow-x:auto;padding:3px 2px 12px;overscroll-behavior-x:contain}
.staff-calendar-scroll:focus-visible{outline:3px solid #27b9ee;outline-offset:2px}
.staff-calendar-scroll .staff-calendar{grid-template-columns:repeat(7,minmax(0,1fr));min-width:980px}
.staff-calendar-scroll .calendar-weekday,.staff-calendar-scroll .calendar-empty{display:block}
.availability-compact-date{display:none}
[data-availability-grid].availability-inline-grid{grid-template-columns:repeat(7,minmax(120px,1fr));overflow-x:auto;gap:6px}
.availability-weekday{text-align:center;font-weight:700;color:#c0c9cc;padding:7px 0}
.availability-weekday:first-child{color:#fa9a9a}
.availability-weekday:nth-child(7){color:#8fc8f4}
.availability-empty{min-width:0;pointer-events:none}
[data-availability-grid][data-calendar-display-mode=DAILY].availability-inline-grid{grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible}
[data-calendar-display-mode=DAILY] .availability-inline-day{overflow-wrap:anywhere}
@media(max-width:680px){
 [data-calendar-display-mode=DAILY].availability-inline-grid{gap:3px}
 .availability-inline:has([data-calendar-display-mode=DAILY]){padding:12px 8px}
 [data-calendar-display-mode=DAILY] .availability-inline-day{padding:7px 3px}
 [data-calendar-display-mode=DAILY] .availability-full-date{display:none}
 [data-calendar-display-mode=DAILY] .availability-compact-date{display:inline}
 [data-calendar-display-mode=DAILY] .availability-inline-day strong{font-size:.85rem;text-align:center}
 [data-calendar-display-mode=DAILY] .availability-inline-day b{font-size:.65rem;line-height:1.6;text-align:center}
 [data-calendar-display-mode=DAILY] .availability-inline-day p{display:none}
 [data-calendar-display-mode=DAILY] .availability-inline-day button{min-height:44px;padding:5px 1px;font-size:.65rem}
}