/* Shared application frame and responsive overview KPI strip. */
:root {
    --sidebar-rail-width: 48px;
    --sidebar-expanded-width: 232px;
    --sidebar-current-width: var(--sidebar-rail-width);
    --content-max-width: 1800px;
    --page-gutter: clamp(24px, 3vw, 32px);
}

body.sidebar-pinned {
    --sidebar-current-width: var(--sidebar-expanded-width);
}

@media (min-width: 768px) {
    .sidebar {
        width: var(--sidebar-rail-width);
        padding-inline: 4px;
    }

    .sidebar:hover,
    body.sidebar-pinned .sidebar {
        width: var(--sidebar-expanded-width);
        padding-inline: 10px;
    }

    .workspace-commandbar {
        position: sticky;
        top: 0;
        inset-inline: auto;
        z-index: 1040;
        width: calc(100% - var(--sidebar-current-width));
        height: 56px;
        margin: 0 0 0 var(--sidebar-current-width);
        padding: 0;
        border: 0;
        border-bottom: 1px solid hsl(var(--line));
        border-radius: 0;
        background: hsl(var(--surface));
        box-shadow: none;
        backdrop-filter: none;
    }

    .command-search {
        margin-left: max(
            var(--page-gutter),
            (100% - var(--content-max-width)) / 2
        );
        margin-right: auto;
    }

    .workspace-mobile-actions {
        margin-right: max(
            var(--page-gutter),
            (100% - var(--content-max-width)) / 2
        );
    }

    .main-content {
        width: min(
            var(--content-max-width),
            calc(100% - var(--sidebar-current-width) - 2 * var(--page-gutter))
        );
        margin: 0 0 0 calc(
            var(--sidebar-current-width) +
            max(var(--page-gutter), (100% - var(--sidebar-current-width) - var(--content-max-width)) / 2)
        );
        padding: 24px 0 48px;
    }

    .main-content .card {
        margin-bottom: 16px;
        border-radius: var(--radius-card);
        box-shadow: var(--surface-shadow);
    }
}

.stat-strip-card {
    margin: 0;
    overflow: hidden;
}

.main-content > .recent-reports-row {
    max-width: none;
}

.stat-strip-card > .card-body {
    padding: 0;
}

#statsCards.stats-strip {
    display: grid;
    width: 100%;
    grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(132px, 1fr);
    gap: 0;
    margin: 0;
}

#statsCards.stats-strip > .stat-card {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 132px;
    height: 100%;
    flex: initial;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    padding: 16px 20px;
    border: 0;
    border-left: 1px solid hsl(var(--line));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

#statsCards.stats-strip > .stat-card:first-child {
    border-left: 0;
}

#statsCards .stat-label {
    order: 0;
    width: 100%;
    overflow: hidden;
    color: hsl(var(--muted));
    font-size: 0.75rem;
    font-weight: 550;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#statsCards .stat-value {
    order: 1;
    display: block;
    max-width: 100%;
    margin: 3px 0 1px;
    color: hsl(var(--ink));
    font-size: 28px;
    font-weight: 650;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.035em;
    line-height: 1.08;
    white-space: nowrap;
}

#statsCards .stat-context {
    order: 2;
    width: 100%;
    color: hsl(var(--muted));
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: normal;
    word-break: normal;
}

#statsCards .attention-stack {
    order: 3;
    display: flex;
    width: 100%;
    height: 4px;
    margin: 4px 0 0;
    overflow: hidden;
    border-radius: 99px;
    background: hsl(var(--surface-raised));
}

#statsCards .attention-stack span {
    display: block;
    height: 100%;
}

#statsCards .attention-critical { background: #dc2626; }
#statsCards .attention-high { background: #ea580c; }
#statsCards .attention-other { background: hsl(var(--line)); }

#statsCards .attention-legend {
    order: 4;
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
    color: hsl(var(--muted));
    font-size: 0.65rem;
    white-space: nowrap;
}

#statsCards .attention-count {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

#statsCards .attention-count:first-child { color: #b91c1c; }
#statsCards .attention-count:nth-child(2) { color: #c2410c; }
#statsCards .attention-count b {
    color: inherit;
    font-variant-numeric: tabular-nums;
}

