.calendar-toolbar { flex-wrap:wrap; gap:12px; }
.calendar-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.calendar-tools input,.calendar-tools select { font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:9px; padding:9px 11px; min-height:40px; }
.calendar-tools input { max-width:230px; }
.calendar-tools select { max-width:180px; }
.week-overview { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; border-top:1px solid var(--border); }
.week-overview strong { display:block; margin-top:6px; font-size:16px; }
.week-overview>span { color:var(--muted); font-size:13px; }
.week-grid { display:grid; grid-template-columns:repeat(7,minmax(155px,1fr)); gap:1px; background:var(--border); overflow:auto; border-top:1px solid var(--border); }
#calendar-week { min-width:0; overflow:hidden; }
.week-day { display:flex; flex-direction:column; min-width:0; background:var(--surface); }
.week-day.is-today .week-date { color:var(--primary); background:var(--primary-soft); }
.week-day.is-selected { box-shadow:inset 0 3px var(--primary); }
.week-date { border:0; background:none; color:var(--text); font:inherit; width:100%; text-align:left; padding:17px 13px; cursor:pointer; }
.week-date strong { display:block; font-size:13px; }
.week-date small { display:block; font-size:11px; margin-top:5px; color:var(--muted); }
.week-appointments { display:flex; flex-direction:column; gap:9px; padding:5px 10px 16px; min-height:175px; }
.week-appointment { width:100%; border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:10px; background:var(--primary-soft); color:var(--text); padding:11px 9px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; font:inherit; text-align:left; cursor:pointer; }
.week-appointment:hover { border-color:var(--primary); transform:translateY(-1px); }
.week-appointment strong { font-size:12px; overflow-wrap:anywhere; }
.week-appointment>span:not(.badge),.week-appointment>small { font-size:11px; }
.week-appointment .week-time { font-weight:700; font-variant-numeric:tabular-nums; }
.week-appointment .badge { font-size:10px; white-space:normal; }
.week-appointment.pending { background:var(--orange-soft); border-left-color:var(--orange); }
.week-appointment.cancelled,.week-appointment.no_show { background:var(--surface-soft); border-left-color:var(--subtle); }
.week-appointment.completed { background:var(--blue-soft); border-left-color:var(--blue); }
.week-empty { font-size:12px; line-height:1.6; color:var(--muted); padding:12px 4px; }
.week-add { margin:auto 8px 12px; justify-content:center; font-size:11px; }
.calendar-loading { padding:40px 24px; text-align:center; color:var(--muted); }
.calendar-loading button { display:flex; margin:15px auto 0; }
.booking-workflow section { border-bottom:1px solid var(--border); padding-bottom:20px; margin-bottom:20px; }
.booking-workflow .section-heading { margin:0 0 16px; display:flex; flex-wrap:wrap; gap:5px 10px; align-items:baseline; }
.booking-workflow .section-heading h3 { font-size:15px; margin:0; }
.booking-workflow .section-heading>.muted { font-size:12px; }
.booking-workflow .field>input[type=search] { width:100%; margin-top:7px; }
.booking-workflow [readonly] { background:var(--surface-soft); color:var(--muted); }
.customer-suggestions:empty { display:none; }
.customer-suggestions { max-height:210px; overflow:auto; border:1px solid var(--border); border-radius:10px; margin:-6px 0 16px; }
.customer-suggestion { display:flex; gap:10px; justify-content:space-between; width:100%; padding:12px; background:var(--surface); border:0; border-bottom:1px solid var(--border); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.customer-suggestion:hover { background:var(--primary-soft); }
.customer-suggestion strong { font-size:13px; }.customer-suggestion span { font-size:12px;color:var(--muted); }
.customer-suggestions>p { padding:12px; font-size:13px; }
.chosen-customer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px; background:var(--primary-soft); border-radius:10px; margin-bottom:15px; font-size:13px; }
.slot-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 12px; font-size:13px; }
.calendar-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:8px; max-height:235px; overflow:auto; padding:2px; }
.calendar-slot { padding:10px 6px; min-height:42px; border-radius:9px; border:1px solid var(--border-strong); color:var(--text); background:var(--surface); font:inherit; font-size:13px; cursor:pointer; }
.calendar-slot:hover { border-color:var(--primary);background:var(--primary-soft); }
.calendar-slot.selected { background:var(--primary);border-color:var(--primary);color:var(--primary-ink);font-weight:700; }
.slot-note { grid-column:1/-1; padding:14px; font-size:13px; line-height:1.6; background:var(--surface-soft);border-radius:10px;color:var(--muted); }
.slot-selection { margin:13px 0; font-size:12px; color:var(--primary);font-weight:600; }
.booking-workflow [hidden] { display:none!important; }
.calendar-search { margin:16px 0 20px; padding:14px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface-soft); }
.calendar-search summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--text); }
.calendar-search summary svg { width:16px; height:16px; vertical-align:middle; margin-right:4px; }
.calendar-search>p,.calendar-search>small,.calendar-search-range { color:var(--muted); font-size:12px; line-height:1.6; }
.calendar-search>small { display:block; margin-top:12px; }
.calendar-search-controls { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.calendar-search-controls .field { flex:1; min-width:170px; margin:0; }
.calendar-search-controls select { width:100%; }
.calendar-search-controls>.btn { min-height:42px; }
.calendar-suggestions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:280px; overflow:auto; padding:3px; }
.calendar-suggestion { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); color:var(--text); text-align:left; font:inherit; cursor:pointer; overflow-wrap:anywhere; min-width:0; }
.calendar-suggestion strong { font-size:13px; }
.calendar-suggestion span,.calendar-suggestion small { font-size:12px; color:var(--muted); }
.calendar-suggestion:hover { border-color:var(--primary); background:var(--primary-soft); }
.calendar-suggestion:focus-visible,.calendar-search summary:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
.week-date:focus-visible,.week-appointment:focus-visible,.calendar-slot:focus-visible,.customer-suggestion:focus-visible { outline:3px solid var(--primary);outline-offset:2px; }
@media(max-width:760px) {
  .calendar-tools { width:100%; }.calendar-tools input { flex:1;min-width:120px;max-width:none; }.calendar-tools input,.calendar-tools select,.booking-workflow input,.booking-workflow select,.booking-workflow textarea { font-size:16px; }
  .view-toggle { flex-wrap:wrap; }.view-toggle button { padding:8px 9px; }
  .week-grid { grid-template-columns:1fr;overflow:visible;gap:10px;background:var(--surface-soft);padding:12px; }
  .week-day { border:1px solid var(--border);border-radius:12px;overflow:hidden; }
  .week-date { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px; }.week-date strong {font-size:14px;}.week-date small {margin:0;}
  .week-appointments { min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }.week-empty { grid-column:1/-1;margin:0; }.week-appointment strong {font-size:13px;}
  .week-add { width:calc(100% - 20px);margin:0 10px 12px; }.week-overview {padding:18px 15px;}
  .chosen-customer { align-items:flex-start;flex-direction:column; }.calendar-slots { grid-template-columns:repeat(4,minmax(0,1fr)); }.calendar-slot {font-size:15px;}
  .calendar-search-controls { align-items:stretch; flex-direction:column; }.calendar-search-controls .field { min-width:0; }.calendar-suggestions { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .week-appointment:hover {transform:none;} }