/* ═══════════════════════════════════════════
   Main Application Grid
   ═══════════════════════════════════════════ */

#app {
    display: grid;
    grid-template-areas:
        "sidebar toolbar toolbar"
        "sidebar tabbar tabbar"
        "sidebar editor editor"
        "console console console"
        "statusbar statusbar statusbar";
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--toolbar-height) var(--tab-height) 1fr var(--console-height) var(--statusbar-height);
    height: 100vh;
    overflow: hidden;
}

/* Lesson mode — three-column layout */
#app.lesson-mode {
    grid-template-areas:
        "sidebar lesson toolbar toolbar"
        "sidebar lesson tabbar tabbar"
        "sidebar lesson editor editor"
        "console console console console"
        "statusbar statusbar statusbar statusbar";
    grid-template-columns: var(--sidebar-width) var(--lesson-panel-width) 1fr;
    grid-template-rows: var(--toolbar-height) var(--tab-height) 1fr var(--console-height) var(--statusbar-height);
}

/* Normal mode is the base #app rule above */

/* Home mode — single area */
#app.home-mode {
    grid-template-areas:
        "toolbar toolbar"
        "home home"
        "statusbar statusbar";
    grid-template-columns: 1fr;
    grid-template-rows: var(--toolbar-height) 1fr var(--statusbar-height);
}

/* ═══════════════════════════════════════════
   Grid Area Assignments
   ═══════════════════════════════════════════ */

.sidebar      { grid-area: sidebar; }
.toolbar      { grid-area: toolbar; }
.tabbar       { grid-area: tabbar; }
.editor       { grid-area: editor; }
.console      { grid-area: console; }
.statusbar    { grid-area: statusbar; }
.lesson-panel { grid-area: lesson; }
.home         { grid-area: home; }

/* ═══════════════════════════════════════════
   Panel Base Styles
   ═══════════════════════════════════════════ */

.sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.toolbar {
    background: var(--bg-toolbar);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--gap-sm);
    gap: var(--gap-sm);
}

.tabbar {
    background: var(--bg-tab-inactive);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
}

.editor {
    background: var(--bg-editor);
    overflow: hidden;
    position: relative;
    display: flex;
}

.console {
    background: var(--bg-console);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.statusbar {
    background: var(--bg-statusbar);
    display: flex;
    align-items: center;
    padding: 0 var(--gap-sm);
    font-size: var(--font-size-small);
    color: #ffffff;
    gap: var(--gap-md);
}

.lesson-panel {
    background: var(--bg-lesson);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.home {
    background: var(--bg-base);
    overflow-y: auto;
    padding: var(--gap-xl);
}

/* ═══════════════════════════════════════════
   Resizer Handles
   ═══════════════════════════════════════════ */

.resizer {
    position: absolute;
    z-index: var(--z-panel);
}

.resizer--horizontal {
    width: 100%;
    height: 4px;
    cursor: ns-resize;
    left: 0;
}

.resizer--vertical {
    width: 4px;
    height: 100%;
    cursor: ew-resize;
    top: 0;
}

.resizer:hover,
.resizer.active {
    background: var(--accent);
}

/* ═══════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════ */

.hidden { display: none !important; }

.flex-row {
    display: flex;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-1 { flex: 1; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}