@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --ux-bg: #f3f6fb;
    --ux-panel: #ffffff;
    --ux-text: #1c2433;
    --ux-muted: #6a7485;
    --ux-primary: #0d6cdb;
    --ux-primary-soft: #e8f2ff;
    --ux-success: #0b9f75;
    --ux-warning: #cc7a00;
    --ux-danger: #d64545;
    --ux-border: #e2e8f3;
    --ux-shadow: 0 10px 28px rgba(15, 32, 58, 0.08);
}

body {
    font-family: 'Manrope', sans-serif;
    background: radial-gradient(circle at 0 0, #eff6ff 0%, var(--ux-bg) 42%, #eef2f7 100%);
    color: var(--ux-text);
}

.card {
    border-radius: 14px;
    border: 1px solid var(--ux-border);
    box-shadow: var(--ux-shadow);
}

.card .card-header {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.page-title {
    font-weight: 800;
    letter-spacing: 0.2px;
}

.btn {
    border-radius: 10px;
    font-weight: 700;
}

.btn-primary {
    background-color: var(--ux-primary);
    border-color: var(--ux-primary);
}

.table {
    border-radius: 12px;
    overflow: hidden;
}

.table thead th {
    background: #f6f9ff;
    color: #2b3547;
    font-weight: 700;
    border-bottom: 1px solid var(--ux-border);
}

.table td,
.table th {
    vertical-align: middle;
}

.form-control,
.custom-select {
    border-radius: 10px;
    border-color: #d9e2ef;
}

.form-control:focus,
.custom-select:focus {
    border-color: #91b8ef;
    box-shadow: 0 0 0 0.2rem rgba(13, 108, 219, 0.12);
}

.badge {
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
}

.report-toolbar {
    background: linear-gradient(135deg, #f7fbff 0%, #eef5ff 100%);
    border: 1px solid #d9e7fb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}

.report-kpi {
    background: var(--ux-panel);
    border: 1px solid var(--ux-border);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.report-kpi h6 {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--ux-muted);
    margin-bottom: 4px;
}

.report-kpi p {
    margin: 0;
    font-weight: 800;
    font-size: 22px;
}