/* Dark Mode Styles for SeeUThere Documentation */

/* Dark mode variables */
html.dark-mode,
body.dark-mode {
    --bg-color: #0f1419;
    --content-bg: #1a1f29;
    --sidebar-bg: #0f1419;
    --text-color: #e5e7eb;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --header-bg: #1a1f29;
    --search-bg: #374151;
    --nav-hover: #374151;
    --nav-active: #1e40af;
    --warning-bg: #451a03;
    --warning-border: #f59e0b;
    --warning-text: #fbbf24;
    --info-bg: #1e3a8a;
    --info-border: #3b82f6;
    --info-text: #93c5fd;
    --success-bg: #064e3b;
    --success-border: #10b981;
    --success-text: #6ee7b7;
    --step-bg: #374151;
    --field-bg: #374151;
    --code-bg: #374151;
    --code-text: #fbbf24;
}

/* Apply dark mode styles */
html.dark-mode,
body.dark-mode {
    background: var(--bg-color);
    color: var(--text-color);
}

/* Sidebar dark mode */
html.dark-mode .sidebar,
body.dark-mode .sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
}

/* Dark scrollbar for sidebar */
html.dark-mode .sidebar::-webkit-scrollbar,
body.dark-mode .sidebar::-webkit-scrollbar {
    width: 8px;
}

html.dark-mode .sidebar::-webkit-scrollbar-track,
body.dark-mode .sidebar::-webkit-scrollbar-track {
    background: var(--sidebar-bg);
}

html.dark-mode .sidebar::-webkit-scrollbar-thumb,
body.dark-mode .sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

html.dark-mode .sidebar::-webkit-scrollbar-thumb:hover,
body.dark-mode .sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Main content dark mode */
html.dark-mode .main-content,
body.dark-mode .main-content {
    background: var(--bg-color);
}

html.dark-mode .content-header,
body.dark-mode .content-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
}

html.dark-mode .content-body,
body.dark-mode .content-body {
    background: var(--bg-color);
}

/* Text colors */
html.dark-mode .content-body h1,
html.dark-mode .content-body h2,
html.dark-mode .content-body h3,
html.dark-mode .page-title,
body.dark-mode .content-body h1,
body.dark-mode .content-body h2,
body.dark-mode .content-body h3,
body.dark-mode .page-title {
    color: var(--text-color);
}

html.dark-mode .content-body p,
html.dark-mode .content-body li,
body.dark-mode .content-body p,
body.dark-mode .content-body li {
    color: var(--text-secondary);
}

html.dark-mode .breadcrumb,
body.dark-mode .breadcrumb {
    color: var(--text-secondary);
}

html.dark-mode .breadcrumb a,
body.dark-mode .breadcrumb a {
    color: var(--info-text);
}

