.air-datetime-field { position: relative; }
.air-datetime-trigger { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-primary); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.air-datetime-trigger:not(:disabled):hover { border-color: var(--color-border-strong); }
.air-datetime-trigger:focus-visible { border-color: var(--color-accent); outline: 0; box-shadow: 0 0 0 3px var(--color-accent-soft); }
.air-datetime-trigger:disabled { background: var(--color-surface-muted); color: var(--color-text-secondary); cursor: not-allowed; }
.air-datetime-trigger:disabled .air-datetime-trigger__chevron { background: var(--color-text-tertiary); }
.air-datetime-trigger__calendar { width: 17px; height: 17px; flex: 0 0 17px; color: var(--color-accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.air-datetime-trigger__label { min-width: 0; flex: 1 1 auto; padding-right: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.air-datetime-trigger__label.is-empty { color: var(--color-text-secondary); }
.air-datetime-trigger__clear { position: absolute; z-index: 2; top: 50%; right: 32px; display: grid; width: 24px; height: 24px; padding: 0; appearance: none; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 0; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.air-datetime-trigger__clear::before,
.air-datetime-trigger__clear::after { position: absolute; display: block; width: 10px; height: 1.5px; border-radius: var(--radius-round); background: currentColor; content: ""; }
.air-datetime-trigger__clear::before { transform: rotate(45deg); }
.air-datetime-trigger__clear::after { transform: rotate(-45deg); }
.air-datetime-trigger__clear[hidden] { display: none; }
.air-datetime-trigger__chevron { width: 10px; height: 8px; flex: 0 0 10px; margin-right: 1px; background: var(--color-text-secondary); -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; }
.air-datetime-popover { position: fixed; z-index: 100000; display: flex; overflow: hidden; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: 0 12px 32px rgba(16, 12, 13, .16); }
.air-datetime-popover[hidden] { display: none; }
.air-datetime-popover__main { min-width: 0; flex: 1 1 auto; padding-right: 8px; }
.air-datetime-popover--date-only .air-datetime-popover__main { padding-right: 0; }
.air-datetime-popover .air-datepicker { z-index: 100001; width: 100%; border: 0; background: transparent; box-shadow: none; }
.air-datetime-popover .air-datepicker--content { padding: 4px; }
.air-datetime-popover .air-datepicker-nav { border-bottom-color: var(--color-border); }
.air-datetime-popover .air-datepicker-nav--title { color: var(--color-text-primary); }
.air-datetime-popover .air-datepicker-nav--action path { stroke: var(--color-text-secondary); }
.air-datetime-popover .air-datepicker-body--day-name { color: var(--color-accent); }
.air-datetime-popover .air-datepicker-cell { color: var(--color-text-primary); }
.air-datetime-popover .air-datepicker-cell.-other-month- { color: var(--color-text-tertiary); }
.air-datetime-popover .air-datepicker-cell.-current- { color: var(--color-accent-hover); }
.air-datetime-popover .air-datepicker-cell.-selected-,
.air-datetime-popover .air-datepicker-cell.-selected-.-current- { background: var(--color-accent); color: var(--color-text-primary); }
.air-datetime-popover__time { display: flex; box-sizing: border-box; width: 90px; min-height: 40px; align-items: center; gap: 7px; margin: 4px auto 8px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.air-datetime-popover__time:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.air-datetime-popover__time .schedule-time-field__icon { display: flex; flex: 0 0 16px; align-items: center; color: var(--color-accent); pointer-events: none; }
.air-datetime-popover__time svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.air-datetime-popover__time input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--color-text-primary); font: inherit; }
.schedule-time-field--control { position: relative; display: block; min-width: 0; width: 100%; }
.schedule-time-field--control .schedule-time-input { width: 100%; padding-left: 39px; }
.schedule-time-field--control .schedule-time-field__icon { position: absolute; z-index: 1; top: 50%; left: 13px; display: flex; width: 16px; height: 16px; align-items: center; color: var(--color-accent); pointer-events: none; transform: translateY(-50%); }
.schedule-time-field--control .schedule-time-field__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schedule-time-dropdown { position: fixed; z-index: 100002; box-sizing: border-box; width: 90px; max-height: 168px; overflow-y: auto; overscroll-behavior: none; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: 0 8px 24px rgba(16, 12, 13, .14); }
.schedule-time-dropdown[hidden] { display: none; }
.schedule-time-option { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-option); background: transparent; color: var(--color-text-primary); font: inherit; font-size: var(--font-sm); line-height: 20px; text-align: left; cursor: pointer; }
.schedule-time-option + .schedule-time-option { margin-top: 4px; }
.schedule-time-option:hover { background: var(--color-surface-hover); }
.schedule-time-option.is-active { background: var(--color-accent-soft); color: var(--color-text-primary); font-weight: 600; }
.air-datetime-popover__presets { display: grid; flex: 0 0 216px; align-content: start; gap: 6px; padding-left: 10px; border-left: 1px solid var(--color-border); }
.air-datetime-popover__presets button { display: grid; min-height: 52px; align-content: center; gap: 3px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-primary); font: inherit; text-align: left; cursor: pointer; }
.air-datetime-popover__presets button:hover,
.air-datetime-popover__presets button:focus-visible { border-color: var(--color-accent); outline: 0; background: var(--color-accent-soft); }
.air-datetime-popover__presets strong { font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 500; }
.air-datetime-popover__presets span { color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); }

@media (max-width: 560px) {
  .air-datetime-popover { max-height: calc(100dvh - 16px); overflow-y: auto; }
  .air-datetime-popover__presets { flex-basis: 168px; }
}

@media (max-width: 480px) {
  .air-datetime-popover { flex-direction: column; }
  .air-datetime-popover__main { padding-right: 0; }
  .air-datetime-popover__presets { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: auto; padding: 8px 0 0; border-top: 1px solid var(--color-border); border-left: 0; }
}