/*
 * Calendar — Ui::Calendar::DayComponent / MonthComponent /
 * SelectorComponent. The Stimulus controller (calendar-selector) keys
 * off the .calendar-day, .calendar-day--*, .calendar-month, and
 * .calendar-selector class names — they are kept in lockstep with this
 * file. See app/javascript/controllers/calendar_selector_controller.js.
 */

/* ------------------------------------------------------------------ */
/* Shared date navigation                                              */
/* ------------------------------------------------------------------ */

.date-nav {
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.date-nav__button,
.date-nav__today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-medium);
  background-color: var(--color-surface);
  color: var(--color-ink-lighter);
  transition: background-color 150ms ease, color 150ms ease;
}

.date-nav__button {
  padding-block: 0.5rem;
  inline-size: 2.25rem;
  min-block-size: 2.5rem;
}

.date-nav__button:hover,
.date-nav__today:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
}

.date-nav__button:focus,
.date-nav__today:focus {
  position: relative;
  z-index: 1;
}

.date-nav__button--previous {
  border-inline-end-width: 0;
  border-start-start-radius: 0.375rem;
  border-end-start-radius: 0.375rem;
}

.date-nav__button--next {
  border-inline-start-width: 0;
  border-start-end-radius: 0.375rem;
  border-end-end-radius: 0.375rem;
}

.date-nav__today {
  display: none;
  padding: 0.5rem 0.875rem;
  border-inline-width: 1px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-light);
}

.date-nav__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.date-nav__mobile-divider {
  position: relative;
  margin-inline: -1px;
  inline-size: 1px;
  block-size: 1.25rem;
  background-color: var(--color-border-medium);
}

/* ------------------------------------------------------------------ */
/* Calendar entry palette                                              */
/* ------------------------------------------------------------------ */

.calendar-entry {
  color: var(--color-ink-inverted);
  box-shadow: 0 1px 2px 0 var(--calendar-entry-shadow, oklch(var(--lch-black) / 5%));
}

.calendar-entry--red { --calendar-entry-shadow: rgb(var(--palette-red-200)); background-image: linear-gradient(to right, var(--color-danger), rgb(var(--palette-rose-500))); }
.calendar-entry--red:hover { background-image: linear-gradient(to right, var(--color-danger-strong), var(--color-critical)); }
.calendar-entry--orange { --calendar-entry-shadow: rgb(var(--palette-orange-200)); background-image: linear-gradient(to right, rgb(var(--palette-orange-500)), rgb(var(--palette-amber-500))); }
.calendar-entry--orange:hover { background-image: linear-gradient(to right, rgb(var(--palette-orange-600)), rgb(var(--palette-amber-600))); }
.calendar-entry--amber { --calendar-entry-shadow: rgb(var(--palette-amber-200)); background-image: linear-gradient(to right, rgb(var(--palette-amber-500)), var(--color-warning)); }
.calendar-entry--amber:hover { background-image: linear-gradient(to right, rgb(var(--palette-amber-600)), rgb(var(--palette-yellow-600))); }
.calendar-entry--yellow { --calendar-entry-shadow: rgb(var(--palette-yellow-200)); color: rgb(var(--palette-yellow-900)); background-image: linear-gradient(to right, rgb(var(--palette-yellow-400)), rgb(var(--palette-amber-400))); }
.calendar-entry--yellow:hover { background-image: linear-gradient(to right, var(--color-warning), rgb(var(--palette-amber-500))); }
.calendar-entry--lime { --calendar-entry-shadow: rgb(var(--palette-lime-200)); background-image: linear-gradient(to right, rgb(var(--palette-lime-500)), var(--color-success)); }
.calendar-entry--lime:hover { background-image: linear-gradient(to right, rgb(var(--palette-lime-600)), var(--color-success-strong)); }
.calendar-entry--green { --calendar-entry-shadow: rgb(var(--palette-green-200)); background-image: linear-gradient(to right, var(--color-success), rgb(var(--palette-emerald-500))); }
.calendar-entry--green:hover { background-image: linear-gradient(to right, var(--color-success-strong), rgb(var(--palette-emerald-600))); }
.calendar-entry--emerald { --calendar-entry-shadow: rgb(var(--palette-emerald-200)); background-image: linear-gradient(to right, rgb(var(--palette-emerald-500)), rgb(var(--palette-teal-500))); }
.calendar-entry--emerald:hover { background-image: linear-gradient(to right, rgb(var(--palette-emerald-600)), rgb(var(--palette-teal-600))); }
.calendar-entry--cyan { --calendar-entry-shadow: rgb(var(--palette-cyan-200)); background-image: linear-gradient(to right, rgb(var(--palette-cyan-500)), rgb(var(--palette-sky-500))); }
.calendar-entry--cyan:hover { background-image: linear-gradient(to right, rgb(var(--palette-cyan-600)), rgb(var(--palette-sky-600))); }
.calendar-entry--sky { --calendar-entry-shadow: rgb(var(--palette-sky-200)); background-image: linear-gradient(to right, rgb(var(--palette-sky-500)), var(--color-info)); }
.calendar-entry--sky:hover { background-image: linear-gradient(to right, rgb(var(--palette-sky-600)), var(--color-info-strong)); }
.calendar-entry--blue { --calendar-entry-shadow: rgb(var(--palette-blue-200)); background-image: linear-gradient(to right, var(--color-info), var(--color-brand)); }
.calendar-entry--blue:hover { background-image: linear-gradient(to right, var(--color-info-strong), var(--color-brand-strong)); }
.calendar-entry--indigo { --calendar-entry-shadow: rgb(var(--palette-indigo-200)); background-image: linear-gradient(to right, var(--color-brand), rgb(var(--palette-violet-500))); }
.calendar-entry--indigo:hover { background-image: linear-gradient(to right, var(--color-brand-strong), rgb(var(--palette-violet-600))); }
.calendar-entry--violet { --calendar-entry-shadow: rgb(var(--palette-violet-200)); background-image: linear-gradient(to right, rgb(var(--palette-violet-500)), var(--color-accent)); }
.calendar-entry--violet:hover { background-image: linear-gradient(to right, rgb(var(--palette-violet-600)), var(--color-accent-strong)); }
.calendar-entry--purple { --calendar-entry-shadow: rgb(var(--palette-purple-200)); background-image: linear-gradient(to right, var(--color-accent), rgb(var(--palette-fuchsia-500))); }
.calendar-entry--purple:hover { background-image: linear-gradient(to right, var(--color-accent-strong), rgb(var(--palette-fuchsia-700))); }
.calendar-entry--fuchsia { --calendar-entry-shadow: rgb(var(--palette-fuchsia-200)); background-image: linear-gradient(to right, rgb(var(--palette-fuchsia-500)), rgb(var(--palette-pink-500))); }
.calendar-entry--fuchsia:hover { background-image: linear-gradient(to right, rgb(var(--palette-fuchsia-700)), rgb(var(--palette-pink-600))); }
.calendar-entry--pink { --calendar-entry-shadow: rgb(var(--palette-pink-200)); background-image: linear-gradient(to right, rgb(var(--palette-pink-500)), rgb(var(--palette-rose-500))); }
.calendar-entry--pink:hover { background-image: linear-gradient(to right, rgb(var(--palette-pink-600)), var(--color-critical)); }
.calendar-entry--rose { --calendar-entry-shadow: rgb(var(--palette-rose-200)); background-image: linear-gradient(to right, rgb(var(--palette-rose-500)), var(--color-danger)); }
.calendar-entry--rose:hover { background-image: linear-gradient(to right, var(--color-critical), var(--color-danger-strong)); }
.calendar-entry--slate { --calendar-entry-shadow: var(--color-border); background-image: linear-gradient(to right, var(--color-border-strong), var(--color-ink-lighter)); }
.calendar-entry--slate:hover { background-image: linear-gradient(to right, var(--color-subtle), var(--color-ink-light)); }

