/* SMARTCO_UI_GLOBAL_COMPACT_DENSITY_v1_0
   Purpose: reduce vertical density for common UI containers across SMARTCO.
   Scope: sidebar navigation cards, top/page headers, page panels, status/API banner, buttons, forms and tables.
   Note: uses explicit overrides because existing freeze rules use important declarations.
*/
:root {
    --smartco-compact-density-enabled: 1;
    --smartco-compact-panel-padding: clamp(0.72rem, 1.15vw, 0.98rem);
    --smartco-compact-radius: 0.95rem;
}

.page-surface {
    gap: 0.72rem;
}

.content {
    padding: clamp(0.82rem, 1.45vw, 1.28rem) !important;
}

.header {
    padding: 0.62rem 0.85rem !important;
    gap: 0.65rem !important;
    margin-bottom: 0.05rem !important;
    border-radius: var(--smartco-compact-radius) !important;
}

.header h1 {
    font-size: clamp(1.1rem, 2.05vw, 1.55rem) !important;
    line-height: 1.35 !important;
}

.header p {
    margin-top: 0.22rem !important;
    line-height: 1.52 !important;
}

.panel,
.metric,
.api-unavailable-panel,
.error {
    padding: var(--smartco-compact-panel-padding) !important;
    border-radius: var(--smartco-compact-radius) !important;
}

.runtime-banner {
    padding: 0.46rem 0.78rem !important;
    min-height: 2.55rem !important;
    border-radius: 0.95rem !important;
    gap: 0.55rem !important;
}

.runtime-banner .button-secondary,
.runtime-banner button {
    min-height: 2.05rem !important;
    padding: 0.38rem 0.72rem !important;
}

.sidebar {
    padding: 0.82rem 0.72rem 0.95rem !important;
}

.brand {
    padding: 0.22rem 0.15rem 0.72rem !important;
    gap: 0.62rem !important;
}

.brand-mark {
    width: 3.05rem !important;
    height: 3.05rem !important;
    border-radius: 0.88rem !important;
}

.brand strong {
    font-size: 1.08rem !important;
    line-height: 1.35 !important;
}

.brand span {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
}

.nav-shell {
    gap: 0.38rem !important;
    margin-top: 0.62rem !important;
    padding-bottom: 0.72rem !important;
}

.nav-group {
    border-radius: 0.82rem !important;
}

.nav-group-header,
.nav-group summary {
    grid-template-columns: 1.85rem minmax(0, 1fr) !important;
    gap: 0.42rem !important;
    min-height: 2.18rem !important;
    padding: 0.34rem 0.48rem !important;
}

.nav-group-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    border-radius: 0.6rem !important;
    font-size: 0.66rem !important;
}

.nav-group-label {
    font-size: 0.88rem !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
}

.nav-group-links {
    gap: 0.12rem !important;
    padding: 0 0.34rem 0.38rem !important;
}

.nav-link {
    min-height: 1.98rem !important;
    padding: 0.26rem 0.42rem !important;
    border-radius: 0.68rem !important;
    gap: 0.42rem !important;
}

.nav-link-text {
    font-size: 0.84rem !important;
    line-height: 1.32 !important;
}

.nav-link-meta {
    font-size: 0.58rem !important;
    padding: 0.08rem 0.28rem !important;
}

.nav-link-bullet {
    width: 0.3rem !important;
    height: 0.3rem !important;
}

button,
.button-secondary {
    min-height: 2.08rem !important;
    padding: 0.42rem 0.82rem !important;
}

input,
select,
textarea {
    padding: 0.48rem 0.68rem !important;
    border-radius: 0.74rem !important;
}

textarea {
    min-height: 5.3rem !important;
}

th,
td {
    padding: 0.58rem 0.68rem !important;
}

.badge {
    min-height: 1.38rem !important;
    padding: 0.16rem 0.48rem !important;
}

@media (max-width: 900px) {
    .topbar {
        padding-inline: 0.62rem !important;
    }

    .header,
    .panel,
    .metric,
    .runtime-banner,
    .api-unavailable-panel,
    .error {
        padding: 0.62rem !important;
    }

    .sidebar {
        padding: 0.72rem 0.62rem 0.95rem !important;
    }
}