/* Calendar command panel and compact time rails. Uses the studio's theme tokens. */
.calendar-command-panel {
  margin-bottom: 16px; padding: 20px 22px 12px;
  border: 1px solid var(--border-subtle); border-radius: 18px;
  background: linear-gradient(115deg, var(--surface-solid), var(--surface-elevated));
  box-shadow: 0 6px 24px #0000000a;
}
#view-calendar .calendar-command-panel .calendar-toolbar { padding: 0 0 16px; gap: 16px 24px; }
#view-calendar .calendar-toolbar :is(.date-display,.bl-select-trigger,button,.calendar-toolbar-menu > summary) {
  height: 44px; min-height: 44px; font-size: 14px; border-radius: 11px;
}
#view-calendar .calendar-toolbar #calendar-date-picker .date-display {
  font-family: var(--font-heading, inherit); font-size: 19px; font-weight: 650;
  min-width: 220px; padding: 8px 12px; letter-spacing: -.35px;
}
#view-calendar .calendar-toolbar #today-btn { font-size: 14px; padding: 0 14px; }
.calendar-date-navigation { gap: 4px; }
.calendar-toolbar-actions { flex-wrap: wrap; gap: 8px; }
#view-calendar .calendar-toolbar .calendar-staff-filter { flex: 0 1 200px; width: 200px; }
#view-calendar .calendar-toolbar .calendar-staff-filter .bl-select-trigger { background: var(--surface-solid); }
#view-calendar .calendar-toolbar :is(#add-day-staff-btn,#new-appointment-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 14px; white-space: nowrap; font-size: 14px; font-weight: 600;
}
#view-calendar .calendar-toolbar #add-day-staff-btn { background: var(--surface-solid); border: 1px solid var(--border); }
#view-calendar .calendar-toolbar #new-appointment-btn { box-shadow: 0 4px 12px #b52e2c24; }
.bl-action-icon { width: 21px; height: 21px; flex: 0 0 21px; }
.calendar-sales-menu > summary { border-color: var(--border); background: var(--surface-solid); color: var(--text-primary); font-weight: 600; padding: 8px 14px; }
.menu-chevron { margin-left: 5px; color: var(--text-muted); }
.calendar-toolbar-menu #calendar-status-count { font-size: 12px; }
.calendar-menu-panel { background: var(--surface-solid); border-color: var(--border); box-shadow: var(--shadow-dialog); }
.calendar-sale-options { width: 300px; padding: 10px; }
.calendar-sale-caption { margin: 8px 10px 10px; color: var(--text-muted); font-size: 12px; }
#view-calendar .calendar-toolbar .calendar-sale-options > button {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  text-align: left; width: 100%; height: auto; min-height: 62px;
  border: 0; background: transparent; padding: 12px; color: var(--text-primary);
}
.calendar-sale-options > button .bl-action-icon { width: 24px; height: 24px; flex-basis: 24px; color: var(--accent); }
.calendar-sale-options > button span { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
.calendar-sale-options > button small { font-size: 12px; color: var(--text-muted); font-weight: 400; }
#view-calendar .calendar-toolbar .calendar-sale-options > button:hover { background: var(--surface-hover); }
#view-calendar .calendar-toolbar .calendar-sale-options > .calendar-sales-history { margin-top: 6px; border-top: 1px solid var(--border-subtle); border-radius: 0 0 8px 8px; min-height: 50px; }
.calendar-command-panel .calendar-context-bar { border-top: 1px solid var(--border-subtle); padding-top: 10px; margin: 0; min-height: 38px; align-items: center; }
.calendar-command-panel .calendar-context-bar > p { font-size: 14px; color: var(--text-secondary); }
.calendar-command-panel .calendar-legend-menu > summary { font-size: 13px; padding: 6px 0 6px 12px; }
.calendar-command-panel .calendar-team-details { font-size: 13px; margin: 8px 0 0; }
.calendar-command-panel .calendar-team-details > summary { padding: 5px 0; color: var(--text-secondary); }
.calendar-command-panel .calendar-staff-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.6; padding: 12px 16px; border-radius: 11px; background: var(--surface-hover); }
.calendar-command-panel .calendar-staff-notice .ghost { flex-shrink: 0; font-size: 14px; padding: 8px 12px; color: var(--accent); }
#view-calendar .calendar-grid { --cal-time-col-width: 62px; align-content: start; }
#view-calendar .cal-time { justify-content: center; border-bottom: 0; overflow: visible; }
#view-calendar .cal-time:has(.cal-time-label) { z-index: 5; }
#view-calendar .cal-time-label { position: absolute; top: 0; display: block; line-height: 18px; font-size: 12px; }
#view-calendar .cal-time:not(.minor) { color: var(--text-primary); }
#view-calendar .cal-time .cal-hour { font-size: 17px; font-weight: 650; letter-spacing: -.4px; }
#view-calendar .cal-time .cal-hour sup { font-size: 10px; font-weight: 500; vertical-align: super; margin-left: 2px; color: var(--text-secondary); }
#view-calendar .cal-time.minor { color: var(--text-muted); }
#view-calendar .cal-time--end { justify-content: center; }
#view-calendar .cal-header-cell { min-height: 68px; }
#view-calendar .cal-staff-name { font-size: 16px; }
#view-calendar .cal-staff-role { font-size: 12px; }
#view-calendar .calendar-empty { padding: 48px 24px; font-size: 16px; line-height: 1.6; }
.calendar-empty-actions { gap: 16px; margin-top: 18px; }
.calendar-empty-actions button { font-size: 14px; min-height: 44px; }
.calendar-empty-note, .schedule-empty-note { font-size: 15px; line-height: 1.7; }
#schedule-dialog .dialog-header h2 { font-size: 20px; line-height: 1.45; }
#schedule-dialog #schedule-date-label { white-space: normal; }
@media (max-width: 1500px) and (min-width: 701px) {
  #view-calendar .calendar-toolbar-actions { width: 100%; margin-left: 0; }
  #view-calendar .calendar-toolbar .calendar-staff-filter { margin-right: auto; order: -1; }
}
@media (max-width: 700px) {
  .calendar-command-panel { padding: 14px 12px 10px; border-radius: 14px; margin-bottom: 12px; }
  #view-calendar .calendar-command-panel .calendar-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 12px; }
  .calendar-date-navigation { grid-template-columns: 64px 28px 28px minmax(0,1fr); gap: 0; width: 100%; }
  #view-calendar .calendar-toolbar #calendar-date-picker .date-display { min-width: 0; font-size: 14px; padding: 4px; letter-spacing: -.25px; white-space: normal; line-height: 1.3; }
  #view-calendar .calendar-toolbar #today-btn { padding: 0 8px; font-size: 12px; }
  .calendar-toolbar-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; width: 100%; gap: 8px; }
  #view-calendar .calendar-toolbar .calendar-staff-filter { width: 100%; min-width: 0; grid-column: 1 / 3; grid-row: 1; }
  .calendar-status-menu { grid-column: 3; grid-row: 1; }
  .calendar-status-menu > summary > span { display: none; }
  #view-calendar .calendar-toolbar #add-day-staff-btn { grid-column: 1; grid-row: 2; font-size: 13px; padding: 0 8px; }
  #view-calendar .calendar-toolbar #new-appointment-btn { grid-column: 2; grid-row: 2; font-size: 13px; padding: 0 8px; }
  .calendar-actions-menu { grid-column: 3; grid-row: 2; }
  .calendar-sales-menu { grid-column: 1 / 4; grid-row: 3; }
  .calendar-sales-menu > summary { justify-content: center; }
  .calendar-command-panel .calendar-menu-panel { right: 0; max-width: calc(100vw - 48px); }
  .calendar-command-panel .calendar-context-bar { align-items: flex-start; gap: 8px; }
  .calendar-command-panel .calendar-context-bar > p { font-size: 12px; line-height: 1.6; padding: 3px 0 0; }
  .calendar-command-panel .calendar-legend-menu > summary { font-size: 12px; white-space: nowrap; }
  .calendar-command-panel .calendar-staff-notice { flex-direction: column; align-items: flex-start; font-size: 13px; gap: 6px; padding: 10px 12px; }
  .calendar-command-panel .calendar-staff-notice .ghost { padding-left: 0; }
  #view-calendar .calendar-grid { --cal-time-col-width: 48px; }
  #view-calendar .cal-time .cal-hour { font-size: 15px; }
  #view-calendar .cal-time .cal-hour sup { font-size: 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .calendar-sale-options button { transition: background-color 140ms ease; }
}

