/* Theme-Aware Contrast CSS
 * SITE-WIDE OVERRIDE: All form elements have WHITE backgrounds and BLACK text
 */

/* UNIVERSAL FORM ELEMENT OVERRIDE - HIGHEST PRIORITY */
* select,
* .form-select,
* input[type="text"],
* input[type="email"],
* input[type="tel"],
* input[type="number"],
* input[type="date"],
* input[type="password"],
* textarea,
* .form-control {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
}

/* Ensure dropdown options are also white bg/black text */
* select option,
* .form-select option {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

/* Default light theme styles */
:root {
    --contrast-border: #6c757d;
    --contrast-text: #000000;
    --contrast-bg: #ffffff;
    --contrast-subtle: #f8f9fa;
}

/* Dark theme detection and overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --contrast-border: #ffffff;
        --contrast-text: #ffffff;
        --contrast-bg: #000000;
        --contrast-subtle: #2d3748;
    }
}

/* Manual theme overrides */
[data-bs-theme="dark"] {
    --contrast-border: #ffffff;
    --contrast-text: #ffffff;
    --contrast-bg: #000000;
    --contrast-subtle: #2d3748;
}

.dark-theme {
    --contrast-border: #ffffff;
    --contrast-text: #ffffff;
    --contrast-bg: #000000;
    --contrast-subtle: #2d3748;
}

/* CRITICAL FIX: Reservation details dropdown - WHITE background, BLACK text everywhere */
/* Force the entire card and all children to white background */
div[id^="reservation-details-"],
div[id^="reservation-details-"] .card,
div[id^="reservation-details-"] .card-body,
div[id^="reservation-details-"] .row,
div[id^="reservation-details-"] .col-md-6,
div[id^="reservation-details-"] .mb-3,
div[id^="reservation-details-"] div:not(.badge):not(.btn) {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Force ALL text to black */
div[id^="reservation-details-"],
div[id^="reservation-details-"] *:not(.badge):not(.btn):not(.text-primary):not(.text-info):not(.text-warning) {
    color: #000000 !important;
}

/* Keep colored headings visible */
div[id^="reservation-details-"] .text-primary {
    color: #0d6efd !important;
}

div[id^="reservation-details-"] .text-info {
    color: #0dcaf0 !important;
}

div[id^="reservation-details-"] .text-warning {
    color: #ffc107 !important;
}

/* CRITICAL FIX: Outline buttons must have visible text */
/* Bootstrap outline buttons need explicit text color for WCAG AAA compliance */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    color: #000000 !important;
}

/* On hover, ensure text remains visible */
.btn-outline-primary:hover,
.btn-outline-success:hover {
    color: #ffffff !important;
}

.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
    color: #ffffff !important;
}

/* Apply theme-aware borders */
.theme-border {
    border-color: var(--contrast-border) !important;
}

.theme-text {
    color: var(--contrast-text) !important;
}

.theme-bg {
    background-color: var(--contrast-bg) !important;
}

/* Calendar-specific improvements */
.calendar-table th,
.calendar-table td {
    border-color: var(--contrast-border) !important;
}

