.triggerWrap {
  display: inline-block;
}

.triggerWrapFullWidth {
  display: block;
  width: 100%;
}

.compactTriggerField {
  padding-block: 2px;
}

.panel {
  display: grid;
  grid-template-columns: 1fr;
  width: fit-content;
  gap: 8px;
  padding: 8px;
  background: var(--color-bg-surface);
}

.panelWithPresets {
  grid-template-columns: 140px 1fr;
}

.presetsCol {
  border-right: 1px solid var(--color-border-default);
  padding-right: 8px;
}

.presetsLabel {
  font-size: 12px;
  color: var(--color-fg-muted);
  margin: 4px 0 6px;
}

.presetsList {
  display: grid;
  gap: 6px;
}

.calendarArea {
  display: grid;
  width: max-content;
  gap: 8px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px;
}

.headerTitle {
  font-weight: var(--font-weight-semibold);
}

.weekRow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.weekCell {
  text-align: center;
  font-size: 12px;
  color: var(--color-fg-muted);
  padding: 2px 0;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  outline: none;
}

/* Day cell */
.dayCell {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--border-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-default);
}

.dayCell:disabled {
  cursor: not-allowed;
}

.dayInMonth {
  color: var(--color-fg-default);
}

.dayOutside {
  color: var(--color-fg-muted);
}

.dayDisabled {
  color: var(--color-disabled-fg);
}

.daySelected {
  background: var(--color-brand);
  color: var(--color-fg-on-brand);
}

.dayInRange:not(.daySelected) {
  background: var(--color-bg-selected);
}

.dayToday {
  outline: 1px solid var(--color-border-selected);
  outline-offset: 1px;
}

/* Time row */
.timeRow {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.timeLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg-muted);
}

.timeSelect {
  height: 32px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--border-radius-md);
  background: var(--color-bg-surface);
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
}