/* Search box dark mode */
html.dark-mode .search-input,
body.dark-mode .search-input {
    background: var(--search-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

html.dark-mode .search-input::placeholder,
body.dark-mode .search-input::placeholder {
    color: var(--text-secondary);
}

/* Navigation dark mode */
html.dark-mode .nav-link:hover,
body.dark-mode .nav-link:hover {
    background: var(--nav-hover);
    color: var(--text-color);
}

html.dark-mode .nav-sublink:hover,
body.dark-mode .nav-sublink:hover {
    color: var(--text-color);
}

/* Info boxes dark mode */
html.dark-mode .warning-box,
body.dark-mode .warning-box {
    background: var(--warning-bg);
    border-left-color: var(--warning-border);
}

html.dark-mode .warning-box .warning-title,
html.dark-mode .warning-box p,
body.dark-mode .warning-box .warning-title,
body.dark-mode .warning-box p {
    color: var(--warning-text);
}

html.dark-mode .info-box,
body.dark-mode .info-box {
    background: var(--info-bg);
    border-left-color: var(--info-border);
}

html.dark-mode .info-box .info-title,
html.dark-mode .info-box p,
body.dark-mode .info-box .info-title,
body.dark-mode .info-box p {
    color: var(--info-text);
}

html.dark-mode .success-box,
body.dark-mode .success-box {
    background: var(--success-bg);
    border-left-color: var(--success-border);
}

html.dark-mode .success-box .success-title,
html.dark-mode .success-box p,
body.dark-mode .success-box .success-title,
body.dark-mode .success-box p {
    color: var(--success-text);
}

/* Step boxes dark mode */
html.dark-mode .step-box,
body.dark-mode .step-box {
    background: var(--step-bg);
    border-color: var(--border-color);
}

html.dark-mode .step-title,
body.dark-mode .step-title {
    color: var(--text-color);
}

html.dark-mode .step-number,
body.dark-mode .step-number {
    background: var(--info-border);
}

/* Step containers dark mode */
html.dark-mode .step-container,
body.dark-mode .step-container {
    background: var(--step-bg);
    border-color: var(--border-color);
}

html.dark-mode .step-container .step-number,
body.dark-mode .step-container .step-number {
    background: var(--info-border);
    color: white;
}

html.dark-mode .step-container h3,
body.dark-mode .step-container h3 {
    color: var(--text-color);
}

html.dark-mode .step-container h3 a,
body.dark-mode .step-container h3 a {
    color: var(--info-text);
}

html.dark-mode .step-container h3 a:hover,
body.dark-mode .step-container h3 a:hover {
    color: var(--info-border);
}

html.dark-mode .step-content p,
body.dark-mode .step-content p {
    color: var(--text-secondary);
}

/* Field lists dark mode */
html.dark-mode .field-list,
body.dark-mode .field-list {
    background: transparent;
}

html.dark-mode .field-item,
body.dark-mode .field-item {
    border-bottom-color: var(--border-color);
}

html.dark-mode .field-name,
body.dark-mode .field-name {
    color: var(--text-color);
}

/* Notification field items in dark mode - override inline styles */
html.dark-mode .field-item[style*="rgba(66, 133, 244, 0.1)"],
body.dark-mode .field-item[style*="rgba(66, 133, 244, 0.1)"] {
    background-color: rgba(66, 133, 244, 0.2) !important;
}

html.dark-mode .field-item[style*="rgba(255, 152, 0, 0.1)"],
body.dark-mode .field-item[style*="rgba(255, 152, 0, 0.1)"] {
    background-color: rgba(255, 152, 0, 0.2) !important;
}

html.dark-mode .field-item[style*="rgba(33, 150, 243, 0.1)"],
body.dark-mode .field-item[style*="rgba(33, 150, 243, 0.1)"] {
    background-color: rgba(33, 150, 243, 0.2) !important;
}

html.dark-mode .field-item[style*="rgba(244, 67, 54, 0.1)"],
body.dark-mode .field-item[style*="rgba(244, 67, 54, 0.1)"] {
    background-color: rgba(244, 67, 54, 0.2) !important;
}

html.dark-mode .field-item[style*="rgba(76, 175, 80, 0.1)"],
body.dark-mode .field-item[style*="rgba(76, 175, 80, 0.1)"] {
    background-color: rgba(76, 175, 80, 0.2) !important;
}

html.dark-mode .field-item[style*="rgba(156, 39, 176, 0.1)"],
body.dark-mode .field-item[style*="rgba(156, 39, 176, 0.1)"] {
    background-color: rgba(156, 39, 176, 0.2) !important;
}

html.dark-mode .field-item[style*="rgba(255, 215, 0, 0.1)"],
body.dark-mode .field-item[style*="rgba(255, 215, 0, 0.1)"] {
    background-color: rgba(255, 215, 0, 0.2) !important;
}

/* Code dark mode */
html.dark-mode .content-body code,
body.dark-mode .content-body code {
    background: var(--code-bg);
    color: var(--code-text);
}

/* Border fixes */
html.dark-mode .content-body h2,
body.dark-mode .content-body h2 {
    border-bottom-color: var(--border-color);
}

/* Mobile menu button */
html.dark-mode .mobile-menu-btn,
body.dark-mode .mobile-menu-btn {
    color: var(--text-color);
}

/* Links */
html.dark-mode .content-body a,
body.dark-mode .content-body a {
    color: var(--info-text);
}

html.dark-mode .content-body a:hover,
body.dark-mode .content-body a:hover {
    color: var(--info-border);
}

/* Section title colors */
html.dark-mode .nav-section-title,
body.dark-mode .nav-section-title {
    color: var(--text-secondary);
}

/* Transition for smooth theme switching */
body, .sidebar, .main-content, .content-header, .content-body,
.warning-box, .info-box, .success-box, .step-box, .field-list,
.nav-link, .nav-sublink, .search-input {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}