/* --- DARK MODE: Improved for glow, contrast, and prettiness --- */

/* Light mode CSS variables (when dark mode is disabled) */
body:not(.dark-mode) {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --svg-bg: #ffffff;
    --accent-color: #007bff;
    --accent-hover: #0056b3;
    --node-stroke: #000000;
    --link-color-default: #666666;
}

/* Light mode styles for related topics, insights, and comments */
body.light-mode .related-carousel-title,
body.light-mode .related-section-title {
    color: #3d2067 !important;
    text-shadow: none !important;
}

body.light-mode .related-carousel-card {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
}

body.light-mode .related-carousel-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

body.light-mode .related-carousel-card .related-carousel-title {
    color: #3d2067 !important;
    text-shadow: none !important;
}

body.light-mode .related-carousel-card .graph-preview-img {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

body.light-mode .related-carousel-card .graph-preview-img::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
    pointer-events: none !important;
}

body.light-mode .related-carousel-card .graph-preview-img i {
    position: relative !important;
    z-index: 2 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
}

/* Ensure all insights icons are white in light mode - comprehensive targeting */
body.light-mode .graph-preview-img i,
body.light-mode .related-carousel-card .graph-preview-img i,
body.light-mode [id*="insights"] .graph-preview-img i,
body.light-mode [id*="insights-carousel"] .graph-preview-img i,
body.light-mode [class*="insights"] .graph-preview-img i,
body.light-mode .insights-carousel .graph-preview-img i,
body.light-mode #insights-carousel-track .graph-preview-img i,
body.light-mode .carousel-card .graph-preview-img i,
body.light-mode .card .graph-preview-img i {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

/* Additional targeting for any carousel cards in light mode */
body.light-mode .carousel-card,
body.light-mode [class*="carousel"] .card,
body.light-mode [id*="carousel"] .card {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
}

body.light-mode .carousel-card .graph-preview-img,
body.light-mode [class*="carousel"] .card .graph-preview-img,
body.light-mode [id*="carousel"] .card .graph-preview-img {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body.light-mode .related-carousel-card:hover .graph-preview-img {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

body.light-mode .comments-header,
body.light-mode .topicview-contributors-label,
body.light-mode .contributors-label {
    color: #3d2067 !important;
    text-shadow: none !important;
}

body.light-mode .area-label {
    color: #3d2067 !important;
}

body.light-mode .subject-areas-title {
    color: #3d2067 !important;
}

body.light-mode .section-header {
    color: #3d2067 !important;
}

body.light-mode .COMMENTS,
body.light-mode .MAIN_COMMENTS,
body.light-mode .comment-display,
body.light-mode .subcomment-display {
    background: #ffffff !important;
    color: #212529 !important;
}

body.light-mode .COMMENTS p,
body.light-mode .COMMENTS .no-comments-message {
    color: #2C0E3A !important;
}

body.light-mode .comment-text-content {
    color: #2C0E3A !important;
}

body.light-mode .MAIN_COMMENTS .comment-text-content,
body.light-mode .COMMENTS .MAIN_COMMENTS .comment-text-content {
    color: #2C0E3A !important;
}

body.light-mode .creator-name,
body.light-mode .creator-name-link {
    color: #3d2067 !important;
}

body.light-mode .timestamp,
body.light-mode .text-muted,
body.light-mode .date,
body.light-mode .small,
body.light-mode .text-secondary {
    color: #6c757d !important;
}

body.light-mode .form-comments,
body.light-mode .form-subcomments {
    background: #ffffff !important;
    color: #212529 !important;
}

body.light-mode .form-comments label,
body.light-mode .form-subcomments label {
    color: #3d2067 !important;
}

body.light-mode .form-comments input[type="text"],
body.light-mode .form-comments textarea,
body.light-mode .form-comments select,
body.light-mode .form-subcomments input[type="text"],
body.light-mode .form-subcomments textarea,
body.light-mode .form-subcomments select {
    background: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

body.light-mode .form-comments input[type="text"]:focus,
body.light-mode .form-comments textarea:focus,
body.light-mode .form-comments select:focus,
body.light-mode .form-subcomments input[type="text"]:focus,
body.light-mode .form-subcomments textarea:focus,
body.light-mode .form-subcomments select:focus {
    border-color: #3d2067 !important;
    box-shadow: 0 0 0 0.2rem rgba(61, 32, 103, 0.25) !important;
}

body.light-mode .form-comments button[type="submit"],
body.light-mode .form-subcomments button[type="submit"] {
    background: #3d2067 !important;
    color: #ffffff !important;
}

body.light-mode .form-comments button[type="submit"]:hover,
body.light-mode .form-subcomments button[type="submit"]:hover {
    background: #2d1a4d !important;
}

body.light-mode .MAIN_COMMENTS .btn,
body.light-mode .MAIN_COMMENTS button,
body.light-mode .SUB_COMMENTS .btn,
body.light-mode .SUB_COMMENTS button {
    color: #3d2067 !important;
    background: transparent !important;
    border: 1px solid #3d2067 !important;
}

body.light-mode .MAIN_COMMENTS .btn:hover,
body.light-mode .MAIN_COMMENTS button:hover,
body.light-mode .SUB_COMMENTS .btn:hover,
body.light-mode .SUB_COMMENTS button:hover {
    background: #3d2067 !important;
    color: #ffffff !important;
}

body.light-mode .create-comment-btn {
    background: #3d2067 !important;
    color: #ffffff !important;
}

body.light-mode .create-comment-btn:hover {
    background: #2d1a4d !important;
}

/* Light mode Quill editor styles */
body.light-mode .ql-container {
    background: #ffffff !important;
    color: #2C0E3A !important;
}

body.light-mode .ql-editor {
    background: #ffffff !important;
    color: #2C0E3A !important;
}

body.light-mode .ql-editor p {
    color: #2C0E3A !important;
}

body.light-mode .ql-editor * {
    color: #2C0E3A !important;
}

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

/* Disable transitions during initial load to prevent flash */
.no-transition * {
    transition: none !important;
}

/* Prevent flash for chart elements */
.no-transition canvas,
.no-transition svg,
.no-transition .chartDiv,
.no-transition .chartDiv canvas {
    transition: none !important;
}

/* Ensure chart elements have proper dark mode styling immediately */
.dark-mode canvas {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

.dark-mode .chartDiv {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

.dark-mode .chartDiv canvas {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* Chart.js specific dark mode styling */
.dark-mode .chartjs-render-monitor {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

.dark-mode .chartjs-chart {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* Force immediate background changes for chart containers */
.dark-mode [id*="chart"],
.dark-mode [id*="graph"],
.dark-mode [class*="chart"],
.dark-mode [class*="graph"] {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    transition: background-color 0s !important;
}

/* Additional comprehensive chart element targeting */
.dark-mode canvas[id*="Chart"],
.dark-mode canvas[id*="chart"],
.dark-mode canvas[class*="chart"],
.dark-mode canvas[class*="graph"] {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    transition: background-color 0s !important;
}


/* Force all chart containers to have dark backgrounds */
.dark-mode .chart-container,
.dark-mode .graph-container,
.dark-mode [id*="chart-container"],
.dark-mode [id*="graph-container"] {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    transition: background-color 0s !important;
}

/* Specific targeting for distribution and cluster charts */
.dark-mode #myTagChart,
.dark-mode #myViewpointChart,
.dark-mode #user-clusters-graph,
.dark-mode #word-clusters-graph,
.dark-mode #tag-clusters-graph,
.dark-mode #viewpoint-clusters-graph {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    transition: background-color 0s !important;
}


/* Dark mode CSS variables - these override the light mode variables */
.dark-mode {
    --bg-primary: #151b29;
    --bg-secondary: #182133;
    --bg-tertiary: #23244d;
    --text-primary: #f3f3fa;
    --text-secondary: #bfc4d1;
    --border-color: #23244d;
    --accent-color: #c93e3d;
    --accent-hover: #b93a3a;
    --svg-bg: #151b29;
    --node-stroke: #23244d;
    --link-color-default: #6c757d;
}

body.dark-mode, .dark-mode .layout-root, .dark-mode .main-content, .dark-mode .flex-fill, .dark-mode .g-3 {
    background: #151b29 !important;
    color: #f3f3fa !important;
}

/* Apply dark styling to containers, but exclude footer containers */
.dark-mode .container {
    background: #151b29 !important;
    color: #f3f3fa !important;
}

/* Override for footer containers to prevent dark styling */
.dark-mode .footer .container,
.dark-mode #main-footer .container {
    background: transparent !important;
    color: inherit !important;
}

.dark-mode .navbar, .dark-mode .main-navbar, .dark-mode header, .dark-mode .sidebar {
    background: #101726 !important;
    color: #fff !important;
    border-bottom: 1px solid #23244d;
}

/* Comprehensive navbar dark mode styling */
.dark-mode .navbar, .dark-mode .main-navbar {
    background: #101726 !important;
    border-bottom: 1px solid #23244d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .navbar-brand {
    color: #f3f3fa !important;
    font-weight: bold !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .navbar-brand:hover {
    color: #a8b2d1 !important;
    text-shadow: 0 2px 6px rgba(168, 178, 209, 0.4) !important;
}

.dark-mode .navbar-nav {
    align-items: center !important;
}

.dark-mode .navbar-nav .nav-link {
    color: rgba(243, 243, 250, 0.9) !important;
    transition: all 0.2s ease !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin: 0 2px !important;
}

.dark-mode .navbar-nav .nav-link:hover,
.dark-mode .navbar-nav .nav-link:focus {
    color: #a8b2d1 !important;
    background: rgba(168, 178, 209, 0.1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(168, 178, 209, 0.2) !important;
}

.dark-mode .navbar-nav .nav-link.active {
    color: #a8b2d1 !important;
    background: rgba(168, 178, 209, 0.15) !important;
    box-shadow: 0 2px 6px rgba(168, 178, 209, 0.3) !important;
}

/* Dark mode navbar search input styling */
.dark-mode .navbar .form-control {
    background: rgba(35, 36, 77, 0.8) !important;
    color: #f3f3fa !important;
    border: 1px solid #23244d !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .navbar .form-control:focus {
    background: rgba(35, 36, 77, 0.9) !important;
    border-color: #a8b2d1 !important;
    box-shadow: 0 0 0 3px rgba(168, 178, 209, 0.2) !important;
    color: #f3f3fa !important;
}

.dark-mode .navbar .form-control::placeholder {
    color: rgba(243, 243, 250, 0.6) !important;
}

/* Dark mode navbar input group styling */
.dark-mode .navbar .input-group {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .navbar .input-group .btn {
    background: rgba(35, 36, 77, 0.8) !important;
    border: 1px solid #23244d !important;
    border-left: none !important;
    color: #f3f3fa !important;
    border-radius: 0 8px 8px 0 !important;
}

.dark-mode .navbar .input-group .btn:hover {
    background: rgba(35, 36, 77, 0.9) !important;
    color: #a8b2d1 !important;
}

/* Dark mode email confirmation checkmark styling */
.dark-mode .input-group-text.text-success{
    border-radius: 0 8px 8px 0 !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin-left: -1px !important;
    border-left: none !important;
    transition: all 0.2s ease !important;
    font-size: 20px !important;
    font-weight: bold !important;
    background-color: #2d3748 !important;
    border-color: #48bb78 !important;
    color: #48bb78 !important;
}

/* Dark mode email management page styling */
.dark-mode .input-group .form-control:disabled {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #a0aec0 !important;
}

.dark-mode .input-group .form-control:not(:disabled) {
    background-color: #1a202c !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

.dark-mode .input-group .form-control:focus {
    background-color: #2d3748 !important;
    border-color: #38a169 !important;
    box-shadow: 0 0 0 0.2rem rgba(56, 161, 105, 0.25) !important;
}

/* Dark mode input group styling for email confirmation */
.dark-mode #email-form .form-floating.input-group .form-control {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.dark-mode #email-form .form-floating.input-group .input-group-append {
    margin-left: -1px !important;
}

/* Dark mode btn-link styling for email verification */
.dark-mode .btn-link {
    color: #38a169 !important;
    text-decoration: none !important;
}

.dark-mode .btn-link:hover {
    color: #48bb78 !important;
    text-decoration: underline !important;
}

/* Enhanced tooltip styling for dark mode */
.dark-mode [title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a202c !important;
    color: #e2e8f0 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #2d3748 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

.dark-mode [title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent !important;
    border-top-color: #1a202c !important;
    z-index: 1000 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

/* Dark mode navbar toggler styling */
.dark-mode .navbar-toggler {
    border: 1px solid #23244d !important;
    background: rgba(35, 36, 77, 0.8) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(168, 178, 209, 0.2) !important;
}

.dark-mode .navbar-toggler-icon {
    background-color: #f3f3fa !important;
    border-radius: 2px !important;
}

/* Dark mode navbar container styling */
.dark-mode .navbar .container-fluid {
    padding: 0 1rem !important;
}

/* Dark mode navbar logo styling */
.dark-mode .navbar img {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)) !important;
}

.dark-mode .navbar img:hover {
    filter: drop-shadow(0 2px 6px rgba(168, 178, 209, 0.4)) !important;
}

.dark-mode .card, .dark-mode .account-manage-card {
    background: #182133 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px 0 #0a0e1a99 !important;
}

/* Completely remove any glow effects from cards */
.dark-mode .card, 
.dark-mode .account-manage-card,
.dark-mode .card:not(:hover), 
.dark-mode .account-manage-card:not(:hover),
.dark-mode .topic-card-clickable:not(:hover),
.dark-mode .topic-card-clickable,
.dark-mode .col-lg-4 .card,
.dark-mode .col-md-6 .card {
    box-shadow: 0 2px 8px 0 #0a0e1a99 !important;
    filter: none !important;
    text-shadow: none !important;
    background: #182133 !important;
    border: none !important;
}

/* Force override any remaining glow effects with maximum specificity */
.dark-mode .card:not(:hover),
.dark-mode .account-manage-card:not(:hover),
.dark-mode .topic-card-clickable:not(:hover),
.dark-mode .col-lg-4 .card:not(:hover),
.dark-mode .col-md-6 .card:not(:hover) {
    box-shadow: 0 2px 8px 0 #0a0e1a99 !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Maximum specificity override for any remaining glow */
.dark-mode .card,
.dark-mode .account-manage-card,
.dark-mode .topic-card-clickable,
.dark-mode .col-lg-4 .card,
.dark-mode .col-md-6 .card {
    box-shadow: 0 2px 8px 0 #0a0e1a99 !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Override the specific glow value that's showing in inspector */
.dark-mode .card,
.dark-mode .account-manage-card {
    box-shadow: 0 2px 8px 0 #0a0e1a99 !important;
}

.dark-mode .card-body, .dark-mode .account-manage-content, .dark-mode .account-manage-nav {
    background: #182133 !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

.dark-mode .card-title {
    color: #f3f3fa !important;
    text-shadow: none !important;
}
.dark-mode .card-subtitle, .dark-mode .card-text {
    color: #bfc4d1 !important;
    text-shadow: none !important;
}

.dark-mode .main-content, .dark-mode .container.flex-grow-1, .dark-mode .main-view-container, .dark-mode .right-scrollable, .dark-mode .left-fixed {
    background: transparent !important;
    color: #fff !important;
}

.dark-mode .right-scrollable {
    padding: 2rem 2.5rem 0 2.5rem !important;
}

.dark-mode .account-manage-nav {
    background: #151b29 !important;
    border-right: 1px solid #23244d !important;
}

.dark-mode .account-manage-root {
    background: none !important;
}

.dark-mode .footer, .dark-mode #main-footer {
    background: #101726 !important;
    color: #a0a0b0 !important;
    border-top: 2px solid #2a2a3a !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
}

.dark-mode .footer::before, .dark-mode #main-footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, #4a4a5a 20%, #4a4a5a 80%, transparent 100%) !important;
}

.dark-mode .footer a, .dark-mode #main-footer a {
    color: #a0a0b0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.dark-mode .footer a:hover, .dark-mode #main-footer a:hover {
    color: #c0c0d0 !important;
    text-decoration: underline !important;
}

.dark-mode .btn-tertiary.btn-pink {
    background: #e05ca4 !important; /* vibrant pink */
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px 0 #e05ca455;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s, transform 0.15s;
}
.dark-mode .btn-tertiary.btn-pink:hover {
    background: #c13b8a !important; /* deeper pink for hover */
    color: #fff !important;
    border: none !important;
    box-shadow: 0 0 16px 2px #e05ca488, 0 2px 12px 0 #0006;
    transform: scale(1.06);
}

/* Restore previous .btn-tertiary dark mode styles for other buttons */
.dark-mode .btn-tertiary:not(.btn-pink) {
    background: #182133 !important;
    color: #FF6B6B !important;
    border: 2px solid #FF6B6B !important;
    box-shadow: 0 2px 8px 0 #0004;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s, transform 0.15s;
    padding: 0.45em 1.2em;
    font-size: 1.05em;
    outline: none;
}
.dark-mode .btn-tertiary:not(.btn-pink):hover {
    background: #FF6B6B !important; /* border color for coral buttons */
    color: #23244d !important;
    border-color: #FF6B6B !important;
    box-shadow: 0 0 3px 1px #FF6B6B33, 0 0 2px 0.5px #e05ca422;
    transform: scale(1.06);
}
.dark-mode .btn-tertiary.btn-pink:hover {
    background: #e05ca4 !important; /* pink border color for pink buttons */
    color: #fff !important;
    border: none !important;
    box-shadow: 0 0 16px 2px #e05ca488, 0 2px 12px 0 #0006;
    transform: scale(1.06);
}

/* Dark mode styling for primary buttons (create topic button) */
.dark-mode .btn-primary {
    background: #182133 !important;
    color: #FF6B6B !important;
    border: 2px solid #FF6B6B !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px 0 #0004 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s, transform 0.15s !important;
    padding: 0.45em 1.2em !important;
    font-size: 1.05em !important;
    outline: none !important;
}

.dark-mode .btn-primary:hover {
    background: #FF6B6B !important;
    color: #23244d !important;
    border-color: #FF6B6B !important;
    box-shadow: 0 0 3px 1px #FF6B6B33, 0 0 2px 0.5px #e05ca422 !important;
    transform: scale(1.06) !important;
}

/* Dark mode styling for secondary buttons */
.dark-mode .btn-secondary {
    background: #182133 !important;
    color: #FF6B6B !important;
    border: 2px solid #FF6B6B !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px 0 #0004 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s, transform 0.15s !important;
    padding: 0.45em 1.2em !important;
    font-size: 1.05em !important;
    outline: none !important;
}

.dark-mode .btn-secondary:hover {
    background: #FF6B6B !important;
    color: #23244d !important;
    border-color: #FF6B6B !important;
    box-shadow: 0 0 3px 1px #FF6B6B33, 0 0 2px 0.5px #FF6B6B22 !important;
    transform: scale(1.06) !important;
}

.dark-mode .btn-primary, .dark-mode .btn-edit-topic {
    box-shadow: 0 0 2px 0.5px #ffffff22, 0 0 1px 0.5px #e05ca410;
}
.dark-mode .btn-primary:hover, .dark-mode .btn-edit-topic:hover {
    box-shadow: 0 0 3px 1px #ffffff33, 0 0 2px 0.5px #e05ca422;
}

.dark-mode .btn-tertiary.btn-glow,
.dark-mode .btn-tertiary.btn-glow:hover {
    box-shadow: 0 0 2px 0.5px #ffffff22, 0 0 1px 0.5px #e05ca410 !important;
}
.dark-mode .btn-tertiary.btn-glow:hover {
    box-shadow: 0 0 3px 1px #ffffff33, 0 0 2px 0.5px #e05ca422 !important;
}

.dark-mode .form-control, .dark-mode input, .dark-mode textarea, .dark-mode .search-bar, .dark-mode input[type="search"] {
    background: #23244d !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 0 8px 1px #c93e3d33;
    border-radius: 8px;
}

.dark-mode .form-control:focus, .dark-mode input:focus, .dark-mode textarea:focus, .dark-mode .search-bar:focus, .dark-mode input[type="search"]:focus {
    outline: none;
    box-shadow: 0 0 12px 2px #ffffff99;
}

.dark-mode .categoryDiv, .dark-mode .badge, .dark-mode .area-badge, .dark-mode .official-badge, .dark-mode .user-badge {
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px;
}

.dark-mode .expected-contributors-info {
    color: #ffffff;
    text-shadow: none;
}

.dark-mode .topicview-contributors-bar, .dark-mode .topicview-contributors-avatar-stack {
    background: transparent;
    color: #ffffff;
}

.dark-mode .topicview-contributors-avatar {
    border: 1px solid #a97cff;
    box-shadow: 0 0 4px 1px #a97cff40;
}





.dark-mode .dropdown-menu, .dark-mode .modal-content {
    background: #23244d !important;
    color: #fff !important;
}

.dark-mode .custom-tooltip {
    background: #23244d !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px 2px #ffffff80;
}

.dark-mode .form-label, .dark-mode label, .dark-mode .info-tooltip-wrapper, .dark-mode .timestamp, .dark-mode .text-dark, .dark-mode .text-muted, .dark-mode .text-secondary {
    color: #ffffff !important;
}

/* Topic title, attributions, and section headers white */
.dark-mode .topic-title {
    color: #fff !important;
    text-shadow: 0 2px 12px #ffffff55, 0 2px 8px #23244d55 !important;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 0.7em;
}
.dark-mode .topicview-attributions-label, .dark-mode .section-header, .dark-mode .comments-header {
    color: #fff !important;
    text-shadow: 0 2px 8px #23244d55 !important;
}

/* Attribution values: light white for readability */
.dark-mode .topicview-attributions-label + span, .dark-mode .attribution-value {
    color: #f0f0f0 !important;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* #tag badges: purple, semi-transparent, soft border, no shadow */
.dark-mode .badge, .dark-mode .user-badge {
    background: rgba(124, 75, 201, 0.18) !important;
    color: #a97cff !important;
    border: 1.5px solid #7c4bc9 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 1.2em !important;
    padding: 0.35em 1.2em !important;
    font-size: 1em !important;
    margin-right: 0.5em !important;
    letter-spacing: 0.03em !important;
    transition: background 0.2s, color 0.2s, border 0.2s !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
}
.dark-mode .badge.user-badge:hover, .dark-mode .badge:hover {
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
}

/* Official area badge: warm pumpkin shades for better dark mode appearance */
.dark-mode .area-badge.official, 
.dark-mode .badge-yellow {
    background: transparent !important;
    color: #FF8C42 !important;
    box-shadow: none !important;
    border: 2px solid #FF8C42 !important;
    /* Ensure border is visible by setting border-style and border-width explicitly */
    border-style: solid !important;
    border-width: 2px !important;
}

/* Dark mode styling for invited user and group badges */
.dark-mode .user-invite-badge {
    background: #23244d !important;
    color: #a97cff !important;
    border: 1.5px solid #7c4bc9 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 4px 8px !important;
    font-size: 0.9em !important;
    display: inline-block !important;
    margin: 2px !important;
}

.dark-mode .group-badge {
    background: #23244d !important;
    color: #d1b3ff !important;
    border: 1.5px solid #9c27b0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 4px 8px !important;
    font-size: 0.9em !important;
    display: inline-block !important;
    margin: 2px !important;
}

/* Dark mode hover effects for invited user and group badges */
.dark-mode .invitedUserDiv:hover .user-invite-badge,
.dark-mode .invitedGroupDiv:hover .group-badge {
    text-decoration: line-through !important;
    text-decoration-color: #ff6b6b !important;
    text-decoration-thickness: 2px !important;
    transition: text-decoration 0.2s ease !important;
}

.dark-mode .area-badge.user, 
html.dark-mode .area-badge.user, 
body.dark-mode .area-badge.user {
    background: transparent !important;
    color: #FF8C42 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
    position: relative !important;
    border: 2px solid #FF8C42 !important;
    border-style: solid !important;
    border-width: 2px !important;
    /* If still not visible, try adding border-color override and z-index */
    border-color: #FF8C42 !important;
    z-index: 1;
}
.dark-mode .area-badge.user .user-star, html.dark-mode .area-badge.user .user-star, body.dark-mode .area-badge.user .user-star {
    color: #FF8C42 !important;
    text-shadow: 0 0 8px #FF8C4288, 0 0 2px #fff;
    margin-right: 0.3em !important;
    font-size: 1.15em !important;
    vertical-align: middle !important;
}

/* Comments consistent with dark mode */
.dark-mode .COMMENTS, .dark-mode .MAIN_COMMENTS, .dark-mode .comment-display, .dark-mode .subcomment-display {
    color: #fff !important;
    border-radius: 1em !important;
    margin-bottom: 1.2em !important;
}
.dark-mode .comment-avatar {
    box-shadow: 0 0 4px 1px #a97cff40 !important;
}
.dark-mode .creator-name, .dark-mode .creator-name-link {
    color: #ffffff !important;
}
.dark-mode .timestamp, .dark-mode .text-muted, .dark-mode .date, .dark-mode .small, .dark-mode .text-secondary {
    color: #bfc4d1 !important;
    text-shadow: 0 0 6px #bfc4d155;
}

/* No comments yet message: pretty, readable color */
.dark-mode .COMMENTS p, .dark-mode .COMMENTS .no-comments-message {
    color: #fffbe6 !important;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 4px #23244d33 !important;
}

/* Comments section: lighter, modern dark, soft border, subtle shadow */
.dark-mode .COMMENTS {
    color: #fff !important;
    border-radius: 1.2em !important;
    margin-bottom: 1.5em !important;
}

.dark-mode h1, .dark-mode h2, .dark-mode .display-5, .dark-mode .main-title, .dark-mode .section-title {
    color: #b3c7f7 !important;
    text-shadow: none !important;
}
.dark-mode h3, .dark-mode h4, .dark-mode .mb-0, .dark-mode .mb-2 {
    color: #c7d0e6 !important;
    text-shadow: none !important;
}

.dark-mode .fa-home, .dark-mode .home-icon, .dark-mode .icon-home {
    color: #fff !important;
}

.dark-mode .user-card {
    background: #232a4d !important;
    color: #e6e6fa !important;
    border: 1.5px solid #4f6ed6 !important;
    box-shadow: none !important;
    border-radius: 12px;
    transition: background 0.2s, color 0.2s, border 0.2s;
}
.dark-mode .user-card:hover {
    background: #2d3560 !important;
    color: #fff !important;
    border-color: #7ea6f6 !important;
}

.dark-mode .user-card .user-name {
    color: #fff !important;
}

.dark-mode .user-card .username, .dark-mode .user-card .user-fullname, .dark-mode .user-card .profile-username {
    color: #fff !important;
}

/* Add more selectors as needed for your UI */ 

/* Pink action buttons for View/Edit */
.dark-mode .btn-pink-action {
    background: #e05ca4 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2em !important;
    box-shadow: 0 2px 12px 0 #e05ca433, 0 1.5px 6px 0 #ff980022 !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.6em 2em;
    font-size: 1.1em;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.dark-mode .btn-pink-action:hover {
    background: #c13b8a !important;
    color: #fff !important;
    box-shadow: 0 0 16px 4px #e05ca488, 0 2px 12px 0 #e05ca444 !important;
    transform: scale(1.06);
} 

/* Section and label text: white or pretty, readable color */
.dark-mode .topic-title, .dark-mode .topicview-attributions-label, .dark-mode .section-header, .dark-mode .comments-header, .dark-mode .label, .dark-mode .form-label, .dark-mode .info-tooltip-wrapper, .dark-mode .category-label, .dark-mode .area-label {
    color: #fff !important;
    text-shadow: 0 2px 8px #23244d55 !important;
}
.dark-mode .related-carousel-title, .dark-mode .related-section-title {
    color: #212529 !important;
    text-shadow: none !important;
} 

/* Section titles and labels: white for prettiness */
.dark-mode .area-label { color: #f3f3fa !important; }
.dark-mode .subject-areas-title { color: #e6e6fa !important; }
.dark-mode .related-section-title { color: #fff !important; }
.dark-mode .comments-header { color: #bfc4d1 !important; }
.dark-mode .topicview-contributors-label, .dark-mode .contributors-label { color: #e6e6fa !important; }
.dark-mode .comments-header, .dark-mode .topicview-contributors-label, .dark-mode .contributors-label {
    color: #fff !important;
    text-shadow: 0 2px 8px #23244d55 !important;
} 

/* Related topic cards: dark mode consistent colors */
.dark-mode .related-carousel-card {
    min-width: 220px !important;
    max-width: 220px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    background: #232a4d !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.dark-mode .related-carousel-card:hover {
    box-shadow: 0 4px 12px rgba(248, 249, 250, 0.12), 0 2px 6px rgba(240, 241, 242, 0.08) !important;
    transform: translateY(-2px) !important;
    z-index: 2 !important;
}
.dark-mode .related-carousel-title {
    text-align: center !important;
    font-size: 1.1em !important;
    background: #232a4d !important;
    padding: 0.75em 0.5em 0.5em 0.5em !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    font-family: 'Source Sans Pro', Arial, sans-serif !important;
    text-shadow: none !important;
}

/* Dark mode styling for carousel outer elements */
.dark-mode .related-carousel-outer,
.dark-mode .related-carousel-track,
.dark-mode .topicview-related-carousel-wrapper {
    background: #151b29 !important;
    background-color: #151b29 !important;
} 

/* Graph preview images: dark mode styling */
.dark-mode .graph-preview-img {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.dark-mode .graph-preview-img::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%) !important;
    pointer-events: none !important;
}

.dark-mode .graph-preview-img i {
    position: relative !important;
    z-index: 2 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
}

.dark-mode .related-carousel-card:hover .graph-preview-img {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(248, 249, 250, 0.12), 0 2px 6px rgba(240, 241, 242, 0.08) !important;
}

/* Individual graph preview variations for dark mode */
.dark-mode .related-carousel-card:nth-child(1) .graph-preview-img {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(1):hover .graph-preview-img {
    background: linear-gradient(135deg, #ee5a24 0%, #ff6b6b 100%) !important;
    box-shadow: 0 4px 12px rgba(248, 249, 250, 0.12), 0 2px 6px rgba(240, 241, 242, 0.08) !important;
}

.dark-mode .related-carousel-card:nth-child(2) .graph-preview-img {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(2):hover .graph-preview-img {
    background: linear-gradient(135deg, #44a08d 0%, #4ecdc4 100%) !important;
    box-shadow: 0 4px 12px rgba(248, 249, 250, 0.12), 0 2px 6px rgba(240, 241, 242, 0.08) !important;
}

.dark-mode .related-carousel-card:nth-child(3) .graph-preview-img {
    background: linear-gradient(135deg, #45b7d1 0%, #96c93d 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(3):hover .graph-preview-img {
    background: linear-gradient(135deg, #96c93d 0%, #45b7d1 100%) !important;
    box-shadow: 0 4px 12px rgba(248, 249, 250, 0.12), 0 2px 6px rgba(240, 241, 242, 0.08) !important;
}

.dark-mode .related-carousel-card:nth-child(4) .graph-preview-img {
    background: linear-gradient(135deg, #a55eea 0%, #26de81 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(4):hover .graph-preview-img {
    background: linear-gradient(135deg, #26de81 0%, #a55eea 100%) !important;
    box-shadow: 0 4px 12px rgba(248, 249, 250, 0.12), 0 2px 6px rgba(240, 241, 242, 0.08) !important;
}

.dark-mode .related-carousel-card:nth-child(5) .graph-preview-img {
    background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(5):hover .graph-preview-img {
    background: linear-gradient(135deg, #fdcb6e 0%, #fd79a8 100%) !important;
    box-shadow: 0 4px 12px rgba(248, 249, 250, 0.12), 0 2px 6px rgba(240, 241, 242, 0.08) !important;
}

/* Ensure graph preview icons have good contrast in dark mode */
.dark-mode .graph-preview-img i {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
} 

/* Login and form containers in dark mode */
.dark-mode .auth-box, .dark-mode .login-box, .dark-mode .form-container {
    background: #1a1f2e !important;
    color: #e8eaed !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #2d3748 !important;
    padding: 30px !important;
    margin: 10px !important;
    width: 100% !important;
}

.dark-mode .auth-container, .dark-mode .login-container, .dark-mode .form-container{
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 30px !important;
    margin: 20px auto !important;
    padding-bottom: 50px !important;
    background: transparent !important;
    color: #e8eaed !important;
    width: 100% !important;
}

/* Form container specific styling for dark mode */
.dark-mode .form-container {
    width: 455px !important;
}

.dark-mode .auth-box {
    max-width: 400px !important;
}

.dark-mode .login-box {
    max-width: 300px !important;
    height: 450px !important;
}

.dark-mode .form-container input[type="text"],
.dark-mode .form-container textarea {
    width: 100% !important;
    font-size: 1rem !important;
    border: 1px solid #4a5568 !important;
    border-radius: 10px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
    resize: vertical !important;

}

/* Override width for input-group inputs to allow custom widths */
.dark-mode .form-container .input-group input[type="text"] {
    width: auto !important;
}

/* Override button margin-left in dark mode for form buttons */
.dark-mode .form-container .input-group button {
    margin-left: -65px !important;
}

.dark-mode .form-container label {
    font-weight: bold !important;
    font-size: 1.1rem !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.dark-mode .form-container .checkbox {
    display: flex !important;
    align-items: center !important;
    margin: 10px 0 !important;
}

.dark-mode .form-container .checkbox label {
    margin-left: 8px !important;
    font-weight: bold !important;
}

.dark-mode .form-container .checkbox input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    appearance: none !important;
    border: 2px solid #718096 !important;
    border-radius: 3px !important;
    margin-right: 10px !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
    background: transparent !important;
}

/* Radio button styling for dark mode */
.dark-mode .form-container input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    appearance: none !important;
    border: 2px solid #718096 !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.dark-mode .form-container input[type="radio"]:checked {
    background-color: #ed8936 !important;
    border-color: #ed8936 !important;
    position: relative !important;
}

.dark-mode .form-container input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Bootstrap form-check-input styling for dark mode */
.dark-mode .form-check-input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    appearance: none !important;
    border: 2px solid #718096 !important;
    border-radius: 4px !important;
    margin-right: 10px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.dark-mode .form-check-input[type="checkbox"]:checked {
    background-color: #ed8936 !important;
    border-color: #ed8936 !important;
    position: relative !important;
}

.dark-mode .form-check-input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 6px !important;
    width: 6px !important;
    height: 12px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.dark-mode .form-check-input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    appearance: none !important;
    border: 2px solid #718096 !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.dark-mode .form-check-input[type="radio"]:checked {
    background-color: #ed8936 !important;
    border-color: #ed8936 !important;
    position: relative !important;
}

.dark-mode .form-check-input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.dark-mode .form-container .checkbox input[type="checkbox"]:checked {
    background-color: #ed8936 !important;
    border-color: #ed8936 !important;
    position: relative !important;
}

.dark-mode .form-container .checkbox input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 6px !important;
    width: 6px !important;
    height: 12px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
.dark-mode .form-control, .dark-mode input, .dark-mode textarea, .dark-mode select {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
}
.dark-mode .form-control:focus, .dark-mode input:focus, .dark-mode textarea:focus, .dark-mode select:focus {
    background: #4a5568 !important;
    color: #e8eaed !important;
    border: 1px solid #718096 !important;
    box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.1) !important;
}
.dark-mode label, .dark-mode .form-label {
    color: #e8eaed !important;
    font-weight: 500 !important;
}

/* Override any remaining purple text colors in dark mode */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: #e8eaed !important;
}

.dark-mode .form-container label,
.dark-mode .form-container h1,
.dark-mode .form-container h2,
.dark-mode .form-container h3,
.dark-mode .form-container h4,
.dark-mode .form-container h5,
.dark-mode .form-container h6 {
    color: #e8eaed !important;
}

/* Override any purple text that might be coming from light mode styles */
.dark-mode .form-container label,
.dark-mode .form-container span,
.dark-mode .form-container div,
.dark-mode .form-container p {
    color: #e8eaed !important;
}

/* Specific overrides for form text elements */
.dark-mode .form-container input[type="text"]::placeholder,
.dark-mode .form-container textarea::placeholder,
.dark-mode .form-container input::placeholder {
    color: #a0aec0 !important;
}

/* Override any remaining purple colors from light mode */
.dark-mode .form-container .checkbox label,
.dark-mode .form-container .form-check-label,
.dark-mode .form-container .form-label {
    color: #e8eaed !important;
}

/* Nuclear option - force all text in form container to be white */
.dark-mode .form-container,
.dark-mode .form-container * {
    color: #e8eaed !important;
}

/* But allow specific elements to have their intended colors */
.dark-mode .form-container input,
.dark-mode .form-container textarea,
.dark-mode .form-container select {
    color: #e8eaed !important;
}

.dark-mode .form-container input::placeholder,
.dark-mode .form-container textarea::placeholder {
    color: #a0aec0 !important;
}
.dark-mode .btn-new-topic, .dark-mode .btn-tertiary.btn-glow {
    background: #4299e1 !important;
    color: #ffffff !important;
    border: 1px solid #4299e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(66, 153, 225, 0.2) !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
}
.dark-mode .btn-new-topic:hover, .dark-mode .btn-tertiary.btn-glow:hover {
    background: #3182ce !important;
    color: #ffffff !important;
    border-color: #3182ce !important;
    box-shadow: 0 4px 8px rgba(66, 153, 225, 0.3) !important;
    transform: translateY(-1px) !important;
}
.dark-mode .form-text, .dark-mode .text-muted, .dark-mode .small {
    color: #a0aec0 !important;
}

/* Quill Editor styling for dark mode */
.dark-mode .ql-container {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.dark-mode .ql-editor {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border-radius: 0 0 8px 8px !important;
}

.dark-mode .ql-toolbar {
    background: #1a202c !important;
    border-radius: 8px 8px 0 0 !important;
}

.dark-mode .ql-toolbar button {
    color: #a0aec0 !important;
    background: transparent !important;
}

.dark-mode .ql-toolbar button:hover {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

.dark-mode .ql-toolbar button.ql-active {
    background: #4299e1 !important;
    color: #ffffff !important;
}

.dark-mode .ql-toolbar .ql-stroke {
    stroke: #a0aec0 !important;
}

.dark-mode .ql-toolbar .ql-fill {
    fill: #a0aec0 !important;
}

.dark-mode .ql-toolbar .ql-picker {
    color: #a0aec0 !important;
}

.dark-mode .ql-toolbar .ql-picker-options {
    background: #1a202c !important;
}

.dark-mode .ql-toolbar .ql-picker-item {
    color: #a0aec0 !important;
}

.dark-mode .ql-toolbar .ql-picker-item:hover {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

.dark-mode .ql-toolbar .ql-picker-label {
    color: #a0aec0 !important;
}

.dark-mode .ql-toolbar .ql-picker-label:hover {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

.dark-mode .ql-toolbar .ql-picker-label.ql-active {
    background: #4299e1 !important;
    color: #ffffff !important;
} 

/* QuillJS placeholder text styling for dark mode */
.dark-mode .ql-editor.ql-blank::before {
    color: #a0aec0 !important;
    font-style: italic !important;
}

/* Category/tag list styles for dark mode */
html.dark-mode .cat-list, body.dark-mode .cat-list, .dark-mode .cat-list {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #7c4bc9 !important;
    border-radius: 1.2em !important;
    font-weight: 600 !important;
    padding: 0.35em 1.2em !important;
    font-size: 1em !important;
    margin-right: 0.5em !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    transition: none !important;
}
html.dark-mode .cat-list.user, body.dark-mode .cat-list.user, .dark-mode .cat-list.user {
    background: transparent !important;
    color: #fff !important;
    border: 2.5px solid #7c4bc9 !important;
    border-radius: 1.2em !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    box-shadow: none !important;
    letter-spacing: 0.01em !important;
    padding: 0.35em 1.2em !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    position: relative !important;
}
html.dark-mode .cat-list.user .user-star, body.dark-mode .cat-list.user .user-star, .dark-mode .cat-list.user .user-star {
    color: #a97cff !important;
    margin-right: 0.3em !important;
    font-size: 1.1em !important;
    vertical-align: middle !important;
}

/* Button styling for dark mode */
.dark-mode .btn-primary:not(.dark-mode-toggle):not([type="submit"]), .dark-mode .btn-new-topic:not(.dark-mode-toggle), .dark-mode .btn-tertiary:not(.dark-mode-toggle), .dark-mode .btn-tertiary.btn-glow:not(.dark-mode-toggle), .dark-mode .btn-outline-orange:not(.dark-mode-toggle), .dark-mode .btn-edit-topic:not(.dark-mode-toggle), .dark-mode .btn-delete-topic:not(.dark-mode-toggle), .dark-mode .btn-duplicate-topic:not(.dark-mode-toggle), .dark-mode .btn-subscribe-topic:not(.dark-mode-toggle), .dark-mode .btn-pin-topic:not(.dark-mode-toggle) {
    border-radius: 0.5em !important;
    padding: 0.4em 1em !important;
    font-size: 1em !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Keep submit buttons filled in dark mode for Create, Edit, and Duplicate pages */
.dark-mode .form-container button[type="submit"].btn-primary {
    background: var(--accent-color) !important;
    color: #23244d !important;
    border: 2px solid #FF6B6B !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px 0 #0004 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s, transform 0.15s !important;
    padding: 0.45em 1.2em !important;
    font-size: 1.05em !important;
    outline: none !important;
}

/* Consistent comment background color in dark mode */
.dark-mode .MAIN_COMMENTS, html.dark-mode .MAIN_COMMENTS, body.dark-mode .MAIN_COMMENTS {
    background: #23272f !important;
    border-radius: 1em !important;
    border: 1px solid #3a3a4a !important;
    box-shadow: none !important;
    color: #fffbe6 !important;
    padding: 1.2em 1.5em !important;
    margin-bottom: 1.2em !important;
}

/* Ensure comment text content is white in dark mode - with maximum specificity */
.dark-mode .COMMENTS .MAIN_COMMENTS div, 
.dark-mode .COMMENTS .MAIN_COMMENTS p, 
.dark-mode .COMMENTS .MAIN_COMMENTS span,
.dark-mode .MAIN_COMMENTS div, 
.dark-mode .MAIN_COMMENTS p, 
.dark-mode .MAIN_COMMENTS span {
    color: #fff !important;
}

/* Override the broad color rule from site.css for dark mode with maximum specificity */
.dark-mode html, 
.dark-mode body, 
.dark-mode .sidebar, 
.dark-mode .navbar, 
.dark-mode .footer, 
.dark-mode #main-footer, 
.dark-mode .form-comments, 
.dark-mode .form-subcomments, 
.dark-mode .auth-container, 
.dark-mode .login-container, 
.dark-mode .CAT_LIST, 
.dark-mode .INFO, 
.dark-mode .CREATOR, 
.dark-mode .creator-name, 
.dark-mode .timestamp, 
.dark-mode .container, 
.dark-mode .main-content, 
.dark-mode #main-content, 
.dark-mode .COMMENTS, 
.dark-mode .comment-display, 
.dark-mode .subcomment-display, 
.dark-mode .edit-form, 
.dark-mode .edit-subcomment-form, 
.dark-mode .reply-btn-row, 
.dark-mode .form-control, 
.dark-mode label, 
.dark-mode input, 
.dark-mode textarea, 
.dark-mode select, 
.dark-mode p, 
.dark-mode div, 
.dark-mode ul, 
.dark-mode li, 
.dark-mode a {
    color: inherit !important;
}

/* Exception for modal content - ensure "x times" text is white in dark mode */
.dark-mode .contributors-modal span {
    color: white !important;
}

/* Force white color for all text content in dark mode comments with maximum specificity */
.dark-mode .COMMENTS div,
.dark-mode .COMMENTS p,
.dark-mode .COMMENTS span {
    color: #fff !important;
}

/* Maximum specificity override for comment text - target the exact structure */
.dark-mode .right-scrollable .COMMENTS .MAIN_COMMENTS div,
.dark-mode .right-scrollable .COMMENTS .MAIN_COMMENTS p,
.dark-mode .right-scrollable .COMMENTS .MAIN_COMMENTS span,
.dark-mode .main-content .COMMENTS .MAIN_COMMENTS div,
.dark-mode .main-content .COMMENTS .MAIN_COMMENTS p,
.dark-mode .main-content .COMMENTS .MAIN_COMMENTS span {
    color: #fff !important;
}

/* Nuclear option - force white color for all text in dark mode comments */
.dark-mode .COMMENTS *,
.dark-mode .MAIN_COMMENTS * {
    color: #fff !important;
}

/* Target the specific comment text content div */
.dark-mode .comment-text-content {
    color: #fff !important;
}

/* Force white color for comment text with maximum specificity */
.dark-mode .MAIN_COMMENTS .comment-text-content,
.dark-mode .COMMENTS .MAIN_COMMENTS .comment-text-content {
    color: #fff !important;
}

/* Responsive styling for Create Comment button in dark mode */
.dark-mode .create-comment-btn {
    white-space: nowrap;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    min-width: auto;
}

@media (max-width: 768px) {
    .dark-mode .create-comment-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        max-width: 120px;
    }
}

@media (max-width: 576px) {
    .dark-mode .create-comment-btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
        max-width: 100px;
    }
    
    .dark-mode .comments-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}
/* Fix button alignment/indent in comments */
.dark-mode .MAIN_COMMENTS .btn, .dark-mode .MAIN_COMMENTS button {
    margin-right: 0.5em !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.dark-mode .SUB_COMMENTS, html.dark-mode .SUB_COMMENTS, body.dark-mode .SUB_COMMENTS {
    position: relative;
    margin-left: 10% !important;
    padding: 20px !important;
    border: 1.5px solid #3a3f4a !important;
    cursor: pointer;
    background: #23272f !important;
    transition: all 0.3s ease;
    margin-bottom: 20px !important;
    color: #fffbe6 !important;
    box-shadow: none !important;
} 

body.dark-mode .report-block-link .fa-flag,
html.dark-mode .report-block-link .fa-flag,
.dark-mode .report-block-link .fa-flag {
    color: #fff !important;
}

/* Dark mode styles for ReportBlock page */
.dark-mode .report-block-container h2 {
    color: #e6e6fa !important;
}

.dark-mode .report-block-container .alert-success {
    background-color: #1a3d1a !important;
    border-color: #2d5a2d !important;
    color: #d4edda !important;
}

.dark-mode .report-block-container .alert-success strong {
    color: #d4edda !important;
}

.dark-mode .report-block-container .alert-success b {
    color: #fff !important;
}

.dark-mode .report-block-container .alert-success i {
    color: #c3e6cb !important;
}

.dark-mode .report-block-container .form-label {
    color: #e6e6fa !important;
}

.dark-mode .report-block-container .fw-bold {
    color: #f3f3fa !important;
}

.dark-mode .report-block-container .form-check-label {
    color: #e6e6fa !important;
}

.dark-mode .report-block-container .form-control {
    background-color: #2a2f3a !important;
    border-color: #3a3f4a !important;
    color: #e6e6fa !important;
}

.dark-mode .report-block-container .form-control:focus {
    background-color: #2a2f3a !important;
    border-color: #4a4f5a !important;
    color: #f3f3fa !important;
    box-shadow: 0 0 0 0.2rem rgba(230, 230, 250, 0.25) !important;
}

.dark-mode .report-block-container .form-control::placeholder {
    color: #a0a0a0 !important;
}

.dark-mode .report-block-container .btn-primary {
    background-color: #5A7FA7 !important;
    border-color: #5A7FA7 !important;
    color: #fff !important;
}

.dark-mode .report-block-container .btn-primary:hover {
    background-color: #4a6f97 !important;
    border-color: #4a6f97 !important;
    color: #fff !important;
}

.dark-mode .report-block-container .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.dark-mode .report-block-container .btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #fff !important;
}

.dark-mode .report-block-container .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.dark-mode .report-block-container .btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #fff !important;
} 

/* Dark mode styles for action buttons */
.dark-mode .action-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    border-radius: 6px !important;
    border: 1px solid #3a3f4a !important;
    background: transparent !important;
    color: #e6e6fa !important;
    font-size: 0.85rem !important;
}

.dark-mode .action-btn:hover {
    background: #3a3f4a !important;
    border-color: #4a4f5a !important;
    color: #f3f3fa !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Subtle hover effects for specific actions in dark mode */
.dark-mode .btn-delete-topic:hover {
    color: #e05ca4 !important;
    border-color: #e05ca4 !important;
}

.dark-mode .btn-edit-topic:hover {
    color: #f6c343 !important;
    border-color: #f6c343 !important;
}

.dark-mode .btn-duplicate-topic:hover {
    color: #a97cff !important;
    border-color: #a97cff !important;
}

.dark-mode .btn-subscribe-topic:hover {
    color: #5A7FA7 !important;
    border-color: #5A7FA7 !important;
}

.dark-mode .btn-pin-topic:hover {
    color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

.dark-mode .action-btn i {
    font-size: 0.8rem !important;
    line-height: 1 !important;
}

.dark-mode .topic-actions-bar {
    border-bottom: 1px solid #3a3f4a !important;
    gap: 4px !important;
}

/* Dark mode topic card styling */
.dark-mode .topic-card-clickable {
    position: relative !important;
    z-index: 1 !important;
}

.dark-mode .topic-card-clickable:hover {
    box-shadow: 0 4px 12px rgba(248, 249, 250, 0.12), 0 2px 6px rgba(240, 241, 242, 0.08) !important;
    transform: translateY(-2px) !important;
    z-index: 2 !important;
}

/* Ensure parent containers don't clip the glow in dark mode */
.dark-mode .col-lg-4,
.dark-mode .col-md-6 {
    padding: 12px !important;
    overflow: visible !important;
}

.dark-mode .row {
    overflow: visible !important;
}

/* Add extra padding to prevent glow clipping in dark mode */
.dark-mode .topic-card-clickable .card {
    margin: 4px !important;
    border-radius: 12px !important;
}

.dark-mode .edit-icon-link i {
    color: #A97CFF !important;
}

.dark-mode .edit-icon-link:hover i {
    color: #C2A5CF !important;
}

/* Dark mode styles for small icon badges */
.dark-mode .topic-title i[title*="Private"] {
    color: #6C3FA7 !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
}

.dark-mode .topic-title i[title*="Anonymous"] {
    color: #8e6dcf !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
}

.dark-mode .topic-title i[title*="Restricted"] {
    color: #e74c3c !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
}

.dark-mode .topic-title i[title*="Private"]:hover,
.dark-mode .topic-title i[title*="Anonymous"]:hover,
.dark-mode .topic-title i[title*="Restricted"]:hover {
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

/* Ensure toggle button doesn't cause layout shifts */
.dark-mode .dark-mode-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 32px !important;
    margin: 0 !important;
    padding: 4px !important;
    background: transparent !important;
    border: none !important;
}

/* Modal styling for dark mode */
.dark-mode {
    --modal-bg: #23244d !important;
    --modal-border: #3b387055 !important;
    --modal-text: #fff !important;
    --modal-text-secondary: #bfc4d1 !important;
    --modal-text-tertiary: #8e8e8e !important;
    --modal-item-bg: #2d3560 !important;
    --modal-accent: #f6c343 !important;
    --modal-button-bg: #f6c343 !important;
    --modal-button-text: #23244d !important;
    --modal-error: #e05ca4 !important;
}

/* Dark mode support for contributor profile links */
.dark-mode .contributor-name-link {
    color: #f3f3fa !important;
}

.dark-mode .contributor-name-link:hover {
    color: #ffe066 !important;
    text-decoration: underline !important;
}

.dark-mode .contributor-avatar-link:hover img {
    box-shadow: 0 4px 12px rgba(255, 224, 102, 0.3) !important;
}

/* Dark Mode Graph Toggle Styles */
.dark-mode .graph-toggle-btn {
    border-color: #444 !important;
    color: #444 !important;
    background: transparent !important;
}

.dark-mode .graph-toggle-btn:hover {
    background: #444 !important;
    color: #f3f3fa !important;
    box-shadow: 0 2px 8px rgba(68, 68, 68, 0.4) !important;
}

.dark-mode .graph-toggle-btn.active {
    background: #444 !important;
    color: #f3f3fa !important;
    box-shadow: 0 2px 8px rgba(68, 68, 68, 0.4) !important;
}

/* Dark Mode Bar Graph Styles */
.dark-mode #bar-graph .bar-label {
    fill: #f3f3fa !important;
}

.dark-mode #bar-graph svg text {
    fill: #f3f3fa !important;
}

.dark-mode #bar-graph svg .domain {
    stroke: #444 !important;
}

.dark-mode #bar-graph svg .tick line {
    stroke: #444 !important;
}

.dark-mode #bar-graph svg .tick text {
    fill: #f3f3fa !important;
}

/* Dark Mode Cluster Graph Styles */

.dark-mode .cluster-toggle-btn {
    border-color: var(--accent-color) !important;
    background: var(--bg-primary) !important;
    color: var(--accent-color) !important;
}

.dark-mode .cluster-toggle-btn.active,
.dark-mode .cluster-toggle-btn:hover {
    background: var(--accent-color) !important;
    color: var(--bg-primary) !important;
}

.dark-mode .cluster-toggle-btn.disabled {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .cluster-toggle-btn.disabled:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .stat-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .stat-card h4 {
    color: var(--accent-color) !important;
}

.dark-mode .stat-card p {
    color: var(--text-secondary) !important;
}

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

.dark-mode h2,
.dark-mode h3 {
    color: var(--text-primary) !important;
}

.dark-mode p {
    color: var(--text-secondary) !important;
}

/* Force dark backgrounds for cluster graph containers */
.dark-mode #clusters-visualization {
    background: var(--bg-primary) !important;
}

.dark-mode #user-clusters,
.dark-mode #word-clusters,
.dark-mode #tag-clusters,
.dark-mode #viewpoint-clusters {
    background: var(--bg-primary) !important;
}

.dark-mode #user-clusters-graph,
.dark-mode #word-clusters-graph,
.dark-mode #tag-clusters-graph,
.dark-mode #viewpoint-clusters-graph {
    background: var(--bg-primary) !important;
}

/* Override any remaining white backgrounds */
.dark-mode .btn-primary {
    background: var(--bg-secondary) !important;
    color: var(--accent-color) !important;
    border: 2px solid var(--accent-color) !important;
}

.dark-mode .btn-primary:hover {
    background: var(--accent-color) !important;
    color: var(--bg-primary) !important;
}

/* Dark mode styles for alert messages in cluster graphs */
.dark-mode .alert-info {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .alert-info h4 {
    color: var(--accent-color) !important;
}

.dark-mode .alert-info p {
    color: var(--text-secondary) !important;
}

/* Ensure all text in cluster graph areas is properly colored */
.dark-mode #clusters-visualization *,
.dark-mode #user-clusters *,
.dark-mode #word-clusters *,
.dark-mode #tag-clusters *,
.dark-mode #viewpoint-clusters * {
    color: var(--text-primary) !important;
}

.dark-mode #clusters-visualization p,
.dark-mode #user-clusters p,
.dark-mode #word-clusters p,
.dark-mode #tag-clusters p,
.dark-mode #viewpoint-clusters p {
    color: var(--text-secondary) !important;
}

/* Override hardcoded white backgrounds from site.css */
.dark-mode .auth-box,
.dark-mode .login-box {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .account-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .account-content p {
    color: var(--text-secondary) !important;
}

.dark-mode .navbar-toggler-icon {
    background-color: var(--text-primary) !important;
}

/* Override sidebar toggle button white background */
.dark-mode #sidebarToggle {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border: 2px solid #4a5568 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode #sidebarToggle::before {
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.9) 0%, rgba(74, 85, 104, 0.8) 100%) !important;
}

.dark-mode #sidebarToggle:hover {
    background: #4a5568 !important;
    border-color: #718096 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode #sidebarToggle i {
    color: #e2e8f0 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

.dark-mode #sidebarToggle:hover i {
    color: #f7fafc !important;
}

.dark-mode #user-clusters-graph svg,
.dark-mode #word-clusters-graph svg,
.dark-mode #tag-clusters-graph svg,
.dark-mode #viewpoint-clusters-graph svg {
    background: var(--svg-bg) !important;
}

/* Override any inline styles that might be setting white backgrounds */
.dark-mode svg[style*="background"] {
    background: var(--svg-bg) !important;
}

/* Comprehensive dark mode overrides for graph containers */
.dark-mode #user-clusters-graph,
.dark-mode #word-clusters-graph,
.dark-mode #tag-clusters-graph,
.dark-mode #viewpoint-clusters-graph {
    background: var(--bg-primary) !important;
}

.dark-mode #user-clusters-graph *,
.dark-mode #word-clusters-graph *,
.dark-mode #tag-clusters-graph *,
.dark-mode #viewpoint-clusters-graph * {
    background: var(--bg-primary) !important;
}

/* Force all SVGs in graph containers to have dark backgrounds */
.dark-mode #user-clusters-graph svg,
.dark-mode #word-clusters-graph svg,
.dark-mode #tag-clusters-graph svg,
.dark-mode #viewpoint-clusters-graph svg {
    background: var(--svg-bg) !important;
    background-color: var(--svg-bg) !important;
}

/* Nuclear option - override any remaining white backgrounds in graph areas */
.dark-mode #user-clusters-graph,
.dark-mode #word-clusters-graph,
.dark-mode #tag-clusters-graph,
.dark-mode #viewpoint-clusters-graph,
.dark-mode #clusters-visualization {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
}

/* --- Account Management Page Styles (Dark Mode) --- */

.dark-mode .account-management-container {
    background: #1a1a2e;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.dark-mode .account-management-sidebar {
    background: #16213e;
    border-right: 1px solid #2d3748;
    padding: 2rem;
    width: 280px;
    flex-shrink: 0;
}

.dark-mode .account-management-content {
    background: #1a1a2e;
    padding: 2.5rem;
    flex-grow: 1;
    overflow-y: auto;
}

.dark-mode .account-management-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #2d3748;
}

.dark-mode .account-management-title {
    color: #e2e8f0;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.dark-mode .account-management-back-icon {
    color: #a0aec0;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.dark-mode .account-management-back-icon:hover {
    color: #e2e8f0;
}

.dark-mode .account-management-nav {
    margin-top: 1rem;
}

.dark-mode .account-management-nav .nav-pills {
    border: none;
    background: transparent;
}

.dark-mode .account-management-nav .nav-link {
    color: #a0aec0;
    background: transparent;
    border: 1px solid #2d3748;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

.dark-mode .account-management-nav .nav-link:hover {
    color: #e2e8f0;
    background: #2d3748;
    border-color: #4a5568;
    transform: translateY(-1px);
}

.dark-mode .account-management-nav .nav-link.active {
    color: #e2e8f0;
    background: #4a5568;
    border-color: #718096;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark-mode .profile-section {
    background: #16213e;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid #2d3748;
}

.dark-mode .profile-section h3 {
    color: #e2e8f0;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.dark-mode .profile-picture-section {
    background: #495057;
    border: 2px dashed #6c757d;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.dark-mode .profile-picture-label {
    color: #a0aec0;
    font-weight: 500;
    margin-bottom: 1rem;
    display: block;
}

.dark-mode .profile-picture-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.dark-mode .profile-picture-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #4a5568;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dark-mode .profile-picture-preview:hover {
    border-color: #718096;
    transform: scale(1.05);
}

.dark-mode .profile-picture-upload-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4a5568;
    border: 2px solid #2d3748;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.dark-mode .profile-picture-upload-btn:hover {
    background: #718096;
    border-color: #a0aec0;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .profile-picture-upload-btn i {
    font-size: 1rem;
}

.dark-mode .account-form-field {
    margin-bottom: 1.5rem;
}

.dark-mode .account-form-field .form-control {
    background: #2d3748;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.dark-mode .account-form-field .form-control:focus {
    background: #2d3748;
    border-color: #718096;
    box-shadow: 0 0 0 0.2rem rgba(113, 128, 150, 0.25);
    color: #e2e8f0;
}

.dark-mode .account-form-field .form-label {
    color: #a0aec0;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.dark-mode .account-form-field .text-danger {
    color: #f56565;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.dark-mode .account-save-btn {
    background: #4a5568;
    border: none;
    color: #e2e8f0;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    cursor: pointer;
}

.dark-mode .account-save-btn:hover {
    background: #718096;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .account-save-btn:active {
    transform: translateY(0);
}

/* Modal Styles */
.dark-mode .account-modal .modal-content {
    background: #1a1a2e;
    border-radius: 12px;
    border: 1px solid #2d3748;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dark-mode .account-modal .modal-header {
    background: #16213e;
    border-bottom: 1px solid #2d3748;
    border-radius: 12px 12px 0 0;
    padding: 1.5rem;
}

.dark-mode .account-modal .modal-title {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 1.25rem;
}

.dark-mode .account-modal .modal-body {
    background: #1a1a2e;
    padding: 2rem;
}

.dark-mode .account-modal .modal-footer {
    background: #16213e;
    border-top: 1px solid #2d3748;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dark-mode .account-management-container {
        flex-direction: column;
        padding: 1rem;
    }
    
    .dark-mode .account-management-sidebar {
        width: 100%;
        margin-bottom: 1rem;
        border-radius: 12px;
        border-right: none;
    }
    
    .dark-mode .account-management-content {
        margin-left: 0;
        padding: 1.5rem;
    }
    
    .dark-mode .account-management-title {
        font-size: 2rem;
    }
    
    .dark-mode .profile-picture-preview {
        width: 100px;
        height: 100px;
    }
    
    .dark-mode .profile-picture-upload-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

/* Status Message */
.dark-mode .account-status-message {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.dark-mode .account-status-message.alert-success {
    background: #22543d;
    color: #9ae6b4;
    border: 1px solid #38a169;
}

.dark-mode .account-status-message.alert-danger {
    background: #742a2a;
    color: #feb2b2;
    border: 1px solid #e53e3e;
}

.dark-mode .account-status-message.alert-warning {
    background: #744210;
    color: #fbd38d;
    border: 1px solid #d69e2e;
}

.dark-mode .account-status-message.alert-info {
    background: #2a4365;
    color: #90cdf4;
    border: 1px solid #3182ce;
}

/* --- Graph Container Spacing (Dark Mode) --- */
.dark-mode #word-clusters-graph,
.dark-mode #user-clusters-graph,
.dark-mode #tag-clusters-graph,
.dark-mode #viewpoint-clusters-graph {
    margin: 3rem 0;
    padding: 2rem;
    min-height: 500px;
}

.dark-mode .cluster-view {
    margin-bottom: 4rem;
    padding: 2rem;
}

.dark-mode .cluster-view h3 {
    margin-bottom: 1.5rem;
    color: #e2e8f0;
}

.dark-mode .cluster-view p {
    margin-bottom: 2rem;
    color: #a0aec0;
}

/* --- Words Graph Specific Spacing (Dark Mode) --- */
.dark-mode #word-clusters-graph {
    margin: 4rem 0;
    padding: 3rem;
    min-height: 600px;
}

.dark-mode #word-clusters-graph svg {
    width: 100%;
    height: 100%;
    min-height: 550px;
}

/* Increase spacing for word nodes specifically in dark mode */
.dark-mode #word-clusters-graph circle[fill="#FF9500"] {
    r: 8px; /* Increase radius for word nodes */
}

/* Increase spacing for word cluster links in dark mode */
.dark-mode #word-clusters-graph line[stroke="#4ecdc4"] {
    stroke-width: 2px;
}

/* Additional spacing for word cluster container in dark mode */
.dark-mode #word-clusters {
    margin-bottom: 5rem;
    padding: 3rem;
}

.dark-mode #word-clusters h3 {
    margin-bottom: 2rem;
    color: #e2e8f0;
}

.dark-mode #word-clusters p {
    margin-bottom: 2.5rem;
    color: #a0aec0;
} 

