/* VoltaireFi Documentation Styles — palette aligned
   Text: #d4c6e1  | Surface: #201d26 | Page: #0a090c */

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* --- Layout --- */
.docs-layout {
    display: flex;
    min-height: calc(100vh - 4rem);
    background: #0a090c;
    max-width: none;
    margin: 0;
    position: relative;
    width: 100%;
}

/* Nav visibility */
nav { z-index: 1000 !important; }
@media (min-width: 768px) {
    nav .hidden.md\:flex,
    nav div.hidden.md\:flex { display: flex !important; }
}
body:has(.docs-layout) nav .hidden.md\:flex { display: flex !important; }

/* Utility for Alpine x-cloak to avoid flash of content */
[x-cloak] { display: none !important; }

/* --- Containers --- */
.docs-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
}

/* Sidebar */
.docs-sidebar {
    width: 280px;
    background: #201d26;
    border-right: 1px solid rgba(212,198,225,0.16);
    overflow-y: auto;
    flex-shrink: 0;
    position: sticky;
    top: 4rem;
    height: calc(100vh - 4rem);
}

.docs-header {
    padding: 2rem 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(212,198,225,0.16);
}

.docs-title {
    color: #d4c6e1;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

/* Search */
.docs-search { position: relative; }
.search-input {
    width: 100%;
    background: #0a090c;
    border: 1px solid rgba(212,198,225,0.16);
    border-radius: 0.5rem;
    padding: 0.75rem;
    color: #d4c6e1;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input:focus {
    outline: none;
    border-color: rgba(212,198,225,0.32);
    box-shadow: 0 0 0 3px rgba(212,198,225,0.18);
}
.search-input::placeholder { color: #d4c6e1; }

/* Nav tree */
.docs-nav { padding: 1rem 0; }
.nav-section { margin-bottom: 1.5rem; }

.section-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    color: #d4c6e1;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-icon { margin-right: 0.5rem; font-size: 0.875rem; }
.section-documents { margin-left: 0.5rem; }

.nav-document {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: #d4c6e1;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-left: 3px solid transparent;
}
.nav-document:hover {
    background: #0a090c;
    color: #d4c6e1;
    border-left-color: rgba(212,198,225,0.32);
}
.nav-document.active {
    background: #0a090c;
    color: #d4c6e1;
    border-left-color: rgba(212,198,225,0.48);
}

.doc-icon { margin-right: 0.75rem; font-size: 1rem; }
.doc-title { font-size: 0.875rem; font-weight: 400; }

.empty-state { padding: 2rem 1.5rem; text-align: center; color: #d4c6e1; }

/* --- Main content --- */
.docs-content {
    flex: 1;
    background: #201d26;
    overflow-y: auto;
}

.doc-viewer {
    height: 100%;
    width: 100%;
    background: #201d26;
    min-width: 0; /* allow children to shrink on small screens */
}

/* Welcome state */
.welcome-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #201d26;
}
.welcome-content { text-align: center; max-width: 500px; padding: 2rem; }
.welcome-content h2 {
    color: #d4c6e1;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.welcome-content p { color: #d4c6e1; font-size: 1.125rem; line-height: 1.6; }

/* Loading state */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #201d26;
    color: #d4c6e1;
}
.loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid #d4c6e1;
    border-top: 2px solid #d4c6e1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* HTMX indicators */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }

/* --- Article content --- */
.doc-viewer .article-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    line-height: 1.7;
    background: #201d26;
}

.doc-viewer h1 { color: #d4c6e1; font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; }
.doc-viewer h2 { color: #d4c6e1; font-size: 2rem; font-weight: 600; margin: 2.5rem 0 1.5rem 0; line-height: 1.3; }
.doc-viewer h3 { color: #d4c6e1; font-size: 1.5rem; font-weight: 600; margin: 2rem 0 1rem 0; line-height: 1.4; }

.doc-viewer p,
.doc-viewer ul,
.doc-viewer ol,
.doc-viewer li { color: #d4c6e1; }

/* Avoid text overflow on narrow viewports */
.doc-viewer p,
.doc-viewer li { overflow-wrap: anywhere; }

.doc-viewer blockquote {
    border-left: 4px solid rgba(212,198,225,0.48);
    background: #201d26;
    margin: 2rem 0;
    padding: 1.5rem;
    font-style: italic;
    color: #d4c6e1;
}

.doc-viewer code {
    background: #201d26;
    color: #d4c6e1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    outline: 1px solid rgba(212,198,225,0.16);
}

.doc-viewer pre {
    background: #0a090c;
    color: #d4c6e1;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid rgba(212,198,225,0.16);
}
.doc-viewer pre code { background: none; color: #d4c6e1; padding: 0; border-radius: 0; }

/* --- Tables --- */
.doc-viewer table {
  width: 100%;                        /* take full container width */
  border-collapse: collapse;           /* remove double borders */
  margin: 2rem 0;                      /* spacing above/below table */
  font-size: 0.85rem;                  /* smaller font */
  font-family: 'Inter', sans-serif;    /* consistent with docs */
  color: var(--doc-text-color);        /* white-ish text on dark */
  background: #201d26;                 /* same as main doc background */
  border: 1px solid rgba(212,198,225,0.16); /* subtle border */
  border-radius: 0.5rem;
  overflow: hidden;
}

.doc-viewer th,
.doc-viewer td {
  padding: 0.5rem 1rem;                /* tighter padding */
  text-align: center;                   /* center text horizontally */
  vertical-align: middle;               /* center text vertically */
  border-bottom: 1px solid rgba(212,198,225,0.16); /* subtle row separation */
  background: #201d26;                  /* same background for all cells */
}

.doc-viewer th {
  padding: 0.4rem 0.8rem;    /* slightly tighter padding */
  font-size: 0.85rem;        /* reduce font size to fit better */
  font-weight: 600;                     /* header bold */
  text-align: center;                   /* center header text */
  vertical-align: middle;               /* center text vertically */
  font-size: 0.9rem;                    /* slightly larger than body cells */
}

.doc-viewer tr:last-child td {
  border-bottom: none;                  /* remove extra border at end */
}

.doc-viewer tr:hover {
  background: #201d26;                  /* disable hover shading */
}

/* --- Images --- */
.doc-viewer img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .docs-layout { flex-direction: column; }
    .docs-sidebar { width: 100%; max-height: 50vh; order: 2; }
    .docs-content { order: 1; min-height: 60vh; }
    .doc-viewer .article-content { padding: 2rem 1rem; }
    .doc-viewer h1 { font-size: 2rem; }
    .doc-viewer h2 { font-size: 1.5rem; }
    .doc-viewer p, .doc-viewer ul, .doc-viewer ol { font-size: 1rem; }

    /* Make large tables scrollable horizontally */
    .doc-viewer table { display: block; overflow-x: auto; white-space: nowrap; }
    .doc-viewer th, .doc-viewer td { white-space: nowrap; }

    /* Slightly tighter UI for nav */
    .nav-document { padding: 0.5rem 1rem; }
    .section-header { padding: 0.5rem 1rem; font-size: 0.75rem; }
    .docs-header { padding: 1rem 1rem 0.75rem; }
    .docs-title { font-size: 1.25rem; }
    .doc-viewer pre { font-size: 0.8rem; }
}

/* --- Print --- */
@media print {
    .docs-sidebar { display: none; }
    .docs-content { width: 100%; }
    .doc-viewer .article-content { max-width: none; padding: 0; }
}

/* Restore bullets/numbers inside documentation content */
.doc-viewer ul, .article-content ul {
    list-style: disc !important;
    list-style-position: outside !important;
    padding-left: 1.5rem !important;
}

.doc-viewer ol, .article-content ol {
    list-style: decimal !important;
    list-style-position: outside !important;
    padding-left: 1.5rem !important;
}

.doc-viewer li, .article-content li {
    display: list-item !important;
}

/* Make sure markers are visible on dark background */
.doc-viewer li::marker, .article-content li::marker {
    color: #E4E8F1 !important;
}

/* --- Restore Markdown spacing rhythm --- */
.doc-viewer p {
  margin: 1rem 0;             /* space above/below paragraphs */
  line-height: 1.7;           /* readable line spacing */
}

.doc-viewer ul,
.doc-viewer ol {
  margin: 1rem 0 1.5rem 1.5rem;  /* space before/after + left indent */
  padding-left: 1.25rem;
  line-height: 1.6;
}

.doc-viewer li {
  margin: 0.25rem 0;          /* small space between list items */
  line-height: 1.6;
}


/* 2) Set a shared text color variable. If you switch to light theme later, change this one line. */
:root {
  --doc-text-color: #d4c6e1; /* matches your markdown text color on dark */
}

/* 3) Global font */
body, .docs-layout, .docs-content, .doc-viewer {
  font-family: 'Inter', sans-serif;
  color: var(--doc-text-color);
}

/* Altair / Vega-Lite charts */
.vega, .vega * {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;   /* adjust as needed */
  fill: #d4c6e1 !important;  /* ensure text is visible on dark background */
  color: #d4c6e1 !important;
}

/* Plotly charts */
.js-plotly-plot, .plotly, .plotly text {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;   /* adjust as needed */
  fill: #d4c6e1 !important;  /* ensure text is visible on dark background */
  color: #d4c6e1 !important;
}


/* Altair / Vega-Lite (SVG renderer) — target common text roles */
.vega .role-title,
.vega .role-axis,
.vega .role-axis-label,
.vega .role-axis-title,
.vega .role-legend,
.vega .role-legend-label,
.vega .role-legend-title,
.vega .mark-text text {
  fill: var(--doc-text-color) !important;
  color: var(--doc-text-color) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Plotly text (SVG) */
.js-plotly-plot .main-svg text,
.plotly .main-svg text {
  fill: var(--doc-text-color) !important;
  color: var(--doc-text-color) !important;
  font-family: 'Inter', sans-serif !important;
}