/**
 * OctoMY Documentation Styles
 *
 * Minimal styling that extends Bootstrap 5.3.
 * Uses standard Bootstrap components wherever possible.
 */

/* ==========================================================================
   Layout: Two-Column Documentation (7-5 ratio)
   ========================================================================== */

.doc-layout {
    --bs-gutter-x: 2rem;
}

@media (max-width: 991.98px) {
    .doc-sidebar {
        order: -1;
    }
}

/* ==========================================================================
   Sidebar card headers - primary background
   ========================================================================== */

.doc-sidebar .card-header {
    background: var(--bs-primary);
    color: var(--bs-white);
}

/* Card body and list items inherit card background (no white override) */
.doc-sidebar .card-body,
.doc-sidebar .list-group-item {
    background: inherit;
    border-color: var(--bs-border-color-translucent);
}

/* Topic badges - normal text size */
.doc-sidebar .badge {
    font-size: 1rem;
    font-weight: normal;
}

/* ==========================================================================
   Subpages list in sidebar - hierarchical navigation
   ========================================================================== */

.doc-subpages-list,
.doc-subpages-list ul,
.doc-subpages-children {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.doc-subpages-item {
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.doc-subpages-item:last-child {
    border-bottom: none;
}

.doc-subpages-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.doc-subpages-link:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
}

/* Chevron icon for expandable items */
.doc-subpages-icon {
    transition: transform 0.2s ease-in-out;
    font-size: 0.75em;
}

.doc-subpages-toggle[aria-expanded="true"] .doc-subpages-icon {
    transform: rotate(90deg);
}

/* ==========================================================================
   Tables - dark header
   ========================================================================== */

.doc-main table.table thead {
    background-color: var(--bs-dark) !important;
    color: var(--bs-light) !important;
}

.doc-main table.table thead th {
    background-color: var(--bs-dark) !important;
    color: var(--bs-light) !important;
    border-color: var(--bs-dark) !important;
}

/* ==========================================================================
   Blockquotes
   ========================================================================== */

.doc-main blockquote {
    padding: 1rem 1.25rem;
    background: var(--bs-secondary-bg);
    border-left: 4px solid var(--bs-primary);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.doc-main blockquote p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Links - API reference badges and external link icons
   ========================================================================== */

.doc-main a[href*="/api/"],
.doc-main a[href*="/reference/api/"] {
    display: inline-block !important;
    padding: 0.2em 0.5em !important;
    font-weight: 500 !important;
    background: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
    border-radius: var(--bs-border-radius-sm) !important;
    text-decoration: none !important;
}

.doc-main a[href*="/api/"]:hover,
.doc-main a[href*="/reference/api/"]:hover {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.doc-main a[target="_blank"]::after,
.doc-main a[rel*="external"]::after,
.doc-main a[href^="http"]:not([href*="octomy.com"])::after {
    content: "\00a0\f35d" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.7em !important;
    opacity: 0.6 !important;
}

/* ==========================================================================
   Code blocks - darker background for documentation
   ========================================================================== */

.doc-main pre:has(code.hljs),
.doc-main pre.hljs {
    background: rgba(0, 0, 0, 0.2);
}

/* Inline code in documentation */
.doc-main code:not(pre code) {
    padding: 0.2em 0.4em;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    font-size: 0.9em;
}

/* ==========================================================================
   Images
   ========================================================================== */

.doc-main img {
    max-width: 100%;
    height: auto;
}

.doc-main figcaption {
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .doc-sidebar {
        display: none;
    }
}