/* REFINED SOFT DARK MODE */

/* 1. Main Background & Text */
body.dark-mode {
    background-color: #121212 !important; /* Soft dark grey */
    background-image: none !important;    /* Removes the fixed background image for better contrast */
    color: #e0e0e0 !important;
}
 
/* 2. Mapping the Blues (#1e3799 and #2c3e50) */
body.dark-mode .navbar,
body.dark-mode #splash-screen,
body.dark-mode .emergency-hotline,
body.dark-mode .social-media{
    background: linear-gradient(135deg, #162447, #000000) !important; /* Deep Midnight Blue */
    color: #ffffff !important;
}

body.dark-mode .footer,
body.dark-mode .footer-section{
    background: linear-gradient(135deg, #000000) !important; /* Deep Midnight Blue */
    color: #ffffff !important;
}
/* 3. Mapping the Red Highlights (#c0392b) */
body.dark-mode .news-updates h2,
body.dark-mode .read-more-btn,
body.dark-mode .view-btn,
body.dark-mode .navbar-search button,
body.dark-mode .announcements-header {
    background-color: #8b261b !important; /* Desaturated Deep Red */
    border-color: #8b261b !important;
    color: #ffffff !important;
}

body.dark-mode .announcement-section h3{
    background-color:  #1e1e1e!important; /* Desaturated Deep Red */
    color: #ffffff !important;
}
/* 4. Mapping White Cards & Sections to Dark Charcoal */
body.dark-mode .announcements,
body.dark-mode .news-card,
body.dark-mode .about-card,
body.dark-mode .official-card,
body.dark-mode .punong-barangay,
body.dark-mode .mv-card,
body.dark-mode .hotline-card,
body.dark-mode .fact-card,
body.dark-mode .e-services-banner,
body.dark-mode .contact-sidebar,
body.dark-mode .modal-content,
body.dark-mode .egov-card,
body.dark-mode .map-container,
body.dark-mode .boundary-container,
body.dark-mode .dropdown-content {
    background-color: #1e1e1e !important; /* Elevated Dark Surface */
    color: #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    border: 1px solid #333 !important;
}

body.dark-mode .mv-card p {
    color: #b0bec5 !important; /* Soft blue-grey text for readability */
}   
/* 5. Section Background Adjustments */
body.dark-mode .news-updates,
body.dark-mode .about,
body.dark-mode .certificates-awards,
body.dark-mode .mv-section {
    background: #181818 !important; /* Slightly lighter than the main body */
}



body.dark-mode .gallery {
    background: #1a1a1a !important; /* Replaces the light grey #c5c3c3 */
}

/* 6. Text Colors for Links and Subtitles */
body.dark-mode .news-card p,
body.dark-mode .about p,
body.dark-mode .post-preview,
body.dark-mode .announcement-section a,
body.dark-mode .hotline-card {
    color: #b0bec5 !important; /* Soft blue-grey text for readability */
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3,
body.dark-mode .logo span {
    color: #ffffff !important;
}

/* 7. Icon Colors */
body.dark-mode .post-meta i,
body.dark-mode .news-card i {
    color: #4db6ac !important; /* Soft Teal instead of Black icons */
}

/* 8. Specific Overrides */
body.dark-mode .announcements-header {
    background: #252525 !important; /* Dark header for announcements */
}

body.dark-mode .user-dropdown {
    background: #252525 !important;
}

body.dark-mode .user-dropdown a {
    color: #ffffff !important;
}

body.dark-mode .user-dropdown a:hover {
    background: #1e3799 !important;
}

/* --- MODAL TEXT FIXES --- */

/* Targets all text inside any modal content */
body.dark-mode .modal-content,
body.dark-mode .modal-content h3,
body.dark-mode .modal-content p,
body.dark-mode .modal-content span,
body.dark-mode #newsModal p,
body.dark-mode #newsModal h3,
body.dark-mode #officialModal h3,
body.dark-mode #officialModal p {
    color: #ffffff !important; /* Force everything to white */
}

/* Specific fix for the 'Read More' details in News Modal */
body.dark-mode #newsDetails {
    color: #cfd8dc !important; /* Soft silver for long descriptions */
    white-space: pre-wrap; /* Keeps your line breaks */
}


/* --- E-SERVICES & DROPDOWN FIXES --- */

/* Fix the main button text (Resident Records / Certificates) */
body.dark-mode .egov-card .dropbtn {
       background-color: #1e1e1e !important; /* Elevated Dark Surface */
    color: #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    border: 1px solid #333 !important;
}

/* Fix the text inside the dropdown menu that was #333 */
body.dark-mode .dropdown-content a {
    color: #e0e0e0 !important;
    background-color: #252525 !important; /* Darker background for the list */
}

/* Hover effect for dropdown items */
body.dark-mode .dropdown-content a:hover {
    background-color: #1e3799 !important; /* Royal blue highlight */
    color: #ffffff !important;
}

/* Fix for the "E-Services" header if the <font> tag causes issues */
body.dark-mode .egov h2 font {
    color: #ffffff !important;
}


/* --- ABOUT SECTION & QUICK FACTS FIXES --- */

/* The 'About' section had text set to #555 */
body.dark-mode .about p,
body.dark-mode .about-card p,
body.dark-mode .fact-card p {
    color: #cfd8dc !important;
}

/* Ensure the Fact Card titles aren't dark */
body.dark-mode .fact-card h3 {
    color: #ffffff !important;
}

/* --- ANNOUNCEMENTS & ADVISORIES DARK MODE FIX --- */

/* Targets the container for date, time, and location */
body.dark-mode .post-meta {
    color: #f7f7f7fa !important; /* Soft blue-grey for the labels */
}
body.dark-mode .sidebar-post{background-color: #333; box-shadow: #cfd8dc;}


/* Fixes the icons (calendar, clock, location-dot) which were hardcoded to black */
body.dark-mode .post-meta i {
    color: #4db6ac !important; /* Soft Teal for visibility */
}

/* Fixes the preview text snippet */
body.dark-mode .post-preview {
    color: #cfd8dc !important; /* Light silver for readability */
}

/* Fixes the main link titles inside the announcement list */
body.dark-mode .announcement-section a {
    color: #ffffff !important;
}

/* Ensures the red bold titles remain readable */
body.dark-mode .announcement-section a strong {
    color: #ff6b6b !important; /* Lighter red for dark background */
}

/* Fixes the Date/Time header inside the announcements panel */
body.dark-mode .announcements-header {
    background: #252525 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #8b261b !important;
}

/* --- BARANGAY OFFICIALS SECTION DARK MODE --- */

/* 1. The Section Background */
body.dark-mode .officials-section {
    /* We remove the solid color and use a semi-transparent black overlay */
    /* 0.7 means 70% dark tint, allowing the background1.jpg/officialsBG1.jpg to show through */
    background-color: rgba(18, 18, 18, 0.7) !important; 
    
    /* This ensures the background image stays fixed and visible under the tint */
    background-blend-mode: multiply;
}

/* 2. The Official Cards */
body.dark-mode .official-card, 
body.dark-mode .punong-barangay {
    background-color: #1e1e1e !important; /* Lighter than the section background */
    border: 1px solid #333 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 3. Card Text Colors */
body.dark-mode .official-card h4, 
body.dark-mode .punong-barangay h3,
body.dark-mode .punong-barangay h4 {
    color: #ffffff !important;
}

body.dark-mode .official-card p, 
body.dark-mode .punong-barangay p {
    color: #b0bec5 !important; /* Soft blue-grey for the position title */
}

/* 4. Hover Effect for better interaction */
body.dark-mode .official-card:hover, 
body.dark-mode .punong-barangay:hover {
    background-color: #413b3b !important; /* Lights up slightly on hover */
    border-color: #1e3799 !important; /* Subtle blue border on hover to match your theme */
    transform: translateY(-8px);
}

/* 5. Section Heading */
body.dark-mode .officials-section h2 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}