/**
 * sidebar-layout.css — the LIST and the PAGE side by side (goes with sidebar-view.js).
 *
 * Only the row that puts the two together and the divider between them. The list's styles are in
 * list-view.css and the page's in item-page.css. A host that uses both loads all three.
 */

/* ===== Sidebar Layout Structure ===== */
.sidebar-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: linear-gradient(90deg, #1a1210, #0f1312);
}

/* ===== Resize Handle ===== */
.resize-handle {
    width: 4px;
    background: var(--border-default);
    cursor: col-resize;
    transition: background var(--transition-base);
    flex-shrink: 0;
}

.resize-handle:hover,
.resize-handle.resizing {
    background: var(--accent-primary);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .sidebar-layout {
        flex-direction: column;
    }

    .resize-handle {
        display: none;
    }
}