/**
 * Bootstrap Components CSS - Shared Styles
 *
 * Contains reusable CSS for Bootstrap 5.3 components with dark mode support
 * Extracted from inline styles for browser caching
 *
 * @see /php/ide/data/libs/htmlwidgets.php (modal styles)
 * @see /php/ide/data/dataentry/fieldselect.php (Select2 dark mode)
 */

/* ============================================
   Modal Full-Height Styles
   For modals that need to fill the viewport
   ============================================ */

.modal-fullheight .modal-dialog,
.modal-fullheight .modal-content {
    height: 90%;
}

.modal-fullheight .modal-body {
    max-height: calc(100% - 100px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal-fullheight .modal-body iframe {
    flex: 1;
    min-height: 0;
}

/* Legacy support: Apply to all modals using htmlwidgetsmodalcss */
.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 90%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 100px);
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

/* Ensure iframe fills modal body */
.modal-body iframe {
    flex: 1;
    min-height: 0;
}

/* ============================================
   Select2 Dark Mode Styles
   Bootstrap 5.3 compatible
   ============================================ */

/* Selection box */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection {
    background-color: #212529 !important;
    border-color: #495057 !important;
    color: #dee2e6 !important;
}

/* Selected text */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #dee2e6 !important;
}

/* Placeholder text */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: #6c757d !important;
}

/* Dropdown container */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-dropdown,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-dropdown,
html[data-bs-theme='dark'] .select2-dropdown,
body[data-bs-theme='dark'] .select2-dropdown {
    background-color: #212529 !important;
    border-color: #495057 !important;
    color: #dee2e6 !important;
}

/* Results list container */
html[data-bs-theme='dark'] .select2-results,
body[data-bs-theme='dark'] .select2-results {
    background-color: #212529 !important;
}

html[data-bs-theme='dark'] .select2-results__options,
body[data-bs-theme='dark'] .select2-results__options {
    background-color: #212529 !important;
}

/* All options - base state */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option,
html[data-bs-theme='dark'] .select2-results__option,
body[data-bs-theme='dark'] .select2-results__option {
    background-color: #212529 !important;
    color: #dee2e6 !important;
}

/* Selectable options */
html[data-bs-theme='dark'] .select2-results__option--selectable,
body[data-bs-theme='dark'] .select2-results__option--selectable {
    background-color: #212529 !important;
    color: #dee2e6 !important;
}

/* Highlighted option (hover/keyboard) */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--highlighted,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--highlighted,
html[data-bs-theme='dark'] .select2-results__option--highlighted,
body[data-bs-theme='dark'] .select2-results__option--highlighted,
html[data-bs-theme='dark'] .select2-results__option--highlighted.select2-results__option--selectable,
body[data-bs-theme='dark'] .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Selected option */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--selected,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--selected,
html[data-bs-theme='dark'] .select2-results__option--selected,
body[data-bs-theme='dark'] .select2-results__option--selected,
html[data-bs-theme='dark'] .select2-results__option[aria-selected='true'],
body[data-bs-theme='dark'] .select2-results__option[aria-selected='true'] {
    background-color: #343a40 !important;
    color: #fff !important;
}

/* Search field in dropdown */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
html[data-bs-theme='dark'] .select2-search--dropdown .select2-search__field,
body[data-bs-theme='dark'] .select2-search--dropdown .select2-search__field {
    background-color: #2b3035 !important;
    border-color: #495057 !important;
    color: #dee2e6 !important;
}

html[data-bs-theme='dark'] .select2-search--dropdown .select2-search__field::placeholder,
body[data-bs-theme='dark'] .select2-search--dropdown .select2-search__field::placeholder {
    color: #6c757d !important;
}

/* Multi-select tags */
html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #dee2e6 !important;
}

html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #adb5bd !important;
}

html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover,
body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
}

/* ============================================
   Bootstrap Dark Mode Helpers
   Fixes for bg-* utility classes
   ============================================ */

[data-bs-theme='dark'] .bg-info:not(.list-group-item),
[data-bs-theme='dark'] .bg-primary:not(.list-group-item),
[data-bs-theme='dark'] .bg-success:not(.list-group-item),
[data-bs-theme='dark'] .bg-danger:not(.list-group-item) {
    color: #fff;
}

[data-bs-theme='dark'] .bg-warning:not(.list-group-item) {
    color: #000;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .pagewrap-admin-btn {
        display: none !important;
    }
}
