/*
 * Akquix Layout System
 * Reine Layout-Definitionen für das CRM.
 * Flexbox, Grid, Container, Spacing, Responsive.
 * Keine Farben. Keine Komponenten. Keine Formulare. Keine Tabellen.
 */

/* App Chrome */
.app-shell {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    min-height: 100vh;
    gap: var(--space-xl, 2.5rem);
}

.app-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: minmax(240px, 320px);
    flex-shrink: 0;
    padding: var(--space-lg, 2rem);
}

.app-frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg, 2rem);
    padding: var(--space-lg, 2rem) var(--space-xl, 3rem);
    flex-shrink: 0;
}

.app-content {
    display: grid;
    gap: var(--space-lg, 2rem);
    width: 100%;
    padding: var(--space-lg, 2rem) var(--space-xl, 3rem);
    min-height: 0;
}

/* Container System */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-md, 1.5rem);
}

.container-sm { max-width: min(560px, 100%); }
.container-md { max-width: min(760px, 100%); }
.container-lg { max-width: min(980px, 100%); }
.container-xl { max-width: min(1160px, 100%); }

/* Grid Utilities */
.grid {
    display: grid;
    gap: var(--space-lg, 2rem);
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Stack / Cluster Utilities */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1.5rem);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md, 1.5rem);
}

/* Section Layout */
.section {
    display: grid;
    gap: var(--space-lg, 2rem);
    padding-block: var(--space-lg, 2rem);
}

.page-header {
    display: grid;
    gap: var(--space-sm, 1rem);
}

.page-content {
    display: grid;
    gap: var(--space-lg, 2rem);
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .app-shell {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .app-header,
    .app-content {
        padding-inline: var(--space-md, 1.5rem);
    }
}

@media (max-width: 992px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        min-height: auto;
        width: 100%;
        padding-inline: var(--space-lg, 2rem);
    }

    .app-header {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .stack,
    .cluster {
        gap: var(--space-sm, 1rem);
    }
}

@media (max-width: 576px) {
    .app-header {
        padding: var(--space-md, 1.5rem);
    }

    .app-content {
        padding-block: var(--space-lg, 2rem);
    }
}