/**
 * Docs (/docs, /docs hub) — theme tokens + dark mode.
 * Activated via html[data-theme="dark"] (wh-dark-mode-init.php).
 */

:root {
    --docs-brand: #225aea;
    --docs-brand-600: #1d4ed8;
    --docs-brand-700: #1e40af;
    --docs-on-brand: #fff;
    --docs-text: #1e293b;
    --docs-heading: #0f172a;
    --docs-muted: #475569;
    --docs-muted-2: #64748b;
    --docs-nav-muted: #334155;
    --docs-border: #e2e8f0;
    --docs-border-strong: #cbd5e1;
    --docs-surface: #ffffff;
    --docs-surface-muted: #f8fafc;
    --docs-surface-active: #f1f5f9;
    --docs-tint-blue: rgba(239, 246, 255, 0.86);
    --docs-chip-bg: #eff6ff;
    --docs-chip-fg: #1d4ed8;
    --docs-link: #225aea;
    --docs-link-hover: #1d4ed8;
    --docs-topbar-bg: rgba(255, 255, 255, 0.92);
    --docs-code-inline-bg: #f1f5f9;
    --docs-code-inline-fg: #be185d;
    --docs-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    --docs-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);

    /* DocsHub aliases (--wh-* in DocsHub.php) */
    --wh-brand: var(--docs-brand);
    --wh-brand-600: var(--docs-brand-600);
    --wh-brand-700: var(--docs-brand-700);
    --wh-on-brand: var(--docs-on-brand);
    --wh-text: var(--docs-text);
    --wh-heading: var(--docs-heading);
    --wh-muted: var(--docs-muted);
    --wh-nav-muted: var(--docs-nav-muted);
    --wh-border: var(--docs-border);
    --wh-border-blue: #dbeafe;
    --wh-surface: var(--docs-surface);
    --wh-surface-muted: var(--docs-surface-muted);
    --wh-tint-blue: var(--docs-tint-blue);
    --wh-chip-bg: var(--docs-chip-bg);
    --wh-chip-fg: var(--docs-chip-fg);
    --wh-code-bg: #0f172a;
    --wh-code-fg: #dbeafe;
    --wh-code-muted: #94a3b8;
    --wh-code-accent: #93c5fd;
    --wh-card-hover-border: #bfdbfe;
    --wh-panel-dot: #cbd5e1;
}

html[data-theme="dark"] {
    --docs-brand: #3b76ff;
    --docs-brand-600: #2b66f0;
    --docs-brand-700: #225aea;
    --docs-text: #bcc5d4;
    --docs-heading: #ffffff;
    --docs-muted: #7c8699;
    --docs-muted-2: #7c8699;
    --docs-nav-muted: #bcc5d4;
    --docs-border: #232830;
    --docs-border-strong: #323845;
    --docs-surface: #08090c;
    --docs-surface-muted: #101216;
    --docs-surface-active: #161b23;
    --docs-tint-blue: rgba(34, 90, 234, 0.12);
    --docs-chip-bg: rgba(59, 130, 246, 0.16);
    --docs-chip-fg: #8fb0ff;
    --docs-link: #8fb0ff;
    --docs-link-hover: #93c5fd;
    --docs-topbar-bg: rgba(8, 9, 12, 0.92);
    --docs-code-inline-bg: #161b23;
    --docs-code-inline-fg: #f472b6;
    --docs-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    --docs-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
    --wh-border-blue: rgba(59, 130, 246, 0.22);
    --wh-card-hover-border: rgba(59, 130, 246, 0.35);
    --wh-panel-dot: #3a4252;

    /* WinningHunter logo lockup (icon tile + wordmark PNG) — same as dark-mode.css */
    --wh-logo-icon-width-ratio: 21.2%;
    --wh-logo-wordmark-mask-start: 25.5%;
}

/* ── Shared shell (Docs.php + DocsHub.php) ── */
body.docs-page,
body {
    color: var(--docs-text);
    background: var(--docs-surface);
}

.docs-page a,
body .docs-topbar a.docs-brand {
    color: inherit;
}

.docs-topbar {
    background:
        radial-gradient(
            ellipse 105% 200% at 50% -55%,
            rgba(34, 90, 234, 0.11) 0%,
            rgba(34, 90, 234, 0.035) 44%,
            transparent 60%
        ),
        var(--docs-topbar-bg) !important;
    border-bottom-color: var(--docs-border) !important;
}

.docs-brand {
    color: var(--docs-heading) !important;
}

.docs-brand-tag {
    background: var(--docs-chip-bg) !important;
    color: var(--docs-chip-fg) !important;
}

.docs-brand-logo-wrap {
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

/* WinningHunter logo: keep icon on white tile; invert wordmark only (matches app sidebar). */
html[data-theme="dark"] .docs-brand-logo-wrap {
    position: relative;
}

html[data-theme="dark"] .docs-brand-logo-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--wh-logo-icon-width-ratio);
    height: 100%;
    background: url("/images/webclip.png") center / contain no-repeat;
    border-radius: 18%;
    z-index: 1;
    pointer-events: none;
}

