/* ===========================================
   SUBPAGES - DARK MODE STYLESHEET (ENHANCED)
   ===========================================
   Link this file in your subpages HTML:
   <link rel="stylesheet" href="subpages-dark-mode.css">
   
   Works together with dark-mode.css
   =========================================== */

/* ===========================================
   DROPDOWN MENUS
   =========================================== */
body.dark-mode .dropdown-menu,
body.dark-mode .dropdown-submenu {
    background-color: #1e293b;
    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: #334155;
    color: #cbd5e1;
    padding-right: 1.8rem;
}

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

/* ===========================================
   PAGE HERO
   =========================================== */
body.dark-mode .page-hero {
    background: linear-gradient(135deg, #1e3a5f, #0a1628);
}

body.dark-mode .page-hero::before {
    background: radial-gradient(circle, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
}

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

body.dark-mode .page-hero p {
    color: #d4a574;
}

/* ===========================================
   PAGE CONTENT & BACKGROUNDS
   =========================================== */
body.dark-mode .page-content {
    background-color: #1e293b;
}

body.dark-mode .content-grid {
    /* Inherits layout, no color needed */
}

body.dark-mode .main-column {
    background: #1e3a5f;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   SIDEBAR
   =========================================== */
body.dark-mode .sidebar-card {
    background: #1e3a5f;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .sidebar-card h3 {
    color: #f8fafc;
    border-bottom: 2px solid #334155;
}

body.dark-mode .sidebar-links {
    /* Already covered via <li> and <a> */
}

body.dark-mode .sidebar-links li a {
    color: #cbd5e1;
    border-bottom: 1px solid #334155;
}

body.dark-mode .sidebar-links li a:hover {
    color: #d4a574;
    padding-right: 1.2rem;
}

body.dark-mode .sidebar-links li a::before {
    color: #d4a574;
}

body.dark-mode .sidebar-links li:last-child a {
    border-bottom: none;
}

/* ===========================================
   CONTENT SECTIONS & TYPOGRAPHY
   =========================================== */
body.dark-mode .content-section h2,
body.dark-mode .main-column h2 {
    color: #f8fafc;
    border-right: 5px solid #d4a574;
}

body.dark-mode .content-section p,
body.dark-mode .main-column p {
    color: #cbd5e1;
}

body.dark-mode .content-section ul,
body.dark-mode .main-column ul {
    /* List-style is none; no color needed */
}

body.dark-mode .content-section li,
body.dark-mode .main-column li {
    color: #cbd5e1;
}

body.dark-mode .content-section li::before,
body.dark-mode .main-column li::before {
    color: #d4a574;
}

/* ===========================================
   INFO CARDS
   =========================================== */
body.dark-mode .info-card {
    background: #1e3a5f;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .info-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

body.dark-mode .info-card:hover .info-card-content h3 {
    color: #d4a574;
}

body.dark-mode .info-card-image {
    background-color: #334155;
    color: #cbd5e1;
}

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

body.dark-mode .info-card-content p {
    color: #cbd5e1;
}

body.dark-mode .info-card-content .info-tag {
    background: rgba(212, 165, 116, 0.2);
    color: #d4a574;
}

/* ===========================================
   FORMS
   =========================================== */
body.dark-mode .form-container {
    background: #1e3a5f;
    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:hover,
body.dark-mode .form-group textarea:hover,
body.dark-mode .form-group select:hover {
    border-color: #d4a574;
    background-color: #334155;
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus,
body.dark-mode .form-group select:focus {
    border-color: #d4a574;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
}

/* ===========================================
   BUTTONS
   =========================================== */
body.dark-mode .btn-primary,
body.dark-mode .form-container .btn-primary {
    background: #d4a574;
    color: #0a1628;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .form-container .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(212, 165, 116, 0.5);
    background: #c49560;
    color: #0a1628;
}

/* ===========================================
   FAQ ACCORDION
   =========================================== */
body.dark-mode .faq-item {
    background: #1e3a5f;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .faq-question {
    color: #f8fafc;
    border-bottom: 1px solid #334155;
}

body.dark-mode .faq-question:hover {
    background-color: #2d4a75;
    padding-right: 1.7rem;
}

body.dark-mode .faq-question::after {
    color: #d4a574;
}

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

/* ===========================================
   TABLES
   =========================================== */
body.dark-mode .table-container {
    background: #1e3a5f;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .styled-table {
    /* Inherits */
}

body.dark-mode .styled-table th {
    background-color: #334155;
    color: #f8fafc;
}

body.dark-mode .styled-table th:hover {
    background-color: #2d4a75;
    color: #d4a574;
}

body.dark-mode .styled-table td {
    color: #cbd5e1;
    border-bottom: 1px solid #334155;
}

body.dark-mode .styled-table tbody tr {
    /* Transition handled globally */
}

body.dark-mode .styled-table tbody tr:hover {
    background-color: #2d4a75 !important;
    transform: translateX(5px);
}

/* Special row classes */
body.dark-mode tr.demand-high {
    background-color: rgba(67, 160, 71, 0.15);
}

body.dark-mode tr.demand-medium {
    background-color: rgba(255, 167, 38, 0.15);
}

body.dark-mode tr.demand-low {
    background-color: rgba(158, 158, 158, 0.15);
}

body.dark-mode tr.salary-high td:nth-child(4) {
    background-color: rgba(46, 125, 50, 0.2);
    color: #e0f0e3;
}

body.dark-mode tr.salary-medium td:nth-child(4) {
    background-color: rgba(255, 167, 38, 0.2);
    color: #fff9e6;
}

body.dark-mode tr.salary-low td:nth-child(4) {
    background-color: rgba(158, 158, 158, 0.2);
    color: #d1d1d1;
}

body.dark-mode tr[data-href] {
    cursor: pointer;
}

body.dark-mode tr[data-href]:hover {
    background-color: rgba(212, 165, 116, 0.2) !important;
}

/* ===========================================
   TEAM SECTION
   =========================================== */
body.dark-mode .team-grid {
    /* Layout only */
}

body.dark-mode .team-member {
    background: #1e3a5f;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .team-member:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

body.dark-mode .team-member:hover .team-member-role {
    color: #d4a574;
}

body.dark-mode .team-member h3 {
    color: #f8fafc;
}

body.dark-mode .team-member-role {
    color: #d4a574;
}

body.dark-mode .team-member p {
    color: #cbd5e1;
}

body.dark-mode .team-member-photo {
    background: linear-gradient(135deg, #d4a574, #c49560);
    color: white;
}

/* ===========================================
   STATISTICS/HIGHLIGHTS
   =========================================== */
body.dark-mode .stats-grid {
    /* Layout only */
}

body.dark-mode .stat-card {
    /* Gradient kept as-is; already readable */
    background: linear-gradient(135deg, #d4a574, #c49560);
    color: white;
}

body.dark-mode .stat-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   CHARTS
   =========================================== */
body.dark-mode .charts-row {
    /* Layout only */
}

body.dark-mode .chart-frame {
    background: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   GLOBAL HOVER & INTERACTION STYLES (Optional but recommended)
   =========================================== */
body.dark-mode .content-section h2:hover {
    color: #d4a574;
}

body.dark-mode .content-section li:hover {
    color: #d4a574;
}

body.dark-mode .content-section li:hover::before {
    color: #fbbf24; /* Slightly brighter for contrast */
}

/* ===========================================
   END OF SUBPAGES DARK MODE STYLES
   =========================================== */
   /* ===========================================
   DARK MODE – Majors Grid & Page Hero
   =========================================== */

body.dark-mode .majors-grid {
    /* Layout remains the same */
}

body.dark-mode .major-card {
    background: #1e3a5f;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border-right: 4px solid #d4a574;
    color: #f8fafc;
}

body.dark-mode .major-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .major-card h3 {
    color: #d4a574;
    font-weight: 600;
}

/* Page Hero – Image-based (e.g., Health-Academic.png) */
body.dark-mode .page-hero {
    /* Keep background image */
    /* Overlay already darkens it — just ensure text is readable */
}

/* The existing ::before overlay (rgba(0,0,0,0.55)) works well in dark mode */
/* But we reinforce text color for safety */
body.dark-mode .page-hero h1,
body.dark-mode .page-hero p {
    color: white; /* or #f8fafc for softer look */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}