/* Small appointments keep the client readable without stretching their time. */
#calendar-grid .appt.is-dense-card { display: grid; grid-template-columns: minmax(0,1fr) max-content; align-content: start; padding: 2px 28px 2px 6px; gap: 0 8px; }
#calendar-grid .appt.is-dense-card .appt-row-meta { grid-column: 2; grid-row: 1; min-height: 13px; padding: 0; }
#calendar-grid .appt.is-dense-card .appt-time { font-size: 10px; line-height: 13px; }
#view-calendar #calendar-grid .appt.is-dense-card .appt-client-link { display: block; grid-column: 1; grid-row: 1; font-size: 12px; line-height: 14px; min-height: 0; padding: 0; }
#view-calendar #calendar-grid .appt.is-dense-card .appt-service { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 11px; line-height: 13px; white-space: nowrap; }
#calendar-grid .appt:is(.is-dense-card,.is-inline-card) :is(.appt-status-chip,.training-debt-badge,.joint-badge,.appt-outside-warning) { display: none; }
#calendar-grid .appt.is-inline-card { display: grid; grid-template-columns: max-content minmax(0,1fr) minmax(0,max-content); align-items: start; column-gap: 7px; padding: 0 24px 0 4px; }
#calendar-grid .appt.is-inline-card .appt-row-meta { display: contents; }
#calendar-grid .appt.is-inline-card .appt-time { font-size: 10px; line-height: 15px; }
#calendar-grid .appt.is-inline-card .appt-client-link { display: block; font-size: 11px; line-height: 15px; padding: 0; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#calendar-grid .appt.is-inline-card :is(.appt-service,.appt-phone) { display: none; }
#calendar-grid .appt.is-inline-card .appt-drag-handle { top: 0; right: 2px; width: 16px; height: 16px; min-height: 0; padding: 0; font-size: 13px; }

