/* ===== DARK MODE ONLY - LIGHT MODE UNCHANGED ===== */

/* ===== MOBILE HORIZONTAL SCROLL PREVENTION ===== */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    * {
        max-width: 100% !important;
    }
}

/* Dark Theme Variables */
html.dark-theme {
    /* Primary Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2d2d2d;
    --bg-hover: #383838;

    /* Text Colors - ALL TITLES WHITE */
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-tertiary: #8a8a8a;
    --text-inverse: #1a1a1a;

    /* Keep original variable names */
    --primary-black: #ffffff;
    --secondary-black: #b3b3b3;
    --light-gray: #1a1a1a;
    --medium-gray: #2d2d2d;
    --dark-gray: #b3b3b3;
    --border-gray: #3c4043;
    --white: #1a1a1a;

    /* Border & Divider Colors */
    --border-primary: #3c4043;
    --border-secondary: #2d2d2d;
    --divider: #3c4043;

    /* Interactive Elements */
    --link-color: #8ab4f8;
    --link-hover: #aecbfa;

    /* Shadows */
    --shadow-light: 0 1px 6px rgba(0, 0, 0, .6);
    --shadow-medium: 0 2px 10px rgba(0, 0, 0, .7);
    --shadow-heavy: 0 4px 16px rgba(0, 0, 0, .8);
}

/* ===== DARK MODE STYLES - SCOPED TO html.dark-theme ONLY ===== */

/* Body & Base */
html.dark-theme body {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* ALL HEADINGS WHITE */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6 {
    color: #ffffff !important;
}

/* Header */
html.dark-theme .header {
    background: rgba(26, 26, 26, 0.85);
    border-bottom-color: #3c4043;
}

/* Dark Mode Navbar Transparency States */
html.dark-theme .header.transparent-navbar {
    background: rgba(26, 26, 26, 1.0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: rgba(60, 64, 67, 1.0);
    transition: all 0.3s ease;
}

html.dark-theme .header.solid-navbar {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: #3c4043;
    transition: all 0.3s ease;
}

/* Hero Section - DARK GRAY BACKGROUND */
html.dark-theme .hero {
    background: #171616;
    color: #ffffff;
}

html.dark-theme .hero-title,
html.dark-theme .hero-subtitle,
html.dark-theme .typewriter-text,
html.dark-theme .typewriter-background {
    color: #ffffff !important;
}

/* Butterfly ASCII Art - Light Mode (Default) */
.butterfly-art,
.butterfly-body-middle,
.butterfly-wing-left,
.butterfly-wing-right {
    color: #5a6470 !important;
    transition: color 0.3s ease;
}

/* Butterfly ASCII Art - Dark Mode */
html.dark-theme .butterfly-art,
html.dark-theme .butterfly-body-middle,
html.dark-theme .butterfly-wing-left,
html.dark-theme .butterfly-wing-right {
    color: #b0b5c0 !important;
}

/* Butterfly Container Opacity Adjustments for Better Visibility */
.butterfly {
    transition: opacity 0.3s ease;
}

/* Popular Universities Section in Hero - Same background as hero */
html.dark-theme .popular-universities {
    background-color: #171616;
}

html.dark-theme .popular-universities h3 {
    color: #ffffff !important;
}

/* University Tag Buttons - WHITE TEXT (they are anchor tags) */
html.dark-theme .university-tag,
html.dark-theme a.university-tag,
html.dark-theme .university-tags a {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

html.dark-theme .university-tag:hover,
html.dark-theme a.university-tag:hover,
html.dark-theme .university-tags a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Search & Inputs - ENSURE VISIBILITY */
html.dark-theme .search-input,
html.dark-theme input[type="text"],
html.dark-theme input[type="email"],
html.dark-theme input[type="password"],
html.dark-theme input[type="search"],
html.dark-theme input[type="number"],
html.dark-theme input[type="tel"],
html.dark-theme input[type="url"],
html.dark-theme textarea,
html.dark-theme select {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #3c4043 !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dark-theme .search-input::placeholder,
html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
    color: #b3b3b3 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #b3b3b3 !important;
}

html.dark-theme .search-input:focus,
html.dark-theme input:focus,
html.dark-theme textarea:focus,
html.dark-theme select:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Specific fix for main search input in hero */
html.dark-theme #university-search,
html.dark-theme .search-input-wrapper input {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #3c4043 !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dark-theme #university-search::placeholder {
    color: #b3b3b3 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #b3b3b3 !important;
}

/* Search button - ensure visibility and proper styling in dark mode */
html.dark-theme .search-btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #ffffff !important;
}

/* Light mode search button should also have black text */
.search-btn {
    color: #1a1a1a !important;
}

html.dark-theme .search-btn:hover {
    background-color: #f1f3f4 !important;
    border-color: #1a1a1a !important;
    color: #1a1a1a !important;
}

/* Search button text should always be black in dark mode */
html.dark-theme .search-btn,
html.dark-theme button[type="submit"] {
    color: #1a1a1a !important;
}

/* University PAGE text should be black in dark mode - NOT in dropdowns! */
/* Scoped to only affect .university-container page, not search dropdowns */
html.dark-theme .university-container .university-name,
html.dark-theme .university-page .university-name,
html.dark-theme .university-container .university-bio,
html.dark-theme .university-page .university-bio {
    color: #1a1a1a !important;
}

/* Keep university-info black ONLY on university pages, not in search */
html.dark-theme .university-container .university-info,
html.dark-theme .university-page .university-info,
html.dark-theme .university-container .university-info *,
html.dark-theme .university-page .university-info * {
    color: #1a1a1a !important;
}

/* Section titles (like Admissions) should be white */
html.dark-theme .section-title,
html.dark-theme .section-title * {
    color: #ffffff !important;
}

html.dark-theme .event-card h3,
html.dark-theme .event-card p,
html.dark-theme .admission-card h3,
html.dark-theme .admission-card h4,
html.dark-theme .admission-card p,
html.dark-theme .admission-card strong {
    color: #1a1a1a !important;
}

/* Fix autofill/autocomplete background in dark mode */
html.dark-theme input:-webkit-autofill,
html.dark-theme input:-webkit-autofill:hover,
html.dark-theme input:-webkit-autofill:focus,
html.dark-theme input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px #2d2d2d inset !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 8px !important;
}

/* Fix search container appearance on load */
html.dark-theme .search-container {
    border-radius: 12px;
    background: transparent !important;
}

html.dark-theme .search-input-wrapper {
    border-radius: 12px;
    background: transparent !important;
}

html.dark-theme .search-input,
html.dark-theme #university-search {
    border-radius: 8px !important;
    background-color: #2d2d2d !important;
    opacity: 1 !important;
}

/* Fix any overlay/block on search box */
html.dark-theme .search-input::before,
html.dark-theme .search-input-wrapper::before,
html.dark-theme .search-container::before {
    display: none !important;
}

html.dark-theme .search-preview {
    background: transparent !important;
}

/* Navigation */
html.dark-theme .nav-link {
    color: #b3b3b3;
}

html.dark-theme .nav-link:hover {
    background-color: #2d2d2d;
    color: #ffffff;
}

