/* Billing SweetAlert (legacy class names retained for JS mixin) */
.billing-swal-popup {
    border-radius: 20px !important;
    border: 1px solid color-mix(in srgb, var(--theme-border-accent, var(--theme-accent)) 20%, var(--theme-border, #e5e7eb)) !important;
    font-family: var(--theme-font-family, 'Segoe UI', sans-serif) !important;
    box-shadow: var(--theme-shadow-elevated, 0 24px 48px color-mix(in srgb, var(--theme-text, #111827) 16%, transparent)) !important;
    padding: 1.75rem 1.5rem 1.5rem !important;
}

.billing-swal-popup .swal2-close {
    display: none !important;
}

.billing-swal-popup .swal2-title {
    font-family: var(--theme-heading-font-family, var(--theme-font-family)) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.02em;
    color: var(--theme-text, #111827) !important;
}

.billing-swal-popup .swal2-icon {
    margin: 0.25rem auto 1rem !important;
    border-width: 2px !important;
}

.billing-swal-popup .swal2-icon.swal2-success {
    border-color: color-mix(in srgb, var(--theme-success, #16a34a) 35%, transparent) !important;
    color: var(--theme-success, #16a34a) !important;
}

.billing-swal-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--theme-success, #16a34a) !important;
}

.billing-swal-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: color-mix(in srgb, var(--theme-success, #16a34a) 25%, transparent) !important;
}

.billing-swal-popup .swal2-html-container,
.billing-swal-popup .swal2-content {
    color: var(--theme-text-muted, #6b7280) !important;
}

.billing-swal-confirm {
    background: var(--theme-button-primary-background, #00793c) !important;
    color: var(--theme-button-primary-text, #fff) !important;
    border-radius: var(--ds-radius-md) !important;
    padding: 8px 18px !important;
    border: none !important;
}

.billing-swal-confirm:hover {
    background: var(--theme-button-primary-hover-background, #006931) !important;
}

.billing-swal-cancel {
    background: var(--theme-surface, #fff) !important;
    color: var(--theme-text, #111827) !important;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
    border-radius: var(--ds-radius-md) !important;
    padding: 8px 18px !important;
}

.billing-swal-cancel:hover {
    background: var(--theme-page-background, #f4f5f7) !important;
}

body.ds-modal-open {
    overflow: hidden;
}

.ds-modal .modal-title {
    color: var(--ds-modal-title, var(--theme-text));
}

.ds-modal .modal-content,
.modal-content {
    border-radius: var(--ds-radius-lg);
    border: 1px solid var(--theme-border, #e5e7eb);
    background: var(--theme-surface, #fff);
    box-shadow: var(--ds-shadow-lg);
}

/* Premium themed modals */
.ds-modal--premium .modal-content,
.modal.ds-modal--premium .modal-content {
    border: 1px solid color-mix(in srgb, var(--theme-border-accent, var(--theme-accent)) 24%, var(--theme-border, #e5e7eb));
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--theme-shadow-elevated, var(--ds-shadow-lg));
}

.ds-modal--premium .modal-header {
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border, #e5e7eb) 88%, transparent);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, #c2185b) 10%, transparent) 0, transparent 42%),
        var(--theme-gradient-surface, linear-gradient(145deg, #fff, color-mix(in srgb, var(--theme-soft-background, #fbf0f6) 42%, #fff)));
    padding: 1.15rem 1.5rem;
}

.ds-modal--premium .modal-title {
    font-family: var(--theme-heading-font-family, var(--theme-font-family));
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--theme-text, #111827);
    letter-spacing: -0.02em;
}

.ds-modal--premium .modal-body {
    padding: 1.35rem 1.5rem 1.5rem;
}

.ds-modal--premium .modal-footer {
    border-top: 1px solid color-mix(in srgb, var(--theme-border, #e5e7eb) 88%, transparent);
    background: color-mix(in srgb, var(--theme-soft-background, #fbf0f6) 28%, var(--theme-surface, #fff));
    padding: 1rem 1.5rem 1.25rem;
    gap: 0.65rem;
}

.ds-modal--premium .form-label,
.ds-modal--premium label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--theme-text, #111827);
    margin-bottom: 0.4rem;
}

.ds-modal--premium .form-control,
.ds-modal--premium .form-select,
.ds-modal--premium select.form-control {
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--theme-border, #e5e7eb) 90%, var(--theme-accent, #ff9999) 10%);
    background: var(--theme-surface, #fff);
    padding: 0.6rem 0.75rem;
}

.ds-modal--premium .form-control:focus,
.ds-modal--premium .form-select:focus,
.ds-modal--premium select.form-control:focus {
    border-color: color-mix(in srgb, var(--theme-primary, #c2185b) 45%, var(--theme-border, #e5e7eb)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #c2185b) 12%, transparent) !important;
}

#addManagerModal .form-control:focus,
#addManagerModal .form-select:focus,
#editManagerModal .form-control:focus,
#editManagerModal .form-select:focus,
#addGuestModal .form-control:focus,
#addGuestModal .form-select:focus {
    border-color: color-mix(in srgb, var(--theme-primary, #c2185b) 45%, var(--theme-border, #e5e7eb)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #c2185b) 12%, transparent) !important;
}

.ds-modal--premium .form-group {
    margin-bottom: 1.1rem;
}

.ds-modal--premium .ds-segmented-group {
    width: 100%;
    margin-bottom: 1.25rem;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-soft-background, #fbf0f6) 45%, var(--theme-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--theme-border, #e5e7eb) 88%, transparent);
}

.ds-modal--premium .modal-body .modal-footer {
    margin-top: 1.25rem;
    padding: 0;
    border-top: 0;
    background: transparent;
}

/* Header close controls removed app-wide — dismiss via footer actions only */
.modal .modal-header .close,
.modal .modal-header .btn-close,
.ds-modal--premium .close,
.ds-modal--premium .btn-close {
    display: none !important;
}

/* Premium modals use the same header treatment across theme shells */
[data-theme-shell="royal"] .ds-modal--premium .modal-header {
    background: var(--theme-gradient-sidebar, linear-gradient(180deg, #1a1a1a, #2d2d2d));
}

[data-theme-shell="royal"] .ds-modal--premium .modal-title,
[data-theme-shell="royal"] .modal.ds-modal--premium .modal-header .modal-title {
    color: var(--theme-sidebar-text, #f8f4e8) !important;
}

/* Beat legacy e-ticketing modal overrides */
.ds-modal.ds-modal--premium .modal-content {
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--theme-border-accent, var(--theme-accent)) 24%, var(--theme-border, #e5e7eb)) !important;
    box-shadow: var(--theme-shadow-elevated, var(--ds-shadow-lg)) !important;
    max-height: calc(100vh - 2rem) !important;
}

.ds-modal.ds-modal--premium .modal-footer {
    border-top: 1px solid color-mix(in srgb, var(--theme-border, #e5e7eb) 88%, transparent) !important;
    background: color-mix(in srgb, var(--theme-soft-background, #fbf0f6) 28%, var(--theme-surface, #fff)) !important;
}

/* Vertically center all modals in the viewport */
.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
}

.modal .modal-dialog {
    margin: 0 auto !important;
    width: 100%;
    max-height: calc(100vh - 2rem);
}

.modal-dialog-centered {
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 2rem);
}

.modal-dialog-scrollable.ds-modal--premium .modal-body,
#addSubEventModal.ds-modal--premium .modal-body,
#editSororModal.ds-modal--form .modal-body,
#addSororModal.ds-modal--form .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 11rem);
}

/* Keep Create / Save footer visible when modal body grows (e.g. offline-paid CSV). */
#createSubEventModal.ds-modal--premium .modal-content,
#addSubEventModal.ds-modal--premium .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    min-height: 0;
}

#createSubEventModal.ds-modal--premium .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#createSubEventModal.ds-modal--premium .modal-body,
#addSubEventModal.ds-modal--premium .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none;
}

#createSubEventModal.ds-modal--premium .modal-header,
#createSubEventModal.ds-modal--premium .modal-footer,
#addSubEventModal.ds-modal--premium .modal-header,
#addSubEventModal.ds-modal--premium .modal-footer {
    flex-shrink: 0;
}

.ds-modal--form .modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ds-modal--form .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ds-modal--form .modal-body {
    flex: 1 1 auto;
    min-height: 0;
}

.ds-modal--form .modal-footer {
    flex-shrink: 0;
}

#addSororModal.ds-modal--form .modal-content {
    overflow: hidden;
}

#addSororModal.ds-modal--form .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-backdrop.show {
    opacity: 0.45;
    backdrop-filter: blur(2px);
}

.preview-modal.ds-modal--premium .modal-body {
    padding: 0;
    background: color-mix(in srgb, var(--theme-soft-background, #fbf0f6) 35%, var(--theme-surface, #fff));
}

.preview-modal .preview-frame-wrapper {
    min-height: min(72vh, 720px);
    background: color-mix(in srgb, var(--theme-soft-background, #fbf0f6) 40%, var(--theme-surface, #fff));
}

.preview-modal .preview-frame-wrapper iframe {
    width: 100%;
    height: min(72vh, 720px);
    border: 0;
    display: block;
}

.ds-modal .modal-header,
.modal-header {
    border-bottom: 1px solid var(--theme-border, #e5e7eb);
    background: var(--theme-surface, #fff);
}

.ds-modal .modal-footer,
.modal-footer {
    border-top: 1px solid var(--theme-border, #e5e7eb);
    background: var(--theme-page-background, #f4f5f7);
}

.ds-logout-modal .modal-dialog {
    max-width: 420px;
}

.ds-logout-modal .modal-body {
    padding-top: 0.35rem;
}

.ds-logout-modal__message {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--theme-text-muted, #6b7280);
}

.ds-logout-modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ds-logout-modal .modal-footer .btn {
    min-width: 0;
}

.ds-confirm-modal .modal-dialog {
    max-width: 440px;
}

.ds-confirm-modal .modal-body {
    padding-top: 0.35rem;
}

.ds-confirm-modal__message {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--theme-text-muted, #6b7280);
    white-space: pre-line;
}

.ds-confirm-modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ds-confirm-modal .modal-footer .btn {
    min-width: 0;
}

.ds-confirm-modal.is-alert .modal-footer #dsConfirmModalCancel {
    display: none !important;
}

/* Themed auto-dismiss notifications (tick / status style) */
.ds-notify-layer {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ds-z-modal, 1050) + 5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    pointer-events: none;
}

.ds-notify-layer__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--theme-text, #111827) 28%, transparent);
    backdrop-filter: blur(2px);
    opacity: 0;
    animation: dsNotifyBackdropIn 0.22s ease-out forwards;
}

.ds-notify-layer.is-leaving .ds-notify-layer__backdrop {
    animation: dsNotifyBackdropOut 0.22s ease-in forwards;
}

.ds-notify {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    padding: 1.85rem 1.65rem 1.55rem;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--theme-border-accent, var(--theme-accent)) 24%, var(--theme-border, #e5e7eb));
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-primary, #c2185b) 8%, transparent) 0, transparent 48%),
        var(--theme-surface, #fff);
    box-shadow: var(--theme-shadow-elevated, var(--ds-shadow-lg));
    text-align: center;
    pointer-events: auto;
    animation: dsNotifyCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ds-notify-layer.is-leaving .ds-notify {
    animation: dsNotifyCardOut 0.24s ease-in forwards;
}

.ds-notify__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 1.1rem;
    border-radius: 999px;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}

.ds-notify__title {
    display: block;
    margin: 0 0 0.4rem;
    font-family: var(--theme-heading-font-family, var(--theme-font-family));
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--theme-text, #111827);
}

.ds-notify__message {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--theme-text-muted, #6b7280);
}

.ds-notify--success .ds-notify__icon {
    color: var(--theme-success, #00793c);
    background: color-mix(in srgb, var(--theme-success, #00793c) 14%, var(--theme-surface, #fff));
    border: 2px solid color-mix(in srgb, var(--theme-success, #00793c) 32%, var(--theme-border, #e5e7eb));
}

.ds-notify--error .ds-notify__icon {
    color: var(--theme-danger, #dc2626);
    background: color-mix(in srgb, var(--theme-danger, #dc2626) 12%, var(--theme-surface, #fff));
    border: 2px solid color-mix(in srgb, var(--theme-danger, #dc2626) 30%, var(--theme-border, #e5e7eb));
}

.ds-notify--warning .ds-notify__icon {
    color: var(--theme-warning, #d97706);
    background: color-mix(in srgb, var(--theme-warning, #d97706) 14%, var(--theme-surface, #fff));
    border: 2px solid color-mix(in srgb, var(--theme-warning, #d97706) 30%, var(--theme-border, #e5e7eb));
}

.ds-notify--info .ds-notify__icon {
    color: var(--theme-primary, #c2185b);
    background: color-mix(in srgb, var(--theme-primary, #c2185b) 12%, var(--theme-surface, #fff));
    border: 2px solid color-mix(in srgb, var(--theme-primary, #c2185b) 28%, var(--theme-border, #e5e7eb));
}

@keyframes dsNotifyBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dsNotifyBackdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes dsNotifyCardIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dsNotifyCardOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.96) translateY(6px); }
}

/* Billing checkout confirmation modal */
.billing-confirm-modal .modal-content {
    font-family: var(--theme-font-family, 'Segoe UI', sans-serif);
}

.billing-confirm-modal .modal-title {
    font-family: var(--theme-heading-font-family, var(--theme-font-family));
    font-weight: 800;
    letter-spacing: -0.02em;
}

.billing-confirm-modal .billing-confirm-intro {
    color: var(--theme-text, #111827);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
}

.billing-confirm-modal .modal-body {
    padding: 1.35rem 1.5rem 1.25rem;
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.875rem;
    line-height: 1.55;
}

.billing-confirm-modal .billing-confirm-details {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    list-style: none;
    background: color-mix(in srgb, var(--theme-soft-background, #fbf0f6) 45%, var(--theme-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--theme-border-accent, var(--theme-accent)) 22%, var(--theme-border, #e5e7eb));
    border-radius: 12px;
}

.billing-confirm-modal .billing-confirm-details li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    color: var(--theme-text, #111827);
    font-weight: 650;
    font-size: 0.875rem;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border, #e5e7eb) 75%, transparent);
}

.billing-confirm-modal .billing-confirm-details li:last-child {
    border-bottom: 0;
}

.billing-confirm-modal .billing-confirm-note {
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.78rem;
    line-height: 1.45;
}

.billing-confirm-modal .modal-footer {
    gap: 0.65rem;
    padding: 1rem 1.5rem 1.25rem;
}

.billing-confirm-modal .modal-footer .btn {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .billing-confirm-modal .modal-footer {
        flex-direction: column-reverse;
    }

    .billing-confirm-modal .modal-footer .btn {
        width: 100%;
    }
}

/* SweetAlert2 */
.swal2-popup {
    font-family: var(--theme-font-family, 'Segoe UI', sans-serif) !important;
    border-radius: var(--ds-radius-lg) !important;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
}

.swal2-popup .swal2-close {
    display: none !important;
}

.swal2-title { color: var(--theme-text, #111827) !important; }
.swal2-html-container { color: var(--theme-text-muted, #6b7280) !important; }

.swal2-confirm {
    background: var(--theme-button-primary-background, #00793c) !important;
    color: var(--theme-button-primary-text, #fff) !important;
    border-radius: var(--ds-radius-md) !important;
}

.swal2-confirm:hover {
    background: var(--theme-button-primary-hover-background, #006931) !important;
}

.swal2-cancel {
    background: var(--theme-surface, #fff) !important;
    color: var(--theme-text, #111827) !important;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
    border-radius: var(--ds-radius-md) !important;
}

/* Toastr */
#toast-container > div {
    border-radius: var(--ds-radius-md) !important;
    box-shadow: var(--ds-shadow-md) !important;
    font-family: var(--theme-font-family, 'Segoe UI', sans-serif) !important;
}

.toast-success {
    background-color: var(--theme-success, #00793c) !important;
}

.toast-error {
    background-color: var(--theme-danger, #dc2626) !important;
}

.toast-warning {
    background-color: var(--theme-warning, #d97706) !important;
}

.toast-info {
    background-color: var(--theme-primary, #c2185b) !important;
}

/* Themed jQuery UI datepicker popup for ds-filter-date inputs */
.ui-datepicker.ds-datepicker {
    width: min(20.5em, calc(100vw - 2rem));
    padding: var(--ds-space-3);
    border: 1px solid color-mix(in srgb, var(--theme-border, #e5e7eb) 90%, transparent) !important;
    border-radius: 14px !important;
    background: var(--theme-surface, #fff) !important;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--theme-text, #111827) 14%, transparent) !important;
    font-family: var(--theme-font-family, 'Segoe UI', sans-serif) !important;
    z-index: 2000 !important;
    overflow: visible !important;
}

.ui-datepicker.ds-datepicker .ui-datepicker-header {
    position: relative;
    padding: var(--ds-space-2) 0 var(--ds-space-3);
    border: 0 !important;
    background: transparent !important;
    overflow: visible;
}

.ui-datepicker.ds-datepicker .ui-datepicker-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 2.2em;
    font-size: var(--ds-font-size-md);
    font-weight: 800;
    color: var(--theme-text, #111827);
    line-height: 1.4;
    overflow: visible;
}

.ui-datepicker.ds-datepicker .ds-custom-select {
    min-width: 0;
    flex: 0 0 auto;
}

.ui-datepicker.ds-datepicker .ds-custom-select--month {
    width: 6.5rem;
}

.ui-datepicker.ds-datepicker .ds-custom-select--year {
    width: 5.5rem;
}

.ui-datepicker.ds-datepicker .ds-custom-select__button {
    min-height: 34px;
    padding: 6px 30px 6px 10px;
    border-radius: 10px;
    font-size: var(--ds-font-size-sm);
    font-weight: 700;
}

.ui-datepicker.ds-datepicker .ds-custom-select__chevron {
    right: 11px;
    width: 8px;
    height: 8px;
}

.ui-datepicker.ds-datepicker .ds-custom-select__menu {
    z-index: 1200;
    width: max(100%, 200px);
    max-height: 300px;
}

.ds-date-field,
.ds-filter-date.hasDatepicker {
    /* allow trigger button beside field */
}

.ui-datepicker-trigger.ds-datepicker-trigger,
button.ui-datepicker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 10px;
    background: var(--theme-page-background, #f4f5f7);
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    font-size: 1rem;
}

/* Fields that opt out of the calendar button (Meeting Date, DOB verification, etc.) */
input[data-datepicker-hide-trigger="true"] + .ui-datepicker-trigger,
#createVoteModal .ui-datepicker-trigger,
.vote-verify-shell .ui-datepicker-trigger,
#birthday + .ui-datepicker-trigger,
.ds-date-field .ui-datepicker-trigger {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.ui-datepicker-trigger.ds-datepicker-trigger:hover,
button.ui-datepicker-trigger:hover {
    border-color: var(--theme-primary, #111);
}

/* Hide native month <select> (replaced by custom month control). */
.ui-datepicker.ds-datepicker select.ui-datepicker-month {
    display: none !important;
}

/* Year stays a real visible <select> so users can jump decades (critical for DOB).
   Do not use .ds-native-select here — that class visually hides native controls. */
.ui-datepicker.ds-datepicker select.ui-datepicker-year,
.ui-datepicker.ds-datepicker select.ui-datepicker-year.ds-datepicker-year-native {
    position: static !important;
    display: inline-block !important;
    visibility: visible !important;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 5.25rem !important;
    max-width: 7rem;
    height: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-radius: 10px;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
    font-size: var(--ds-font-size-sm, 0.875rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--theme-text, #111827);
    background: var(--theme-surface, #fff) !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
}

.ui-datepicker.ds-datepicker .ui-datepicker-prev,
.ui-datepicker.ds-datepicker .ui-datepicker-next {
    position: absolute;
    top: 4px;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
    background: var(--theme-page-background, #f4f5f7) !important;
    cursor: pointer;
}

.ui-datepicker.ds-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker.ds-datepicker .ui-datepicker-next {
    right: 2px;
}

.ui-datepicker.ds-datepicker .ui-datepicker-prev-hover,
.ui-datepicker.ds-datepicker .ui-datepicker-next-hover {
    top: 4px;
    border-color: color-mix(in srgb, var(--theme-primary, #c2185b) 35%, var(--theme-border, #e5e7eb)) !important;
    background: var(--theme-selection-background, #fbf0f6) !important;
}

.ui-datepicker.ds-datepicker .ui-datepicker-prev span,
.ui-datepicker.ds-datepicker .ui-datepicker-next span {
    display: none;
}

.ui-datepicker.ds-datepicker .ui-datepicker-prev::after,
.ui-datepicker.ds-datepicker .ui-datepicker-next::after {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.9rem;
    text-align: center;
    color: var(--theme-text, #111827);
}

.ui-datepicker.ds-datepicker .ui-datepicker-prev::after {
    content: '‹';
}

.ui-datepicker.ds-datepicker .ui-datepicker-next::after {
    content: '›';
}

.ui-datepicker.ds-datepicker table {
    margin: 0;
    font-size: var(--ds-font-size-sm);
}

.ui-datepicker.ds-datepicker th {
    padding: var(--ds-space-2) 0;
    color: var(--theme-text-muted, #6b7280);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ui-datepicker.ds-datepicker td {
    padding: 2px;
}

.ui-datepicker.ds-datepicker td span,
.ui-datepicker.ds-datepicker td a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin: 0 auto;
    padding: 0;
    border-radius: 10px;
    border: 0 !important;
    background: transparent !important;
    color: var(--theme-text, #111827) !important;
    font-weight: 600;
    text-align: center;
}

.ui-datepicker.ds-datepicker .ui-state-default {
    border: 0 !important;
    background: transparent !important;
    color: var(--theme-text, #111827) !important;
    font-weight: 600;
}

.ui-datepicker.ds-datepicker .ui-state-hover,
.ui-datepicker.ds-datepicker td a:hover {
    background: var(--theme-selection-background, #fbf0f6) !important;
    color: var(--theme-primary, #c2185b) !important;
}

.ui-datepicker.ds-datepicker .ui-state-active,
.ui-datepicker.ds-datepicker td a.ui-state-active {
    background: linear-gradient(
        140deg,
        var(--theme-primary, #c2185b),
        color-mix(in srgb, var(--theme-primary, #c2185b) 80%, #000)
    ) !important;
    color: var(--theme-button-primary-text, #fff) !important;
    font-weight: 800;
}

.ui-datepicker.ds-datepicker .ui-state-highlight,
.ui-datepicker.ds-datepicker td.ui-datepicker-today a {
    background: color-mix(in srgb, var(--theme-primary, #c2185b) 12%, #fff) !important;
    color: var(--theme-primary, #c2185b) !important;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #c2185b) 28%, transparent) !important;
}

.ui-datepicker.ds-datepicker .ui-state-disabled span,
.ui-datepicker.ds-datepicker .ui-state-disabled .ui-state-default {
    opacity: 0.35;
}

/* Mobile: centered calendar, larger taps, stays above the fold (no keyboard). */
@media (max-width: 767.98px), (pointer: coarse) {
    .ui-datepicker.ds-datepicker,
    .ui-datepicker.ds-datepicker.ds-datepicker--mobile {
        width: min(20.5em, calc(100vw - 1.25rem)) !important;
        max-width: calc(100vw - 1.25rem);
        box-shadow: 0 22px 48px color-mix(in srgb, var(--theme-text, #111827) 22%, transparent) !important;
        z-index: 10050 !important;
    }

    .ui-datepicker.ds-datepicker .ui-datepicker-title {
        margin: 0 2rem;
        gap: 8px;
    }

    .ui-datepicker.ds-datepicker td span,
    .ui-datepicker.ds-datepicker td a {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 0.95rem;
    }

    .ui-datepicker.ds-datepicker select.ui-datepicker-year,
    .ui-datepicker.ds-datepicker select.ui-datepicker-year.ds-datepicker-year-native {
        min-width: 5.5rem !important;
        min-height: 40px !important;
        font-size: 1rem;
    }

    .vote-verify-shell .ds-filter-date.ds-filter-date--picker,
    .vote-verify-shell input[data-datepicker-birth="true"] {
        caret-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Dropdowns */
.dropdown-menu {
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-md);
    background: var(--theme-surface, #fff);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--theme-selection-background, #fbf0f6);
    color: var(--theme-text, #111827);
}

/* Tooltips */
.tooltip-inner {
    background: var(--theme-text, #111827);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-font-size-xs);
}

/* Tabs */
.ds-tabs .nav-link,
.nav-tabs .nav-link {
    color: var(--theme-text-muted, #6b7280);
    border-color: transparent;
}

.ds-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    color: var(--theme-primary, #c2185b);
    border-color: var(--theme-border, #e5e7eb) var(--theme-border, #e5e7eb) var(--theme-surface, #fff);
    background: var(--theme-surface, #fff);
}