:root {
    --ui-scale-factor: 0.92;
}

body[data-ui-density="compact"] {
    --ui-sidebar-width: 224px;
    --ui-sidebar-pad-y: 1.15rem;
    --ui-sidebar-gap: 1rem;
    --ui-sidebar-logo-height: 4.25rem;
    --ui-topbar-pad-y: 0.9rem;
    --ui-topbar-pad-x: 1.35rem;
    --ui-shell-pad: clamp(0.9rem, 1.1vw, 1.25rem);
    --ui-screen-gap: clamp(0.9rem, 1.25vh, 1.2rem);
    --ui-card-pad: clamp(0.9rem, 1vw, 1.1rem);
    --ui-card-pad-lg: clamp(1rem, 1.2vw, 1.3rem);
    --ui-card-radius: 1.35rem;
    --ui-panel-radius: 1.55rem;
    --ui-title-size: clamp(1.45rem, 1.35vw, 1.95rem);
    --ui-section-title-size: clamp(1.3rem, 1.18vw, 1.75rem);
    --ui-subtitle-size: 0.76rem;
    --ui-kpi-label-size: 0.65rem;
    --ui-kpi-value-size: clamp(1.65rem, 1.9vw, 2.15rem);
    --ui-chip-value-size: clamp(1.25rem, 1.45vw, 1.7rem);
    --ui-table-header-size: 0.62rem;
    --ui-table-cell-size: 0.8rem;
}

body[data-ui-density="compact"] .app-sidebar {
    width: var(--ui-sidebar-width) !important;
}

body[data-ui-density="compact"] .app-sidebar-inner {
    padding-top: var(--ui-sidebar-pad-y);
    padding-bottom: var(--ui-sidebar-pad-y);
    gap: var(--ui-sidebar-gap);
}

body[data-ui-density="compact"] .app-sidebar-logo-slot {
    height: var(--ui-sidebar-logo-height);
    margin-bottom: 0.4rem;
}

body[data-ui-density="compact"] .app-sidebar-logo {
    max-height: calc(var(--ui-sidebar-logo-height) + 0.35rem);
}

body[data-ui-density="compact"] .app-topbar {
    padding: var(--ui-topbar-pad-y) var(--ui-topbar-pad-x);
    gap: 1rem;
}

body[data-ui-density="compact"] .app-topbar h1 {
    font-size: var(--ui-title-size);
    line-height: 1;
}

body[data-ui-density="compact"] .app-topbar p {
    font-size: var(--ui-subtitle-size);
    margin-top: 0.2rem;
    letter-spacing: 0.22em;
}

body[data-ui-density="compact"] .app-topbar-logo {
    height: 4.6rem;
}

body[data-ui-density="compact"] .app-page-shell {
    padding: var(--ui-shell-pad);
    gap: var(--ui-screen-gap);
}

body[data-ui-density="compact"] .app-screen {
    gap: var(--ui-screen-gap);
}

body[data-ui-density="compact"] .app-screen-header {
    gap: 0.85rem;
    padding-bottom: 0.95rem;
    margin-bottom: 0.95rem;
}

body[data-ui-density="compact"] .app-screen-header h2,
body[data-ui-density="compact"] .app-screen-header h3,
body[data-ui-density="compact"] .app-screen-header h1 {
    font-size: var(--ui-section-title-size);
    line-height: 1.05;
}

body[data-ui-density="compact"] .app-screen-header p {
    font-size: 0.82rem;
}

body[data-ui-density="compact"] .app-kpi-grid {
    gap: 0.85rem;
}

body[data-ui-density="compact"] .app-kpi-card {
    padding: var(--ui-card-pad);
    border-radius: var(--ui-card-radius);
}

body[data-ui-density="compact"] .app-kpi-card > div:first-child {
    margin-bottom: 0.45rem !important;
}

body[data-ui-density="compact"] .app-kpi-card > div:first-child span:first-child {
    font-size: var(--ui-kpi-label-size) !important;
    letter-spacing: 0.16em;
}

body[data-ui-density="compact"] .app-kpi-card > :last-child {
    font-size: var(--ui-kpi-value-size) !important;
    line-height: 1 !important;
}

.app-kpi-card.app-kpi-critical-alert {
    border-color: rgba(239, 68, 68, 0.8) !important;
    border-left-color: #ff3048 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(16px);
    animation: critical-border-blink 1.2s infinite ease-in-out;
    box-shadow:
        inset 4px 0 0 rgba(255, 48, 72, 1),
        0 10px 24px rgba(0, 0, 0, 0.3) !important;
}

.app-kpi-card.app-kpi-critical-alert::before {
    content: none;
}

.app-kpi-card.app-kpi-critical-alert::after {
    content: none;
}