/* ------------------------------------------------------------------ */
/* Admin availability calendar                                         */
/* ------------------------------------------------------------------ */

.schedule-availability-list__title {
  margin: 0;
  padding: 1.5rem;
  color: var(--color-ink);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.schedule-availability-list__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .schedule-availability-list__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.schedule-availability-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin: 1rem;
  border-block-end: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.schedule-availability-card__header {
  padding: 1.5rem 1rem;
}

@media (min-width: 640px) {
  .schedule-availability-card__header {
    padding-inline: 1.5rem;
  }
}

.schedule-availability-card__title {
  margin: 0;
  color: var(--color-ink);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.schedule-availability-card__hours {
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-availability-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--color-surface-muted);
}

.schedule-availability-card__add-link {
  color: var(--color-info-strong);
}

.schedule-availability-card__add-link:hover {
  color: rgb(var(--palette-blue-800));
}

.schedule-availability-card__icon,
.schedule-availability-hour__delete-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.schedule-availability-hour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block: 0.5rem;
  padding: 0.5rem 1rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.schedule-availability-hour__time {
  margin: 0;
  margin-inline-end: 0.5rem;
}

.schedule-availability-hour__delete {
  color: rgb(var(--palette-red-400));
}

.schedule-availability-hour__delete:hover {
  color: var(--color-danger-strong);
}

.admin-calendar__title {
  margin-block: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--color-ink);
  text-align: center;
}

.admin-calendar-results {
  margin-block-start: 1.5rem;
  overflow: auto;
  max-block-size: 100vh;
}

.admin-calendar-results--visible {
  overflow: visible;
}

/* ------------------------------------------------------------------ */
/* Admin scheduling/resource forms                                     */
/* ------------------------------------------------------------------ */

.schedule-form-section {
  margin-block-start: 1.5rem;
  padding: 1rem 1.5rem 1.5rem;
  border-radius: var(--radius-xs);
  box-shadow:
    var(--shadow-sm),
    var(--shadow-ring-subtle);
}

.schedule-form-section__body {
  padding-block-start: 1rem;
}

.schedule-form-section__legend {
  margin-block-start: 1rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}


.schedule-form-section__fieldset {
  margin-block-start: 1rem;
}

.schedule-day-picker {
  margin-block-start: 1.5rem;
}

.schedule-day-picker__label {
  margin: 0;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.schedule-day-picker__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin-block-start: 0.5rem;
  margin-block-end: 0;
  padding: 0;
  list-style: none;
}

.schedule-day-picker__item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
}

.schedule-day-picker__day {
  padding-inline-start: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.admin-leave-form__fields,
.admin-overtime-form__header,
.admin-overtime-form__choices,
.admin-overtime-form__choice,
.admin-overtime-form__redeem-options,
.admin-resource-availability__actions,
.shift-schedule-nested__row,
.shift-agenda-employees__item,
.shift-agenda-employees__person,
.shift-schedule-list,
.shift-schedule-row,
.shift-schedule-row__order,
.shift-schedule-row__move-actions,
.shift-schedule-row__position,
.shift-schedule-row__remove {
  display: flex;
}

.admin-leave-form__fields,
.admin-overtime-form__header {
  align-items: center;
  gap: 1.5rem;
}

.admin-leave-form__field {
  flex: 1 1 0;
  min-inline-size: 0;
}

.admin-leave-form__field--offset {
  margin-block-start: 1.5rem;
}

.admin-leave-form__field--choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 3rem;
}

.admin-overtime-form__header {
  justify-content: space-between;
  gap: 1rem;
}

.admin-overtime-form__date {
  flex: 1 1 33.333%;
}

.admin-overtime-form__employee {
  flex: 1 1 66.667%;
}

.admin-overtime-form__body {
  margin-block-start: 1rem;
}

.admin-overtime-form__choices {
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}

.admin-overtime-form__choice {
  align-items: center;
  gap: 0.5rem;
}

