/* ==========================================================================
   PAGES — Page-specific styles (directory, docs, search, about, architecture,
   changelog, publications, live trading, blog, etc.)
   Split from custom.css
   ========================================================================== */

/* Header search bar */
.header-search { position: relative; margin-left: auto; margin-right: 0; display: flex; align-items: center; }
.search-icon-btn {
    background: none; border: none; color: #64748b;
    cursor: pointer; padding: 0.5rem; line-height: 1; font-size: 1.1rem;
    transition: color 0.2s; border-radius: 6px;
}
.search-icon-btn:hover { color: #e2e8f0; background: rgba(255,255,255,0.06); }
.header-search-box {
    display: none; align-items: center; position: absolute; right: 0; top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card, #16161f); border-radius: 8px;
    padding: 0.5rem 0.75rem; border: 1px solid rgba(255,255,255,0.15);
    width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 100;
}
.header-search-box.open { display: flex; }
.header-search-box:focus-within { border-color: rgba(96, 165, 250, 0.5); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* Dash 4.0 dcc.Input renders as .dash-input-container > .dash-input-element */
#header-search-input.dash-input-container {
    background: transparent !important; border: none !important; color: #e2e8f0 !important;
    height: auto !important; overflow: visible !important;
}
#header-search-input .dash-input-element,
#header-search-input input,
.header-search-box .dash-input-element,
.header-search-box input {
    background: transparent !important; border: none !important; color: #e2e8f0 !important;
    outline: none !important; flex: 1; min-width: 0; font-size: 0.875rem;
    caret-color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important;
    width: 100%; padding: 0.25rem 0 !important;
}
#header-search-input .dash-input-element::placeholder,
#header-search-input input::placeholder,
.header-search-box input::placeholder { color: #64748b !important; -webkit-text-fill-color: #64748b !important; }
#search-results-dropdown {
    display: none; position: absolute; top: 100%; right: 0;
    width: 360px; max-height: 420px; overflow-y: auto;
    background: #1e293b; border-radius: 8px; border: 1px solid #334155;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 9999; margin-top: 0.5rem;
}
#search-results-dropdown a {
    display: block; padding: 0.75rem 1rem; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
#search-results-dropdown a:hover { background: rgba(59, 130, 246, 0.1); }
#search-results-dropdown .search-name { color: #e2e8f0; font-size: 0.875rem; font-weight: 500; }
#search-results-dropdown .search-meta { color: #64748b; font-size: 0.75rem; }
#search-results-dropdown .search-empty { padding: 1rem; color: #64748b; text-align: center; }
#search-results-dropdown .search-category {
    padding: 0.3rem 0.75rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-top: 1px solid rgba(148,163,184,0.1);
}
#search-results-dropdown .search-category:first-child { border-top: none; }
#search-results-dropdown .search-meta b { color: #f59e0b; font-weight: 600; }

/* Topbar search bar */
.topbar-search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    max-width: 480px;
    margin: 0 auto;
    transition: border-color 0.2s, background 0.2s;
}

.topbar-search-bar:focus-within {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

/* Reddit-style section filter tag inside search bar */
.search-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0.5rem;
    flex-shrink: 0;
    border: 1px solid;
}
.search-section-tag .section-tag-close {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.85rem;
    margin-left: 0.15rem;
}
.search-section-tag .section-tag-close:hover {
    opacity: 1;
}
body.theme-light .search-section-tag {
    opacity: 0.9;
}

