/* Dark theme styles */
:root.dark-theme {
    --bg-dark: #222222;
    --bg-content: #333333;
    --text-primary: #ffff00;
    --text-secondary: #ffcc00;
    --bg-sidebar: #4a4a4a;
    --text-sidebar: #ffff00;
    --card-bg: #444444;
    --card-text: #ffff00;
    --border-subtle: rgba(255, 255, 0, 0.2);
    --border-sidebar: #ffff00;
    --card-shadow: 0 0 15px rgba(255, 255, 0, 0.3);
    --card-shadow-hover: 0 0 20px rgba(255, 255, 0, 0.5);
}

/* Base dark theme styles with maximum specificity */
html.dark-theme,
html.dark-theme body {
    background-color: #222222 !important;
    color: #ffff00 !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Target the body directly for maximum specificity */
body.dark-theme {
    background-color: #222222 !important;
    color: #ffff00 !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Ensure the main-content area is dark - specifically override layout.css */
.dark-theme .main-content {
    background-color: #222222 !important;
    background-image: none !important; /* Remove the pattern background */
}

/* Override the overlay/pseudo-element in sidebar.css */
.dark-theme .main-content::before {
    background-color: #222222 !important; /* Match dark theme background */
}

/* Target all major containers */
.dark-theme .container,
.dark-theme .container-fluid,
.dark-theme .row,
.dark-theme .col,
.dark-theme .col-md-6,
.dark-theme .col-lg-6,
.dark-theme .col-12,
.dark-theme .content-container,
.dark-theme .wrapper,
.dark-theme div[class^="col-"] {
    background-color: #222222 !important;
    transition: background-color 0.3s ease !important;
}

/* Override any Bootstrap backgrounds */
.dark-theme .bg-light,
.dark-theme .bg-white,
.dark-theme .bg-body,
.dark-theme .bg-body-tertiary {
    background-color: #222222 !important;
}

/* Welcome section styling for home page */
.dark-theme .welcome-section {
    background-color: #333333 !important;
    box-shadow: none !important;
    border: 1px solid #888888 !important;
}

/* Pendar button styling in dark theme */
.dark-theme .pendar-btn {
    width: 100% !important;
    max-width: 600px !important; /* Match with light mode's 600px */
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.dark-theme .btn-outline-primary.pendar-btn {
    background-color: transparent !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

.dark-theme .btn-outline-primary.pendar-btn:hover {
    background-color: rgba(255, 255, 0, 0.2) !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

/* Apply yellow gradient shadow to all cards */
.dark-theme .card {
    background-color: var(--card-bg) !important;
    border: 1px solid rgba(255, 255, 0, 0.2) !important;
    box-shadow: var(--card-shadow) !important;
    transition: all 0.3s ease !important;
}

.dark-theme .card:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-5px) !important;
}

/* Knowledge base card styling with yellow shadow */
.dark-theme .card.shadow-sm.hover-shadow {
    box-shadow: var(--card-shadow) !important;
    border: 1px solid rgba(255, 255, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.dark-theme .card.shadow-sm.hover-shadow:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-5px) !important;
}

/* Knowledge base search input styling */
.input-group-lg .form-control {
    width: 100% !important;
    max-width: none !important;
}

.col-md-6.mx-auto form {
    width: 100% !important;
    max-width: none !important;
}

.dark-theme .form-control::placeholder {
    color: rgba(255, 255, 0, 0.7) !important;
    opacity: 1 !important;
}

/* Dark theme sidebar */
.dark-theme .sidebar {
    background-color: var(--bg-sidebar) !important;
    border-right: none !important;
}

/* Dark theme emoji styles for sidebar */
.dark-theme .emoji-icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne", "Twemoji Mozilla", sans-serif !important;
    color: var(--text-sidebar) !important;
}

.dark-theme .emoji-icon svg {
    fill: var(--text-sidebar) !important;
}

.dark-theme .nav-link {
    color: var(--text-sidebar) !important;
}

.dark-theme .nav-link i,
.dark-theme .nav-link .emoji-icon,
.dark-theme .nav-link .emoji-icon svg {
    color: var(--text-sidebar) !important;
    fill: var(--text-sidebar) !important;
}

.dark-theme .toggle-btn {
    color: var(--text-sidebar) !important;
}

.dark-theme .toggle-btn:hover {
    background-color: #444444;
}

.dark-theme .nav-link:hover {
    background-color: #444444;
}

.dark-theme .nav-link.active {
    background-color: #444444;
}

/* Bottom nav items (Profile, Logout, Theme Toggle) hover and active states */
.dark-theme .bottom-nav-item .nav-link:hover,
.dark-theme .bottom-nav-item button:hover {
    background-color: #444444 !important;
}

.dark-theme .bottom-nav-item .nav-link.active {
    background-color: #444444 !important;
}

/* Logout button hover in dark theme (covers .nav-link button structure) */
.dark-theme .nav-link button:hover {
    background-color: #444444 !important;
}

.dark-theme .nav-link button:hover i,
.dark-theme .nav-link button:hover .emoji-icon,
.dark-theme .nav-link button:hover .emoji-icon svg {
    color: var(--text-sidebar) !important;
    fill: var(--text-sidebar) !important;
}

/* Dark theme settings button */
.dark-theme #appSettingsBtn {
    color: var(--text-sidebar) !important;
    background-color: transparent !important;
}

.dark-theme #appSettingsBtn:hover {
    background-color: #444444 !important;
}

