/* ===== Date-time picker: month calendar followed by time dial ===== */
.dtp { position: relative; }
.dtp__field { position: relative; display: flex; align-items: center; }
.dtp__trigger {
  cursor: pointer;
  margin: 0;
  opacity: 1 !important;
}
.dtp__clear {
  position: absolute; inset-inline-end: var(--toddyi-size-0-6rem); top: var(--toddyi-size-50pct); transform: translateY(var(--toddyi-size-neg-50pct));
  background: transparent; border: none; padding: 0; margin: 0; width: auto;
  font-size: var(--toddyi-size-1-2rem); line-height: 1; color: var(--pico-muted-color); cursor: pointer;
}
.dtp__pop {
  position: absolute; z-index: 80; top: calc(var(--toddyi-size-100pct) + var(--toddyi-size-4px)); inset-inline-start: 0;
  width: var(--toddyi-size-280px); max-width: var(--toddyi-size-92vw);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--toddyi-card-shadow);
  padding: var(--toddyi-size-0-75rem);
}
.dtp__cal-head, .dtp__time-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--toddyi-size-0-5rem); margin-bottom: var(--toddyi-size-0-5rem); font-weight: 700;
}
.dtp__nav {
  background: transparent !important; border: none !important; cursor: pointer; font-size: var(--toddyi-size-1-2rem);
  padding: var(--toddyi-size-0-2rem) var(--toddyi-size-0-6rem) !important; margin: 0 !important; width: auto !important; border-radius: var(--toddyi-size-0-4rem);
  box-shadow: none !important;
}
.dtp__weekdays, .dtp__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--toddyi-size-2px); }
.dtp__weekdays span { text-align: center; font-size: var(--toddyi-size-0-7rem); padding: var(--toddyi-size-0-25rem) 0; }
.dtp__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: transparent !important; border: none !important; border-radius: var(--toddyi-size-0-4rem); cursor: pointer;
  font-size: var(--toddyi-size-0-85rem); padding: 0 !important; margin: 0 !important;
  box-shadow: none !important;
}
.dtp__day.is-today { outline: var(--toddyi-size-1px) solid var(--pico-primary) !important; outline-offset: -1px; }
.dtp__day.is-selected { background: var(--pico-primary) !important; color: var(--pico-primary-inverse) !important; }
.dtp__day.is-blank { visibility: hidden; cursor: default; }
.dtp__dials { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--toddyi-size-0-4rem); height: var(--toddyi-size-200px); margin: var(--toddyi-size-0-5rem) 0; }
.dtp__dial {
  height: var(--toddyi-size-200px); width: var(--toddyi-size-72px); overflow-y: scroll; scroll-snap-type: y mandatory;
  padding-block: var(--toddyi-size-80px); scrollbar-width: none; text-align: center;
  cursor: grab; user-select: none;
}
.dtp__dial::-webkit-scrollbar { display: none; }
.dtp__tick {
  height: var(--toddyi-size-40px); line-height: var(--toddyi-size-40px); scroll-snap-align: center;
  font-size: var(--toddyi-size-1-1rem); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.dtp__tick.is-active { font-weight: 800; font-size: var(--toddyi-size-1-4rem); }
.dtp__dial-sep { font-size: var(--toddyi-size-1-4rem); font-weight: 800; }
.dtp__dial-band {
  position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: var(--toddyi-size-80px); height: var(--toddyi-size-40px);
  border-top: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  pointer-events: none;
}

/* --- Light Mode / Default Styling --- */
.dtp__pop {
  background-color: var(--toddyi-text-on-dark) !important;
  border: var(--toddyi-size-1px) solid var(--toddyi-picker-light-border) !important;
  color: var(--toddyi-picker-light-text) !important;
}
.dtp__trigger {
  background-color: var(--toddyi-text-on-dark) !important;
  border-color: var(--toddyi-picker-light-field-border) !important;
  color: var(--toddyi-picker-light-text) !important;
}
.dtp__day {
  color: var(--toddyi-picker-light-text) !important;
}
.dtp__day:hover {
  background-color: var(--toddyi-picker-light-hover) !important;
  color: var(--toddyi-picker-light-text) !important;
}
.dtp__nav {
  color: var(--toddyi-picker-light-text) !important;
}
.dtp__nav:hover {
  background-color: var(--toddyi-picker-light-hover) !important;
}
.dtp__weekdays span {
  color: var(--toddyi-picker-light-muted) !important;
}
.dtp__tick {
  color: var(--toddyi-picker-light-dim) !important;
}
.dtp__tick.is-active {
  color: var(--toddyi-picker-light-text) !important;
}
.dtp__dial-sep {
  color: var(--toddyi-picker-light-text) !important;
}

/* --- Explicit Dark Mode Overrides (data-theme="dark") --- */
html[data-theme="dark"] .dtp__pop {
  background-color: var(--toddyi-picker-dark-bg) !important;
  border: var(--toddyi-size-1px) solid var(--toddyi-picker-dark-border) !important;
  color: var(--toddyi-picker-dark-text) !important;
}
html[data-theme="dark"] .dtp__trigger {
  background-color: var(--toddyi-picker-dark-field-bg) !important;
  border-color: var(--toddyi-picker-dark-border) !important;
  color: var(--toddyi-picker-dark-text) !important;
}
html[data-theme="dark"] .dtp__day {
  color: var(--toddyi-picker-dark-secondary) !important;
}
html[data-theme="dark"] .dtp__day:hover {
  background-color: var(--toddyi-picker-dark-border) !important;
  color: var(--toddyi-picker-dark-text) !important;
}
html[data-theme="dark"] .dtp__nav {
  color: var(--toddyi-picker-dark-text) !important;
}
html[data-theme="dark"] .dtp__nav:hover {
  background-color: var(--toddyi-picker-dark-border) !important;
}
html[data-theme="dark"] .dtp__weekdays span {
  color: var(--toddyi-picker-dark-muted) !important;
}
html[data-theme="dark"] .dtp__tick {
  color: var(--toddyi-picker-dark-dim) !important;
}
html[data-theme="dark"] .dtp__tick.is-active {
  color: var(--toddyi-picker-dark-text) !important;
}
html[data-theme="dark"] .dtp__dial-sep {
  color: var(--toddyi-picker-dark-text) !important;
}

/* --- System Preference Dark Mode Fallbacks --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .dtp__pop {
    background-color: var(--toddyi-picker-dark-bg) !important;
    border: var(--toddyi-size-1px) solid var(--toddyi-picker-dark-border) !important;
    color: var(--toddyi-picker-dark-text) !important;
  }
  html:not([data-theme="light"]) .dtp__trigger {
    background-color: var(--toddyi-picker-dark-field-bg) !important;
    border-color: var(--toddyi-picker-dark-border) !important;
    color: var(--toddyi-picker-dark-text) !important;
  }
  html:not([data-theme="light"]) .dtp__day {
    color: var(--toddyi-picker-dark-secondary) !important;
  }
  html:not([data-theme="light"]) .dtp__day:hover {
    background-color: var(--toddyi-picker-dark-border) !important;
    color: var(--toddyi-picker-dark-text) !important;
  }
  html:not([data-theme="light"]) .dtp__nav {
    color: var(--toddyi-picker-dark-text) !important;
  }
  html:not([data-theme="light"]) .dtp__nav:hover {
    background-color: var(--toddyi-picker-dark-border) !important;
  }
  html:not([data-theme="light"]) .dtp__weekdays span {
    color: var(--toddyi-picker-dark-muted) !important;
  }
  html:not([data-theme="light"]) .dtp__tick {
    color: var(--toddyi-picker-dark-dim) !important;
  }
  html:not([data-theme="light"]) .dtp__tick.is-active {
    color: var(--toddyi-picker-dark-text) !important;
  }
  html:not([data-theme="light"]) .dtp__dial-sep {
    color: var(--toddyi-picker-dark-text) !important;
  }
}

.dtp__done { width: var(--toddyi-size-100pct); margin: var(--toddyi-size-0-25rem) 0 0; }
.dtp__dial-band {
  position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: var(--toddyi-size-80px); height: var(--toddyi-size-40px);
  border-top: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  pointer-events: none;
}
.dtp__done { width: var(--toddyi-size-100pct); margin: var(--toddyi-size-0-25rem) 0 0; }

/* ===== Utilities ===== */
.text-muted { color: var(--pico-muted-color); }
.stack > * + * { margin-top: var(--toddyi-size-1rem); }
.row { display: flex; align-items: center; gap: var(--toddyi-size-0-5rem); }