/**
 * 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;
}

/* Default modal body: scroll if content overflows viewport */
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* When a modal contains an iframe, expand to fill viewport */
.modal-body:has(iframe) {
    max-height: none;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.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;
}

/* ============================================
   Dropdown z-index fix for frosted-glass cards
   backdrop-filter creates a stacking context on each card, so a
   dropdown inside one card can't paint above a sibling card.
   Elevate the card when its dropdown/popover is open.
   ============================================ */
.card:has(.dropdown-menu.show),
.card:has([aria-expanded="true"]) {
    z-index: 10;
    position: relative;
}

/* ============================================
   Ajax Modal - Last Viewed Thumbnail Highlight
   Pulses after closing a fullscreen/modal preview
   so the user can find where they were.
   ============================================ */

@keyframes ajax-modal-highlight-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(13,110,253,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(13,110,253,0.3); }
}

.ajax-modal-last-viewed {
    outline: 3px solid rgba(13,110,253,0.7);
    outline-offset: 2px;
    border-radius: 6px;
    animation: ajax-modal-highlight-pulse 1s ease-in-out 3;
    transition: outline-color 1s ease, box-shadow 1s ease;
}

.ajax-modal-last-viewed.ajax-modal-highlight-fade {
    outline-color: transparent;
    box-shadow: none;
    animation: none;
}

[data-bs-theme='dark'] .ajax-modal-last-viewed {
    outline-color: rgba(110,168,254,0.7);
}

@keyframes ajax-modal-highlight-pulse-dark {
    0%, 100% { box-shadow: 0 0 0 3px rgba(110,168,254,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(110,168,254,0.3); }
}

[data-bs-theme='dark'] .ajax-modal-last-viewed {
    animation-name: ajax-modal-highlight-pulse-dark;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .pagewrap-admin-btn {
        display: none !important;
    }
}