/* The shared Site Visits calendar follows phone safe areas. */
.visit-calendar-page [hidden] { display: none !important; }
.vc-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(72px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  color: #1f2a44;
}
.vc-wrap p { margin: 0; }
.vc-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 16px; margin: 0 0 12px; }
.vc-title h1 { margin: 1px 0 3px; font-size: clamp(24px, 4vw, 34px); line-height: 1.12; }
.vc-title .vc-kicker { color: #9a2730; font-size: 13px; font-weight: 750; }
.vc-title label { display: grid; justify-items: start; gap: 2px; font-size: 13px; line-height: 1.2; font-weight: 700; }
.vc-title select { box-sizing: border-box; height: 44px; min-height: 44px; padding: 5px 8px; color: inherit; font: inherit; font-size: 16px; }
.vc-status { min-height: 1.2em; color: #475569; margin: 0 0 10px; }
.vc-status[data-error] { border-left: 4px solid #b8232a; background: #fff0ef; padding: 10px 12px; color: #84252a; }
.vc-status:empty { display: none; }
#vcFeedback:not(:empty) { color: #215944; font-weight: 700; }
.vc-controls { display: flex; align-items: start; flex-wrap: wrap; gap: 6px 12px; }
.vc-view, .vc-pager, .vc-view-controls, .vc-filter-group, .vc-extras, .vc-recovery { display: flex; flex-wrap: wrap; align-items: start; gap: 5px; }
/* Safari's native menu can shrink min-height alone; keep its actual tap area. */
.vc-view-select, .vc-staff-select { box-sizing: border-box; height: 44px; min-height: 44px; max-width: 100%; padding: 0 6px; border: 1px solid #aebbd0; border-radius: 9px; background: #fff; color: #213651; font: inherit; font-size: 16px; }
.vc-view-select { display: none; min-width: 84px; }
.vc-staff-select { width: clamp(116px, 29vw, 185px); }
.visit-calendar-page .vc-button, .vc-filters summary, .vc-date-jump summary, .vc-activity summary, .vc-detail-disclosure summary {
  box-sizing: border-box; min-height: 44px; min-width: 44px; padding: 8px 10px; display: inline-flex; justify-content: center; align-items: center;
  border-radius: 9px; border: 1px solid #aebbd0; color: #213651; background: #fff; cursor: pointer; text-align: center;
  font: inherit; font-size: 14px; font-weight: 700; text-decoration: none;
}
.visit-calendar-page .vc-button[aria-pressed="true"] { color: #fff; background: #213651; border-color: #213651; }
.visit-calendar-page .vc-button:disabled { cursor: default; opacity: .55; }
.visit-calendar-page .vc-offer-primary { color: #fff; background: #213651; border-color: #213651; }
.vc-offer-intro { margin: 0 0 12px; line-height: 1.5; }
.vc-detail .vc-schedule-sites { padding: 0; margin: 0; list-style: none; }
.vc-schedule-sites li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #dde4ed; }
.vc-schedule-sites li > div { min-width: 0; overflow-wrap: anywhere; }
.vc-schedule-sites li span { display: block; margin-top: 4px; font-size: 13px; color: #536680; }
.vc-schedule-sites .vc-button { flex: none; }
.vc-wrap :focus-visible, .vc-detail :focus-visible { outline: 3px solid #1462a9; outline-offset: 2px; }
.vc-filters { position: relative; }
.vc-filter-body, .vc-date-form { padding: 10px; background: #fff; border: 1px solid #c7d4e3; border-radius: 10px; }
.vc-filter-group + .vc-filter-group { margin-top: 8px; }
#vcClearFilters { margin-top: 8px; }
.vc-date-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.vc-date-form label { grid-column: 1 / -1; font-size: 13px; font-weight: 700; }
.vc-date-form input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font: inherit; font-size: 16px; }
.vc-period-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 6px; }
.vc-period-bar h2 { margin: 0; font-size: 21px; line-height: 1.2; }
.vc-period-bar label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.vc-period-bar input { width: 18px; height: 18px; }
.vc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid #c7d4e3; border-left: 1px solid #c7d4e3; }
.vc-day-head, .vc-month-day { min-width: 0; border-bottom: 1px solid #c7d4e3; border-right: 1px solid #c7d4e3; }
.vc-day-head { text-align: center; padding: 6px 0; background: #edf3fa; font-size: 13px; font-weight: 750; }
.vc-month-day { padding: 5px; min-height: 72px; min-height: clamp(64px, 8svh, 88px); background: #fff; }
.vc-month-day[data-outside] { background: #f5f7fa; }
.vc-month-day[data-today] { box-shadow: inset 0 0 0 2px #376798; }
.visit-calendar-page .vc-day-picker { min-height: 38px; min-width: 38px; margin-bottom: 2px; }
.vc-month-visits { display: grid; gap: 4px; }
.vc-month-visits .vc-event { font-size: 12px; }
.vc-month-visits .vc-event strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.visit-calendar-page .vc-event {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; min-height: 44px;
  padding: 6px 8px; border: 1px solid #abc0db; border-left: 4px solid #355f93; border-radius: 7px;
  background: #e8f0fa; color: #18324e; cursor: pointer; font: inherit; font-size: 14px; text-align: left;
}
.vc-event strong, .vc-event small { display: block; overflow-wrap: anywhere; }
.vc-event small { font-size: 12px; }
.vc-event[data-state="existing"] { border-color: #d1b86d; border-left-color: #876020; background: #fff7e5; color: #624513; }
.vc-event[data-state="done"] { border-color: #8fbeaa; border-left-color: #216448; background: #e6f3ec; color: #214834; }
.vc-event[data-state="cancelled"] { border-color: #afb4be; border-left-color: #596171; background: #edf0f4; color: #394253; }
.vc-event[data-flagged] { border-left-color: #aa2430; }
.vc-flag { color: #8d2632; font-weight: 750; }
.vc-more { min-height: 44px; padding: 5px; }
.vc-dot { display: none; }
.vc-day-list { margin-top: 10px; }
.vc-day-list h3 { margin: 0 0 5px; font-size: 16px; }
.vc-day-list .vc-event + .vc-event { margin-top: 5px; }
.vc-month-picked { margin-top: 12px; scroll-margin-block: 14px 100px; }
.visit-calendar-page .vc-back-to-month { display: none; }
.vc-week-head, .vc-week-row { display: grid; grid-template-columns: 50px repeat(7, minmax(0, 1fr)); }
.vc-week-head span { padding: 7px 2px; text-align: center; font-weight: 700; font-size: 13px; background: #edf3fa; }
.vc-week-group { margin: 16px 0 24px; }
.vc-week-group h3 { margin: 0 0 6px; }
.vc-week-clock, .vc-week-day { position: relative; min-width: 0; height: 500px; height: clamp(420px, calc(100svh - 210px), 560px); }
.vc-week-clock time { position: absolute; left: 1px; font-size: 11px; color: #536680; }
.vc-week-day {
  border: solid #c7d4e3; border-width: 1px 0 1px 1px;
  background: repeating-linear-gradient(to bottom, #fff 0, #fff calc(10% - 1px), #dbe4ef calc(10% - 1px), #dbe4ef 10%);
}
.vc-week-day:last-child { border-right-width: 1px; }
.vc-week-day[data-legacy-hold] { background-color: #fff7e5; background-blend-mode: multiply; }
.vc-open-range { position: absolute; left: 0; right: 0; background: rgba(123, 181, 138, .2); pointer-events: none; }
.vc-week-day .vc-event { position: absolute; min-height: 0; align-items: flex-start; overflow: hidden; font-size: 11px; padding: 3px 4px; }
.vc-week-day .vc-event:focus-visible, .vc-week-day .vc-event:hover { z-index: 2; }
.vc-week-other { margin-top: 10px; }
.vc-week-other .vc-event { margin-top: 5px; }
.vc-empty { padding: 14px 0; color: #475569; }
.vc-extras { margin-top: 20px; }
.vc-clear-empty { margin-top: 8px; }
.vc-activity ol, .vc-detail ol, .vc-detail ul { padding-left: 24px; }
.vc-activity li + li, .vc-detail li + li { margin-top: 8px; }
.vc-detail {
  box-sizing: border-box; margin: 0 0 0 auto; max-width: 100%; width: min(520px, 100%);
  max-height: 100%; height: 100%; max-height: 100dvh; height: 100dvh;
  border: 0; padding: 0; color: #1f2a44; overscroll-behavior: contain;
}
.vc-detail::backdrop { background: rgba(22, 38, 59, .56); }
.vc-detail-inner {
  box-sizing: border-box; min-height: 100%; overflow-wrap: anywhere;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) max(30px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.vc-detail header {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(12px, env(safe-area-inset-top, 0px)) 0 9px; margin-bottom: 10px; border-bottom: 1px solid #c7d4e3; background: #fff;
}
.vc-detail h2 { margin: 0; font-size: 22px; line-height: 1.14; }
.vc-detail h3 { margin-bottom: 6px; font-size: 16px; }
.vc-detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr)); gap: 7px 12px; margin: 12px 0; }
.vc-detail dt { font-weight: 700; }
.vc-detail dd { margin: 2px 0; }
.vc-detail-links { display: flex; flex-wrap: wrap; gap: 5px; }
.visit-calendar-page .vc-detail-links .vc-cancel-action { color: #8d2632; }
.vc-paused { color: #475569; }
.vc-detail-disclosure { margin-top: 10px; }
.vc-report-history li > span { display: block; margin-top: 4px; font-size: 13px; color: #475569; }
.vc-detail time, .vc-activity time { color: #536680; font-size: 12px; }
@media (min-width: 768px) and (min-height: 501px) {
  .vc-week-list:has(.vc-day-list + .vc-day-list) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
}
@media (pointer: coarse), (max-width: 960px) {
  .visit-calendar-page .vc-day-picker { min-height: 44px; min-width: 44px; }
  .visit-calendar-page .vc-back-to-month { display: inline-flex; margin-bottom: 2px; }
}
@media (max-width: 720px), (max-height: 500px) and (max-width: 960px) {
  .vc-view { display: none; }
  .vc-view-select { display: inline-block; }
  .vc-wrap { padding-top: 9px; }
  .vc-title { margin-bottom: 8px; }
  .vc-title h1 { font-size: 24px; }
  .vc-title p:not(.vc-kicker) { font-size: 13px; line-height: 1.25; }
  .vc-controls { gap: 5px 8px; }
  .vc-view-controls, .vc-pager { gap: 4px; }
  .vc-pager .vc-button, .vc-view-controls .vc-button, .vc-filters summary, .vc-date-jump summary { padding-inline: 7px; }
  .vc-controls details[open] { flex-basis: 100%; }
  .vc-period-bar { margin: 8px 0 4px; }
  .vc-period-bar h2 { font-size: 19px; }
  .vc-day-list { margin-top: 6px; }
  .vc-month-day { min-height: 45px; padding: 0; }
  .vc-month-visits { display: none; }
  .visit-calendar-page .vc-day-picker { min-width: 0; min-height: 44px; width: 100%; padding: 2px; border: none; border-radius: 0; flex-direction: column; gap: 2px; margin: 0; }
  .vc-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: #355f93; }
  .vc-day-picker[aria-pressed="true"] .vc-dot { background: #fff; }
}
@media (max-width: 360px) {
  .vc-month { margin-inline: -16px; }
}
@media (max-height: 500px) and (min-width: 550px) and (max-width: 960px) {
  .vc-wrap { padding-top: 6px; }
  .vc-title .vc-kicker { display: none; }
  .vc-title label { display: flex; align-items: center; gap: 6px; }
  .vc-period-bar { margin-top: 6px; }
}
@media (max-height: 500px) and (min-width: 550px) and (max-width: 820px) {
  /* Start the appointments beside the tools on sideways phones so the first
     appointment clears the fixed navigation even with a bottom safe area. */
  .vc-wrap:has(.vc-agenda-list, .vc-week-list, [data-vc-view="day"][aria-pressed="true"]):has(#vcCalendar:not([hidden])) {
    display: grid; grid-template-columns: minmax(164px, .64fr) minmax(0, 1.36fr); gap: 6px 12px; align-items: start;
  }
  .vc-wrap > .vc-status { grid-area: 1 / 1 / 2 / 3; }
  .vc-wrap > #vcFeedback { grid-area: 5 / 1 / 6 / 3; }
  .vc-title { grid-area: 2 / 1; }
  .vc-controls { grid-area: 3 / 1; }
  #vcCalendar { grid-area: 2 / 2 / span 2; min-width: 0; }
  .vc-extras { grid-area: 4 / 1 / 5 / 3; }
  .vc-wrap:has(.vc-agenda-list, .vc-week-list, [data-vc-view="day"][aria-pressed="true"]) .vc-title { display: flex; flex-wrap: wrap; gap: 5px; }
}