/* LoopOS date picker — input chrome + AirDatepicker token re-skin (loopos-ui-v2).
   The calendar is appended to #air-datepicker-global-container (body), not inside
   .lui-date-picker, so dropdown rules target .air-datepicker at the root. */

.lui-date-picker {
  position: relative;
  width: 100%;
  max-width: var(--lui-forms-control-max-width, 420px);
}

.lui-date-picker__input {
  background: var(--color-background);
  color: var(--color-content);
  border: 1px solid var(--color-tertiary);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.lui-date-picker__input::placeholder {
  color: var(--color-content-secondary);
}

.lui-date-picker__input:focus-visible,
.lui-date-picker__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-date-picker__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lui-date-picker__icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-foreground);
}

.lui-index-filters .lui-date-picker__input,
.lui-index-toolbar .lui-date-picker__input {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
  padding-block: 0;
  padding-inline: 10px;
}

/* AirDatepicker dropdown — floating: shadow only, no border */
.air-datepicker {
  --adp-font-family: var(--font-sans);
  --adp-font-size: 13px;
  --adp-background-color: var(--color-background);
  --adp-color: var(--color-content);
  --adp-color-secondary: var(--color-content-secondary);
  --adp-accent-color: var(--color-chrome-accent);
  --adp-color-current-date: var(--color-chrome-accent);
  --adp-border-color: transparent;
  --adp-border-color-inner: var(--color-tertiary);
  --adp-background-color-hover: var(--color-secondary);
  --adp-background-color-active: var(--color-secondary);
  --adp-cell-background-color-selected: var(--color-chrome-accent);
  --adp-cell-background-color-selected-hover: color-mix(in srgb, var(--color-chrome-accent) 85%, black);
  --adp-cell-background-color-in-range: color-mix(in srgb, var(--color-chrome-accent) 22%, transparent);
  --adp-cell-background-color-in-range-hover: color-mix(in srgb, var(--color-chrome-accent) 32%, transparent);
  --adp-background-color-in-range: color-mix(in srgb, var(--color-chrome-accent) 22%, transparent);
  --adp-day-name-color: var(--color-content-secondary);
  --adp-nav-arrow-color: var(--color-foreground);
  --adp-btn-color: var(--color-chrome-accent);
  background: var(--color-background);
  color: var(--color-content);
  border: none;
  border-radius: 6px;
  box-shadow: var(--lui-shadow-floating, 0 1px 4px rgba(33, 37, 41, 0.10));
}

.air-datepicker--pointer {
  display: none;
}

.air-datepicker-nav {
  border-bottom: 1px solid var(--color-tertiary);
  color: var(--color-content);
}

.air-datepicker-nav--title,
.air-datepicker-nav--action {
  color: var(--color-content);
  border-radius: 6px;
}

.air-datepicker-nav--title:hover,
.air-datepicker-nav--action:hover {
  background: var(--color-secondary);
}

.air-datepicker-nav--action:focus-visible,
.air-datepicker-nav--title:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.air-datepicker-body--day-name {
  color: var(--color-content-secondary);
}

.air-datepicker-cell {
  color: var(--color-content);
  border-radius: 6px;
}

.air-datepicker-cell.-other-month-,
.air-datepicker-cell.-other-decade- {
  color: var(--color-foreground);
}

.air-datepicker-cell:hover,
.air-datepicker-cell.-focus- {
  background: var(--color-secondary);
}

.air-datepicker-cell.-current- {
  color: var(--color-chrome-accent);
  font-weight: 600;
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-focus-,
.air-datepicker-cell.-range-from-,
.air-datepicker-cell.-range-to- {
  background: var(--color-chrome-accent);
  color: var(--color-chrome-accent-fg);
  font-weight: 600;
}

.air-datepicker-cell.-in-range- {
  background: color-mix(in srgb, var(--color-chrome-accent) 22%, transparent);
  color: var(--color-content);
  border-radius: 0;
}

.air-datepicker-cell.-disabled- {
  color: var(--color-foreground);
  opacity: 0.4;
  cursor: not-allowed;
}

.air-datepicker-time {
  border-top: 1px solid var(--color-tertiary);
}

.air-datepicker-time--current {
  color: var(--color-content);
}

.air-datepicker-time--row input[type="range"]::-webkit-slider-thumb {
  background: var(--color-app);
}

.air-datepicker-buttons {
  border-top: 1px solid var(--color-tertiary);
}

.air-datepicker-button {
  color: var(--color-app);
  border-radius: 6px;
}

.air-datepicker-button:hover {
  background: var(--color-secondary);
}

.air-datepicker-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}