.calendar-page {
  color: #1f2937;
  padding-bottom: 2rem;
}

.calendar-page h1,
.schedule-equipment-picker h2,
.blocking-card h2 {
  margin: 0;
}

.calendar-subscribe-card,
.calendar-stat-card,
.calendar-card,
.schedule-equipment-picker,
.blocking-card {
  border: 1px solid #e1e7ef;
  border-radius: .5rem;
  background: #ffffff;
}

.calendar-subscribe-card {
  overflow: hidden;
}

.calendar-subscribe-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: .95rem 1.2rem;
  cursor: pointer;
  list-style: none;
}

.calendar-subscribe-summary::-webkit-details-marker {
  display: none;
}

.calendar-subscribe-summary::after {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9e1ec;
  border-radius: 50%;
  background: #f8fafc;
  color: #1f2937;
  content: "+";
  font-size: 1.05rem;
  font-weight: 800;
}

.calendar-subscribe-card[open] .calendar-subscribe-summary {
  border-bottom: 1px solid #e1e7ef;
}

.calendar-subscribe-card[open] .calendar-subscribe-summary::after {
  content: "-";
}

.calendar-subscribe-summary span,
.calendar-subscribe-summary small {
  display: block;
}

.calendar-subscribe-summary span {
  color: #18243a;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.calendar-subscribe-summary small {
  margin-top: .2rem;
  color: #64748b;
  font-size: .78rem;
  font-weight: 800;
}

.calendar-subscribe-content {
  padding: 1rem 1.2rem 1.2rem;
}

.calendar-subscribe-card p {
  margin: 0 0 1.05rem;
  color: #64748b;
  font-weight: 600;
}

.calendar-subscribe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.calendar-subscribe-card .form-label {
  color: #64748b;
  font-size: .86rem;
  font-weight: 800;
}

.calendar-subscribe-card .form-control {
  height: 2.6rem;
  font-weight: 600;
}

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

.calendar-view-switch {
  width: fit-content;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
  padding: .25rem;
  border: 1px solid #d9e1ec;
  border-radius: .5rem;
  background: #f1f5f9;
}

.calendar-view-option {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border-radius: .35rem;
  color: #64748b;
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
}

.calendar-view-option:hover {
  color: #1f2937;
}

.calendar-view-option.is-active {
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(15 23 42 / 10%);
  color: #1f2937;
}

.calendar-view-option svg {
  width: .95rem;
  height: .95rem;
  flex: 0 0 .95rem;
  fill: currentColor;
}

.calendar-stat-card {
  min-height: 5.2rem;
  padding: .95rem 1rem;
}

.calendar-stat-card strong,
.calendar-stat-card span {
  display: block;
}

.calendar-stat-card strong {
  color: #1f2937;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.calendar-stat-card span {
  margin-top: .45rem;
  color: #64748b;
  font-size: .84rem;
  font-weight: 750;
}

.calendar-card {
  overflow: hidden;
}

.calendar-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid #e1e7ef;
}

.calendar-navigation {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.calendar-navigation strong,
.calendar-navigation span {
  display: block;
}

.calendar-navigation strong {
  color: #1f2937;
  font-size: 1.05rem;
  font-weight: 800;
}

.calendar-navigation span {
  color: #64748b;
  font-size: .82rem;
  font-weight: 700;
}

.calendar-nav-button {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9e1ec;
  border-radius: .4rem;
  background: #ffffff;
  color: #1f2937;
  font-weight: 800;
  text-decoration: none;
}

.calendar-nav-button:hover {
  background: #f7f9fc;
  color: #1f2937;
}

.apple-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: #e1e7ef;
  gap: 1px;
}

.apple-calendar-weekday {
  padding: .8rem .5rem;
  background: #ffffff;
  color: #64748b;
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

.apple-calendar-day {
  min-height: 168px;
  padding: .75rem;
  background: #ffffff;
}

.apple-calendar-day.is-muted {
  background: #fbfcfe;
}

.apple-calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.5rem;
}

.apple-calendar-day-head span {
  color: #1f2937;
  font-size: .95rem;
  font-weight: 800;
}

.apple-calendar-day-head small {
  color: #64748b;
  font-size: .82rem;
  font-weight: 800;
}

.apple-calendar-day.is-muted .apple-calendar-day-head span,
.apple-calendar-day.is-muted .apple-calendar-day-head small {
  color: #7a8798;
}

