/* WCAG AAA Compliance for Dark Theme
 * Purpose: Ensure 7:1 contrast ratio with dark backgrounds and white text
 * Dark backgrounds with white text, light form inputs with black text
 * Load Order: This MUST be the last CSS file loaded
 */

/* ========================================
   GLOBAL BACKGROUND AND TEXT COLORS
   Dark backgrounds (#2d3748) with white text
   ======================================== */

body,
html {
    background-color: #1a202c !important;
    color: #ffffff !important;
}

/* Containers - background only, no text color to allow template control */
.container,
.container-fluid {
    background-color: transparent !important;
}

/* ========================================
   CARDS - Dark backgrounds with white text
   ======================================== */

/* CARDS - Removed to allow template-specific styling
 * Trip management dropdowns use .card inside .collapse sections
 * Template inline styles must take full precedence */

/* ========================================
   ALERTS - Light backgrounds with dark text for visibility
   ======================================== */

.alert {
    background-color: #f8f9fa !important;
    color: #000000 !important;
    border: 2px solid #dee2e6 !important;
}

.alert *,
.alert p,
.alert div,
.alert span,
.alert strong,
.alert small,
.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6,
.alert ul,
.alert li {
    color: #000000 !important;
}

.alert-info {
    background-color: #f8f9fa !important;
    border-left: 4px solid #0066cc !important;
    color: #000000 !important;
}

.alert-success {
    background-color: #d4edda !important;
    border-left: 4px solid #28a745 !important;
    color: #000000 !important;
}

.alert-warning {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107 !important;
    color: #000000 !important;
}

.alert-danger {
    background-color: #ffdddd !important;
    border-left: 4px solid #dc3545 !important;
    color: #000000 !important;
}

/* ========================================
   HELPER TEXT ON DARK BACKGROUNDS - MUST BE WHITE
   Fixes text-muted, form-text, text-secondary visibility
   ======================================== */

/* Force helper text classes to white on dark backgrounds */
.card-body .text-muted,
.card-body .form-text,
.card-body .text-secondary,
.card .text-muted,
.card .form-text,
.card .text-secondary,
.bg-dark .text-muted,
.bg-dark .form-text,
.bg-dark .text-secondary,
.flight-leg-entry .text-muted,
.flight-leg-entry .form-text,
.flight-leg-entry .text-secondary,
form .text-muted,
form .form-text,
form .text-secondary {
    color: #e2e8f0 !important;
}

/* Specific fix for form-text helper text with icons */
.form-text,
.form-text small,
.form-text i,
div.form-text,
div.form-text small {
    color: #e2e8f0 !important;
}

/* Fix icon color in helper text */
.form-text .fa-info-circle,
.text-muted.fa-info-circle,
i.text-muted {
    color: #90cdf4 !important;
}

/* Section headings that are secondary should be visible */
h2.text-secondary,
h3.text-secondary,
h4.text-secondary,
h5.text-secondary {
    color: #90cdf4 !important;
}

/* ========================================
   MODAL ALERTS - CRITICAL: Order matters for cascade
   White text rule FIRST, then alert overrides AFTER
   ======================================== */

/* Modal body general text should be white (excluding form controls and white backgrounds) */
.modal-body *:not(.btn):not(.badge):not(input):not(select):not(textarea):not(.bg-white):not(.bg-white *):not([style*="background-color: white"]):not([style*="background-color: #fff"]):not([style*="background: white"]):not([style*="background: #fff"]) {
    color: #ffffff !important;
}

/* CRITICAL FIX: Any element with white background MUST have black text */
.modal-body .bg-white,
.modal-body .bg-white *,
.modal-body [style*="background-color: white"],
.modal-body [style*="background-color: #fff"],
.modal-body [style*="background-color: #ffffff"],
.modal-body [style*="background: white"],
.modal-body [style*="background: #fff"],
.modal-body [style*="background: #ffffff"] {
    color: #000000 !important;
}

/* Alerts inside modals OVERRIDE the white text rule above with black text for contrast */
.modal-body .alert,
.modal-body .alert-info,
.modal-body .alert-success,
.modal-body .alert-warning,
.modal-body .alert-danger {
    background-color: #f8f9fa !important;
    color: #000000 !important;
}

.modal-body .alert-info {
    background-color: #f8f9fa !important;
    border-left: 4px solid #0066cc !important;
}

.modal-body .alert-success {
    background-color: #d4edda !important;
    border-left: 4px solid #28a745 !important;
}

.modal-body .alert-warning {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107 !important;
}

.modal-body .alert-danger {
    background-color: #ffdddd !important;
    border-left: 4px solid #dc3545 !important;
}

