/* ===== 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: #1a1a1a;
    border-bottom-color: #3c4043;
}

/* 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;
}

/* 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 #dadce0 !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 */
html.dark-theme .university-name,
html.dark-theme .university-bio,
html.dark-theme .university-info,
html.dark-theme .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;
}

/* 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 {
    background: #242424;
    border-color: #3c4043;
}

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 {
    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 {
    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 {
    background-color: #383838;
}

/* 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 {
    color: #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;
}

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

html.dark-theme a:not(.nav-link):not(.mobile-menu-item):not(.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;
}

/* 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 #1a1a1a !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 */
html.dark-theme a[href="/syllabus"].partners-button {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #1a1a1a !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 #1a1a1a !important;
}

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

/* Review Form Tags - Dark Mode */
html.dark-theme .tag-btn {
    background-color: #2d2d2d !important;
    border-color: #3c4043 !important;
    color: #1a1a1a !important;
}

html.dark-theme .tag-btn:hover {
    background-color: #3c4043 !important;
    border-color: #555555 !important;
    color: #1a1a1a !important;
}

html.dark-theme .tag-btn.selected {
    background-color: #5f6368 !important;
    border-color: #5f6368 !important;
    color: #1a1a1a !important;
    font-weight: 600;
}

html.dark-theme .tags-container {
    border-color: #333 !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;
}

/* 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;
}

/* 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 .rating-card,
html.dark-theme .review-item,
html.dark-theme .reviews-section,
html.dark-theme .student-ratings {
    background-color: #1a1a1a !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;
}

/* ===== 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;
}

/* 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;
}

/* "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 - black */
html.dark-theme .form-section h3,
html.dark-theme h3[data-translate="professor-selection-title"] {
    color: #1a1a1a !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: #1a1a1a !important;
    background-color: #000000 !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: #1a1a1a !important;
    background-color: #000000 !important;
}

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

/* Tags container - WHITE background for review form */
html.dark-theme .tags-container {
    background-color: #ffffff !important;
}

/* 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: #1a1a1a !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: #1a1a1a !important;
}

/* Write a Review label - black */
html.dark-theme label[for="review-text"],
html.dark-theme .review-section label {
    color: #1a1a1a !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;
}

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;
}