.apple-calendar-day.is-today .apple-calendar-day-head span {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #5865dc;
  color: #ffffff;
}

.apple-calendar-events {
  display: grid;
  gap: .48rem;
  margin-top: .65rem;
}

.apple-calendar-event {
  display: grid;
  gap: .08rem;
  min-width: 0;
  padding: .55rem .62rem;
  border: 1px solid #bfdbfe;
  border-radius: .45rem;
  background: #eaf6ff;
  color: #24415f;
  text-decoration: none;
}

.apple-calendar-event:hover {
  background: #dff0ff;
  color: #24415f;
}

.apple-calendar-event.is-delivery {
  border-color: #bfdbfe;
  background: #eaf6ff;
  color: #1e4d78;
}

.apple-calendar-event.is-self_pickup {
  border-color: #ddd6fe;
  background: #f2ecff;
  color: #3f2d77;
}

.apple-calendar-event.is-collection {
  border-color: #fed7aa;
  background: #fff4e8;
  color: #8a4814;
}

.apple-calendar-event.is-self_return {
  border-color: #a7f3d0;
  background: #eafbf3;
  color: #176348;
}

.apple-calendar-event-title,
.apple-calendar-event-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.occupancy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid #e1e7ef;
  background: #f8fafc;
}

.occupancy-legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #64748b;
  font-size: .76rem;
  font-weight: 800;
}

.occupancy-legend i {
  width: .7rem;
  height: .7rem;
  display: inline-block;
  border-radius: .2rem;
}

.occupancy-legend i.is-reservation,
.occupancy-segment.is-reservation {
  border-color: #bfdbfe;
  background: #dbeafe;
  color: #1e4d78;
}

.occupancy-legend i.is-booking,
.occupancy-segment.is-booking {
  border-color: #c4b5fd;
  background: #ede9fe;
  color: #49318c;
}

.occupancy-legend i.is-blocking,
.occupancy-segment.is-blocking {
  border-color: #fcd34d;
  background: #fef3c7;
  color: #854d0e;
}

.occupancy-empty {
  padding: 2.5rem 1rem;
  color: #64748b;
  font-weight: 700;
  text-align: center;
}

.occupancy-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.occupancy-timeline {
  min-width: 76rem;
}

.occupancy-grid {
  display: grid;
  grid-template-columns: 15rem repeat(var(--occupancy-days), minmax(2.25rem, 1fr));
}

.occupancy-grid-head {
  border-bottom: 1px solid #d9e1ec;
  background: #ffffff;
}

.occupancy-equipment-head,
.occupancy-equipment-label {
  position: sticky;
  left: 0;
  z-index: 4;
  border-right: 1px solid #d9e1ec;
  background: #ffffff;
}

.occupancy-equipment-head {
  display: flex;
  align-items: center;
  padding: .65rem .85rem;
  color: #64748b;
  font-size: .76rem;
  font-weight: 850;
}

.occupancy-day-head {
  min-height: 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  border-right: 1px solid #eef2f7;
  color: #64748b;
}

.occupancy-day-head small,
.occupancy-day-head strong {
  display: block;
  line-height: 1;
}

.occupancy-day-head small {
  font-size: .65rem;
  font-weight: 750;
}

.occupancy-day-head strong {
  color: #1f2937;
  font-size: .78rem;
  font-weight: 850;
}

.occupancy-day-head.is-weekend,
.occupancy-day-cell.is-weekend {
  background: #f8fafc;
}

.occupancy-day-head.is-today strong {
  width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #5865dc;
  color: #ffffff;
}

.occupancy-row {
  min-height: 3rem;
  position: relative;
  border-bottom: 1px solid #e8edf4;
  background: #ffffff;
}

.occupancy-row:last-child {
  border-bottom: 0;
}

.occupancy-equipment-label {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .4rem .75rem;
}

.occupancy-equipment-label strong,
.occupancy-equipment-label span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.occupancy-equipment-label strong {
  color: #1f2937;
  font-size: .8rem;
  font-weight: 850;
}

.occupancy-equipment-label span {
  margin-top: .15rem;
  color: #64748b;
  font-size: .7rem;
  font-weight: 700;
}

.occupancy-day-cell {
  grid-row: 1;
  border-right: 1px solid #eef2f7;
}

.occupancy-day-cell.is-today {
  box-shadow: inset 1px 0 #c7d2fe, inset -1px 0 #c7d2fe;
}

