/*
 * Custom DeepSignal Theme for HelpNDoc Documentation
 * This CSS file overrides HelpNDoc default styles to match the DeepSignal website theme
 * Add this file AFTER hnd.content.css in your HTML files
 */

:root {
    /* DeepSignal Color Variables */
    /* Main Content - Light Theme */
    --ds-content-bg: #f8f8f8;
    --ds-content-text: #000000;
    --ds-content-link: #0066cc;
    --ds-content-hover-link: #0052a3;

    /* Navigation/Header - Dark Theme */
    --ds-primary-bg: #1d283a;
    --ds-secondary-bg: #13172a;
    --ds-light-bg: #f9f9f9;
    --ds-primary-text: #d8e6db;
    --ds-secondary-text: #ffffff;
    --ds-accent: #4cb17c;
    --ds-error: #e4434b;
    --ds-link: #4ab2f1;
    --ds-hover-link: #248ece;
    --ds-border: #13172a;
    --ds-header-bg: #333;
    --ds-deepsignalblue: #29C3FF;
    --ds-navy: #161D33;
    --ds-navy-light: #1E2640;
}

/* Override body - keep dark theme */
body {
    background-color: var(--ds-primary-bg) !important;
    color: var(--ds-primary-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Main content area - LIGHT THEME with BLACK TEXT */
#main {
    background-color: var(--ds-content-bg) !important;
}

/* Content area - LIGHT THEME with BLACK TEXT */
#topic-content {
    background-color: var(--ds-content-bg) !important;
    color: var(--ds-content-text) !important;
}

/* Override headings in CONTENT AREA ONLY */
#topic-content h1,
#topic-content h2,
#topic-content h3,
#topic-content h4,
#topic-content h5,
#topic-content h6,
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
    color: var(--ds-content-text) !important;
}

/* Override paragraph text in CONTENT AREA ONLY */
#topic-content p,
#main p {
    color: var(--ds-content-text) !important;
}

/* Override list text in CONTENT AREA ONLY */
#topic-content ul,
#topic-content ol,
#topic-content li,
#main ul,
#main ol,
#main li {
    color: var(--ds-content-text) !important;
}

/* Override table styling in CONTENT AREA ONLY */
#topic-content table,
#main table {
    background-color: var(--ds-content-bg) !important;
    border-color: #ddd !important;
}

#topic-content table td,
#topic-content table th,
#main table td,
#main table th {
    color: var(--ds-content-text) !important;
    border-color: #ddd !important;
}

/* Override link colors in CONTENT AREA ONLY */
#topic-content a,
#main a {
    color: var(--ds-content-link) !important;
    text-decoration: none !important;
}

#topic-content a:hover,
#main a:hover {
    color: var(--ds-content-hover-link) !important;
    text-decoration: underline !important;
}

/* Override code blocks in CONTENT AREA ONLY - but preserve syntax highlighting */
#topic-content pre,
#main pre {
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
}

/* Don't override colors inside code blocks - keep syntax highlighting */
#topic-content pre *,
#topic-content code *,
#main pre *,
#main code * {
    color: inherit !important;
}

/* Override sidebar/navigation - KEEP DARK THEME */
nav, .navigation {
    background-color: var(--ds-secondary-bg) !important;
    border-right: 1px solid var(--ds-deepsignalblue) !important;
}

nav a, .navigation a {
    color: var(--ds-primary-text) !important;
}

nav a:hover, .navigation a:hover,
nav a.active, .navigation a.active {
    color: var(--ds-deepsignalblue) !important;
    background-color: var(--ds-navy-light) !important;
}

/* Override header - KEEP DARK THEME */
header, .header {
    background-color: var(--ds-header-bg) !important;
    border-bottom: 2px solid var(--ds-deepsignalblue) !important;
}

/* Override buttons */
button, .button, .btn {
    background-color: var(--ds-deepsignalblue) !important;
    color: #ffffff !important;
    border: 1px solid var(--ds-deepsignalblue) !important;
}

button:hover, .button:hover, .btn:hover {
    background-color: var(--ds-hover-link) !important;
    color: #ffffff !important;
}

