* {
    box-sizing: border-box;
}

html {
    height: var(--full-height);
}

body {
    height: var(--full-height);
    margin: var(--space-0);
    font-family: var(--font-family-base);
    font-size: var(--font-size-text);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-bg);
    overflow: hidden;
}

.app-shell {
    height: var(--app-height);
    display: grid;
    grid-template-rows: var(--header-height) var(--content-row) var(--footer-height);
    grid-template-columns: var(--sidebar-width) var(--content-col);
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.app-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-7);
    background: var(--color-surface);
    border-bottom: var(--border);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-header);
}

.app-sidebar {
    grid-area: sidebar;
    padding: var(--space-5);
    background: var(--color-surface-alt);
    border-right: var(--border);
    overflow: visible;
    z-index: calc(var(--z-sidebar) + 1);
}

.app-sidebar .sidebar-flash {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-text);
}

.app-main {
    grid-area: main;
    padding: var(--content-padding);
    overflow: auto;
    min-height: var(--space-0);
    scroll-behavior: smooth;
}

.app-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-7);
    background: var(--color-surface);
    border-top: var(--border);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-footer);
}

.app-footer .footer-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-footer .footer-separator {
    color: var(--color-muted);
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.content-inner {
    width: var(--full-width);
    max-width: none;
}