.date-control { position: relative; width: 100%; min-width: 0; }
.date-control input.date-control-native { position: absolute !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; pointer-events: none; }
.date-control input.date-control-input { width: 100%; min-width: 0; min-height: 52px; padding: 13px 58px 13px 15px; border: 1px solid var(--field-border, var(--line)); border-radius: 8px; background: var(--white); color: var(--ink); font: 400 .95rem/1.5 var(--font-body); font-variant-numeric: tabular-nums; }
.date-control input.date-control-input::placeholder { color: var(--ink-soft); opacity: 1; }
.date-control input.date-control-input:hover:not(:disabled) { border-color: var(--green-text); }
.date-control input.date-control-input:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
.date-control input.date-control-input:disabled { background: var(--mint); color: var(--ink-soft); cursor: not-allowed; }
.date-control-toggle { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 42px; height: 42px; min-height: 42px; padding: 10px; border: 0; border-radius: 6px; color: var(--green-text); background: var(--mint); cursor: pointer; }
.date-control-toggle svg { width: 22px; height: 22px; }
.date-control-toggle:hover:not(:disabled), .date-control-toggle[aria-expanded="true"] { background: var(--green-bright); color: #10251a; }
.date-control-toggle:disabled { opacity: .5; cursor: not-allowed; }
.date-control-error { margin: 9px 0 0; color: var(--ink); font: 400 .8rem/1.6 var(--font-body); }
.date-control-popup { position: fixed; z-index: 1200; box-sizing: border-box; width: 336px; padding: 14px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--field-border, var(--line)); border-radius: 12px; background: var(--white); color: var(--ink); box-shadow: 0 16px 50px rgb(0 0 0 / .18); }
.date-control-popup[hidden], .date-control-error[hidden] { display: none !important; }
.date-control-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; }
.date-control-month { min-width: 0; margin: 0; color: var(--ink); font: 650 .94rem/1.4 var(--font-body); text-align: center; }
.date-control-month-nav { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: var(--white); cursor: pointer; }
.date-control-month-nav svg { width: 20px; height: 20px; }
.date-control-month-nav:hover:not(:disabled) { color: var(--green-text); border-color: var(--green-text); background: var(--mint); }
.date-control-month-nav:disabled { opacity: .35; cursor: default; }
.date-control-grid { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.date-control-grid th { padding: 8px 0; color: var(--ink-soft); font: 500 .7rem/1.4 var(--font-body); text-align: center; }
.date-control-grid td { padding: 0; border: 0; text-align: center; }
.date-control-day { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: 500 .85rem/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.date-control-day.is-other-month { color: var(--ink-soft); }
.date-control-day:hover:not(:disabled) { background: var(--mint); border-color: var(--green-text); }
.date-control-day.is-selected { color: #10251a; background: var(--green-bright); border-color: var(--green-bright); font-weight: 750; }
.date-control-day.is-selected:hover { color: #10251a; background: var(--green-bright); }
.date-control-day.is-today::after { position: absolute; bottom: 4px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ''; }
.date-control-day:disabled { color: var(--ink-soft); opacity: .35; cursor: default; }
.date-control-actions { display: flex; justify-content: space-between; gap: 6px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
.date-control-actions button { min-height: 40px; padding: 8px 9px; color: var(--green-text); border: 0; border-radius: 6px; background: transparent; font: 600 .76rem/1.5 var(--font-body); cursor: pointer; }
.date-control-actions button:hover:not(:disabled) { background: var(--mint); }
.date-control-actions button:disabled { opacity: .4; cursor: default; }
.date-control-keyboard-hint { margin: 8px 3px 0; color: var(--ink-soft); font: 400 .67rem/1.5 var(--font-body); }
.date-control button:focus-visible, .date-control-popup button:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
.date-control-grid button:focus-visible { outline-offset: -2px; }
@media (max-width: 360px) {
  .date-control-popup { padding: 10px; }
  .date-control-grid { border-spacing: 1px; }
  .date-control-day { height: 36px; }
}
@media (prefers-reduced-motion: no-preference) {
  .date-control-toggle, .date-control-day, .date-control-month-nav { transition: background-color 140ms, border-color 140ms; }
}
@media print { .date-control-popup, .date-control-toggle { display: none !important; } }