/* ─────────────────────────────────────────────────────────────────────────
   VIOSO Experience Designer — HonKit documentation theme
   Colour palette: dark workspace, VIOSO cyan accent, deep background
   ───────────────────────────────────────────────────────────────────────── */

/* ── Google Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ────────────────────────────────────────────────────── */
:root {
    --color-bg:           #0b0c0e;
    --color-surface:      #12151a;
    --color-surface-2:    #1a1e26;
    --color-surface-3:    #222733;
    --color-surface-4:    #151a22;
    --color-border:       #2a3040;
    --color-text:         #d6dae2;
    --color-text-muted:   #7a8799;
    --color-accent:       #0d9add;
    --color-accent-glow:  rgba(13, 154, 221, 0.18);
    --color-accent-hover: #3ab8f5;
    --color-heading:      #e8edf5;
    --color-code-bg:      #161b24;
    --color-th-bg:        #1a1e26;
    --color-quote-bg:     rgba(13, 154, 221, 0.08);
    --color-warning-bg:   rgba(255, 165, 0, 0.08);
    --color-warning-border: #ff9800;
    --radius:             6px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html, body {
    background: var(--color-bg) !important;
    color: var(--color-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.book-summary {
    background: var(--color-surface) !important;
    color: var(--color-text-muted);
    border-right: 1px solid var(--color-border);
}

/* Logo block at the top of the sidebar */
.book-summary .book-summary-search-block {
    background: var(--color-surface);
}

.book-summary ul.summary li a {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 400;
    transition: color 0.15s, padding-left 0.15s;
}

.book-summary ul.summary li.active > a,
.book-summary ul.summary li a:hover {
    color: var(--color-accent);
    background: var(--color-accent-glow);
    border-left: 2px solid var(--color-accent);
    padding-left: calc(var(--honkit-indent, 0px) + 16px);
}

.book-summary ul.summary li.divider {
    background: var(--color-border);
}

.book-summary ul.summary li.header {
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 18px 15px 5px 12px;
    opacity: 0.85;
}

/* Indent nested items */
.book-summary ul.summary li ul {
    padding-left: 0;
}

.book-summary ul.summary li ul li a {
    padding-left: 28px;
    font-size: 0.84rem;
}

/* ── Main content area ─────────────────────────────────────────────────── */
.book-body {
    background: var(--color-bg) !important;
}

.book-body .page-wrapper {
    background: var(--color-bg);
}

.book-body .page-wrapper .page-inner {
    max-width: 1160px;
    padding: 24px 24px 52px;
}

.book-body .page-wrapper .page-inner section.normal {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    padding: 18px 20px;
    color: var(--color-text);
}

.book .book-body .page-wrapper .page-inner section.normal,
.book .book-body .page-wrapper .page-inner section.normal p,
.book .book-body .page-wrapper .page-inner section.normal li,
.book .book-body .page-wrapper .page-inner section.normal blockquote,
.book .book-body .page-wrapper .page-inner section.normal td,
.book .book-body .page-wrapper .page-inner section.normal span {
    color: var(--color-text) !important;
}

.book .book-body .page-wrapper .page-inner section.normal ul,
.book .book-body .page-wrapper .page-inner section.normal ol {
    color: var(--color-text);
}

/* ── Logo banner ───────────────────────────────────────────────────────── */
.book-header {
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border);
}

.book-header h1 {
    margin: 0;
    padding-left: 12px;
}

.book-header h1 a {
    display: block;
    width: 220px;
    height: 32px;
    background: url('../images/logo.png') no-repeat left center;
    background-size: contain;
    color: transparent !important;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* Inject the Experience Designer logo into the sidebar header via CSS */
.book-summary::before {
    content: '';
    display: block;
    height: 64px;
    background: var(--color-surface) url('../images/logo.png') no-repeat 16px center;
    background-size: auto 28px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 8px;
}

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

h1 {
    font-size: 1.7rem;
    font-weight: 700;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.4em;
    margin-top: 0;
    color: var(--color-accent-hover);
}

h2 {
    font-size: 1.2rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.25em;
}

h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; color: var(--color-accent); }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

p { margin-bottom: 0.8em; }

strong { color: var(--color-heading); font-weight: 600; }

/* ── Code ──────────────────────────────────────────────────────────────── */
code {
    background: var(--color-code-bg);
    color: #7dd3fc;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.88em;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

pre {
    background: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    overflow-x: auto;
    margin: 1.2em 0;
}

pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: #c9d1d9;
    font-size: 0.9em;
}

.book .book-body .page-wrapper .page-inner section.normal pre,
.book .book-body .page-wrapper .page-inner section.normal pre code,
.book .book-body .page-wrapper .page-inner section.normal pre code.hljs,
.book .book-body .page-wrapper .page-inner section.normal pre .hljs,
.book .book-body .page-wrapper .page-inner section.normal code.hljs {
    background: var(--color-code-bg) !important;
    color: var(--color-heading) !important;
}

.book .book-body .page-wrapper .page-inner section.normal pre .hljs {
    display: block;
    padding: 0;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

th {
    background: var(--color-th-bg);
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    text-align: left;
}

td {
    border: 1px solid var(--color-border);
    padding: 9px 14px;
    color: var(--color-text);
    vertical-align: top;
    background: var(--color-surface-4);
}

.book .book-body .page-wrapper .page-inner section.normal table tbody tr:nth-child(odd) td {
    background: var(--color-surface-4) !important;
}

.book .book-body .page-wrapper .page-inner section.normal table tbody tr:nth-child(even) td {
    background: var(--color-surface-2) !important;
}

.book .book-body .page-wrapper .page-inner section.normal table tbody tr:hover td {
    background: var(--color-surface-3) !important;
    transition: background 0.1s;
}

/* ── Blockquotes / Callouts ────────────────────────────────────────────── */
blockquote {
    border-left: 3px solid var(--color-accent);
    margin: 1.2em 0;
    padding: 12px 18px;
    background: var(--color-quote-bg);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--color-text);
    font-style: normal;
}

blockquote p { margin: 0; }

/* Warning callout — use > **Warning:** prefix */
blockquote:has(strong:first-child) {
    border-left-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

/* ── Horizontal rule ───────────────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2em 0;
}

/* ── Lists ─────────────────────────────────────────────────────────────── */
ul, ol { padding-left: 1.5em; }
li { margin-bottom: 0.3em; }

/* ── Navigation arrows ─────────────────────────────────────────────────── */
.navigation-prev, .navigation-next {
    color: var(--color-text-muted);
}

.navigation-prev:hover, .navigation-next:hover {
    color: var(--color-accent);
}

/* ── Search ────────────────────────────────────────────────────────────── */
.book-summary .book-search input {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius);
}

.book-summary .book-search input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-accent-glow);
}

