/* Globale Resets */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow: hidden; /* Verhindert unschöne Scrollbalken auf der Hauptebene */
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* App-Container Layout mit Table/Block für WeasyPrint/Browser-Kompatibilität */
.app-container {
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
}

/* Haupt-Inhaltsbereich rechts */
#content-area {
    position: absolute;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    padding: 40px;
    overflow-y: auto; /* Scrollbalken nur hier, falls der Inhalt lang wird */
    background-color: var(--bg-main);
    transition: var(--transition-fast);
}

/* Lade-Indikator */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 14pt;
    color: var(--text-muted);
    font-weight: 500;
}

/* Scrollbalken-Styling für moderne Browser */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-card-hover);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}