/* CRITICAL UI VISIBILITY FIXES */
/* Fix white text on white background issues across the application */

/* =================================================================
   ONBOARDING WELCOME CARD WHITE TEXT OVERRIDE
   ================================================================= */

/* Force white text for dashboard tour card */
.onboarding-welcome,
.onboarding-welcome.active {
    color: #ffffff !important;
}

.onboarding-welcome *,
.onboarding-welcome.active * {
    color: #ffffff !important;
}

/* Override any text utility classes */
.onboarding-welcome .text-dark,
.onboarding-welcome .text-black,
.onboarding-welcome .text-body,
.onboarding-welcome .text-muted,
.onboarding-welcome .text-secondary {
    color: #ffffff !important;
}

/* =================================================================
   EMAIL VALIDATION PAGE FIXES
   ================================================================= */

/* Fix feature cards with proper text color contrast */
.feature-card {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

.feature-card h6,
.feature-card .fw-bold {
    color: #212529 !important;
}

.feature-card p,
.feature-card .text-muted {
    color: #6c757d !important;
}

.feature-card .small {
    color: #6c757d !important;
}

/* =================================================================
   BUTTON VISIBILITY FIXES
   ================================================================= */

/* Fix all button variants with proper contrast */
.btn {
    font-weight: 600 !important;
    border-width: 2px !important;
}

/* Primary buttons - ensure white text on blue background */
.btn-primary {
    background-color: #1488CC !important;
    border-color: #1488CC !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #117bb8 !important;
    border-color: #117bb8 !important;
    color: #ffffff !important;
}

/* Secondary buttons - ensure readable contrast */
.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
}

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

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #218838 !important;
    border-color: #218838 !important;
    color: #ffffff !important;
}

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

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #e0a800 !important;
    border-color: #e0a800 !important;
    color: #000000 !important;
}

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

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #c82333 !important;
    border-color: #c82333 !important;
    color: #ffffff !important;
}

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

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #138496 !important;
    border-color: #138496 !important;
    color: #ffffff !important;
}

/* Light buttons */
.btn-light {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #212529 !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: #e2e6ea !important;
    border-color: #e2e6ea !important;
    color: #212529 !important;
}

/* Dark buttons */
.btn-dark {
    background-color: #343a40 !important;
    border-color: #343a40 !important;
    color: #ffffff !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: #23272b !important;
    border-color: #23272b !important;
    color: #ffffff !important;
}

/* =================================================================
   OUTLINE BUTTON FIXES
   ================================================================= */

/* Outline primary - visible on any background */
.btn-outline-primary {
    background-color: #ffffff !important;
    color: #1488CC !important;
    border-color: #1488CC !important;
    border-width: 2px !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #1488CC !important;
    color: #ffffff !important;
    border-color: #1488CC !important;
}