/* Sign Up button text color in dark mode */
html.dark-theme .nav-link.register {
    color: #1f1f1f;
}

html.dark-theme .nav-link.register:hover {
    color: #1f1f1f;
}

/* Features Section */
html.dark-theme .features {
    background-color: #1a1a1a;
}

html.dark-theme .feature-card {
    background-color: #242424;
    border-color: #3c4043;
}

html.dark-theme .feature-card h3 {
    color: #ffffff !important;
}

html.dark-theme .feature-card p {
    color: #b3b3b3;
}

/* Cards - ALL TITLES WHITE */
html.dark-theme .professor-card,
html.dark-theme .university-card,
html.dark-theme .club-card,
html.dark-theme .card,
html.dark-theme .gpa-card {
    background: #242424 !important;
    border-color: #3c4043;
}

/* Dark mode - explicit .gpa-card background */
html.dark-theme #add-course-modal,
html.dark-theme .gpa-card {
    background: #242424 !important;
}

html.dark-theme .professor-card:hover,
html.dark-theme .university-card:hover,
html.dark-theme .club-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .7);
}

/* University Names/Titles - Dark (#2a2a2a) for university pages only */
html.dark-theme .university-name,
html.dark-theme .university-title {
    color: #2a2a2a !important;
}

/* Professor/Club Names/Titles - WHITE (#ffffff) */
html.dark-theme .professor-info h3,
html.dark-theme .professor-name,
html.dark-theme .professor-title,
html.dark-theme .club-name,
html.dark-theme .club-title {
    color: #ffffff !important;
}

html.dark-theme .professor-department,
html.dark-theme .professor-subtitle,
html.dark-theme .club-description,
html.dark-theme .university-description {
    color: #b3b3b3;
}

/* Dropdowns & Menus */
html.dark-theme .language-dropdown,
html.dark-theme .user-dropdown,
html.dark-theme .mobile-menu-dropdown,
html.dark-theme .search-dropdown,
html.dark-theme .nav-search-dropdown,
html.dark-theme .dropdown,
html.dark-theme .autocomplete-results,
html.dark-theme .search-preview,
html.dark-theme .more-dropdown-menu {
    background-color: #2d2d2d;
    border-color: #3c4043;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

html.dark-theme .language-option,
html.dark-theme .dropdown-item,
html.dark-theme .mobile-menu-item,
html.dark-theme .autocomplete-item,
html.dark-theme .more-dropdown-item {
    color: #ffffff;
}

html.dark-theme .language-option:hover,
html.dark-theme .dropdown-item:hover,
html.dark-theme .mobile-menu-item:hover,
html.dark-theme .autocomplete-item:hover,
html.dark-theme .more-dropdown-item:hover {
    background-color: #383838;
    color: #ffffff;
}

/* Nav Search Items - Fix dark mode text color */
html.dark-theme .nav-search-dropdown .nav-search-item,
html.dark-theme .nav-search-results .nav-search-item,
html.dark-theme .nav-search-item {
    color: #ffffff !important;
}

html.dark-theme .nav-search-dropdown .nav-search-item-name,
html.dark-theme .nav-search-results .nav-search-item-name,
html.dark-theme .nav-search-item-name {
    color: #ffffff !important;
}

html.dark-theme .nav-search-dropdown .nav-search-item-details,
html.dark-theme .nav-search-results .nav-search-item-details,
html.dark-theme .nav-search-item-details {
    color: #b3b3b3 !important;
}

html.dark-theme .nav-search-dropdown .nav-search-item-rating,
html.dark-theme .nav-search-results .nav-search-item-rating,
html.dark-theme .nav-search-item-rating {
    color: #ffffff !important;
}

html.dark-theme .nav-search-dropdown .nav-search-section-title,
html.dark-theme .nav-search-results .nav-search-section-title,
html.dark-theme .nav-search-section-title {
    color: #b3b3b3 !important;
}

html.dark-theme .nav-search-dropdown .nav-search-empty,
html.dark-theme .nav-search-results .nav-search-empty,
html.dark-theme .nav-search-empty {
    color: #b3b3b3 !important;
}

html.dark-theme .nav-search-dropdown .rating-value,
html.dark-theme .nav-search-results .rating-value,
html.dark-theme .nav-search-item .rating-value {
    color: #ffffff !important;
}

html.dark-theme .nav-search-dropdown .review-count-small,
html.dark-theme .nav-search-results .review-count-small,
html.dark-theme .nav-search-item .review-count-small {
    color: #8a8a8a !important;
}

html.dark-theme .nav-search-dropdown .nav-search-item:hover,
html.dark-theme .nav-search-results .nav-search-item:hover,
html.dark-theme .nav-search-item:hover {
    background-color: #383838;
}

/* Main Search Dropdown (university search on index.html) - Fix dark mode text */
html.dark-theme .autocomplete-item,
html.dark-theme .search-dropdown .autocomplete-item,
html.dark-theme .autocomplete-results .autocomplete-item {
    color: #ffffff !important;
}

html.dark-theme .autocomplete-item .university-name,
html.dark-theme .search-dropdown .university-name,
html.dark-theme .autocomplete-results .university-name,
html.dark-theme .university-name {
    color: #ffffff !important;
}

html.dark-theme .autocomplete-item .university-info,
html.dark-theme .search-dropdown .university-info,
html.dark-theme .autocomplete-results .university-info,
html.dark-theme .university-info {
    color: #b3b3b3 !important;
}

html.dark-theme .autocomplete-item strong,
html.dark-theme .autocomplete-item-main strong {
    color: #ffffff !important;
}

html.dark-theme .autocomplete-item-meta,
html.dark-theme .autocomplete-item .autocomplete-item-meta {
    color: #b3b3b3 !important;
}

html.dark-theme .autocomplete-section-title {
    color: #b3b3b3 !important;
}

html.dark-theme .autocomplete-item:hover,
html.dark-theme .search-dropdown .autocomplete-item:hover,
html.dark-theme .autocomplete-results .autocomplete-item:hover {
    background-color: #383838;
}

/* Search button - ensure it's visible in dark mode */
html.dark-theme .search-btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #ffffff !important;
}

html.dark-theme .search-btn:hover {
    background-color: #f1f3f4 !important;
    border-color: #1a1a1a !important;
    color: #1a1a1a !important;
}

/* Footer */
html.dark-theme .footer {
    background-color: #0f0f0f;
    color: #b3b3b3;
}

html.dark-theme .footer-links a {
    color: #b3b3b3;
}

html.dark-theme .footer-links a:hover {
    color: #ffffff;
}

/* Modals - TITLES WHITE */
html.dark-theme .modal-content {
    background-color: #242424;
    color: #ffffff;
    border-color: #3c4043;
}

html.dark-theme .modal {
    background-color: rgba(0, 0, 0, 0.9);
}

html.dark-theme .modal-header h2,
html.dark-theme .modal-header h3,
html.dark-theme .modal-title,
html.dark-theme .modal-title-text {
    color: #ffffff !important;
}

/* Modal form elements in dark mode */
html.dark-theme .modal-content label {
    color: #ffffff;
}

