.app-datepicker {
    position: fixed;
    inset: 0;
    margin: auto;
    color: var(--admin-text, #1f2937);
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #cbd5e1);
    border-radius: .6rem;
    box-shadow: 0 16px 60px #0003;
    padding: 1rem;
    width: min(58rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    font: inherit;
}
.app-datepicker::backdrop { background: #11182766; }
.app-datepicker h2 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 600; }
.app-datepicker h3 { margin: .5rem 0 .8rem; text-align: center; font-size: 1rem; font-weight: 600; }
.app-datepicker-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.app-datepicker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.app-datepicker-grid>span { font-size: .75rem; color: #64748b; padding: .3rem 0; }
.app-datepicker-day { min-height: 2.2rem; padding: .25rem; border: 1px solid transparent; background: transparent; border-radius: .25rem; cursor: pointer; font: inherit; }
.app-datepicker-day:hover, .app-datepicker-day:focus-visible { background: #dbeafe; outline: 2px solid #2563eb; outline-offset: -2px; }
.app-datepicker-day[aria-current=date] { border-color: #64748b; }
.app-datepicker-day.is-range { background: #dbeafe; }
.app-datepicker-day[aria-pressed=true] { background: #2563eb; color: white; }
.app-datepicker-presets, .app-datepicker-nav, .app-datepicker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.app-datepicker-nav { justify-content: space-between; margin-top: .5rem; }
.app-datepicker-actions { justify-content: flex-end; margin-top: .8rem; }
.app-datepicker .UIAdminButton, .app-date-trigger { flex: none; width: auto; border: 1px solid #cbd5e1; border-radius: .3rem; padding: .35rem .6rem; font: inherit; cursor: pointer; }
.app-datepicker .UIAdminButtonPrimary { color: var(--adm-on-primary); background: var(--admin-action); }
.app-datepicker-selection { display: block; margin-top: .8rem; font-weight: 600; }
.app-date-trigger { align-self: end; margin-left: .35rem; min-width: 2rem; }
.app-datepicker button:disabled { opacity: .45; cursor: default; }
@media(max-width: 680px) { .app-datepicker-months { grid-template-columns: minmax(0, 1fr); } }

.app-date-control { display: flex; align-items: center; min-width: 0; gap: .3rem; }
.app-date-control>input { flex: 1 1 8rem; min-width: 0; width: 100%; }
.app-date-control>.app-date-trigger { margin: 0; align-self: stretch; flex: 0 0 auto; }