/* Dark mode readability fixes for custom Backpack CRUD fields. */

/* Keep Choices inputs white in light mode to match Backpack default text fields. */
.choices .choices__inner,
.choices .choices__input {
    background-color: #ffffff !important;
}

[data-bs-theme="dark"] .choices,
[data-bs-theme="dark"] .choices .choices__inner,
[data-bs-theme="dark"] .choices .choices__input {
    background-color: var(--tblr-bg-forms, var(--tblr-bg-surface)) !important;
    color: var(--tblr-body-color) !important;
}

[data-bs-theme="dark"] .choices .choices__inner {
    border-color: var(--tblr-border-color) !important;
}

[data-bs-theme="dark"] .choices .choices__list--dropdown,
[data-bs-theme="dark"] .choices .choices__list[aria-expanded],
[data-bs-theme="dark"] .choices .choices__item--choice {
    background-color: var(--tblr-bg-surface) !important;
    color: var(--tblr-body-color) !important;
    border-color: var(--tblr-border-color) !important;
}

[data-bs-theme="dark"] .choices .choices__item--selectable.is-highlighted {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .choices .choices__placeholder {
    color: var(--tblr-secondary-color) !important;
    opacity: 0.9;
}

[data-bs-theme="dark"] .note-editor.note-frame,
[data-bs-theme="dark"] .note-editor.note-airframe {
    background-color: var(--tblr-bg-surface) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}

[data-bs-theme="dark"] .note-editor .note-toolbar,
[data-bs-theme="dark"] .note-editor .note-statusbar {
    background-color: var(--tblr-bg-forms, var(--tblr-bg-surface)) !important;
    border-color: var(--tblr-border-color) !important;
}

[data-bs-theme="dark"] .note-editor .note-btn {
    color: var(--tblr-body-color) !important;
    border-color: var(--tblr-border-color) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .note-editor .note-editing-area .note-editable,
[data-bs-theme="dark"] .note-editor .note-editing-area .note-codable {
    background-color: var(--tblr-bg-forms, var(--tblr-bg-surface)) !important;
    color: var(--tblr-body-color) !important;
}

[data-bs-theme="dark"] .repeatable-item {
    background-color: var(--tblr-bg-surface) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}