/* Table improvements for dark backgrounds */
.table-dark th,
.table-dark td {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Card improvements */
.card {
    border-color: var(--contrast-border) !important;
}

/* Form control improvements */
.form-control {
    border-color: var(--contrast-border) !important;
}

/* Button improvements */
.btn-outline-secondary {
    border-color: var(--contrast-border) !important;
    color: var(--contrast-text) !important;
}

/* Navigation improvements */
.nav-tabs .nav-link {
    border-color: var(--contrast-border) !important;
}

.nav-tabs .nav-link.active {
    border-color: var(--contrast-border) !important;
}

/* List group improvements */
.list-group-item {
    border-color: var(--contrast-border) !important;
}

/* Modal improvements */
.modal-content {
    border-color: var(--contrast-border) !important;
}

/* Dropdown improvements */
.dropdown-menu {
    border-color: var(--contrast-border) !important;
}

/* Alert improvements */
.alert {
    border-color: var(--contrast-border) !important;
}

/* Progress bar improvements */
.progress {
    border: 1px solid var(--contrast-border) !important;
}

/* Badge improvements */
.badge {
    border: 1px solid var(--contrast-border) !important;
}

/* Utility classes for manual theme control */
.force-light-border {
    border-color: #6c757d !important;
}

.force-dark-border {
    border-color: #ffffff !important;
}

.force-visible-border {
    border-width: 2px !important;
    border-style: solid !important;
}

/* Emergency text contrast fixes */
.dropdown-menu, 
.dropdown-item,
select option,
.form-control option,
.form-control,
.form-select,
.form-select option,
select.form-select option,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

/* Ensure all select dropdown options are readable */
select option,
select.form-select option,
.form-select option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Fix black text on black background in dropdowns */
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .dropdown-item,
[data-bs-theme="dark"] select option,
[data-bs-theme="dark"] .form-control option,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

/* Nuclear option - force ALL form elements to white background */
input, textarea, .form-control {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

/* Special styling for select dropdowns */
select, .form-select {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
    /* Custom dropdown arrow for visibility */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
}

/* Mega nuclear override for any remaining Bootstrap dark theme elements */
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] textarea, 
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] input,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
body[data-bs-theme="dark"] input,
body[data-bs-theme="dark"] textarea,
body[data-bs-theme="dark"] select,
body[data-bs-theme="dark"] .form-control,
body[data-bs-theme="dark"] .form-select {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

/* Fix aircraft selection buttons text visibility */
.aircraft-btn.btn-outline-secondary,
.aircraft-btn.btn-outline-dark,
.btn-outline-secondary,
[data-bs-theme="dark"] .aircraft-btn.btn-outline-secondary,
[data-bs-theme="dark"] .aircraft-btn.btn-outline-dark,
[data-bs-theme="dark"] .btn-outline-secondary {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #6c757d !important;
}

.aircraft-btn.btn-outline-secondary:hover,
.aircraft-btn.btn-outline-dark:hover,
.btn-outline-secondary:hover,
[data-bs-theme="dark"] .aircraft-btn.btn-outline-secondary:hover,
[data-bs-theme="dark"] .aircraft-btn.btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* Keep selected aircraft button blue */
.aircraft-btn.btn-primary,
.aircraft-btn.btn-primary.active,
[data-bs-theme="dark"] .aircraft-btn.btn-primary,
[data-bs-theme="dark"] .aircraft-btn.btn-primary.active {
    color: #ffffff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Force calendar border visibility */
.calendar-table th,
.calendar-table td {
    border: 1px solid #ffffff !important;
}

/* COMPREHENSIVE FORM CONTROL VISIBILITY FIXES */
/* These rules ensure all form controls are visible across all contexts */

/* Checkbox and Radio Button Global Fixes */
.form-check-input {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin-top: 0.25rem !important;
    vertical-align: top !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border: 2px solid #6c757d !important;
    border-radius: 0.25rem !important;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
    cursor: pointer !important;
    z-index: 1 !important;
    /* Use custom checkbox styling for better visibility */
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* COMPREHENSIVE CATERING CHECKBOX TARGETING */
/* Ensure catering checkboxes are always visible */
input[name^="catering_"][type="checkbox"],
.form-check input[name^="catering_"][type="checkbox"],
div[id*="catering"] input[type="checkbox"],
*[name*="catering"] input[type="checkbox"] {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    width: 1rem !important;
    height: 1rem !important;
    background-color: #fff !important;
    border: 2px solid #6c757d !important;
    border-radius: 0.25rem !important;
    cursor: pointer !important;
    z-index: 10 !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
}

input[name^="catering_"][type="checkbox"]:checked,
.form-check input[name^="catering_"][type="checkbox"]:checked,
div[id*="catering"] input[type="checkbox"]:checked,
*[name*="catering"] input[type="checkbox"]:checked {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* Fallback styling with CSS-only checkmark */
.form-check-input:checked::after {
    content: '✓' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    color: white !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 0.9rem !important;
    z-index: 2 !important;
}

.form-check-input:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Radio button specific styles */
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Fallback styling for radio buttons with CSS-only circle */
.form-check-input[type="radio"]:checked::after {
    content: '●' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    color: white !important;
    font-size: 0.5rem !important;
    text-align: center !important;
    line-height: 0.9rem !important;
    z-index: 2 !important;
}

/* Override the checkmark for radio buttons */
.form-check-input[type="radio"]:checked::after {
    content: '●' !important;
}

/* Additional form-check container styling */
.form-check {
    display: block !important;
    min-height: 1.5rem !important;
    padding-left: 1.5em !important;
    margin-bottom: 0.125rem !important;
}

.form-check .form-check-input {
    float: left !important;
    margin-left: -1.5em !important;
}

.form-check-label {
    cursor: pointer !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --contrast-border: #000000;
    }
    
    [data-bs-theme="dark"] {
        --contrast-border: #ffffff;
    }
}

/* ========================================
   SITE-WIDE TEXT VISIBILITY FIXES
   Ensures readable text contrast across entire application
   ======================================== */

/* Force all labels to be white text (readable on dark backgrounds) */
label,
.form-label,
label.form-label,
.form-check-label,
.col-form-label {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Helper text and small text - white for maximum visibility */
small,
.small,
.text-muted,
.form-text,
small.form-text,
.form-text.text-muted,
small.text-muted {
    color: #ffffff !important;
}

/* EXCEPTION: On light backgrounds, use dark text for readability */
.bg-light .text-muted,
.bg-light small,
.bg-light .small,
.bg-light .form-text,
.border.rounded.bg-light .text-muted,
.border.rounded.bg-light small,
.border.rounded.bg-light .small {
    color: #000000 !important;
}

/* Headings on light backgrounds need dark text too */
.bg-light h6,
.border.rounded.bg-light h6,
.bg-light strong,
.border.rounded.bg-light strong {
    color: #000000 !important;
}

/* Card bodies should have white text */
.card-body,
.card-text,
.card p,
.card span:not(.badge) {
    color: #ffffff !important;
}

/* Card headers - white text */
.card-header,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: #ffffff !important;
}

/* Card backgrounds - ensure they're not black */
.card {
    background-color: #2d3748 !important;
}

/* Card headers with primary color - keep white text */
.card-header.bg-primary {
    background-color: #0066cc !important;
    color: #ffffff !important;
}

/* Alert text visibility - WCAG AAA compliant */
.alert {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.alert strong {
    color: #000000 !important;
}

.alert p,
.alert ul,
.alert li,
.alert span {
    color: #000000 !important;
}

/* Alert-danger (error messages) - bright red background with black text for maximum visibility */
.alert-danger {
    background-color: #ffdddd !important;
    border-color: #ff0000 !important;
    border-left: 4px solid #dc3545 !important;
    color: #000000 !important;
}

.alert-danger,
.alert-danger *,
.alert-danger strong,
.alert-danger b,
.alert-danger ul,
.alert-danger li,
.alert-danger p,
.alert-danger span,
.alert-danger div {
    color: #000000 !important;
}

/* Alert-warning - yellow background with black text */
.alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
    border-left: 4px solid #ffc107 !important;
    color: #000000 !important;
}

.alert-warning,
.alert-warning * {
    color: #000000 !important;
}

/* Alert-success - light green background with black text */
.alert-success {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    border-left: 4px solid #28a745 !important;
    color: #000000 !important;
}

.alert-success,
.alert-success * {
    color: #000000 !important;
}

/* Alert-info specific fixes - light background with dark text for readability */
.alert-info {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    border-left: 4px solid #0066cc !important;
    color: #212529 !important;
}

/* Make ALL text inside alert-info dark for visibility - override ALL global white text rules */
.alert-info,
.alert-info *,
.alert-info strong,
.alert-info b,
.alert-info ul,
.alert-info li,
.alert-info p,
.alert-info span,
.alert-info h1,
.alert-info h2,
.alert-info h3,
.alert-info h4,
.alert-info h5,
.alert-info h6,
.alert-info div,
.alert-info a,
.alert-info label {
    color: #212529 !important;
}

/* Icon inside alert-info should be blue for visual interest */
.alert-info i,
.alert-info .fas,
.alert-info .far {
    color: #0066cc !important;
}

/* Modal text */
.modal-body,
.modal-body p,
.modal-body span:not(.badge),
.modal-header,
.modal-title,
.modal-footer {
    color: #ffffff !important;
}

/* Table text */
.table,
.table td,
.table th {
    color: #ffffff !important;
}

/* List group items */
.list-group-item {
    color: #ffffff !important;
    background-color: #2d3748 !important;
}

/* Nav items */
.nav-link {
    color: #ffffff !important;
}

/* Dropdown items - keep dark text on white background */
.dropdown-item {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.dropdown-item:hover {
    background-color: #f8f9fa !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

/* Paragraphs and general text */
p, span, div {
    color: inherit;
}

/* Override Bootstrap text utilities that might cause dark-on-dark */
.text-dark {
    color: #ffffff !important;
}

.text-secondary {
    color: #adb5bd !important;
}

/* Buttons - maintain proper contrast */
.btn {
    border-width: 1px !important;
}

/* Ensure breadcrumbs are visible */
.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #ffffff !important;
}

/* Badge text */
.badge {
    color: #ffffff !important;
}

/* Placeholder text in inputs */
::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: #6c757d !important;
}

::-ms-input-placeholder {
    color: #6c757d !important;
}

/* Links - ensure visibility */
a {
    color: #ffffff !important;
}

a:hover {
    color: #e0e0e0 !important;
}

/* Special fix for any remaining dark text issues */
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] span:not(.badge),
body[data-bs-theme="dark"] label,
body[data-bs-theme="dark"] .form-label {
    color: #ffffff !important;
}

/* Container backgrounds */
.container,
.container-fluid {
    background-color: transparent !important;
}

/* Row backgrounds */
.row {
    background-color: transparent !important;
}
/* ULTIMATE OVERRIDE: Force all select/form-select elements to white bg, black text */
/* This targets Bootstrap 5.3 dark mode specifically */
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] select.form-select,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] select option,
html[data-bs-theme="dark"] select.form-select option,
html[data-bs-theme="dark"] .form-select option,
body[data-bs-theme="dark"] select,
body[data-bs-theme="dark"] select.form-select,
body[data-bs-theme="dark"] .form-select,
body[data-bs-theme="dark"] select option,
body[data-bs-theme="dark"] select.form-select option,
body[data-bs-theme="dark"] .form-select option,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select option,
[data-bs-theme="dark"] select.form-select option,
[data-bs-theme="dark"] .form-select option {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Re-add the dropdown arrow for selects */
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] select.form-select,
html[data-bs-theme="dark"] .form-select,
body[data-bs-theme="dark"] select,
body[data-bs-theme="dark"] select.form-select,
body[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
}