.datepicker.datepicker-dropdown {
    color: var(--text-color);
    background-color: var(--field-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--shadow-modal), 0 4px 8px var(--shadow-card);
    padding: 8px;
}

.datepicker.datepicker-dropdown::before {
    border-bottom-color: var(--border-color);
}

.datepicker.datepicker-dropdown::after {
    border-bottom-color: var(--field-bg);
}

.datepicker.datepicker-dropdown.datepicker-orient-top::before {
    border-top-color: var(--border-color);
}

.datepicker.datepicker-dropdown.datepicker-orient-top::after {
    border-top-color: var(--field-bg);
}

.datepicker table tr td,
.datepicker table tr th {
    color: var(--text-color);
}

.datepicker table tr td.day:hover:not(.disabled),
.datepicker table tr td.day.focused:not(.disabled),
.datepicker table tr td span:hover:not(.disabled),
.datepicker table tr td span.focused:not(.disabled) {
    background: var(--accent-tint) !important;
    color: var(--accent-on-surface) !important;
    background-image: none !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td span.old,
.datepicker table tr td span.new {
    color: var(--text-muted);
    background: transparent !important;
    background-image: none !important;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td.disabled.focused,
.datepicker table tr td.day.disabled:hover,
.datepicker table tr td.day.disabled.focused,
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover,
.datepicker table tr td span.disabled.focused {
    color: var(--gray-500) !important;
    background: transparent !important;
    background-image: none !important;
    cursor: default;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none;
}

.datepicker table tr td.today:not(.disabled),
.datepicker table tr td.today:hover:not(.disabled) {
    color: var(--accent-on-surface) !important;
    background-color: var(--gray-100) !important;
    background-image: none !important;
    filter: none;
    text-shadow: none;
}

.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    color: var(--gray-500) !important;
    background: transparent !important;
    background-image: none !important;
    filter: none;
    text-shadow: none;
    cursor: default;
    box-shadow: none !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
    color: var(--text-on-accent) !important;
    background-color: var(--accent) !important;
    background-image: none !important;
    filter: none;
    text-shadow: none;
}

.datepicker table tr td.highlighted:not(.disabled) {
    background: var(--accent-tint) !important;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
    color: var(--text-color);
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
    background: var(--accent-tint) !important;
    color: var(--accent-on-surface);
}

.datepicker .dow {
    color: var(--text-muted);
}