.app-kpi-card.app-kpi-critical-alert:hover {
    border-color: rgba(239, 68, 68, 1) !important;
    background: rgba(15, 23, 42, 0.6) !important;
    box-shadow:
        inset 3px 0 0 rgba(255, 83, 104, 1),
        0 12px 26px rgba(0, 0, 0, 0.4) !important;
}

.app-kpi-critical-title {
    color: #fff1f2 !important;
    text-shadow: none;
}

.app-kpi-critical-badge {
    background: #dc2626 !important;
    border-color: rgba(255, 228, 230, 0.52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 228, 230, 0.2);
}

.app-kpi-critical-value {
    color: #ffe4e6 !important;
    text-shadow: 0 1px 0 rgba(69, 10, 10, 0.75);
}

.app-kpi-critical-icon {
    position: relative;
    flex: 0 0 auto;
    color: #fff1f2 !important;
    background: #dc2626 !important;
    border: 1px solid rgba(255, 228, 230, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 228, 230, 0.24);
}

.app-kpi-critical-icon::after {
    content: none;
}

.app-kpi-critical-dot {
    position: relative;
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    background: #fecaca;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.72);
}

.app-kpi-critical-dot::after {
    content: none;
}

@keyframes critical-border-blink {
    0%, 100% {
        border-color: #ef4444 !important;
        box-shadow: 
            inset 4px 0 0 #ff3048,
            0 0 20px rgba(239, 68, 68, 0.5),
            inset 0 0 10px rgba(239, 68, 68, 0.2) !important;
    }
    50% {
        border-color: rgba(239, 68, 68, 0.2) !important;
        box-shadow: 
            inset 4px 0 0 rgba(255, 48, 72, 0.4),
            0 0 2px rgba(239, 68, 68, 0) !important;
    }
}