/* Override input fields */
input[type="text"],
input[type="search"],
textarea,
select {
    background-color: #ffffff !important;
    color: var(--ds-primary-text) !important;
    border: 1px solid var(--ds-border) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ds-link) !important;
    outline: none !important;
}

/* Override specific HelpNDoc span classes in CONTENT AREA ONLY */
#topic-content span.rvts1, #topic-content span.rvts2, #topic-content span.rvts3,
#topic-content span.rvts4, #topic-content span.rvts5, #topic-content span.rvts6,
#topic-content span.rvts7, #topic-content span.rvts8, #topic-content span.rvts9,
#topic-content span.rvts10,
#main span.rvts1, #main span.rvts2, #main span.rvts3,
#main span.rvts4, #main span.rvts5, #main span.rvts6,
#main span.rvts7, #main span.rvts8, #main span.rvts9,
#main span.rvts10 {
    color: var(--ds-content-text) !important;
}

/* Override bold text in CONTENT AREA ONLY */
#topic-content span[style*="font-weight: bold"],
#topic-content .rvts14, #topic-content .rvts15, #topic-content .rvts16,
#topic-content .rvts17, #topic-content .rvts18,
#main span[style*="font-weight: bold"],
#main .rvts14, #main .rvts15, #main .rvts16,
#main .rvts17, #main .rvts18 {
    color: var(--ds-content-text) !important;
}

/* Override page titles in CONTENT AREA ONLY */
#topic-content .page-title,
#topic-content .title,
#main .page-title,
#main .title {
    color: var(--ds-content-text) !important;
    border-bottom: 1px solid #ddd !important;
}

/* Override breadcrumbs in CONTENT AREA ONLY */
#topic-content .breadcrumb,
#main .breadcrumb {
    background-color: #f5f5f5 !important;
    color: var(--ds-content-text) !important;
}

#topic-content .breadcrumb a,
#main .breadcrumb a {
    color: var(--ds-content-link) !important;
}

/* Override alerts/notifications */
.alert, .notification, .message {
    background-color: var(--ds-secondary-bg) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-primary-text) !important;
}

/* Override search box */
.search-box, #search-box {
    background-color: var(--ds-secondary-bg) !important;
}

/* Override footer */
footer, .footer {
    background-color: var(--ds-secondary-bg) !important;
    border-top: 1px solid var(--ds-border) !important;
    color: var(--ds-primary-text) !important;
}

/* Override scrollbar (webkit browsers) */
::-webkit-scrollbar {
    width: 12px;
    background-color: var(--ds-secondary-bg);
}

::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* Override selection color */
::selection {
    background-color: var(--ds-deepsignalblue);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--ds-deepsignalblue);
    color: #ffffff;
}

/* Override panel/card backgrounds */
.panel, .card, .box {
    background-color: var(--ds-secondary-bg) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-primary-text) !important;
}

/* Override highlighted/selected items */
.selected, .active, .highlight {
    background-color: var(--ds-navy-light) !important;
    color: var(--ds-primary-text) !important;
}

/* Override dividers */
hr {
    border-color: var(--ds-border) !important;
}

/* Override blockquotes in CONTENT AREA ONLY */
#topic-content blockquote,
#main blockquote {
    background-color: #f5f5f5 !important;
    border-left: 4px solid var(--ds-content-link) !important;
    color: var(--ds-content-text) !important;
}

/* Ensure images don't have background conflicts */
img {
    background-color: transparent !important;
}

/* Override inline styles in CONTENT AREA ONLY */
#topic-content span[style*="color: black"],
#topic-content span[style*="color: #000000"],
#topic-content span[style*="color: #000"],
#topic-content div[style*="color: black"],
#topic-content div[style*="color: #000000"],
#topic-content div[style*="color: #000"],
#main span[style*="color: black"],
#main span[style*="color: #000000"],
#main span[style*="color: #000"],
#main div[style*="color: black"],
#main div[style*="color: #000000"],
#main div[style*="color: #000"] {
    color: var(--ds-content-text) !important;
}

/* Ensure all content area text is black - except code blocks and links */
#topic-content,
#topic-content *:not(a):not(code):not(pre):not(pre *):not(code *),
#main,
#main *:not(a):not(code):not(pre):not(pre *):not(code *) {
    color: var(--ds-content-text) !important;
}