.calendar-content { width: min(1480px, 100%); }

.calendar-google-trigger[hidden] { display: none; }
.calendar-footer-actions { display: flex; justify-content: flex-end; margin-top: var(--ui-catalog-section-space); padding-bottom: var(--space-4); }

.calendar-section,
.calendar-agenda { width: 100%; }
.calendar-section { container: calendar-section / inline-size; }

.calendar-toolbar {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 0 var(--space-2);
}

.month-navigation { display: flex; align-items: center; gap: var(--space-1); }
.month-navigation h2 { margin: 0 0 0 var(--space-2); }
.calendar-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.calendar-toolbar-view-actions { display: flex; align-items: center; gap: var(--space-1); }

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

.calendar-weekdays {
  min-height: 48px;
  border-bottom: 1px solid var(--ui-catalog-color-border);
  background: var(--ui-catalog-color-subtle);
}

.calendar-weekdays span {
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  border-right: 1px solid var(--ui-catalog-color-border);
  color: var(--ui-catalog-color-body);
  font-size: var(--type-caption);
  font-weight: 700;
}
.calendar-weekdays span:last-child { border-right: 0; }

.calendar-grid { border-bottom: 1px solid var(--ui-catalog-color-border); }

.calendar-day {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: var(--space-2);
  border-right: 1px solid var(--ui-catalog-color-border);
  border-bottom: 1px solid var(--ui-catalog-color-border);
  background: var(--ui-catalog-calendar-cell-background);
}

.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-day.is-weekend { background: var(--ui-catalog-calendar-cell-background); }
.calendar-day.is-outside { background: var(--ui-catalog-calendar-cell-background); color: var(--ui-catalog-calendar-outside-text); }
.calendar-day:hover,
.calendar-day:focus-within { z-index: 10; }
.calendar-can-write .calendar-day { cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; }
.calendar-can-write .calendar-day:hover { background: var(--ui-catalog-calendar-cell-hover); }
.calendar-can-write .calendar-day:focus-visible { z-index: 1; outline: 2px solid var(--ui-catalog-color-text); outline-offset: -2px; }
.calendar-can-write .calendar-day.is-weekend:hover,
.calendar-can-write .calendar-day.is-outside:hover { background: var(--ui-catalog-calendar-cell-hover); }

.day-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  font-size: var(--type-caption);
  font-weight: 750;
}
.is-today .day-number { background: var(--ui-catalog-color-band); color: var(--ui-catalog-color-surface); }
.calendar-mobile-date { display: none; }

.calendar-event {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--ui-catalog-calendar-other-surface);
  color: var(--ui-catalog-calendar-other-main);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.calendar-event:hover { filter: brightness(.98); }
