:root {
    --brand-dark: #0d3b66;
    --brand: #1a6fa0;
    --surface: #f0f2f5;
}

body {
    min-height: 100vh;
    background: var(--surface);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.navbar-custom,
.login-hero {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
}

.card {
    border: 0;
    border-radius: .65rem;
}

.card-summary {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--accent, #4e73df);
    transition: transform .15s ease;
}

.card-summary:hover { transform: translateY(-3px); }
.card-summary .card-icon {
    position: absolute;
    right: 1rem;
    top: .8rem;
    color: var(--accent, #4e73df);
    font-size: 2.5rem;
    opacity: .22;
}

.table-sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 78%);
}
.filter-card { border: 1px solid #b8d4e8; background: #f4f9fd; }
.instance-badge, .cpl-badge { display: inline-block; border-radius: .35rem; padding: .2em .55em; font-size: .82em; font-weight: 600; }
.cpl-low { background: #d4edda; color: #155724; }
.cpl-mid { background: #fff3cd; color: #856404; }
.cpl-high { background: #f8d7da; color: #721c24; }
.chart-wrap { position: relative; min-height: 320px; }
.login-page { min-height: 100vh; background: linear-gradient(135deg, #edf4fa, #dce9f3); }
.login-card { width: min(100% - 2rem, 430px); }
.login-digirev-logo {
    display: block;
    width: clamp(140px, 48%, 180px);
    max-height: 46px;
    object-fit: contain;
    margin: 0 auto;
}
.navbar-digirev-logo { display: block; width: auto; height: 30px; }
.password-rule { font-size: .78rem; }
.audit-json { max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; }
.records-table { min-width: 2300px; font-size: .78rem; }
.records-table thead th { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.records-table-wrap { max-height: 68vh; }
.records-campaign { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-chart-wrap { min-height: 480px; }
.history-series-dot {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    margin-right: .5rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(15 23 42 / 12%);
    vertical-align: middle;
}

.kpi-status-dot {
    display: inline-block;
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #20c997;
    box-shadow: 0 0 0 .2rem rgb(32 201 151 / 14%);
}
.kpi-command-bar .card-body { padding: .85rem 1rem; }
.kpi-command-bar .form-control,
.kpi-command-bar .form-select,
.kpi-command-bar .btn { min-height: 31px; }
.kpi-command-bar .kpi-presets .btn { min-width: 3rem; }
.kpi-time-input,
.report-time-input { flex: 0 0 6.25rem !important; max-width: 6.25rem; }
.kpi-builder-panel { position: sticky; top: .75rem; }
.kpi-builder-panel .card-header { border-bottom-color: #edf0f3; }
.kpi-builder-panel .card-body { padding: 1rem; }
.kpi-builder-panel .accordion-button { font-size: .9rem; font-weight: 600; background: transparent; box-shadow: none; }
.kpi-builder-panel .accordion-button:not(.collapsed) { color: var(--bs-primary); }
.kpi-template-actions .btn:not(.flex-grow-1) { width: 2.1rem; }
.kpi-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.kpi-check {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 4.25rem;
    padding: .6rem;
    border: 1px solid #dfe5ec;
    border-radius: .65rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.kpi-check:hover { transform: translateY(-1px); border-color: #9ec5fe; }
.kpi-check:has(input:checked) { background: #edf6ff; border-color: #6ea8fe; color: #0a58ca; }
.kpi-check input { position: absolute; right: .45rem; top: .45rem; }
.kpi-check i { font-size: 1.1rem; margin-bottom: .15rem; }
.kpi-check span { font-size: .72rem; font-weight: 600; line-height: 1.15; }
.kpi-loading {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    padding-top: 10rem;
    border-radius: .8rem;
    background: rgb(240 242 245 / 86%);
    backdrop-filter: blur(2px);
    font-weight: 600;
}
.kpi-summary-card {
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--kpi-accent) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-summary-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgb(15 23 42 / 10%) !important; }
.kpi-summary-card::after {
    content: "";
    position: absolute;
    width: 6rem;
    height: 6rem;
    right: -2.5rem;
    bottom: -3.5rem;
    border-radius: 50%;
    background: var(--kpi-accent);
    opacity: .07;
}
.kpi-card-value { font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 750; letter-spacing: -.03em; }
.kpi-card-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
    color: var(--kpi-accent);
    background: color-mix(in srgb, var(--kpi-accent) 11%, white);
    font-size: 1.25rem;
}
.kpi-delta {
    display: inline-flex;
    align-items: center;
    padding: .18rem .45rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 700;
}
.kpi-delta.positive { color: #087849; background: #dcf7eb; }
.kpi-delta.negative { color: #b02a37; background: #fbe5e7; }
.kpi-chart-lg { position: relative; min-height: 380px; }
.kpi-chart-md { position: relative; min-height: 310px; }
.kpi-rank {
    display: grid;
    place-items: center;
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #e7f1ff;
    color: #0d6efd;
    font-size: .75rem;
    font-weight: 700;
}
.kpi-group-name { display: inline-block; max-width: 240px; }
.kpi-share-progress { width: 70px; height: .35rem; }
.kpi-heatmap-table { min-width: 750px; text-align: center; font-size: .75rem; }
.kpi-heatmap-table th { border: 0; color: #64748b; font-weight: 600; }
.kpi-heatmap-table td {
    width: 3rem;
    height: 2.45rem;
    border: 3px solid white;
    border-radius: .45rem;
    background: color-mix(in srgb, #0d6efd calc(var(--heat) * 85%), #edf4ff);
    color: color-mix(in srgb, white calc(var(--heat) * 100%), #334155);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .table-responsive { font-size: .82rem; }
    .chart-wrap { min-height: 260px; }
    .navbar-digirev-logo { height: 27px; }
    .kpi-chart-lg { min-height: 300px; }
    .kpi-chart-md { min-height: 270px; }
    .kpi-card-value { font-size: 1.5rem; }
    .kpi-command-bar .card-body { padding: .75rem; }
    .history-chart-wrap { min-height: 380px; }
}