@keyframes appCriticalAlertPulse {
    0% {
        opacity: 0.65;
        transform: scale(0.72);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-kpi-critical-icon::after,
    .app-kpi-critical-dot::after {
        animation: none;
    }
}

body[data-ui-density="compact"] .app-kpi-critical-title {
    font-size: var(--ui-kpi-label-size) !important;
    letter-spacing: 0.16em;
}

body[data-ui-density="compact"] .app-metric-chip {
    padding: 0.85rem 1rem;
    border-radius: 1rem;
}

body[data-ui-density="compact"] .app-metric-chip .app-metric-value {
    font-size: var(--ui-chip-value-size) !important;
    line-height: 1 !important;
}

body[data-ui-density="compact"] .app-panel {
    border-radius: var(--ui-panel-radius);
}

body[data-ui-density="compact"] .app-panel-head {
    padding: 0.95rem 1rem;
}

body[data-ui-density="compact"] .app-panel-body,
body[data-ui-density="compact"] .app-panel-pad {
    padding: var(--ui-card-pad-lg);
}

body[data-ui-density="compact"] .app-panel-title {
    font-size: 0.96rem;
}

body[data-ui-density="compact"] .app-panel-subtitle {
    font-size: 0.8rem;
}

body[data-ui-density="compact"] .app-table thead th {
    font-size: var(--ui-table-header-size) !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

body[data-ui-density="compact"] .app-table tbody,
body[data-ui-density="compact"] .app-table tbody td {
    font-size: var(--ui-table-cell-size);
}

body[data-ui-density="compact"] .app-table-foot {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

body[data-ui-density="compact"] .app-input,
body[data-ui-density="compact"] .app-select,
body[data-ui-density="compact"] .app-button {
    min-height: 2.75rem;
}

body[data-ui-density="compact"] .app-form-card {
    padding: clamp(1.3rem, 1.8vw, 1.8rem);
    border-radius: 1.6rem;
}

body[data-ui-density="compact"] .app-form-card h1,
body[data-ui-density="compact"] .app-form-card h2 {
    line-height: 1.05;
}

body[data-ui-density="compact"] .app-auth-shell {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

body[data-ui-density="compact"] .app-auth-title {
    font-size: clamp(1.55rem, 1.45vw, 2rem);
}

body[data-ui-density="compact"] .app-dashboard-map {
    height: min(31vh, 290px) !important;
}

body[data-ui-density="compact"] .app-dashboard-sidepanel {
    height: min(31vh, 290px) !important;
}

body[data-ui-density="compact"] .app-dashboard-chart {
    padding: var(--ui-card-pad-lg);
}

body[data-ui-density="compact"] .app-dashboard-chart-body {
    height: min(17vh, 160px) !important;
}

body[data-ui-density="compact"] .app-performance-grid {
    height: calc(100vh - 242px) !important;
    min-height: 520px !important;
}

body[data-ui-density="compact"] .app-footer {
    padding-top: 0.5rem !important;
    padding-bottom: 0.35rem !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.24em !important;
}

@media (min-width: 1024px) {
    body[data-ui-density="compact"].dashboard-screen-active .app-page-shell {
        padding-top: 0.7rem;
        padding-bottom: 0.4rem;
        gap: 0.7rem;
    }

    body[data-ui-density="compact"].dashboard-screen-active .app-screen {
        gap: 0.7rem;
    }

    body[data-ui-density="compact"].dashboard-screen-active .app-topbar {
        padding-top: 0.72rem;
        padding-bottom: 0.72rem;
    }

    body[data-ui-density="compact"].dashboard-screen-active .app-kpi-grid {
        gap: 0.6rem;
    }

    body[data-ui-density="compact"].dashboard-screen-active .app-kpi-card {
        padding: 0.78rem;
    }

    body[data-ui-density="compact"].dashboard-screen-active .app-kpi-card > :last-child {
        font-size: clamp(1.4rem, 1.45vw, 1.8rem) !important;
    }

    body[data-ui-density="compact"].dashboard-screen-active .app-dashboard-map,
    body[data-ui-density="compact"].dashboard-screen-active .app-dashboard-sidepanel {
        height: min(29vh, 270px) !important;
    }

    body[data-ui-density="compact"].dashboard-screen-active .app-dashboard-chart-body {
        height: min(15vh, 145px) !important;
    }
}

body[data-ui-density="compact"] .app-admin-shell {
    max-width: min(1500px, 96vw);
    gap: 1.1rem;
}

body[data-ui-density="compact"] .app-admin-header {
    padding: 1.15rem 1.35rem;
    border-radius: 1.6rem;
}

body[data-ui-density="compact"] .app-admin-header h1,
body[data-ui-density="compact"] .app-admin-header h2 {
    line-height: 1.05;
}

body[data-ui-density="compact"] .app-admin-panel {
    padding: 1.15rem;
    border-radius: 1.6rem;
}

body[data-ui-density="compact"] #billing-screen input,
body[data-ui-density="compact"] #billing-screen select,
body[data-ui-density="compact"] #billing-screen button,
body[data-ui-density="compact"] #report-screen input,
body[data-ui-density="compact"] #report-screen select,
body[data-ui-density="compact"] #report-screen button,
body[data-ui-density="compact"] #recipients-screen button,
body[data-ui-density="compact"] #performance-screen button {
    min-height: 2.55rem;
}

body[data-ui-density="compact"] #billing-screen input,
body[data-ui-density="compact"] #billing-screen select,
body[data-ui-density="compact"] #report-screen input,
body[data-ui-density="compact"] #report-screen select {
    font-size: 0.83rem;
}

body[data-ui-density="compact"] #billing-screen .glass,
body[data-ui-density="compact"] #performance-screen .glass,
body[data-ui-density="compact"] #recipients-screen .glass,
body[data-ui-density="compact"] #report-screen .glass {
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1023px) {
    body[data-ui-density="compact"] {
        --ui-sidebar-width: 240px;
        --ui-topbar-pad-y: 0.95rem;
        --ui-topbar-pad-x: 1rem;
        --ui-shell-pad: 1rem;
        --ui-card-pad: 0.95rem;
        --ui-card-pad-lg: 1rem;
        --ui-kpi-value-size: clamp(1.45rem, 5vw, 1.9rem);
    }

    body[data-ui-density="compact"] .app-dashboard-map,
    body[data-ui-density="compact"] .app-dashboard-sidepanel {
        height: auto !important;
    }

    body[data-ui-density="compact"] .app-performance-grid {
        height: auto !important;
        min-height: 0 !important;
    }
}

@media (max-height: 900px) and (min-width: 1024px) {
    body[data-ui-density="compact"] {
        --ui-topbar-pad-y: 0.72rem;
        --ui-topbar-pad-x: 1.15rem;
        --ui-shell-pad: 0.85rem;
        --ui-screen-gap: 0.85rem;
        --ui-card-pad: 0.8rem;
        --ui-card-pad-lg: 0.95rem;
        --ui-sidebar-logo-height: 3.9rem;
        --ui-kpi-value-size: clamp(1.45rem, 1.55vw, 1.95rem);
    }

    body[data-ui-density="compact"] .app-topbar-logo {
        height: 3.75rem;
    }

    body[data-ui-density="compact"] .app-dashboard-map,
    body[data-ui-density="compact"] .app-dashboard-sidepanel {
        height: min(28vh, 255px) !important;
    }

    body[data-ui-density="compact"] .app-dashboard-chart-body {
        height: min(14vh, 135px) !important;
    }
}