/* ==========================================================================
   Dark Mode Theme
   Applied via body.dark-mode class. Dark mode is the default.
   Elements that are ALREADY dark (footer, spotlight, video-sectionTop,
   contentPreview-body, Page-sectionDarkBackground, Home-LargeGrayHero)
   are left unchanged.
   The yellow header bar is also left unchanged.
   ========================================================================== */


/* --- Toggle Button in Header --- */

.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

.dark-mode-toggle svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.dark-mode-toggle .icon-sun { display: none; }
.dark-mode-toggle .icon-moon { display: block; }
body.dark-mode .dark-mode-toggle .icon-sun { display: block; }
body.dark-mode .dark-mode-toggle .icon-moon { display: none; }

@media (min-width: 992px) {
    .dark-mode-toggle svg {
        width: 24px;
        height: 24px;
    }
}


/* ==========================================================================
   Core Dark Mode Overrides
   ========================================================================== */

body.dark-mode {
    background-color: #181818;
    color: #e0e0e0;
}

/* Page wrapper */
body.dark-mode .Page {
    background-color: #181818;
}

/* Cards (grid view, horizontal/list view, wall view) */
body.dark-mode .Card,
body.dark-mode .view-grid,
body.dark-mode .view-horizontal,
body.dark-mode .view-wall {
    background-color: #242424;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode a.Card {
    color: #e0e0e0;
}

/* Feed hover */
body.dark-mode .view-feed .view-horizontal:hover {
    background-color: #2a2a2a;
    border-color: #444;
}

/* Synthetic cards (author/director search results) */
body.dark-mode .synthetic-card {
    background-color: #242424;
    border-color: #444;
}
body.dark-mode .synthetic-card:hover {
    background-color: #1e3a5f;
    border-color: #4a9eff;
}
body.dark-mode .synthetic-name {
    color: #e0e0e0;
}
body.dark-mode .synthetic-card-horizontal {
    background-color: #242424;
    border-color: #444;
}
body.dark-mode .synthetic-card-horizontal:hover {
    background-color: #1e3a5f;
    border-color: #4a9eff;
}
body.dark-mode .synthetic-horizontal-name {
    color: #e0e0e0;
}


/* ==========================================================================
   Typography & Links
   ========================================================================== */

/* Content item names/titles — brighter white for readability */
body.dark-mode .content-name a,
body.dark-mode .content-name a:visited {
    color: #fefefe;
}
body.dark-mode .content-name a:hover {
    color: #6db3f2;
}

/* Slider item names — brighter white for better contrast */
body.dark-mode .Slider-itemName {
    color: #f0f0f0;
}

/* Standard slider card dark mode */
body.dark-mode .Slider:not(.Slider-spotlight):not(.Slider-cardView) .Slider-itemInner {
    background-color: #242424;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode .Slider:not(.Slider-spotlight):not(.Slider-cardView) .Slider-item a {
    color: #e0e0e0;
}
body.dark-mode .Slider:not(.Slider-spotlight):not(.Slider-cardView) .Slider-item a:hover {
    color: #6db3f2;
}

/* General link color */
body.dark-mode a {
    color: #6db3f2;
}
body.dark-mode a.btn {
    color: #fff;
}
body.dark-mode a:visited {
    color: #6db3f2;
}
body.dark-mode a:hover {
    color: #8ec8ff;
}

/* Green section titles — slightly brighter in dark mode */
body.dark-mode .Page-sectionTitle {
    color: #7dcc86;
}

/* Black section titles — bright in dark mode */
body.dark-mode .Page-sectionTitleBlack,
body.dark-mode .Page-sectionTitleBlackLoadMore {
    color: #f0f0f0;
}

body.dark-mode .Page-sectionTitleLink,
body.dark-mode .Page-sectionTitleLink:visited {
    color: #6db3f2;
}
body.dark-mode .Page-sectionTitleLink:hover {
    color: #8ec8ff;
    text-decoration: underline;
}

