/* ========================================================================
   layout.css — Global layout & structure styles for Flock web UI
   (extracted from legacy custom.css)
   ======================================================================== */

/* ---------- Global grid layout ---------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    display: grid;
    /* Sidebar column (300px) + main flexible column */
    grid-template-columns: 300px 1fr;
    /* Header (auto height) + main (flex) + footer (auto) rows */
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100vh;
    margin: 0;
    background-color: var(--pico-background-color);
}

/* ---------- Main content area ---------- */
main.main-content {
    grid-area: main;
    padding: 1.5rem;
    overflow-y: auto;
    /* account for fixed header height so content starts below */
    margin-top: 3.5rem;
    background-color: var(--pico-background-color);
    /* ensure footer does not overlap scrolling content */
    padding-bottom: 50px;
}

/* ---------- Footer ---------- */
footer.main-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--pico-card-background-color);
    border-top: 1px solid var(--pico-muted-border-color);
    padding: 0.5rem 1rem;
    text-align: center;
    z-index: 1000;
} 