/* CENTRAL identity: horizontal lockup when there is room, emblem in the rail. */
.brand-lockup .brand-emblem {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgb(15 23 42 / .12);
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    object-position: left center;
}

.brand-lockup .brand-lockup-expanded {
    display: none;
    min-width: 0;
    flex: 1 1 auto;
    padding: 4px 5px 3px;
    border-radius: 8px;
    background: #fff;
}

.brand-lockup .brand-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-app-caption {
    display: block;
    margin-top: 2px;
    color: #334155;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.mobile-brand-emblem {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid rgb(15 23 42 / .12);
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    object-position: left center;
}

.login-card .logo-section img#loginLogo,
.twofa-card > .twofa-logo {
    display: block;
    width: min(100%, 390px);
    height: auto;
    margin: 0 auto 18px;
    padding: 4px 6px;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

@media (min-width: 768px) {
    .sidebar:hover .brand-lockup .brand-emblem,
    body.sidebar-pinned .brand-lockup .brand-emblem {
        display: none;
    }

    .sidebar:hover .brand-lockup .brand-lockup-expanded,
    body.sidebar-pinned .brand-lockup .brand-lockup-expanded {
        display: block;
    }

    .sidebar:hover .brand-lockup,
    body.sidebar-pinned .brand-lockup {
        justify-content: flex-start;
        padding-right: 31px;
        padding-left: 5px;
    }
}

@media (max-width: 767.98px) {
    .sidebar .brand-lockup {
        min-height: 70px;
        justify-content: flex-start;
        padding: 7px 8px 14px;
    }

    .sidebar .brand-lockup .brand-emblem {
        display: none;
    }

    .sidebar .brand-lockup .brand-lockup-expanded {
        display: block;
        max-width: 205px;
        margin-right: 0;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    #statsCards.stats-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #statsCards.stats-strip > .stat-card:nth-child(3n + 1) {
        border-left: 0;
    }

    #statsCards.stats-strip > .stat-card:nth-child(n + 4) {
        border-top: 1px solid hsl(var(--line));
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.sidebar-pinned .pagination {
        gap: 2px;
    }

    body.sidebar-pinned .pagination .page-link {
        min-width: 30px;
        padding-inline: 5px;
    }
}

@media (max-width: 767.98px) {
    .workspace-commandbar {
        position: sticky;
        inset: 0 auto auto 0;
        width: 100%;
        height: 56px;
        margin: 0;
        padding: 0 12px;
        gap: 8px;
        border-radius: 0;
        background: hsl(var(--surface));
        box-shadow: none;
    }

    .main-content,
    body.sidebar-pinned .main-content {
        width: 100%;
        margin: 0;
        padding: 16px 16px 36px;
    }

    .sidebar,
    .sidebar:hover,
    body.sidebar-pinned .sidebar {
        width: min(288px, 84vw);
    }

    #statsCards.stats-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #statsCards.stats-strip > .stat-card {
        padding: 16px 12px;
    }

    #statsCards.stats-strip > .stat-card:nth-child(2n + 1) {
        border-left: 0;
    }

    #statsCards.stats-strip > .stat-card:nth-child(n + 3) {
        border-top: 1px solid hsl(var(--line));
    }
}

@media (max-width: 420px) {
    .workspace-commandbar {
        gap: 5px;
    }
}

.sidebar .rail-pin svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar .rail-pin:focus-visible {
    outline: 2px solid hsl(var(--accent));
    outline-offset: 2px;
}

.data-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 0;
    margin: 18px 0 12px;
    border-top: 1px solid hsl(var(--line));
    border-left: 1px solid hsl(var(--line));
}

.data-status-grid > div {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid hsl(var(--line));
    border-bottom: 1px solid hsl(var(--line));
}

.data-status-grid dt {
    margin-bottom: 5px;
    color: hsl(var(--muted));
    font-size: 0.75rem;
    font-weight: 550;
}

.data-status-grid dd {
    margin: 0;
    color: hsl(var(--ink));
    font-size: 0.9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.data-status-empty {
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid hsl(var(--warning) / 0.35);
    border-radius: 8px;
    color: hsl(var(--ink));
    background: hsl(var(--warning) / 0.08);
}

.data-status-error {
    color: hsl(var(--muted));
    font-size: 0.8rem;
}