/* Content info (grey meta text) */
body.dark-mode .content-info {
    color: #999;
}
body.dark-mode .content-info a {
    color: #999;
}
body.dark-mode .content-info a:hover {
    color: #e0e0e0;
}

/* Info text */
body.dark-mode .info-text-1 a {
    color: #f0f0f0;
}

/* Muted, gray, dark-gray text helpers */
body.dark-mode .gray,
body.dark-mode .Gray,
body.dark-mode .LightGray {
    color: #999;
}
body.dark-mode .DarkGray,
body.dark-mode .DarkGray a,
body.dark-mode .DarkGray a:visited {
    color: #bbb;
}
body.dark-mode .DarkGray a:hover {
    color: #6db3f2;
}
body.dark-mode .GrayLinks a,
body.dark-mode .GrayLinks a:visited {
    color: #999;
}
body.dark-mode .GrayLinks a:hover {
    color: #6db3f2;
}

body.dark-mode .black,
body.dark-mode .black a,
body.dark-mode .black a:visited,
body.dark-mode a.black,
body.dark-mode a.black:visited,
body.dark-mode a.link-black,
body.dark-mode a.link-black:visited {
    color: #e0e0e0;
}

body.dark-mode a.link-dark-gray,
body.dark-mode a.link-dark-gray:visited {
    color: #bbb;
}

/* User text (article body) */
body.dark-mode .user-text h1 a,
body.dark-mode .user-text h1 a:visited {
    color: #e0e0e0;
}
body.dark-mode .user-text hr,
body.dark-mode .ck-content hr {
    background-color: #444;
}
body.dark-mode .user-text blockquote,
body.dark-mode .ck-content blockquote {
    border-left-color: #888;
}

/* Checkbox/radio labels */
body.dark-mode .checkbox label,
body.dark-mode .radio label {
    color: #e0e0e0;
}


/* ==========================================================================
   Backgrounds & Surfaces
   ========================================================================== */

/* Light gray backgrounds → dark */
body.dark-mode .LightGrayBackground {
    background-color: #242424;
}
body.dark-mode .GrayBackground {
    background-color: #2a2a2a;
}

/* Form sections */
body.dark-mode .form-section {
    background-color: #222;
}

/* Page section backgrounds — match body bg in dark mode */
body.dark-mode .Page-sectionGrayBackground,
body.dark-mode .Page-sectionYellowBackground {
    background-color: #181818;
}

/* Lines / dividers */
body.dark-mode .line {
    background-color: #3a3a3a;
}
body.dark-mode .line-dark {
    background-color: #555;
}


/* ==========================================================================
   Header — Yellow Bar Unchanged, Dropdown Menus Inverted
   ========================================================================== */

/* Dropdown menus */
body.dark-mode .Header-dropDownMenu {
    background-color: #2a2a2a;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
body.dark-mode .Header-dropDownMenu a,
body.dark-mode .Header-dropDownMenu a:visited {
    color: #ccc;
}
body.dark-mode .Header-dropDownMenu a:hover {
    color: #6db3f2;
    background-color: #333;
}
body.dark-mode .Header-dropDownMenu a:active,
body.dark-mode .Header-dropDownMenu a:focus {
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    text-decoration: underline;
}

/* Desktop explore menu */
body.dark-mode #desktopExploreMenu {
    background-color: #2a2a2a;
}
body.dark-mode #desktopExploreMenu.Header-dropDownMenu .ExploreMenu-list a:hover {
    background-color: #333;
    color: #6db3f2;
}

/* Topics dropdown menu — same styling as other header dropdowns */
body.dark-mode #topicsMenu .ExploreMenu-list a {
    color: #ccc;
}
body.dark-mode #topicsMenu .ExploreMenu-list a:hover {
    background-color: #333;
    color: #6db3f2;
}
body.dark-mode #topicsMenu .Page-sectionTitleBlack {
    color: #f0f0f0;
}

