/* --- LIGHT MODE (Your existing look) --- */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --accent-color: #0d6efd;
}

/* Styling the Injected Button */
.theme-switch-btn {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%; /* Circle shape */
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px 10px;
    margin-left: 15px; /* Space it out from other links */
    transition: all 0.2s ease;
    color: inherit; /* Take color from navbar text */
}

/* Hover Effect */
.theme-switch-btn:hover {
    background-color: rgba(128, 128, 128, 0.2);
    transform: scale(1.1);
}

/* Dark Mode Adjustment */
body.dark-mode .theme-switch-btn {
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

/* --- DARK MODE (The Fix) --- */
body.dark-mode {
    --bg-primary: #121212 !important;   /* Very Dark Grey Background */
    --bg-secondary: #1e1e1e !important; /* Slightly Lighter Grey (Cards/Nav) */
    --text-primary: #e0e0e0 !important; /* Light Grey Text */
    --text-secondary: #a0a0a0 !important; /* Dimmer Text */
    --border-color: #333333 !important; /* Dark Borders */
    --accent-color: #90caf9 !important; /* Light Blue Accent */
}

/* --- APPLYING THE RULES --- */

/* 1. Backgrounds & Text */
body.dark-mode {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* 2. Cards, Navbars, Headers, Footers */
body.dark-mode .card, 
body.dark-mode .navbar, 
body.dark-mode header, 
body.dark-mode footer,
body.dark-mode .container {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 3. Inputs & Textareas (The usual ugly part) */
body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode select {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

/* 4. Links & Buttons */
body.dark-mode a {
    color: var(--accent-color) !important;
}

body.dark-mode button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
/* --- FIX FOR STUBBORN WHITE AREAS --- */

/* 1. Force the Hero Section to be Dark */
body.dark-mode .hero, 
body.dark-mode .hero-section, 
body.dark-mode .jumbotron,
body.dark-mode .banner {
    background-color: #1e1e1e !important; /* Dark Grey */
    color: #e0e0e0 !important;             /* Light Text */
    border-bottom: 1px solid #333;         /* Subtle Border */
}

/* 2. Force Cards to be Dark */
body.dark-mode .card, 
body.dark-mode .panel, 
body.dark-mode .box,
body.dark-mode .container-white {
    background-color: #1e1e1e !important; /* Dark Grey */
    color: #e0e0e0 !important;             /* Light Text */
    border: 1px solid #333 !important;     /* Darker Border */
    box-shadow: 0 4px 6px rgba(0,0,0,0.5); /* Stronger Shadow for depth */
}

/* 3. Fix the Text inside those cards */
/* (Sometimes headings inside cards stay black, so we force them white) */
body.dark-mode .card h1, 
body.dark-mode .card h2, 
body.dark-mode .card h3, 
body.dark-mode .card p,
body.dark-mode .hero h1,
body.dark-mode .hero p {
    color: #e0e0e0 !important;
}
/* FORCE TRANSPARENCY ON CONTAINERS */
body.dark-mode div, 
body.dark-mode section, 
body.dark-mode article, 
body.dark-mode main, 
body.dark-mode .container, 
body.dark-mode .row, 
body.dark-mode .col {
    background-color: transparent !important;
    color: inherit !important;
}

/* BUT KEEP CARDS & INPUTS DARK (Not Transparent) */
body.dark-mode .card, 
body.dark-mode .panel,
body.dark-mode input,
body.dark-mode textarea {
    background-color: #1e1e1e !important; /* Dark Grey */
    color: #e0e0e0 !important;
}