/* B"H - LAYOUT */
.app-container { 
    display: grid; grid-template-rows: auto 1fr auto; 
    grid-template-columns: 300px 1fr;
    height: 100vh; height: 100dvh; 
    background-color: var(--color-bg-primary); 
    opacity: 0; animation: appFadeIn 0.5s ease forwards;
}

.app-container.sidebar-collapsed {
    grid-template-columns: 0 1fr !important;
}
.app-container.sidebar-collapsed .sidebar-resizer {
    display: none;
}
.app-container.sidebar-collapsed .sidebar {
    border-right-width: 0;
    overflow: hidden; 
}

/* Explicit Grid Assignment */
.app-container.sidebar-collapsed > .top-panel,
.app-container.sidebar-collapsed > .main-content,
.app-container.sidebar-collapsed > .status-bar {
    grid-column: 2 / 3; 
}

/* TOP PANEL */
.top-panel {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    z-index: 300;
    overflow-y: visible; 
    overflow-x: hidden;
}

.menu-bar { 
    display: flex; 
    align-items: center; 
    height: 52px; 
    padding: 0 12px; 
    flex-shrink: 0; 
    gap: 8px;
    position: relative; 
    z-index: 1;         
}

/* SIDEBAR */
.sidebar { 
    grid-row: 1 / 4; grid-column: 1 / 2;
    background:  #191d30;
    display: flex; flex-direction: column; 
    border-right: 2px solid var(--color-border);
    transition: transform var(--timing-med) ease, width var(--timing-med) ease; flex-shrink: 0;
    position: relative;
    z-index: 3200;
    overflow: hidden;
}
.sidebar-header { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 8px 0 16px; height: 52px; 
    border-bottom: 2px solid var(--color-border); 
    flex-shrink: 0;  font-size: 0.9em; letter-spacing: 2px; user-select: none; font-weight: 700;
    color: var(--neon-cyan);
}
.workspaces-container { 
    flex-grow: 1; overflow-y: auto; padding: 8px;
    overflow-x: auto; 
}

/* MAIN CONTENT */
.main-content { 
    grid-row: 2 / 3; grid-column: 2 / 3; position: relative; 
    display: flex; flex-direction: column; 
    overflow: hidden; 
}
.editor-area { 
    flex-grow: 1; 
    display: flex; 
    position: relative; 
    overflow-y: auto; 
    background-color: transparent; 
}

/* STATUS BAR */
.status-bar { 
    grid-row: 3 / 4; 
    grid-column: 2 / 3; 
    height: 28px; 
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
    color: var(--color-bg-deep); 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 0 16px; font-size: 0.9em; font-weight: 700; user-select: none; z-index: 100;
    letter-spacing: 1px;
}

/* RESIZER */
.sidebar-resizer {
    grid-row: 1 / 4; 
    grid-column: 1 / 2; 
    justify-self: end; 
    z-index: 3201; 
    position: relative;
    width: 6px; 
    cursor: col-resize; 
    background-color: var(--color-border);
    transition: background-color var(--timing-fast);
}
.sidebar-resizer:hover {
    background-color: var(--neon-cyan); 
}
body.is-resizing {
    user-select: none;
}

@media (max-width: 768px) {
    .status-bar { font-size: 0.8em; }
    #sidebar-collapse-btn { display: none; }
    .sidebar-resizer { width: 10px; }
}