:root {
  --fdc-calendar-category-competition: #e11d48;
  --fdc-calendar-category-event: #d97706;
  --fdc-calendar-category-info: var(--fdc-color-accent-solid, #2563eb);
}

:root[data-theme='dark'] {
  --fdc-calendar-category-competition: #fb7185;
  --fdc-calendar-category-event: #fbbf24;
  --fdc-calendar-category-info: var(--fdc-color-accent-strong, #60a5fa);
}

body.calendar-page .calendar-grid-panel {
  container-name: calendar-month-panel;
  container-type: inline-size;
}

.fdc-calendar-month-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fdc-calendar-category-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--calendar-text-sub, var(--sop-text-3));
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.fdc-calendar-category-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.fdc-calendar-category-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.fdc-calendar-category-legend .is-competition {
  color: var(--fdc-calendar-category-competition);
}

.fdc-calendar-category-legend .is-event {
  color: var(--fdc-calendar-category-event);
}

.fdc-calendar-category-legend .is-info {
  color: var(--fdc-calendar-category-info);
}

@media (max-width: 900px) {
  body.shop-owner-dashboard-page {
    scroll-padding-bottom: calc(
      var(--fdc-mobile-global-nav-space, calc(73px + env(safe-area-inset-bottom, 0px)))
      + var(--fdc-mobile-fixed-ad-rendered-height, 0px)
      + var(--fdc-mobile-fixed-ad-gap, 0px)
      + 12px
    );
  }

  body.shop-owner-dashboard-page #calendarSection {
    width: 100%;
    margin-inline: 0;
    gap: 0;
  }

  body.shop-owner-dashboard-page .shop-calendar-filter-toolbar {
    margin: 0;
    padding: 12px 16px 16px;
    border-bottom: 0;
    background: var(--fdc-status-page-bg);
  }

  body.shop-owner-dashboard-page .shop-calendar-filter-toolbar .calendar-search-field {
    --fdc-search-shell-height: 48px;
    --fdc-search-shell-radius: 12px;
    --fdc-search-shell-border: transparent;
    --fdc-search-shell-hover-border: transparent;
    --fdc-search-shell-bg: color-mix(in srgb, #eef3f9 82%, #ffffff);
    --fdc-search-shell-hover-bg: color-mix(in srgb, #eef3f9 88%, #ffffff);
    --fdc-search-shell-text: var(--calendar-text);
    --fdc-search-shell-icon-color: #7b8798;
    --fdc-search-shell-placeholder: #8a96a8;
    --fdc-search-shell-input-size: 16px;
    --fdc-search-shell-input-weight: 700;
    min-height: 48px;
    width: 100%;
    max-width: none;
  }

  body.shop-owner-dashboard-page .shop-calendar-board {
    gap: 0;
  }

  body.shop-owner-dashboard-page .shop-calendar-month-panel,
  body.shop-owner-dashboard-page .shop-calendar-agenda {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: var(--sop-surface);
  }

  body.shop-owner-dashboard-page .shop-calendar-month-panel {
    border-bottom: 0;
  }

  body.shop-owner-dashboard-page .shop-calendar-agenda {
    border-top: 1px solid var(--sop-border);
    background: transparent;
  }

  body.shop-owner-dashboard-page .shop-calendar-toolbar,
  body.shop-owner-dashboard-page .shop-calendar-agenda-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sop-border);
    background: color-mix(in srgb, var(--shop-dashboard-primary) 5%, var(--sop-surface));
  }

  body.shop-owner-dashboard-page .shop-calendar-weekdays,
  body.shop-owner-dashboard-page .shop-calendar-month-grid,
  body.shop-owner-dashboard-page .shop-calendar-agenda .calendar-list {
    border-radius: 0;
  }

  body.shop-owner-dashboard-page .shop-calendar-weekdays span {
    min-height: 40px;
    padding: 12px 4px;
  }

  body.shop-owner-dashboard-page .shop-calendar-day {
    min-height: 60px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    text-align: right;
  }

  body.shop-owner-dashboard-page .shop-calendar-day-number {
    width: 28px;
    height: 28px;
    align-self: flex-end;
  }

  body.shop-owner-dashboard-page .shop-calendar-day-summary {
    min-height: 6px;
    justify-content: center;
    gap: 4px;
  }

  body.shop-owner-dashboard-page .shop-calendar-day-chip {
    display: block;
    width: 7px;
    min-width: 7px;
    min-height: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    overflow: hidden;
  }

  body.shop-owner-dashboard-page .shop-calendar-day-chip.is-competition {
    background: var(--fdc-calendar-category-competition);
  }

  body.shop-owner-dashboard-page .shop-calendar-day-chip.is-event {
    background: var(--fdc-calendar-category-event);
  }

  body.shop-owner-dashboard-page .shop-calendar-day-chip.is-info {
    background: var(--fdc-calendar-category-info);
  }

  body.shop-owner-dashboard-page .shop-calendar-agenda .calendar-list {
    max-height: none;
    background: transparent;
    padding: 12px 16px 16px;
    overflow-y: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }
}