/* Dark mode table styling for contributors page */
.dark-mode table,
.dark-mode table th,
.dark-mode table td,
.dark-mode table thead,
.dark-mode table tbody,
.dark-mode table tr {
    color: #f5f5dc !important; /* Creamy off-white instead of pure white */
}

/* Specific styling for table headers */
.dark-mode table th {
    color: #f5f5dc !important;
    font-weight: 600 !important;
}

/* Specific styling for table data cells */
.dark-mode table td {
    color: #f5f5dc !important;
}

/* Ensure all text in contributors table is creamy off-white */
.dark-mode .contributors-table,
.dark-mode .contributors-table th,
.dark-mode .contributors-table td,
.dark-mode .contributors-table thead,
.dark-mode .contributors-table tbody,
.dark-mode .contributors-table tr {
    color: #f5f5dc !important;
}

/* Override any Bootstrap table styles that might be setting white text */
.dark-mode .table,
.dark-mode .table th,
.dark-mode .table td,
.dark-mode .table thead,
.dark-mode .table tbody,
.dark-mode .table tr {
    color: #f5f5dc !important;
}

/* Ensure any specific contributor-related elements also use creamy off-white */
.dark-mode .contributor-name,
.dark-mode .contributor-email,
.dark-mode .contributor-count,
.dark-mode .contributor-time {
    color: #f5f5dc !important;
}

