/**
 * NetMonitor — global layout and theme bridge variables.
 * Loaded before base.html inline styles; base :root remains the primary palette.
 */
:root {
    --app-header-height: 70px;
    --app-page-padding-y: 32px;
    --app-page-padding-x: 32px;
    /* Full-bleed panels (e.g. topology) inside padded .page-content */
    --app-main-inner-height: calc(
        100dvh - var(--app-header-height) - 2 * var(--app-page-padding-y)
    );
    /* Fallback for environments without dvh support */
    --app-main-inner-height-fallback: calc(
        100vh - var(--app-header-height) - 2 * var(--app-page-padding-y)
    );
}

@media (max-width: 768px) {
    :root {
        --app-page-padding-y: 16px;
        --app-page-padding-x: 16px;
    }
}

@media (max-width: 480px) {
    :root {
        --app-header-height: 60px;
        --app-page-padding-y: 12px;
        --app-page-padding-x: 12px;
    }
}

/* Manual check after UI changes: Dashboard, Cihazlar, Topoloji, Ayarlar; 768 / 480 breakpoints. */