/* =============================================================================
   admin-layout.css
   Shell geometry. Amber = fixed track. Cyan = the only flexible track.
   ============================================================================= */

html, body.admin-app {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg, #020617);
    color: var(--text, #f1f5f9);
}

body.admin-app {
    display: grid;
    grid-template-rows: 4rem minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
}

body.admin-app > .admin-header,
body.admin-app > header {
    grid-row: 1;
    height: 4rem;
    min-height: 4rem;
    max-height: 4rem;
}

body.admin-app > .admin-app-body {
    grid-row: 2;
    display: grid;
    grid-template-columns: 3.35rem minmax(0, 1fr) 3.35rem;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

body.admin-app > footer {
    grid-row: 3;
}

.admin-app-rail {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.admin-app-main {
    display: grid;
    grid-template-rows: 3.5rem 3.65rem minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* --- debug paint --- */

html.shell-debug [data-slot] {
    position: relative;
    box-sizing: border-box;
}

html.shell-debug [data-slot]::before {
    content: attr(data-slot);
    position: absolute;
    top: 0.35rem;
    left: 0.45rem;
    z-index: 5;
    font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    pointer-events: none;
}

html.shell-debug [data-slot="rail 3.35rem"],
html.shell-debug [data-slot="section 3.5rem"],
html.shell-debug [data-slot="title 3.65rem"],
html.shell-debug [data-slot="left 300px"],
html.shell-debug [data-slot="right 300px"] {
    background: rgba(245, 158, 11, 0.22);
    outline: 2px solid #f59e0b;
    outline-offset: -2px;
}

html.shell-debug [data-slot="rail 3.35rem"]::before,
html.shell-debug [data-slot="section 3.5rem"]::before,
html.shell-debug [data-slot="title 3.65rem"]::before,
html.shell-debug [data-slot="left 300px"]::before,
html.shell-debug [data-slot="right 300px"]::before {
    color: #fbbf24;
}

html.shell-debug [data-slot="centre 1fr"] {
    background: rgba(34, 211, 238, 0.16);
    outline: 2px solid #22d3ee;
    outline-offset: -2px;
}

html.shell-debug [data-slot="centre 1fr"]::before {
    color: #67e8f9;
}

html.shell-debug .shell-legend {
    position: fixed;
    left: 4.1rem;
    bottom: 3.2rem;
    z-index: 80;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #e2e8f0;
    background: #020617;
    border: 1px solid #334155;
    padding: 0.55rem 0.7rem;
    pointer-events: none;
}

html.shell-debug .shell-legend b.fix { color: #fbbf24; }
html.shell-debug .shell-legend b.flex { color: #67e8f9; }