/* Restrict tags styling for dark mode - ensure proper display behavior */
.dark-mode #restrictTagsDiv {
    /* Don't override display property - let JavaScript control it */
    background: transparent !important;
    color: #e8eaed !important;
}

.dark-mode #restrictTagsDiv input[type="checkbox"] {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #e8eaed !important;
}

.dark-mode #restrictTagsDiv span {
    color: #e8eaed !important;
}

/* More specific selector to ensure display behavior works */
.dark-mode .form-container #restrictTagsDiv,
.dark-mode .checkbox#restrictTagsDiv {
    /* Ensure JavaScript can control display property */
    background: transparent !important;
    color: #e8eaed !important;
}

/* Force display behavior for restrict tags in dark mode */
.dark-mode #restrictTagsDiv[style*="display: none"] {
    display: none !important;
}

.dark-mode #restrictTagsDiv[style*="display: block"] {
    display: block !important;
}

/* Ensure restrict tags div respects JavaScript display changes in dark mode */
.dark-mode #restrictTagsDiv.checkbox {
    background: transparent !important;
    color: #e8eaed !important;
}

/* Login input fields styling for dark mode */
.dark-mode .login-box input[type="text"],
.dark-mode .login-box input[type="password"],
.dark-mode .login-box input[type="email"],
.dark-mode .auth-box input[type="text"],
.dark-mode .auth-box input[type="password"],
.dark-mode .auth-box input[type="email"] {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a5568 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
}

