/* Keep each native field's layout and typing behavior; quiet the calendar icon. */
html.slp-calendars-ready input[type="date"]::-webkit-calendar-picker-indicator {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    cursor: pointer;
    opacity: .75;
}
html.slp-calendars-ready input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
html.slp-calendars-ready input[type="date"]:disabled::-webkit-calendar-picker-indicator,
html.slp-calendars-ready input[type="date"]:read-only::-webkit-calendar-picker-indicator { cursor: default; opacity: .35; }

#slp-date-picker {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 8px;
    width: 280px;
    max-height: calc(100vh - 16px);
    overflow: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    background: var(--surface-solid, #fff);
    color: var(--text-primary, #0f172a);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04);
    z-index: 100000;
    animation: slp-calendar-appear 120ms ease-out;
}
#slp-date-picker::backdrop { background: transparent; pointer-events: none; }
#slp-date-picker .air-datepicker {
    --adp-width: 100%;
    --adp-font-family: inherit;
    --adp-font-size: 13px;
    --adp-border-color: transparent;
    --adp-border-color-inline: transparent;
    --adp-background-color: transparent;
    --adp-background-color-hover: var(--surface-hover, #f1f5f9);
    --adp-color: var(--text-primary, #0f172a);
    --adp-color-secondary: var(--text-secondary, #64748b);
    --adp-color-other-month: var(--text-muted, #94a3b8);
    --adp-color-disabled: #cbd5e1;
    --adp-color-current-date: var(--primary, #2563eb);
    --adp-day-name-color: var(--text-secondary, #64748b);
    --adp-cell-background-color-selected: var(--primary, #2563eb);
    --adp-cell-background-color-selected-hover: var(--primary-dark, #1d4ed8);
    --adp-cell-background-color-hover: #eff6ff;
    --adp-cell-border-radius: 8px;
    --adp-day-cell-height: 32px;
    --adp-nav-height: 38px;
    --adp-nav-arrow-color: var(--text-secondary, #64748b);
    --adp-nav-color-secondary: var(--text-secondary, #64748b);
    --adp-btn-color: var(--primary, #2563eb);
    --adp-btn-color-hover: var(--primary-dark, #1d4ed8);
    border: 0;
}
#slp-date-picker .air-datepicker-nav { border: 0; padding: 2px 0 6px; }
#slp-date-picker .air-datepicker-nav--title { font-weight: 600; }
#slp-date-picker .air-datepicker-nav--title i { font-weight: 400; }
#slp-date-picker .air-datepicker-nav--action svg { width: 18px; height: 18px; }
#slp-date-picker .air-datepicker-nav--action path { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#slp-date-picker .air-datepicker-body--day-name { text-transform: none; font-size: 11px; }
#slp-date-picker .air-datepicker--buttons { border: 0; }
#slp-date-picker .air-datepicker-buttons { border-top: 1px solid var(--border-light, #f1f5f9); padding: 6px 0 0; margin-top: 6px; }
#slp-date-picker .air-datepicker-button { font: inherit; font-size: 12px; border-radius: 6px; }
#slp-date-picker .air-datepicker-button:disabled { color: var(--text-muted, #94a3b8); cursor: default; }
#slp-date-picker .slp-date-picker-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes slp-calendar-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #slp-date-picker { animation: none; } }