/* Navigation and view preferences share the command panel's type and spacing. */
#app .topbar { background: linear-gradient(155deg, var(--surface-solid), var(--surface-elevated)); }
#app .topbar .tab { min-height: 44px; padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 500; gap: 12px; }
#app .topbar .nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
#calendar-navigation .calendar-month-toolbar { margin-bottom: 12px; }
#calendar-navigation .calendar-month-toolbar strong { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
#calendar-navigation .calendar-month-toolbar .icon-btn { width: 32px; min-width: 32px; height: 32px; min-height: 32px; border-radius: 9px; font-size: 22px; }
#calendar-navigation .calendar-month-weekdays { font-size: 12px; margin-bottom: 8px; }
#calendar-navigation .calendar-month-day { min-height: 32px; height: 32px; font-size: 13px; border-radius: 9px; font-variant-numeric: tabular-nums; }
#calendar-navigation .calendar-month-day[aria-pressed="true"] { font-weight: 650; box-shadow: 0 3px 9px #b52e2c24; }
#calendar-navigation > summary, #calendar-navigation .calendar-search-disclosure > summary { font-size: 14px; padding: 12px 4px; }
#calendar-navigation .calendar-search-disclosure { margin-top: 14px; padding-top: 2px; }
#calendar-navigation .calendar-client-search :is(label,input,p,button) { font-size: 13px; line-height: 1.5; }
#calendar-navigation .calendar-client-search input { min-height: 42px; border-radius: 10px; }
#app .topbar :is(.theme-toggle,#notifications-btn,#logout-btn) { font-size: 13px; min-height: 40px; padding: 9px 12px; border-radius: 10px; }
#app .topbar #signed-in-name { font-size: 13px; padding: 12px 12px 0; }
#calendar-status-menu .calendar-display-panel {
  width: 288px; max-height: min(560px, 70dvh); overflow-y: auto;
  padding: 16px; gap: 0; border-radius: 16px;
  background: var(--surface-solid); border: 1px solid var(--border);
  box-shadow: 0 16px 40px #00000024, 0 3px 10px #0000000a;
  scrollbar-width: thin;
}
.calendar-display-heading { padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.calendar-display-heading h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; letter-spacing: -.3px; }
.calendar-display-heading p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
#calendar-status-menu .calendar-scale-filter { grid-template-columns: minmax(0,1fr) 112px; margin: 12px 0; font-size: 14px; color: var(--text-primary); }
#calendar-status-menu .calendar-scale-filter .bl-select-trigger { background: var(--surface-elevated); font-size: 14px; }
#calendar-status-menu .calendar-menu-caption { padding: 12px 0 6px; border-color: var(--border-subtle); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
#calendar-status-menu #calendar-status-options { position: static; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 2px; }
#calendar-status-options label {
  position: relative; display: flex; align-items: center; min-height: 36px; gap: 10px;
  padding: 7px 8px; border-radius: 10px; font-size: 14px; line-height: 1.5;
  color: var(--text-primary); cursor: pointer;
}
#calendar-status-options label:hover { background: var(--surface-hover); }
#calendar-status-options label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
#calendar-status-options input[type="checkbox"] {
  appearance: none; position: relative; flex: 0 0 34px;
  width: 34px; height: 20px; min-height: 0; padding: 0; margin: 0;
  border: 1px solid var(--text-muted); border-radius: 20px; background: var(--surface-hover);
  cursor: pointer; outline: none;
}
#calendar-status-options input[type="checkbox"]::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--text-muted);
}
#calendar-status-options input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
#calendar-status-options input[type="checkbox"]:checked::before { transform: translateX(14px); background: #fff; }
#view-calendar .calendar-toolbar #calendar-status-options [data-calendar-all-statuses] {
  margin-top: 8px; width: 100%; min-height: 40px; height: 40px;
  border: 1px solid var(--border); background: var(--surface-elevated); color: var(--text-primary); font-size: 14px;
}
#view-calendar .calendar-toolbar #calendar-status-options [data-calendar-all-statuses]:hover { background: var(--surface-hover); }
@media (min-width: 1180px) {
  #app .topbar { width: 252px; padding: 22px 16px 16px; gap: 10px; }
  #app > main { margin-left: 252px; }
  #app .topbar .brand { margin-bottom: 14px; padding-left: 10px; }
  #app .topbar .tabs { gap: 4px; padding-top: 2px; }
  #app .topbar > :not(.tabs) { flex-shrink: 0; }
}
@media (max-width: 700px) {
  #calendar-status-menu .calendar-display-panel {
    position: fixed; top: auto; right: 16px; bottom: 16px;
    width: calc(100vw - 32px); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
    padding: 16px; border-radius: 14px;
  }
  #app .topbar :is(.theme-toggle,#notifications-btn,#logout-btn) { padding: 8px; }
  #app .topbar #signed-in-name { padding: 0; }
}
@media (pointer: coarse) {
  #calendar-navigation .calendar-month-day { min-height: 40px; height: 40px; }
  #calendar-status-options label { min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  #calendar-status-options input[type="checkbox"], #calendar-status-options input[type="checkbox"]::before { transition: background-color 140ms ease, transform 140ms ease; }
}
@media (forced-colors: active) {
  #calendar-status-options input[type="checkbox"] { appearance: auto; }
  #calendar-status-options input[type="checkbox"]::before { display: none; }
}

