/* Critical Mobile Text Visibility Fix */
/* This CSS file specifically addresses white text visibility issues on mobile devices */

@media (max-width: 768px) {
    /* Global mobile text visibility override */
    * {
        color: var(--text-dark) !important;
    }
    
    /* Body and main containers */
    body, html {
        background: var(--bg-primary) !important;
        color: var(--text-dark) !important;
    }
    
    /* Main content containers */
    .container, .container-fluid, .row, [class*="col-"] {
        color: var(--text-dark) !important;
        background: transparent !important;
    }
    
    /* Cards and components */
    .card, .card-body, .card-footer {
        color: var(--text-dark) !important;
        background: var(--bg-primary) !important;
    }
    
    /* Text elements */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-dark) !important;
    }
    
    p, span, div, li, a:not(.btn) {
        color: var(--text-dark) !important;
    }
    
    /* Feature cards specifically */
    .feature-card, .feature-card * {
        color: var(--text-dark) !important;
        background: var(--bg-primary) !important;
    }
    
    /* Hero section */
    .hero, .hero * {
        color: var(--text-dark) !important;
        background: var(--bg-primary) !important;
    }
    
    /* Navigation (keep proper contrast) */
    .navbar {
        background: var(--primary-blue) !important;
    }
    
    .navbar-brand, .nav-link {
        color: white !important;
    }
    
    /* Buttons maintain their colors */
    .btn-primary, .btn-primary * {
        color: white !important;
    }
    
    .btn-outline-primary {
        color: var(--primary-blue) !important;
    }
    
    .btn-outline-primary:hover {
        color: white !important;
    }
    
    /* Forms */
    .form-control, .form-label, .form-text {
        color: var(--text-dark) !important;
        background: var(--bg-primary) !important;
    }
    
    /* Tables */
    .table, .table td, .table th {
        color: var(--text-dark) !important;
        background: var(--bg-primary) !important;
    }
    
    .table th {
        color: white !important;
        background: var(--primary-blue) !important;
    }
    
    /* Alerts */
    .alert:not(.alert-danger):not(.alert-warning) {
        color: var(--text-dark) !important;
        background: var(--light-blue) !important;
    }
    
    /* Modals */
    .modal-content, .modal-body, .modal-header, .modal-footer {
        color: var(--text-dark) !important;
        background: var(--bg-primary) !important;
    }
    
    /* Admin interface */
    .admin-container, .admin-content {
        color: var(--text-dark) !important;
        background: var(--bg-primary) !important;
    }
    
    /* Breadcrumbs and navigation */
    .breadcrumb, .breadcrumb-item {
        color: var(--text-dark) !important;
    }
    
    /* Status indicators (keep appropriate colors) */
    .status-online, .status-offline {
        /* Keep their original colors as they have good contrast */
    }
    
    /* Weather notifications (keep original for visibility) */
    .weather-notification-bar, .notification-bar {
        /* Keep original colors for weather alerts */
    }
    
    /* Override any remaining white text */
    .text-white:not(.btn):not(.badge):not(.alert-danger) {
        color: var(--text-dark) !important;
    }
    
    /* Lead text */
    .lead {
        color: var(--text-light) !important;
    }
    
    /* Muted text */
    .text-muted {
        color: var(--text-muted) !important;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 576px) {
    /* Ensure even smaller devices have proper contrast */
    * {
        color: var(--text-dark) !important;
    }
    
    body {
        background: var(--bg-primary) !important;
    }
}