.topbar-search-input {
    background: transparent !important;
    border: none !important;
    color: #e2e8f0 !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}

.topbar-search-input::placeholder {
    color: #475569;
}

.topbar-search-results {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    max-width: calc(100vw - 320px);
    z-index: 200;
}

/* Search light mode */
body.theme-light .header-search-box {
    background: #fff !important; border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
body.theme-light .header-search-box:focus-within {
    border-color: rgba(37, 99, 235, 0.5) !important;
}
body.theme-light #header-search-input.dash-input-container {
    background: transparent !important; color: #0f172a !important;
}
body.theme-light #header-search-input .dash-input-element,
body.theme-light #header-search-input input,
body.theme-light .header-search-box input {
    color: #0f172a !important; -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important; background: transparent !important;
}
body.theme-light #header-search-input .dash-input-element::placeholder,
body.theme-light .header-search-box input::placeholder {
    color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important;
}
body.theme-light .search-icon-btn { color: #5b6b7f !important; }
body.theme-light .search-icon-btn:hover { color: #0f172a !important; }

/* Search dropdown light mode */
body.theme-light #search-results-dropdown { background: #ffffff; border-color: #e2e8f0; }
body.theme-light .search-results-dropdown .search-name { color: #1e293b; }
body.theme-light #search-results-dropdown .search-category { color: #475569; border-top-color: rgba(203,213,225,0.3); }
body.theme-light #search-results-dropdown .search-meta b { color: #d97706; }

/* Directory page */
.directory-page { max-width: 1200px; }
.directory-page .directory-filter {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; color: #e2e8f0;
    width: 100%; font-size: 0.9rem; outline: none; margin-bottom: 1.5rem;
    overflow: hidden;
}
.directory-page .directory-filter .dash-input-element,
.directory-page .directory-filter input {
    background: transparent !important; border: none !important; color: #e2e8f0 !important;
    outline: none !important; width: 100%; font-size: 0.9rem;
    padding: 0.6rem 1rem !important; caret-color: #e2e8f0 !important;
}
.directory-page .directory-filter .dash-input-element::placeholder,
.directory-page .directory-filter input::placeholder {
    color: #64748b !important;
}
.directory-page .directory-filter:focus-within { border-color: rgba(96, 165, 250, 0.5); }
.directory-page .directory-section-title { margin-top: 2rem; margin-bottom: 1rem; color: #e2e8f0; }
.directory-page .directory-card {
    height: 100%; position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.directory-page .directory-card:hover {
    border-color: rgba(96, 165, 250, 0.3) !important;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.08);
}
.directory-page .directory-sublinks a {
    color: #60a5fa; font-size: 0.75rem; margin-right: 0.75rem; text-decoration: none;
}
.directory-page .directory-sublinks a:hover { text-decoration: underline; }

/* Directory Hover Preview Cards */
.directory-page .row { overflow: visible; }
.directory-page .directory-col { overflow: visible; }

.directory-preview {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 280px;
    background: #1a1a2e;
    border: 1px solid #2a3a5a;
    border-radius: 12px;
    padding: 1rem;
    padding-bottom: calc(1rem + 14px);
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(59, 130, 246, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.2s;
    transition-delay: 0s;
}
/* Invisible bridge so cursor can travel from card to preview without gap */
.directory-preview::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 14px;
}
.directory-preview::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #1a1a2e;
    border-right: 1px solid #2a3a5a;
    border-bottom: 1px solid #2a3a5a;
}
.directory-card:hover .directory-preview {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    transition-delay: 0.15s;
}

/* Left-column cards: pin preview to left edge */
.directory-page .row > .directory-col:nth-child(4n+1) .directory-preview {
    left: 0; transform: translateX(0) translateY(8px);
}
.directory-page .row > .directory-col:nth-child(4n+1) .directory-card:hover .directory-preview {
    transform: translateX(0) translateY(0);
}
.directory-page .row > .directory-col:nth-child(4n+1) .directory-preview::after {
    left: 2rem;
}

/* Right-column cards: pin preview to right edge */
.directory-page .row > .directory-col:nth-child(4n) .directory-preview {
    left: auto; right: 0; transform: translateX(0) translateY(8px);
}
.directory-page .row > .directory-col:nth-child(4n) .directory-card:hover .directory-preview {
    transform: translateX(0) translateY(0);
}
.directory-page .row > .directory-col:nth-child(4n) .directory-preview::after {
    left: auto; right: 2rem;
}

/* --- Directory preview cards (light mode) --- */
body.theme-light .directory-preview {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
}
body.theme-light .directory-preview::after {
    background: #ffffff !important;
    border-right-color: #cbd5e1 !important;
    border-bottom-color: #cbd5e1 !important;
}
body.theme-light .directory-page .directory-card {
    border-color: #cbd5e1 !important;
}
body.theme-light .directory-page .directory-card:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1) !important;
}

/* --- Directory page text contrast (light mode) --- */
body.theme-light .dir-page-heading,
body.theme-light .dir-section-heading {
    color: #0f172a !important;
}
body.theme-light .dir-card-name {
    color: #1e293b !important;
}
body.theme-light .dir-preview-name {
    color: #0f172a !important;
}
body.theme-light .dir-card-desc {
    color: #475569 !important;
}
body.theme-light .dir-preview-desc {
    color: #334155 !important;
}
body.theme-light .dir-muted,
body.theme-light .dir-date {
    color: #64748b !important;
}
body.theme-light .dir-section-label {
    opacity: 1 !important;
    color: #475569 !important;
}
body.theme-light .dir-arrow {
    color: #2563eb !important;
}
body.theme-light .dir-preview-footer {
    border-top-color: #e2e8f0 !important;
}
body.theme-light .dir-start-here {
    background: #f0f4f8 !important;
    border-left-color: #3b82f6 !important;
}
body.theme-light .dir-tag {
    color: #1e40af !important;
    background: rgba(59, 130, 246, 0.12) !important;
}

/* --- Directory page text contrast (dark mode - improve muted text) --- */
.dir-card-desc {
    color: #b0bec5 !important;
}
.dir-preview-desc {
    color: #d1d5db !important;
}
.dir-muted,
.dir-date {
    color: #8b9bb0 !important;
}

/* Directory filter light mode */
body.theme-light .directory-page .directory-filter { color: #1e293b; }
body.theme-light .directory-filter input { color: #1e293b !important; caret-color: #1e293b !important; }
body.theme-light .directory-section-title { color: #1e293b; }

/* Docs page TOC */
.docs-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(71, 85, 105, 0.3);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}
.docs-toc-link {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.docs-toc-link:hover {
    background: rgba(59, 130, 246, 0.25);
    color: #bfdbfe;
    text-decoration: none;
}
.docs-back-to-top {
    font-size: 0.75rem;
    color: #64748b;
    text-decoration: none;
    margin-left: 0.75rem;
}
.docs-back-to-top:hover {
    color: #93c5fd;
}
body.theme-light .docs-toc {
    background: rgba(241, 245, 249, 0.8);
    border-color: rgba(203, 213, 225, 0.5);
}
body.theme-light .docs-toc-link {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.15);
}
body.theme-light .docs-toc-link:hover {
    background: rgba(37, 99, 235, 0.15);
    color: #1d4ed8;
}
body.theme-light .docs-back-to-top {
    color: #64748b;
}
body.theme-light .docs-back-to-top:hover {
    color: #2563eb;
}

/* Docs page light-mode text contrast overrides */
body.theme-light .docs-entry span[style*="color"],
body.theme-light .docs-section h3[style*="color"] {
    color: #1e293b !important;
}
body.theme-light .docs-entry p[style*="color"] {
    color: #475569 !important;
}
body.theme-light .docs-entry {
    background-color: rgba(241, 245, 249, 0.6) !important;
    border-color: rgba(203, 213, 225, 0.4) !important;
}
body.theme-light .docs-section .docs-section-entries > div {
    background-color: rgba(241, 245, 249, 0.5) !important;
}
body.theme-light .main-content h2[style*="color"] {
    color: #1e293b !important;
}
body.theme-light .main-content p[style*="color"] {
    color: #475569 !important;
}
body.theme-light .main-content h3[style*="color"] {
    color: #1e293b !important;
}
body.theme-light .main-content pre[style*="color"] {
    color: #334155 !important;
    background-color: rgba(241, 245, 249, 0.8) !important;
    border-color: rgba(203, 213, 225, 0.5) !important;
}
body.theme-light .main-content span[style*="color"] {
    color: #1e293b !important;
}

/* ==========================================================================
   Contrast fixes -- Architecture page (13 elements)
   ========================================================================== */

body.theme-light .architecture-page h4 {
    color: #334155 !important;
}

body.theme-light .architecture-page div[style*="color: #64748b"],
body.theme-light .architecture-page div[style*="color:#64748b"] {
    color: #334155 !important;
}

body.theme-light .architecture-page span[style*="color: #e2e8f0"],
body.theme-light .architecture-page span[style*="color:#e2e8f0"] {
    color: #1e293b !important;
}

body.theme-light .architecture-page span[style*="color: #94a3b8"],
body.theme-light .architecture-page span[style*="color:#94a3b8"] {
    color: #475569 !important;
}

body.theme-light .architecture-page code {
    color: #334155 !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   Contrast fixes -- Live Trading page (27 elements)
   ========================================================================== */

body.theme-light .live-trading-page h4 {
    color: #334155 !important;
}

body.theme-light .live-trading-page th {
    color: #334155 !important;
}

body.theme-light .live-trading-page td[style*="color: #94a3b8"],
body.theme-light .live-trading-page td[style*="color:#94a3b8"] {
    color: #475569 !important;
}

body.theme-light .live-trading-page td[style*="color: #64748b"],
body.theme-light .live-trading-page td[style*="color:#64748b"] {
    color: #334155 !important;
}

body.theme-light .live-trading-page td span[style*="color: #64748b"],
body.theme-light .live-trading-page td span[style*="color:#64748b"] {
    color: #334155 !important;
}

body.theme-light .live-trading-page span[style*="color: #94a3b8"],
body.theme-light .live-trading-page span[style*="color:#94a3b8"] {
    color: #475569 !important;
}

body.theme-light .live-trading-page span[style*="color: #e2e8f0"],
body.theme-light .live-trading-page span[style*="color:#e2e8f0"] {
    color: #1e293b !important;
}

body.theme-light .live-trading-page span[style*="color: #64748b"],
body.theme-light .live-trading-page span[style*="color:#64748b"] {
    color: #334155 !important;
}

body.theme-light .live-trading-page span[style*="color: #475569"],
body.theme-light .live-trading-page span[style*="color:#475569"] {
    color: #334155 !important;
}
body.theme-light .live-trading-page p[style*="color: #475569"],
body.theme-light .live-trading-page p[style*="color:#475569"] {
    color: #334155 !important;
}