/* Light Mode Styles */
.light body, .light {
    background: #f0f2f5 !important; /* Force background */
    color: #1c1e21 !important; /* Force dark text */
    color-scheme: light;
}

.light .top-bar {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid #dcdfe3 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Force dark text on everything that might be white */
.light h1, .light h2, .light h3, .light h4, .light h5, .light h6, 
.light p, .light span, .light div, .light label, .light strong, .light b, .light li, .light i, .light small, .light .form-subtitle {
    color: #1c1e21 !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentcolor !important;
}

/* Specific overrides for titles that use gradients */
.light .info-title, .light .project-title, .light .brand-title, .light .card-title, .light .portal-summary-title, .light .section-label {
    background: none !important;
    color: #1c1e21 !important;
    -webkit-text-fill-color: #1c1e21 !important;
}

.light .section-label {
    color: #1877f2 !important; /* Keep blue for section labels but ensure visibility */
}

.light .brand-subtitle, .light .form-subtitle, .light small {
    color: #606770 !important;
}

.light .lang-switcher {
    background: #e4e6eb !important;
    border: 1px solid #dcdfe3 !important;
}

.light .lang-btn {
    color: #606770 !important;
}

.light .lang-btn.active {
    background: #1877f2 !important;
    color: white !important; /* Keep white on active blue button */
}

.light .lang-btn.active i {
    color: white !important;
}

.light .nav-link-ghost {
    background: #e4e6eb !important;
    color: #1c1e21 !important;
    border: 1px solid transparent !important;
}

.light .nav-link-ghost i {
    color: #1c1e21 !important;
}

.light .nav-link-ghost:hover {
    background: #dcdfe3 !important;
}

.light .nav-link-primary {
    background: #1877f2 !important;
    color: white !important; /* Keep white text on primary blue */
}

.light .nav-link-primary i {
    color: white !important;
}

/* Cards and Boxes */
.light .project-card, .light .info-card, .light .checklist-card, .light .form-card, .light .instructions-box, .light .portal-summary-card {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
}

.light .instructions-box {
    background: #f0f2f5 !important;
}

/* Form Elements */
.light .form-input, .light .form-select {
    background: #f0f2f5 !important;
    border: 1px solid #dcdfe3 !important;
    color: #1c1e21 !important;
}

.light .form-input::placeholder, .light .form-select::placeholder {
    color: #8a8d91 !important;
}

.light .checkbox-option {
    background: #f0f2f5 !important;
    border-color: #dcdfe3 !important;
}

.light .checkbox-option span {
    color: #1c1e21 !important;
}

.light .form-input:focus, .light .form-select:focus {
    border-color: #1877f2 !important;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1) !important;
    background: #ffffff !important;
}

.light .form-input[type="file"]::file-selector-button {
    background: #e4e6eb !important;
    border: 1px solid #dcdfe3 !important;
    color: #1c1e21 !important;
}

.light .form-input[type="file"]::file-selector-button:hover {
    background: #dcdfe3 !important;
}

/* Status and Labels */
.light .status-pill {
    background: rgba(24, 119, 242, 0.1) !important;
    border-color: rgba(24, 119, 242, 0.2) !important;
    color: #1877f2 !important;
}

.light .status-pill i {
    color: #1877f2 !important;
}

.light .section-label {
    color: #1877f2 !important;
}

/* Tables */
.light .fam-table th {
    background: #f0f2f5 !important;
    color: #606770 !important;
    border-bottom: 1px solid #dcdfe3 !important;
}

.light .fam-table td {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e6eb !important;
}

/* Footer */
.light .site-footer {
    background: #ffffff !important;
    border-top: 1px solid #dcdfe3 !important;
}

.light .footer-text, .light .footer-link {
    color: #606770 !important;
}

.light .footer-link i {
    color: #1877f2 !important;
}

/* Lists and Marker */
.light .instructions-text ol li,
.light .instructions-text ol li::marker {
    color: #1c1e21 !important;
}

.light .checklist-list > li::before,
.light .checklist-list > li::after {
    color: #ffffff !important; /* Keep marker white inside blue circle */
}

.light .checklist-list > li {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    color: #1c1e21 !important;
}

.light .checklist-list li strong {
    color: #1c1e21 !important;
}

.light .checklist-sublist li {
    color: #606770 !important;
}

.light .download-link {
    background: #e7f3ff !important;
    border-color: #1877f2 !important;
    color: #0056b3 !important; /* Darker blue for contrast */
}

.light .download-link:hover {
    background: #dbeafe !important;
    color: #004494 !important;
}

.light .form-description {
    color: #4b5563 !important;
    border-left-color: #1877f2 !important;
}

.light .form-meta span {
    color: #6b7280 !important;
}

.light .file-info {
    background: #e4e6eb !important;
    color: #4b5563 !important;
}

.light .form-badge {
    background: #e1f5fe !important;
    border-color: #03a9f4 !important;
    color: #0277bd !important;
}

/* Override any inline styles that might still be white or light gray */
.light [style*="color: white"], 
.light [style*="color:#ffffff"], 
.light [style*="color: #fff"],
.light [style*="color: #cbd5e1"],
.light [style*="color:#cbd5e1"],
.light [style*="color: #94a3b8"],
.light [style*="color:#94a3b8"],
.light [style*="color: #6b7280"],
.light [style*="color:#6b7280"],
.light [style*="color: #e2e8f0"],
.light [style*="color:#e2e8f0"] {
    color: #1c1e21 !important;
}

/* But keep white for elements on primary backgrounds */
.light .btn-primary *, .light .nav-link-primary *, .light .apply-cta-button * {
    color: white !important;
}

.light .form-progress::before {
    background: #dcdfe3 !important;
    opacity: 1 !important;
    left: 65px !important;
    right: 65px !important;
}

/* Progress Steps visibility fix */
.light .progress-icon {
    background: #ffffff !important;
    border-color: #dcdfe3 !important;
    color: #1c1e21 !important;
}

.light .progress-icon i {
    color: #1c1e21 !important; /* Dark icon on white circle */
}

.light .progress-step.active .progress-icon {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
}

.light .progress-step.active .progress-icon i {
    color: white !important; /* White icon on blue active circle */
}

.light .progress-step.completed .progress-icon {
    background: #e7f3ff !important;
    border-color: #1877f2 !important;
}

.light .progress-step.completed .progress-icon i {
    color: #1877f2 !important; /* Blue icon for completed */
}

.light .stat-card-value {
    color: #1c1e21 !important;
}

.light .stat-card-label {
    color: #606770 !important;
}

.light .stat-meta {
    color: #8a8d91 !important;
}

.light .export-link {
    background: #f0f2f5 !important;
    color: #1877f2 !important;
    border: 1px solid #dcdfe3 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    text-decoration: none !important;
}

.light .export-link:hover {
    background: #e4e6eb !important;
}

/* Filters and Tables */
.light .filters-section {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    border-radius: 20px !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.light .filter-label {
    color: #606770 !important;
}

.light .filter-input, .light .filter-select {
    background: #f0f2f5 !important;
    border: 1px solid #dcdfe3 !important;
    color: #1c1e21 !important;
}

.light .filter-input:focus, .light .filter-select:focus {
    background: #ffffff !important;
    border-color: #1877f2 !important;
}

.light .table-section {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.light .table-header {
    background: #f0f2f5 !important;
    border-bottom: 1px solid #dcdfe3 !important;
    padding: 1rem 1.5rem !important;
}

.light .table-title {
    color: #1c1e21 !important;
}

.light .table-stats span {
    color: #606770 !important;
    background: #e4e6eb !important;
}

.light table thead th {
    background: #f0f2f5 !important;
    color: #606770 !important;
    border-bottom: 2px solid #dcdfe3 !important;
}

.light table tbody tr {
    border-bottom: 1px solid #f0f2f5 !important;
}

.light table tbody tr:hover {
    background: #f9fafb !important;
}

.light table tbody td {
    color: #1c1e21 !important;
}

/* Status Badges */
.light .status-badge-submitted { background: #e7f3ff !important; color: #1877f2 !important; }
.light .status-badge-eligibility { background: #fff7ed !important; color: #f97316 !important; }
.light .status-badge-verification { background: #fef2f2 !important; color: #ef4444 !important; }
.light .status-badge-board { background: #f5f3ff !important; color: #8b52ff !important; }
.light .status-badge-approved { background: #ecfdf5 !important; color: #10b981 !important; }
.light .status-badge-returned { background: #f9fafb !important; color: #6b7280 !important; }

/* Profile Page Styles */
.light .profile-card {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.light .profile-header {
    background: #f0f2f5 !important;
    border-bottom: 1px solid #dcdfe3 !important;
}

.light .profile-header::before {
    display: none !important; /* Remove the dark radial gradient */
}

.light .profile-name {
    color: #1c1e21 !important;
}

.light .profile-role-badge {
    background: #e4e6eb !important;
    color: #606770 !important;
}

.light .section-title {
    color: #1c1e21 !important;
}

.light .section-title::after {
    background: linear-gradient(90deg, #dcdfe3, transparent) !important;
}

.light .profile-info-alert {
    background: #f0f2f5 !important;
    border-color: #dcdfe3 !important;
    color: #1c1e21 !important;
}

.light .profile-info-alert i {
    color: #606770 !important;
}

/* Common Card and Form Styles (User Management, Projects, Carousel) */
.light .card {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.light .form-header {
    border-bottom: 1px solid #f0f2f5 !important;
    padding-bottom: 1.5rem !important;
}

.light .portal-form label {
    color: #606770 !important;
}

/* Qualified Households / Beneficiaries */
.light .portal-summary-card {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.light .portal-summary-title {
    color: #1c1e21 !important;
}

.light .filter-tabs {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    padding: 6px !important;
    border-radius: 100px !important;
}

.light .filter-tab {
    background: transparent !important;
    color: #606770 !important;
    border: 1px solid transparent !important;
}

.light .filter-tab:hover {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
}

.light .filter-tab-active {
    color: white !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.light .filter-tab-qualified.filter-tab-active { 
    background: #8b5cf6 !important; /* Purple */
}

.light .filter-tab-awarded.filter-tab-active { 
    background: #f59e0b !important; /* Orange/Yellow */
}

.light .filter-tab-all.filter-tab-active { 
    background: #606770 !important; /* Gray */
}

.light .empty-state {
    color: #8a8d91 !important;
}

/* Modals and Confirmations */
.light .confirm-modal {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.light .confirm-title {
    color: #1c1e21 !important;
}

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

.light .confirm-user {
    color: #1c1e21 !important;
    background: #f0f2f5 !important;
}

.light .confirm-icon {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

/* Badges in Tables */
.light .project-badge {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
    border: 1px solid #dcdfe3 !important;
}

.light .stats-badge {
    background: #e4e6eb !important;
    color: #606770 !important;
}

/* Top Profile Pill (Header) */
.light .top-profile-link {
    background: #f0f2f5 !important;
    border-color: #dcdfe3 !important;
}

.light .top-profile-name {
    color: #1c1e21 !important;
}

.light .top-profile-role {
    color: #606770 !important;
}

/* Alert Boxes */
.light .alert-success {
    background: #ecfdf5 !important;
    border-color: #d1fae5 !important;
    color: #065f46 !important;
}

.light .alert-error {
    background: #fef2f2 !important;
    border-color: #fee2e2 !important;
    color: #991b1b !important;
}

/* Thank You Page Styles */
.light .hero-layer-primary {
    background: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.05) 0%, transparent 40%) !important;
}

.light .hero-layer-secondary {
    background: radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%) !important;
}

.light .info-body {
    color: #606770 !important;
}

.light .status-pill {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #d1fae5 !important;
}

.light .status-pill.updated {
    background: #e7f3ff !important;
    color: #1877f2 !important;
    border: 1px solid #dcdfe3 !important;
}

.light .status-dot {
    background: #059669 !important;
}

.light .status-pill.updated .status-dot {
    background: #1877f2 !important;
}

.light .reference-card {
    background: #f0f2f5 !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.light .reference-label {
    color: #8a8d91 !important;
}

.light .reference-number {
    color: #1877f2 !important; /* Blue for reference number in light mode */
}

.light .reference-note {
    color: #8a8d91 !important;
}

.light .btn-primary {
    background: #1c1e21 !important;
    color: white !important;
    border: 1px solid #1c1e21 !important;
}

.light .btn-blue {
    background: #1877f2 !important;
    color: white !important;
    border: 1px solid #1877f2 !important;
}

/* Carousel Image Management Styles */
.light .image-card {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.light .image-info {
    border-top: 1px solid #f0f2f5 !important;
}

.light .image-caption {
    color: #1c1e21 !important;
    font-weight: 600 !important;
}

.light .image-order {
    background: #f0f2f5 !important;
    color: #606770 !important;
}

.light .status-published {
    background: #ecfdf5 !important;
    color: #10b981 !important;
}

.light .status-hidden {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

.light .btn-secondary.btn-sm {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
    border: 1px solid #dcdfe3 !important;
}

.light .btn-secondary.btn-sm:hover {
    background: #e4e6eb !important;
}

/* Dashboard and Staff Portal Styles */
.light .btn-secondary {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
    border: 1px solid #dcdfe3 !important;
}

.light .btn-secondary:hover {
    background: #e4e6eb !important;
    color: #050505 !important;
}

.light .btn-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fee2e2 !important;
}

.light .btn-danger:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.light .portal-sidebar {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.light .portal-sidepanel-backdrop {
    background: rgba(0, 0, 0, 0.3) !important; /* Slightly darker backdrop for light mode */
    backdrop-filter: blur(8px) !important;
}

.light .portal-sidepanel {
    background: #ffffff !important;
    border-left: 1px solid #dcdfe3 !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1) !important;
}

.light .portal-sidepanel-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f2f5 !important;
}

.light .portal-sidepanel-title {
    color: #1c1e21 !important;
}

.light .portal-sidepanel-close {
    color: #606770 !important;
}

.light .portal-sidepanel-close:hover {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
}

/* Fix modal text visibility in light mode */
.light #cameraModal h2, 
.light #cameraModal p,
.light #exitConfirmModal h2,
.light #exitConfirmModal p,
.light #submitConfirmModal h2,
.light #submitConfirmModal p {
    color: #1c1e21 !important;
    background: none !important;
}

.light #cameraModal p,
.light #exitConfirmModal p,
.light #submitConfirmModal p {
    color: #606770 !important;
}

.light #cameraModal .help-modal-content,
.light #exitConfirmModal .help-modal-content,
.light #submitConfirmModal .help-modal-content {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
}

.light .portal-sidepanel-body {
    background: #f8fafc !important;
}

.light .summary-card {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 1.5rem !important;
}

.light .summary-title {
    color: #1877f2 !important;
    border-bottom: 1px solid #f0f2f5 !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.85rem !important;
}

.light .summary-item {
    border-bottom-color: #f1f5f9 !important;
}

.light .summary-label {
    color: #64748b !important;
    font-weight: 500 !important;
}

.light .summary-value {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Fix for stat cards that might still be dark */
.light .stat-card {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
}

.light .stat-card-icon {
    background: #f0f2f5 !important;
    color: #1877f2 !important;
}

.light .portal-sidebar-section {
    border-top: 1px solid #f0f2f5 !important;
}

.light .portal-sidebar-link {
    color: #606770 !important;
}

.light .portal-sidebar-link:hover {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
}

.light .portal-sidebar-link-active {
    background: #1877f2 !important;
    color: #ffffff !important;
}

.light .portal-sidebar-label {
    color: #8a8d91 !important;
}

.light .stat-card {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.light .stat-card:hover {
    border-color: #1877f2 !important;
    transform: translateY(-2px);
}

.light .stat-card-icon {
    background: #f0f2f5 !important;
    color: #1877f2 !important;
}

.light .stat-value {
    color: #1c1e21 !important;
}

.light .stat-label {
    color: #606770 !important;
}

.light .stat-description {
    color: #8a8d91 !important;
}

.light .dashboard-header h1 {
    background: none !important;
    -webkit-text-fill-color: #1c1e21 !important;
    color: #1c1e21 !important;
}

.light .dashboard-header p {
    color: #606770 !important;
}

/* Specific Section Fixes */
.light .hero-dashboard, .light .hero-home {
    background: transparent !important;
}

.light .hero-layer-primary, .light .hero-layer-secondary {
    opacity: 0.1; /* Reduce intensity of background glows in light mode */
}

.light .stat-trend {
    color: #10b981 !important; /* Keep green for trends */
}

.light .apply-cta-button {
    background: #1877f2 !important;
    color: white !important;
}

.light .modal-backdrop {
    background: rgba(255, 255, 255, 0.8) !important;
}

.light .portal-modal {
    background: #ffffff !important;
    color: #1c1e21 !important;
}

.light .portal-title, .light .portal-subtitle {
    color: #1c1e21 !important;
}

.light .portal-input {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
    border: 1px solid #dcdfe3 !important;
}

.light .portal-input::placeholder {
    color: #8a8d91 !important;
}

.light .portal-field i {
    color: #606770 !important;
}

.light .portal-divider span {
    background: #ffffff !important;
    color: #606770 !important;
}

.light .portal-divider::before, .light .portal-divider::after {
    background: #dcdfe3 !important;
}

.light .portal-google {
    background: #ffffff !important;
    border: 1px solid #dcdfe3 !important;
    color: #1c1e21 !important;
}

.light .portal-google:hover {
    background: #f0f2f5 !important;
    border-color: #1877f2 !important;
}

.light .portal-google-icon {
    background: #ffffff !important;
    color: #1c1e21 !important;
    border: 1px solid #dcdfe3 !important;
}

.light .modal-close {
    color: #606770 !important;
}

.light .form-progress,
.light .form-card,
.light .form-section,
.light .section-label,
.light .info-title,
.light .form-subtitle,
.light .form-label,
.light .form-input,
.light .form-select,
.light .help-modal-content,
.light .civil-req-trigger,
.light .civil-req-details {
    background-color: #ffffff !important;
    color: #1c1e21 !important;
    background-image: none !important;
}

.light .help-modal {
    background: rgba(0, 0, 0, 0.5) !important;
}

.light .help-modal-content h2,
.light .help-modal-content p,
.light .help-modal-content div {
    color: #1c1e21 !important;
}

.light .form-section {
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

.light .form-input[readonly] {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
    opacity: 1 !important;
}

.light .status-pill {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
}