/* Shared date controls only; no Bootstrap dependency or inline positioning. */
.date-picker-control { display: flex; align-items: center; gap: .375rem; max-width: 100%; }
.date-picker-control > input { flex: 1 1 auto; min-width: 0; margin: 0; }
/* Colour tokens: the Django admin's own variables (light and dark themes) where they exist, the app's colours
   otherwise. The trigger sits next to the field, outside the dialog, so it gets them too. */
.date-picker, .date-picker-control { --dp-bg: var(--body-bg, #fff); --dp-text: var(--body-fg, #0f172a);
  --dp-border: var(--hairline-color, #e2e8f0); --dp-border-strong: var(--border-color, #cbd5e1);
  --dp-hover: var(--darkened-bg, #f1f5f9); --dp-accent: #b7791f; }
.date-picker-trigger { flex: 0 0 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--dp-border-strong); border-radius: .6rem; background: var(--dp-bg); color: var(--dp-text); cursor: pointer; }
.date-picker-trigger:hover { background: var(--dp-hover); }
.date-picker-trigger:disabled { opacity: .5; cursor: default; }  /* e.g. inside a disabled fieldset */
.date-picker {
  box-sizing: border-box; width: min(25rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 1rem;
  margin: auto; overflow: auto; border: 1px solid var(--dp-border); border-radius: 18px;
  background: var(--dp-bg); color: var(--dp-text); box-shadow: 0 20px 60px rgba(10,17,40,.25);
  font: 400 1rem/1.5 "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif; text-align: start; }
.date-picker::backdrop { background: rgba(10,17,40,.5); }
.date-picker *, .date-picker *::before, .date-picker *::after { box-sizing: border-box; }
.date-picker button, .date-picker select { font: inherit; color: inherit; }
.date-picker button { cursor: pointer; }
.date-picker button:disabled, .date-picker option:disabled { opacity: .35; cursor: default; }
.date-picker button:focus-visible, .date-picker select:focus-visible, .date-picker-trigger:focus-visible { outline: 3px solid #0a58ca; outline-offset: 2px; }
.date-picker-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.date-picker-heading h2, .date-picker-body > h2 { margin: 0; font-family: inherit; font-size: 1.2rem; font-weight: 800; line-height: 1.5; color: inherit; }
.date-picker-engine { font-size: .75rem; opacity: .7; }
.date-picker-calendars { display: flex; gap: .5rem; margin-bottom: .75rem; }
.date-picker-calendars .date-picker-button { flex: 1; }
.date-picker-button { min-height: 44px; padding: .4rem .75rem; border: 1px solid var(--dp-border); border-radius: .7rem; background: var(--dp-bg); }
.date-picker-button:hover { border-color: var(--dp-accent); }
/* The chosen calendar: the theme's own text and background swapped (the strongest contrast in light and dark), plus a
   thick accent edge that does not depend on colour alone. */
.date-picker-button[aria-pressed="true"] { background: var(--dp-text); color: var(--dp-bg); border-color: var(--dp-text); font-weight: 700; box-shadow: inset 0 -4px 0 #f59e0b; }
.date-picker-navigation { display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.date-picker-arrow { flex: 0 0 44px; min-width: 44px; min-height: 44px; border: 1px solid var(--dp-border); border-radius: .7rem; background: var(--dp-bg); }
.date-picker-arrow span { display: block; font: 2rem/1 sans-serif; }
[dir="rtl"] .date-picker-arrow span { transform: rotate(180deg); }
.date-picker-selects { display: flex; flex: 1; gap: .3rem; min-width: 0; }
.date-picker-selects select { min-width: 0; min-height: 44px; padding: .25rem; margin: 0; border: 1px solid var(--dp-border); border-radius: .5rem; background: var(--dp-bg); }
.date-picker-selects select:first-of-type { flex: 1 1 auto; }
.date-picker-selects select:last-of-type { flex: 0 1 6rem; }
.date-picker-grid { table-layout: fixed; border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; background: transparent; }
.date-picker-grid tr { background: transparent; }
.date-picker-grid th, .date-picker-grid td { width: 14.2857%; padding: 1px; border: 0; text-align: center; color: inherit; background: transparent; font: inherit; }
.date-picker-grid th { padding-block: .35rem; font-size: .72rem; font-weight: 700; }
.date-picker-day { display: block; width: 100%; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: .6rem; background: transparent; font-variant-numeric: tabular-nums; }
.date-picker-day:hover { background: var(--dp-hover); }
.date-picker-today { border-color: var(--dp-accent); }
.date-picker-grid td[aria-selected="true"] .date-picker-day { background: #f59e0b; color: #0a1128; font-weight: 800; }
.date-picker-selection { margin: .65rem 0; min-height: 1.5em; font-size: .82rem; text-align: center; unicode-bidi: isolate; }
.date-picker-selection.date-picker-preview { font-weight: 700; }
.date-picker-selection > span { display: inline-block; unicode-bidi: isolate; white-space: nowrap; }
.date-picker-kept { margin: .5rem 0; font-size: .8rem; }
.date-picker-actions, .date-picker-footer { display: flex; justify-content: space-between; gap: .5rem; }
.date-picker-footer { justify-content: flex-end; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--dp-border); }
.date-picker-status { margin: .5rem 0 0; font-size: .8rem; }
.date-picker-status:empty { display: none; }
.date-picker[aria-busy="true"] .date-picker-grid { opacity: .55; }
.date-picker-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 374px) { .date-picker { padding: .65rem; } .date-picker-navigation { gap: .2rem; } }
@media (prefers-reduced-motion: no-preference) { .date-picker-trigger, .date-picker-button { transition: border-color .15s, background-color .15s; } }