/* Payment information remains visible in the appointment's actual time bounds. */
#view-calendar .calendar-legend-menu > summary { font-size: 14px; padding: 8px 10px; }
#view-calendar .calendar-payment-legend-panel { width: 288px; padding: 16px; border-radius: 16px; box-shadow: 0 16px 40px #00000024; }
#view-calendar .calendar-payment-legend-panel h2 { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); font-size: 18px; line-height: 1.4; font-weight: 650; }
#view-calendar .calendar-legend-menu .appt-payment-legends { gap: 0; }
#view-calendar .calendar-legend-menu .appt-payment-legend { min-height: 34px; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
#view-calendar .calendar-legend-menu .appt-payment-legend::before { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
#view-calendar :is([data-payment-tone="unpaid"],[data-payment-tone="partial"]) { --payment-color: #ef8c92; --payment-text: #ffe0e2; --payment-surface: #402c34; }
:root[data-theme="light"] #view-calendar :is([data-payment-tone="unpaid"],[data-payment-tone="partial"]) { --payment-color: #c85863; --payment-text: #822c38; --payment-surface: #fcebed; }
#view-calendar #calendar-grid .appt:is([data-payment-tone="unpaid"],[data-payment-tone="partial"]):not(.is-filtered) { background: var(--payment-surface); }
#view-calendar #calendar-grid .appt .appt-row-meta { order: 0; }
#view-calendar #calendar-grid .appt .appt-client-link { order: 1; }
#view-calendar #calendar-grid .appt .appt-service { order: 2; }
#view-calendar #calendar-grid .appt .appt-payment-chip {
  display: block; order: 3; flex-shrink: 0; max-width: 100%; width: fit-content;
  padding: 1px 5px; border: 1px solid var(--payment-color); border-radius: 4px;
  background: var(--payment-surface); color: var(--payment-text);
  font-size: 11px; font-weight: 500; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-calendar #calendar-grid .appt :is(.appt-phone,.appt-outside-warning,.training-debt-badge,.joint-badge) { order: 4; }
