body {
    background-color: #1e1e1e; /* Dark background for the whole page */
    color: #d4d4d4; /* Light text color */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.docs-container {
    display: flex;
    margin: 0; /* Remove default margin */
    min-height: 100vh;
}

.docs-sidebar {
    width: 260px; 
    background-color: #1e1e1e; /* Dark sidebar background, same as body or slightly different for contrast */
    padding: 20px 0; /* Vertical padding, no horizontal */
    border-right: 1px solid #333333; /* Subtle border */
    height: 100vh; /* Full height */
    position: sticky; /* Sticky sidebar */
    top: 0;
    overflow-y: auto; /* Allow scrolling if content overflows */
}

.docs-content {
    flex: 1;
    padding: 30px 40px; /* More padding around content */
    max-width: 900px; /* Max width for readability */
    margin-left: 260px; /* Account for sidebar width. Should be equal to .docs-sidebar width */
}

/* Sidebar Navigation Styles */
.docs-nav ul {
    list-style-type: none !important; /* Force remove bullets */
    padding-left: 0 !important; /* Force remove default padding */
    margin: 0;
}

.docs-nav li {
    margin-bottom: 0; /* Reset margin */
    list-style-type: none !important; /* Ensure no bullets on li either */
}

/* Styling for the section headers (li.nav-header) */
.docs-nav li.nav-header {
   margin-top: 16px; 
   margin-bottom: 0; /* Reduce bottom margin if children follow immediately */
}
.docs-nav li.nav-header:first-child {
   margin-top: 0; 
}

/* Text for non-clickable headers (if any) */
.docs-nav li.nav-header .nav-header-text { 
    display: block;
    padding: 8px 20px; 
    font-weight: 500; 
    font-size: 0.8rem; 
    color: #8e949b; 
    text-transform: uppercase; 
    letter-spacing: 0.05em;
    margin: 2px 8px; /* Match link margin for alignment */
}

/* Styling for clickable section header links */
.docs-nav li.nav-header a.nav-header-link {
    display: block;
    padding: 7px 15px 7px 20px; /* Match regular link padding */
    text-decoration: none !important;
    color: #c5c8c9; /* Slightly more prominent than non-link header text */
    font-size: 0.9rem; /* Match regular link font-size */
    font-weight: 500; /* Match active link weight */
    border-radius: 4px; 
    margin: 2px 8px; /* Match regular link margin */
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    line-height: 1.4;
}

.docs-nav li.nav-header a.nav-header-link:hover {
    background-color: #2a2d2e; 
    color: #ececec;
}

/* Active state for the clickable section header link itself */
.docs-nav li.nav-header a.nav-header-link.active {
    background-color: #37373d; 
    color: #ffffff;
}

/* Style for an active section (the li.nav-header itself) 
   when one of its children is active or its own index page is active. */
.docs-nav li.nav-header.active-section > a.nav-header-link,
.docs-nav li.nav-header.active-section > .nav-header-text {
    /* Example: Make the section header text slightly whiter or bolder if its section is active */
    /* color: #e0e0e0; */ /* Uncomment and adjust if desired */
    /* font-weight: 600; */ /* Uncomment and adjust if desired */
}


/* Styling for actual navigation links (children or top-level non-sections) */
.docs-nav a { /* This is the general link style, nav-header-link will override parts of it if it's also an 'a' */
    display: block;
    padding: 7px 15px 7px 20px; 
    text-decoration: none !important;
    color: #c5c8c9; 
    font-size: 0.9rem;
    border-radius: 4px; 
    margin: 2px 8px; 
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    line-height: 1.4;
}

/* This general 'a' selector needs to exclude the .nav-header-link to avoid double applying some styles or conflicting */
.docs-nav li:not(.nav-header) > a {
    /* Styles specific to non-header links if needed, otherwise the generic 'a' above is fine */
}


.docs-nav a:hover { /* General link hover */
    background-color: #2a2d2e; 
    color: #ececec;
}

.docs-nav a.active { /* This applies to child links and top-level file links, and now also to active nav-header-links */
    background-color: #37373d; 
    color: #ffffff;
    font-weight: 500; 
}

/* Nested navigation items (children of sections are in a <ul> inside an <li>) */
.docs-nav ul ul { 
    margin-top: 0px; 
    padding-left: 0 !important; 
}
.docs-nav li > ul { 
    margin-top: 2px;
}

.docs-nav ul ul a { 
    padding-left: 35px; 
    font-size: 0.85rem; 
}


/* Markdown Content Styles */
.markdown-body {
    line-height: 1.7;
    font-size: 1rem;
}

.markdown-body h1 {
    font-size: 2rem; /* Reduced H1 size */
    color: #ffffff;
    border-bottom: 1px solid #444444;
    padding-bottom: 0.3em;
    margin-top: 0; 
    margin-bottom: 1em;
}

.markdown-body h2 {
    font-size: 1.6rem; /* Reduced H2 size */
    color: #e0e0e0;
    border-bottom: 1px solid #383838;
    padding-bottom: 0.2em;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}

.markdown-body h3 {
    font-size: 1.3rem;
    color: #d0d0d0;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}

.markdown-body h4 {
    font-size: 1.1rem;
    color: #c0c0c0;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

.markdown-body p {
    margin-bottom: 1em;
}

.markdown-body ul,
.markdown-body ol {
    margin-bottom: 1em;
    padding-left: 2em; /* Default padding for lists within markdown content */
}

.markdown-body li {
    margin-bottom: 0.4em; /* Default margin for list items within markdown content */
}

.markdown-body a {
    color: #60a5fa; /* Link color */
    text-decoration: none;
}

.markdown-body a:hover {
    text-decoration: underline;
}

.markdown-body code {
    background-color: #2d2d2d;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 0.85em;
    border-radius: 3px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.markdown-body pre {
    background-color: #2d2d2d;
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto;
}

.markdown-body pre code {
    padding: 0;
    margin: 0;
    font-size: 0.85em;
    background-color: transparent;
}

.markdown-body blockquote {
    border-left: 0.25em solid #444;
    padding: 0 1em;
    color: #aaa;
    margin-left: 0;
    margin-right: 0;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background-color: #2a2a2a; 
}

/* Table Styles */
.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.5em;
    border: 1px solid #444444; 
    font-size: 0.9rem;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid #444444; 
    padding: 0.75em 1em; 
    text-align: left;
}

.markdown-body th {
    background-color: #2c2c2e; 
    font-weight: 600;
    color: #e0e0e0;
}

.markdown-body tr:nth-child(even) {
    background-color: #252526; 
}

.markdown-body tr:hover {
    background-color: #333333;
}

/* Specific class for placeholder images to make them less prominent */
.markdown-body img[src*="placeholder"] {
    border: 1px dashed #555 !important; 
    padding: 10px !important;
    background-color: #2a2a2a !important;
}