.dark-theme #appSettingsBtn i,
.dark-theme #appSettingsBtn .emoji-icon,
.dark-theme #appSettingsBtn .emoji-icon svg {
    color: var(--text-sidebar) !important;
    fill: var(--text-sidebar) !important;
}

.dark-theme #appSettingsBtn .theme-toggle-text {
    color: var(--text-sidebar) !important;
}

/* Dark theme card styles */
.dark-theme .card-body {
    background-color: var(--card-bg);
    color: var(--card-text);
}

.dark-theme .card-header {
    background: linear-gradient(135deg, #dc3545 0%, #900C19 100%);
    color: white;
}

/* Special card components */
.dark-theme .paper-card,
.dark-theme .pdf-card,
.dark-theme .document-card,
.dark-theme .ai-message,
.dark-theme .user-message,
.dark-theme .result-card,
.dark-theme .report-card,
.dark-theme .chat-card {
    background-color: var(--card-bg) !important;
    box-shadow: var(--card-shadow) !important;
    border: 1px solid rgba(255, 255, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.dark-theme .paper-card:hover,
.dark-theme .pdf-card:hover,
.dark-theme .document-card:hover,
.dark-theme .result-card:hover,
.dark-theme .report-card:hover,
.dark-theme .chat-card:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-5px) !important;
}

/* Text colors in dark theme */
.dark-theme p, 
.dark-theme h1, 
.dark-theme h2, 
.dark-theme h3, 
.dark-theme h4, 
.dark-theme h5, 
.dark-theme h6,
.dark-theme label,
.dark-theme .lead {
    color: var(--text-primary);
    transition: color 0.3s ease !important;
}

/* Brain icon in brainstorm search */
.dark-theme .fa-brain {
    color: #ffff00 !important;
}

/* Typing bounce ball face - keep eyes and mouth black in dark mode */
.dark-theme .ball-eye {
    background: #000 !important;
    color: #000 !important;
}

.dark-theme .ball-smile {
    border-color: #000 !important;
    color: #000 !important;
    background: transparent !important;
}

.dark-theme .text-muted {
    color: var(--text-secondary) !important;
}

/* Dashboard text colors */
.dark-theme .text-secondary {
    color: white !important;
}

/* Form elements */
.dark-theme input,
.dark-theme select,
.dark-theme textarea {
    background-color: #555555;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

/* List items */
.dark-theme .list-group-item {
    background-color: var(--card-bg);
    color: var(--card-text);
    border-color: var(--border-subtle);
}

/* Buttons */
.dark-theme .btn-primary {
    background-color: #dc3545;
    border-color: #dc3545;
}

.dark-theme .btn-search {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;
}

/* Table styles */
.dark-theme table {
    color: var(--text-primary);
}

.dark-theme .table {
    color: var(--text-primary);
}

/* Pagination */
.dark-theme .page-link {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.dark-theme .page-item.active .page-link {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Alerts */
.dark-theme .alert-info {
    background-color: #444444;
    color: var(--text-primary);
    border-color: var(--border-subtle);
    box-shadow: var(--card-shadow) !important;
}

/* Welcome message */
.dark-theme .welcome-message {
    background: linear-gradient(135deg, #ffff00 0%, #ffcc00 100%) !important;
    color: #222222 !important;
}

.dark-theme .welcome-message::before {
    background: linear-gradient(45deg, #ffcc00, #ffff00, #ffff00, #ffcc00) !important;
}

/* Dark theme version message styling */
.dark-theme .version-message {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: #ffffff !important;
}

.dark-theme .version-message::before {
    background: linear-gradient(45deg, #66b3ff, #b3d9ff, #b3d9ff, #66b3ff) !important;
}

/* Theme toggle icon */
.theme-toggle {
    cursor: pointer;
    color: #000000; /* Changed from yellow to black for light mode */
    font-size: 1.2rem;
    margin: 0;
    transition: transform 0.3s;
}

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

/* Ensure theme toggle is yellow in dark mode */
.dark-theme .theme-toggle {
    color: #ffff00 !important;
}

/* Subject detail styles in dark mode */
.dark-theme .card-header,
.dark-theme .card-body {
    background-color: var(--card-bg) !important;
}

/* Make both header and body the same dark grey color */
.dark-theme .card .card-title,
.dark-theme .card-header h3,
.dark-theme .card-header h5 {
    color: var(--text-primary) !important;
}

/* Style links in citations and authors sections */
.dark-theme #citationsCollapse a,
.dark-theme #authorsCollapse a,
.dark-theme .citation-link,
.dark-theme .author-link,
.dark-theme .author-homepage-link,
.dark-theme .btn-outline-primary,
.dark-theme .btn-outline-danger {
    color: #3498db !important; /* Blue color */
    border-color: #3498db !important;
}

.dark-theme #citationsCollapse a:hover,
.dark-theme #authorsCollapse a:hover,
.dark-theme .citation-link:hover,
.dark-theme .author-link:hover,
.dark-theme .author-homepage-link:hover,
.dark-theme .btn-outline-primary:hover,
.dark-theme .btn-outline-danger:hover {
    color: #2980b9 !important; /* Darker blue on hover */
    background-color: rgba(52, 152, 219, 0.1) !important; /* Subtle blue background */
    border-color: #2980b9 !important;
}

/* Author homepage link */
.dark-theme a[href*="homepage"] {
    color: #3498db !important;
}

.dark-theme a[href*="homepage"]:hover {
    color: #2980b9 !important;
}

/* Buttons in dark mode */
.dark-theme .btn-info {
    background-color: #28a745 !important; /* Green color */
    border-color: #28a745 !important;
    color: white !important;
}

.dark-theme .btn-info:focus,
.dark-theme .btn-info:active,
.dark-theme .btn-info:not(:disabled):not(.disabled):active {
    background-color: #218838 !important; /* Darker green when active */
    border-color: #1e7e34 !important;
    color: white !important;
}

.dark-theme .btn-info:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

/* Button styles */
.dark-theme .btn-outline-primary,
.dark-theme .btn-outline-danger {
    background-color: var(--card-bg) !important;
}

/* Location guide styling for dark mode - red background with yellow/white text */
.dark-theme .location-guide {
    background-color: #dc3545 !important; /* Red background */
    border: 1px solid #dc3545 !important;
    color: #ffffff !important; /* White text for location */
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

.dark-theme .location-guide .user-name {
    color: #ffc107 !important; /* Yellow text for user name */
    font-weight: 600 !important;
}

.dark-theme .location-guide .location-text {
    color: #ffffff !important; /* White text for location */
    font-weight: 500 !important;
}

.dark-theme .location-guide .chevron {
    border-left-color: #ffffff !important; /* White chevrons */
}