html.dark-theme .modal-content .form-group label {
    color: #ffffff;
}

html.dark-theme .modal-content h4 {
    color: #ffffff;
}

html.dark-theme .modal-body p,
html.dark-theme .modal-body small {
    color: #e0e0e0;
}

html.dark-theme .modal-body input[type="text"],
html.dark-theme .modal-body input[type="email"],
html.dark-theme .modal-body input[type="password"],
html.dark-theme .modal-body input[type="url"],
html.dark-theme .modal-body input[type="number"],
html.dark-theme .modal-body input[type="tel"],
html.dark-theme .modal-body input[type="file"],
html.dark-theme .modal-body textarea,
html.dark-theme .modal-body select {
    background-color: #3c4043 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

html.dark-theme .modal-body input::placeholder,
html.dark-theme .modal-body textarea::placeholder {
    color: #999999;
}

/* Dark mode - Tab hover effects */
html.dark-theme .tab-btn:hover {
    color: #1f1f1f !important;
    background: #ffffff !important;
}

/* Tags */
html.dark-theme .tag,
html.dark-theme .university-tag {
    background-color: #3c4043;
    color: #b3b3b3;
}

/* Professor page tags - #1a1a1a background */
html.dark-theme .professor-page .tag,
html.dark-theme .professor-tags .tag,
html.dark-theme .tag-list .tag,
html.dark-theme .top-tags .tag {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Top tag (in professor cards) - #2d2d2d background */
html.dark-theme .top-tag,
html.dark-theme .professor-card .top-tag {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* COLORED TAG OVERRIDES FOR DARK MODE - Restore Sentiment Colors */
/* Positive Tags - Green */
html.dark-theme .tag.positive,
html.dark-theme .tag.tag-positive,
html.dark-theme .professor-tag.positive,
html.dark-theme .professor-tag.tag-positive,
html.dark-theme .review-tag.positive,
html.dark-theme .top-tag.positive,
html.dark-theme .distribution-tag.tag-positive {
    background-color: #1a1a1a !important;
    color: #81c784 !important;
    border-color: #4caf50 !important;
}

/* Neutral Tags - Orange */
html.dark-theme .tag.neutral,
html.dark-theme .tag.tag-neutral,
html.dark-theme .professor-tag.neutral,
html.dark-theme .professor-tag.tag-neutral,
html.dark-theme .review-tag.neutral,
html.dark-theme .top-tag.neutral,
html.dark-theme .distribution-tag.tag-neutral {
    background-color: #1a1a1a !important;
    color: #ffb74d !important;
    border-color: #ff9800 !important;
}

/* Negative Tags - Red */
html.dark-theme .tag.negative,
html.dark-theme .tag.tag-negative,
html.dark-theme .professor-tag.negative,
html.dark-theme .professor-tag.tag-negative,
html.dark-theme .review-tag.negative,
html.dark-theme .top-tag.negative,
html.dark-theme .distribution-tag.tag-negative {
    background-color: #1a1a1a !important;
    color: #e57373 !important;
    border-color: #f44336 !important;
}

/* Links */
html.dark-theme a:not(.nav-link):not(.mobile-menu-item):not(.dropdown-item):not(.more-dropdown-item) {
    color: #8ab4f8;
}

html.dark-theme a:not(.nav-link):not(.mobile-menu-item):not(.dropdown-item):not(.more-dropdown-item):hover {
    color: #aecbfa;
}

/* Sections */
html.dark-theme section,
html.dark-theme .professor-list,
html.dark-theme .top-professors {
    background-color: #1a1a1a;
}

/* Section Titles - WHITE */
html.dark-theme .section-title,
html.dark-theme #professors-section-title,
html.dark-theme .top-professors h2,
html.dark-theme .top-professors-title {
    color: #ffffff !important;
}

html.dark-theme .section-subtitle,
html.dark-theme .top-professors-subtitle {
    color: #b3b3b3;
}

/* Tables */
html.dark-theme table {
    background-color: #242424;
    color: #ffffff;
    border-color: #3c4043;
}

html.dark-theme th {
    background-color: #2d2d2d;
    color: #ffffff;
    border-color: #3c4043;
}

html.dark-theme td {
    border-color: #3c4043;
    color: #ffffff;
}

/* Borders & Dividers */
html.dark-theme hr {
    border-color: #3c4043;
}

/* Review Count and Meta Info */
html.dark-theme .review-count,
html.dark-theme .meta-info {
    color: #8a8a8a;
}

/* Buttons - Smart text colors based on background */
/* Rate button - WHITE text on dark bg, BLACK text on hover (white bg) */
.rate-button {
    color: #ffffff !important;
}

.rate-button:hover {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Partners buttons - Different per button */
/* We'll target them individually in dark mode below */

/* Dark mode - keep white text for all buttons except search button and special buttons */
html.dark-theme .btn-primary,
html.dark-theme button:not(.theme-toggle-btn):not(.language-btn):not(.language-option):not(.rate-button):not(.partners-button):not(.view-all-btn):not(.search-btn):not([type="submit"]):not(.btn-stuconnect):not(.btn-like):not(.btn-dislike):not(.vote-btn):not(.reply-vote-btn):not(.reply-to-comment-btn) {
    color: #ffffff !important;
}

/* View All Professors button - #1a1a1a text */
html.dark-theme .view-all-btn,
html.dark-theme .view-all-professors {
    color: #1a1a1a !important;
    border-color: #ffffff !important;
}

/* Rate button (Dəyərləndir) in dark mode - WHITE bg/#1a1a1a text, flip on hover */
html.dark-theme .rate-button,
html.dark-theme a[href="/review-form"].rate-button {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #ffffff !important;
}

html.dark-theme .rate-button:hover,
html.dark-theme a[href="/review-form"].rate-button:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #1a1a1a !important;
}

/* Partners buttons in dark mode - SPECIFIC STYLING */
/* My Calendar & Uni Clubs: #1a1a1a bg/white text, white bg/#1a1a1a text on hover */
html.dark-theme a[href="/my-calendar"].partners-button,
html.dark-theme a[href="/clubs"].partners-button {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

html.dark-theme a[href="/my-calendar"].partners-button:hover,
html.dark-theme a[href="/clubs"].partners-button:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #ffffff !important;
}

/* GPA Calculator: white bg/#1a1a1a text, flip on hover */
html.dark-theme a[href="/gpa-calculator"].partners-button {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #ffffff !important;
}

html.dark-theme a[href="/gpa-calculator"].partners-button:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #1a1a1a !important;
}

/* Syllabus: #1a1a1a bg/white text, white bg/#1a1a1a text on hover */
/* Syllabus: #1a1a1a bg/white text, white bg/#1a1a1a text on hover */
html.dark-theme a[href="/syllabus"].partners-button {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* CRN Lookup & Finals Schedule: #1a1a1a bg/white text, white bg/#1a1a1a text on hover */
html.dark-theme a[href="/crn-lookup"].partners-button,
html.dark-theme a[href="/midterms"].partners-button,
html.dark-theme a[href="/crn-changes"].partners-button,
html.dark-theme a[href="/samples"].partners-button {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

html.dark-theme a[href="/crn-lookup"].partners-button:hover,
html.dark-theme a[href="/midterms"].partners-button:hover,
html.dark-theme a[href="/crn-changes"].partners-button:hover,
html.dark-theme a[href="/samples"].partners-button:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #ffffff !important;
}

html.dark-theme a[href="/syllabus"].partners-button:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #ffffff !important;
}

/* Lost & Found: white text in dark mode */
html.dark-theme a[href="/lost-found"].partners-button {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

html.dark-theme a[href="/lost-found"].partners-button:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #ffffff !important;
}

/* News: white text in dark mode */
html.dark-theme a[href="/news"].partners-button {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

html.dark-theme a[href="/news"].partners-button:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #ffffff !important;
}

/* Border Pulse Effect - Dark Mode */
html.dark-theme .rate-button::after,
html.dark-theme .partners-button::after {
    border-color: #ffffff !important;
}

/* Review Form Tags - Dark Mode */
html.dark-theme .tag-btn {
    background-color: #2d2d2d !important;
    border-color: #5f6368 !important;
    color: #ffffff !important;
}

html.dark-theme .tag-btn:hover {
    background-color: #35363a !important;
    border-color: #8ab4f8 !important;
    color: #ffffff !important;
}

html.dark-theme .tag-btn.selected {
    background-color: #8ab4f8 !important;
    border-color: #aecbfa !important;
    color: #101418 !important;
    font-weight: 600;
}

html.dark-theme .tags-container {
    border-color: #3c4043 !important;
}

/* StuConnect button - dark text */
html.dark-theme .btn-stuconnect {
    color: #1a1a1a !important;
}

/* Vote and reply buttons - dark text */
html.dark-theme .vote-btn,
html.dark-theme .btn-like,
html.dark-theme .btn-dislike,
html.dark-theme .reply-vote-btn,
html.dark-theme .reply-to-comment-btn {
    color: #1a1a1a !important;
}

/* Mobile Sign In Button - #1f1f1f text */
html.dark-theme .mobile-signin-btn {
    color: #1f1f1f !important;
}

/* User Menu & Profile */
html.dark-theme .user-button,
html.dark-theme .user-name {
    color: #ffffff;
}

/* Mobile Menu Hamburger */
html.dark-theme .mobile-menu-btn span {
    background-color: #ffffff;
}

/* Mobile Profile Menu Dark Mode */
html.dark-theme .mobile-menu-icon {
    color: #ffffff;
}

html.dark-theme .mobile-user-avatar {
    border-color: #3c4043;
}

html.dark-theme .mobile-profile-dropdown {
    background: rgba(45, 45, 45, 0.95);
    border-color: rgba(60, 64, 67, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html.dark-theme .mobile-dropdown-item {
    color: #ffffff !important;
    border-bottom-color: rgba(60, 64, 67, 0.3);
}

html.dark-theme .mobile-dropdown-item:hover {
    background-color: rgba(56, 56, 56, 0.8);
}

html.dark-theme .mobile-dropdown-item.mobile-logout {
    color: #e57373;
}

html.dark-theme .mobile-dropdown-item.mobile-logout:hover {
    background-color: rgba(220, 53, 69, 0.2);
}

/* Mobile Sign In Button Dark Mode */
html.dark-theme .mobile-signin-btn {
    background: #ffffff;
    color: #1a1a1a;
}

html.dark-theme .mobile-signin-btn:hover {
    background: #f1f3f4;
}

/* Guest menu login/signup dark mode */
html.dark-theme .mobile-dropdown-item.mobile-login {
    color: #ffffff !important;
}

html.dark-theme .mobile-dropdown-item.mobile-signup {
    background-color: #ffffff;
    color: #1a1a1a;
}

html.dark-theme .mobile-dropdown-item.mobile-signup:hover {
    background-color: #f1f3f4;
}



/* Language Buttons */
html.dark-theme .language-btn,
html.dark-theme .language-btn-mobile {
    color: #ffffff;
}

/* Images - slight dim */
html.dark-theme img:not(.logo-image):not([src*=".svg"]):not(.telegram-icon) {
    opacity: 0.9;
}

/* Telegram Icon - White version in dark mode */
html.dark-theme .telegram-icon {
    content: url('/icons/whitetele.jpg');
    filter: none;
}

html.dark-theme .telegram-btn img {
    content: url('/icons/whitetele.jpg');
}

/* Logo/Home Button - Black version for dark mode */
html.dark-theme .logo-image {
    content: url('/icons/rateblack.png');
    filter: none;
}

/* Professor Pages - Fix ALL backgrounds */
html.dark-theme .professor-profile,
html.dark-theme .professor-details,
html.dark-theme .professor-page,
html.dark-theme main {
    background-color: #1a1a1a !important;
}

html.dark-theme .professor-header,
html.dark-theme .professor-stats {
    background-color: #2a2a2a !important;
}

/* Top Rated Professors Cards - Dark background #1a1a1a */
html.dark-theme .top-professors-grid .top-professor-card:not(.recent-review-card) .professor-header,
html.dark-theme .top-professors-grid .top-professor-card:not(.recent-review-card) .professor-stats {
    background-color: #1a1a1a !important;
}

/* Recently Reviewed Professors Cards - Lighter background #2a2a2a */
html.dark-theme .top-professors-grid .recent-review-card .professor-header,
html.dark-theme .top-professors-grid .recent-review-card .professor-stats {
    background-color: #2a2a2a !important;
}

/* Comment/Review Cards - CHANGED TO #1a1a1a */
html.dark-theme .review-card,
html.dark-theme .comment-card,
html.dark-theme .review-item,
html.dark-theme .reviews-section,
html.dark-theme .student-ratings {
    background-color: #1a1a1a !important;
    border-color: #3c4043 !important;
}

html.dark-theme .rating-card {
    background-color: #2a2a2a !important;
    border-color: #3c4043 !important;
}

/* Tags Container - for professor page */
html.dark-theme .tags-container,
html.dark-theme .professor-tags-section,
html.dark-theme .tag-list {
    background-color: #1a1a1a !important;
}

/* Professor card tags container - should match card background */
html.dark-theme .professor-card .professor-tags,
html.dark-theme .professor-card .top-tags,
html.dark-theme .card .professor-tags {
    background-color: #1a1a1a !important;
}

/* View All Professors cards - professor tags and top tags #242424 */
html.dark-theme .professors-grid .professor-card .professor-tags,
html.dark-theme .professors-grid .professor-card .top-tags,
html.dark-theme .professors-grid .card .professor-tags {
    background-color: #242424 !important;
}

/* Rating Containers */
html.dark-theme .rating-container,
html.dark-theme .rating-section,
html.dark-theme .rating-distribution,
html.dark-theme .stats-container,
html.dark-theme .professor-rating,
html.dark-theme .professor-rating-section,
html.dark-theme .main-rating {
    background-color: #2a2a2a !important;
}

/* Recently Reviewed Professors - rating-display #2a2a2a */
html.dark-theme .rating-display {
    background-color: #2a2a2a !important;
}

/* Top Rated Professors - rating-display #1a1a1a */
html.dark-theme .top-professors .rating-display,
html.dark-theme .top-rated-section .rating-display {
    background-color: #1a1a1a !important;
}

/* View All Professors cards - rating-display #242424 */
html.dark-theme .professors-grid .rating-display {
    background-color: #242424 !important;
}

/* All white/light backgrounds on professor pages */
html.dark-theme .container-white,
html.dark-theme .content-box,
html.dark-theme .info-box,
html.dark-theme .professor-info-section,
html.dark-theme .professor-main {
    background-color: #1a1a1a !important;
}

/* Override any white backgrounds */
html.dark-theme [style*="background: white"],
html.dark-theme [style*="background-color: white"],
html.dark-theme [style*="background: #fff"],
html.dark-theme [style*="background-color: #fff"],
html.dark-theme [style*="background: #ffffff"],
html.dark-theme [style*="background-color: #ffffff"] {
    background-color: #1a1a1a !important;
}

/* Ensure all page backgrounds are dark */
html.dark-theme #root,
html.dark-theme .page-container,
html.dark-theme .content-wrapper {
    background-color: #1a1a1a !important;
}

/* ===== MY CALENDAR & UNI CLUBS PAGE DARK MODE ===== */
html.dark-theme .calendar-main,
html.dark-theme .clubs-main,
html.dark-theme .clubs-container,
html.dark-theme .clubs-page,
html.dark-theme body.clubs-page {
    background: #1a1a1a !important;
}

/* Clubs page specific elements */
html.dark-theme .clubs-header {
    background: #1a1a1a !important;
}

html.dark-theme .clubs-title {
    color: #ffffff !important;
}

html.dark-theme .clubs-subtitle {
    color: #b3b3b3 !important;
}

html.dark-theme .clubs-grid {
    background: #1a1a1a !important;
}

html.dark-theme .club-card {
    background: #1a1a1a !important;
    border-color: #3c4043 !important;
}

html.dark-theme .calendar-header h1,
html.dark-theme .calendar-header h2,
html.dark-theme .calendar-title {
    color: #ffffff !important;
}

html.dark-theme .calendar-header p {
    color: #b3b3b3 !important;
}

/* GPA Calculator Page */
html.dark-theme .gpa-header h1,
html.dark-theme .gpa-title,
html.dark-theme .calculator-title {
    color: #ffffff !important;
}

html.dark-theme .calendar-container {
    background: #1a1a1a !important;
    border-color: #3c4043 !important;
}

html.dark-theme .calendar-zoom-controls {
    background: #2d2d2d !important;
    border-color: #3c4043 !important;
}

html.dark-theme .btn-icon {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #3c4043 !important;
}

html.dark-theme .btn-icon:hover {
    background: #1a73e8 !important;
    color: #ffffff !important;
}

html.dark-theme .zoom-level {
    color: #b3b3b3 !important;
}

html.dark-theme .calendar-grid,
html.dark-theme .calendar-table {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

html.dark-theme .calendar-day,
html.dark-theme .calendar-cell {
    background: #2d2d2d !important;
    border-color: #3c4043 !important;
    color: #ffffff !important;
}

html.dark-theme .calendar-day:hover {
    background: #383838 !important;
}

html.dark-theme .event-item,
html.dark-theme .course-item {
    background: #2d2d2d !important;
    border-color: #3c4043 !important;
}

/* ===== PROFILE PAGE DARK MODE ===== */
html.dark-theme .profile-container {
    background: #1a1a1a !important;
}

html.dark-theme .profile-header {
    background: #1a1a1a !important;
}

html.dark-theme .avatar-large {
    border-color: #3c4043 !important;
    background: #2d2d2d !important;
}

html.dark-theme .profile-name {
    color: #ffffff !important;
}

html.dark-theme .profile-handle,
html.dark-theme .profile-meta,
html.dark-theme .meta-item {
    color: #b3b3b3 !important;
}

html.dark-theme .profile-bio {
    color: #b3b3b3 !important;
}

html.dark-theme .profile-stats {
    background: #1a1a1a !important;
}

html.dark-theme .stat-item {
    color: #ffffff !important;
}

html.dark-theme .stat-value {
    color: #ffffff !important;
}

html.dark-theme .stat-label {
    color: #b3b3b3 !important;
}

html.dark-theme .profile-tabs,
html.dark-theme .tabs-container {
    background: #1a1a1a !important;
    border-color: #3c4043 !important;
}

html.dark-theme .tab-button {
    color: #1a1a1a !important;
}

html.dark-theme .tab-button.active {
    color: #1a1a1a !important;
    border-bottom-color: #1a1a1a !important;
}

html.dark-theme .profile-content,
html.dark-theme .tab-content {
    background: #1a1a1a !important;
}

html.dark-theme .activity-item,
html.dark-theme .review-item-profile {
    background: #2d2d2d !important;
    border-color: #3c4043 !important;
}

/* Settings Button Icon - Proper sizing and rotation */
.settings-gear-icon {
    width: 24px !important;
    height: 24px !important;
    transition: transform 0.6s ease;
    display: block;
    margin-left: 5px;
}

.btn-settings-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-settings-icon:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

html.dark-theme .btn-settings-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-settings-icon:hover .settings-gear-icon {
    transform: rotate(360deg);
}

/* Switch icon based on theme */
html.dark-theme .settings-gear-icon {
    content: url('/icons/darkmodesettings.png');
}

html:not(.dark-theme) .settings-gear-icon {
    content: url('/icons/settingsiconlightmode.png');
}

/* ===== Z-INDEX FIXES FOR BOTH MODES ===== */

/* Header/Navbar should be above search elements */
.header,
header,
nav {
    z-index: 10000 !important;
}

/* User/Profile dropdown should be at the top of hierarchy */
.user-dropdown,
.user-menu-dropdown,
.user-menu {
    z-index: 999999 !important;
}

/* Search dropdown should be above university tags but below navbar */
.search-dropdown,
.autocomplete-results,
.nav-search-dropdown {
    z-index: 1000 !important;
}

.search-input-wrapper {
    z-index: 999 !important;
}

.search-container {
    z-index: 999 !important;
}

/* Search button should be below search dropdown on mobile */
.search-btn {
    z-index: 1 !important;
}

/* Make sure university tags and popular universities have lower z-index */
.popular-universities {
    position: relative;
    z-index: 1;
}

.university-tags {
    position: relative;
    z-index: 1;
}

.university-tag {
    position: relative;
    z-index: 1;
}

/* Make sure dropdowns have proper background and visibility */
.search-dropdown {
    background: white !important;
    border: 1px solid #dadce0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(32, 33, 36, 0.2) !important;
    pointer-events: auto !important;
}

html.dark-theme .search-dropdown {
    background: #2d2d2d !important;
    border-color: #3c4043 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
}

.autocomplete-results {
    pointer-events: auto !important;
}

/* Ensure autocomplete items are visible */
.autocomplete-item {
    background: transparent;
    color: #202124;
}

html.dark-theme .autocomplete-item {
    color: #ffffff;
}

.autocomplete-item:hover {
    background: #f1f3f4 !important;
}

html.dark-theme .autocomplete-item:hover {
    background: #383838 !important;
}

.autocomplete-section-title {
    color: #5f6368;
}

html.dark-theme .autocomplete-section-title {
    color: #9aa0a6;
}

/* ===== DARK MODE DROPDOWN ENHANCEMENTS ===== */

/* User Dropdown - Enable hover in dark mode (same as light mode) */
html.dark-theme .user-menu:hover .user-dropdown,
html.dark-theme .user-menu.hover-active .user-dropdown,
html.dark-theme .user-menu.pinned .user-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

/* More Dropdown - Enable hover animation in dark mode (same as light mode) */
html.dark-theme .more-dropdown-container:hover .more-dropdown-menu,
html.dark-theme .more-dropdown-container.hover-active .more-dropdown-menu,
html.dark-theme .more-dropdown-container.pinned .more-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* More Dropdown Items - WHITE text (Syllabus, CRN Changes, etc.) in dark mode, not blue */
html.dark-theme .more-dropdown-menu .more-dropdown-item,
html.dark-theme a.more-dropdown-item,
html.dark-theme .more-dropdown-item {
    color: #ffffff !important;
}

html.dark-theme .more-dropdown-item:hover {
    background-color: #383838;
    color: #ffffff !important;
}

/* Language Dropdown - Ensure proper hover effects in dark mode */
html.dark-theme .language-dropdown {
    background-color: #2d2d2d;
    border-color: #3c4043;
}

html.dark-theme .language-option {
    color: #ffffff !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

html.dark-theme .language-option:hover {
    background-color: #383838;
    color: #ffffff;
}

html.dark-theme .language-option.active {
    background-color: #3c4043;
    color: #ffffff;
    font-weight: 600;
}

/* ===== THEME TOGGLE BUTTON STYLES ===== */

/* Desktop Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid #dadce0;
    border-radius: 20px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    color: #202124;
    font-size: 14px;
    margin-left: 8px;
}

html.dark-theme .theme-toggle-btn {
    border-color: #3c4043;
    color: #ffffff;
}

.theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

html.dark-theme .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-toggle-btn .theme-icon {
    font-size: 18px;
    line-height: 1;
}

/* Theme icon images */
.theme-icon-img {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform 0.2s ease;
}

.theme-toggle-btn:hover .theme-icon-img {
    transform: scale(1.1);
}

/* Switch icon based on theme - Light mode shows dark mode icon, dark mode shows light mode icon */
html:not(.dark-theme) .theme-icon-img {
    content: url('/new4dark.png');
}

html.dark-theme .theme-icon-img {
    content: url('/lightmode4new.png');
}


/* Mobile Theme Toggle */
.mobile-theme-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1a1a1a;
}

/* Hide on desktop */
@media (min-width: 1025px) {
    .mobile-theme-toggle {
        display: none !important;
    }
}

html.dark-theme .mobile-theme-toggle {
    transition: background-color 0.2s ease;
    border-top: 1px solid #e8eaed;
    border-bottom: 1px solid #e8eaed;
    color: #ffffff;
    border-top-color: #3c4043;
    border-bottom-color: #3c4043;
}

.mobile-theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

html.dark-theme .mobile-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-theme-toggle .theme-icon {
    font-size: 20px;
    line-height: 1;
}

.mobile-theme-toggle .theme-label {
    flex: 1;
    text-align: left;
}

/* ===== PROFESSOR PAGE SPECIFIC FIXES ===== */

/* StuConnect button - text should be #1a1a1a */
html.dark-theme .btn-stuconnect {
    color: #1a1a1a !important;
}

/* Main rating stats container - background #1a1a1a */
html.dark-theme .professor-stats .stat-item {
    background-color: #1a1a1a !important;
}

/* Rating score container with "/ 5" */
html.dark-theme .rating-max,
html.dark-theme .rating-score {
    color: #ffffff !important;
}

/* "Overall Quality" and "Based on ratings" text - white/light white */
html.dark-theme .rating-label,
html.dark-theme .rating-count,
html.dark-theme .rating-details p {
    color: #e0e0e0 !important;
}

/* Similar professors container - light black #171616 */
html.dark-theme .similar-professors {
    background-color: #171616 !important;
}

html.dark-theme .similar-professors h3 {
    color: #ffffff !important;
}

/* Rating Distribution - count numbers should be white */
html.dark-theme .rating-distribution .count,
html.dark-theme .distribution-chart .count {
    color: #ffffff !important;
}

html.dark-theme .rating-distribution h3 {
    color: #ffffff !important;
}

/* Review metadata (course, semester, grade, etc) - white/light white */
html.dark-theme .review-metadata,
html.dark-theme .review-course,
html.dark-theme .review-date,
html.dark-theme .review-grade,
html.dark-theme .review-semester,
html.dark-theme .review-info p,
html.dark-theme .review-info span {
    color: #e0e0e0 !important;
}

/* Like/Dislike and Reply button text - black */
html.dark-theme .review-actions button,
html.dark-theme .btn-like,
html.dark-theme .btn-dislike,
html.dark-theme .btn-reply,
html.dark-theme .reply-btn {
    color: #1a1a1a !important;
}

html.dark-theme .review-actions button:hover,
html.dark-theme .btn-like:hover,
html.dark-theme .btn-dislike:hover,
html.dark-theme .btn-reply:hover,
html.dark-theme .reply-btn:hover {
    color: #1a1a1a !important;
}

/* Reply vote buttons - like/dislike count should be black (#1a1a1a) */
html.dark-theme .reply-vote-btn,
html.dark-theme .reply-vote-helpful,
html.dark-theme .reply-vote-not-helpful {
    color: #1a1a1a !important;
}

html.dark-theme .reply-vote-btn:hover,
html.dark-theme .reply-vote-helpful:hover,
html.dark-theme .reply-vote-not-helpful:hover {
    color: #1a1a1a !important;
}

/* "Cavab ver" (Reply) button - only the text span should be black, emoji stays normal */
html.dark-theme .reply-btn span[data-translate="reply"],
html.dark-theme .reply-to-comment-btn span[data-translate="reply"] {
    color: #1a1a1a !important;
}

html.dark-theme .reply-btn:hover span[data-translate="reply"],
html.dark-theme .reply-to-comment-btn:hover span[data-translate="reply"] {
    color: #1a1a1a !important;
}

/* "(anon)" indicator should match the reply button text color in dark mode */
html.dark-theme .reply-anon-indicator {
    color: #1a1a1a !important;
}

/* "Is this you?" text - white in dark mode */
html.dark-theme .professor-claim-text,
html.dark-theme .professor-claim-text a {
    color: #ffffff !important;
}

html.dark-theme .professor-claim-text a:hover {
    color: #e0e0e0 !important;
}

/* ===== MY CHATS PAGE DARK MODE ===== */

/* Professor name cards - black text */
html.dark-theme .chat-card h3,
html.dark-theme .chat-card .professor-name,
html.dark-theme .chat-item h3,
html.dark-theme .chat-item .professor-name,
html.dark-theme .conversation-card h3,
html.dark-theme .conversation-card .professor-name {
    color: #1a1a1a !important;
}

/* ===== REVIEW FORM PAGE DARK MODE ===== */

/* Form section titles and labels */
html.dark-theme .form-section h3,
html.dark-theme h3[data-translate="professor-selection-title"],
html.dark-theme .form-group label,
html.dark-theme .checkbox-label,
html.dark-theme .form-description,
html.dark-theme label[for="review-text"],
html.dark-theme .review-section label {
    color: #ffffff !important;
}

/* "Rate your professor" title - white */
html.dark-theme .rating-card h3,
html.dark-theme h3 span[data-translate="rate-professor-title"] {
    color: #ffffff !important;
}

/* Rating button numbers (1, 2, 3, 4, 5) - black text */
html.dark-theme .scale-btn {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
    border-color: #5f6368 !important;
}

html.dark-theme .scale-btn.active {
    color: #101418 !important;
    background-color: #8ab4f8 !important;
    border-color: #aecbfa !important;
}

/* Difficulty and Would Take Again labels - white */
html.dark-theme label[data-translate="difficulty-label"],
html.dark-theme label[data-translate="would-take-again-label"],
html.dark-theme .rating-item label {
    color: #ffffff !important;
}

/* Yes/No button text - black */
html.dark-theme .yes-no-buttons button,
html.dark-theme .binary-choice button,
html.dark-theme button[data-value="yes"],
html.dark-theme button[data-value="no"] {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
    border-color: #5f6368 !important;
}

html.dark-theme .yn-btn.active {
    color: #ffffff !important;
}

/* Tag container background - #1a1a1a */
html.dark-theme .tags-section,
html.dark-theme .tag-grid {
    background-color: #1a1a1a !important;
}

/* Review form tag panel */
html.dark-theme .review-form .tags-container {
    background-color: #1f1f1f !important;
    border: 1px solid #3c4043 !important;
    border-radius: 12px;
    padding: 12px;
}

/* Tag buttons - #232323 dark background with WHITE text */
html.dark-theme .tag-item,
html.dark-theme .tag-option,
html.dark-theme .tag-checkbox,
html.dark-theme .tag-bubble {
    background-color: #232323 !important;
    color: #ffffff !important;
}

/* Tag labels and titles - black text */
html.dark-theme .tags-section h3,
html.dark-theme .tags-section>label,
html.dark-theme .tag-section-title {
    color: #ffffff !important;
}

/* Tag option labels/text inside buttons - black #1a1a1a */
html.dark-theme .tag-checkbox-label,
html.dark-theme .tag-option span,
html.dark-theme .tag-text,
html.dark-theme .tag-item span,
html.dark-theme .tag-option label {
    color: #ffffff !important;
}

/* Usage Rules and Responsibility - black */
html.dark-theme .usage-rules,
html.dark-theme .responsibility-text,
html.dark-theme .terms-text,
html.dark-theme .form-disclaimer,
html.dark-theme .rules-text {
    color: #1a1a1a !important;
}

/* Cancel button text - black */
html.dark-theme .btn-cancel,
html.dark-theme button[data-action="cancel"] {
    color: #1a1a1a !important;
}

/* Smooth transitions for dark theme only */
html.dark-theme * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* No transitions for these elements */
html.dark-theme .logo-image,
html.dark-theme img,
html.dark-theme svg,
html.dark-theme .animation,
html.dark-theme .typewriter-text {
    transition: none !important;
}

/* Search input placeholder text in dark mode */
html.dark-theme .nav-search-input::placeholder,
html.dark-theme input[type="text"]::placeholder,
html.dark-theme input[type="search"]::placeholder {
    color: #1a1a1a !important;
}

/* Search button text black on mobile in dark mode */
@media (max-width: 768px) {

    html.dark-theme .search-btn,
    html.dark-theme button[type="submit"] {
        color: #1a1a1a !important;
    }
}

/* ===== SYLLABUS PAGE DARK MODE ===== */

/* Search and filter section - BLACK background */
html.dark-theme .container>div[style*="background: white"] {
    background: #1a1a1a !important;
}

/* Search and filter labels - WHITE TEXT */
html.dark-theme label[style*="color: #202124"] {
    color: #ffffff !important;
}

/* Semester filter buttons - WHITE TEXT */
html.dark-theme .filter-btn {
    color: #ffffff !important;
    background: #2d2d2d !important;
}

html.dark-theme .filter-btn.active {
    color: #ffffff !important;
}

/* Clear All Filters button - WHITE TEXT */
html.dark-theme #clear-filters {
    color: #ffffff !important;
    background: #2d2d2d !important;
}

/* Syllabus cards - WHITE background in dark mode */
html.dark-theme .syllabus-card {
    background: white !important;
}

html.dark-theme .syllabus-card h3 {
    color: #202124 !important;
}

html.dark-theme .syllabus-card p {
    color: #5f6368 !important;
}

html.dark-theme .syllabus-card button {
    color: #1a1a1a !important;
}

/* Subtitle text lighter gray in dark mode */
html.dark-theme p[style*="color: #5f6368"] {
    color: #b3b3b3 !important;
}

/* Upload Modal - BLACK background with WHITE text */
html.dark-theme #upload-modal .modal-content {
    background-color: #1a1a1a !important;
}

html.dark-theme #upload-modal .modal-header {
    background: #1a1a1a !important;
    border-bottom-color: #3c4043 !important;
}

html.dark-theme #upload-modal .modal-header h2 {
    color: #ffffff !important;
}

html.dark-theme #upload-modal .modal-body {
    background-color: #1a1a1a !important;
}

