/**
 * Sinkori Network V2 - Structural Layout Grids (Sidebar, Header, Main Wrapper)
 */

/* --- Left Navigation Rail --- */
.left-rail {
    width: 260px;
    height: 100vh;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    z-index: 20;
    background: rgba(10, 14, 23, 0.8);
}

/* --- Main Content Area --- */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* --- Header Area --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 14, 23, 0.6);
    backdrop-filter: blur(10px);
    z-index: 10;
}

/* --- Top Summary Band --- */
.top-band {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(20, 25, 40, 0.6), transparent);
    z-index: 9;
}

/* --- Graph Workspace --- */
.workspace {
    flex: 1;
    position: relative;
    overflow: hidden;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

canvas:active {
    cursor: grabbing;
}

/* --- Floating Evidence Sidebar --- */
.evidence-sidebar {
    position: absolute;
    right: 20px;
    top: 20px;
    bottom: 80px;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 5;
    pointer-events: none; /* Let clicks pass through empty space to canvas */
    overflow-y: auto;
    padding-right: 10px;
}

.evidence-sidebar::-webkit-scrollbar { width: 4px; }
.evidence-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.evidence-sidebar > * {
    pointer-events: auto; /* Re-enable clicks on actual cards */
}

/* --- Bottom Utility Strip --- */
.utility-strip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 30px;
    z-index: 10;
}