:root{
    --ink:#0B1220;
    --ink-muted:#64748B;
    --surface:#F7F8FB;
    --card:#FFFFFF;
    --border:#E6E9F0;
    --accent:#4338CA;
    --accent-bg:#EEF0FD;
    --danger:#DC2626;
    --danger-bg:#FEF2F2;
    --warning:#D97706;
    --warning-bg:#FFFBEB;
    --success:#16A34A;
    --success-bg:#F0FDF4;
    --radius:16px;
    --shadow:0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.05);
    --shadow-hover:0 4px 10px rgba(11,18,32,.06), 0 20px 40px rgba(67,56,202,.10);

    --font-display:"Manrope","Inter",system-ui,sans-serif;
    --font-body:"Inter",system-ui,sans-serif;
    --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}

.dashboard-container{
    max-width:1400px;
    margin:0 auto;
    padding:10px 0 40px;
    background:var(--surface);
    animation:dashboardFade .4s ease;
    font-family:var(--font-body);
    color:var(--ink);
}

/* ==================================================
                    DASHBOARD HEADER
================================================== */

.dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:32px;
    flex-wrap:wrap;
}

.dashboard-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    background:var(--accent-bg);
    color:var(--accent);
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:14px;
}

.dashboard-title{
    font-family:var(--font-display);
    font-size:32px;
    font-weight:800;
    letter-spacing:-.02em;
    color:var(--ink);
    margin:0 0 8px;
}

.dashboard-subtitle{
    font-size:15px;
    color:var(--ink-muted);
    max-width:520px;
    margin:0;
    line-height:1.55;
}

.dashboard-status{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    box-shadow:var(--shadow);
}

.status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 0 rgba(22,163,74,.55);
    animation:statusPulse 2s infinite;
}

@keyframes statusPulse{
    0%{box-shadow:0 0 0 0 rgba(22,163,74,.45);}
    70%{box-shadow:0 0 0 7px rgba(22,163,74,0);}
    100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}
}

/* ==================================================
                    SECTION HEADINGS
================================================== */

.section-heading{
    margin-bottom:20px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:8px;
}

.section-heading h2{
    font-family:var(--font-display);
    font-size:20px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 4px;
}

.section-heading p{
    font-size:14px;
    color:var(--ink-muted);
    margin:0;
}

/* ==================================================
                    STATS CARDS
================================================== */

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:36px;
}

.dashboard-card{
    position:relative;
    overflow:hidden;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    min-height:168px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:var(--shadow);
}

.dashboard-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.dashboard-card::after{
    content:"";
    position:absolute;
    right:-30px;
    top:-30px;
    width:100px;
    height:100px;
    border-radius:50%;
    background:rgba(67,56,202,.04);
}

.card-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--accent-bg);
    color:var(--accent);
    font-size:22px;
    transition:.3s;
}

.dashboard-card:hover .card-icon{
    transform:rotate(-6deg) scale(1.06);
}

.dashboard-card h2{
    margin-top:16px;
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
    color:var(--ink-muted);
    text-transform:uppercase;
    letter-spacing:.03em;
}

.dashboard-card p{
    margin:0;
    font-family:var(--font-mono);
    font-size:36px;
    font-weight:700;
    color:var(--ink);
    line-height:1;
    font-variant-numeric:tabular-nums;
}

.dashboard-card small{
    display:block;
    margin-top:8px;
    font-size:12px;
    color:var(--ink-muted);
}

/* Card accent + icon color per type (semantic — keep as risk signal, not decoration) */
.blue .card-icon{background:var(--accent-bg);color:var(--accent);}
.blue{border-top:3px solid var(--accent);}

.green .card-icon{background:var(--success-bg);color:var(--success);}
.green{border-top:3px solid var(--success);}

.yellow .card-icon{background:var(--warning-bg);color:var(--warning);}
.yellow{border-top:3px solid var(--warning);}

.red .card-icon{background:var(--danger-bg);color:var(--danger);}
.red{border-top:3px solid var(--danger);}

/* ==================================================
                    CHARTS
================================================== */

.charts-container{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
    margin-bottom:36px;
}

.chart-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
    transition:.25s;
}

.chart-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-hover);
}

.chart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.chart-header h3{
    font-family:var(--font-display);
    font-size:17px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 2px;
}

.chart-header small{
    color:var(--ink-muted);
    font-size:12px;
}

.chart-badge{
    padding:5px 12px;
    background:var(--accent-bg);
    color:var(--accent);
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
}

#riskChart{
    width:100%!important;
    height:320px!important;
}

#pieChart{
    width:240px!important;
    height:240px!important;
    margin:auto;
    display:block;
}

/* ==================================================
                    TABLE CARD
================================================== */

.table-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:8px;
    box-shadow:var(--shadow);
    transition:.25s;
}

.table-card:hover{
    box-shadow:var(--shadow-hover);
}

.table-responsive{
    overflow-x:auto;
}

.report-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:13.5px;
}

.report-table thead th{
    text-align:left;
    padding:14px 16px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink-muted);
    background:var(--surface);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.report-table thead th:first-child{border-top-left-radius:12px;}
.report-table thead th:last-child{border-top-right-radius:12px;}

.report-table tbody td{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    color:var(--ink);
    vertical-align:middle;
}

.report-table tbody tr{
    transition:background .15s ease;
}

.report-table tbody tr:hover{
    background:var(--surface);
}

.report-table tbody tr:last-child td{
    border-bottom:none;
}

.report-table td strong{
    font-family:var(--font-mono);
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

/* ==================================================
                    BADGES (risk / threat level)
================================================== */

.badge{
    display:inline-flex;
    align-items:center;
    padding:5px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    line-height:1;
}

.badge-low{
    background:var(--success-bg);
    color:var(--success);
}

.badge-medium{
    background:var(--warning-bg);
    color:var(--warning);
}

.badge-high{
    background:var(--danger-bg);
    color:var(--danger);
}

/* ==================================================
                    BUTTONS
================================================== */

.btn-view{
    display:inline-flex;
    align-items:center;
    padding:7px 16px;
    background:var(--accent);
    color:#fff!important;
    border:none;
    border-radius:8px;
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
    transition:background .2s ease, transform .2s ease;
}

.btn-view:hover{
    background:#3730A3;
    transform:translateY(-1px);
    color:#fff!important;
}

/* ==================================================
                    RESPONSIVE
================================================== */

@media(max-width:1200px){
.cards{
grid-template-columns:repeat(2,1fr);
}
.charts-container{
grid-template-columns:1fr;
}
}

@media(max-width:768px){
.dashboard-header{
flex-direction:column;
}
.cards{
grid-template-columns:1fr;
}
.dashboard-card{
min-height:150px;
}
.dashboard-card p{
font-size:30px;
}
.dashboard-title{
font-size:26px;
}
.chart-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}
#pieChart{
width:200px!important;
height:200px!important;
}
}

/* ==================================================
                    ANIMATION
================================================== */

@keyframes dashboardFade{
from{
opacity:0;
transform:translateY(15px);
}
to{
opacity:1;
transform:translateY(0);
}
}