/* =========================================================
   Safe pure full-page fit layer
   Scope: full-page pure/embed views only.
   It intentionally avoids chart-only embeds and custom dashboards.
========================================================= */

:root {
    --df-pure-safe-pad: clamp(6px, .8vw, 12px);
    --df-pure-safe-gap: clamp(8px, .9vw, 14px);
    --df-pure-safe-card-pad: clamp(10px, 1vw, 16px);
    --df-pure-safe-card-pad-tight: clamp(8px, .72vw, 12px);
    --df-pure-safe-card-radius: 8px;
    --df-pure-safe-chart-height: clamp(220px, 34dvh, 360px);
    --df-pure-safe-map-height: clamp(280px, 46dvh, 560px);
    --df-pure-safe-grid-height: clamp(320px, 48dvh, 680px);
}

body:has(> .df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard)) {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    overflow: auto;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) {
    width: 100vw !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: var(--df-pure-safe-pad) !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    background: var(--df-bg, #06111f) !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-home-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-camera-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-devices-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-events-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-incident-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-analytics-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-lpr-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-users-page,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-server-page {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(100dvh - var(--df-pure-safe-pad) - var(--df-pure-safe-pad)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-page-heading {
    margin: 0 0 var(--df-pure-safe-gap) !important;
    padding: 2px 0 8px !important;
    min-height: auto !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-title {
    font-size: clamp(20px, 1.6vw, 30px) !important;
    line-height: 1.15 !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-page > section,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-home-page > section,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-camera-page > section,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-devices-page > section,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-events-page > section,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-incident-page > section,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-analytics-page > section,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-lpr-page > section,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-users-page > section {
    gap: var(--df-pure-safe-gap) !important;
    margin-bottom: var(--df-pure-safe-gap) !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-kpi-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-home-kpi-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-camera-kpi-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-devices-kpi-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-events-kpi-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-incident-kpi-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-analytics-kpi-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-lpr-kpi-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-users-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 156px), 1fr)) !important;
    gap: var(--df-pure-safe-gap) !important;
    align-items: stretch !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-home-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-camera-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-devices-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-events-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-incident-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-analytics-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-lpr-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-users-card,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) [class*="-kpi-card"] {
    min-height: 0 !important;
    border-radius: var(--df-pure-safe-card-radius) !important;
    box-shadow: 0 10px 24px rgba(2, 8, 23, .18) !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-card-header,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-home-card-header,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-camera-card-header,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-devices-card-header,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-events-card-header,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-incident-card-header,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-analytics-card-header,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-lpr-card-header,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-users-card-header {
    min-height: auto !important;
    padding: var(--df-pure-safe-card-pad) var(--df-pure-safe-card-pad) var(--df-pure-safe-card-pad-tight) !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-card-body,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-home-card-body,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-camera-card-body,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-devices-card-body,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-events-card-body,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-incident-card-body,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-analytics-card-body,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-lpr-card-body,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-users-card-body {
    min-height: 0 !important;
    padding: var(--df-pure-safe-card-pad) !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .rz-chart {
    width: 100% !important;
    max-height: var(--df-pure-safe-chart-height) !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-live-map-shell,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-live-map-canvas,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-home-real-map-shell,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-home-real-map {
    min-height: var(--df-pure-safe-map-height) !important;
}

.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-camera-radzen-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-devices-radzen-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-events-radzen-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-incident-radzen-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-analytics-radzen-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-lpr-radzen-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .df-users-radzen-grid,
.df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) .rz-data-grid {
    max-height: var(--df-pure-safe-grid-height) !important;
    overflow: auto !important;
}

@media (max-width: 900px), (max-height: 620px) {
    .df-pure-layout:not(.df-pure-chart):not(.df-pure-custom-dashboard) {
        --df-pure-safe-pad: 6px;
        --df-pure-safe-gap: 8px;
        --df-pure-safe-card-pad: 10px;
        --df-pure-safe-card-pad-tight: 8px;
        --df-pure-safe-chart-height: clamp(190px, 30dvh, 300px);
        --df-pure-safe-map-height: clamp(240px, 42dvh, 440px);
        --df-pure-safe-grid-height: clamp(280px, 44dvh, 560px);
    }
}