#view-calendar #calendar-grid .appt.is-dense-card .appt-payment-chip { grid-column: 1 / -1; grid-row: 3; font-size: 10px; line-height: 13px; padding: 0 4px; }
#view-calendar #calendar-grid .appt.is-inline-card .appt-payment-chip { grid-column: 3; grid-row: 1; font-size: 10px; line-height: 13px; padding: 0 3px; max-width: 130px; }
#view-calendar #calendar-grid .appt.is-inline-card :is(.appt-service,.appt-phone) { display: none; }
#view-calendar #calendar-grid .appt.is-inline-card .appt-client-link { grid-column: 2; grid-row: 1; }
#view-calendar #calendar-grid .appt.is-inline-card .appt-time { grid-column: 1; grid-row: 1; }

/* Compact calendar controls: date/actions first, filters/context second. */
/* One continuous, compact staff band, including both time-column corners. */
#view-calendar #calendar-grid {--staff-band:linear-gradient(180deg,#292d35,#252931);--staff-band-line:#ffffff12;--staff-band-text:#f2f1ef;--staff-band-accent:#b55c64}
:root[data-theme="light"] #view-calendar #calendar-grid {--staff-band:linear-gradient(180deg,#fffefa,#f8f6f2);--staff-band-line:#dfddd8;--staff-band-text:#292b30;--staff-band-accent:#a94753}
#view-calendar #calendar-grid .cal-header-cell {
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:42px;min-height:42px;
  padding:0 12px;background:var(--staff-band);border-left:0;border-right:0;
  border-bottom:1px solid var(--staff-band-line);box-shadow:none;
}
#view-calendar #calendar-grid .cal-header-cell.time-col {padding:0}
#view-calendar #calendar-grid .cal-staff-name {flex:0 1 auto;min-width:0;max-width:100%;font-size:16px;font-weight:650;line-height:20px;text-align:center;color:var(--staff-band-text)}
#view-calendar #calendar-grid .cal-header-cell:not(.time-col)::after {content:"";position:absolute;left:50%;bottom:5px;width:24px;height:2px;transform:translateX(-50%);border-radius:2px;background:var(--staff-band-accent)}
#view-calendar #calendar-grid .cal-staff-role {display:none}