html.dark-theme #upload-modal .modal-body p {
    color: #b3b3b3 !important;
}

html.dark-theme #upload-modal label {
    color: #ffffff !important;
}

html.dark-theme #upload-modal input,
html.dark-theme #upload-modal select {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #3c4043 !important;
}

html.dark-theme #upload-modal input::placeholder {
    color: #8a8a8a !important;
}

html.dark-theme #upload-modal button[type="submit"] {
    background: #1a73e8 !important;
    color: #ffffff !important;
}

html.dark-theme .modal-header span {
    color: #aaa !important;
}

html.dark-theme .modal-header span:hover {
    color: #ffffff !important;
}

/* Suggestion dropdowns in upload modal */
html.dark-theme #professor-suggestions,
html.dark-theme #course-suggestions {
    background: #2d2d2d !important;
    border-color: #3c4043 !important;
}

html.dark-theme #professor-suggestions .suggestion-item,
html.dark-theme #course-suggestions .suggestion-item {
    border-bottom-color: #3c4043 !important;
    color: #ffffff !important;
}

/* ===== SYLLABUS VIEW PAGE DARK MODE ===== */

/* Main content containers - BLACK background */
html.dark-theme #content>div[style*="background: white"] {
    background: #1a1a1a !important;
}

/* Course title - WHITE */
html.dark-theme #course-name {
    color: #ffffff !important;
}