.admin-overtime-form__choice-label {
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.admin-overtime-form__time-card {
  padding: 0.5rem;
}

.admin-overtime-form__redeem-options {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-overtime-form__days {
  margin: 1rem;
}

.admin-resource-actions__item {
  margin-inline-end: 1rem;
}

.admin-resource-schedules__body {
  color: var(--color-ink-light);
}

.admin-resource-availability {
  padding-inline: 1.5rem;
}


.admin-resource-availability__actions {
  position: relative;
  z-index: 0;
  margin-block-start: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin-resource-availability__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-medium);
  background-color: var(--color-surface);
  padding: 0.5rem 1rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.admin-resource-availability__button:hover {
  background-color: var(--color-surface-muted);
}

.admin-resource-availability__button:focus {
  z-index: 10;
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand);
}

.admin-resource-availability__button--first {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.admin-resource-availability__button--middle,
.admin-resource-availability__button--last {
  margin-inline-start: -1px;
}

.admin-resource-availability__button--last {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.schedule-category-empty {
  margin-block-start: 2.5rem;
}

.shift-schedule-nested {
  margin-block-start: 1rem;
}

.shift-schedule-nested__row {
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.shift-schedule-nested__remove {
  margin-inline-start: 1rem;
  color: var(--color-danger-strong);
}

.shift-schedule-nested__remove-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.shift-schedule-list {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}


.shift-agenda-employees__item {
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  padding: 0.75rem;
}

.shift-agenda-employees__person {
  align-items: center;
  gap: 0.75rem;
}

.shift-agenda-employees__avatar {
  flex-shrink: 0;
}

.shift-agenda-employees__details {
  display: flex;
  min-inline-size: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.shift-agenda-employees__meta {
  margin: 0;
  color: var(--color-ink-light);
  font-size: 0.75rem;
  line-height: 1rem;
}

.shift-schedule-row {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-inline-size: 100%;
  margin: 0.5rem auto;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-subtle);
}

.shift-schedule-row__order {
  align-items: center;
}

.shift-schedule-row__move-actions {
  flex-direction: column;
}

.shift-schedule-row__move {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-ink-light);
  cursor: pointer;
}

.shift-schedule-row__move-icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.shift-schedule-row__position {
  align-items: center;
  margin-inline-start: 0.5rem;
}

.shift-schedule-row__summary {
  min-inline-size: 0;
}

.shift-schedule-row__title {
  margin: 0;
  padding-inline: 1rem;
  color: var(--color-ink);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.shift-schedule-row__employees {
  margin-block-start: 0.5rem;
  margin-block-end: 0;
  padding-inline: 0.5rem;
}

.shift-schedule-row__remove {
  align-items: center;
}

.shift-schedule-row__remove-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-danger-strong);
  cursor: pointer;
}

.shift-schedule-row__remove-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-start: 1rem;
}

.admin-swap-availability__date {
  margin-block: 0.5rem 0;
  color: var(--color-subtle);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .schedule-form-section__radio-group {
    flex-direction: row;
  }

  .admin-resource-availability {
    padding-inline: 0;
  }
}

@media (max-width: 767px) {
  .admin-leave-form__fields,
  .admin-overtime-form__header,
  .admin-overtime-form__redeem-options,
  .shift-schedule-row {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-leave-form__field--offset,
  .admin-leave-form__field--choice {
    margin-block-start: 0;
  }
}

.admin-calendar-search {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 1.5rem;
}

.admin-calendar-search__field {
  min-inline-size: min(100%, 12rem);
}

.admin-calendar-search__date-fields,
.admin-calendar-search__filters,
.admin-calendar-search__field {
  min-inline-size: 0;
}

.admin-calendar-search__field--grow,
.admin-calendar-search__employee-field {
  flex: 1 1 auto;
}

.admin-calendar-search .input {
  box-sizing: border-box;
}

.admin-calendar-search__control,
.admin-calendar-search__field .input {
  margin-block-start: 0.5rem;
}

.admin-calendar-search__bottom-row {
  align-items: stretch;
}

.admin-calendar-search__actions {
  display: flex;
  align-items: flex-end;
}

.admin-calendar-search__submit-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (min-width: 640px) {
  .admin-calendar-search__top-row,
  .admin-calendar-search__bottom-row,
  .admin-calendar-search__date-fields,
  .admin-calendar-search__filters {
    flex-direction: row;
  }

  .admin-calendar-search__top-row,
  .admin-calendar-search__bottom-row {
    justify-content: space-between;
  }

  .admin-calendar-search__top-row {
    align-items: center;
  }

  .admin-calendar-search__top-row--resources {
    align-items: flex-end;
  }

  .admin-calendar-search__bottom-row {
    align-items: flex-end;
  }
}

.admin-calendar-table-wrap {
  overflow-x: auto;
}

.admin-calendar-table {
  min-inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
}

.admin-calendar-table__head,
.admin-calendar-legend-cell {
  background-color: var(--color-border-muted);
}

.admin-calendar-table__month-heading,
.admin-calendar-table__day-heading {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  border-block-end: 1px solid var(--color-border-medium);
  background-color: color-mix(in oklch, var(--color-surface) 75%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.admin-calendar-table__month-heading {
  inset-inline-start: 0;
  padding: 0.875rem 0.75rem 0.875rem 1rem;
  inline-size: 8rem;
  color: var(--color-ink);
  text-align: start;
}

.admin-calendar-table__day-heading {
  padding: 0.5rem 0.25rem;
  text-align: center;
}

.admin-calendar-table__day-heading--today {
  color: var(--color-info);
}

.admin-calendar-table__day-heading--weekend {
  color: var(--color-danger);
}

.admin-calendar-table__day-heading--weekday {
  color: var(--color-ink);
}

.admin-calendar-row {
  border: 1px solid var(--color-border-strong);
}

.admin-calendar-row__subject-cell,
.admin-calendar-shift-row__subject-cell {
  position: sticky;
  inset-inline-start: 0;
  z-index: 10;
  background-color: color-mix(in oklch, var(--color-surface) 75%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: start;
  backdrop-filter: blur(8px);
}

.admin-calendar-row__subject-cell {
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  inline-size: 8rem;
}

.admin-calendar-row__subject {
  display: flex;
  align-items: center;
}

.admin-calendar-row__avatar {
  inline-size: 2rem;
  block-size: 2rem;
}

.admin-calendar-row__subject-text {
  flex: 1 1 0;
  min-inline-size: 0;
  margin-inline-start: 0.5rem;
}

.admin-calendar-tooltip {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-calendar-tooltip__trigger {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.admin-calendar-tooltip__message {
  position: absolute;
  z-index: 10;
  inset-inline-start: -8rem;
  display: inline-block;
  visibility: hidden;
  inline-size: 16rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  box-shadow: var(--shadow-sm);
  transition: opacity 300ms ease;
}

.admin-calendar-tooltip__body {
  padding: 0.5rem 1rem;
}

.admin-calendar-shift-row {
  border-block-end: 1px solid var(--color-border);
}

.admin-calendar-shift-row__subject-cell {
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  color: var(--color-subtle);
}

.admin-calendar-shift-row__group {
  padding-block: 0.25rem;
  border-inline-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-ink-light);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}

.admin-calendar-shift-row__group--red { background-color: rgb(var(--palette-red-200) / 0.8); color: rgb(var(--palette-red-900)); }
.admin-calendar-shift-row__group--yellow { background-color: rgb(var(--palette-yellow-200) / 0.8); color: rgb(var(--palette-yellow-900)); }
.admin-calendar-shift-row__group--green { background-color: rgb(var(--palette-green-200) / 0.8); color: rgb(var(--palette-green-900)); }
.admin-calendar-shift-row__group--blue { background-color: rgb(var(--palette-blue-200) / 0.8); color: rgb(var(--palette-blue-900)); }
.admin-calendar-shift-row__group--purple { background-color: rgb(var(--palette-purple-200) / 0.8); color: rgb(var(--palette-purple-900)); }
.admin-calendar-shift-row__group--pink { background-color: rgb(var(--palette-pink-200) / 0.8); color: rgb(var(--palette-pink-900)); }
.admin-calendar-shift-row__group--orange { background-color: rgb(var(--palette-orange-200) / 0.8); color: rgb(var(--palette-orange-900)); }
.admin-calendar-shift-row__group--gray { background-color: color-mix(in srgb, var(--color-surface-subtle) 80%, transparent); color: var(--color-ink); }
.admin-calendar-shift-row__group--indigo { background-color: rgb(var(--palette-indigo-200) / 0.8); color: rgb(var(--palette-indigo-900)); }
.admin-calendar-shift-row__group--emerald { background-color: rgb(var(--palette-emerald-200) / 0.8); color: rgb(var(--palette-emerald-900)); }
.admin-calendar-shift-row__group--teal { background-color: rgb(var(--palette-teal-200) / 0.8); color: rgb(var(--palette-teal-900)); }
.admin-calendar-shift-row__group--cyan { background-color: rgb(var(--palette-cyan-200) / 0.8); color: rgb(var(--palette-cyan-900)); }
.admin-calendar-shift-row__group--sky { background-color: rgb(var(--palette-sky-200) / 0.8); color: rgb(var(--palette-sky-900)); }
.admin-calendar-shift-row__group--lime { background-color: rgb(var(--palette-lime-200) / 0.8); color: rgb(var(--palette-lime-900)); }

.admin-calendar-day-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  padding: 0.25rem;
}

.admin-calendar-day-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.admin-calendar-day-cell--none {
  border: 1px solid rgb(var(--palette-red-400) / 0.7);
  background-color: rgb(var(--palette-red-100) / 0.7);
}

.admin-calendar-day-cell--limited {
  border: 1px solid rgb(var(--palette-yellow-400) / 0.7);
  background-color: rgb(var(--palette-yellow-100) / 0.7);
}

.admin-calendar-day-cell--full {
  border: 1px solid rgb(var(--palette-green-400) / 0.7);
  background-color: rgb(var(--palette-green-100) / 0.7);
}

.admin-calendar-day-cell--unknown {
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
}

.admin-calendar-day-cell--today {
  border-inline-color: rgb(var(--palette-indigo-400) / 0.7);
}

.admin-calendar-availability--none {
  color: var(--color-danger-strong);
}

.admin-calendar-availability--limited {
  color: rgb(var(--palette-yellow-600));
}

.admin-calendar-availability--full {
  color: var(--color-success-strong);
}

.admin-calendar-availability--unknown {
  color: var(--color-subtle);
}

.admin-calendar-day-cell__pending {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.25rem;
}

.admin-calendar-day-cell__pending-icon {
  inline-size: 0.5rem;
  block-size: 0.5rem;
}

.admin-calendar-day-cell__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.admin-calendar-day-cell__shift,
.admin-calendar-day-cell__availability-label {
  font-size: 0.75rem;
  color: var(--color-ink-lighter);
}

.admin-calendar-day-cell__shift {
  margin-block-end: 0.5rem;
}

.admin-calendar-day-cell__availability-label {
  margin-block-start: 0.25rem;
}

.admin-calendar-options {
  margin: 0;
  padding: 0;
}

.admin-calendar-options__item {
  padding: 0.25rem;
  color: var(--color-ink);
}

.admin-calendar-options__item:hover {
  background-color: var(--color-border-muted);
}

.admin-calendar-options__action {
  color: var(--color-info-strong);
}

.admin-calendar-options__action--button {
  inline-size: 100%;
  text-align: start;
}

.admin-calendar-activity {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-subtle);
  font-weight: 500;
  transition: color 150ms ease;
}

.admin-calendar-activity:hover {
  color: var(--color-ink-lighter);
}

.admin-calendar-activity--red { background-color: rgb(var(--palette-red-100)); border-color: rgb(var(--palette-red-200)); color: rgb(var(--palette-red-800)); }
.admin-calendar-activity--green { background-color: rgb(var(--palette-green-100)); border-color: rgb(var(--palette-green-200)); color: rgb(var(--palette-green-800)); }
.admin-calendar-activity--yellow { background-color: rgb(var(--palette-yellow-100)); border-color: rgb(var(--palette-yellow-200)); color: rgb(var(--palette-yellow-800)); }
.admin-calendar-activity--blue { background-color: rgb(var(--palette-blue-100)); border-color: rgb(var(--palette-blue-200)); color: rgb(var(--palette-blue-800)); }
.admin-calendar-activity--indigo { background-color: rgb(var(--palette-indigo-100)); border-color: rgb(var(--palette-indigo-200)); color: rgb(var(--palette-indigo-800)); }
.admin-calendar-activity--purple { background-color: rgb(var(--palette-purple-100)); border-color: rgb(var(--palette-purple-200)); color: rgb(var(--palette-purple-800)); }
.admin-calendar-activity--pink { background-color: rgb(var(--palette-pink-100)); border-color: rgb(var(--palette-pink-200)); color: rgb(var(--palette-pink-800)); }
.admin-calendar-activity--orange { background-color: rgb(var(--palette-orange-100)); border-color: rgb(var(--palette-orange-200)); color: rgb(var(--palette-orange-700)); }
.admin-calendar-activity--teal { background-color: rgb(var(--palette-teal-100)); border-color: rgb(var(--palette-teal-200)); color: rgb(var(--palette-teal-700)); }
.admin-calendar-activity--cyan { background-color: rgb(var(--palette-cyan-50)); border-color: rgb(var(--palette-cyan-200)); color: rgb(var(--palette-cyan-700)); }
.admin-calendar-activity--gray { background-color: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-ink-light); }
.admin-calendar-activity--white { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-ink-light); }
.admin-calendar-activity--black { background-color: var(--color-ink); border-color: var(--color-surface); color: var(--color-ink-inverted); }
.admin-calendar-activity--amber { background-color: rgb(var(--palette-amber-100)); border-color: rgb(var(--palette-amber-200)); color: rgb(var(--palette-amber-800)); }
.admin-calendar-activity--lime { background-color: rgb(var(--palette-lime-100)); border-color: rgb(var(--palette-lime-200)); color: rgb(var(--palette-lime-700)); }
.admin-calendar-activity--emerald { background-color: rgb(var(--palette-emerald-100)); border-color: rgb(var(--palette-emerald-200)); color: rgb(var(--palette-emerald-700)); }
.admin-calendar-activity--rose { background-color: rgb(var(--palette-rose-100)); border-color: rgb(var(--palette-rose-200)); color: rgb(var(--palette-rose-700)); }
.admin-calendar-activity--sky { background-color: rgb(var(--palette-sky-100)); border-color: rgb(var(--palette-sky-200)); color: rgb(var(--palette-sky-700)); }
.admin-calendar-activity--violet { background-color: rgb(var(--palette-violet-100)); border-color: rgb(var(--palette-violet-200)); color: rgb(var(--palette-violet-700)); }
.admin-calendar-activity--fuchsia { background-color: rgb(var(--palette-fuchsia-100)); border-color: rgb(var(--palette-fuchsia-200)); color: rgb(var(--palette-fuchsia-800)); }
.admin-calendar-activity--slate { background-color: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-ink-light); }

.admin-calendar-legend-row {
  color: var(--color-ink-light);
  font-size: 0.75rem;
  text-align: center;
}

.admin-calendar-legend-cell {
  padding-block: 0.25rem;
}

.admin-calendar-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.admin-calendar-legend__swatch {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px currentColor;
}

.admin-calendar-legend__swatch--none {
  background-color: rgb(var(--palette-red-100) / 0.7);
  color: rgb(var(--palette-red-400) / 0.7);
}

.admin-calendar-legend__swatch--limited {
  background-color: rgb(var(--palette-yellow-100) / 0.7);
  color: rgb(var(--palette-yellow-400) / 0.7);
}

.admin-calendar-legend__swatch--full {
  background-color: rgb(var(--palette-green-100) / 0.7);
  color: rgb(var(--palette-green-400) / 0.7);
}

.admin-calendar-legend__label {
  color: var(--color-ink-lighter);
}

.admin-calendar-legend__icon {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Absence timeline calendar                                           */
/* ------------------------------------------------------------------ */

.absence-calendar-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-block-end: 1rem;
  border-block-end: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
  padding-block-end: 1.25rem;
}

.absence-calendar-filter__field {
  display: flex;
  flex-direction: column;
}

.absence-calendar-filter__field--grow {
  flex: 1 1 12.5rem;
  min-inline-size: 12.5rem;
}

.absence-calendar-filter__option-field {
  justify-content: flex-end;
}

.absence-calendar-filter__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  cursor: pointer;
}