#view-calendar .calendar-command-panel {
  padding: 10px 14px 8px; margin-bottom: 10px; border-radius: 14px;
  border-color: #ffffff12; border-top-color: #a73a4859;
  background: radial-gradient(ellipse at 100% 0, #9d24331a, transparent 55%), #191d25;
  box-shadow: 0 4px 14px #00000014;
}
:root[data-theme="light"] #view-calendar .calendar-command-panel {
  background: radial-gradient(ellipse at 100% 0, #ae31430a, transparent 55%), #fffdfa;
  border-color: #392c2414; border-top-color: #a73a4840; box-shadow: 0 4px 14px #392c2408;
}
#view-calendar .calendar-command-panel .calendar-toolbar {
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:12px; padding:0; margin:0;
}
#view-calendar .calendar-command-panel .calendar-toolbar-actions {
  display:flex; flex-wrap:nowrap; width:auto; margin-left:auto; gap:8px; flex-shrink:0;
}
#view-calendar .calendar-command-panel .calendar-date-navigation {display:flex; width:auto; gap:4px; min-width:0}
#view-calendar .calendar-command-panel .calendar-date-navigation #calendar-date-picker {order:2; width:auto; min-width:0}
#view-calendar .calendar-command-panel #next-day {order:3}
#view-calendar .calendar-command-panel .calendar-toolbar :is(.date-display,.bl-select-trigger,#today-btn,#prev-day,#next-day,#new-appointment-btn,.calendar-toolbar-menu > summary) {height:38px;min-height:38px;border-radius:9px;font-size:14px}
#view-calendar .calendar-command-panel #calendar-date-picker .date-display {min-width:155px;padding:4px 8px;font-size:21px;letter-spacing:-.4px;white-space:nowrap;background:transparent;border-color:transparent}
#view-calendar .calendar-command-panel #today-btn {padding:0 12px;font-size:13px;background:transparent;border-color:var(--border-subtle)}
#view-calendar .calendar-command-panel :is(#prev-day,#next-day) {width:28px;min-width:28px;padding:0;font-size:22px}
#view-calendar .calendar-command-panel #new-appointment-btn {padding:0 16px;box-shadow:0 3px 10px #a3293d20}
#view-calendar .calendar-command-panel .calendar-sales-menu > summary {padding:0 12px;background:transparent;border-color:var(--border-subtle)}
#view-calendar .calendar-command-panel .calendar-actions-menu > summary {width:32px;padding:0}
#view-calendar .calendar-command-panel .calendar-secondary-toolbar {flex-wrap:wrap;gap:6px 16px;margin-top:8px;padding-top:6px;border-top:1px solid var(--border-subtle)}
#view-calendar .calendar-filter-controls {display:flex;align-items:center;gap:6px;min-width:0;flex-shrink:0}
#view-calendar .calendar-command-panel .calendar-staff-filter {flex:none;width:190px;min-width:0;order:0;margin:0}
#view-calendar .calendar-command-panel .calendar-staff-filter .bl-select-trigger {height:32px;min-height:32px;padding:0 10px;background:transparent;border-color:transparent;font-size:13px}
#view-calendar .calendar-command-panel #calendar-status-menu > summary {height:32px;min-height:32px;padding:0 8px;font-size:13px}
#view-calendar .calendar-command-panel #calendar-status-menu > summary > span {display:inline}
#view-calendar .calendar-command-panel #calendar-status-count {font-size:11px;color:var(--text-muted)}
#view-calendar .calendar-command-panel #add-day-staff-btn {height:32px;min-height:32px;width:32px;padding:0;border-color:var(--border-subtle);background:transparent;order:2}
#view-calendar .calendar-command-panel #add-day-staff-btn > span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#view-calendar .calendar-command-panel .bl-action-icon {width:18px;height:18px;flex-basis:18px}
#view-calendar .calendar-command-panel .calendar-context-bar {flex:1;justify-content:flex-end;flex-wrap:wrap;gap:4px 12px;min-height:28px;padding:0;margin:0;border:0}
#view-calendar .calendar-command-panel #calendar-visits-count {margin:0;padding:0;font-size:12px;line-height:1.4;color:var(--text-muted)}
#view-calendar .calendar-command-panel .calendar-team-details {position:relative;margin:0;font-size:12px}
#view-calendar .calendar-command-panel :is(.calendar-team-details,.calendar-legend-menu) > summary {height:28px;min-height:28px;padding:0 4px;font-size:12px;white-space:nowrap;color:var(--text-secondary)}
#view-calendar .calendar-command-panel .calendar-team-details > summary::before {content:'›';font-size:16px;transition:transform .15s ease}
#view-calendar .calendar-command-panel .calendar-team-details[open] > summary::before {transform:rotate(90deg)}
#view-calendar .calendar-command-panel .calendar-staff-notices {position:absolute;right:0;top:calc(100% + 8px);width:360px;max-width:calc(100vw - 40px);margin:0;padding:8px;z-index:var(--z-floating)}
#view-calendar .calendar-command-panel .calendar-staff-notice {padding:10px;gap:10px;font-size:13px;line-height:1.4;background:transparent}
#view-calendar .calendar-command-panel .calendar-staff-notice .ghost {padding:6px 8px;font-size:13px}
@media (max-width:1179px) {
  #view-calendar .calendar-command-panel .calendar-context-bar {justify-content:flex-start}
}
@media (max-width:700px) {
  #view-calendar .calendar-command-panel {padding:10px;margin-bottom:8px}
  #view-calendar .calendar-command-panel > .calendar-toolbar:first-child {flex-wrap:wrap;gap:8px}
  #view-calendar .calendar-command-panel .calendar-date-navigation {flex:1;justify-content:space-between}
  #view-calendar .calendar-command-panel #calendar-date-picker .date-display {min-width:135px;font-size:19px}
  #view-calendar .calendar-command-panel .calendar-toolbar-actions {width:100%;justify-content:flex-end}
  #view-calendar .calendar-command-panel #new-appointment-btn {margin-right:auto}
  #view-calendar .calendar-command-panel .calendar-secondary-toolbar {gap:4px}
  #view-calendar .calendar-filter-controls {width:100%}
  #view-calendar .calendar-command-panel .calendar-staff-filter {flex:1;width:auto}
  #view-calendar .calendar-command-panel .calendar-context-bar {flex-basis:100%;gap:4px 10px}
  #view-calendar .calendar-command-panel .calendar-team-details .calendar-staff-notices {right:auto;left:0;max-width:calc(100vw - 48px)}
}