/* Professor info section */
html.dark-theme #content div[style*="background: #f8f9fa"] {
    background: #2d2d2d !important;
}

/* Labels (Professor, Semester Term, CRN) - LIGHT GRAY */
html.dark-theme #content p[style*="color: #5f6368"] {
    color: #b3b3b3 !important;
}

/* Values (professor name, semester, crn) - WHITE */
html.dark-theme #professor-name,
html.dark-theme #semester,
html.dark-theme #crn {
    color: #ffffff !important;
}

/* Section titles - WHITE */
html.dark-theme #content h2 {
    color: #ffffff !important;
}

/* Grading breakdown cards */
html.dark-theme #grading-content h3 {
    color: #ffffff !important;
}

/* Text content area */
html.dark-theme #text-content {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #3c4043 !important;
}

/* Back link */
html.dark-theme a[href="/syllabus"] {
    color: #8ab4f8 !important;
}

/* Loading and error messages */
html.dark-theme #loading p,
html.dark-theme #error p {
    color: #b3b3b3 !important;
}

/* Theme Toggle Button Colors */
/* Dark mode: WHITE button */
html.dark-theme .dropdown-theme-toggle,
html.dark-theme .mobile-theme-toggle {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Syllabus Upload Modal Dark Mode */
html.dark-theme #syllabus-upload-modal .modal-content {
    background-color: #202124 !important;
    color: #ffffff !important;
    border: 1px solid #3c4043 !important;
}