.occupancy-segment {
  min-width: 0;
  grid-row: 1;
  z-index: 2;
  align-self: center;
  margin: 0 .12rem;
  padding: .32rem .42rem;
  overflow: hidden;
  border: 1px solid;
  border-radius: .35rem;
  font-size: .7rem;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none;
}

.occupancy-segment:hover {
  color: inherit;
  filter: brightness(.97);
}

.occupancy-segment span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apple-calendar-event-title {
  font-size: .8rem;
  font-weight: 800;
}

.apple-calendar-event-meta {
  color: inherit;
  font-size: .74rem;
  font-weight: 700;
  opacity: .74;
}

.schedule-all-day-switch {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding-left: 2.7rem;
}

.schedule-equipment-picker {
  padding: 1rem;
}

.schedule-selected-equipment {
  display: grid;
  gap: .5rem;
}

.schedule-selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .8rem;
  border: 1px solid #e1e7ef;
  border-radius: .45rem;
  background: #f8fafc;
}

.schedule-selected-item.is-unavailable {
  align-items: flex-start;
  border-color: #f8c7c7;
  background: #fff5f5;
}

.schedule-selected-text {
  min-width: 0;
}

.schedule-selected-text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.schedule-selected-text small {
  display: block;
  margin-top: .2rem;
  color: #b42318;
  font-size: .76rem;
  font-weight: 700;
}

.schedule-selected-text small.d-none {
  display: none;
}

.schedule-selected-item button {
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-weight: 800;
  line-height: 1;
}

.schedule-quantity-list {
  display: grid;
  gap: .55rem;
}

.schedule-quantity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: .75rem;
  align-items: center;
  padding: .7rem .8rem;
  border: 1px solid #e1e7ef;
  border-radius: .45rem;
  background: #f8fafc;
}

.schedule-quantity-item.is-unavailable {
  border-color: #f8c7c7;
  background: #fff5f5;
}

.schedule-quantity-item.is-unavailable small {
  color: #b42318;
}

.schedule-quantity-item strong,
.schedule-quantity-item small {
  display: block;
}

.schedule-quantity-item strong {
  color: #18243a;
  font-size: .9rem;
  font-weight: 850;
}

.schedule-quantity-item small {
  margin-top: .15rem;
  color: #64748b;
  font-size: .75rem;
  font-weight: 700;
}

.schedule-quantity-item .form-control {
  text-align: center;
  font-weight: 850;
}

.schedule-selected-item button:hover {
  background: #cbd5e1;
}

.blocking-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid #e1e7ef;
  border-radius: .5rem;
  background: #f8fafc;
}

.blocking-filter-bar .offer-checkline {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.blocking-card-list {
  display: grid;
  gap: .85rem;
}

.blocking-card {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  overflow: hidden;
}

.blocking-date-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  padding: 1rem;
  border-right: 1px solid #e1e7ef;
  background: #f8fafc;
}

.blocking-date-tile span,
.blocking-date-tile strong {
  display: block;
}

.blocking-date-tile span {
  color: #1f2937;
  font-size: 1.12rem;
  font-weight: 800;
}

.blocking-date-tile strong {
  color: #64748b;
  font-size: .8rem;
  font-weight: 800;
}

.blocking-card-body {
  min-width: 0;
  padding: 1rem;
}

.blocking-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.blocking-type {
  display: inline-flex;
  margin-bottom: .4rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: #edf8ff;
  color: #24415f;
  font-size: .72rem;
  font-weight: 800;
}

.blocking-card h2 {
  font-size: 1rem;
  font-weight: 800;
}

.blocking-equipment {
  margin-top: .75rem;
  color: #1f2937;
  font-weight: 750;
}

.blocking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .75rem;
}

.blocking-meta span {
  padding: .22rem .55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: .78rem;
  font-weight: 800;
}

.blocking-list-actions {
  display: flex;
  flex: 0 0 auto;
  gap: .35rem;
}

@media (max-width: 1199.98px) {
  .apple-calendar-grid {
    min-width: 1080px;
  }

  .calendar-card {
    overflow-x: auto;
  }

  .calendar-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .calendar-card-header,
  .blocking-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-view-switch {
    width: 100%;
  }

  .blocking-card {
    grid-template-columns: 1fr;
  }

  .schedule-quantity-item {
    grid-template-columns: 1fr;
  }

  .blocking-date-tile {
    border-right: 0;
    border-bottom: 1px solid #e1e7ef;
  }
}