.absence-calendar-filter__checkbox {
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: var(--radius-sm);
  border-color: var(--color-border-medium);
  color: var(--color-brand-strong);
  accent-color: var(--color-brand-strong);
}

.absence-calendar-filter__checkbox:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.absence-calendar-filter__button-icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.absence-calendar-filter .employee-search__control {
  align-items: stretch;
  block-size: auto;
  min-block-size: 2.875rem;
}

.absence-calendar-filter .employee-search__input-wrap {
  min-block-size: 1.5rem;
}

.absence-calendar-filter .employee-search__input {
  padding-inline-end: 4rem;
  text-overflow: ellipsis;
}

.absence-calendar-filter .employee-search__tags {
  display: flex;
  max-inline-size: 100%;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.absence-timeline-empty {
  margin: 0;
  padding-block: 1rem;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.absence-timeline {
  overflow-x: auto;
  inline-size: 100%;
  border: 1px solid color-mix(in oklch, var(--color-border) 80%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.absence-timeline__grid {
  display: inline-grid;
  min-inline-size: 100%;
}

.absence-timeline__spacer,
.absence-timeline__month,
.absence-timeline__day,
.absence-timeline__employee-name {
  border-block-end: 1px solid var(--color-border);
}

.absence-timeline__spacer,
.absence-timeline__employee-name {
  position: sticky;
  inset-inline-start: 0;
  z-index: 20;
}

.absence-timeline__spacer,
.absence-timeline__month,
.absence-timeline__day {
  background-color: color-mix(in oklch, var(--color-surface-muted) 80%, transparent);
}

.absence-timeline__month {
  padding-block: 0.25rem;
  color: var(--color-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-align: center;
}

.absence-timeline__day {
  padding-block: 0.125rem;
  font-size: 0.625rem;
  line-height: 1.1;
  text-align: center;
}

.absence-timeline__day--weekend {
  color: var(--color-border-strong);
}

.absence-timeline__day--current {
  color: var(--color-brand-strong);
  font-weight: 600;
}

.absence-timeline__day--default {
  color: var(--color-ink-medium);
}

.absence-timeline__today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-strong);
  color: var(--color-ink-inverted);
  font-size: 0.625rem;
}

.absence-timeline__employee-name {
  display: flex;
  align-items: center;
  border-inline-end: 1px solid var(--color-surface-subtle);
  padding-inline: 1rem;
  background-color: var(--color-surface);
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.absence-timeline__employee-name--muted,
.absence-timeline__day-cell--muted {
  background-color: color-mix(in oklch, var(--color-surface-muted) 40%, transparent);
}

.absence-timeline__employee-name-text {
  font-weight: 500;
}

.absence-timeline__day-cell {
  position: relative;
  display: flex;
  align-items: center;
  border-block-end: 1px solid var(--color-border);
}

.absence-timeline__day-cell--weekend {
  background-color: color-mix(in oklch, var(--color-surface-subtle) 50%, transparent);
}

.absence-timeline__day-cell--current {
  background-color: rgb(var(--palette-indigo-100) / 0.4);
}

.absence-timeline__day-cell--draggable {
  cursor: pointer;
  user-select: none;
}

.absence-timeline__day-cell--draggable:hover,
.absence-timeline__day-cell--selected {
  background-color: rgb(var(--palette-indigo-50));
}

.absence-timeline__holiday-dot {
  position: absolute;
  inset-block-end: 0.125rem;
  inset-inline-start: 50%;
  display: block;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--palette-red-400));
  transform: translateX(-50%);
}

.absence-timeline__bar {
  z-index: 10;
  align-self: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  block-size: 1.5rem;
  transition:
    opacity 150ms ease,
    box-shadow 150ms ease;
}

.absence-timeline__bar:hover {
  opacity: 0.8;
  box-shadow: var(--shadow-sm);
}

.absence-timeline__bar--rounded {
  border-radius: var(--radius-sm);
}

.absence-timeline__bar--rounded-start {
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
}

.absence-timeline__bar--rounded-end {
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

.absence-timeline__bar--pending {
  border-width: 2px;
  border-style: dashed;
}

.absence-timeline__bar-label {
  overflow: hidden;
  padding-inline: 0.375rem;
  color: color-mix(in oklch, var(--color-ink-inverted) 90%, transparent);
  font-size: 0.75rem;
  line-height: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.absence-timeline__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap-block: 0.5rem;
  gap-inline: 1.25rem;
  margin-block-start: 1rem;
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
  line-height: 1rem;
}

.absence-timeline__legend-title {
  color: var(--color-subtle);
  font-weight: 500;
}

.absence-timeline__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.absence-timeline__legend-dot {
  display: inline-block;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-pill);
}

.absence-timeline__legend-dot--pending {
  border: 2px dashed var(--color-border-strong);
  background-color: var(--color-surface-subtle);
}

.absence-timeline__legend-line {
  display: inline-block;
  inline-size: 1.25rem;
  block-size: 0.25rem;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--palette-red-400));
}