html[data-theme="dark"] .docs-brand-logo {
    filter: invert(1) hue-rotate(180deg);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        transparent var(--wh-logo-wordmark-mask-start),
        #000 var(--wh-logo-wordmark-mask-start)
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        transparent var(--wh-logo-wordmark-mask-start),
        #000 var(--wh-logo-wordmark-mask-start)
    );
}

.docs-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.docs-search input {
    border-color: var(--docs-border) !important;
    background: var(--docs-surface-muted) !important;
    color: var(--docs-text) !important;
}

.docs-search input:focus {
    background: var(--docs-surface) !important;
    border-color: var(--docs-brand) !important;
}

.docs-search input::placeholder {
    color: var(--docs-muted-2) !important;
}

.docs-search-icon {
    color: var(--docs-muted-2) !important;
}

.docs-search-results {
    background: var(--docs-surface) !important;
    border-color: var(--docs-border) !important;
    box-shadow: var(--docs-shadow) !important;
}

.docs-search-result {
    border-bottom-color: var(--docs-surface-active) !important;
    color: var(--docs-heading) !important;
}

.docs-search-result:hover,
.docs-search-result.is-active {
    background: var(--docs-surface-muted) !important;
}

.docs-search-result-desc {
    color: var(--docs-muted) !important;
}

.docs-search-empty {
    color: var(--docs-muted-2) !important;
}

.docs-kbd-hints {
    color: var(--docs-muted) !important;
}

.docs-kbd-hint kbd {
    color: var(--docs-muted) !important;
    background: var(--docs-surface-muted) !important;
    border-color: var(--docs-border) !important;
    box-shadow: none !important;
}

.docs-kbd-sep {
    background: var(--docs-border) !important;
}

.docs-topbar-muted {
    color: var(--docs-nav-muted) !important;
}

.docs-topbar-muted:hover {
    background: var(--docs-tint-blue) !important;
    color: var(--docs-link-hover) !important;
    border-color: rgba(59, 130, 246, 0.22) !important;
    box-shadow: none !important;
}

/* ── Docs.php sidebar ── */
html[data-theme="dark"] .docs-sidebar-group[open] {
    background: rgba(21, 24, 30, 0.65) !important;
    border-color: var(--docs-border) !important;
}

html[data-theme="dark"] .docs-sidebar-group > summary {
    color: var(--docs-muted-2) !important;
}

html[data-theme="dark"] .docs-sidebar-group > summary:hover,
html[data-theme="dark"] .docs-sidebar-group[open] > summary {
    background: var(--docs-surface-active) !important;
    color: var(--docs-text) !important;
}

html[data-theme="dark"] .docs-sidebar-group-chevron {
    color: var(--docs-muted-2) !important;
}

html[data-theme="dark"] .docs-sidebar-group[open] > summary .docs-sidebar-group-chevron {
    color: var(--docs-text) !important;
}

