/* 
 * Dark Theme Fix - Minimal overrides for legacy compatibility
 * 
 * This file has been significantly reduced after refactoring the base CSS variables
 * in variables.css to natively support dark mode. Most styles now use semantic
 * CSS variables (--text-primary, --bg-secondary, etc.) instead of hardcoded colors.
 * 
 * This file now only contains:
 * 1. Mobile-specific navigation overrides
 * 2. Legacy page-specific class support
 * 3. Browser-specific form element fixes
 * 4. Component overrides that can't be handled by variables alone
 * 
 * The majority of !important declarations have been eliminated.
 */

/* Mobile menu hamburger bars - specific styling needed */
.hamburger .bar {
    background-color: var(--navbar-text);
}

/* Mobile menu active states - specific mobile behavior */
.nav-menu.active {
    background-color: var(--navbar-mobile-bg);
}

.nav-menu.active .nav-link {
    color: var(--navbar-text);
}

.nav-menu.active .nav-link:hover,
.nav-menu.active .nav-link.active {
    color: var(--navbar-link-hover);
    background-color: var(--primary-light);
}

/* Footer bottom text - specific styling */
.footer-bottom {
    color: var(--footer-text-muted);
}

/* Section titles - legacy class support */
.section-title {
    color: var(--text-primary);
}

/* APPLICATION FORM FIXES - Legacy page-specific styles */
.application-section {
    background-color: var(--bg-secondary);
}

.application-container {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.application-title {
    color: var(--text-primary);
}

.application-description {
    color: var(--text-secondary);
}

.application-info {
    color: var(--text-secondary);
}

.character-count {
    color: var(--text-secondary);
}

/* DASHBOARD FIXES - Legacy page-specific styles */
.dashboard-section {
    background-color: var(--bg-secondary);
}

.dashboard-header {
    background-color: var(--bg-tertiary);
}

.user-info h1 {
    color: var(--text-primary);
}

.service-id, .rank {
    color: var(--text-secondary);
}

.profile-picture-placeholder {
    background-color: var(--bg-quaternary);
    color: var(--text-secondary);
}

.stat-label {
    color: var(--text-primary);
}

.stat-value {
    color: var(--text-secondary);
}

.stats-list li {
    border-bottom-color: var(--border-primary);
}

.coming-soon {
    color: var(--text-secondary);
}

/* Progress indicator fixes */
.progress-indicator {
    color: var(--text-primary);
}

.progress-bar {
    background-color: var(--bg-quaternary);
}

.progress-fill {
    background-color: var(--primary-color);
}

.progress-text {
    color: var(--text-primary);
}

/* Status indicator fixes - ensure white text on colored backgrounds */
.status-indicator.active,
.status-active,
.platoon-status.active {
    color: var(--text-primary) !important;
}

.status-indicator.loa,
.status-loa,
.platoon-status.deployed {
    color: var(--text-primary) !important;
}

.status-indicator.discharged,
.status-discharged,
.platoon-status.inactive {
    color: var(--text-primary) !important;
}

/* Roster page filter button fixes */
.filter-btn {
    color: var(--text-primary);
}

.filter-btn:hover,
.filter-btn.active {
    color: var(--text-primary);
}

.category-nav a {
    color: var(--text-primary);
}

.category-nav a:hover,
.category-nav a.active {
    color: var(--text-primary);
}

/* FORM VALIDATION FIXES - Browser-specific overrides */
select.form-control option {
    background-color: var(--form-bg);
    color: var(--form-text);
}

/* LOGIN PAGE FIXES - Legacy page-specific styles */
.login-container {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.login-title {
    color: var(--text-primary);
}

/* ADMIN PAGES FIXES - Legacy page-specific styles */
.admin-section {
    background-color: var(--bg-secondary);
}

.admin-header {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.admin-card {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* MODAL FIXES - Component-specific overrides */
.modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-text);
}

.modal-header {
    background-color: var(--modal-header-bg);
    color: var(--modal-text);
    border-bottom-color: var(--modal-border);
}

.modal-body {
    background-color: var(--modal-bg);
    color: var(--modal-text);
}

.modal-footer {
    background-color: var(--modal-header-bg);
    border-top-color: var(--modal-border);
}