.absence-timeline-color--red { background-color: rgb(var(--palette-red-400)); }
.absence-timeline-color--orange { background-color: rgb(var(--palette-orange-400)); }
.absence-timeline-color--amber { background-color: rgb(var(--palette-amber-400)); }
.absence-timeline-color--yellow { background-color: rgb(var(--palette-yellow-400)); }
.absence-timeline-color--lime { background-color: rgb(var(--palette-lime-400)); }
.absence-timeline-color--green { background-color: rgb(var(--palette-green-400)); }
.absence-timeline-color--emerald { background-color: rgb(var(--palette-emerald-400)); }
.absence-timeline-color--teal { background-color: rgb(var(--palette-teal-400)); }
.absence-timeline-color--cyan { background-color: rgb(var(--palette-cyan-400)); }
.absence-timeline-color--sky { background-color: rgb(var(--palette-sky-400)); }
.absence-timeline-color--blue { background-color: rgb(var(--palette-blue-400)); }
.absence-timeline-color--indigo { background-color: rgb(var(--palette-indigo-400)); }
.absence-timeline-color--violet { background-color: rgb(var(--palette-violet-400)); }
.absence-timeline-color--purple { background-color: rgb(var(--palette-purple-400)); }
.absence-timeline-color--fuchsia { background-color: rgb(var(--palette-fuchsia-400)); }
.absence-timeline-color--pink { background-color: rgb(var(--palette-pink-400)); }
.absence-timeline-color--rose { background-color: rgb(var(--palette-rose-400)); }
.absence-timeline-color--slate { background-color: var(--color-ink-light); }
.absence-timeline-color--gray { background-color: var(--color-ink-lighter); }
.absence-timeline-color--black { background-color: var(--color-ink); }
.absence-timeline-color--fallback { background-color: var(--color-border); }