/* All text inside modal alerts must be black - HIGH SPECIFICITY to override modal-body text rules */
.modal-body .alert *,
.modal-body .alert p,
.modal-body .alert span,
.modal-body .alert div,
.modal-body .alert small,
.modal-body .alert i,
.modal-body .alert strong,
.modal-body .alert b,
.modal-body .alert ul,
.modal-body .alert li,
.modal-body .alert label,
.modal-body .alert a,
.modal-body .alert .text-muted,
.modal-body .alert-info *,
.modal-body .alert-info p,
.modal-body .alert-info span,
.modal-body .alert-info div,
.modal-body .alert-info small,
.modal-body .alert-info i,
.modal-body .alert-info strong {
    color: #000000 !important;
}

/* ========================================
   TEXT ELEMENTS - White text on dark backgrounds
   ======================================== */

/* TEXT ELEMENTS - Removed global text color rules
 * Trip management dropdowns have inline styles that must take precedence
 * Only style specific containers, not all text elements */

/* ========================================
   FORM CONTROLS - White backgrounds with black text
   (Forms stay light for usability)
   ======================================== */

input,
textarea,
select,
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
}

select option,
.form-select option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* ========================================
   TABLES - Dark backgrounds with white text
   ======================================== */

.table {
    background-color: #2d3748 !important;
    color: #ffffff !important;
}

