/* 
   DreamStream Premium Documentation Theme 
   Inspired by Mintlify, Perplexity, and Stripe layouts.
   Focus: Cleanliness, Content Breathing Room, High-End Typography.*/

:root {
    /* Core Typography */
    --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    --md-code-font: "JetBrains Mono", monospace;

    /* Layout Variables */
    --doc-content-max-width: 100%;
    /* True Full Width */
    --sidebar-width: 17rem;
    --header-height: 60px;

    /* Perplexity-ish Colors */
    --color-bg-dark: #0B0E14;
    --color-sidebar-border: rgba(255, 255, 255, 0.06);
    --color-accent: #A855F7;
}

/* -------------------------------------------------------------------------
   1. GLOBAL LAYOUT & TYPOGRAPHY
   ------------------------------------------------------------------------- */

html,
body {
    height: 100%;
}

/* Clean Dark Mode Background - Pure & Deep */
body[data-md-color-scheme="slate"] {
    background-color: var(--color-bg-dark) !important;
    background-image: none !important;
    /* Removed radial gradient for cleaner, flatter look like Reference */
}

/* Light Mode Clean Up */
body[data-md-color-scheme="default"] {
    background-color: #ffffff !important;
}

/* Base text styling */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------
   2. HEADER (GLASSMORPHISM)
   ------------------------------------------------------------------------- */

.md-header {
    background-color: rgba(11, 14, 20, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-sidebar-border);
    height: var(--header-height);
    box-shadow: none !important;
    padding-right: 2rem !important;
    /* Fix for search clipping on wide screens */
}