body[data-calendar-mode="read-only"] .calendar-event:not(a) { cursor: default; }
body[data-calendar-mode="read-only"] .calendar-event:not(a):hover { filter: none; }
.calendar-event > .calendar-event-time { font-size: var(--type-caption); font-weight: 400; opacity: .82; }
.calendar-event-time-range { display: inline-block; white-space: nowrap; }
.calendar-event strong { overflow: hidden; margin-top: 2px; font-size: var(--type-caption); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event > .calendar-booking-status { display: flex; min-width: 0; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }
.calendar-booking-status-label { overflow: hidden; font-size: var(--type-caption); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event--gig { background: var(--ui-catalog-calendar-gig-surface); color: var(--ui-catalog-calendar-gig-main); }
.calendar-event--rehearsal { background: var(--ui-catalog-calendar-rehearsal-surface); color: var(--ui-catalog-calendar-rehearsal-main); }
.calendar-event--other { background: var(--ui-catalog-calendar-other-surface); color: var(--ui-catalog-calendar-other-main); }
@container calendar-section (min-width: 761px) and (max-width: 1300px) {
  .calendar-day { padding: 4px; }
  .calendar-event { padding-inline: 4px; }
  .calendar-event > .calendar-booking-status { gap: 4px; }
  .calendar-booking-status-label { overflow: visible; line-height: 1.25; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
}
.calendar-event-tooltip {
  position: absolute;
  z-index: 100;
  bottom: calc(100% + 9px);
  left: 0;
  display: grid !important;
  width: max-content;
  min-width: 230px;
  max-width: min(300px, calc(100vw - 32px));
  gap: 5px;
  padding: 12px 14px;
  visibility: hidden;
  border: 1px solid var(--ui-catalog-calendar-tooltip-border);
  border-radius: 9px;
  background: var(--ui-catalog-calendar-tooltip-background);
  color: var(--ui-catalog-calendar-tooltip-text);
  box-shadow: var(--ui-catalog-shadow-tooltip);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  text-decoration: none;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
.calendar-event-tooltip::after {
  position: absolute;
  top: 100%;
  left: 20px;
  border: 7px solid transparent;
  border-top-color: var(--ui-catalog-calendar-tooltip-background);
  content: "";
}
.calendar-event:hover .calendar-event-tooltip,
.calendar-event:focus-visible .calendar-event-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.calendar-day:nth-child(7n) .calendar-event-tooltip,
.calendar-day:nth-child(7n-1) .calendar-event-tooltip { right: 0; left: auto; }
.calendar-day:nth-child(7n) .calendar-event-tooltip::after,
.calendar-day:nth-child(7n-1) .calendar-event-tooltip::after { right: 20px; left: auto; }
.calendar-event-tooltip .calendar-event-tooltip-type {
  color: var(--ui-catalog-calendar-tooltip-meta);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.calendar-event-tooltip .calendar-event-tooltip-title {
  overflow: visible;
  margin: 0;
  color: var(--ui-catalog-calendar-tooltip-text);
  font-size: 15px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}
.calendar-event-tooltip .calendar-event-tooltip-detail {
  color: var(--ui-catalog-calendar-tooltip-meta);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 1;
  overflow-wrap: anywhere;
}

.calendar-agenda {
  display: none;
}
.calendar-view-agenda .calendar-weekdays,
.calendar-view-agenda .calendar-grid { display: none; }
.calendar-view-agenda .calendar-agenda { display: block; }

.calendar-empty { padding: var(--space-4) var(--space-2); border-block: 1px solid var(--ui-catalog-color-border); color: var(--ui-catalog-color-meta); text-align: center; }

.calendar-dialog-open { overflow: hidden; }
.calendar-form-section { padding: var(--space-4) 0; border-bottom: 1px solid var(--ui-catalog-color-border); }
.calendar-form-section:last-child { border-bottom: 0; }
.calendar-form-section > header { margin-bottom: var(--space-2); }
.calendar-form-section h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.calendar-form-section header p { margin: 4px 0 0; color: var(--ui-catalog-color-meta); font-size: var(--type-caption); }
.calendar-form-section label { display: grid; min-height: 58px; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: var(--space-3); border-top: 1px solid var(--ui-catalog-color-border); }
.calendar-form-section label:last-child { border-bottom: 1px solid var(--ui-catalog-color-border); }
.calendar-form-section label b { color: var(--ui-catalog-color-band); }
.calendar-form-section textarea { min-height: 116px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.calendar-form-toggle > span:last-child { display: flex; align-items: center; gap: 10px; color: var(--ui-catalog-color-text); font-size: var(--type-small); font-weight: 650; }
.calendar-form-toggle input { width: 20px; height: 20px; padding: 0; accent-color: var(--ui-catalog-color-text); }
.calendar-form-time[hidden] { display: none; }
.calendar-form-textarea { align-items: start !important; padding: 10px 0; }
.calendar-form-textarea > span:first-child { padding-top: 10px; }
.calendar-form-message, .calendar-google-message { margin: 0; padding: 10px var(--space-4); background: var(--ui-catalog-status-success-surface); color: var(--ui-catalog-status-success-main); font-size: var(--type-caption); font-weight: 700; }
.calendar-form-message.is-error, .calendar-google-message.is-error { background: var(--ui-catalog-color-danger-surface); color: var(--ui-catalog-color-danger); }
.calendar-google-message { margin-top: var(--space-3); }
.calendar-google-name { margin: var(--space-2) 0 0; font-size: 24px; letter-spacing: -.025em; }
.calendar-google-description { margin: var(--space-1) 0 var(--space-3); color: var(--ui-catalog-color-body); line-height: 1.55; }
.calendar-google-details { margin: 0; border-top: 1px solid var(--ui-catalog-color-border); }
.calendar-google-details div { display: grid; min-height: 54px; grid-template-columns: 180px 1fr; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--ui-catalog-color-border); }
.calendar-google-details dt { color: var(--ui-catalog-color-meta); font-size: var(--type-caption); font-weight: 700; }
.calendar-google-details dd { margin: 0; font-size: var(--type-small); font-weight: 650; }
@media (max-width: 1180px) {
  .calendar-day { min-height: 116px; padding: var(--space-1); }
  .calendar-event { padding-inline: var(--space-1); }
}

@media (max-width: 760px) {
  .calendar-heading-actions { align-self: flex-end; margin-top: 0; }
  .calendar-toolbar { align-items: stretch; flex-direction: column; padding-bottom: var(--space-3); }
  .month-navigation { flex-wrap: wrap; }
  .month-navigation h2 { flex: 1; min-width: 190px; }
  .calendar-toolbar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .calendar-toolbar-view-actions { flex: 1 1 260px; }
  .calendar-toolbar-view-actions { display: none; }
  .view-switch { flex: 1; }
  .calendar-weekdays { display: none; }
  .calendar-grid { display: block; border-bottom: 1px solid var(--ui-catalog-color-border); }
  .calendar-grid, .calendar-weekdays { display: none; }
  .calendar-agenda { display: block; }
  .calendar-day, .calendar-day.is-weekend, .calendar-day.is-outside {
    display: none;
    min-height: 0;
    padding: var(--space-2) 0;
    border: 0;
    border-bottom: 1px solid var(--ui-catalog-color-border);
    background: transparent;
  }
  .calendar-day.has-event, .calendar-day.is-today { display: grid; grid-template-columns: 1fr; }
  .calendar-day.is-outside:not(.is-today) { display: none; }
  .calendar-day:nth-last-child(-n+7) { border-bottom: 1px solid var(--ui-catalog-color-border); }
  .day-number { display: none; }
  .calendar-mobile-date { display: block; margin-bottom: var(--space-1); color: var(--ui-catalog-color-body); font-size: var(--type-caption); font-weight: 750; }
  .calendar-event { min-height: 52px; margin-top: 0; }
  .calendar-event-tooltip { display: none !important; }
  .calendar-form-section { padding: var(--space-3) 0; }
  .calendar-form-section label { min-height: 0; grid-template-columns: 1fr; gap: 5px; padding: 10px 0; }
  .calendar-form-textarea > span:first-child { padding-top: 0; }
}

@container calendar-section (max-width: 760px) {
  .calendar-toolbar { align-items: stretch; flex-direction: column; padding-bottom: var(--space-3); }
  .month-navigation { flex-wrap: wrap; }
  .month-navigation h2 { flex: 1; min-width: 190px; }
  .calendar-toolbar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .calendar-toolbar-view-actions { flex: 1 1 260px; }
  .calendar-toolbar-view-actions { display: none; }
  .view-switch { flex: 1; }
  .calendar-weekdays { display: none; }
  .calendar-grid { display: block; border-bottom: 1px solid var(--ui-catalog-color-border); }
  .calendar-grid, .calendar-weekdays { display: none; }
  .calendar-agenda { display: block; }
  .calendar-day, .calendar-day.is-weekend, .calendar-day.is-outside { display: none; min-height: 0; padding: var(--space-2) 0; border: 0; border-bottom: 1px solid var(--ui-catalog-color-border); background: transparent; }
  .calendar-day.has-event, .calendar-day.is-today { display: grid; grid-template-columns: 1fr; }
  .calendar-day.is-outside:not(.is-today) { display: none; }
  .calendar-day:nth-last-child(-n+7) { border-bottom: 1px solid var(--ui-catalog-color-border); }
  .day-number { display: none; }
  .calendar-mobile-date { display: block; margin-bottom: var(--space-1); color: var(--ui-catalog-color-body); font-size: var(--type-caption); font-weight: 750; }
  .calendar-event { min-height: 52px; margin-top: 0; }
  .calendar-event-tooltip { display: none !important; }
}

html[data-ui-catalog-qa="calendar-toolbar-actions-regression"] .calendar-filters [data-calendar-create] { order: -1; }
html[data-ui-catalog-qa="calendar-toolbar-group-gap-regression"] .calendar-toolbar-actions { gap: var(--space-1); }
html[data-ui-catalog-qa="calendar-color-role-regression"] .calendar-day { background: var(--ui-catalog-calendar-cell-hover); }
html[data-ui-catalog-qa="calendar-booking-status-regression"] .calendar-event[data-calendar-source="booking"] [data-ui-catalog-component="status-dot"] { background: var(--ui-catalog-color-danger); }
html[data-ui-catalog-qa="calendar-booking-card-color-regression"] .calendar-event[data-calendar-source="booking"] { background: var(--ui-catalog-color-danger-surface); color: var(--ui-catalog-color-danger); }
html[data-ui-catalog-qa="calendar-month-width-probe"][data-ui-catalog-qa-table-width="1201"] .calendar-section { width: 1201px !important; max-width: none !important; }
html[data-ui-catalog-qa="calendar-month-width-probe"][data-ui-catalog-qa-table-width="1200"] .calendar-section { width: 1200px !important; max-width: none !important; }
html[data-ui-catalog-qa="calendar-month-width-probe"][data-ui-catalog-qa-table-width="1301"] .calendar-section { width: 1301px !important; max-width: none !important; }
html[data-ui-catalog-qa="calendar-month-width-probe"][data-ui-catalog-qa-table-width="1300"] .calendar-section { width: 1300px !important; max-width: none !important; }
html[data-ui-catalog-qa="calendar-month-width-probe"][data-ui-catalog-qa-table-width="761"] .calendar-section { width: 761px !important; max-width: none !important; }
html[data-ui-catalog-qa="calendar-month-width-probe"][data-ui-catalog-qa-table-width="760"] .calendar-section { width: 760px !important; max-width: none !important; }