/* CONTRAST FINAL - WCAG AAA Compliance Enforcement
 * Purpose: Final CSS file to ensure NO white-on-white, grey-on-grey, or black-on-black text
 * Load Order: MUST be the absolute last CSS file loaded after wcag-compliance.css
 * Strategy: Maximum specificity overrides to guarantee proper contrast everywhere
 * Version: 20260107f - Fixed form label overrides for dark card backgrounds
 */

/* ========================================
   DESIGN TOKENS - CSS Custom Properties
   ======================================== */

:root {
    /* Surface colors */
    --surface-dark: #2d3748;
    --surface-darker: #1a202c;
    --surface-light: #ffffff;
    --surface-light-grey: #f8f9fa;
    
    /* Text colors */
    --text-on-dark: #ffffff;
    --text-on-light: #000000;
    --text-muted-on-dark: #e2e8f0;
    --text-muted-on-light: #4a5568;
    
    /* Alert backgrounds (always light with dark text) */
    --alert-info-bg: #f8f9fa;
    --alert-success-bg: #d4edda;
    --alert-warning-bg: #fff3cd;
    --alert-danger-bg: #ffdddd;
    
    /* Border colors */
    --border-info: #0066cc;
    --border-success: #28a745;
    --border-warning: #ffc107;
    --border-danger: #dc3545;
}

/* ========================================
   BOOTSTRAP 5.3 DARK THEME VARIABLE OVERRIDES
   
   Override Bootstrap's source variables so ALL .text-muted, .form-text, 
   .text-secondary automatically inherit the correct WCAG-compliant color.
   ======================================== */

html[data-bs-theme="dark"] {
    /* Override Bootstrap's secondary color - NO !important inside var definitions */
    --bs-secondary-color: #e2e8f0;
    --bs-secondary-color-rgb: 226, 232, 240;
    --bs-secondary-text-emphasis: #e2e8f0;
    --bs-tertiary-color: #e2e8f0;
    --bs-tertiary-color-rgb: 226, 232, 240;
    --bs-body-secondary-color: #e2e8f0;
    --bs-emphasis-color: #ffffff;
}

/* ========================================
   DIRECT OVERRIDE FOR BOOTSTRAP HELPER TEXT CLASSES
   Maximum specificity to beat theme-contrast.css rules
   ======================================== */

html[data-bs-theme="dark"] body .text-muted,
html[data-bs-theme="dark"] body .form-text,
html[data-bs-theme="dark"] body .text-secondary,
html[data-bs-theme="dark"] body p.text-muted,
html[data-bs-theme="dark"] body p.form-text,
html[data-bs-theme="dark"] body p.text-secondary,
html[data-bs-theme="dark"] body span.text-muted,
html[data-bs-theme="dark"] body span.form-text,
html[data-bs-theme="dark"] body div.text-muted,
html[data-bs-theme="dark"] body div.form-text,
html[data-bs-theme="dark"] body small.text-muted,
html[data-bs-theme="dark"] body small.form-text,
html body .srp-helper-text,
html body .srp-muted,
html body .srp-form-hint,
html body p.srp-helper-text,
html body p.srp-muted,
html body p.srp-form-hint,
html body span.srp-helper-text,
html body div.srp-helper-text,
html body h2.srp-helper-text {
    color: #e2e8f0 !important;
}

html[data-bs-theme="dark"] body .text-muted i,
html[data-bs-theme="dark"] body .form-text i,
html body .srp-helper-text i,
html body .srp-form-hint i {
    color: #90cdf4 !important;
}

/* ========================================
   CRITICAL: ALERTS - Always light bg with dark text
   Maximum specificity to override everything
   ======================================== */

/* Alert backgrounds - nuclear-level specificity */
html body .modal-body .alert,
html body .modal-body div.alert,
html body .modal-body .alert-info,
html body .modal-body div.alert-info,
html body .modal .alert,
html body .modal div.alert,
html body .modal .alert-info,
html body .modal div.alert-info,
html body .alert,
html body div.alert,
html body .alert-info,
html body div.alert-info,
html body .alert-success,
html body div.alert-success,
html body .alert-warning,
html body div.alert-warning,
html body .alert-danger,
html body div.alert-danger,
.alert,
div.alert,
.alert-info,
div.alert-info,
.alert-success,
div.alert-success,
.alert-warning,
div.alert-warning,
.alert-danger,
div.alert-danger {
    background-color: var(--surface-light-grey) !important;
    color: var(--text-on-light) !important;
}