.absence-timeline-color--red-muted { background-color: rgb(var(--palette-red-100)); }
.absence-timeline-color--orange-muted { background-color: rgb(var(--palette-orange-100)); }
.absence-timeline-color--amber-muted { background-color: rgb(var(--palette-amber-100)); }
.absence-timeline-color--yellow-muted { background-color: rgb(var(--palette-yellow-100)); }
.absence-timeline-color--lime-muted { background-color: rgb(var(--palette-lime-100)); }
.absence-timeline-color--green-muted { background-color: rgb(var(--palette-green-100)); }
.absence-timeline-color--emerald-muted { background-color: rgb(var(--palette-emerald-100)); }
.absence-timeline-color--teal-muted { background-color: rgb(var(--palette-teal-100)); }
.absence-timeline-color--cyan-muted { background-color: rgb(var(--palette-cyan-50)); }
.absence-timeline-color--sky-muted { background-color: rgb(var(--palette-sky-100)); }
.absence-timeline-color--blue-muted { background-color: rgb(var(--palette-blue-100)); }
.absence-timeline-color--indigo-muted { background-color: rgb(var(--palette-indigo-100)); }
.absence-timeline-color--violet-muted { background-color: rgb(var(--palette-violet-100)); }
.absence-timeline-color--purple-muted { background-color: rgb(var(--palette-purple-100)); }
.absence-timeline-color--fuchsia-muted { background-color: rgb(var(--palette-fuchsia-100)); }
.absence-timeline-color--pink-muted { background-color: rgb(var(--palette-pink-100)); }
.absence-timeline-color--rose-muted { background-color: rgb(var(--palette-rose-100)); }
.absence-timeline-color--slate-muted { background-color: var(--color-surface-subtle); }
.absence-timeline-color--gray-muted { background-color: var(--color-surface-subtle); }
.absence-timeline-color--black-muted { background-color: var(--color-border); }
.absence-timeline-color--fallback-muted { background-color: var(--color-surface-subtle); }

.absence-timeline-color--red-border { border-color: rgb(var(--palette-red-400)); }
.absence-timeline-color--orange-border { border-color: rgb(var(--palette-orange-400)); }
.absence-timeline-color--amber-border { border-color: rgb(var(--palette-amber-400)); }
.absence-timeline-color--yellow-border { border-color: rgb(var(--palette-yellow-400)); }
.absence-timeline-color--lime-border { border-color: rgb(var(--palette-lime-400)); }
.absence-timeline-color--green-border { border-color: rgb(var(--palette-green-400)); }
.absence-timeline-color--emerald-border { border-color: rgb(var(--palette-emerald-400)); }
.absence-timeline-color--teal-border { border-color: rgb(var(--palette-teal-400)); }
.absence-timeline-color--cyan-border { border-color: rgb(var(--palette-cyan-400)); }
.absence-timeline-color--sky-border { border-color: rgb(var(--palette-sky-400)); }
.absence-timeline-color--blue-border { border-color: rgb(var(--palette-blue-400)); }
.absence-timeline-color--indigo-border { border-color: rgb(var(--palette-indigo-400)); }
.absence-timeline-color--violet-border { border-color: rgb(var(--palette-violet-400)); }
.absence-timeline-color--purple-border { border-color: rgb(var(--palette-purple-400)); }
.absence-timeline-color--fuchsia-border { border-color: rgb(var(--palette-fuchsia-400)); }
.absence-timeline-color--pink-border { border-color: rgb(var(--palette-pink-400)); }
.absence-timeline-color--rose-border { border-color: rgb(var(--palette-rose-400)); }
.absence-timeline-color--slate-border { border-color: var(--color-ink-light); }
.absence-timeline-color--gray-border { border-color: var(--color-ink-lighter); }
.absence-timeline-color--black-border { border-color: var(--color-ink); }
.absence-timeline-color--fallback-border { border-color: var(--color-ink-lighter); }

/* ------------------------------------------------------------------ */
/* Main calendar event remnants                                        */
/* ------------------------------------------------------------------ */

.calendar-event-badge {
  flex: 0 1 auto;
  align-items: center;
  gap: 0.375rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: 0.25rem 0.625rem;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.calendar-event-badge--clock-in {
  display: inline-flex;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgb(var(--palette-teal-500)), rgb(var(--palette-cyan-500)));
  color: var(--color-ink-inverted);
  box-shadow: 0 1px 2px rgb(var(--palette-teal-200) / 0.65);
  font-size: 0.75rem;
}

.calendar-event-badge__icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.calendar-current-day {
  position: relative;
  display: none;
  min-inline-size: 15rem;
  margin-block-end: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  background-color: color-mix(in oklch, var(--color-surface) 70%, transparent);
  box-shadow: var(--shadow-lg);
}

.calendar-current-day__accent {
  inline-size: 100%;
  block-size: 0.375rem;
  background: linear-gradient(90deg, rgb(var(--palette-fuchsia-500)), rgb(var(--palette-pink-500)), rgb(var(--palette-rose-500)));
}

.calendar-current-day__body {
  padding: 2rem;
}

.calendar-current-day__month-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 1.5rem;
}

.calendar-current-day__month {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgb(var(--palette-sky-600)), var(--color-brand));
  color: var(--color-ink-inverted);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
}

