/* Custom styles for duckdb-behavioral documentation */

/* Typography refinements */
:root {
    --content-max-width: 860px;
}

.content main {
    max-width: var(--content-max-width);
}

/* Code block styling */
pre {
    border-radius: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

code {
    font-size: 0.9em;
}

/* ── Inline code readability ───────────────────────────────────────────
 * mdBook renders inline backtick text as bare <code> elements (no .hljs
 * class). The built-in theme CSS only styles .hljs elements, leaving
 * inline code with no explicit color or background — it inherits the
 * parent text color and has a transparent background. This produces
 * insufficient visual distinction and poor readability across themes.
 *
 * These rules set explicit color + background for inline code in all
 * contexts: paragraphs, tables, lists, blockquotes, headings, and
 * links. Colors follow GitHub's inline code palette for familiarity.
 * The :not(pre) > code selector targets only inline code, leaving
 * syntax-highlighted code blocks inside <pre> untouched.
 */

/* Base shape and spacing for inline code */
:not(pre) > code {
    padding: 0.2em 0.4em;
    border-radius: 6px;
}

/* ── Light theme ──────────────────────────────────────────────────── */
.light :not(pre) > code {
    color: #1F2328;
    background-color: rgba(175, 184, 193, 0.2);
}

/* Inline code inside links: inherit link color, keep code background */
.light a > code {
    color: inherit;
}

/* ── Dark theme (navy) ────────────────────────────────────────────── */
.navy :not(pre) > code {
    color: #E6EDF3;
    background-color: rgba(110, 118, 129, 0.4);
}

.navy a > code {
    color: inherit;
}

/* ── Dark theme (coal) — fallback ─────────────────────────────────── */
.coal :not(pre) > code {
    color: #E6EDF3;
    background-color: rgba(110, 118, 129, 0.4);
}

.coal a > code {
    color: inherit;
}

/* ── Table styling ────────────────────────────────────────────────────
 * Tables use two layers of overflow handling:
 *
 * 1. CSS fallback: display:block + overflow-x:auto on the <table>
 *    itself. Works without JavaScript but can cause minor rendering
 *    quirks in some browsers.
 *
 * 2. JS-enhanced: theme-toggle.js wraps each table in a .table-wrapper
 *    <div> with overflow-x:auto. The table reverts to display:table
 *    for proper column layout. This is the primary path.
 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    /* CSS-only fallback for horizontal scroll */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* JS-enhanced: when wrapped in .table-wrapper, restore natural layout */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1em 0;
}

.table-wrapper table {
    display: table;
    width: auto;
    min-width: 100%;
    margin: 0;
    overflow-x: visible;
}

table thead th {
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--table-border-color);
    padding: 8px 12px;
    white-space: nowrap;
}

table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--table-border-color);
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* Performance numbers emphasis — prevent wrapping in data cells */
table td code {
    white-space: nowrap;
}

/* Prevent benchmark function names from wrapping mid-name */
table td:first-child,
table th:first-child {
    white-space: nowrap;
}

/* ── Visible scrollbars for overflow containers ───────────────────────
 * iOS Safari and mobile Chrome hide scrollbars by default. Users see
 * content "cut off" with no indication that they can scroll. These
 * rules force a persistent thin scrollbar on WebKit/Blink browsers.
 */
table::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.mermaid::-webkit-scrollbar {
    height: 6px;
}

table::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track,
.mermaid::-webkit-scrollbar-track {
    background: transparent;
}

table::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.mermaid::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.3);
    border-radius: 3px;
}

table::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover,
.mermaid::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.5);
}

/* Sidebar refinements */
.sidebar .sidebar-scrollbox {
    padding-top: 16px;
}

