/* Reset + Basis-Typografie + App-Layout */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100dvh;
    overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

h1, h2, h3, h4 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-headline);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { margin: 0 0 var(--space-4); }

img { max-width: 100%; display: block; }

button, input, select, textarea { font-family: inherit; }

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.boot-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    color: var(--text-muted);
    font-family: var(--font-headline);
}

/* ---------- Material-Icon-Helper ---------- */
.icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}
.icon-sm { font-size: 18px; }
.icon-lg { font-size: 32px; }
.icon-fill { font-variation-settings: 'FILL' 1; }

/* ---------- App-Shell (Layout-Container) ---------- */

/* Root-Container, der #app umschließt. Mobile: Top + Bottom + sichere Area */
.app-shell {
    min-height: 100dvh;
    padding-top:    calc(var(--topbar-height) + var(--safe-area-top));
    padding-bottom: calc(var(--tab-height) + var(--safe-area-bottom) + var(--space-6));
}

/* Content-Container innerhalb jeder View */
.page {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

/* ---------- Desktop-Breakpoint ---------- */
@media (min-width: 900px) {
    .app-shell {
        padding-top:    0;
        padding-bottom: var(--space-8);
        padding-left:   var(--sidebar-width);
    }
    .page {
        max-width: var(--content-max-width);
        padding: var(--space-6) var(--space-10);
    }

    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
}

/* ---------- Utilities ---------- */
.muted       { color: var(--text-muted); }
.secondary   { color: var(--text-secondary); }
.text-xs     { font-size: 12px; }
.text-sm     { font-size: 14px; }
.text-md     { font-size: 16px; }
.text-lg     { font-size: 18px; }
.text-xl     { font-size: 20px; }
.text-mono   { font-family: var(--font-mono); }
.text-head   { font-family: var(--font-headline); }
.text-upper  { text-transform: uppercase; letter-spacing: 0.08em; }

.center      { text-align: center; }
.right       { text-align: right; }

.mt-sm       { margin-top: var(--space-2); }
.mt-md       { margin-top: var(--space-4); }
.mt-lg       { margin-top: var(--space-6); }
.mt-xl       { margin-top: var(--space-8); }
.mb-md       { margin-bottom: var(--space-4); }
.mb-lg       { margin-bottom: var(--space-6); }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm      { gap: var(--space-2); }
.gap-md      { gap: var(--space-4); }
.gap-lg      { gap: var(--space-6); }
.full-w      { width: 100%; }

.hidden      { display: none !important; }

/* Nur auf Desktop sichtbar */
.desktop-only { display: none; }
@media (min-width: 900px) {
    .desktop-only { display: initial; }
    .mobile-only  { display: none !important; }
}