.dark-mode .login-box input[type="text"]:focus,
.dark-mode .login-box input[type="password"]:focus,
.dark-mode .login-box input[type="email"]:focus,
.dark-mode .auth-box input[type="text"]:focus,
.dark-mode .auth-box input[type="password"]:focus,
.dark-mode .auth-box input[type="email"]:focus {
    background: #4a5568 !important;
    border-color: #718096 !important;
    box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.1) !important;
}

.dark-mode .login-box input[type="text"]::placeholder,
.dark-mode .login-box input[type="password"]::placeholder,
.dark-mode .login-box input[type="email"]::placeholder,
.dark-mode .auth-box input[type="text"]::placeholder,
.dark-mode .auth-box input[type="password"]::placeholder,
.dark-mode .auth-box input[type="email"]::placeholder {
    color: #a0aec0 !important;
}

/* Exclude form-floating inputs from the above rules */
.dark-mode .login-box .form-floating input[type="text"]::placeholder,
.dark-mode .login-box .form-floating input[type="password"]::placeholder,
.dark-mode .login-box .form-floating input[type="email"]::placeholder,
.dark-mode .auth-box .form-floating input[type="text"]::placeholder,
.dark-mode .auth-box .form-floating input[type="password"]::placeholder,
.dark-mode .auth-box .form-floating input[type="email"]::placeholder {
    color: transparent !important;
}

