.desktop-resource-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 10px;
  padding: 10px 12px;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  background: #f7f9fc;
}
.desktop-resource-view-switch { display: grid; grid-template-columns: 1fr 1fr; min-width: 230px; padding: 4px; border-radius: 10px; background: #e7ebf2; }
.desktop-resource-view-switch button { padding: 9px 14px; border: 0; background: transparent; color: #596579; box-shadow: none; }
.desktop-resource-view-switch button.selected { background: #fff; color: #123b9a; box-shadow: 0 2px 8px rgba(20, 46, 100, .14); }
.desktop-resource-toolbar label { display: flex; align-items: center; gap: 8px; color: #596579; font-size: 12px; font-weight: 750; }
.desktop-resource-toolbar select { min-width: 220px; padding: 8px 34px 8px 10px; }
.desktop-resource-toolbar > small { margin-left: auto; color: #7b8492; }
.desktop-resource-toolbar > strong { font-size: 13px; }
.desktop-schedule-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #dde6e1;
  border-radius: 12px;
  background: #f8fcfa;
  color: #31433a;
  font-size: 12px;
}
.desktop-schedule-legend span { display: flex; align-items: center; gap: 6px; font-weight: 750; }
.desktop-schedule-legend i { width: 10px; height: 10px; border-radius: 3px; }
.desktop-schedule-legend i.free { border: 1px solid #48a778; background: #dff5e8; }
.desktop-schedule-legend i.booked { background: #7d9ce9; }
.desktop-schedule-legend i.held { background: #f0b757; }
.desktop-schedule-legend small { margin-left: auto; color: #75817a; }
.calendar-free-slot {
  grid-column: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  margin: 1px 5px;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--clinic-color, #4e9a70) 70%, #fff);
  border-left: 4px solid var(--clinic-color, #4e9a70);
  border-radius: 4px;
  background: color-mix(in srgb, var(--clinic-color, #4e9a70) 22%, #fff);
  color: #164e36;
  box-shadow: none;
  text-align: left;
}
.calendar-free-slot strong { font-size: 10px; }
.calendar-free-slot span { overflow: hidden; color: #387259; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-clinic-capacity,
.calendar-clinic-occupied {
  grid-column: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin: 1px 5px;
  padding: 1px 7px;
  border-radius: 4px;
  text-align: left;
}
.calendar-clinic-capacity { border: 1px solid color-mix(in srgb, var(--clinic-color) 60%, #fff); border-left: 4px solid var(--clinic-color); background: color-mix(in srgb, var(--clinic-color) 20%, #fff); color: #164e36; box-shadow: none; }
.calendar-clinic-capacity:hover { z-index: 5; background: color-mix(in srgb, var(--clinic-color) 34%, #fff); box-shadow: 0 2px 8px rgba(31,90,61,.2); }
.calendar-clinic-capacity strong,.calendar-clinic-occupied strong { font-size: 10px; }
.calendar-clinic-capacity span,.calendar-clinic-occupied span { font-size: 9px; }
.calendar-clinic-occupied { border: 1px solid #d4d9e1; background: #edf0f5; color: #697386; }
.calendar-free-slot:hover,
.calendar-free-slot:focus-visible {
  z-index: 5;
  background: color-mix(in srgb, var(--clinic-color, #4e9a70) 35%, #fff);
  box-shadow: 0 2px 8px rgba(31, 90, 61, .2);
  transform: scale(1.015);
}
.calendar-appointment,
.calendar-hold { z-index: 4; }
.calendar-appointment strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-appointment strong > span { display: inline; margin: 0; font: inherit; }
.continuous-calendar .calendar-appointment.compact { padding: 0 7px; display: flex; align-items: center; }
.calendar-appointment.compact > strong { min-width: 0; line-height: 16px; }
.calendar-appointment.compact > span,
.calendar-appointment.compact > small { display: none; }
.calendar-availability { pointer-events: none; }
.calendar-availability.blocked { z-index: 3; pointer-events: auto; }
.calendar-availability.available span,
.calendar-availability.available small { opacity: .3; }
.desktop-schedule-legend i.recovery { border-color: #e0a62d; background: repeating-linear-gradient(135deg, #fff3c9 0 5px, #f7dc85 5px 10px); }
.continuous-calendar .time-axis { position: sticky; display: block; padding-top: 0; }
.continuous-calendar .time-axis span { position: absolute; right: 8px; left: 0; transform: translateY(-50%); }
.continuous-calendar .calendar-day {
  position: relative;
  display: block;
  background:
    repeating-linear-gradient(to bottom, transparent 0 29px, #edf0f4 29px 30px),
    repeating-linear-gradient(to bottom, transparent 0 59px, #d9dee7 59px 60px);
}
.continuous-calendar .calendar-availability,
.continuous-calendar .calendar-free-slot,
.continuous-calendar .calendar-clinic-capacity,
.continuous-calendar .calendar-clinic-occupied,
.continuous-calendar .calendar-appointment,
.continuous-calendar .calendar-recovery {
  position: absolute;
  right: 4px;
  left: 4px;
  width: auto;
  min-height: 18px;
  margin: 0;
}
.continuous-calendar .calendar-free-slot { z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.continuous-calendar .calendar-free-slot strong { font-size: 10px; }
.continuous-calendar .calendar-free-slot span { font-size: 8px; }
.continuous-calendar .calendar-recovery {
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 2px 7px;
  border: 1px solid #e0a62d;
  border-left: 4px solid #c98a00;
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, rgba(255,247,210,.97) 0 6px, rgba(248,222,132,.97) 6px 12px);
  color: #785300;
  pointer-events: none;
}
.continuous-calendar .calendar-recovery strong { font-size: 10px; }
.continuous-calendar .calendar-recovery span { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) {
  .desktop-resource-toolbar,
  .desktop-schedule-legend { display: none; }
  .mobile-timeline-scroll {
    height: min(68dvh, 720px);
    min-height: 360px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.appointment-route .mobile-time-axis {
    display: block;
    align-self: stretch;
    height: auto;
    overflow: visible;
    padding: 0;
    border-bottom: 0;
  }
  body.appointment-route .mobile-time-axis header {
    position: sticky;
    top: 0;
    z-index: 15;
    width: 100%;
    padding: 0;
    white-space: nowrap;
  }
  body.appointment-route .mobile-resource-column > header {
    position: sticky;
    top: 0;
    z-index: 14;
  }
  .mobile-resource-lane::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
      repeating-linear-gradient(to bottom, transparent 0 66.2px, rgba(86,102,126,.26) 66.2px 67.2px),
      repeating-linear-gradient(to bottom, transparent 0 32.6px, rgba(118,132,151,.12) 32.6px 33.6px);
    content: "";
    pointer-events: none;
  }
  .mobile-schedule-legend i.recovery { border-color: #e0a62d; background: repeating-linear-gradient(135deg, #fff3c9 0 5px, #f7dc85 5px 10px); }
  .mobile-free-block small { overflow: hidden; max-width: 100%; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-recovery-block {
    position: absolute;
    z-index: 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 3px 6px;
    border: 1px solid #e0a62d;
    border-left: 4px solid #c98a00;
    border-radius: 6px;
    background: repeating-linear-gradient(135deg, rgba(255,247,210,.97) 0 6px, rgba(248,222,132,.97) 6px 12px);
    color: #785300;
    pointer-events: none;
  }
  .mobile-recovery-block strong { font-size: 10px; line-height: 1.15; }
  .mobile-recovery-block small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
}