/* ALL children of alerts MUST have black text - NUCLEAR OPTION */
html body .modal-content .modal-body .alert *,
html body .modal-content .modal-body .alert > *,
html body .modal-content .modal-body .alert small,
html body .modal-content .modal-body .alert i,
html body .modal-content .modal-body .alert strong,
html body .modal-content .modal-body .alert span,
html body .modal-content .modal-body .alert p,
html body .modal-content .modal-body .alert div,
html body .modal-content .modal-body div.alert-info *,
html body .modal-content .modal-body div.alert-info small,
html body .modal-content .modal-body div.alert-info i,
html body .modal-content .modal-body div.alert-info strong,
html body .modal-body .alert *,
html body .modal-body .alert-info *,
html body .modal .alert *,
html body .modal .alert-info *,
html body div.modal-content div.modal-body div.alert-info small,
html body div.modal-content div.modal-body div.alert-info i,
.alert *,
.alert > *,
.alert p,
.alert span,
.alert div,
.alert small,
.alert i,
.alert strong,
.alert b,
.alert ul,
.alert li,
.alert label,
.alert a,
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
div.alert *,
div.alert-info *,
div.alert-success *,
div.alert-warning *,
div.alert-danger *,
.modal-body .alert *,
.modal-body .alert-info *,
.modal-body .alert-success *,
.modal-body .alert-warning *,
.modal-body .alert-danger *,
.modal .alert *,
.modal .alert-info *,
.collapse .alert *,
body .alert *,
body .alert-info * {
    color: var(--text-on-light) !important;
}

/* Specific alert type backgrounds */
.alert-info,
div.alert-info,
.modal-body .alert-info,
body .alert-info,
#assignCrewModal .alert-info,
#assignCrewModal div.alert-info {
    background-color: var(--alert-info-bg) !important;
    border-left: 4px solid var(--border-info) !important;
}

/* ULTRA-SPECIFIC: assignCrewModal alert text MUST be black */
#assignCrewModal .modal-body .alert *,
#assignCrewModal .modal-body .alert-info *,
#assignCrewModal .modal-body .alert small,
#assignCrewModal .modal-body .alert-info small,
#assignCrewModal .modal-body .alert i,
#assignCrewModal .modal-body .alert-info i,
#assignCrewModal .modal-body div.alert-info *,
#assignCrewModal .modal-body div.alert-info small,
#assignCrewModal .modal-body div.alert-info i,
#assignCrewModal div.modal-body div.alert-info small {
    color: #000000 !important;
    background-color: transparent !important;
}

.alert-success,
div.alert-success,
.modal-body .alert-success,
body .alert-success {
    background-color: var(--alert-success-bg) !important;
    border-left: 4px solid var(--border-success) !important;
}

.alert-warning,
div.alert-warning,
.modal-body .alert-warning,
body .alert-warning {
    background-color: var(--alert-warning-bg) !important;
    border-left: 4px solid var(--border-warning) !important;
}

.alert-danger,
div.alert-danger,
.modal-body .alert-danger,
body .alert-danger {
    background-color: var(--alert-danger-bg) !important;
    border-left: 4px solid var(--border-danger) !important;
}

/* ========================================
   MODALS - Dark backgrounds with white text
   EXCEPT for alerts, buttons, and form inputs
   ======================================== */

.modal-content,
div.modal-content {
    background-color: var(--surface-dark) !important;
    color: var(--text-on-dark) !important;
}

.modal-header,
.modal-body,
.modal-footer,
div.modal-header,
div.modal-body,
div.modal-footer {
    background-color: var(--surface-dark) !important;
    color: var(--text-on-dark) !important;
}

.modal-title,
h5.modal-title {
    color: var(--text-on-dark) !important;
}

/* Modal body text should be white */
.modal-body p:not(.alert *),
.modal-body span:not(.alert *):not(.badge),
.modal-body div:not(.alert):not(.alert *),
.modal-body label:not(.alert *):not(.form-label),
.modal-body h1, .modal-body h2, .modal-body h3, .modal-body h4, .modal-body h5, .modal-body h6 {
    color: var(--text-on-dark) !important;
}

/* ========================================
   FORMS - Always white background with black text
   ======================================== */