html.dark-theme #syllabus-upload-modal .modal-header {
    background-color: #202124 !important;
    border-bottom-color: #3c4043 !important;
}

html.dark-theme #syllabus-upload-modal h2,
html.dark-theme #syllabus-upload-modal h2 span {
    color: #ffffff !important;
}

html.dark-theme #syllabus-upload-modal .close,
html.dark-theme #syllabus-upload-modal #close-syllabus-modal {
    color: #e8eaed !important;
}

html.dark-theme #syllabus-upload-modal .modal-body {
    background-color: #202124 !important;
}

html.dark-theme #syllabus-upload-modal p,
html.dark-theme #syllabus-upload-modal label,
html.dark-theme #syllabus-upload-modal small {
    color: #e8eaed !important;
}

html.dark-theme #syllabus-upload-modal .sharing-encouragement {
    background: #1a2333 !important;
    border-left-color: #8ab4f8 !important;
}

html.dark-theme #syllabus-upload-modal .sharing-encouragement p,
html.dark-theme #syllabus-upload-modal .sharing-encouragement ul {
    color: #e8eaed !important;
}

html.dark-theme #syllabus-upload-modal .sharing-encouragement p:first-child,
html.dark-theme #syllabus-upload-modal .sharing-encouragement p:last-child {
    color: #8ab4f8 !important;
}