/* Mobile explore menu */
body.dark-mode #mobileExploreMenu .ExploreMenu-list a:hover {
    background-color: #333;
}

/* Mobile nav collapse */
body.dark-mode .navbar-collapse {
    background-color: #2a2a2a;
}
body.dark-mode .Header .navbar-collapse a {
    color: #ccc;
    -webkit-tap-highlight-color: transparent;
}
body.dark-mode .Header .navbar-collapse a:active,
body.dark-mode .Header .navbar-collapse a:focus {
    background-color: transparent;
    text-decoration: underline;
}
body.dark-mode .navbar-nav li {
    border-bottom-color: #3a3a3a;
}
body.dark-mode .navbar-nav a {
    color: #ccc;
}

/* Profile page link-menu tabs (Activity, Articles) — match nav-pills styling */
body.dark-mode .link-menu a,
body.dark-mode .link-menu a:visited {
    color: #ccc;
    border-right-color: #555;
}
body.dark-mode .link-menu a:hover {
    color: #fff;
    text-decoration: none;
}
body.dark-mode .link-menu a.active {
    color: #fff;
}

/* Profile — User Activity modal */
body.dark-mode .profile-admin-history-subtitle {
    color: #e0e0e0;
}
body.dark-mode .profile-admin-history-year {
    color: #ccc;
}
body.dark-mode .profile-admin-history-toggle {
    color: #6db3f2;
}
body.dark-mode .profile-admin-history-table td {
    color: #ccc;
}
body.dark-mode .profile-admin-history-title-link {
    color: #6db3f2;
}
body.dark-mode .profile-admin-user-email,
body.dark-mode .profile-admin-user-email-wrapper {
    color: #999;
}
body.dark-mode .profile-admin-history #userActivityPanel {
    background: #2a2a2a;
    border-color: #444;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* About page side-menu — match explore menu dark mode styling */
body.dark-mode .side-menu a,
body.dark-mode .side-menu a:visited {
    color: #ccc;
}
body.dark-mode .side-menu a:hover {
    color: #6db3f2;
    background-color: #333;
}
body.dark-mode span.selectedSubjectTag,
body.dark-mode span.selectedSubjectTag a,
body.dark-mode span.selectedSubjectTag a:hover,
body.dark-mode span.selectedSubjectTag a:visited,
body.dark-mode a.selectedSubjectTag,
body.dark-mode a.selectedSubjectTag:hover,
body.dark-mode a.selectedSubjectTag:visited {
    color: #fff;
    background: none;
}

/* Explore menu donate area */
body.dark-mode .ExploreMenu-donate {
    background-color: #1a5c4a;
}
body.dark-mode .ExploreMenu-donate .Page-sectionTitle {
    color: #e0e0e0;
}

/* Explore menu section title color */
body.dark-mode .ExploreMenu .Page-sectionTitle {
    color: #7dcc86;
}

/* Mobile menu explore */
body.dark-mode #mobileExploreMenu {
    background-color: #2a2a2a;
}
body.dark-mode #mobileExploreMenu .ExploreMenu-list a {
    color: #ccc;
}

/* Mobile login menu */
body.dark-mode .Header-mobileLogInMenu {
    background-color: #2a2a2a;
}


/* ==========================================================================
   Search Modal — Already partially dark, make card dark
   ========================================================================== */

body.dark-mode .search-modal-content {
    background-color: #2a2a2a;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
body.dark-mode .HeaderQuickSearch #textBoxSiteSearch {
    color: #e0e0e0 !important;
    border-bottom-color: #888 !important;
}
body.dark-mode .HeaderQuickSearch #textBoxSiteSearch:focus {
    border-bottom-color: #6db3f2 !important;
}
body.dark-mode .HeaderQuickSearch #textBoxSiteSearch::placeholder {
    color: #888;
}
body.dark-mode .HeaderQuickSearch-searchIcon {
    filter: invert(0); /* Icon is white; on dark bg, keep it white */
}
body.dark-mode .search-result-title {
    color: #e0e0e0;
}
body.dark-mode .search-result-type-line {
    color: #999;
}
body.dark-mode .search-result-subtitle {
    color: #999;
}
body.dark-mode .siteSearchResult:hover,
body.dark-mode .siteSearchResult.HeaderQuickSearch-itemHover {
    background: #333;
}
body.dark-mode .search-result-img-placeholder.search-result-icon-placeholder {
    background-color: #333;
}