/* Ensure form-floating inputs in auth boxes have proper dark styling */
.dark-mode .auth-box .form-floating .form-control,
.dark-mode .login-box .form-floating .form-control {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode .auth-box .form-floating .form-control:focus,
.dark-mode .login-box .form-floating .form-control:focus {
    background: #4a5568 !important;
    border-color: #718096 !important;
    box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.1) !important;
}

    /* Dark mode input styling */
    .dark-mode .form-control {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
        border: 1px solid #4a5568 !important;
        border-radius: 8px !important;
    }
    
    .dark-mode .form-control:focus {
        background-color: #4a5568 !important;
        border-color: #718096 !important;
        box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.1) !important;
    }
    
    .dark-mode .form-control::placeholder {
        color: #a0aec0 !important;
    }
    
    /* Override for form-floating in dark mode */
    .dark-mode .form-floating .form-control::placeholder {
        color: transparent !important;
    }
    
    .dark-mode .form-floating .form-control::-moz-placeholder {
        color: transparent !important;
    }
    
    /* Dark mode error messages and links */
    .dark-mode .text-danger {
        color: #ffffff !important;
    }
    
    .dark-mode #forgot-password,
    .dark-mode #Kaleedo-SignUp {
        color: #ffffff !important;
    }
    
    .dark-mode #forgot-password:hover,
    .dark-mode #Kaleedo-SignUp:hover {
        color: #e2e8f0 !important;
    }

    /* Dark mode navigation tabs styling */
    .dark-mode .nav-tabs .nav-link {
        color: #ffffff !important;
    }
    
    .dark-mode .nav-tabs .nav-link:hover {
        color: #e2e8f0 !important;
    }
    
    .dark-mode .nav-tabs .nav-link.active {
        color: #ffffff !important;
        background-color: transparent !important;
    }
    