.calendar-current-day__date,
.calendar-current-day__events {
  text-align: center;
}

.calendar-current-day__number {
  color: var(--color-ink);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
}

.calendar-current-day__weekday {
  margin-block-start: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.calendar-current-day__weekday--accent {
  color: var(--color-danger);
}

.calendar-current-day__weekday--default {
  color: var(--color-subtle);
}

.calendar-current-day__divider {
  inline-size: 100%;
  block-size: 1px;
  margin-block: 2rem;
  background-color: var(--color-border);
}

.calendar-current-day__event-list {
  color: var(--color-ink-medium);
  font-size: 1.25rem;
  font-weight: 500;
}

.calendar-full-event {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  padding: 1rem 1.5rem 1rem 1rem;
}

.calendar-full-event:focus-within,
.calendar-full-event:hover {
  background-color: var(--color-surface-muted);
}

.calendar-full-event__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  inline-size: 100%;
  min-inline-size: 0;
  margin-block-start: 0.5rem;
  color: var(--color-ink-light);
}

.calendar-full-event__icon {
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-end: 0.5rem;
  color: var(--color-ink-medium);
}

.calendar-full-event__time,
.calendar-full-event__employee {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.calendar-shift-popover__title {
  margin-block: 0 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 600;
}

.calendar-shift-popover__entry {
  color: var(--color-subtle);
  font-size: 0.875rem;
}

.calendar-clock-in-button__icon {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

@media (max-width: 639px) {
  .calendar-full-event__content {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
  }

  .calendar-full-event__icon {
    grid-row: span 3;
    margin-block-start: 0.125rem;
  }

  .calendar-event-badge,
  .calendar-full-event__time,
  .calendar-full-event__employee {
    grid-column: 2;
    justify-self: start;
  }
}

@media (min-width: 768px) {
  .date-nav {
    align-items: stretch;
  }

  .calendar-current-day {
    display: block;
  }

  .date-nav__today {
    display: inline-flex;
  }

  .date-nav__mobile-divider {
    display: none;
  }
}

@media (min-width: 640px) {
  .calendar-current-day__body {
    padding: 2.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* Selector                                                            */
/* ------------------------------------------------------------------ */


.calendar-selector__nav-button {
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  color: var(--color-subtle);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-selector__nav-button:hover {
  background-color: var(--color-surface-subtle);
  color: var(--color-ink);
}

.calendar-selector__nav-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.calendar-selector__today {
  padding-block: 0.375rem;
  padding-inline: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-link);
  border-radius: var(--radius-lg);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 150ms;
}

.calendar-selector__today:hover {
  background-color: var(--color-surface-subtle);
}

.calendar-selector__months {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .calendar-selector__months {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.calendar-selector__month-hidden-on-mobile {
  display: none;
}

@media (min-width: 768px) {
  .calendar-selector__month-hidden-on-mobile { display: block; }
}

.calendar-selector__summary {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--color-border);
}

.calendar-selector__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}


.calendar-selector__summary-label {
  color: var(--color-ink-lighter);
}

.calendar-selector__summary-value {
  font-weight: 500;
  color: var(--color-ink-light);
}

.calendar-selector__clear {
  color: var(--color-ink-medium);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 150ms;
}

.calendar-selector__clear:hover {
  color: var(--color-subtle);
}

.calendar-selector__clear-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Month                                                              */
/* ------------------------------------------------------------------ */

.calendar-month {
  /* Marker for the controller; layout via children                     */
}

.calendar-month__heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  text-align: center;
  margin-block-end: 0.75rem;
}

.calendar-month__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-block-end: 0.25rem;
}

.calendar-month__weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ink-lighter);
  padding-block: 0.25rem;
}

.calendar-month__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* ------------------------------------------------------------------ */
/* Day — base + 8 state modifiers                                     */
/* ------------------------------------------------------------------ */

.calendar-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  font-size: 0.875rem;
  background: transparent;
  border: 0;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default — in-month day, no selection                                  */