/* ==========================================================================
   Bootstrap & Forms
   ========================================================================== */

/* Form controls */
body.dark-mode .form-control {
    background-color: #2a2a2a;
    border-color: #555;
    color: #e0e0e0;
}
body.dark-mode .form-control:focus {
    border-color: #6db3f2;
    box-shadow: 0 0 0 2px rgba(109,179,242,0.15);
}

/* Panels */
body.dark-mode .panel {
    background-color: #242424;
    border-color: #444;
}
body.dark-mode .panel-default > .panel-heading {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}
body.dark-mode .panel-body {
    background-color: #242424;
}

/* Wells */
body.dark-mode .well {
    background-color: #222;
    border-color: #444;
}

/* Tables */
body.dark-mode .table > thead > tr > th,
body.dark-mode .table > thead > tr > td {
    border-bottom-color: #444;
}
body.dark-mode .table > tbody > tr > td,
body.dark-mode .table > tbody > tr > th {
    border-top-color: #3a3a3a;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #222;
}
body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #2a2a2a;
}

/* Alerts */
body.dark-mode .alert-info {
    background-color: #1a3350;
    border-color: #2a4a6a;
    color: #8ec8ff;
}
body.dark-mode .alert-success {
    background-color: #1a3d1a;
    border-color: #2a5a2a;
    color: #7dcc86;
}
body.dark-mode .alert-warning {
    background-color: #3d3a1a;
    border-color: #5a5522;
    color: #e0d080;
}
body.dark-mode .alert-danger {
    background-color: #3d1a1a;
    border-color: #5a2a2a;
    color: #e08080;
}

/* Modals (Bootstrap) */
body.dark-mode .modal-content {
    background-color: #2a2a2a;
    border-color: #444;
}
body.dark-mode .modal-header {
    border-bottom-color: #3a3a3a;
    color: #e0e0e0;
}
body.dark-mode .modal-footer {
    border-top-color: #3a3a3a;
}
body.dark-mode .modal-title {
    color: #e0e0e0;
}
body.dark-mode .close {
    color: #ccc;
    text-shadow: none;
    opacity: 0.7;
}
body.dark-mode .close:hover {
    color: #fff;
    opacity: 1;
}

/* Pagination */
body.dark-mode .pagination > li > a,
body.dark-mode .pagination > li > span {
    background-color: #2a2a2a;
    border-color: #444;
    color: #6db3f2;
}
body.dark-mode .pagination > li > a:hover {
    background-color: #333;
    border-color: #555;
}
body.dark-mode .pagination > .active > a,
body.dark-mode .pagination > .active > span {
    background-color: #6db3f2;
    border-color: #6db3f2;
    color: #fff;
}


/* ==========================================================================
   Buttons (Bootstrap)
   ========================================================================== */

/* btn-primary: keep white text (not the default dark-mode body blue) */
body.dark-mode .btn-primary {
    color: #fff;
}
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active {
    color: #fff;
}

/* btn-default: inverse of light mode — medium grey bg, light text */
body.dark-mode .btn-default {
    background-color: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}
body.dark-mode .btn-default:hover {
    background-color: #4a4a4a;
    border-color: #666;
    color: #fff;
}
body.dark-mode .btn-default:focus,
body.dark-mode .btn-default.focus {
    background-color: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}
body.dark-mode .btn-default:active,
body.dark-mode .btn-default.active {
    background-color: #4a4a4a;
    border-color: #666;
    color: #fff;
}