input,
textarea,
select,
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control,
.modal input,
.modal textarea,
.modal select,
.modal .form-control,
.collapse input,
.collapse textarea,
.collapse select {
    background-color: var(--surface-light) !important;
    color: var(--text-on-light) !important;
    border: 1px solid #cccccc !important;
}

select option,
.form-select option {
    background-color: var(--surface-light) !important;
    color: var(--text-on-light) !important;
}

/* Form labels must be visible on their background */
.modal label.form-label,
.modal-body label.form-label,
label.form-label {
    color: var(--text-on-dark) !important;
}

/* Only apply dark text to labels in explicitly light-background contexts */
.collapse label.form-label,
.bg-white label.form-label,
.card.bg-white label.form-label,
.card.bg-light label.form-label {
    color: var(--text-on-light) !important;
}

/* CRITICAL: Form labels with text-white class MUST stay white */
label.form-label.text-white,
.card label.form-label.text-white,
.card-body label.form-label.text-white,
.flight-leg-entry label.form-label.text-white {
    color: #ffffff !important;
}

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

.dropdown-menu,
div.dropdown-menu {
    background-color: var(--surface-light) !important;
}

.dropdown-item,
a.dropdown-item {
    background-color: var(--surface-light) !important;
    color: var(--text-on-light) !important;
}

.dropdown-item:hover,
a.dropdown-item:hover {
    background-color: var(--surface-light-grey) !important;
    color: var(--text-on-light) !important;
}

/* ========================================
   COLLAPSE SECTIONS - Light background with dark text
   (Purpose of Trip dropdowns, etc.)
   ======================================== */

.collapse .card,
.collapse div.card,
.collapse .border,
.collapse div.border {
    background-color: var(--surface-light) !important;
    color: var(--text-on-light) !important;
}

.collapse .card *:not(input):not(select):not(textarea):not(.btn):not(.badge),
.collapse .border *:not(input):not(select):not(textarea):not(.btn):not(.badge),
.collapse p,
.collapse span:not(.badge),
.collapse div:not(.alert),
.collapse label,
.collapse h1, .collapse h2, .collapse h3, .collapse h4, .collapse h5, .collapse h6,
.collapse small,
.collapse strong {
    color: var(--text-on-light) !important;
}

/* ========================================
   TABLES - White text on dark background
   ======================================== */

.table,
table.table {
    color: var(--text-on-dark) !important;
}

.table td,
.table th,
table.table td,
table.table th {
    color: var(--text-on-dark) !important;
}

/* ========================================
   CARDS - Default dark background with white text
   ======================================== */

.card:not(.bg-white):not(.collapse .card),
div.card:not(.bg-white):not(.collapse .card) {
    background-color: var(--surface-dark) !important;
    color: var(--text-on-dark) !important;
}

.card-body:not(.bg-white *):not(.collapse *),
div.card-body:not(.bg-white *):not(.collapse *) {
    color: var(--text-on-dark) !important;
}

/* Cards with .bg-white class should have dark text */
.card.bg-white,
.card.bg-white *:not(input):not(select):not(textarea):not(.btn):not(.badge),
div.card.bg-white,
div.card.bg-white * {
    color: var(--text-on-light) !important;
}

/* ========================================
   BADGES - Always visible
   ======================================== */

.badge.bg-success,
span.badge.bg-success {
    background-color: #28a745 !important;
    color: var(--text-on-light) !important;
}

.badge.bg-warning,
span.badge.bg-warning {
    background-color: #ffc107 !important;
    color: var(--text-on-light) !important;
}

.badge.bg-danger,
span.badge.bg-danger {
    background-color: #dc3545 !important;
    color: var(--text-on-light) !important;
}

.badge.bg-info,
span.badge.bg-info {
    background-color: #0dcaf0 !important;
    color: var(--text-on-light) !important;
}

.badge.bg-secondary,
span.badge.bg-secondary {
    background-color: #6c757d !important;
    color: var(--text-on-light) !important;
}

.badge.bg-primary,
span.badge.bg-primary {
    background-color: #0d6efd !important;
    color: var(--text-on-light) !important;
}

/* ========================================
   TEXT UTILITIES - Override Bootstrap classes
   CRITICAL: Force light text on dark backgrounds for WCAG AAA
   
   ARCHITECTURE NOTE: Bootstrap 5.3's dark theme uses --bs-secondary-color
   which maps to mid-grey. We MUST scope to html[data-bs-theme="dark"] to
   beat Bootstrap's specificity. This is the industry-standard approach.
   ======================================== */