html.dark-theme #syllabus-upload-modal input[type="text"],
html.dark-theme #syllabus-upload-modal input[type="file"],
html.dark-theme #syllabus-upload-modal select {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #5f6368 !important;
}

html.dark-theme #syllabus-upload-modal input::placeholder {
    color: #9aa0a6 !important;
}

/* Ensure Homepage Top Rated Professors Cards have Dark Mode Tags */
html.dark-theme .top-professors .tag.positive,
html.dark-theme .professor-card .tag.positive {
    background-color: #1a1a1a !important;
    color: #81c784 !important;
    border: 1px solid #4caf50 !important;
    border-style: solid !important;
}

html.dark-theme .top-professors .tag.neutral,
html.dark-theme .professor-card .tag.neutral {
    background-color: #1a1a1a !important;
    color: #ffb74d !important;
    border: 1px solid #ff9800 !important;
    border-style: solid !important;
}

html.dark-theme .top-professors .tag.negative,
html.dark-theme .professor-card .tag.negative {
    background-color: #1a1a1a !important;
    color: #e57373 !important;
    border: 1px solid #f44336 !important;
    border-style: solid !important;
}

html.dark-theme .dropdown-theme-toggle:hover,
html.dark-theme .mobile-theme-toggle:hover {
    background-color: #f0f0f0 !important;
}