body[data-md-color-scheme="default"] .md-header {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* -------------------------------------------------------------------------
   3. FLUID LAYOUT (THE "PERPLEXITY" UNLOCK)
   ------------------------------------------------------------------------- */

/* Unlock the container max-width */
.md-grid {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    /* Keep main content centrally focused if possible, but fluid */
}

/*
   SIDEBAR HANDLING
   we want them pinned to edges.
*/

@media screen and (min-width: 76.25em) {

    /* Left Sidebar */
    .md-sidebar--primary {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: var(--sidebar-width) !important;
        height: calc(100vh - var(--header-height));
        overflow-y: auto;
        border-right: 1px solid var(--color-sidebar-border);
        background: var(--color-bg-dark);
        /* Ensure opacity */
        z-index: 10;
        padding-left: 0.5rem;
        /* Reduced padding */
    }

    /* Right Sidebar (TOC) */
    .md-sidebar--secondary {
        position: fixed;
        top: var(--header-height);
        right: 0;
        width: var(--sidebar-width) !important;
        height: calc(100vh - var(--header-height));
        overflow-y: auto;
        margin-left: 0 !important;
        background: transparent !important;
        /* Keep simplistic */
        /* No border for TOC usually, feels cleaner */
        display: none;
        /* Default hidden, managed by grid usually */
    }

    /* Re-enable TOC visually if it exists */
    .md-sidebar--secondary:not([hidden]) {
        display: block;
    }

    /* MAIN CONTENT */
    .md-content {
        margin-left: var(--sidebar-width) !important;
        margin-right: var(--sidebar-width) !important;
        /* Allow content to fill the remaining space */
        width: calc(100% - (var(--sidebar-width) * 2)) !important;
        max-width: 1100px !important;
        /* Slightly tighter readability cap */
        padding: 2rem 3rem !important;
    }

    /* On extremely wide screens, center the content block */
    .md-main__inner {
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
   4. LEFT SIDEBAR STYLING
   ------------------------------------------------------------------------- */

.md-nav__title {
    background-color: transparent !important;
    /* Remove ugly grey background */
    box-shadow: none !important;
    /* Remove any shadow/border */
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 1.5rem 0.75rem 0.5rem 0.75rem !important;
    margin: 0 !important;
}

.md-nav__link {
    font-size: 0.65rem !important;
    /* ~10.4px (Ultra Minimal) */
    padding: 0.25rem 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.15s ease;
    border-radius: 6px;
    margin: 1px 0.5rem;
    line-height: 1.4 !important;
}

.md-nav__link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.md-sidebar--primary .md-nav__item .md-nav__link--active {
    color: var(--color-accent) !important;
    background-color: rgba(168, 85, 247, 0.08) !important;
    font-weight: 600 !important;
}

/* Right Sidebar (TOC) Clean Up ("Hygienic") */
.md-sidebar--secondary .md-nav {
    padding-top: 1rem;
}

.md-sidebar--secondary .md-nav__list {
    padding-left: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    /* Minimal track */
}

.md-sidebar--secondary .md-nav__item {
    border-left: 2px solid transparent;
    padding-left: 1rem;
    margin-bottom: 0.4rem;
    /* Breathing room between items */
    margin-left: -1px;
    /* Align border with track */
}

.md-sidebar--secondary .md-nav__link {
    font-size: 0.7rem !important;
    /* ~11px */
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: block;
    transition: all 0.2s ease;
}

.md-sidebar--secondary .md-nav__link:hover {
    color: #fff !important;
}

.md-sidebar--secondary .md-nav__link--active:not([data-dreamstream-toc-active="true"]),
.md-sidebar--secondary .md-nav__item--active .md-nav__link:not([data-dreamstream-toc-active="true"]),
.md-sidebar--secondary .md-nav__link[aria-current]:not([data-dreamstream-toc-active="true"]) {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 400 !important;
    background-color: transparent !important;
    border-left: none !important;
    margin-left: 0.5rem !important;
    padding-left: 0.75rem !important;
}

.md-sidebar--secondary .md-nav__link[data-dreamstream-toc-active="true"] {
    color: var(--color-accent) !important;
    font-weight: 600 !important;
    background-color: rgba(168, 85, 247, 0.1) !important;
    /* Subtle purple background */
    border-left: 3px solid var(--color-accent);
    /* Thicker border */
    margin-left: -1.2rem;
    padding-left: 1rem;
    border-radius: 0 6px 6px 0;
    /* Rounded right edge */
}

/* HIDE TOC SUBSECTIONS (H3) - User Request */
.md-sidebar--secondary .md-nav__list .md-nav__list {
    display: none !important;
}

/* -------------------------------------------------------------------------
   5. CONTENT TYPOGRAPHY
   ------------------------------------------------------------------------- */

.md-typeset h1 {
    font-size: 1.4rem;
    /* ~22.4px */
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    color: #fff;
    line-height: 1.2;
}

.md-typeset h2 {
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 1.5rem;
    font-size: 1.15rem;
    /* ~18.4px */
    border-bottom: none !important;
}

.md-typeset h3 {
    font-size: 0.95rem;
    /* ~15.2px */
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    counter-increment: subchapter;
}

/* -------------------------------------------------------------------------
   6. AUTO-NUMBERING & SECTION BREAKS ("The Playbook Style")
   ------------------------------------------------------------------------- */

.md-content__inner {
    counter-reset: chapter;
}

.md-typeset h2 {
    counter-increment: chapter;
    counter-reset: subchapter;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Clear section break */
    padding-top: 2.5rem !important;
    margin-top: 3.5rem !important;
}

.md-typeset h2:before {
    content: counter(chapter) ". ";
    color: var(--color-accent);
    opacity: 0.8;
    margin-right: 0.5rem;
}

.md-typeset h3:before {
    content: counter(chapter) "." counter(subchapter) " ";
    color: rgba(255, 255, 255, 0.4);
    margin-right: 0.5rem;
    font-weight: 400;
}

/* -------------------------------------------------------------------------
   7. RIGHT SIDEBAR (TOC) - CLEAN & MINIMAL
   ------------------------------------------------------------------------- */

.md-sidebar--secondary .md-nav__title {
    display: none !important;
    /* Hide "Table of Contents" label if possible for super clean look, or style minimal */
}

/* Duplicate rule removed - consolidated with lines 205-212 above */

/* Duplicate rule removed to prevent conflict */

/* -------------------------------------------------------------------------
   7. COMPONENT REFINEMENTS
   ------------------------------------------------------------------------- */

/* Admonitions - High Visibility & Crisp */
.md-typeset .admonition {
    background-color: rgba(168, 85, 247, 0.05) !important;
    /* Very subtle tint */
    border: 1px solid rgba(168, 85, 247, 0.2) !important;
    border-radius: 8px;
    /* Sharper corners */
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.md-typeset .admonition-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    background: transparent !important;
    color: var(--color-accent) !important;
    font-weight: 600;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    opacity: 1;
}

.md-typeset .admonition-title::before {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-color: var(--color-accent) !important;
    /* Icon color */
    flex-shrink: 0;
}

/* Mermaid Diagrams - Center & Padding */
.mermaid {
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
}

/* Force black text for specific mermaid nodes */
g.black-text text,
g.black-text tspan,
.mermaid .node.black-text,
.mermaid .node.black-text *,
.mermaid .node.black-text .label,
.mermaid .node.black-text foreignObject,
.mermaid .node.black-text div,
.mermaid .node.black-text span {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: none !important;
    /* Ensure no text outline issues */
}

/* Search Bar - Floating */
.md-search__form {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Code Blocks */
.md-typeset pre>code {
    background-color: rgba(0, 0, 0, 0.5) !important;
    /* Darker bg for contrast */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

/* Fix CSS Squishiness on mobile */
@media screen and (max-width: 76.2em) {
    .md-content {
        margin: 0 !important;
        width: 100% !important;
        padding: 2rem !important;
    }

    .md-sidebar--primary {
        background-color: #0b0e14;
        /* Ensure bg when drawer opens */
    }
}