.table td,
.table th {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

.table thead th {
    background-color: #1a202c !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

/* ========================================
   LISTS - Dark backgrounds with white text
   ======================================== */

.list-group-item {
    background-color: #2d3748 !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

/* ========================================
   MODALS - Dark backgrounds with white text
   ======================================== */

.modal-content {
    background-color: #2d3748 !important;
    color: #ffffff !important;
    border: 1px solid #4a5568 !important;
}

.modal-header,
.modal-body,
.modal-footer {
    background-color: #2d3748 !important;
    color: #ffffff !important;
}

.modal-header {
    border-bottom: 1px solid #4a5568 !important;
}

.modal-footer {
    border-top: 1px solid #4a5568 !important;
}

.modal-title {
    color: #ffffff !important;
}

/* ========================================
   DROPDOWNS - Light backgrounds with dark text
   ======================================== */

.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
}

.dropdown-item {
    background-color: #ffffff !important;
    color: #000000 !important;
}

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

/* ========================================
   NAVIGATION AND NAVBAR
   ======================================== */

/* Top navbar - force white text */
.navbar,
.navbar-dark,
.navbar-expand-lg {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* All navbar links must be white */
.navbar .nav-link,
.navbar-nav .nav-link,
.navbar-dark .nav-link,
.dropdown-toggle {
    color: #ffffff !important;
}

/* Navbar dropdown toggle */
.navbar .dropdown-toggle,
.navbar-dark .dropdown-toggle {
    color: #ffffff !important;
}

/* Navbar brand */
.navbar-brand {
    color: #FFD700 !important;
}

/* Nav tabs */
.nav-tabs .nav-link {
    color: #ffffff !important;
    background-color: transparent !important;
    border-color: #4a5568 !important;
}

.nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: #2d3748 !important;
    border-bottom: 3px solid #0d6efd !important;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent !important;
}

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

/* ========================================
   BUTTONS - Keep proper contrast
   ======================================== */

.btn-primary {
    color: #ffffff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.btn-success {
    color: #ffffff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.btn-danger {
    color: #ffffff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.btn-warning {
    color: #000000 !important;
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.btn-info {
    color: #ffffff !important;
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

.btn-secondary {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    color: #ffffff !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    color: #ffffff !important;
    background-color: #0d6efd !important;
}

.btn-outline-success:hover {
    color: #ffffff !important;
    background-color: #28a745 !important;
}

.btn-outline-danger:hover {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

/* ========================================
   BADGES - Proper contrast
   ======================================== */

.badge-success,
.bg-success {
    color: #ffffff !important;
    background-color: #28a745 !important;
}

.badge-danger,
.bg-danger {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

.badge-warning,
.bg-warning {
    color: #000000 !important;
    background-color: #ffc107 !important;
}

.badge-primary,
.bg-primary {
    color: #ffffff !important;
    background-color: #0d6efd !important;
}

.badge-info,
.bg-info {
    color: #ffffff !important;
    background-color: #17a2b8 !important;
}

/* ========================================
   BORDERED SECTIONS - Dark backgrounds
   ======================================== */

.border,
.border.rounded,
.p-3.border.rounded {
    background-color: #2d3748 !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

/* ========================================
   SPECIFIC OVERRIDES FOR LIGHT SECTIONS
   ======================================== */

/* Sections that specifically need light backgrounds */
.bg-light,
.bg-white {
    background-color: #f8f9fa !important;
    color: #000000 !important;
}

.bg-light *:not(.btn):not(.badge),
.bg-white *:not(.btn):not(.badge) {
    color: #000000 !important;
}

/* ========================================
   RESERVATION DETAILS
   ======================================== */

div[id^="reservation-details-"] {
    background-color: #2d3748 !important;
}

div[id^="reservation-details-"] *:not(.btn):not(.badge):not(input):not(select):not(textarea) {
    color: #ffffff !important;
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.progress {
    background-color: #4a5568 !important;
    border: 1px solid #4a5568 !important;
}

/* ========================================
   LINKS
   ======================================== */

a:not(.btn):not(.dropdown-item):not(.nav-link) {
    color: #66b3ff !important;
}

a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
    color: #99ccff !important;
}

/* ========================================
   UTILITY CLASS OVERRIDES
   ======================================== */

.text-primary {
    color: #66b3ff !important;
}

.text-success {
    color: #5dce7a !important;
}

.text-danger {
    color: #ff6b6b !important;
}

.text-warning {
    color: #ffd93d !important;
}

.text-info {
    color: #5dade2 !important;
}

/* Override dark text utilities that would be invisible on dark backgrounds */
.text-dark,
.text-secondary {
    color: #ffffff !important;
}

/* ========================================
   CHECKBOXES AND RADIO BUTTONS
   ======================================== */

.form-check-input {
    background-color: #ffffff !important;
    border: 2px solid #6c757d !important;
}

.form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* ========================================
   COLLAPSIBLE SECTIONS AND ACCORDIONS
   REMOVED - Template-specific styles take precedence
   ======================================== */

/* NOTE: Collapsible sections (.collapse) intentionally NOT styled here
 * Individual templates control their own collapse styling for specific use cases
 * For example: trip management uses white backgrounds with black text
 */

/* Only style accordion headers (not used in trip management) */
.accordion-button,
.accordion-header {
    background-color: #2d3748 !important;
    color: #ffffff !important;
}

.accordion-button:not(.collapsed) {
    background-color: #1a202c !important;
    color: #ffffff !important;
}

/* ========================================
   ADMIN DASHBOARD - Next 3 Trips Section
   Dark backgrounds with white text for visibility
   ======================================== */

/* Next 3 Trips card containers - override bg-white */
.card-body .border-primary.bg-white {
    background-color: #2d3748 !important;
    border-color: #5dade2 !important;
}

/* All text in Next 3 Trips cards must be white for visibility */
.card-body .border-primary.bg-white *,
.card-body .border-primary.bg-white .text-dark,
.card-body .border-primary.bg-white .text-secondary,
.card-body .border-primary.bg-white .text-primary {
    color: #ffffff !important;
}

/* Strong emphasis in trip cards */
.card-body .border-primary.bg-white strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Small text in trip cards */
.card-body .border-primary.bg-white .small,
.card-body .border-primary.bg-white small {
    color: #e2e8f0 !important;
}

/* PIC contact details */
.card-body .border-primary.bg-white .text-secondary {
    color: #e2e8f0 !important;
}

/* ========================================
   TRIP DETAILS - Purpose of Trip Section
   White backgrounds with black text (collapse section)
   ======================================== */

/* Trip details display and edit sections must have white bg with black text 
   CRITICAL: More specific than .border rule to override dark background */
div[id^="trip-details-display-"].bg-white.border,
div[id^="trip-details-edit-"].bg-white.border {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #dee2e6 !important;
}

/* All text inside trip details sections must be black 
   CRITICAL: Override .text-dark global rule that forces white text */
div[id^="trip-details-display-"].bg-white.border *,
div[id^="trip-details-display-"].bg-white.border p,
div[id^="trip-details-display-"].bg-white.border .text-dark,
div[id^="trip-details-edit-"].bg-white.border *,
div[id^="trip-details-edit-"].bg-white.border .text-dark {
    color: #000000 !important;
}

/* ========================================
   UNIVERSAL WHITE-ON-WHITE PREVENTION
   FINAL SAFETY NET - Catches any missed cases
   ======================================== */

/* CRITICAL: Prevent white text on white backgrounds site-wide */
.bg-white *:not(.btn):not(.badge):not([class*="text-"]),
[style*="background-color: white"] *:not(.btn):not(.badge):not([class*="text-"]),
[style*="background-color: #fff"] *:not(.btn):not(.badge):not([class*="text-"]),
[style*="background-color: #ffffff"] *:not(.btn):not(.badge):not([class*="text-"]),
[style*="background: white"] *:not(.btn):not(.badge):not([class*="text-"]),
[style*="background: #fff"] *:not(.btn):not(.badge):not([class*="text-"]),
[style*="background: #ffffff"] *:not(.btn):not(.badge):not([class*="text-"]) {
    color: #000000 !important;
}

/* Labels on white backgrounds must be black */
.bg-white label,
.bg-white .form-label,
[style*="background-color: white"] label,
[style*="background-color: #fff"] label,
[style*="background: white"] label,
[style*="background: #fff"] label {
    color: #000000 !important;
}