/* BULLETPROOF: Scoped to dark theme to beat Bootstrap 5.3's !important rules */
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .form-text,
html[data-bs-theme="dark"] .text-secondary,
html[data-bs-theme="dark"] body .text-muted,
html[data-bs-theme="dark"] body .form-text,
html[data-bs-theme="dark"] body .text-secondary,
html[data-bs-theme="dark"] small.text-muted,
html[data-bs-theme="dark"] p.text-muted,
html[data-bs-theme="dark"] div.form-text,
html[data-bs-theme="dark"] span.text-secondary,
html[data-bs-theme="dark"] h2.text-secondary,
html[data-bs-theme="dark"] h3.text-secondary,
html[data-bs-theme="dark"] h4.text-secondary,
html[data-bs-theme="dark"] h5.text-secondary,
html[data-bs-theme="dark"] .card .text-muted,
html[data-bs-theme="dark"] .card .form-text,
html[data-bs-theme="dark"] .card .text-secondary,
html[data-bs-theme="dark"] .card-body .text-muted,
html[data-bs-theme="dark"] .card-body .form-text,
html[data-bs-theme="dark"] .card-body .text-secondary,
html[data-bs-theme="dark"] form .text-muted,
html[data-bs-theme="dark"] form .form-text,
html[data-bs-theme="dark"] form .text-secondary,
html[data-bs-theme="dark"] .flight-leg-entry .text-muted,
html[data-bs-theme="dark"] .flight-leg-entry .form-text {
    color: #e2e8f0 !important;
}

/* Icons in dark theme helper text - light blue for visibility */
html[data-bs-theme="dark"] .form-text i,
html[data-bs-theme="dark"] .form-text .fa-info-circle,
html[data-bs-theme="dark"] .text-muted i,
html[data-bs-theme="dark"] i.text-muted,
html[data-bs-theme="dark"] .fa-info-circle.text-muted {
    color: #90cdf4 !important;
}

/* Exception: White backgrounds ALWAYS use dark text (scoped) */
html[data-bs-theme="dark"] .bg-white .text-muted,
html[data-bs-theme="dark"] .bg-white .form-text,
html[data-bs-theme="dark"] .bg-white .text-secondary,
html[data-bs-theme="dark"] .collapse .text-muted,
html[data-bs-theme="dark"] .collapse .form-text,
html[data-bs-theme="dark"] .alert .text-muted,
html[data-bs-theme="dark"] .alert .form-text {
    color: #4a5568 !important;
}

/* ========================================
   LISTS - Visible text
   ======================================== */

.list-group-item,
li.list-group-item {
    background-color: var(--surface-dark) !important;
    color: var(--text-on-dark) !important;
}

/* ========================================
   NAVIGATION - White text on dark background
   ======================================== */

.navbar,
.navbar-dark {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

.navbar .nav-link,
.navbar-nav .nav-link,
.navbar a {
    color: var(--text-on-dark) !important;
}

/* ========================================
   BUTTONS - Maintain Bootstrap colors but ensure text contrast
   ======================================== */

.btn-primary {
    color: var(--text-on-light) !important;
}

.btn-secondary {
    color: var(--text-on-light) !important;
}

.btn-success {
    color: var(--text-on-light) !important;
}

.btn-danger {
    color: var(--text-on-light) !important;
}

.btn-warning {
    color: var(--text-on-light) !important;
}

.btn-info {
    color: var(--text-on-light) !important;
}

.btn-light {
    color: var(--text-on-light) !important;
}

.btn-dark {
    color: var(--text-on-dark) !important;
}

/* ========================================
   FLASH MESSAGES - Always visible
   ======================================== */

.flash-messages .alert,
.flash-messages .alert * {
    background-color: var(--surface-light-grey) !important;
    color: var(--text-on-light) !important;
}

/* ========================================
   ADMIN DASHBOARD - Ensure visibility
   ======================================== */

#dashboard .card:not(.bg-white),
#dashboard .card-body:not(.bg-white *) {
    background-color: var(--surface-dark) !important;
    color: var(--text-on-dark) !important;
}