/* Navigation section headers */
.chapter li.part-title {
    margin-top: 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

/* Heading anchors */
.content main h1 {
    margin-top: 0;
    padding-top: 0;
}

.content main h2 {
    margin-top: 2em;
    padding-top: 0.5em;
    border-top: 1px solid var(--table-border-color);
}

.content main h3 {
    margin-top: 1.5em;
}

/* Blockquote styling for notes */
blockquote {
    border-left: 4px solid var(--sidebar-active);
    padding: 0.5em 1em;
    margin: 1em 0;
    background-color: var(--quote-bg);
}

/* ── Theme toggle ────────────────────────────────────────────────────
 * Hide mdBook's multi-theme dropdown entirely. A custom JS toggle
 * (theme-toggle.js) switches between light and navy (dark) themes
 * with a sun/moon icon, matching the industry-standard light/dark
 * toggle pattern used by GitHub, VS Code, and most documentation sites.
 */
#theme-list {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Prevent the theme popup from flashing on page load */
.theme-popup {
    display: none !important;
    visibility: hidden !important;
}

/* ── Mermaid Diagram Styling ─────────────────────────────────────────
 * All diagrams use a grayscale palette (#ffffff, #f5f5f5, #e8e8e8,
 * #d9d9d9, #e0e0e0) with #333333 borders and #1a1a1a text. This
 * ensures WCAG AA contrast on both light and dark mdBook themes
 * without relying on color to convey meaning.
 *
 * The inline %%{init}%% directives in each diagram control mermaid's
 * internal rendering. These CSS rules serve as defense-in-depth
 * ensuring readability regardless of theme selection.
 */

/* ── SVG text elements ─────────────────────────────────────────────── */
.mermaid text {
    fill: #1a1a1a !important;
}

/* ── HTML labels inside foreignObject (mermaid's primary label path) ─ */
.mermaid foreignObject div,
.mermaid foreignObject span,
.mermaid foreignObject p,
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .label,
.mermaid .cluster-label,
.mermaid .edgeLabel span,
.mermaid .edgeLabel p {
    color: #1a1a1a !important;
    fill: #1a1a1a !important;
}

/* ── Node shapes: visible borders ──────────────────────────────────── */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon,
.mermaid .node path,
.mermaid .node .label-container {
    stroke: #333333 !important;
    stroke-width: 2px !important;
}

/* ── Subgraph/cluster labels and borders ───────────────────────────── */
.mermaid .cluster rect {
    stroke: #333333 !important;
    stroke-width: 2px !important;
    rx: 4px !important;
    ry: 4px !important;
}

.mermaid .cluster text,
.mermaid .cluster span,
.mermaid .cluster foreignObject div {
    fill: #1a1a1a !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* ── Edge/arrow lines ──────────────────────────────────────────────── */
.mermaid .edgePath path,
.mermaid .flowchart-link {
    stroke: #333333 !important;
    stroke-width: 2px !important;
}

/* ── Arrow markers ─────────────────────────────────────────────────── */
.mermaid marker path {
    fill: #333333 !important;
}

/* ── Edge labels: white background for readability ─────────────────── */
.mermaid .edgeLabel rect,
.mermaid .edgeLabel .label-container {
    fill: #ffffff !important;
    opacity: 0.95 !important;
}

/* ── State diagram specifics ───────────────────────────────────────── */
.mermaid .statediagram-state rect,
.mermaid .stateGroup rect {
    stroke: #333333 !important;
    stroke-width: 2px !important;
}

.mermaid .statediagram-state .state-title,
.mermaid .stateGroup text {
    fill: #1a1a1a !important;
    font-weight: 600 !important;
}

/* State diagram transition labels */
.mermaid .transition text,
.mermaid .stateLabel text {
    fill: #1a1a1a !important;
}

/* ── Decision diamond (rhombus) text ───────────────────────────────── */
.mermaid .node .label {
    color: #1a1a1a !important;
}

/* ── Note boxes in state diagrams ──────────────────────────────────── */
.mermaid .note {
    fill: #e8e8e8 !important;
    stroke: #333333 !important;
}

.mermaid .note text,
.mermaid .note foreignObject div {
    fill: #1a1a1a !important;
    color: #1a1a1a !important;
}

/* ── Dark theme (navy/coal) overrides ────────────────────────────────
 * Grayscale diagrams are inherently theme-neutral. These overrides
 * ensure edge label backgrounds and arrow colors remain visible
 * against dark page backgrounds.
 */

/* Edge label backgrounds: light gray for dark themes */
.navy .mermaid .edgeLabel rect,
.navy .mermaid .edgeLabel .label-container,
.coal .mermaid .edgeLabel rect,
.coal .mermaid .edgeLabel .label-container {
    fill: #e8e8e8 !important;
    opacity: 0.95 !important;
}

/* Edges and arrows: slightly lighter for dark backgrounds */
.navy .mermaid .edgePath path,
.navy .mermaid .flowchart-link,
.coal .mermaid .edgePath path,
.coal .mermaid .flowchart-link {
    stroke: #666666 !important;
}

.navy .mermaid marker path,
.coal .mermaid marker path {
    fill: #666666 !important;
}

/* Cluster/subgraph borders: lighter for dark themes */
.navy .mermaid .cluster rect,
.coal .mermaid .cluster rect {
    stroke: #666666 !important;
}

/* ── Mermaid diagram responsive layout ─────────────────────────────── */
.mermaid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Desktop: scale diagrams to fit container width */
.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* ── Mobile responsiveness ───────────────────────────────────────────
 * Ensures the documentation renders correctly on phones and tablets.
 * Tables scroll horizontally via .table-wrapper (JS) or display:block
 * (CSS fallback). Diagrams scroll instead of squishing on narrow
 * viewports. Content has appropriate padding at narrow widths.
 */

/* Prevent content overflow on narrow screens — but allow child scroll
 * containers (tables, mermaid diagrams) to handle their own overflow.
 * Using overflow-x:clip instead of overflow-x:hidden so that child
 * elements with overflow-x:auto still create proper scroll viewports.
 */
.content main {
    overflow-x: clip;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mermaid diagrams: scroll horizontally on narrow viewports */
.mermaid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Mermaid SVG should not exceed container width */
.mermaid svg {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    /* ── Mobile toolbar touch targets ────────────────────────────────
     * Apple HIG requires 44×44pt minimum touch targets. WCAG 2.5.8
     * (Target Size) recommends the same. mdBook's default icon buttons
     * are ~30px wide — well below the threshold on mobile devices.
     */

    /* Left-side icon buttons (sidebar, theme, search) */
    #menu-bar .icon-button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
    }

    /* Right-side link buttons (print, GitHub) */
    #menu-bar .right-buttons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 10px;
    }

    /* Larger icons for mobile readability */
    #menu-bar i {
        font-size: 20px;
    }

    /* Title: allow shrinking so icons aren't squeezed off-screen */
    .menu-title {
        font-size: 0.9em;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Content layout ─────────────────────────────────────────────── */

    /* Reduce padding on mobile */
    .content main {
        padding: 0 12px;
    }

    /* Tighter table cells */
    table thead th,
    table tbody td {
        padding: 6px 8px;
        font-size: 0.88em;
    }

    /* Allow long inline code to break */
    code {
        word-break: break-all;
    }

    /* Reduce heading margins */
    .content main h2 {
        margin-top: 1.5em;
        padding-top: 0.3em;
    }

    .content main h3 {
        margin-top: 1em;
    }

    /* Blockquotes tighter on mobile */
    blockquote {
        padding: 0.3em 0.8em;
        margin: 0.8em 0;
    }

    /* Prevent horizontal overflow from wide content */
    pre {
        max-width: calc(100vw - 40px);
    }

    /* ── Mermaid diagrams: scroll instead of squish ──────────────────
     * On narrow viewports, forcing max-width:100% squishes SVGs until
     * text becomes unreadable and subgraph titles get clipped (e.g.,
     * "Complementary Test Levels" truncated). Removing the constraint
     * preserves readability — the .mermaid container's overflow-x:auto
     * provides horizontal scrolling instead.
     */
    .mermaid svg {
        max-width: none !important;
        min-width: 500px;
        height: auto !important;
    }
}

@media screen and (max-width: 480px) {
    /* Extra-small screens */
    table thead th,
    table tbody td {
        padding: 4px 6px;
        font-size: 0.82em;
    }

    .content main {
        padding: 0 8px;
    }

    code {
        font-size: 0.85em;
    }

    /* Slightly narrower minimum for very small phones */
    .mermaid svg {
        min-width: 400px;
    }
}

/* ── Print styles ────────────────────────────────────────────────────
 * When actually printing (Cmd+P / Ctrl+P), tables and diagrams should
 * show full content without scroll containers. Navigation elements
 * are hidden. Font sizes reduced to fit more content per page.
 */
@media print {
    /* Hide navigation chrome */
    #sidebar,
    #menu-bar,
    .nav-wrapper,
    .nav-chapters,
    .right-buttons,
    .left-buttons {
        display: none !important;
    }

    /* Full-width content */
    .content main {
        max-width: none;
        overflow-x: visible;
    }

    /* Tables: show all columns, no scroll container */
    table,
    .table-wrapper table {
        display: table;
        width: auto;
        overflow-x: visible;
        font-size: 9pt;
    }

    .table-wrapper {
        overflow-x: visible;
    }

    /* Diagrams: scale to fit page width */
    .mermaid svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Avoid page breaks inside tables and diagrams */
    table, .mermaid {
        page-break-inside: avoid;
    }
}