@media (max-width: 760px) {
  body.calendar-page {
    background: var(--calendar-page-bg);
    scroll-padding-bottom: var(--fdc-mobile-global-nav-space, calc(73px + env(safe-area-inset-bottom, 0px)));
  }

  body.calendar-page .calendar-main {
    width: 100%;
    padding: 0 0 24px;
  }

  body.calendar-page .calendar-surface {
    gap: 0;
  }

  body.calendar-page .calendar-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 12px 16px 16px;
    border-bottom: 0;
    background: var(--calendar-page-bg);
  }

  body.calendar-page .calendar-toolbar-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
  }

  body.calendar-page .calendar-search-field {
    --fdc-search-shell-height: 48px;
    --fdc-search-shell-radius: 12px;
    --fdc-search-shell-border: transparent;
    --fdc-search-shell-hover-border: transparent;
    --fdc-search-shell-bg: color-mix(in srgb, #eef3f9 82%, #ffffff);
    --fdc-search-shell-hover-bg: color-mix(in srgb, #eef3f9 88%, #ffffff);
    --fdc-search-shell-text: var(--calendar-text);
    --fdc-search-shell-icon-color: #7b8798;
    --fdc-search-shell-placeholder: #8a96a8;
    --fdc-search-shell-input-size: 16px;
    --fdc-search-shell-input-weight: 700;
    min-height: 48px;
    width: 100%;
    max-width: none;
  }

  body.calendar-page .calendar-search-field .fdc-search-shell__input {
    padding-right: 14px !important;
  }

  body.calendar-page .calendar-mobile-filter-fab {
    position: relative;
    justify-self: end;
  }

  body.calendar-page .calendar-mobile-strip {
    display: none;
  }

  body.calendar-page .calendar-content {
    gap: 0;
  }

  body.calendar-page .calendar-grid-panel,
  body.calendar-page .calendar-list-panel {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  body.calendar-page .calendar-grid-panel {
    display: grid;
    border-bottom: 0;
  }

  body.calendar-page .calendar-list-panel {
    border-top: 1px solid var(--calendar-border);
    border-bottom: 0;
    background: transparent;
  }

  body.calendar-page .calendar-grid-head,
  body.calendar-page .calendar-list-head {
    padding: 12px 16px;
  }

  body.calendar-page .calendar-weekday {
    min-height: 40px;
    padding: 12px 4px;
  }

  body.calendar-page .calendar-day {
    min-height: 60px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    text-align: right;
  }

  body.calendar-page .calendar-day-number {
    width: 28px;
    height: 28px;
    align-self: flex-end;
  }

  body.calendar-page .calendar-day-summary {
    min-height: 6px;
    justify-content: center;
    gap: 4px;
  }

  body.calendar-page .calendar-day-summary-item {
    display: block;
    width: 7px;
    min-width: 7px;
    min-height: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    overflow: hidden;
  }

  body.calendar-page .calendar-day-summary-item.is-competition {
    background: var(--fdc-calendar-category-competition);
  }

  body.calendar-page .calendar-day-summary-item.is-event {
    background: var(--fdc-calendar-category-event);
  }

  body.calendar-page .calendar-day-summary-item.is-info {
    background: var(--fdc-calendar-category-info);
  }

  body.calendar-page .calendar-list-head,
  body.calendar-page .calendar-list {
    border-radius: 0;
  }

  body.calendar-page .calendar-list {
    background: transparent;
    padding: 12px 16px 16px;
  }
}

@media (max-width: 420px) {
  body.calendar-page .calendar-day,
  body.shop-owner-dashboard-page .shop-calendar-day {
    min-height: 0;
    aspect-ratio: 1;
  }

  .fdc-calendar-month-copy {
    gap: 8px;
  }

  .fdc-calendar-category-legend {
    gap: 6px;
    font-size: 10px;
  }
}

@container calendar-month-panel (max-width: 700px) {
  body.calendar-page .calendar-day {
    min-width: 0;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-align: center;
  }

  body.calendar-page .calendar-day-summary {
    width: 100%;
    min-width: 0;
    min-height: 7px;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  body.calendar-page .calendar-day-summary-item {
    display: block;
    width: 7px;
    min-width: 7px;
    min-height: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    overflow: hidden;
  }

  body.calendar-page .calendar-day-summary-item.is-competition {
    background: var(--fdc-calendar-category-competition);
  }

  body.calendar-page .calendar-day-summary-item.is-event {
    background: var(--fdc-calendar-category-event);
  }

  body.calendar-page .calendar-day-summary-item.is-info {
    background: var(--fdc-calendar-category-info);
  }
}