/* ── Toolbar / font settings ───────────────────────────────────────────── */
.toolbar {
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border);
}

.toolbar .btn {
    color: var(--color-text-muted);
}

.toolbar .btn:hover {
    color: var(--color-accent);
    background: var(--color-accent-glow);
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* ── Keyboard key styling ──────────────────────────────────────────────── */
kbd {
    display: inline-block;
    padding: 2px 7px;
    font-size: 0.82em;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    color: var(--color-heading);
}

/* ── Info / tip / note callout pill ───────────────────────────────────── */
blockquote p:first-child > strong:first-child {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Page heading top bar ──────────────────────────────────────────────── */
.page-inner h1:first-child {
    margin-top: 0;
}

/* ── Sidebar search ────────────────────────────────────────────────────── */
.book-summary .book-search {
    padding: 8px 10px;
}

/* ── Active chapter highlight pill ────────────────────────────────────── */
.book-summary ul.summary li.active > a {
    border-radius: 0 4px 4px 0;
}

/* ── Section dividers: slight extra spacing ───────────────────────────── */
.book-summary ul.summary li.divider {
    height: 1px;
    margin: 4px 0;
}

/* ── Print friendliness ────────────────────────────────────────────────── */
@media print {
    .book-summary, .navigation-prev, .navigation-next { display: none; }
    .book-body .page-wrapper .page-inner { max-width: 100%; padding: 0; }
    .book-body .page-wrapper .page-inner section.normal {
        border: none; box-shadow: none; background: #fff; color: #000;
    }
}