/* Dark mode dropdown and select styling */
.dark-mode .form-control, .dark-mode input, .dark-mode textarea, .dark-mode select {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
}

.dark-mode .form-control:focus, .dark-mode input:focus, .dark-mode textarea:focus, .dark-mode select:focus {
    background: #4a5568 !important;
    color: #e8eaed !important;
    border: 1px solid #718096 !important;
    box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.1) !important;
}

/* Custom dropdown styling for dark mode */
.dark-mode #dropdownSummaryBar {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode #dropdownMenu {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #e8eaed !important;
}

.dark-mode #dropdownMenu .dropdown-item {
    color: #e8eaed !important;
    background: transparent !important;
}

.dark-mode #customAreaInput {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode #customAreaInput:focus {
    background: #4a5568 !important;
    border-color: #718096 !important;
}

.dark-mode #dropdownSummaryPlaceholder {
    color: #a0aec0 !important;
}

/* File input styling for dark mode */
.dark-mode input[type="file"] {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode input[type="file"]:focus {
    background: #4a5568 !important;
    border-color: #718096 !important;
}

/* Select dropdown styling */
.dark-mode select {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode select:focus {
    background: #4a5568 !important;
    border-color: #718096 !important;
}

/* Dropdown menu styling */
.dark-mode .dropdown-menu {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #e8eaed !important;
}

.dark-mode .dropdown-item {
    color: #e8eaed !important;
}

.dark-mode .dropdown-item:hover,
.dark-mode #dropdownMenu .dropdown-item:hover,
.dark-mode #dropdownMenu div:hover,
.dark-mode #dropdownMenu label:hover {
    background: #4a5568 !important;
    color: #ffffff !important;
}

/* Form select styling */
.dark-mode .form-select {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode .form-select:focus {
    background: #4a5568 !important;
    border-color: #718096 !important;
}

/* Comment form dropdown styling for dark mode */
.dark-mode .form-comments select,
.dark-mode .form-editcomment select,
.dark-mode .form-subcomments select {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
    border-radius: 0.25rem !important;
}

.dark-mode .form-comments select:focus,
.dark-mode .form-editcomment select:focus,
.dark-mode .form-subcomments select:focus {
    background: #4a5568 !important;
    border-color: #718096 !important;
    box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.1) !important;
}

/* Topic form specific styling */
.dark-mode .form-container select,
.dark-mode .form-container .form-select {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode .form-container select:focus,
.dark-mode .form-container .form-select:focus {
    background: #4a5568 !important;
    border-color: #718096 !important;
}

/* Nuclear option - override any remaining white backgrounds */
.dark-mode *[style*="background: #fff"],
.dark-mode *[style*="background:#fff"],
.dark-mode *[style*="background: white"],
.dark-mode *[style*="background:white"] {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

/* Specific styling for dropdown options */
.dark-mode #dropdownMenu div,
.dark-mode #dropdownMenu label,
.dark-mode #dropdownMenu input[type="checkbox"] {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

.dark-mode #dropdownMenu input[type="checkbox"]:checked {
    background: #4B266A !important;
    border-color: #4B266A !important;
}

/* Select option styling */
.dark-mode select option {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

.dark-mode select option:hover {
    background: #4a5568 !important;
    color: #ffffff !important;
}

/* Override any inline white backgrounds */
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background:white"],
.dark-mode [style*="background: white"] {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

/* Comment dropdown styling for dark mode */
.dark-mode [id^="categoriesDropdownMenu-"],
.dark-mode [id^="userTagsDropdownMenu-"] {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #e8eaed !important;
}

.dark-mode [id^="categoriesDropdownMenu-"] div,
.dark-mode [id^="userTagsDropdownMenu-"] div,
.dark-mode [id^="categoriesDropdownMenu-"] label,
.dark-mode [id^="userTagsDropdownMenu-"] label {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

.dark-mode [id^="categoriesDropdownMenu-"] input[type="checkbox"],
.dark-mode [id^="userTagsDropdownMenu-"] input[type="checkbox"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.dark-mode [id^="categoriesDropdownMenu-"] input[type="checkbox"]:checked,
.dark-mode [id^="userTagsDropdownMenu-"] input[type="checkbox"]:checked {
    background: #4B266A !important;
    border-color: #4B266A !important;
}

/* Tag elements styling for dark mode */
.dark-mode .tag-item,
.dark-mode .category-item,
.dark-mode .user-tag-item {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
}

/* User-generated tags styling */
.dark-mode .user-generated-tag,
.dark-mode .custom-tag {
    background: #2d3748 !important;
    color: #e8eaed !important;
    border: 1px solid #4a5568 !important;
}

/* Override any remaining white backgrounds in dropdowns */
.dark-mode [id^="categoriesDropdownMenu-"] *,
.dark-mode [id^="userTagsDropdownMenu-"] * {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

/* Tag list elements for clusters table - Dark mode support */
.dark-mode .tag-list-container {
    background: #182133 !important;
    color: #f3f3fa !important;
}

.dark-mode .tag-list-title {
    color: #f3f3fa !important;
}

.dark-mode .tag-list {
    background: #182133 !important;
    color: #f3f3fa !important;
}

.dark-mode .tag-list-item {
    background: #182133 !important;
    color: #f3f3fa !important;
    border-bottom: 1px solid #23244d !important;
}

.dark-mode .tag-list-item:last-child {
    border-bottom: none !important;
}

.dark-mode .tag-name {
    color: #f3f3fa !important;
}

.dark-mode .tag-count {
    background-color: #4B266A !important;
    color: #ffffff !important;
}

.dark-mode .tag-list-scrollable {
    background: #182133 !important;
    border: 1px solid #23244d !important;
    color: #f3f3fa !important;
}

.dark-mode .tag-list-scrollable::-webkit-scrollbar-track {
    background: #182133 !important;
}

.dark-mode .tag-list-scrollable::-webkit-scrollbar-thumb {
    background: #4a5568 !important;
}

.dark-mode .tag-list-scrollable::-webkit-scrollbar-thumb:hover {
    background: #6c757d !important;
}

/* Dark mode styles for clusters layout */
.dark-mode #clusters-table-section {
    background: #182133 !important;
}

.dark-mode .cluster-view {
    background: #182133 !important;
    color: #f3f3fa !important;
}

.dark-mode .cluster-view h3 {
    color: #f3f3fa !important;
}

.dark-mode .cluster-view p {
    color: #bfc4d1 !important;
}

/* Dark mode styles for search results */
.dark-mode .list-group {
    background: #182133 !important;
    border: 1px solid #23244d !important;
    border-radius: 8px !important;
}

.dark-mode .list-group-item {
    background: #182133 !important;
    color: #f3f3fa !important;
    border: 1px solid #23244d !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
}

.dark-mode .list-group-item:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.dark-mode .list-group-item:last-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.dark-mode .list-group-item:hover {
    background: #23244d !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .list-group-item-action {
    color: #f3f3fa !important;
    text-decoration: none !important;
}

.dark-mode .list-group-item-action:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.dark-mode .list-group-item-action:focus {
    color: #fff !important;
    background: #23244d !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 224, 102, 0.25) !important;
}

.dark-mode .alert {
    background: #182133 !important;
    color: #f3f3fa !important;
    border: 1px solid #23244d !important;
    border-radius: 8px !important;
}

.dark-mode .alert-warning {
    background: #744210 !important;
    color: #fbd38d !important;
    border: 1px solid #d69e2e !important;
}

.dark-mode .alert-info {
    background: #2a4365 !important;
    color: #90cdf4 !important;
    border: 1px solid #3182ce !important;
}

.dark-mode .alert-success {
    background: #22543d !important;
    color: #9ae6b4 !important;
    border: 1px solid #38a169 !important;
}

.dark-mode .alert-danger {
    background: #742a2a !important;
    color: #feb2b2 !important;
    border: 1px solid #e53e3e !important;
}

/* Search results page specific styling */
.dark-mode h2.text-center {
    color: #f3f3fa !important;
    text-shadow: 0 2px 8px #23244d55 !important;
}

.dark-mode .text-center {
    color: #f3f3fa !important;
}

.dark-mode .mb-4 {
    color: #f3f3fa !important;
}

/* Delete button for unofficial subject areas - simple x without border (dark mode) */
.dark-mode .delete-unofficial-area {
    background: none !important;
    border: none !important;
    color: #ff6b6b !important;
    font-size: 1.2em !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: none !important;
}

.dark-mode .delete-unofficial-area:hover {
    background: none !important;
    border: none !important;
    color: #ff8e8e !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Remove hover effects from subject areas (dark mode) */
.dark-mode .area-badge:hover,
.dark-mode .badge:hover,
.dark-mode .user-badge:hover {
    transform: none !important;
    box-shadow: none !important;
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
}

/* Remove glow from expected contributors info (dark mode) */
.dark-mode .expected-contributors-info {
    text-shadow: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* Dark mode form-floating placeholder fix */
.dark-mode .form-floating .form-control::placeholder {
    color: transparent !important;
}

.dark-mode .form-floating .form-control::-moz-placeholder {
    color: transparent !important;
}

.dark-mode .auth-box .form-floating .form-control::placeholder,
.dark-mode .login-box .form-floating .form-control::placeholder {
    color: transparent !important;
}

.dark-mode .auth-box .form-floating .form-control::-moz-placeholder,
.dark-mode .login-box .form-floating .form-control::-moz-placeholder {
    color: transparent !important;
}

/* Override site.css login-box rules with more specific dark mode selectors */
.dark-mode .login-box .form-floating .form-control,
.dark-mode .login-box .form-floating input[type="text"],
.dark-mode .login-box .form-floating input[type="password"] {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.25rem !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    font-size: 1rem !important;
}

.dark-mode .login-box .form-floating .form-control:focus,
.dark-mode .login-box .form-floating input[type="text"]:focus,
.dark-mode .login-box .form-floating input[type="password"]:focus {
    background: #4a5568 !important;
    color: #e2e8f0 !important;
    border: 1px solid #718096 !important;
    box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.1) !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    font-size: 1rem !important;
}

/* Override the general login-box form-control rules from site.css */
.dark-mode .login-box .form-control {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.25rem !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    font-size: 1rem !important;
}

.dark-mode .login-box .form-control:focus {
    background: #4a5568 !important;
    color: #e2e8f0 !important;
    border: 1px solid #718096 !important;
    box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.1) !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    font-size: 1rem !important;
}

/* jQuery UI Autocomplete dropdown dark mode styling */
.dark-mode .ui-autocomplete {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
}

.dark-mode .ui-autocomplete .ui-menu-item {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border: none !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.dark-mode .ui-autocomplete .ui-menu-item:hover,
.dark-mode .ui-autocomplete .ui-menu-item.ui-state-focus {
    background: #4a5568 !important;
    color: #ffffff !important;
    border: none !important;
}

.dark-mode .ui-autocomplete .ui-menu-item div {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
}

/* User Profile Page Dark Mode Styling */
.dark-mode .profile-tabs .nav-tabs .nav-link,
.dark-mode .profile-tabs .nav-tabs .nav-link.active {
    color: #ff6b6b !important;
    background: transparent !important;
    font-weight: 600 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: border-color 0.2s !important;
}

.dark-mode .profile-tabs .nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background: transparent !important;
    border-color: transparent !important;
}

.dark-mode .profile-tabs .nav-tabs .nav-link.active {
    border-bottom: 2.5px solid #ff6b6b !important;
    background: transparent !important;
    color: #ff6b6b !important;
}

.dark-mode .user-activity-card,
.dark-mode .user-contrib-card {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.dark-mode .user-activity-body,
.dark-mode .user-contrib-body {
    color: #e2e8f0 !important;
}

.dark-mode .user-activity-card a,
.dark-mode .user-contrib-card a {
    color: #ff6b6b !important;
    text-decoration: none !important;
}

.dark-mode .user-activity-card a:hover,
.dark-mode .user-contrib-card a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.dark-mode .userprofile-badge {
    background: #FF8C42 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.2em 0.6em !important;
    border-radius: 0.5em !important;
    font-size: 0.65em !important;
    font-weight: 500 !important;
}

.dark-mode .private-badge {
    background: #e53e3e !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.2em 0.6em !important;
    border-radius: 0.5em !important;
    font-size: 0.65em !important;
    font-weight: 500 !important;
}

.dark-mode .tab-content {
    color: #e2e8f0 !important;
}

.dark-mode .tab-pane {
    background: transparent !important;
}

.dark-mode .card {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #e2e8f0 !important;
}

.dark-mode .card-title {
    color: #ffffff !important;
}

.dark-mode .card-text {
    color: #a0aec0 !important;
}

.dark-mode .text-muted {
    color: #a0aec0 !important;
}

.dark-mode .btn-outline-primary {
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
    background: transparent !important;
}

.dark-mode .btn-outline-primary:hover {
    color: #ffffff !important;
    background: #ff6b6b !important;
    border-color: #ff6b6b !important;
}

.dark-mode .btn-tertiary {
    background: #4a5568 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode .btn-tertiary:hover {
    background: #718096 !important;
    color: #ffffff !important;
    border-color: #718096 !important;
}

.dark-mode hr {
    border-color: #4a5568 !important;
}

.dark-mode .text-center h4 {
    color: #e2e8f0 !important;
}

/* Nuclear option - override any remaining white backgrounds */
.dark-mode *[style*="background: #fff"],
.dark-mode *[style*="background:#fff"],
.dark-mode *[style*="background: white"],
.dark-mode *[style*="background:white"] {
    background: #2d3748 !important;
    color: #e8eaed !important;
}

/* Nuclear option for chart areas - prevent any white backgrounds */
.dark-mode [id*="chart"] *[style*="background: #fff"],
.dark-mode [id*="chart"] *[style*="background:#fff"],
.dark-mode [id*="chart"] *[style*="background: white"],
.dark-mode [id*="chart"] *[style*="background:white"],
.dark-mode [id*="graph"] *[style*="background: #fff"],
.dark-mode [id*="graph"] *[style*="background:#fff"],
.dark-mode [id*="graph"] *[style*="background: white"],
.dark-mode [id*="graph"] *[style*="background:white"],
.dark-mode [class*="chart"] *[style*="background: #fff"],
.dark-mode [class*="chart"] *[style*="background:#fff"],
.dark-mode [class*="chart"] *[style*="background: white"],
.dark-mode [class*="chart"] *[style*="background:white"],
.dark-mode [class*="graph"] *[style*="background: #fff"],
.dark-mode [class*="graph"] *[style*="background:#fff"],
.dark-mode [class*="graph"] *[style*="background: white"],
.dark-mode [class*="graph"] *[style*="background:white"] {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* Clean carousel styling - light mode overrides */
body.light-mode .related-carousel-card {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .related-carousel-outer,
body.light-mode .related-carousel-track,
body.light-mode .topicview-related-carousel-wrapper {
    background: #F7F0FA !important; /* Match the body background */
    background-color: #F7F0FA !important;
}

body.light-mode .related-carousel-arrow {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
    color: #212529 !important;
}

body.light-mode .related-carousel-img,
body.light-mode .related-carousel-title {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
}

body.light-mode .related-carousel-title {
    color: #000000 !important;
}



/* Maximum specificity override for light mode carousel */
html body.light-mode .related-carousel-card,
html body.light-mode .related-carousel-card *,
html body.light-mode .related-carousel-card *::before,
html body.light-mode .related-carousel-card *::after {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
    color: #212529 !important;
}

html body.light-mode .related-carousel-outer,
html body.light-mode .related-carousel-track,
html body.light-mode .topicview-related-carousel-wrapper {
    background: #F7F0FA !important; /* Match the body background */
    background-color: #F7F0FA !important;
}

html body.light-mode .related-carousel-arrow {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
    color: #212529 !important;
}

html body.light-mode .related-carousel-img,
html body.light-mode .related-carousel-title {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
}

html body.light-mode .related-carousel-title {
    color: #000000 !important;
}

/* Light mode carousel styling - soft purple background */
html body.light-mode .related-carousel-card {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .create-comment-btn:hover {
    background: #2d1a4d !important;
}

/* Individual graph preview variations for light mode */
body.light-mode .related-carousel-card:nth-child(1) .graph-preview-img {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
}

body.light-mode .related-carousel-card:nth-child(1):hover .graph-preview-img {
    background: linear-gradient(135deg, #ee5a24 0%, #ff6b6b 100%) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
}

body.light-mode .related-carousel-card:nth-child(2) .graph-preview-img {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%) !important;
}

body.light-mode .related-carousel-card:nth-child(2):hover .graph-preview-img {
    background: linear-gradient(135deg, #44a08d 0%, #4ecdc4 100%) !important;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3) !important;
}

body.light-mode .related-carousel-card:nth-child(3) .graph-preview-img {
    background: linear-gradient(135deg, #45b7d1 0%, #96c93d 100%) !important;
}

body.light-mode .related-carousel-card:nth-child(3):hover .graph-preview-img {
    background: linear-gradient(135deg, #96c93d 0%, #45b7d1 100%) !important;
    box-shadow: 0 4px 12px rgba(69, 183, 209, 0.3) !important;
}

body.light-mode .related-carousel-card:nth-child(4) .graph-preview-img {
    background: linear-gradient(135deg, #a55eea 0%, #26de81 100%) !important;
}

body.light-mode .related-carousel-card:nth-child(4):hover .graph-preview-img {
    background: linear-gradient(135deg, #26de81 0%, #a55eea 100%) !important;
    box-shadow: 0 4px 12px rgba(165, 94, 234, 0.3) !important;
}

body.light-mode .related-carousel-card:nth-child(5) .graph-preview-img {
    background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%) !important;
}

body.light-mode .related-carousel-card:nth-child(5):hover .graph-preview-img {
    background: linear-gradient(135deg, #fdcb6e 0%, #fd79a8 100%) !important;
    box-shadow: 0 4px 12px rgba(253, 121, 168, 0.3) !important;
}

/* Ensure all insights icons are white in light mode - comprehensive targeting */
body.light-mode .graph-preview-img i,
body.light-mode .related-carousel-card .graph-preview-img i,
body.light-mode [id*="insights"] .graph-preview-img i,
body.light-mode [id*="insights-carousel"] .graph-preview-img i,
body.light-mode [class*="insights"] .graph-preview-img i,
body.light-mode .insights-carousel .graph-preview-img i,
body.light-mode #insights-carousel-track .graph-preview-img i,
body.light-mode .carousel-card .graph-preview-img i,
body.light-mode .card .graph-preview-img i {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

/* Additional targeting for any carousel cards in light mode */
body.light-mode .carousel-card,
body.light-mode [class*="carousel"] .card,
body.light-mode [id*="carousel"] .card {
    background: #F7F0FA !important;
    background-color: #F7F0FA !important;
}

body.light-mode .carousel-card .graph-preview-img,
body.light-mode [class*="carousel"] .card .graph-preview-img,
body.light-mode [id*="carousel"] .card .graph-preview-img {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Ensure all insights icons are white in dark mode - comprehensive targeting */
.dark-mode .graph-preview-img i,
.dark-mode .related-carousel-card .graph-preview-img i,
.dark-mode [id*="insights"] .graph-preview-img i,
.dark-mode [id*="insights-carousel"] .graph-preview-img i,
.dark-mode [class*="insights"] .graph-preview-img i,
.dark-mode .insights-carousel .graph-preview-img i,
.dark-mode #insights-carousel-track .graph-preview-img i,
.dark-mode .carousel-card .graph-preview-img i,
.dark-mode .card .graph-preview-img i {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

/* Force gradient backgrounds for insights preview images in dark mode */
.dark-mode .graph-preview-img,
.dark-mode .related-carousel-card .graph-preview-img,
.dark-mode [id*="insights"] .graph-preview-img,
.dark-mode [id*="insights-carousel"] .graph-preview-img,
.dark-mode [class*="insights"] .graph-preview-img,
.dark-mode .insights-carousel .graph-preview-img,
.dark-mode #insights-carousel-track .graph-preview-img,
.dark-mode .carousel-card .graph-preview-img,
.dark-mode .card .graph-preview-img {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Individual gradient variations for dark mode insights */
.dark-mode .related-carousel-card:nth-child(1) .graph-preview-img,
.dark-mode [id*="insights"] .related-carousel-card:nth-child(1) .graph-preview-img,
.dark-mode [id*="insights-carousel"] .related-carousel-card:nth-child(1) .graph-preview-img {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(2) .graph-preview-img,
.dark-mode [id*="insights"] .related-carousel-card:nth-child(2) .graph-preview-img,
.dark-mode [id*="insights-carousel"] .related-carousel-card:nth-child(2) .graph-preview-img {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(3) .graph-preview-img,
.dark-mode [id*="insights"] .related-carousel-card:nth-child(3) .graph-preview-img,
.dark-mode [id*="insights-carousel"] .related-carousel-card:nth-child(3) .graph-preview-img {
    background: linear-gradient(135deg, #45b7d1 0%, #96c93d 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(4) .graph-preview-img,
.dark-mode [id*="insights"] .related-carousel-card:nth-child(4) .graph-preview-img,
.dark-mode [id*="insights-carousel"] .related-carousel-card:nth-child(4) .graph-preview-img {
    background: linear-gradient(135deg, #a55eea 0%, #26de81 100%) !important;
}

.dark-mode .related-carousel-card:nth-child(5) .graph-preview-img,
.dark-mode [id*="insights"] .related-carousel-card:nth-child(5) .graph-preview-img,
.dark-mode [id*="insights-carousel"] .related-carousel-card:nth-child(5) .graph-preview-img {
    background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%) !important;
}

/* Dark mode delete comment button styling */
.dark-mode .btn-deleteComment {
    color: #ffffff !important; /* White color in dark mode */
    transition: color 0.3s ease !important;
}

.dark-mode .btn-deleteComment:hover {
    color: #ff4444 !important; /* Red color on hover in dark mode */
}

/* Also apply to subcomment delete button for consistency */
.dark-mode .btn-deleteSubcomment {
    color: #ffffff !important; /* White color in dark mode */
    transition: color 0.3s ease !important;
}

.dark-mode .btn-deleteSubcomment:hover {
    color: #ff4444 !important; /* Red color on hover in dark mode */
}

/* Light mode styles for tags and viewpoints in comments */
body.light-mode .COMMENTS .cat-list {
    background: #ede3fa !important;
    color: #7c4bc9 !important;
    border-radius: 1.2em !important;
    font-weight: 600 !important;
    padding: 0.35em 1.2em !important;
    font-size: 1em !important;
    margin-right: 0.5em !important;
    letter-spacing: 0.03em !important;
    display: inline-block !important;
    border: none !important;
    transition: background 0.2s, color 0.2s, border 0.2s !important;
}

body.light-mode .COMMENTS .cat-list.user {
    background: #f6f0ff !important;
    color: #a97cff !important;
    border: 1.5px solid #a97cff !important;
    position: relative !important;
}

body.light-mode .COMMENTS .cat-list.user .user-star {
    color: #a97cff !important;
    margin-right: 0.3em !important;
    font-size: 1.1em !important;
    vertical-align: middle !important;
}

/* Light mode styles for viewpoints in comments */
body.light-mode .COMMENTS b {
    color: #2C0E3A !important;
    font-weight: 600 !important;
}

/* Ensure viewpoint text is visible in light mode */
body.light-mode .COMMENTS b + span,
body.light-mode .COMMENTS b + br + span,
body.light-mode .COMMENTS b + br + * {
    color: #2C0E3A !important;
    font-weight: 500 !important;
}

/* Target the actual viewpoint text that comes after the "Viewpoint" label */
body.light-mode .COMMENTS b:contains("Viewpoint") + *,
body.light-mode .COMMENTS b:contains("Viewpoint") ~ * {
    color: #2C0E3A !important;
    font-weight: 500 !important;
}

/* Specific styling for viewpoint text in comments */
body.light-mode .COMMENTS .viewpoint-text,
body.light-mode .COMMENTS .stance-desc {
    color: #2C0E3A !important;
    font-weight: 500 !important;
}

body.light-mode .COMMENTS .CAT_ROW {
    margin: 0.5em 0 !important;
    padding: 0.25em 0 !important;
}

/* Light mode styles for comment text content */
body.light-mode .COMMENTS p,
body.light-mode .COMMENTS .no-comments-message {
    color: #2C0E3A !important;
}

body.light-mode .comment-text-content {
    color: #2C0E3A !important;
}

body.light-mode .MAIN_COMMENTS .comment-text-content,
body.light-mode .COMMENTS .MAIN_COMMENTS .comment-text-content {
    color: #2C0E3A !important;
}

body.light-mode .comments-header,
body.light-mode .topicview-attributions-label,
body.light-mode .contributors-label {
    color: #3d2067 !important;
    font-weight: 600 !important;
}

body.light-mode .area-label { color: #3d2067 !important; }
body.light-mode .subject-areas-title { color: #3d2067 !important; }
body.light-mode .related-section-title { color: #3d2067 !important; }
body.light-mode .comments-header { color: #3d2067 !important; }
body.light-mode .topicview-contributors-label, 
body.light-mode .contributors-label { color: #3d2067 !important; }

body.light-mode .comments-header, 
body.light-mode .topicview-contributors-label, 
body.light-mode .contributors-label {
    color: #3d2067 !important;
    font-weight: 600 !important;
}

body.light-mode .creator-name,
body.light-mode .creator-name-link {
    color: #2C0E3A !important;
    font-weight: 600 !important;
}

body.light-mode .timestamp,
body.light-mode .text-muted,
body.light-mode .date,
body.light-mode .small,
body.light-mode .text-secondary {
    color: #6c757d !important;
}

body.light-mode .form-comments,
body.light-mode .form-subcomments {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

body.light-mode .form-comments label,
body.light-mode .form-subcomments label {
    color: #2C0E3A !important;
    font-weight: 600 !important;
}

body.light-mode .form-comments input[type="text"],
body.light-mode .form-subcomments input[type="text"],
body.light-mode .form-comments textarea,
body.light-mode .form-subcomments textarea {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #2C0E3A !important;
}

body.light-mode .form-comments input[type="text"]:focus,
body.light-mode .form-subcomments input[type="text"]:focus,
body.light-mode .form-comments textarea:focus,
body.light-mode .form-subcomments textarea:focus {
    border-color: #7c4bc9 !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 75, 201, 0.25) !important;
}

body.light-mode .form-comments button[type="submit"],
body.light-mode .form-subcomments button[type="submit"] {
    background: #7c4bc9 !important;
    border-color: #7c4bc9 !important;
    color: #ffffff !important;
}

body.light-mode .form-comments button[type="submit"]:hover,
body.light-mode .form-subcomments button[type="submit"]:hover {
    background: #6c3fa7 !important;
    border-color: #6c3fa7 !important;
}

body.light-mode .MAIN_COMMENTS .btn,
body.light-mode .SUB_COMMENTS .btn {
    background: #7c4bc9 !important;
    border-color: #7c4bc9 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 0.9em !important;
    transition: all 0.3s ease !important;
}

body.light-mode .MAIN_COMMENTS .btn:hover,
body.light-mode .SUB_COMMENTS .btn:hover {
    background: #6c3fa7 !important;
    border-color: #6c3fa7 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(124, 75, 201, 0.3) !important;
}

body.light-mode .create-comment-btn {
    background: #7c4bc9 !important;
    border-color: #7c4bc9 !important;
    color: #ffffff !important;
}

body.light-mode .create-comment-btn:hover {
    background: #6c3fa7 !important;
    border-color: #6c3fa7 !important;
}

body.light-mode .ql-container {
    background: #ffffff !important;
    color: #2C0E3A !important;
}

body.light-mode .ql-editor {
    background: #ffffff !important;
    color: #2C0E3A !important;
}

body.light-mode .ql-editor p {
    color: #2C0E3A !important;
}

body.light-mode .ql-editor * {
    color: #2C0E3A !important;
}

/* Light Mode Styling for Topic Cluster Graph */
body.light-mode .cluster-toggle-container {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

body.light-mode .cluster-toggle-btn {
    padding: 10px 20px !important;
    border: 2px solid #7c4bc9 !important;
    background: #ffffff !important;
    color: #7c4bc9 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

body.light-mode .cluster-toggle-btn.active,
body.light-mode .cluster-toggle-btn:hover {
    background: #7c4bc9 !important;
    color: #ffffff !important;
}

body.light-mode .cluster-toggle-btn.disabled {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

body.light-mode .cluster-toggle-btn.disabled:hover {
    background: #f8f9fa !important;
    color: #6c757d !important;
}

body.light-mode .stat-card {
    background: #7c4bc9 !important;
    border: 1px solid #7c4bc9 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(124, 75, 201, 0.2) !important;
}

body.light-mode .stat-card h4 {
    color: #ffffff !important;
    font-size: 2rem !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

body.light-mode .stat-card p {
    margin: 5px 0 0 0 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

body.light-mode .clusters-layout {
    position: relative !important;
    width: 100% !important;
    height: 800px !important;
    display: flex !important;
    margin-bottom: 20px !important;
}

body.light-mode .clusters-table-sidebar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 300px !important;
    height: 400px !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    border: 1px solid #dee2e6 !important;
}

body.light-mode .clusters-graph-area {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

body.light-mode .clusters-graph-area .cluster-view {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

body.light-mode .clusters-graph-area .cluster-view h3 {
    margin-top: 0 !important;
    padding-top: 10px !important;
    color: #2C0E3A !important;
}

body.light-mode .table-toggle-container {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 20 !important;
}

body.light-mode .table-toggle-btn {
    background: rgba(124, 75, 201, 0.9) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.light-mode .table-toggle-btn:hover {
    background: rgba(124, 75, 201, 1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}

body.light-mode .table-toggle-btn:active {
    transform: scale(0.98) !important;
}

body.light-mode .clusters-table-sidebar.hidden {
    transform: translateX(100%) !important;
    opacity: 0 !important;
}

body.light-mode .clusters-table-sidebar {
    transition: all 0.3s ease !important;
}

body.light-mode .clusters-graph-area.full-width {
    padding-left: 0 !important;
}

body.light-mode #clusters-table-section {
    padding: 15px !important;
}

body.light-mode #clusters-table-section .tag-list-container {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    border: 1px solid #dee2e6 !important;
    max-width: 100% !important;
    height: 100% !important;
}

body.light-mode #clusters-table-section .tag-list-scrollable {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
}

body.light-mode .tag-list-title {
    color: #2C0E3A !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    font-size: 1.1em !important;
}

body.light-mode .tag-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.light-mode .tag-list-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    background: #f8f9fa !important;
    border-radius: 6px !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.2s ease !important;
}

body.light-mode .tag-list-item:last-child {
    margin-bottom: 0 !important;
}

body.light-mode .tag-name {
    color: #2C0E3A !important;
    font-weight: 500 !important;
}

body.light-mode .tag-count {
    background: #7c4bc9 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
}

body.light-mode .tag-list-scrollable::-webkit-scrollbar {
    width: 6px !important;
}

body.light-mode .tag-list-scrollable::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
}

body.light-mode .tag-list-scrollable::-webkit-scrollbar-thumb {
    background: #7c4bc9 !important;
    border-radius: 3px !important;
}

body.light-mode .tag-list-scrollable::-webkit-scrollbar-thumb:hover {
    background: #6c3fa7 !important;
}

body.light-mode .cluster-view {
    display: none !important;
}

body.light-mode .cluster-view.active {
    display: block !important;
}

body.light-mode .alert-info {
    background: #e3f2fd !important;
    border: 1px solid #bbdefb !important;
    color: #1976d2 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

body.light-mode .alert-info h4 {
    color: #1565c0 !important;
    margin-bottom: 10px !important;
}

body.light-mode .alert-info p {
    color: #1976d2 !important;
    margin: 0 !important;
}

body.light-mode #clusters-visualization *,
body.light-mode #clusters-visualization h1,
body.light-mode #clusters-visualization h2,
body.light-mode #clusters-visualization h3,
body.light-mode #clusters-visualization h4,
body.light-mode #clusters-visualization h5,
body.light-mode #clusters-visualization h6 {
    color: #2C0E3A !important;
}

body.light-mode #clusters-visualization p,
body.light-mode #clusters-visualization span,
body.light-mode #clusters-visualization div,
body.light-mode #clusters-visualization label {
    color: #2C0E3A !important;
}

/* Light mode styles for ReportBlock page spacing */
body.light-mode .report-block-container {
    margin-bottom: 80px !important;
    padding-bottom: 30px !important;
}

body.light-mode .report-block-container form {
    margin-bottom: 60px !important;
    padding-bottom: 20px !important;
}

body.light-mode .report-block-container .alert-success {
    margin-bottom: 60px !important;
}

body.light-mode .report-block-container .btn {
    margin-bottom: 20px !important;
}

body.light-mode .report-block-container form .btn,
body.light-mode .report-block-container .btn-primary {
    margin-bottom: 30px !important;
}

/* Enhanced styling for ReportBlock buttons to make them prettier in dark mode */
.dark-mode .report-block-container .btn-primary,
.dark-mode .report-block-container .btn-danger,
.dark-mode .report-block-container .btn-secondary {
    padding: 14px 28px !important;
    margin: 10px 6px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.dark-mode .report-block-container .btn-primary:hover,
.dark-mode .report-block-container .btn-danger:hover,
.dark-mode .report-block-container .btn-secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .report-block-container .btn-primary:active,
.dark-mode .report-block-container .btn-danger:active,
.dark-mode .report-block-container .btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Special styling for the Cancel button (unblock button) */
.dark-mode .report-block-container .btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.dark-mode .report-block-container .btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%) !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Enhanced styling for the Submit button */
.dark-mode .report-block-container .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.dark-mode .report-block-container .btn-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
    border-color: #bd2130 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Enhanced styling for the Close button (success state) */
.dark-mode .report-block-container .btn-primary {
    background: linear-gradient(135deg, #5A7FA7 0%, #4a6f97 100%) !important;
    border-color: #5A7FA7 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.dark-mode .report-block-container .btn-primary:hover {
    background: linear-gradient(135deg, #4a6f97 0%, #3d5f87 100%) !important;
    border-color: #4a6f97 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Add bottom margin to the form to separate from footer */
.dark-mode .report-block-container form {
    margin-bottom: 60px !important;
    padding-bottom: 20px !important;
}

/* Add bottom margin to the success message container */
.dark-mode .report-block-container .alert-success {
    margin-bottom: 60px !important;
}

/* Add bottom margin to the entire report block container */
.dark-mode .report-block-container {
    margin-bottom: 80px !important;
    padding-bottom: 30px !important;
}

/* Ensure buttons have proper spacing from footer */
.dark-mode .report-block-container .btn {
    margin-bottom: 20px !important;
}

/* Add extra bottom margin specifically for the button container */
.dark-mode .report-block-container form .btn,
.dark-mode .report-block-container .btn-primary {
    margin-bottom: 30px !important;
}

/* Dark mode styles for action buttons */

/* Dark mode form error styling for create/edit/duplicate forms */
.dark-mode .form-error {
    color: #ff0000 !important;
    font-size: 0.95em !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    text-shadow: 0 0 3px rgba(255, 0, 0, 0.5) !important;
    animation: errorPulse 2s infinite !important;
}

/* Ensure error messages appear below input boxes in dark mode */
.dark-mode .form-container .text-danger,
.dark-mode .form-container span[class*="text-danger"],
.dark-mode .form-container div[id*="RequiredMsg"] {
    display: block !important;
    color: #ff0000 !important;
    font-size: 0.95em !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    text-shadow: 0 0 3px rgba(255, 0, 0, 0.5) !important;
    animation: errorPulse 2s infinite !important;
}

/* Override Bootstrap's text-danger for form containers in dark mode */
.dark-mode .form-container .text-danger {
    color: #ff0000 !important;
}

/* Dark mode error messages and links */
.dark-mode .text-danger {
    color: #ff0000 !important;
}

/* Dark mode attribution badge styling */
.dark-mode .attributionDiv {
    background-color: #1e3a5f !important;
    color: #64b5f6 !important;
    border-color: #42a5f5 !important;
}

.dark-mode .attributionDiv:hover {
    background-color: #1565c0 !important;
    border-color: #2196f3 !important;
}

.dark-mode .categoryDiv, .dark-mode .badge, .dark-mode .area-badge, .dark-mode .official-badge, .dark-mode .user-badge {
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px;
}

/* Enhanced dark mode styling for categoryDiv */
.dark-mode .categoryDiv {
    background: transparent !important;
    color: #a97cff !important;
    border: 1.5px solid #a97cff !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 1.2em !important;
    padding: 0.35em 1.2em !important;
    font-size: 1em !important;
    margin-right: 0.5em !important;
    letter-spacing: 0.03em !important;
    transition: background 0.2s, color 0.2s, border 0.2s !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
}

.dark-mode .categoryDiv:hover {
    background: rgba(169, 124, 255, 0.1) !important;
    color: #c4a7ff !important;
    border-color: #c4a7ff !important;
    transform: scale(1.02) !important;
}

.dark-mode .expected-contributors-info {
    color: #ffffff;
    text-shadow: none;
}

/* Dark mode styling for tagList */
.dark-mode #tagList {
    margin-bottom: 1rem;
}

.dark-mode #tagList .categoryDiv {
    background: transparent !important;
    color: #a97cff !important;
    border: 1.5px solid #a97cff !important;
}

.dark-mode #tagList .categoryDiv:hover {
    background: rgba(169, 124, 255, 0.1) !important;
    color: #c4a7ff !important;
    border-color: #c4a7ff !important;
}

/* Dark mode styling for attributions */
.dark-mode #AttributionsList .categoryDiv {
    background: transparent !important;
    color: #a97cff !important;
    border: 1.5px solid #a97cff !important;
}

.dark-mode #AttributionsList .categoryDiv:hover {
    background: rgba(169, 124, 255, 0.1) !important;
    color: #c4a7ff !important;
    border-color: #c4a7ff !important;
}