.calendar-day--default {
  color: var(--color-ink-light);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.calendar-day--default:hover {
  background-color: var(--color-surface-subtle);
}

/* Out-of-month                                                          */
.calendar-day--out {
  color: var(--color-border-strong);
  cursor: default;
}

/* Disabled                                                              */
.calendar-day--disabled {
  color: var(--color-border);
  cursor: not-allowed;
}

/* Today — violet pill                                                   */
.calendar-day--today {
  background-color: rgb(var(--palette-violet-100));
  color: rgb(var(--palette-violet-800));
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.calendar-day--today:hover {
  background-color: rgb(var(--palette-violet-200));
}

/* In-range middle                                                       */
.calendar-day--in-range {
  background-color: rgb(var(--palette-indigo-100));
  color: rgb(var(--palette-indigo-700));
  cursor: pointer;
}

.calendar-day--in-range:hover {
  background-color: rgb(var(--palette-indigo-200));
}

/* Selected pill (range-start, range-end, single-day-range,
 * single-selected) — indigo, white text, varying border-radius.         */
.calendar-day--range-start,
.calendar-day--range-end,
.calendar-day--single-day-range,
.calendar-day--single-selected {
  background-color: var(--color-brand-strong);
  color: var(--color-ink-inverted);
  font-weight: 600;
  cursor: pointer;
}

.calendar-day--range-start         { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
.calendar-day--range-end           { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
.calendar-day--single-day-range,
.calendar-day--single-selected     { border-radius: var(--radius-pill); }

.calendar-day--range-start:hover,
.calendar-day--range-end:hover,
.calendar-day--single-day-range:hover,
.calendar-day--single-selected:hover {
  background-color: rgb(var(--palette-indigo-700));
}

/* ------------------------------------------------------------------ */
/* Main calendar                                                       */
/* ------------------------------------------------------------------ */


.main-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1.25rem -1rem 0;
  padding: 1rem;
}

.main-calendar-header__title {
  margin: 0;
  background: linear-gradient(90deg, rgb(var(--palette-violet-600)), var(--color-brand-strong));
  background-clip: text;
  color: transparent;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

.main-calendar-header__actions,
.main-calendar-nav {
  display: flex;
  align-items: center;
}

.main-calendar-header__actions {
  gap: 0.75rem;
}

.main-calendar-nav {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.main-calendar-nav__button,
.main-calendar-nav__today {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  color: var(--color-ink-lighter);
  transition: background-color 150ms ease, color 150ms ease;
}

.main-calendar-nav__button {
  padding: 0.5rem 0.75rem;
}

.main-calendar-nav__button:hover {
  background-color: rgb(var(--palette-violet-50));
  color: rgb(var(--palette-violet-600));
}

.main-calendar-nav__today {
  display: none;
  padding: 0.5rem 1rem;
  background: linear-gradient(90deg, rgb(var(--palette-violet-600)), var(--color-brand-strong));
  color: var(--color-ink-inverted);
  font-size: 0.875rem;
  font-weight: 600;
}

.main-calendar-nav__today:hover {
  background: linear-gradient(90deg, rgb(var(--palette-violet-700)), rgb(var(--palette-indigo-700)));
  color: var(--color-ink-inverted);
}

.main-calendar-nav__divider {
  position: relative;
  inline-size: 1px;
  block-size: 1.25rem;
  background-color: var(--color-border);
}

.main-calendar-nav__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.main-calendar-frame {
  margin-block-start: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.main-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-subtle);
  color: var(--color-subtle);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.main-calendar-weekdays__day {
  padding-block: 0.75rem;
}

.main-calendar-weekdays__suffix {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.main-calendar-weekdays__day--weekend {
  color: rgb(var(--palette-amber-600));
}

@media (min-width: 640px) {
  .main-calendar-weekdays__suffix {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

.main-calendar-large {
  display: flex;
  background-color: var(--color-surface-subtle);
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.main-calendar-large__matrix {
  display: none;
  inline-size: 100%;
}

.main-calendar-day {
  position: relative;
  min-block-size: 7rem;
  padding: 0.75rem;
  transition: background-color 150ms ease;
}

.main-calendar-day:hover {
  background-color: var(--color-surface-muted);
}

.main-calendar-day--default {
  background-color: var(--color-surface);
}

.main-calendar-day--today {
  border-inline-start: 4px solid rgb(var(--palette-violet-500));
  background: linear-gradient(135deg, rgb(var(--palette-violet-50)), rgb(var(--palette-indigo-50)));
}

.main-calendar-day--festivity {
  background: linear-gradient(135deg, rgb(var(--palette-rose-50)), rgb(var(--palette-pink-50)));
}

.main-calendar-day--outside {
  background-color: color-mix(in oklch, var(--color-surface-muted) 80%, transparent);
  color: var(--color-ink-medium);
}

.main-calendar-day--weekend {
  background-color: rgb(var(--palette-amber-50) / 0.5);
}

.main-calendar-day__header,
.main-calendar-day__actions {
  display: flex;
  align-items: center;
}

.main-calendar-day__header {
  justify-content: space-between;
}

.main-calendar-day__actions {
  gap: 0.25rem;
}

.main-calendar-day__number {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-ink-light);
  font-weight: 600;
}

.main-calendar-day__number--today,
.main-calendar-day__number--festivity {
  border-radius: var(--radius-pill);
  color: var(--color-ink-inverted);
  font-weight: 700;
}

.main-calendar-day__number--today {
  background: linear-gradient(135deg, rgb(var(--palette-violet-600)), var(--color-brand-strong));
  box-shadow: 0 4px 6px -1px rgb(var(--palette-violet-300));
}

.main-calendar-day__number--festivity {
  background: linear-gradient(135deg, rgb(var(--palette-rose-500)), rgb(var(--palette-pink-500)));
  box-shadow: 0 4px 6px -1px rgb(var(--palette-rose-200));
}

.main-calendar-day__events {
  margin-block-start: 0.5rem;
}

.main-calendar-day__events > * + * {
  margin-block-start: 0.25rem;
}

.main-calendar-mid {
  isolation: isolate;
  display: grid;
  inline-size: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--color-surface-subtle);
}

.main-calendar-mid-events {
  padding: 1.5rem 1rem;
}

.main-calendar-mid-events__list {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  color: var(--color-ink-light);
  font-size: 0.875rem;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--color-border);
}

.main-calendar-mid-events__list > * + * {
  border-block-start: 1px solid var(--color-surface-subtle);
}

.main-calendar-mid-day {
  display: flex;
  flex-direction: column;
}

.main-calendar-mid-day--default {
  background-color: var(--color-surface);
}

.main-calendar-mid-day--today {
  background: linear-gradient(135deg, rgb(var(--palette-violet-50)), rgb(var(--palette-indigo-50)));
}

.main-calendar-mid-day--festivity {
  background: linear-gradient(135deg, rgb(var(--palette-rose-50)), rgb(var(--palette-pink-50)));
}

.main-calendar-mid-day--outside {
  background-color: color-mix(in oklch, var(--color-surface-muted) 80%, transparent);
}

.main-calendar-mid-day--weekend {
  background-color: rgb(var(--palette-amber-50) / 0.5);
}

.main-calendar-mid-day--current {
  color: rgb(var(--palette-violet-700));
  font-weight: 700;
}

.main-calendar-mid-day--muted {
  color: var(--color-ink-medium);
}

.main-calendar-mid-day--in-month {
  color: var(--color-subtle);
}

.main-calendar-mid-day__number {
  padding: 0.25rem;
}

.main-calendar-mid-day__number--today,
.main-calendar-mid-day__number--festivity {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink-inverted);
}

.main-calendar-mid-day__number--today {
  background: linear-gradient(135deg, rgb(var(--palette-violet-600)), var(--color-brand-strong));
  box-shadow: 0 4px 6px -1px rgb(var(--palette-violet-300));
}

.main-calendar-mid-day__number--festivity {
  background: linear-gradient(135deg, rgb(var(--palette-rose-500)), rgb(var(--palette-pink-500)));
  box-shadow: 0 4px 6px -1px rgb(var(--palette-rose-200));
}


.main-calendar-mid-day__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px oklch(var(--lch-black) / 15%);
}

.main-calendar-mid-day__dot--low {
  background: linear-gradient(90deg, rgb(var(--palette-emerald-400)), var(--color-success));
  box-shadow: 0 1px 3px rgb(var(--palette-emerald-300));
}

.main-calendar-mid-day__dot--medium {
  background: linear-gradient(90deg, rgb(var(--palette-amber-400)), rgb(var(--palette-orange-500)));
  box-shadow: 0 1px 3px rgb(var(--palette-amber-300));
}

.main-calendar-mid-day__dot--high {
  background: linear-gradient(90deg, rgb(var(--palette-rose-400)), var(--color-danger));
  box-shadow: 0 1px 3px rgb(var(--palette-rose-300));
}

@media (min-width: 640px) {
  .main-calendar-header {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }

  .main-calendar-mid-events {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 768px) {
  .main-calendar-nav__today {
    display: block;
  }

  .main-calendar-nav__divider {
    display: none;
  }
}

@media (min-width: 1024px) {
  .main-calendar-header-shell,
  .main-calendar-frame {
    flex: 1 1 auto;
  }

  .main-calendar-header {
    flex: none;
  }

  .main-calendar-large {
    flex: 1 1 auto;
  }

  .main-calendar-large__matrix {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
  }

  .main-calendar-mid,
  .main-calendar-mid-events {
    display: none;
  }
}