/* Outline secondary */
.btn-outline-secondary {
    background-color: #ffffff !important;
    color: #6c757d !important;
    border-color: #6c757d !important;
    border-width: 2px !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

/* =================================================================
   NAVIGATION FIXES
   ================================================================= */

/* Main navigation container */
.navbar {
    background: linear-gradient(135deg, #1488CC 0%, #2B32B2 100%) !important;
}

/* All navbar items - ensure white text on blue background with borders */
.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.navbar .nav-btn,
.nav-actions .nav-btn,
.nav-links-container .nav-btn,
.horizontal-nav-container .nav-btn {
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 0.25rem !important;
}

/* Hover states - consistent for all nav items */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .nav-btn:hover,
.navbar .nav-btn:focus,
.nav-actions .nav-btn:hover,
.nav-actions .nav-btn:focus,
.nav-links-container .nav-btn:hover,
.nav-links-container .nav-btn:focus,
.horizontal-nav-container .nav-btn:hover,
.horizontal-nav-container .nav-btn:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Active states - clear highlighting */
.navbar-nav .nav-link.active,
.navbar .nav-btn.active,
.nav-actions .nav-btn.active,
.nav-links-container .nav-btn.active,
.horizontal-nav-container .nav-btn.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

/* Dropdown indicators */
.navbar .nav-link .dropdown-indicator,
.navbar .nav-btn .dropdown-indicator {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

/* Ensure dropdown menus are properly styled */
.navbar .dropdown-menu,
.nav-dropdown .dropdown-menu,
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(20, 136, 204, 0.1) !important;
    box-shadow: 0 4px 15px rgba(20, 136, 204, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
}

.navbar .dropdown-menu .dropdown-item,
.nav-dropdown .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item {
    color: #212529 !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.nav-dropdown .dropdown-menu .dropdown-item:hover,
.nav-dropdown .dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #1488CC !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Brand/logo area */
.navbar .navbar-brand {
    color: #ffffff !important;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Mobile menu toggle */
.navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* =================================================================
   NAVIGATION CONSISTENCY OVERRIDES
   ================================================================= */

/* Override any conflicting styles for navigation text */
.horizontal-nav-container .nav-btn,
.horizontal-nav-container .nav-btn span,
.horizontal-nav-container .nav-btn .nav-text {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
}

/* Ensure dropdown toggles are white */
.horizontal-nav-container .dropdown-toggle,
.horizontal-nav-container .dropdown-toggle span,
.horizontal-nav-container .dropdown-toggle .nav-text {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
}

/* Override any landing-modern.css conflicts */
.landing-nav .nav-link,
.navbar-dark .nav-link {
    color: #ffffff !important;
}

/* Force override for any Bootstrap conflicts */
.navbar-dark .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure dashboard buttons have proper contrast */
.dashboard-action-buttons .btn,
.campaign-buttons .btn {
    font-weight: 600 !important;
    border-radius: 8px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
}

/* Override any problematic yellow active states */
.nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* =================================================================
   BUTTON BORDER FIXES
   ================================================================= */

/* Apply Home page navigation styling consistently across all pages */
.navbar .nav-btn,
.nav-actions .nav-btn,
.horizontal-nav-container .nav-btn,
.horizontal-nav-container .dropdown-toggle {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    margin: 0 0.25rem !important;
    background: transparent !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.navbar .nav-btn:hover,
.navbar .nav-btn:focus,
.navbar .nav-btn:active,
.nav-actions .nav-btn:hover,
.nav-actions .nav-btn:focus,
.nav-actions .nav-btn:active,
.horizontal-nav-container .nav-btn:hover,
.horizontal-nav-container .nav-btn:focus,
.horizontal-nav-container .nav-btn:active,
.horizontal-nav-container .dropdown-toggle:hover,
.horizontal-nav-container .dropdown-toggle:focus,
.horizontal-nav-container .dropdown-toggle:active {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Apply consistent button styling */
.navbar .btn,
.nav-actions .btn,
.horizontal-nav-container .btn {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    background: transparent !important;
}

/* Ensure dropdown toggles have consistent borders like Home page */
.dropdown-toggle::after {
    border-top-color: #ffffff !important;
    margin-left: 0.5rem !important;
}

.navbar .dropdown-toggle,
.nav-dropdown .dropdown-toggle {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus,
.nav-dropdown .dropdown-toggle:hover,
.nav-dropdown .dropdown-toggle:focus {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Global dropdown menu items - ensure consistent styling */
.dropdown-menu .dropdown-item {
    color: #212529 !important;
    background: transparent !important;
    border: none !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    background-color: #1488CC !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Active dropdown items */
.dropdown-menu .dropdown-item.active {
    background-color: #1488CC !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* =================================================================
   CARD CONTENT FIXES
   ================================================================= */

/* Ensure all cards have proper text visibility */
.card {
    background-color: #ffffff !important;
    color: #212529 !important;
}

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

.card-body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

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

/* Card text elements */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: #212529 !important;
}

.card p {
    color: #212529 !important;
}

.card .text-muted {
    color: #6c757d !important;
}

/* =================================================================
   FORM ELEMENT FIXES
   ================================================================= */

/* Form controls */
.form-control {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}

.form-control:focus {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #1488CC !important;
    box-shadow: 0 0 0 0.2rem rgba(20, 136, 204, 0.25) !important;
}

.form-control::placeholder {
    color: #6c757d !important;
}

/* Form labels */
.form-label {
    color: #212529 !important;
}

/* Input groups */
.input-group-text {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}

/* =================================================================
   ALERT FIXES
   ================================================================= */

/* Alert components */
.alert-primary {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

.alert-secondary {
    background-color: #e2e3e5 !important;
    color: #383d41 !important;
    border-color: #d6d8db !important;
}

.alert-success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

.alert-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
}

.alert-info {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

/* =================================================================
   BADGE FIXES
   ================================================================= */

/* Badge visibility */
.badge {
    font-weight: 600 !important;
}

.badge.bg-primary {
    background-color: #1488CC !important;
    color: #ffffff !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

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

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

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

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

.badge.bg-light {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

.badge.bg-dark {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

/* =================================================================
   TEXT COLOR OVERRIDES
   ================================================================= */

/* Ensure all text has proper contrast */
.text-primary {
    color: #1488CC !important;
}

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

.text-success {
    color: #28a745 !important;
}

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

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

.text-info {
    color: #17a2b8 !important;
}

.text-light {
    color: #f8f9fa !important;
}

.text-dark {
    color: #343a40 !important;
}

.text-muted {
    color: #6c757d !important;
}

/* =================================================================
   MODAL FIXES
   ================================================================= */

.modal-content {
    background-color: #ffffff !important;
    color: #212529 !important;
}

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

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

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

/* =================================================================
   DASHBOARD SPECIFIC FIXES
   ================================================================= */

/* Dashboard action buttons */
.dashboard-action-buttons .btn {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
}

/* Dashboard cards */
.dashboard-card {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

.dashboard-card h1, .dashboard-card h2, .dashboard-card h3, .dashboard-card h4, .dashboard-card h5, .dashboard-card h6 {
    color: #212529 !important;
}

/* =================================================================
   CAMPAIGN PAGE SPECIFIC FIXES
   ================================================================= */

/* Campaign buttons visibility */
.campaign-buttons .btn {
    min-height: 48px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure campaign page buttons are visible */
.campaign-buttons .btn-primary {
    background: linear-gradient(135deg, #1488CC 0%, #2B32B2 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

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

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

/* =================================================================
   RESPONSIVE FIXES
   ================================================================= */

@media (max-width: 768px) {
    .btn {
        min-height: 44px !important;
        font-size: 0.9rem !important;
    }
    
    .feature-card {
        margin-bottom: 1rem !important;
    }
    
    .dashboard-action-buttons .btn {
        min-height: 48px !important;
        margin-bottom: 0.5rem !important;
    }
}

/* =================================================================
   IMPORTANT OVERRIDES
   ================================================================= */

/* Force visibility for any missed elements */
* {
    box-sizing: border-box !important;
}

body {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Ensure no invisible text anywhere */
*:not(.btn):not(.badge):not(.alert) {
    color: inherit !important;
}

/* Final safety net - prevent white on white */
.bg-white {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.text-white {
    color: #ffffff !important;
}

/* Override any problematic gradient text */
.gradient-text {
    background: linear-gradient(135deg, #1488CC, #2B32B2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Fallback for browsers that don't support gradient text */
@supports not (-webkit-background-clip: text) {
    .gradient-text {
        color: #1488CC !important;
        background: none !important;
        -webkit-text-fill-color: initial !important;
    }
}