/* btn-default icons (glyphicons) should match text color */
body.dark-mode .btn-default .glyphicon {
    color: inherit;
}

/* btn-link in dark mode */
body.dark-mode .btn-link {
    color: #6db3f2;
}
body.dark-mode .btn-link:hover {
    color: #8ec8ff;
}

/* btn-group / button-set (Sort/View toggles on library page, my list page) */
body.dark-mode .btn-group .btn-default {
    background-color: #181818;
    border-color: #555;
    color: #ccc;
}
body.dark-mode .btn-group .btn-default:hover {
    background-color: #333;
    color: #fff;
}
body.dark-mode .btn-group .btn-default.active,
body.dark-mode .btn-group .btn-primary {
    background-color: #3a3a3a;
    border-color: #555;
    color: #fff;
}

/* Library filter pills — base (uncolored) pills only */
body.dark-mode .library-filter .btn {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: transparent;
}
body.dark-mode .library-filter .btn:hover {
    background-color: #4a4a4a;
    color: #fff;
}

/* Colored pills keep their colors in dark mode */
body.dark-mode .library-filter-pills .btn[data-filter-type="search"],
body.dark-mode .library-filter-pills .btn[data-filter-type="topic"] {
    background-color: #0073fa;
    color: #fff;
}
body.dark-mode .library-filter-pills .btn[data-filter-type="search"]:hover,
body.dark-mode .library-filter-pills .btn[data-filter-type="topic"]:hover {
    background-color: #338ff7;
}
body.dark-mode .library-filter-pills .btn[data-filter-type="category"] {
    background-color: #0094ff;
    color: #fff;
}
body.dark-mode .library-filter-pills .btn[data-filter-type="category"]:hover {
    background-color: #33a9ff;
}
body.dark-mode .library-filter-pills .btn[data-filter-value="evergreen"] {
    background-color: #6fba78;
    color: #fff;
}
body.dark-mode .library-filter-pills .btn[data-filter-value="evergreen"]:hover {
    background-color: #8ccb93;
}

/* Library sort/view btn-primary override (these are styled grey in light mode) */
body.dark-mode .library-sort .btn-primary,
body.dark-mode .library-view .btn-primary {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #555;
}

/* Explore by Subject links on homepage and content pages — keep blue */
body.dark-mode .topics-multicol a {
    color: #6db3f2;
}
body.dark-mode .topics-multicol a:hover {
    color: #8ec8ff;
}

/* Subject tag buttons below video/article content */
body.dark-mode .contentInfo-topic-tag {
    background-color: rgba(255,255,255,0.1);
    color: #ccc;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    margin: 2px 4px 2px 0;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.15s ease;
}
body.dark-mode .contentInfo-topic-tag:hover {
    background-color: rgba(255,255,255,0.18);
    color: #fff;
    text-decoration: none;
}


/* ==========================================================================
   Content Preview Popup — Body is already dark (#222), info bar needs inversion
   ========================================================================== */

body.dark-mode .contentPreview {
    background-color: #242424;
}
body.dark-mode .contentPreview-articleText {
    background-color: #242424;
    color: #e0e0e0;
}

