/* Compact shared date navigation: public, management, creation, and embeds. */
[data-shift-browser] { min-width: 0; }
[data-shift-browser] [hidden] { display: none !important; }
.shift-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.shift-view-toolbar { margin-bottom: 1rem; }
.shift-view-toolbar .shift-toolbar { column-gap: .5rem; }
.shift-filter-label { color: var(--cf-ink); }
.shift-filter-help { margin: .25rem 0 .6rem; }
.shift-view-options, .shift-period-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.shift-all-help { margin: .5rem 0 0; }
.shift-period-toolbar { margin-bottom: 1rem; }
.shift-period-toolbar h6 { margin: 0 0 .25rem; font-size: 1rem; }
/* Utility buttons stay 32px high on mobile; never stretch all .btn controls. */
.shift-toolbar .btn, .shift-calendar .btn, .shift-empty .btn {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  height: 32px; min-height: 0; padding: 0 .65rem; line-height: 1.2;
  font-family: inherit; font-size: .875rem; font-weight: 700;
  border: 1px solid var(--cf-ink); border-radius: 6px; background: var(--cf-surface); color: var(--cf-ink);
}
.shift-toolbar .btn:hover, .shift-calendar .btn:hover, .shift-empty .btn:hover { background: var(--cf-ink); color: var(--cf-surface); }
.shift-toolbar .btn:disabled { opacity: .5; }
/* Keep range navigation identical to the calendar toggle at every breakpoint,
   including where the shared mobile .btn-sm rule uses smaller text. */
.shift-toolbar .btn[data-shift-calendar-toggle], .shift-toolbar .btn[data-shift-period-step] {
  font-size: .875rem !important; padding: 0 .75rem; white-space: nowrap;
}
.shift-view-options .filter-pill { min-height: 0; height: 32px; padding: 0 .75rem; line-height: 1.2; }
[data-shift-period-step], [data-shift-month] { min-width: 32px; }
.shift-calendar { width: 100%; max-width: 23rem; margin: 0 auto 1rem; padding: 1rem; background: var(--cf-surface); border: 2px solid var(--cf-border); border-radius: 8px; }
.shift-calendar-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.shift-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem 0; }
.shift-calendar-weekday { text-align: center; color: var(--cf-muted); padding: .25rem 0; }
.shift-calendar-day { position: relative; min-width: 0; height: 38px; padding: .2rem 0; border: 0; border-radius: 0; color: var(--cf-ink); background: transparent; font: inherit; font-size: .875rem; }
.shift-calendar-day.is-selected { background: var(--cf-brass-soft); }
.shift-calendar-day.is-anchor { box-shadow: inset 0 0 0 2px var(--cf-ink); border-radius: 6px; font-weight: 700; }
.shift-calendar-day:hover { background: var(--cf-page); color: var(--cf-ink); }
.shift-calendar-day:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: -2px; z-index: 1; }
/* Shape and fill distinguish availability independently of theme/color vision. */
.shift-dot { position: relative; display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; vertical-align: middle; margin-right: .35rem; }
.shift-dot.is-open { background: var(--cf-ink); border-radius: 50%; }
.shift-dot.is-unavailable { border: 1px solid var(--cf-muted); border-radius: 1px; background: var(--cf-surface); }
.shift-dot.is-unavailable::after { content: ''; position: absolute; top: 2px; left: -1px; width: 7px; border-top: 1px solid var(--cf-muted); transform: rotate(-45deg); }
.shift-calendar-day .shift-dot { display: block; margin: .15rem auto 0; }
.shift-calendar-day .shift-dot.is-empty { visibility: hidden; }
.shift-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; border-top: 1px solid var(--cf-border); padding-top: .65rem; margin-top: .75rem; color: var(--cf-ink); }
.shift-legend > span { display: flex; align-items: center; }
.shift-calendar-hint { text-align: center; margin: .5rem 0 0; }
.shift-empty { text-align: center; border: 2px solid var(--cf-border); border-radius: 8px; background: var(--cf-surface); padding: 1.5rem; }
.shift-footer-toolbar { margin-top: 1rem; }
.shift-manage-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.shift-manage-header h4 { overflow-wrap: anywhere; }
.shift-manage-main { min-width: 0; flex: 1 1 12rem; }
.shift-schedule-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.shift-schedule-inputs > div { min-width: 0; }
.shift-schedule-inputs input { min-width: 0; max-width: 100%; }
.calendar-grid button.calendar-day { font: inherit; background: var(--cf-surface); border: 1px solid var(--cf-border); color: var(--cf-ink); }
.calendar-grid button.calendar-day.selected { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); }
@media (max-width: 575.98px) {
  .shift-period-toolbar [data-shift-period-actions] { width: 100%; justify-content: space-between; }
  .shift-schedule-inputs { grid-template-columns: 1fr; }
  #shift_lists_container .border-end { border-right: 0 !important; }
}