/* =========================================================
   StreamCode Studio – Dark Mode
   (Scoped, layout-safe, no bleed)
========================================================= */

/* ---------------------------------------------------------
   BASE RESET (NO COLOR OVERRIDES)
--------------------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   GLOBAL DARK BODY
--------------------------------------------------------- */
html[data-theme="dark"] body {
    background: #0d1117;
    color: #c9d1d9;
}

/* ---------------------------------------------------------
   HEADER + NAV (VISUALS ONLY — SIZE INHERITED)
--------------------------------------------------------- */
html[data-theme="dark"] .header-wrap,
html[data-theme="dark"] .main-menu-wrap,
html[data-theme="dark"] .menu-bar {
    background: linear-gradient(180deg, #0c131b, #0a1017);
    border: none;
}

html[data-theme="dark"] .main-menu-wrap {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ---------------------------------------------------------
   MAIN MENU (NO SPACING OVERRIDES)
--------------------------------------------------------- */
html[data-theme="dark"] .main-menu {
    background: transparent;
}

/* MENU ITEM DIVIDERS */
html[data-theme="dark"] .main-menu > li {
    border-right: 1px solid rgba(255,255,255,0.08);
}

html[data-theme="dark"] .main-menu > li:last-child {
    border-right: none;
}

/* LINKS — COLORS ONLY */
html[data-theme="dark"] .main-menu > li > a {
    color: #cfe9ff;
    background: transparent;
}

/* HOVER */
html[data-theme="dark"] .main-menu > li:hover > a {
    color: #ffffff;
    background: rgba(80,180,255,0.08);
}

/* ACTIVE */
html[data-theme="dark"] .main-menu > li.active > a,
html[data-theme="dark"] .main-menu > li > a.active {
    background: linear-gradient(180deg, #0d5c74 0%, #0b3f55 100%);
    color: #ffffff;
    box-shadow:
        inset 0 -3px 0 #1cbdf9,
        0 0 14px rgba(28,189,249,0.25);
}

/* CARET ICON */
html[data-theme="dark"] .main-menu li.sub > a i,
html[data-theme="dark"] .main-menu .fa-caret-down {
    color: #7fcfff;
    opacity: 0.85;
}

/* ---------------------------------------------------------
   DROPDOWNS (DARK VISUALS ONLY)
--------------------------------------------------------- */
html[data-theme="dark"] .menu-item.sub .content-dropdown {
    background: linear-gradient(180deg, #0e1622, #0b121c);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 18px 45px rgba(0,0,0,0.55);
}

/* GRID LAYOUT PRESERVED */
html[data-theme="dark"] .menu-item.sub .content-dropdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 28px;
}

/* BLOCK TEXT */
html[data-theme="dark"] .menu-item.sub .feature-list-block {
    color: #cfd8e3;
}

/* TITLES */
html[data-theme="dark"] .menu-item.sub .feature-list-title {
    color: #6faeff;
}

/* DIVIDER */
html[data-theme="dark"] .menu-item.sub .line-separator {
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.02)
    );
}

/* LINKS */
html[data-theme="dark"] .menu-item.sub .feature-list-item a {
    color: #cbd5e1;
}

html[data-theme="dark"] .menu-item.sub .feature-list-item a:hover {
    color: #4fc3f7;
}

/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */
html[data-theme="dark"] .section,
html[data-theme="dark"] .section-wrap {
    background: #0d1117;
}

/* =========================================================
   Dark Mode – Section Headline (Matched to List Background)
========================================================= */

html[data-theme="dark"] .section-headline-wrap {
    background-color: #111827; /* same as list background */
    background-image: url("../imgs/dark-mode/section_headline_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    border-top: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* =========================================================
   Dark Mode – Subscribe Banner (Footer Top)
========================================================= */

html[data-theme="dark"] #subscribe-banner-wrap {
    background-color: #0d1117;
    background-image: url("../imgs/dark-mode/searchbar_texture.png");
    background-repeat: repeat;
    background-position: center;
    border-top: 1px solid rgba(255,255,255,0.05);
}

html[data-theme="dark"] #subscribe-banner {
    background: transparent;
}

/* Ads / content inside banner */
html[data-theme="dark"] .subscribe-content {
    color: #c9d1d9;
}

/* ---------------------------------------------------------
   TOOL LIST
--------------------------------------------------------- */
html[data-theme="dark"] .scsht-tool-item {
    background: #111827;
    border-bottom-color: rgba(255,255,255,0.05);
}

html[data-theme="dark"] .scsht-tool-item:hover {
    background: #0f172a;
}

/* TOOL TEXT */
html[data-theme="dark"] .scsht-tool-title {
    color: #e6edf3;
}

html[data-theme="dark"] .scsht-tool-desc,
html[data-theme="dark"] .scsht-tool-details {
    color: #9ca3af;
}

/* TAGS */
html[data-theme="dark"] .scsht-tool-tags a {
    color: #4a8cff;
}

/* ---------------------------------------------------------
   RATINGS
--------------------------------------------------------- */
html[data-theme="dark"] .rating-item svg {
    fill: #374151;
}

html[data-theme="dark"] .rating-item:not(.empty) svg {
    fill: #facc15;
}

/* ---------------------------------------------------------
   BADGES
--------------------------------------------------------- */
html[data-theme="dark"] .scsht-tool-badge.readonly {
    background: rgba(80,180,120,0.25);
}

html[data-theme="dark"] .scsht-tool-badge.universal {
    background: rgba(80,140,255,0.25);
}

html[data-theme="dark"] .scsht-tool-badge.radiodj {
    background: rgba(255,170,80,0.25);
}
/* =========================================================
   Dark Mode – Support & Solutions
========================================================= */

html[data-theme="dark"] .blog-post,
html[data-theme="dark"] .post,
html[data-theme="dark"] .post-content,
html[data-theme="dark"] .post-content.with-title,
html[data-theme="dark"] .post-paragraph {
    background: transparent !important;
    color: #c9d1d9;
}

/* ---------------------------------------------------------
   MAIN WRAP
--------------------------------------------------------- */
html[data-theme="dark"] .scs-support-wrap {
    background: #0d1117;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

html[data-theme="dark"] .scs-support-header h3 {
    color: #e6edf3;
}

html[data-theme="dark"] .scs-support-sub {
    color: #9ca3af;
}

/* Ask question button */
html[data-theme="dark"] .scs-ask-btn {
    background: linear-gradient(180deg, #0d5c74, #0b3f55);
    color: #ffffff;
    border: none;
}

html[data-theme="dark"] .scs-ask-btn:hover {
    background: linear-gradient(180deg, #117a96, #0d5c74);
}

/* ---------------------------------------------------------
   FILTER BAR
--------------------------------------------------------- */

html[data-theme="dark"] .scs-support-filters button {
    background: transparent;
    color: #9ca3af;
    border: 1px solid rgba(255,255,255,0.08);
}

html[data-theme="dark"] .scs-support-filters button:hover {
    color: #ffffff;
    background: rgba(80,180,255,0.12);
}

html[data-theme="dark"] .scs-support-filters button.active {
    background: linear-gradient(180deg, #0d5c74, #0b3f55);
    color: #ffffff;
    border-color: rgba(28,189,249,0.6);
}

/* Search input */
html[data-theme="dark"] .scs-support-search input {
    background: #020617;
    color: #e6edf3;
    border: 1px solid rgba(255,255,255,0.08);
}

html[data-theme="dark"] .scs-support-search input::placeholder {
    color: #6b7280;
}

/* ---------------------------------------------------------
   LIST / LOADING
--------------------------------------------------------- */
html[data-theme="dark"] .scs-support-list {
    background: transparent;
}

html[data-theme="dark"] .scs-support-loading {
    background: #020617;
    color: #9ca3af;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 14px;
}

/* ---------------------------------------------------------
   QUESTION ITEMS (AJAX CONTENT)
--------------------------------------------------------- */
html[data-theme="dark"] .scs-thread-content h3 {
    color: #e6edf3;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

html[data-theme="dark"] .scs-question p {
    color: #9ca3af;
}

html[data-theme="dark"] .scs-question {
    background: #111827 !important;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}

html[data-theme="dark"] .scs-question.open {
    background: #0f172a;
}

html[data-theme="dark"] .scs-question-meta {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

html[data-theme="dark"] .scs-question-title {
    color: #9ca3af;
}

html[data-theme="dark"] .scs-question-excerpt {
    color: #9ca3af;
}

/* Status badges */
html[data-theme="dark"] .badge.open {
    background: rgba(255,170,80,0.25);
    color: #ffd19a;
}

html[data-theme="dark"] .badge.solved {
    background: rgba(80,180,120,0.25);
    color: #9af0c6;
}

html[data-theme="dark"] .badge.seeded {
    background: rgba(80,140,255,0.25);
    color: #a6c8ff;
}

/* ---------------------------------------------------------
   THREAD WRAP
--------------------------------------------------------- */
html[data-theme="dark"] .scs-thread {
    background: #020617;
    border-radius: 8px;
    padding: 14px;
}

/* ---------------------------------------------------------
   AVATAR COLUMN
--------------------------------------------------------- */
html[data-theme="dark"] .scs-thread-avatar img {
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.08);
    background: #020617;
}

/* ---------------------------------------------------------
   THREAD CONTENT (REPLIES)
--------------------------------------------------------- */
html[data-theme="dark"] .scs-thread-content {
    background: #0f172a;
    color: #9ca3af;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Text inside replies */
html[data-theme="dark"] .scs-thread-content p {
    color: #c9d1d9;
}

/* ---------------------------------------------------------
   SOLUTION HIGHLIGHT
--------------------------------------------------------- */
html[data-theme="dark"] .scs-thread-content.scs-solution {
    border-left: 4px solid #1cbdf9;
    background: linear-gradient(
        90deg,
        rgba(28,189,249,0.12),
        #0f172a
    );
}

/* Solution badge */
html[data-theme="dark"] .badge.solved {
    background: rgba(80,180,120,0.25);
    color: #9af0c6;
    border-radius: 4px;
    font-size: 12px;
    padding: 4px 8px;
}

/* ---------------------------------------------------------
   CODE BLOCKS INSIDE ANSWERS
--------------------------------------------------------- */
html[data-theme="dark"] .scs-thread-content pre,
html[data-theme="dark"] .scs-thread-content code {
    background: #020617;
    color: #e6edf3;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
}

/* ---------------------------------------------------------
   SOLVED CONFIRMATION BLOCK
--------------------------------------------------------- */
html[data-theme="dark"] .scs-solved-confirm {
    background: #020617;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 16px;
}

html[data-theme="dark"] .scs-solved-confirm p {
    color: #9ca3af;
}

html[data-theme="dark"] .scs-solved-confirm a {
    color: #4ade80;
    font-weight: 600;
}

html[data-theme="dark"] .scs-solved-confirm a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------
   REPLY FORM
--------------------------------------------------------- */
html[data-theme="dark"] .scs-reply-form textarea {
    background: #020617;
    color: #e6edf3;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 10px;
}

html[data-theme="dark"] .scs-reply-form textarea::placeholder {
    color: #6b7280;
}

html[data-theme="dark"] .scs-reply-form button.scs-btn {
    background: linear-gradient(180deg, #0d5c74, #0b3f55);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
}

html[data-theme="dark"] .scs-reply-form button.scs-btn:hover {
    background: linear-gradient(180deg, #117a96, #0d5c74);
}
/* ---------------------------------------------------------
   ASK QUESTION MODAL
--------------------------------------------------------- */
html[data-theme="dark"] #scsQuestionModal {
    background: rgba(2,6,23,0.9);
}

html[data-theme="dark"] .modal-hero {
    background: linear-gradient(180deg, #0c131b, #0a1017);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

html[data-theme="dark"] .modal-hero h2 {
    color: #e6edf3;
}

html[data-theme="dark"] .modal-hero p {
    color: #9ca3af;
}

html[data-theme="dark"] .form-popup-content {
    background: #111827;
}

html[data-theme="dark"] .form-popup-content input,
html[data-theme="dark"] .form-popup-content textarea {
    background: #020617;
    color: #e6edf3;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Cancel button */
html[data-theme="dark"] #scsQuestionCancel {
    background: #020617;
    color: #9ca3af;
    border: 1px solid rgba(255,255,255,0.08);
}
/* =========================================================
   Dark Mode – Sidebar
========================================================= */

/* Sidebar container */
html[data-theme="dark"] .sidebar {
    background: transparent;
}

/* Sidebar card */
html[data-theme="dark"] .sidebar-item {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 16px;
    color: #9ca3af;
}

/* Sidebar headings */
html[data-theme="dark"] .sidebar-item h4 {
    color: #e6edf3;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Separator */
html[data-theme="dark"] .sidebar-item .line-separator {
    border: none;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.02)
    );
    margin: 10px 0;
}

/* Sidebar text */
html[data-theme="dark"] .sidebar-item p {
    color: #9ca3af;
}

/* ---------------------------------------------------------
   Popular Topics
--------------------------------------------------------- */

html[data-theme="dark"] .topic-preview {
    margin-top: 10px;
}

/* Individual topic item */
html[data-theme="dark"] .topic-preview-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

html[data-theme="dark"] .topic-preview-item:last-child {
    border-bottom: none;
}

/* Topic title */
html[data-theme="dark"] .topic-preview-item .text-header a {
    color: #cfe9ff;
    font-weight: 500;
}

html[data-theme="dark"] .topic-preview-item .text-header a:hover {
    color: #4fc3f7;
}

/* Category link */
html[data-theme="dark"] .topic-preview-item .category {
    color: #6faeff;
    font-size: 12px;
}

/* Date */
html[data-theme="dark"] .topic-preview-item .lastpost {
    color: #6b7280;
    font-size: 12px;
}

/* ---------------------------------------------------------
   Donation Button (Safe Dark Mode)
--------------------------------------------------------- */

/* Keep PayPal button readable without restyling it */
html[data-theme="dark"] .pp-CTDL5LXJKFE3L {
    filter: brightness(1.05);
}

/* Prevent white backgrounds around PayPal assets */
html[data-theme="dark"] .sidebar-item img {
    background: transparent;
}

/* =========================================================
   Dark Mode – Forums
========================================================= */

/* ---------------------------------------------------------
   FORUM WRAP
--------------------------------------------------------- */
html[data-theme="dark"] .forum {
    background: transparent;
    color: #9ca3af;
}

/* ---------------------------------------------------------
   FORUM HEADER ROW
--------------------------------------------------------- */
html[data-theme="dark"] .forum-header {
    background: #020617;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    margin-bottom: 16px;
}

html[data-theme="dark"] .forum-header .text-header {
    color: #9ca3af;
    font-weight: 500;
}

/* ---------------------------------------------------------
   SECTION HEADER (SUBSECTION)
--------------------------------------------------------- */
html[data-theme="dark"] .forum-subsection {
    background: #111827 !important;
    border-left: 3px solid #118ca7 !important;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 6px;
}

html[data-theme="dark"] .forum-subsection .text-header a {
    color: #e6edf3;
    font-weight: 600;
}

html[data-theme="dark"] .forum-subsection .text-header a:hover {
    color: #4fc3f7;
}

html[data-theme="dark"] .forum-subsection .description {
    color: #9ca3af;
    font-size: 13px;
}

/* ---------------------------------------------------------
   THREAD LIST
--------------------------------------------------------- */
html[data-theme="dark"] .thread-list {
    background: transparent;
    margin-bottom: 18px;
}

/* ---------------------------------------------------------
   THREAD ITEM
--------------------------------------------------------- */
html[data-theme="dark"] .thread-list-item {
    background: #0b1220;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme="dark"] .thread-list-item:hover {
    background: #0f172a;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* ---------------------------------------------------------
   THREAD TITLE
--------------------------------------------------------- */
html[data-theme="dark"] .thread-list-item .forum-title a {
    color: #e6edf3;
    font-weight: 500;
}

html[data-theme="dark"] .thread-list-item .forum-title a:hover {
    color: #4fc3f7;
}

/* ---------------------------------------------------------
   AVATAR
--------------------------------------------------------- */
html[data-theme="dark"] .thread-list-item .user-avatar img {
    background: #020617;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ---------------------------------------------------------
   REPLIES COUNT
--------------------------------------------------------- */
html[data-theme="dark"] .forum-replies .replies {
    color: #9ca3af;
    font-weight: 500;
}

/* ---------------------------------------------------------
   LAST POST META
--------------------------------------------------------- */
html[data-theme="dark"] .forum-lastpost .lastpost {
    color: #6b7280;
    font-size: 12px;
}

html[data-theme="dark"] .forum-lastpost .lastpost span {
    color: #6faeff;
}

/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */
html[data-theme="dark"] .thread-list-item .text-header.title {
    color: #9ca3af;
}


















































/* =========================================================
   Dark Mode – Remove Support Header Border (Final Polish)
========================================================= */

html[data-theme="dark"] .scs-support-header,
html[data-theme="dark"] .scs-support-header * {
    border: none !important;
    outline: none !important;
}

/* In case border comes from parent containers */
html[data-theme="dark"] .blog-post,
html[data-theme="dark"] .post,
html[data-theme="dark"] .post-content,
html[data-theme="dark"] .post-content.with-title {
    border: none !important;
    outline: none !important;
}
/* =========================================================
   Dark Mode – Support Question Preview Title (FIX)
========================================================= */

html[data-theme="dark"] .scs-question h3 {
    color: #e6edf3 !important;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    opacity: 1;
    visibility: visible;
}