.leave-date-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 100%; }
.leave-date-range .date-pair { margin: 0; min-width: 0; }
.leave-date-range input[type="date"] { min-width: 0; max-width: 100%; }
.leave-range-open { white-space: nowrap; }
.dp-panel.leave-range-panel { position: fixed; width: 320px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
.leave-range-panel .dp-grid { gap: 0; }
.leave-range-panel .dp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.leave-range-panel .dp-head select { flex: 1 1 auto; min-width: 0; max-width: 100%; width: auto; height: 36px; min-height: 36px; margin: 0; padding: 4px; }
/* Keep the longest native option's intrinsic width; narrow headers can wrap. */
.leave-range-panel .dp-head .dp-month { flex: 1 0 auto; min-width: min(7rem, 100%); }
.leave-range-panel .dp-head .dp-year { flex: 0 0 5rem; }
.leave-range-panel .dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.leave-range-row { display: contents; }
.leave-range-cell { display: flex; justify-content: center; min-width: 0; min-height: 40px; margin: 2px 0; }
.leave-range-cell.is-selected { background: var(--chip); background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.leave-range-cell.is-start { border-radius: 50% 0 0 50%; }
.leave-range-cell.is-end { border-radius: 0 50% 50% 0; }
.leave-range-cell.is-start.is-end { border-radius: 50%; }
.leave-range-panel .dp-day { width: 100%; min-width: 0; height: 40px; min-height: 40px; padding: 0; margin: 0; border: 0; border-radius: 50%; font: inherit; box-sizing: border-box; }
.leave-range-cell.is-start .dp-day, .leave-range-cell.is-end .dp-day { background: var(--accent); color: var(--on-primary); font-weight: 700; }
.leave-range-panel .dp-day:focus-visible { outline: 2px solid var(--heading); outline-offset: -2px; }
.leave-range-panel .dp-dow { padding-bottom: 6px; }
.leave-range-panel .dp-nav { width: 36px; height: 36px; min-height: 36px; padding: 0; flex: 0 0 auto; }
.leave-range-panel .dp-foot .dp-link { border: 0; background: none; min-height: 36px; padding: 4px 6px; }
.leave-range-done { min-height: 36px; }
@media (max-width: 600px) {
  .leave-date-range { width: 100%; }
  .leave-date-range .date-pair { width: 100%; }
  .leave-date-range input[type="date"] { width: 100%; box-sizing: border-box; }
}
@media print { .leave-range-open, .leave-range-panel { display: none; } }