#dashboard h3, #dashboard h4, #dashboard h5, #dashboard h6,
#dashboard p, #dashboard span:not(.badge), #dashboard div {
    color: inherit !important;
}

/* ========================================
   FINAL SAFETY NET
   Prevent any remaining invisible text combinations
   ======================================== */

/* If background is white/light, text must be black */
[style*="background-color: #fff"],
[style*="background-color: white"],
[style*="background-color: #f"],
[style*="background: #fff"],
[style*="background: white"] {
    color: var(--text-on-light) !important;
}

/* If background is dark, text must be white */
[style*="background-color: #000"],
[style*="background-color: black"],
[style*="background-color: #1"],
[style*="background-color: #2"],
[style*="background-color: #3"] {
    color: var(--text-on-dark) !important;
}

/* ========================================
   ADMIN TRIP MANAGEMENT - Lighter borders
   ======================================== */

.collapse .border,
.collapse .bg-white.border,
.collapse div.border,
td .collapse .border,
td .collapse .bg-white.border {
    border-color: #dee2e6 !important;
    border-width: 1px !important;
}

/* ========================================
   CATERING BADGES - Unified blue color for readability
   ======================================== */

.badge.catering-badge,
span.badge.catering-badge {
    background-color: #0dcaf0 !important;
    color: #000000 !important;
}

/* ========================================
   CREDENTIALS PAGE - Aircraft Training Certificates Section
   Keep dark background, use white/light text for WCAG AAA
   ======================================== */

/* Override bg-light to be dark like the rest of credentials */
#credentials .bg-light {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

/* ALL text inside these boxes must be white/light */
#credentials .bg-light,
#credentials .bg-light *,
#credentials .p-4.border.rounded.bg-light,
#credentials .p-4.border.rounded.bg-light *,
#credentials .mb-4.p-4.border.rounded.bg-light,
#credentials .mb-4.p-4.border.rounded.bg-light * {
    color: #ffffff !important;
}

/* Muted/helper text should be light grey */
#credentials .bg-light .text-muted,
#credentials .bg-light .form-text,
#credentials .bg-light small,
#credentials .bg-light .form-control-plaintext {
    color: #e2e8f0 !important;
}

/* Headers inside boxes */
#credentials .bg-light h6,
#credentials .bg-light h5,
#credentials .bg-light label,
#credentials .bg-light .form-label {
    color: #ffffff !important;
}

/* Primary text - use a bright blue for visibility */
#credentials .bg-light .text-primary,
#credentials .bg-light h6.text-primary {
    color: #63b3ed !important;
}

/* Form controls - dark with white text */
#credentials .bg-light .form-control,
#credentials .bg-light input,
#credentials .bg-light select {
    background-color: #1a202c !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

/* Badges need proper contrast */
#credentials .bg-light .badge {
    color: #ffffff !important;
}

#credentials .bg-light .badge.bg-secondary {
    background-color: #718096 !important;
    color: #ffffff !important;
}

#credentials .bg-light .badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #000000 !important;
}

#credentials .bg-light .badge.bg-success {
    background-color: #48bb78 !important;
    color: #000000 !important;
}

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

/* Icons should be light */
#credentials .bg-light i,
#credentials .bg-light .fas,
#credentials .bg-light .fa {
    color: #e2e8f0 !important;
}

/* Buttons - bright outlines on dark */
#credentials .bg-light .btn-outline-info {
    color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
}

#credentials .bg-light .btn-outline-primary {
    color: #63b3ed !important;
    border-color: #63b3ed !important;
}

#credentials .bg-light .btn-outline-danger {
    color: #fc8181 !important;
    border-color: #fc8181 !important;
}

/* ========================================
   ADMIN TRIP LOGS REPORT - Light theme for print/readability
   Protect from dark theme overrides
   ======================================== */

/* Force the report modal to have light background */
#reportModal .modal-content {
    background-color: #ffffff !important;
}

#reportModal .modal-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
}

#reportModal .modal-header .modal-title {
    color: #333333 !important;
}

#reportModal .modal-header .btn-close {
    filter: none !important;
}

#reportModal .modal-body {
    background-color: #ffffff !important;
}

#reportModal .modal-footer {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
}

#reportContent,
#reportContent *,
.report-container,
.report-container * {
    color: #333333 !important;
}

#reportContent h1,
.report-container h1 {
    color: #007bff !important;
}

