/* ===========================================
   LEARNMAP - DARK MODE STYLESHEET
   ===========================================
   Link this file in your HTML:
   <link rel="stylesheet" href="dark-mode.css">
   
   All styles here use body.dark-mode prefix
   Color Palette: #22334f, #c89a66, #1e293b
   =========================================== */

/* ===========================================
   1. CORE BACKGROUNDS & TEXT
   =========================================== */
body.dark-mode {
    background-color: #1e293b;
    color: #f8fafc;
}

body.dark-mode .page-content,
body.dark-mode .awareness-section,
body.dark-mode .news-section {
    background-color: #1e293b;
}

body.dark-mode .recommendation-section,
body.dark-mode .universities-section {
    background-color: #22334f;
}

/* ===========================================
   2. NAVIGATION
   =========================================== */
body.dark-mode .navbar {
    background-color: #22334f;
    border-bottom: 1px solid #334155;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

body.dark-mode .nav-menu a,
body.dark-mode .logo-text {
    color: #f8fafc;
}

body.dark-mode .nav-menu a:hover {
    color: #c89a66;
}

body.dark-mode .nav-menu a::after {
    background: linear-gradient(135deg, #c89a66, #b38a5a);
}

/* ===========================================
   3. DROPDOWN MENUS
   =========================================== */
body.dark-mode .dropdown-menu,
body.dark-mode .dropdown-submenu {
    background-color: #22334f;
    border: 1px solid #334155;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-menu li a {
    color: #f8fafc;
}

body.dark-mode .dropdown-menu li a:hover {
    background-color: #1e293b;
    color: #c89a66;
}

body.dark-mode .dropdown-menu li.has-submenu > a::before {
    color: #c89a66;
}

/* ===========================================
   4. HERO SECTION
   =========================================== */
body.dark-mode .hero {
    background: linear-gradient(135deg, #0a1628 0%, #22334f 100%);
}

body.dark-mode .hero::before {
    background: radial-gradient(circle, rgba(200, 154, 102, 0.15) 0%, transparent 70%);
}

body.dark-mode .hero::after {
    background: radial-gradient(circle, rgba(200, 154, 102, 0.1) 0%, transparent 70%);
}

body.dark-mode .hero-title {
    color: #ffffff;
}

body.dark-mode .hero-subtitle {
    color: #c89a66;
}

body.dark-mode .hero-section {
    background: #0f1224;
}

/* ===========================================
   5. CARDS & SECTIONS
   =========================================== */
/* Field Cards */
body.dark-mode .field-card {
    background: linear-gradient(135deg, #1a2840, #22334f);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .field-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

body.dark-mode .field-card h3 {
    color: #c89a66;
}

body.dark-mode .field-subtitle {
    color: #c89a66;
}

body.dark-mode .field-icon {
    background: rgba(200, 154, 102, 0.15);
    color: #c89a66;
}

/* News Cards */
body.dark-mode .news-card {
    background: #22334f;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .news-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

body.dark-mode .news-content h3 {
    color: #f8fafc;
}

body.dark-mode .news-card:hover .news-content h3 {
    color: #c89a66;
}

body.dark-mode .news-image {
    background: linear-gradient(135deg, #1a2840, #22334f);
}

/* Video & Chart Cards */
body.dark-mode .video-card {
    background: linear-gradient(135deg, #1a2840, #22334f);
}

body.dark-mode .chart-card {
    background: #22334f;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .chart-card h4 {
    color: #f8fafc;
}

body.dark-mode .bar-label {
    color: #cbd5e1;
}

/* ===========================================
   6. BUTTONS
   =========================================== */
/* Dark Mode Toggle */
body.dark-mode .btn-dark-mode {
    background-color: #334155;
    color: #f8fafc;
    border-color: #475569;
}

body.dark-mode .btn-dark-mode:hover {
    background-color: #475569;
}

/* Secondary Button */
body.dark-mode .btn-secondary {
    color: #cbd5e1;
}

body.dark-mode .btn-secondary:hover {
    color: #c89a66;
}

/* Primary Buttons */
body.dark-mode .btn-primary,
body.dark-mode .btn-hero,
body.dark-mode .btn-field,
body.dark-mode .btn-apply {
    background: linear-gradient(135deg, #c89a66, #b38a5a);
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-hero:hover,
body.dark-mode .btn-field:hover,
body.dark-mode .btn-apply:hover {
    box-shadow: 0 8px 25px rgba(200, 154, 102, 0.4);
}

/* ===========================================
   7. NEWS & FILTERS
   =========================================== */
body.dark-mode .filter-btn {
    background: #334155;
    color: #cbd5e1;
}

body.dark-mode .filter-btn.active {
    background: linear-gradient(135deg, #c89a66, #b38a5a);
    color: white;
}

body.dark-mode .filter-btn:hover {
    background: #475569;
}

body.dark-mode .news-category {
    background: rgba(200, 154, 102, 0.2);
    color: #c89a66;
}

body.dark-mode .news-category:hover {
    background: rgba(200, 154, 102, 0.3);
}

body.dark-mode .news-tag {
    background: #334155;
    color: #cbd5e1;
}

body.dark-mode .news-meta {
    color: #94a3b8;
}

/* ===========================================
   8. VIDEO PLAYER & CONTROLS
   =========================================== */
body.dark-mode .video-player {
    background: #0a1628;
}

body.dark-mode .video-badge {
    background: linear-gradient(135deg, #c89a66, #b38a5a);
}

body.dark-mode .video-card h3 {
    color: #f8fafc;
}

body.dark-mode .play-icon {
    background: rgba(200, 154, 102, 0.9);
}

body.dark-mode .control-btn {
    background: rgba(200, 154, 102, 0.3);
}

body.dark-mode .control-btn:hover {
    background: rgba(200, 154, 102, 0.6);
}

body.dark-mode .progress-bar {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .progress-fill {
    background: linear-gradient(135deg, #c89a66, #b38a5a);
}

body.dark-mode .time {
    color: #cbd5e1;
}

/* ===========================================
   9. CHARTS & MAPS
   =========================================== */
body.dark-mode .map-container {
    background: linear-gradient(135deg, #1a2840, #22334f);
}

body.dark-mode .bar {
    background: linear-gradient(to top, #b38a5a, #c89a66);
}

body.dark-mode .bar-group:hover .bar-label {
    color: #c89a66;
}

body.dark-mode .nav-arrow,
body.dark-mode .nav-arrow-small {
    background: linear-gradient(135deg, #c89a66, #b38a5a);
}

/* ===========================================
   10. FOOTER
   =========================================== */
body.dark-mode .footer {
    background: #0a1628;
    border-top: 1px solid #334155;
}

body.dark-mode .footer-section h4 {
    color: #c89a66;
}

body.dark-mode .footer-tagline {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .values-list li {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .values-list li:hover {
    color: #c89a66;
}

body.dark-mode .values-list li::before {
    color: #c89a66;
}

body.dark-mode .footer-links a {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .footer-links a:hover {
    color: #c89a66;
}

body.dark-mode .footer-bottom {
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===========================================
   11. MOBILE NAVIGATION
   =========================================== */
body.dark-mode .nav-menu {
    background: linear-gradient(180deg, #0a1628 0%, #22334f 100%);
}

body.dark-mode .nav-menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .dropdown-menu {
    background: rgba(0, 0, 0, 0.2);
}

body.dark-mode .dropdown-submenu {
    background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .hamburger span {
    background: #c89a66;
}

/* ===========================================
   12. FORM ELEMENTS (if any exist)
   =========================================== */
body.dark-mode .form-container {
    background: #22334f;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .form-group label {
    color: #f8fafc;
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
body.dark-mode .form-group select {
    background: #334155;
    border: 1px solid #475569;
    color: #f8fafc;
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
    color: #94a3b8;
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus,
body.dark-mode .form-group select:focus {
    outline: 2px solid #c89a66;
    border-color: #c89a66;
}

/* ===========================================
   13. TEXT & TYPOGRAPHY
   =========================================== */
body.dark-mode .section-title {
    color: #f8fafc;
}

body.dark-mode .section-subtitle {
    color: #cbd5e1;
}

/* ===========================================
   14. MISC COMPONENTS
   =========================================== */
body.dark-mode .globe-center {
    background: radial-gradient(circle, rgba(200, 154, 102, 0.3), rgba(179, 138, 90, 0.5));
    box-shadow: 0 0 30px rgba(200, 154, 102, 0.4);
}

body.dark-mode .rec-visual {
    background: linear-gradient(135deg, #22334f, #1a2840);
}

body.dark-mode .rec-text p {
    color: #cbd5e1;
}

body.dark-mode .page-hero {
    background: linear-gradient(135deg, #22334f, #0a1628);
}

body.dark-mode .rec-list li {
    color: #cbd5e1;
}

body.dark-mode .rec-icon {
    color: #c89a66;
}

/* ===========================================
   15. IMAGE FILTERS
   =========================================== */
body.dark-mode .uni-logo img {
    filter: brightness(0.8) contrast(1.2);
    opacity: 0.8;
}

body.dark-mode .uni-logo img:hover {
    filter: brightness(1) contrast(1);
    opacity: 1;
}

/* ===========================================
   SCROLLBAR STYLING (Optional)
   =========================================== */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1e293b;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ===========================================
   END OF DARK MODE STYLES
   =========================================== */