/* dark-mode.css */

/*
 * ===================================================================
 * DARK MODE THEME FOR STUDENT SAHAYAK
 * ===================================================================
*/

/* 1. Define dark mode colors using CSS variables on the body */
body.dark-mode {
    --bg-color: #1a1a1d;             /* Dark background */
    --surface-color: #2c2f33;        /* Cards, headers, containers */
    --text-primary: #f0f0f0;         /* Main text color */
    --text-secondary: #a0a0a0;       /* Lighter, secondary text */
    --accent-color: #00796b;         /* Your original green */
    --border-color: #4a4a4a;         /* Borders for inputs, etc. */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --strong-shadow-color: rgba(0, 0, 0, 0.6);
    --watermark-color: rgba(255, 255, 255, 0.05);
}

/* 2. Apply base styles */
body.dark-mode {
    background-color: var(--bg-color);
    color: var(--text-primary);
}

/* =================================================================== */
/* 3. COMPONENT & LAYOUT OVERRIDES 
/* (Targeting elements from all your CSS files)
/* =================================================================== */

/* --- Headers, Navbars, and Footers --- */
body.dark-mode header,
body.dark-mode .site-header-homepage,
body.dark-mode .site-header-inner,
body.dark-mode .mobile-search-container { 
    background-color: var(--surface-color);
    box-shadow: 0 4px 6px -1px var(--shadow-color);
    border: none;

}

body.dark-mode .search-container-desktop{
    background-color: var(--text-primary); 
    box-shadow: 0 4px 6px -1px var(--shadow-color);  
}

body.dark-mode .sub-navbar {
    background-color: #222529;
    border-top: 1px solid var(--border-color);
}

body.dark-mode .sub-navbar a,
body.dark-mode .desktop-nav a,
body.dark-mode .desktop-nav-inner a,
body.dark-mode .search-icon-btn {
    color: var(--text-primary);
}

body.dark-mode .footers, /* from styles.css */
body.dark-mode .site-footer { /* from header-footer-styles.css */
    background: #222529;
    color: var(--text-secondary);
}

body.dark-mode .footer-bottom {
    border-top-color: var(--border-color);
}

body.dark-mode .footer-column h4 {
    color: #ffffff;
}

body.dark-mode .footer-column ul a {
    color: var(--text-secondary);
}
body.dark-mode .footer-column ul a:hover {
    color: #ffffff;
}

/* --- Cards and Containers --- */
body.dark-mode .filter-section,
body.dark-mode .article-card,
body.dark-mode .update-card,
body.dark-mode .update,
body.dark-mode .section,
body.dark-mode .content-box {
    background: var(--surface-color);
    box-shadow: 0 2px 5px var(--shadow-color);
}

body.dark-mode .article-card:hover {
    box-shadow: 0 6px 12px var(--strong-shadow-color);
}

body.dark-mode .class-card {
    background: #3a3f44;
}

body.dark-mode .card-content {
    background: var(--surface-color);
    border-left-color: var(--accent-color);
}

/* --- Text and Links --- */
body.dark-mode .page-title,
body.dark-mode .section.questions h2,
body.dark-mode .about-text {
    color: var(--text-primary);
}

body.dark-mode .article-card p,
body.dark-mode .breadcrumb,
body.dark-mode .update-date,
body.dark-mode .update-text{
    color: var(--text-secondary);
}

/* --- Forms and Inputs --- */
body.dark-mode select,
body.dark-mode .ask textarea,
body.dark-mode .mobile-search-container input,
body.dark-mode .search-container-inner input {
    background-color: var(--bg-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* --- Miscellaneous --- */
body.dark-mode .notification-bar {
    background-color: var(--surface-color);
    color: var(--text-primary);
}

body.dark-mode .section.questions {
    background-color: #222529;
}

body.dark-mode #updates-list {
    background: var(--bg-color);
    border-color: var(--border-color);
}

body.dark-mode .content-box::before { /* Watermark */
    color: var(--watermark-color);
}

/* --- Slide-in Menu --- */
body.dark-mode .nav-links {
    background-color: var(--surface-color);
}
body.dark-mode .nav-links li a {
    color: var(--text-primary);
}
body.dark-mode .nav-links li a:hover {
    background-color: var(--bg-color);
}
body.dark-mode .separator {
    background-color: var(--border-color);
}
body.dark-mode .menu-footer {
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

/* =================================================================== */
/* 4. DARK MODE TOGGLE BUTTON STYLES
/* =================================================================== */
.dark-mode-toggle {
    background: none;
    border: 1px solid #ccc; 
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    color: #555;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.dark-mode-toggle:hover {
    background-color: #f0f0f0;
    color: #333;
}

body.dark-mode .dark-mode-toggle {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark-mode .dark-mode-toggle:hover {
    background-color: var(--bg-color);
    color: var(--text-primary);
}

/* Logic to show the correct icon */
.dark-mode-toggle .fa-sun {
    display: none;
}
.dark-mode-toggle .fa-moon {
    display: block;
}

body.dark-mode .dark-mode-toggle .fa-sun {
    display: block;
}
body.dark-mode .dark-mode-toggle .fa-moon {
    display: none;
}
body.dark-mode .separator {
    background-color: var(--border-color); /* Uses your dark mode color */
}

/* --- MCQ and Fill in the Blanks Blocks --- */
body.dark-mode .mcq-block,
body.dark-mode .fill-in-the-blanks-block {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

body.dark-mode .mcq-option {
    background-color: var(--bg-color); /* Darker background for options */
}

body.dark-mode .mcq-correct {
    background-color: #224024; /* A dark, subtle green */
    color: #c8e6c9;
}

body.dark-mode .writing-section {
    background-color: var(--surface-color);
}

body.dark-mode .writing-section h4 {
    color: #A5D6A7; /* A lighter green for the heading */
}

/* --- Styles for Static Pages (About, Contact, Privacy, etc.) --- */
body.dark-mode .content,
body.dark-mode .member,
body.dark-mode .faq-item,
body.dark-mode .contact-form,
body.dark-mode body { /* for disclaimer.html */
    background-color: var(--surface-color);
    color: var(--text-primary);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .member a.name-link {
    color: #A5D6A7; /* Light green for titles */
}

body.dark-mode .member p,
body.dark-mode .faq-question {
    color: var(--text-secondary);
}

body.dark-mode .faq-question {
    background-color: var(--bg-color);
}

body.dark-mode .faq-answer {
    background-color: var(--surface-color);
}

/* body.dark-mode input, */
body.dark-mode textarea {
    background-color: var(--bg-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .contact-form button,
body.dark-mode .footer {
    background-color: var(--accent-color);
}

body.dark-mode .social-links a,
body.dark-mode .footer a {
    color: #f0f0f0;
}

/* ============================================= */
/* Dark Mode: Search Results Page
/* ============================================= */

/* Main background for the search results page */
body.dark-mode .search-results-page {
  background-color: #121212;
  color: #e0e0e0;
}

/* Headings and paragraphs on the page */
body.dark-mode .search-results-page h1,
body.dark-mode .search-results-page p {
  color: #f5f5f5;
}

/* Individual result card item */
body.dark-mode .result-item {
  background-color: #1e1e1e;
  border-color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Title text inside the result card */
body.dark-mode .result-title {
  color: #f5f5f5;
}

/* Hover effect for result cards in dark mode */
body.dark-mode .result-item:hover {
  background-color: #2a2a2a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* "No Results Found" message box */
body.dark-mode #no-results-message {
  background-color: #1e1e1e;
  color: #e0e0e0;
}