#reportContent h2,
#reportContent h3,
.report-container h2,
.report-container h3 {
    color: #333333 !important;
}

#reportContent strong,
.report-container strong {
    color: #333333 !important;
}

#reportContent table,
#reportContent table td,
#reportContent table tr,
.report-container table,
.report-container table td,
.report-container table tr {
    color: #333333 !important;
}

/* =============================================
   CREW CARD — white-surface overrides
   Must come last; beats all dark-theme rules
   ============================================= */
html body .crew-card,
html body .crew-card *:not(.crew-card-header):not(.crew-card-header *) {
    color: #1a1a2e !important;
}
html body .crew-card .crew-card-header,
html body .crew-card .crew-card-header * {
    color: #ffffff !important;
}
html body .crew-card .crew-card-header .position {
    color: #a0c4ff !important;
}
html body .crew-card .crew-card-header .header-meta,
html body .crew-card .crew-card-header .header-meta * {
    color: #c8d8f0 !important;
}
html body .crew-card .section-label {
    color: #6c757d !important;
}
html body .crew-card .contact-row a {
    color: #0f3460 !important;
}
html body .crew-card .qual-badge {
    background: #eef2ff !important;
    border: 1px solid #c5d3f0 !important;
    color: #1a1a2e !important;
}
html body .crew-card .qual-badge .desig {
    color: #0f3460 !important;
    font-weight: 700 !important;
}
html body .crew-card .qual-badge .model-name {
    color: #444444 !important;
}
html body .crew-card .qual-badge .role-tag {
    background: #0f3460 !important;
    color: #ffffff !important;
}
html body .crew-card .avail-day.available   { background: #1a7c3e !important; color: #ffffff !important; }
html body .crew-card .avail-day.unavailable { background: #b02a37 !important; color: #ffffff !important; }
html body .crew-card .avail-day.standby     { background: #a89600 !important; color: #ffffff !important; }
html body .crew-card .avail-day.no-data     { background: #d0d5db !important; color: #555555 !important; }
html body .crew-card .card-footer-strip {
    background: #f8f9fa !important;
    color: #6c757d !important;
}

/* ══════════════════════════════════════════════════
   ABOUT PAGE — restore dark text on light sections
   ══════════════════════════════════════════════════ */
html body .service-section { background-color: inherit; }
html body .service-section,
html body .service-section p,
html body .service-section li,
html body .service-section span:not(.service-label):not(.fi):not(.stat-pill) { color: #374151 !important; }

html body .service-section h2,
html body .service-section h3 { color: #111827 !important; }

html body .service-section .feature-list li strong { color: #111827 !important; }
html body .service-section .text-muted { color: #6b7280 !important; }

html body .service-section.bg-light .service-label.label-owner   { background: #dbeafe !important; color: #1d4ed8 !important; }
html body .service-section.bg-light .service-label.label-manager { background: #fef3c7 !important; color: #92400e !important; }
html body .service-section.bg-light .service-label.label-crew    { background: #dcfce7 !important; color: #166534 !important; }

html body .service-section.bg-light .fi-blue  { background: #dbeafe !important; color: #1d4ed8 !important; }
html body .service-section.bg-light .fi-amber { background: #fef3c7 !important; color: #92400e !important; }
html body .service-section.bg-light .fi-green { background: #dcfce7 !important; color: #166534 !important; }

html body .service-section.bg-light .feature-list li strong { color: #111827 !important; }
html body .service-section.bg-light h2 { color: #111827 !important; }
html body .service-section.bg-light p  { color: #374151 !important; }
html body .service-section.bg-light li { color: #374151 !important; }

html body .service-section.bg-light .btn-primary { color: #ffffff !important; }
html body .service-section.bg-light a.btn        { color: #ffffff !important; }

html body .platform-strip p,
html body .platform-strip h2 { color: #ffffff !important; }
html body .platform-strip .stat-pill { color: #c8d8f0 !important; }
html body .platform-strip .stat-pill strong { color: #ffffff !important; }

html body .about-hero-content h1,
html body .about-hero-content { color: #ffffff !important; }
html body .about-hero-content > p { color: #c8d8f0 !important; }
html body .about-hero-badge { color: #a0c4ff !important; }

html body .about-cta h2,
html body .about-cta { color: #ffffff !important; }
html body .about-cta > .container > p { color: #a8c4e0 !important; }