html.dark-theme .dropdown-theme-toggle .theme-icon,
html.dark-theme .dropdown-theme-toggle .theme-label,
html.dark-theme .mobile-theme-toggle .theme-icon,
html.dark-theme .mobile-theme-toggle .theme-label {
    color: #000000 !important;
}

/* Review Form - Dark Mode Styling */

/* Guidelines section */
html.dark-theme .guidelines {
    background-color: #242424;
    border-color: #3c4043;
}

html.dark-theme .guidelines h4 {
    color: #6b4826 !important;
}

html.dark-theme .guidelines ul li {
    color: #b3b3b3;
}

html.dark-theme .guidelines a {
    color: #8ab4f8;
}

html.dark-theme .guidelines a:hover {
    color: #aecbfa;
}

/* Form Actions - Buttons */
html.dark-theme .form-actions {
    background-color: #2d2d2d;
}

/* Cancel Button */
html.dark-theme .btn-secondary {
    background-color: #2d2d2d;
    color: #1a1a1a;
    border-color: #3c4043;
}

html.dark-theme .btn-secondary:hover {
    background-color: #383838;
    color: #1a1a1a;
    border-color: #4a4a4a;
}

/* Submit Button */
html.dark-theme .btn-primary {
    background-color: #667eea;
    color: #ffffff;
    border-color: #667eea;
}

html.dark-theme .btn-primary:hover {
    background-color: #5568d3;
    border-color: #5568d3;
}

html.dark-theme .review-form-container {
    background-color: #202124;
    border: 1px solid #3c4043;
}

html.dark-theme .review-form .form-actions {
    background-color: #202124;
    border-top-color: #3c4043;
}

html.dark-theme .review-form .btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border-color: #5f6368;
}

html.dark-theme .review-form .btn-secondary:hover {
    background-color: #2d2d2d;
    color: #ffffff;
    border-color: #8ab4f8;
}

html.dark-theme .review-form .btn-primary {
    background-color: #8ab4f8;
    color: #1a1a1a;
    border: 1px solid #8ab4f8;
}

html.dark-theme .review-form .btn-primary:hover {
    background-color: #aecbfa;
    color: #1a1a1a;
    border-color: #aecbfa;
}

/* Fix language selector active state in dark mode - prevent white on white */
html.dark-theme .language-option.active {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

html.dark-theme .language-dropdown-mobile .language-option.active {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Theme Toggle Icon Images */
.theme-icon-img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

/* Mobile theme toggle icon */
.mobile-tablet-theme-toggle .theme-icon-img {
    width: 19px;
    height: 19px;
}

/* Desktop theme toggle icon */
.desktop-theme-toggle .theme-icon-img {
    width: 24px;
    height: 24px;
}

/* Dropdown theme toggle icon */
.dropdown-theme-toggle .theme-icon-img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Event Vote Labels - Dark Mode */
html.dark-theme .event-vote-label {
    color: #1f1f1f;
}

html.dark-theme .event-vote-btn:hover .event-vote-label {
    color: white;
}

/* Event Meta Information - Dark Mode */
html.dark-theme .event-meta-item,
html.dark-theme .event-meta-item span {
    color: #1f1f1f !important;
}

/* Seating Available Text - Dark Mode */
html.dark-theme .event-card div[style*="font-weight: bold"] {
    color: #1f1f1f !important;
}

/* QR Code Modal - Dark Mode */
html.dark-theme .qr-code-modal-header h3 {
    color: #1f1f1f !important;
}