/* Additional Mobile Fixes - Force Light Theme */

/* Override any conflicting CSS that might cause dark tables */
body {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Force all containers to be light */
.container,
.container-fluid {
    background-color: transparent !important;
}

/* Ensure all cards are light */
.card,
.card-body,
.card-header,
.card-footer {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

/* Override any dark mode from other CSS files */
* {
    --bs-body-bg: #f8f9fa !important;
    --bs-body-color: #212529 !important;
    --bs-table-bg: #ffffff !important;
    --bs-table-color: #212529 !important;
    --bs-table-border-color: #dee2e6 !important;
}

/* Force light theme for all table variants */
.table-light {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.table-light thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

.table-light tbody tr {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.table-light td {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Override Bootstrap dark theme if applied */
.table-dark,
.table-dark thead th,
.table-dark tbody tr,
.table-dark td,
.table-dark th {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

/* Ensure proper contrast for all text elements */
.text-dark,
.text-muted,
.text-secondary {
    color: #212529 !important;
}

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

/* Mobile specific overrides */
@media (max-width: 768px) {
    /* Force light theme on mobile */
    body {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
    
    .table {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .table thead th {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
    
    .table tbody tr {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .table td {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .table th {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
    
    /* Ensure cards are light on mobile */
    .card {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .card-body {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .card-header {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    body {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
    
    .table {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .table thead th {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
    
    .table tbody tr {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .table td {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .table th {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
    
    .card {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .card-body {
        background-color: #ffffff !important;
        color: #212529 !important;
    }
    
    .card-header {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
}

/* Override any CSS that might be setting dark colors */
[class*="dark"],
[class*="Dark"],
[class*="DARK"] {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Ensure form elements are also light */
.form-control,
.form-select,
.form-check-input {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}

.form-control:focus,
.form-select:focus {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #007bff !important;
}