/* Content action menu (3-dot popup) */
body.dark-mode .content-action-menu {
    background: #2a2a2a;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
body.dark-mode .content-action-menu-option {
    color: #e0e0e0;
}
body.dark-mode .content-action-menu-option:hover,
body.dark-mode .content-action-menu-option:focus {
    background-color: #333;
}

/* ==========================================================================
   Info & Share Standalone Modals (dark mode)
   The blue Copy button stays the same — matches content preview inline share.
   ========================================================================== */

/* Shared modal background & close button */
body.dark-mode .contentInfo-modal,
body.dark-mode .contentShare-modal {
    background: #242424;
}
body.dark-mode .contentInfo-modal .contentPreview-close,
body.dark-mode .contentShare-modal .contentPreview-close {
    background: rgba(255,255,255,0.1);
    color: #e0e0e0;
}
body.dark-mode .contentInfo-modal .contentPreview-close:hover,
body.dark-mode .contentShare-modal .contentPreview-close:hover {
    background: rgba(255,255,255,0.2);
}

/* Info modal */
body.dark-mode .contentInfo-title {
    color: #e0e0e0;
}
body.dark-mode .contentInfo-table {
    color: #ccc;
}
body.dark-mode .contentInfo-table td {
    border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-mode .contentInfo-table td:first-child {
    color: #e0e0e0;
}
body.dark-mode .contentInfo-table td:last-child {
    color: #ccc;
}
body.dark-mode .contentInfo-table a {
    color: #6db3f2;
}

/* Share modal */
body.dark-mode .contentShare-title {
    color: #e0e0e0;
}
body.dark-mode .contentShare-copyLink {
    border-top-color: rgba(255,255,255,0.1);
}
body.dark-mode .contentShare-copyLink-input {
    background: #1a1a1a;
    border-color: #444;
    color: #e0e0e0;
}
body.dark-mode .contentShare-copyLink-input:focus {
    border-color: #6db3f2;
    background: #1a1a1a;
}


/* ==========================================================================
   Slider Action Button Backgrounds
   ========================================================================== */

body.dark-mode .Slider .content-action-trigger,
body.dark-mode .Slider .Slider-itemAction {
    background-color: #242424;
}
body.dark-mode .Slider .content-action-trigger:hover,
body.dark-mode .Slider .Slider-itemAction:hover {
    background-color: #333;
}

/* Trending card view: match dark card background */
body.dark-mode .Slider-cardView .content-action-trigger,
body.dark-mode .Slider-cardView .Slider-itemAction,
body.dark-mode .Slider-itemCard .content-action-trigger,
body.dark-mode .Slider-itemCard .Slider-itemAction {
    background-color: #242424 !important;
}
body.dark-mode .Slider-cardView .content-action-trigger:hover,
body.dark-mode .Slider-cardView .Slider-itemAction:hover,
body.dark-mode .Slider-itemCard .content-action-trigger:hover,
body.dark-mode .Slider-itemCard .Slider-itemAction:hover {
    background-color: #333 !important;
}

/* Invert the 3-dot icon in dark mode so it's visible */
body.dark-mode .Slider .content-action-trigger img,
body.dark-mode .Slider .Slider-itemAction img {
    filter: grayscale(100%) invert(1);
}

/* Invert 3-dot icon on content repeater views too */
body.dark-mode .content-action-trigger img {
    filter: invert(1);
}


/* ==========================================================================
   Slider Card View (Trending pages)
   ========================================================================== */

body.dark-mode .Slider-itemCard {
    background-color: transparent;
}

/* Trending card info text */
body.dark-mode .Slider-itemCard .Slider-itemInfo {
    color: #999;
}


/* ==========================================================================
   Article Page
   ========================================================================== */

body.dark-mode .Article-sectionArticle {
    color: #e0e0e0;
}


/* ==========================================================================
   Sign In / Sign Up Pages
   ========================================================================== */

body.dark-mode .content.signIn,
body.dark-mode .content.signUp {
    color: #e0e0e0;
}

/* Keep Google/Facebook/Patreon button colors in dark mode (same as light mode) */
body.dark-mode .btn-google {
    background: #fff !important;
    color: #3c4043 !important;
    border-color: #dadce0 !important;
}
body.dark-mode .btn-google:hover {
    background: #f7f8f8 !important;
}
body.dark-mode .btn-facebook {
    background: #1877F2 !important;
    color: #fff !important;
    border-color: #1877F2 !important;
}
body.dark-mode .btn-facebook:hover {
    background: #166FE5 !important;
}


/* ==========================================================================
   Admin Content Repeater
   ========================================================================== */

body.dark-mode .content-repeater-admin .view-horizontal {
    background-color: #242424;
    border-color: #444;
}

/* Admin analytics boxes (member stats, active users) */
body.dark-mode .admin-analytics-box {
    background: #2a2a2a !important;
}


/* ==========================================================================
   Misc Elements
   ========================================================================== */

/* Member view hover */
body.dark-mode .view-member-small:hover {
    background: #2a2a2a;
}

/* Feed text */
body.dark-mode .feed-text {
    color: #999;
}
body.dark-mode .feed-date-header {
    color: #888;
}

/* Help block */
body.dark-mode .help-block {
    color: #999;
}

/* Mission CTA / donation callout — white text in both modes */
body.dark-mode .PatreonCta {
    background-color: #3949AB;
    color: #fff;
}
body.dark-mode .Header-patreonCta-text a {
    color: #fee139;
}

/* Object search dropdown */
body.dark-mode #panelObjectSearchWrapper {
    background-color: #2a2a2a;
}
body.dark-mode .objectSearchResult:hover {
    background-color: #333;
}

/* Chosen dropdown (tag picker) */
body.dark-mode .chosen-container .chosen-results li {
    color: #e0e0e0;
}
body.dark-mode .chosen-container .chosen-results li.highlighted {
    background-color: #333;
}
body.dark-mode .chosen-container .chosen-drop {
    background-color: #2a2a2a;
    border-color: #555;
}
body.dark-mode .chosen-container .chosen-single,
body.dark-mode .chosen-container .chosen-choices {
    background-color: #2a2a2a;
    border-color: #555;
    color: #e0e0e0;
}


/* Mobile sign-in icon on yellow header — keep black in dark mode */
body.dark-mode .Header-mobileLogInButton > .glyphicon {
    color: #000;
}

/* ==========================================================================
   Preserve Already-Dark Elements (no changes needed in dark mode)
   Footer, Spotlight, Video-sectionTop, Page-sectionDarkBackground,
   Home-LargeGrayHero, and contentPreview-body are already dark.
   They inherit their own colors and are unaffected by the above rules.
   ========================================================================== */


/* ==========================================================================
   Header — Topics link & toggle icon fixes
   ========================================================================== */

/* Topics uses an <a> inside Header-buttonText; keep it black like the other nav items */
body.dark-mode .Header-buttonLink,
body.dark-mode .Header-buttonLink:hover,
body.dark-mode .Header-buttonLink:visited {
    color: inherit;
}

/* Sun icon on yellow header should always be black (not the dark-mode link blue) */
.dark-mode-toggle .icon-sun {
    color: #000;
    fill: #000;
}
/* Moon icon also sits on the yellow header — keep it black */
.dark-mode-toggle .icon-moon {
    color: #000;
    fill: #000;
}
/* Ensure the toggle button itself stays black on the yellow header */
.dark-mode-toggle {
    color: #000;
}


/* ==========================================================================
   Admin Tabs (Bootstrap nav-tabs in dark mode)
   ========================================================================== */

body.dark-mode .nav-tabs > li > a {
    color: #ccc;
}
body.dark-mode .nav-tabs > li > a:hover {
    color: #fff;
    background-color: #333;
    border-color: #555 #555 transparent;
}
body.dark-mode .nav-tabs > li.active > a,
body.dark-mode .nav-tabs > li.active > a:hover,
body.dark-mode .nav-tabs > li.active > a:focus {
    color: #fff;
    background-color: #333;
    border-color: #555 #555 #333;
}
body.dark-mode .nav-tabs {
    border-bottom-color: #555;
}

/* Nav pills (member settings, admin) — dark grey active, not blue */
body.dark-mode .nav-pills > li > a {
    color: #ccc;
}
body.dark-mode .nav-pills > li > a:hover {
    background-color: #444;
    color: #fff;
}
body.dark-mode .nav-pills > li.active > a,
body.dark-mode .nav-pills > li.active > a:hover,
body.dark-mode .nav-pills > li.active > a:focus {
    background-color: #3a3a3a;
    color: #fff;
}


/* ==========================================================================
   Content Action Pill Buttons (like/dislike, info, share, save)
   ========================================================================== */

body.dark-mode .Video-pillBtn {
    background-color: rgba(255,255,255,0.1);
    color: #e0e0e0;
}
body.dark-mode .Video-pillBtn:hover {
    background-color: rgba(255,255,255,0.18);
}
body.dark-mode .Video-pillBtn:active {
    background-color: rgba(255,255,255,0.25);
}
body.dark-mode .Video-pillBtn--saved {
    color: #6db3f2;
}

/* Rate pill (thumbs up/down) */
body.dark-mode .Video-ratePill {
    background-color: rgba(255,255,255,0.1);
}
body.dark-mode .Video-ratePill .thumb-btn {
    color: #e0e0e0;
}
body.dark-mode .Video-ratePill .thumb-btn:hover {
    background-color: rgba(255,255,255,0.15);
    color: #e0e0e0;
}
body.dark-mode .Video-ratePill .thumb-btn.active {
    color: #e0e0e0;
}
body.dark-mode .Video-ratePill .thumb-btn.active .glyphicon-thumbs-up,
body.dark-mode .Video-ratePill .thumb-btn.active .glyphicon-thumbs-down {
    color: #6db3f2;
}
body.dark-mode .Video-ratePill .rate-divider {
    background-color: rgba(255,255,255,0.15);
}


/* ==========================================================================
   Trending sections
   ========================================================================== */

/* Trending card dark mode — match dark surfaces with subtle lift */
body.dark-mode .Slider-itemCard .Slider-itemInner.Card {
    background-color: #242424;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}


/* ==========================================================================
   Footer — preserve existing light grey links in dark mode
   ========================================================================== */

/* ==========================================================================
   Spotlight — dark contrasting background in dark mode
   ========================================================================== */

body.dark-mode .Slider-spotlight {
    background-color: #111;
}

/* Democracy Now embed — dark contrasting background in dark mode */
body.dark-mode .Page-sectionDarkBackground {
    background-color: #111;
}

/* Spotlight buttons: keep white bg + black text in dark mode */
body.dark-mode .Slider-spotlightButtonRow .Slider-itemButton {
    background-color: #ffffff;
    color: #000000;
}
body.dark-mode .Slider-spotlightButtonRow .Slider-itemButton:hover {
    background-color: #d9d9d9;
    color: #000000;
}


body.dark-mode .Footer a {
    color: #a5a4a4;
}
body.dark-mode .Footer a:hover {
    color: #ccc;
}
body.dark-mode .Footer .h1-darkmode {
    color: #fff;
}


/* ==========================================================================
   Selection / highlight
   ========================================================================== */

body.dark-mode ::selection {
    background: #3a5f8a;
    color: #fff;
}

body.dark-mode ::-moz-selection {
    background: #3a5f8a;
    color: #fff;
}


/* ==========================================================================
   Scrollbar (webkit)
   ========================================================================== */

body.dark-mode::-webkit-scrollbar {
    width: 10px;
}
body.dark-mode::-webkit-scrollbar-track {
    background: #1a1a1a;
}
body.dark-mode::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}
body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ── ObjectList dropdown search (dark mode) ── */
body.dark-mode #textBoxObjectSearch {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}
body.dark-mode #textBoxObjectSearch:focus {
    border-color: #666;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.dark-mode .quick-search-results-wrapper .quick-search-results {
    background: #2a2a2a;
    border-color: #444;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.dark-mode .objectSearchResult {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}
body.dark-mode .objectSearchResult:hover {
    background-color: #333;
}
body.dark-mode .objectSearchResult-title {
    color: #e0e0e0;
}
body.dark-mode .objectSearchResult .content-type-label {
    color: #999;
}
body.dark-mode .objectSearchResult-title b {
    color: #fff !important;
}