/* ============================================
   SupplyScout Support — Dark Theme
   Overrides inline light-theme styles.
   Linked AFTER the inline <style> block so
   equal-specificity rules win by cascade order.
   ============================================ */

/* ---- Body & Base ---- */
body {
    background-color: #0a0a0f !important;
    color: #f0f0f5 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

a {
    color: #7c6cf0;
}

a:hover {
    color: #a89cf8;
}

/* ---- Site Header ---- */
.site-header {
    background: #0d0d14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.site-header__nav a {
    color: rgba(240, 240, 245, 0.8) !important;
}

.site-header__nav a:hover,
.site-header__nav a.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.nav-toggle span {
    background: #f0f0f5 !important;
}

/* ---- Page Header (gradient banner) ---- */
header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(124, 108, 240, 0.2) 50%, rgba(168, 85, 247, 0.15) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none !important;
}

header h1 {
    color: #f0f0f5;
}

header p {
    color: #9a9ab0;
    opacity: 1 !important;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
    background: #111118 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    color: #9a9ab0;
}

.breadcrumb a {
    color: #7c6cf0 !important;
}

/* ---- Sticky Nav ---- */
nav {
    background-color: #0d0d14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

nav a {
    color: rgba(240, 240, 245, 0.7) !important;
    border-bottom-color: transparent !important;
}

nav a:hover {
    color: #f0f0f5 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-bottom-color: #7c6cf0 !important;
}

/* ---- Main Content ---- */
.container {
    background: #1a1a24 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

p {
    color: #9a9ab0;
}

strong {
    color: #d0d0e0;
}

/* ---- Headings ---- */
h2 {
    color: #f0f0f5 !important;
    border-bottom-color: rgba(124, 108, 240, 0.2) !important;
}

h3 {
    color: #c4b8f8 !important;
}

h4 {
    color: #d0d0e0 !important;
}

/* ---- TOC / Table of Contents ---- */
.toc,
.table-of-contents {
    background: rgba(124, 108, 240, 0.08) !important;
    border-left-color: #7c6cf0 !important;
}

.toc a,
.table-of-contents a {
    color: #7c6cf0 !important;
}

/* ---- Cards ---- */
.card {
    background: #22222e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.card:hover {
    border-color: rgba(124, 108, 240, 0.4) !important;
    box-shadow: 0 4px 24px rgba(124, 108, 240, 0.15) !important;
}

.card h4 {
    color: #f0f0f5 !important;
}

.card p {
    color: #9a9ab0 !important;
}

.card a {
    color: #7c6cf0 !important;
}

/* ---- Note / Callout Boxes ---- */
.note {
    background: rgba(124, 108, 240, 0.1) !important;
    border-left-color: #7c6cf0 !important;
    color: #d0d0e0;
}

.note a {
    color: #7c6cf0 !important;
}

.note p {
    color: #d0d0e0 !important;
}

/* ---- Warning Boxes ---- */
.warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-left-color: #f59e0b !important;
    color: #d0d0e0;
}

.warning p {
    color: #d0d0e0 !important;
}

/* ---- Placeholder / Coming Soon ---- */
.placeholder {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

/* ---- Doc Sections (index.html key features) ---- */
.doc-section {
    background: #111118 !important;
}

.doc-section h4 {
    color: #d0d0e0 !important;
}

.doc-section p {
    color: #9a9ab0 !important;
}

/* ---- Audience Badge (index.html) ---- */
.audience-badge {
    background: rgba(124, 108, 240, 0.15) !important;
    color: #c4b8f8 !important;
}

/* ---- Step Boxes (getting-started.html) ---- */
.step {
    background: rgba(124, 108, 240, 0.08) !important;
    border-left-color: #7c6cf0 !important;
}

.step h4 {
    color: #f0f0f5 !important;
}

.step p {
    color: #9a9ab0 !important;
}

/* ---- Numbered Steps (delete-account.html) ---- */
.steps li {
    background: #111118 !important;
    border-left-color: #7c6cf0 !important;
    color: #9a9ab0 !important;
}

.steps li::before {
    background: #7c6cf0 !important;
}

.steps li strong {
    color: #f0f0f5 !important;
}

/* ---- Quick Tips (getting-started.html) ---- */
.quick-tips {
    background: rgba(34, 197, 94, 0.08) !important;
    border-left-color: #4ade80 !important;
}

.quick-tips h3 {
    color: #4ade80 !important;
}

.quick-tips li {
    color: #9a9ab0;
}

/* ---- Contact Box (faq.html, delete-account.html) ---- */
.contact-box {
    background: rgba(124, 108, 240, 0.08) !important;
    border-color: rgba(124, 108, 240, 0.3) !important;
}

.contact-box h3 {
    color: #f0f0f5 !important;
}

.contact-box p {
    color: #9a9ab0 !important;
}

.contact-box a {
    color: #7c6cf0 !important;
}

/* ---- FAQ Items (faq.html) ---- */
.faq-section h3 {
    border-bottom-color: rgba(124, 108, 240, 0.2) !important;
}

.faq-item {
    background: #111118 !important;
    border-left-color: #7c6cf0 !important;
}

.faq-item h4 {
    color: #f0f0f5 !important;
}

.faq-answer {
    color: #9a9ab0 !important;
}

.faq-answer p {
    color: #9a9ab0 !important;
}

.faq-answer a {
    color: #7c6cf0 !important;
}

/* ---- Feature Box (user-guide, premium-features) ---- */
.feature-box {
    background: rgba(124, 108, 240, 0.08) !important;
    border-left-color: #7c6cf0 !important;
}

.feature-box h4 {
    color: #f0f0f5 !important;
}

.feature-box p {
    color: #9a9ab0 !important;
}

/* ---- Icon Legend (user-guide.html) ---- */
.icon-item {
    background: #111118 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9a9ab0;
}

/* ---- Pricing Section (premium-features.html) ---- */
.pricing-section {
    background: rgba(124, 108, 240, 0.08) !important;
    border-color: rgba(124, 108, 240, 0.3) !important;
}

.pricing-section h3 {
    color: #f0f0f5 !important;
}

.price {
    color: #c4b8f8 !important;
}

.price-period {
    color: #9a9ab0 !important;
}

.cta-button {
    background: #7c6cf0 !important;
    color: white !important;
}

.cta-button:hover {
    background: #6b5ce0 !important;
}

/* ---- Comparison Table (premium-features.html) ---- */
.comparison-table th {
    background: #7c6cf0 !important;
}

.comparison-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    color: #9a9ab0;
}

.comparison-table tr:nth-child(even) {
    background: #111118 !important;
}

.comparison-table tr:nth-child(odd) {
    background: transparent;
}

/* ---- Developer Guide ---- */
/* Code blocks (already dark, minor tweaks) */
pre {
    background: #111118 !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

:not(pre) > code {
    background: rgba(124, 108, 240, 0.12) !important;
    color: #c4b8f8 !important;
}

/* Endpoint cards */
.endpoint {
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: #7c6cf0 !important;
    background: #111118;
}

.endpoint__path {
    color: #d0d0e0 !important;
}

.endpoint__desc {
    color: #9a9ab0 !important;
}

/* Parameter & status tables */
.param-table th {
    background: #22222e !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #d0d0e0 !important;
}

.param-table td {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
    color: #9a9ab0;
}

.status-table th {
    background: #7c6cf0 !important;
}

.status-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    color: #9a9ab0;
}

.status-table tr:nth-child(even) {
    background: #111118 !important;
}

.rate-table th {
    background: #7c6cf0 !important;
}

.rate-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    color: #9a9ab0;
}

.rate-table tr:nth-child(even) {
    background: #111118 !important;
}

/* Coming Soon badge */
.badge-soon {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

/* ---- Coming Soon Banner (partner-guide.html) ---- */
.coming-soon-banner h2 {
    color: #f0f0f5 !important;
}

.coming-soon-banner p {
    color: #9a9ab0 !important;
}

/* ---- Footer ---- */
footer {
    background: #08080d !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ---- Lists ---- */
ul li,
ol li {
    color: #9a9ab0;
}

/* ---- Mobile Nav ---- */
@media (max-width: 768px) {
    .site-header__nav {
        background: rgba(10, 10, 15, 0.95) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }

    .site-header__nav a {
        color: rgba(240, 240, 245, 0.8) !important;
    }
}