/* ─────────────────────────────────────────────────
   ListHub Sidebar Styles (V1.1)
   Three-section persistent left sidebar: Your docs / Featured / Focused @user

   Key behaviors:
   - When collapsed: main content reverts to pre-sidebar layout (860px centered)
   - When expanded: sidebar + main content in a grid, main is left-aligned
   - Sections are flex column; collapsed sections = header height, expanded
     sections share remaining space with independent scrolling
   - Section titles are links, chevrons are separate toggle buttons
   ───────────────────────────────────────────────── */

:root {
    --sb-width: 260px;
    --sb-header-height: 79px;  /* actual: header 55px + margin-bottom 24px */
    --sb-section-header-height: 36px;
    --sb-bg: var(--bg-secondary, #161b22);
    --sb-border: var(--border, #30363d);
}

/* ── Layout wrapping ────────────────────────────────
   EXPANDED  — grid with sidebar + main. Main is content-width
               (~900px), left-aligned inside its cell.
   COLLAPSED — sidebar hidden, main reverts to .container
               (max-width 860px, centered).
   ───────────────────────────────────────────────── */

/* EXPANDED (default has-sidebar) */
body.has-sidebar .app-layout {
    display: grid;
    grid-template-columns: var(--sb-width) minmax(0, 1fr);
    min-height: calc(100vh - var(--sb-header-height));
    max-width: none;
    margin: 0;
    gap: 0;
}

body.has-sidebar .app-main {
    min-width: 0;
    padding: 24px 40px 40px;
}

body.has-sidebar .app-main.container {
    max-width: 900px;
    margin-left: 40px;
    margin-right: auto;
}

/* COLLAPSED — behave exactly like the pre-sidebar layout */
body.has-sidebar.sb-collapsed .app-layout {
    display: block;
    max-width: none;
    margin: 0;
}
body.has-sidebar.sb-collapsed .sb-sidebar {
    display: none;
}
body.has-sidebar.sb-collapsed .app-main.container {
    max-width: var(--max-width, 860px);
    margin-left: auto;
    margin-right: auto;
    padding: 24px 20px 40px;
}

.app-footer {
    margin-top: 48px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 12px;
    color: var(--text-dim, #484f58);
}
.app-footer a {
    color: var(--text-muted, #8b949e);
    margin: 0 4px;
}

/* ── Sidebar container ── */
.sb-sidebar {
    border-right: 1px solid var(--sb-border);
    background: var(--sb-bg);
    position: sticky;
    top: var(--sb-header-height);
    height: calc(100vh - var(--sb-header-height));
    overflow-y: auto;  /* Finder pattern: sidebar scrolls when content exceeds height */
    overscroll-behavior: contain;
}

.sb-sidebar-inner {
    display: block;  /* sections stack naturally; sidebar handles scroll */
    padding: 0;
}

/* ── Section (flex child of sidebar-inner) ──
   - Collapsed: just the header (flex: 0 0 auto)
   - Expanded: body grows to share remaining space (flex: 1 1 0)
   ───────────────────────────────────────── */
.sb-section {
    display: block;  /* content-sized; no flex */
    border-bottom: 1px solid var(--sb-border);
}
.sb-section:last-child {
    border-bottom: none;
}
.sb-section.sb-expanded {
    /* content-sized — body shows up via display: block below */
}

/* When a section follows an expanded one, pin it to the bottom of the
   sidebar so it stays visible even while the expanded section above is
   scrolled. Combined with sticky-top headers, this gives Mac Finder/
   Notion-style multi-section navigation. */
.sb-section.sb-expanded ~ .sb-section {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--sb-bg);
}

/* When viewing an arbitrary user's profile, hoist the Focused section to
   the top of the sidebar so their repo is the first thing you see. */
.sb-section-focused-active {
    order: -1;
}

/* ── Section header ── */
.sb-section-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 4px;
    height: var(--sb-section-header-height);
    background: var(--sb-bg);
    border-bottom: 1px solid transparent;
    cursor: pointer; /* whole row is a toggle target */
    user-select: none;
    position: sticky;  /* Finder-style: pin to top of viewport when scrolling past */
    top: 0;
    z-index: 2;
}
.sb-section-header:hover {
    background: rgba(200, 180, 150, 0.03);
}
.sb-section.sb-expanded > .sb-section-header {
    border-bottom-color: rgba(200, 180, 150, 0.06);
}

.sb-section-chevron {
    background: transparent;
    border: none;
    color: var(--text-dim, #5a5248);
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.sb-section-chevron svg {
    width: 14px !important;
    height: 14px !important;
}
.sb-section-chevron:hover {
    color: var(--text, #e8e0d4);
    background: rgba(200, 180, 150, 0.1);
}
.sb-section-chevron svg {
    transition: transform 0.15s;
}
.sb-section.sb-expanded > .sb-section-header > .sb-section-chevron svg {
    transform: rotate(90deg);
}

.sb-section-title {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #8b949e);
    text-decoration: none;
    padding: 8px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-section-title:hover {
    color: var(--text, #e6edf3);
    text-decoration: none;
}

.sb-section-action {
    color: var(--text-dim, #5a5248);
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.12s, background 0.12s;
}
.sb-section-header:hover .sb-section-action {
    opacity: 1;
}
.sb-section-action:hover {
    color: var(--accent, #d4a04a);
    background: rgba(200, 180, 150, 0.1);
    text-decoration: none;
}

/* ── Section body (only visible when .sb-expanded) ── */
.sb-section-body {
    padding: 6px 0 12px;
    display: none; /* hidden when section is collapsed */
}
.sb-section.sb-expanded > .sb-section-body {
    display: block;
}

.sb-empty {
    font-size: 12px;
    color: var(--text-dim, #484f58);
    padding: 6px 16px 10px;
    font-style: italic;
}
.sb-empty a {
    color: var(--accent, #58a6ff);
    font-style: normal;
}

/* ── Tree (recursive, folders use native <details>) ── */
.sb-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sb-node {
    margin: 0;
}

.sb-folder > .sb-details > .sb-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text, #e8e0d4);
    user-select: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
}
.sb-folder > .sb-details > .sb-summary::-webkit-details-marker {
    display: none;
}
.sb-folder > .sb-details > .sb-summary:hover {
    background: rgba(200, 180, 150, 0.06);
}
.sb-folder > .sb-details > .sb-summary .sb-chevron {
    color: var(--text-dim, #484f58);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.sb-folder > .sb-details[open] > .sb-summary > .sb-chevron {
    transform: rotate(90deg);
}
.sb-folder .sb-folder-icon {
    color: var(--accent, #d4a04a);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.sb-folder .sb-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.sb-count {
    font-size: 11px;
    color: var(--text-dim, #5a5248);
    font-variant-numeric: tabular-nums;
    background: rgba(200, 180, 150, 0.06);
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

.sb-file {
    line-height: 1.5;
}
.sb-file-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    font-size: 14px;
    color: var(--text-muted, #b8ad9e);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.sb-file-link:hover {
    background: rgba(200, 180, 150, 0.06);
    color: var(--text, #e8e0d4);
    text-decoration: none;
}
.sb-file-link.active {
    background: rgba(212, 160, 74, 0.08);
    color: var(--accent, #d4a04a);
    border-left-color: var(--accent, #d4a04a);
}
.sb-file .sb-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-vis {
    font-size: 10px;
    opacity: 0.7;
    flex-shrink: 0;
}
.sb-vis-right {
    margin-left: auto;
    padding-right: 2px;
}
.sb-vis-folder {
    opacity: 0.55;
    margin-left: auto; /* push to the right of folder row */
    padding-right: 4px;
}
.sb-home-icon {
    font-size: 13px;
    flex-shrink: 0;
    margin-right: 2px;
}
.sb-file-home .sb-file-link {
    font-weight: 600;
    color: var(--text, #e6edf3);
}
.sb-file-home .sb-name {
    color: var(--text, #e6edf3);
}

/* ── Sidebar header (contains collapse button) ── */
.sb-sidebar-header {
    display: flex;
    justify-content: flex-end;
    padding: 8px 8px 0;
}
.sb-toggle {
    background: transparent;
    border: none;
    color: var(--text-dim, #5a5248);
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, background 0.12s;
}
.sb-toggle:hover {
    color: var(--text, #e8e0d4);
    background: rgba(200, 180, 150, 0.1);
}

/* Expand button — visible only when sidebar is collapsed */
.sb-expand {
    display: none;
    position: fixed;
    left: 0;
    top: 68px;
    z-index: 50;
    background: var(--bg-secondary);
    border: none;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    padding: 8px 6px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}
.sb-expand:hover {
    color: var(--text);
    background: var(--bg-tertiary);
}
body.has-sidebar.sb-collapsed .sb-expand { display: flex; }

body.has-sidebar .header-inner {
    gap: 0;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    body.has-sidebar .app-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .sb-sidebar {
        position: fixed;
        top: var(--sb-header-height);
        left: 0;
        width: 85vw;
        max-width: 320px;
        height: calc(100vh - var(--sb-header-height));
        z-index: 90;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
    }
    body.sb-open .sb-sidebar {
        transform: translateX(0);
    }
    body.sb-open::after {
        content: '';
        position: fixed;
        top: var(--sb-header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 80;
    }
}

/* ─────────────────────────────────────────────────
   Breadcrumbs (shared partial _breadcrumbs.html)
   ───────────────────────────────────────────────── */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted, #8b949e);
    margin-bottom: 20px;
    padding: 4px 0;
}
.breadcrumb-link {
    color: var(--text-muted, #8b949e);
    text-decoration: none;
}
.breadcrumb-link:hover {
    color: var(--accent, #58a6ff);
    text-decoration: underline;
}
.breadcrumb-current {
    color: var(--text, #e6edf3);
    font-weight: 500;
}
.breadcrumb-sep {
    color: var(--text-dim, #484f58);
    font-weight: 300;
}

/* ─────────────────────────────────────────────────
   Sidebar folder v2: split click targets
   (chevron = toggle, folder name = navigate to folder view)
   ───────────────────────────────────────────────── */
.sb-folder-v2 > .sb-folder-row {
    display: flex;
    align-items: center;
    gap: 2px;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: border-color 0.12s;
}
.sb-folder-v2 > .sb-folder-row:hover {
    background: rgba(200, 180, 150, 0.06);
}

.sb-folder-chevron {
    background: transparent;
    border: none;
    color: var(--text-dim, #5a5248);
    padding: 6px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
}
.sb-folder-chevron svg {
    width: 12px !important;
    height: 12px !important;
}
.sb-folder-chevron:hover {
    color: var(--text, #e8e0d4);
    background: rgba(200, 180, 150, 0.1);
}
.sb-folder-chevron svg {
    transition: transform 0.15s;
}
.sb-folder-v2.sb-folder-open > .sb-folder-row > .sb-folder-chevron svg {
    transform: rotate(90deg);
}

.sb-folder-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 2px;
    font-size: 14px;
    color: var(--text, #e8e0d4);
    text-decoration: none;
    font-weight: 500;
    min-width: 0;
}
.sb-folder-link .vis-badge {
    margin-left: 2px;
    flex-shrink: 0;
}
.sb-folder-link:hover {
    color: var(--accent, #d4a04a);
    text-decoration: none;
}
.sb-folder-link .sb-folder-icon {
    font-size: 15px;
    flex-shrink: 0;
    opacity: 1;
}
.sb-folder-link .sb-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-folder-link.active {
    background: rgba(212, 160, 74, 0.08);
    color: var(--accent, #d4a04a);
    border-radius: 4px;
}

.sb-folder-children {
    display: none;
}
.sb-folder-v2.sb-folder-open > .sb-folder-children {
    display: block;
}

/* "...N more" sentinel link emitted when a folder is truncated for perf */
.sb-more-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
    color: var(--text-dim, #484f58);
    text-decoration: none;
    font-style: italic;
}
.sb-more-link:hover {
    background: rgba(200, 180, 150, 0.08);
    color: var(--accent, #58a6ff);
    text-decoration: none;
}
.sb-more-arrow {
    color: var(--text-dim, #484f58);
    flex-shrink: 0;
}
.sb-more-link:hover .sb-more-arrow {
    color: var(--accent, #58a6ff);
}