/* ==========================================================================
   HireBots Documentation Styles
   ========================================================================== */

/* --- Pico variable overrides -----------------------------------------------
   Pico's default theme uses --primary (hsl blue) for links/buttons. Our brand
   overrides --pico-primary in hirebots.css, but Pico's <a>/<button> rules
   reference --primary, NOT --pico-primary. Re-bind both so Pico's defaults
   pick up our red. This applies site-wide, but Pico only uses --primary in
   docs-related contexts (a/button/link rules), so no visual collateral. */
:root {
    --primary: #e94560;
    --primary-hover: #d63851;
    --primary-focus: rgba(233, 69, 96, 0.25);
}

/* Override Pico's .container when it wraps docs content.
   Pico sets max-width + margin:auto on .container, which centers
   everything and prevents the sidebar from reaching the far left.
   We reset it to full width so the fixed sidebar and content layout work. */
main.container:has(.docs-layout) {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.docs-layout {
    position: relative;
    width: 100%;
    padding: 0;
}

/* Mobile sidebar toggle (hidden on desktop).
   Pico CSS has the rule
     [type=button],[type=reset],[type=submit],button { display: block; width: 100%; ... }
   which would force our toggle into a full-width button. We override with
   !important to guarantee it's hidden on desktop regardless of Pico's
   selector specificity. The mobile media query below unhides it for narrow
   screens where it actually IS a full-width toggle bar. */
button.docs-sidebar-toggle,
.docs-sidebar-toggle {
    display: none !important;
    position: sticky;
    top: 50px;
    z-index: 100;
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--pico-card-background-color, #fff);
    border: none;
    border-bottom: 1px solid var(--pico-muted-border-color, #e0e0e0);
    text-align: left;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--pico-color, #333);
    margin: 0;
    text-transform: none;
    font-family: inherit;
    letter-spacing: inherit;
    line-height: var(--pico-line-height, 1.5);
}

/* Mobile overlay */
.docs-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
}

.docs-sidebar-overlay.visible {
    display: block;
}

/* ==========================================================================
   Sidebar — fixed to the left on desktop
   ========================================================================== */

.docs-sidebar {
    position: fixed;
    top: 50px;
    left: 0;
    width: 260px;
    height: calc(100vh - 50px);
    overflow-y: auto;
    padding: 1.25rem 0.75rem;
    background: var(--pico-card-background-color, #fff);
    border-right: 1px solid var(--pico-muted-border-color, #e0e0e0);
    box-sizing: border-box;
}

/* ==========================================================================
   Sidebar navigation
   ========================================================================== */

.docs-nav-sections {
    list-style: none;
    padding: 0;
    margin: 0;
}

.docs-nav-section {
    margin-bottom: 0.15rem;
}

/* Section header: title + chevron in a single row.
   Pico may style child <a> elements with block layout; force inline flex. */
.docs-nav-section-header {
    display: flex !important;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.docs-nav-section-link,
.docs-nav-section-title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pico-color, #333);
    text-decoration: none;
    border-radius: 4px;
    margin: 0;
    background: transparent;
    border: none;
    display: inline-block;
    text-align: left;
    line-height: 1.4;
}

.docs-nav-section-link:hover {
    background: var(--pico-secondary-background, #f0f0f0);
    color: var(--primary, #e94560);
}

.docs-nav-section-link.active {
    background: var(--primary, #e94560);
    color: #fff;
}

/* Chevron — small inline toggle, NOT a full-width line.
   Inline (not block) so it sits next to the title. The flex parent above
   keeps title + chevron on the same row. font-size 0.7rem makes it small. */
.docs-nav-chevron {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-self: center;
    padding: 0.25rem 0.45rem;
    font-size: 0.75rem;
    color: var(--pico-muted-color, #999);
    cursor: pointer;
    user-select: none;
    border-radius: 3px;
    line-height: 1;
    margin: 0;
    background: transparent;
    border: none;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    width: auto;
    height: auto;
}

.docs-nav-chevron:hover {
    color: var(--pico-color, #333);
    background: var(--pico-secondary-background, #f0f0f0);
}

/* Subsections */
.docs-nav-subsections {
    list-style: none;
    padding: 0 0 0 0.75rem;
    margin: 0.15rem 0 0.4rem 0;
}

.docs-nav-subsections li {
    margin: 0;
}

.docs-nav-subsection-link {
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color, #666);
    text-decoration: none;
    border-radius: 4px;
    border-left: 2px solid transparent;
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: auto;
    margin: 0;
    text-align: left;
}

.docs-nav-subsection-link:hover {
    background: var(--pico-secondary-background, #f0f0f0);
    color: var(--pico-color, #333);
}

.docs-nav-subsection-link.active {
    color: var(--primary, #e94560);
    border-left-color: var(--primary, #e94560);
    font-weight: 600;
    background: var(--pico-secondary-background, #f8f8f8);
}

/* ==========================================================================
   Content area — offset by sidebar width on desktop
   ========================================================================== */

.docs-content {
    margin-left: 260px;
    padding: 1.5rem 2rem;
    max-width: 900px;
    min-width: 0;
    box-sizing: border-box;
}

/* Override Pico's article styling inside docs */
.docs-article {
    line-height: 1.7;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.docs-article h1 {
    margin-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--pico-muted-border-color, #e0e0e0);
}

.docs-article h2 {
    margin-top: 2rem;
}

.docs-article h3 {
    margin-top: 1.5rem;
}

.docs-article p {
    margin-bottom: 1rem;
}

.docs-article ul,
.docs-article ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.docs-article li {
    margin-bottom: 0.3rem;
}

.docs-article code {
    background: var(--pico-secondary-background, #f4f4f4);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.88em;
    font-family: monospace;
    color: var(--pico-color, #333);
}

.docs-article pre {
    background: var(--pico-code-background, #1e1e1e);
    color: var(--pico-code-color, #f8f8f2);
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.docs-article pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 0.85rem;
}

.docs-article table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
}

.docs-article th,
.docs-article td {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--pico-muted-border-color, #e0e0e0);
    text-align: left;
}

.docs-article th {
    background: var(--pico-secondary-background, #f4f4f4);
    font-weight: 600;
}

.docs-article tr:nth-child(even) {
    background: var(--pico-secondary-background, #fafafa);
}

.docs-article blockquote {
    border-left: 4px solid var(--primary, #e94560);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    background: var(--pico-secondary-background, #f8f8f8);
    color: var(--pico-muted-color, #666);
}

/* Links — Pico default uses --primary (now overridden to red above).
   Apply explicitly here too as a safety net. Specificity (0,1,1) beats Pico's
   <a> rule (0,0,1). */
.docs-article a,
.docs-article a:visited {
    color: var(--primary, #e94560);
    text-decoration: underline;
}

.docs-article a:hover,
.docs-article a:active {
    color: var(--primary-hover, #d63851);
}

/* Placeholder for unwritten content */
.docs-placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--pico-muted-color, #888);
    background: var(--pico-secondary-background, #f8f8f8);
    border-radius: 8px;
}

/* ==========================================================================
   Prev / Next navigation — styled as text links, not big Pico buttons.
   Pico styles <a> inside <nav> as block with width 100%; force them into
   compact cards.
   ========================================================================== */

.docs-prev-next {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pico-muted-border-color, #e0e0e0);
}

.docs-nav-btn {
    display: flex !important;
    flex-direction: column;
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--pico-muted-border-color, #e0e0e0);
    border-radius: 8px;
    text-decoration: none;
    color: var(--pico-color, #333);
    transition: all 0.2s ease;
    flex: 1;
    max-width: 45%;
    width: auto;
    background: transparent;
    margin: 0;
    text-align: left;
}

.docs-nav-btn:hover:not(.docs-nav-disabled) {
    border-color: var(--primary, #e94560);
    background: var(--pico-secondary-background, #f8f8f8);
    color: var(--primary, #e94560);
}

.docs-nav-prev {
    text-align: left;
}

.docs-nav-next {
    text-align: right;
    align-items: flex-end;
}

.docs-nav-direction {
    font-size: 0.75rem;
    color: var(--pico-muted-color, #888);
    margin-bottom: 0.2rem;
}

.docs-nav-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary, #e94560);
}

.docs-nav-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ==========================================================================
   Mobile responsive — sidebar collapses to top toggle
   ========================================================================== */

@media (max-width: 768px) {
    main.container:has(.docs-layout) {
        padding: 0 !important;
    }

    .docs-layout {
        width: 100%;
        margin-left: 0;
    }

    /* Un-hide the toggle on mobile. !important was needed to override Pico's
       button rule on desktop; we need to override our own override here. */
    button.docs-sidebar-toggle,
    .docs-sidebar-toggle {
        display: block !important;
        width: 100%;
    }

    .docs-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100%;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        max-height: 100vh;
        padding-top: 2rem;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    .docs-sidebar.open {
        transform: translateX(0);
    }

    .docs-content {
        margin-left: 0;
        padding: 1rem;
        width: 100%;
    }

    .docs-prev-next {
        flex-direction: column;
    }

    .docs-nav-btn {
        max-width: 100%;
    }

    .docs-nav-next {
        align-items: flex-start;
        text-align: left;
    }
}