html[data-theme="dark"] .docs-sidebar-group--contains-active:not([open]) > summary {
    background: var(--docs-chip-bg) !important;
    color: var(--docs-chip-fg) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .docs-sidebar-group--contains-active:not([open]) > summary:hover {
    background: rgba(59, 130, 246, 0.22) !important;
    color: var(--docs-link-hover) !important;
}

html[data-theme="dark"] .docs-sidebar-group-title {
    color: var(--docs-muted-2) !important;
}

html[data-theme="dark"] .docs-sidebar-link {
    color: var(--docs-nav-muted) !important;
}

html[data-theme="dark"] .docs-sidebar-link:hover {
    background: rgba(59, 130, 246, 0.16) !important;
    color: var(--docs-link-hover) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .docs-sidebar-link.is-active {
    background: var(--docs-chip-bg) !important;
    color: var(--docs-chip-fg) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .docs-sidebar-link.is-active:hover {
    background: rgba(59, 130, 246, 0.22) !important;
    color: var(--docs-link-hover) !important;
}

/* ── Docs.php main content ── */
html[data-theme="dark"] .docs-main-meta {
    color: var(--docs-muted-2) !important;
}

html[data-theme="dark"] .docs-main-title,
html[data-theme="dark"] .docs-content h1,
html[data-theme="dark"] .docs-content h2,
html[data-theme="dark"] .docs-content h3,
html[data-theme="dark"] .docs-content h4,
html[data-theme="dark"] .docs-content strong {
    color: var(--docs-heading) !important;
}

html[data-theme="dark"] .docs-main-description,
html[data-theme="dark"] .docs-content {
    color: var(--docs-text) !important;
}

html[data-theme="dark"] .docs-main-edit {
    color: var(--docs-muted) !important;
    border-top-color: var(--docs-border) !important;
}

html[data-theme="dark"] .docs-main-edit:hover {
    color: var(--docs-link) !important;
}

html[data-theme="dark"] .docs-content em {
    color: var(--docs-muted) !important;
}

html[data-theme="dark"] .docs-content a {
    color: var(--docs-link) !important;
}

html[data-theme="dark"] .docs-content .docs-heading-anchor {
    color: var(--docs-muted) !important;
    border-color: var(--docs-border) !important;
    background: var(--docs-surface-muted) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .docs-content .docs-heading-anchor:hover {
    color: var(--docs-link) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    background: var(--docs-chip-bg) !important;
}

html[data-theme="dark"] .docs-content a:is([href^="/docs/"], [href="/docs"], [href^="/docs#"], [href^="/docs?"]):hover,
html[data-theme="dark"] .docs-content a[href^="#"]:not(.docs-heading-anchor):hover {
    background: rgba(59, 130, 246, 0.16) !important;
    color: var(--docs-link-hover) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .docs-content blockquote {
    background: var(--docs-surface-muted) !important;
    color: var(--docs-muted) !important;
}

html[data-theme="dark"] .docs-content hr {
    border-top-color: var(--docs-border) !important;
}

html[data-theme="dark"] .docs-content code {
    background: var(--docs-code-inline-bg) !important;
    color: var(--docs-code-inline-fg) !important;
    border-color: var(--docs-border) !important;
}

html[data-theme="dark"] .docs-content table thead {
    background: var(--docs-surface-muted) !important;
}

html[data-theme="dark"] .docs-content table th {
    color: var(--docs-heading) !important;
}

html[data-theme="dark"] .docs-content table th,
html[data-theme="dark"] .docs-content table td {
    border-bottom-color: var(--docs-border) !important;
}

html[data-theme="dark"] .docs-title-copy-md,
html[data-theme="dark"] .docs-title-open > summary {
    background: var(--docs-surface-muted) !important;
    border-color: var(--docs-border) !important;
    color: var(--docs-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .docs-title-copy-md:hover,
html[data-theme="dark"] .docs-title-open > summary:hover,
html[data-theme="dark"] .docs-title-open[open] > summary {
    background: var(--docs-chip-bg) !important;
    color: var(--docs-link) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
}

html[data-theme="dark"] .docs-title-open-panel {
    background: var(--docs-surface-muted) !important;
    border-color: var(--docs-border) !important;
    box-shadow: var(--docs-shadow-lg) !important;
}

html[data-theme="dark"] .docs-title-open-item {
    color: var(--docs-heading) !important;
}

html[data-theme="dark"] .docs-title-open-item:hover {
    background: var(--docs-surface-active) !important;
}

html[data-theme="dark"] .docs-title-open-item-icon--svg {
    color: var(--docs-muted) !important;
}

html[data-theme="dark"] .docs-title-open-item:hover .docs-title-open-item-icon--svg {
    color: var(--docs-link) !important;
}

html[data-theme="dark"] .docs-title-open-item--disabled {
    color: var(--docs-muted-2) !important;
}

/* ── On this page ── */
html[data-theme="dark"] .docs-onpage-title {
    color: var(--docs-muted) !important;
}

html[data-theme="dark"] .docs-onpage-list li {
    border-left-color: var(--docs-border) !important;
}

html[data-theme="dark"] .docs-onpage-list a {
    color: var(--docs-muted) !important;
}

html[data-theme="dark"] .docs-onpage-list a:hover {
    color: var(--docs-heading) !important;
}

html[data-theme="dark"] .docs-onpage-list a.is-active {
    color: var(--docs-link) !important;
}

/* ── API reference endpoints ── */
html[data-theme="dark"] .docs-endpoint {
    border-top-color: var(--docs-border) !important;
}

html[data-theme="dark"] .docs-endpoint-path,
html[data-theme="dark"] .docs-endpoint-param-name {
    color: var(--docs-heading) !important;
}

html[data-theme="dark"] .docs-endpoint-summary,
html[data-theme="dark"] .docs-endpoint-param-desc {
    color: var(--docs-muted) !important;
}

html[data-theme="dark"] .docs-endpoint-auth {
    background: var(--docs-surface-muted) !important;
    border-color: var(--docs-border) !important;
    color: var(--docs-muted) !important;
}

html[data-theme="dark"] .docs-endpoint-auth code {
    background: var(--docs-chip-bg) !important;
    color: var(--docs-chip-fg) !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .docs-endpoint-section-title,
html[data-theme="dark"] .docs-endpoint-param-type,
html[data-theme="dark"] .docs-endpoint-param-meta {
    color: var(--docs-muted-2) !important;
}

html[data-theme="dark"] .docs-endpoint-param {
    border-top-color: var(--docs-border) !important;
}

html[data-theme="dark"] .docs-endpoint-param-meta-sep {
    color: var(--docs-border-strong) !important;
}

/* ── DocsHub landing ── */
html[data-theme="dark"] .docs-secondary-cta,
html[data-theme="dark"] .hero-showcase-link {
    box-shadow: none !important;
}

html[data-theme="dark"] .hero-panel {
    background: rgba(21, 24, 30, 0.92) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .section {
    background: rgba(21, 24, 30, 0.76) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .surface-card:hover,
html[data-theme="dark"] .integration-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .integration-card-logo {
    background: var(--docs-surface-muted) !important;
}

html[data-theme="dark"] {
    --wh-muted: var(--docs-muted);
    --wh-nav-muted: var(--docs-nav-muted);
}