/*
 * Resource dashboard.
 *
 * KPI band and stat cards mirror css/projects/dashboard/index.css — same grid, same
 * breakpoints, same card anatomy — so the two dashboards read as one system. The
 * palette comes from css/resource/shared.css.
 */

.resource-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================ KPI band ============================ */

.kpi-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

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

@media (max-width: 620px) {
    .kpi-band { grid-template-columns: 1fr; }
}

.stat-card {
    background: #fff;
    border: 1px solid var(--res-border);
    border-radius: 8px;
    padding: 16px;
}

/* Affordance for the drillable cards. drilldown.js adds .is-drillable. */
.stat-card.is-drillable {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.stat-card.is-drillable:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
    transform: translateY(-1px);
}

.stat-card.is-drillable:focus-visible {
    outline: 2px solid var(--res-green);
    outline-offset: 2px;
}

.stat-header { display: flex; justify-content: space-between; margin-bottom: 10px; }

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
}

.stat-icon.navy { background-color: var(--res-navy); }
.stat-icon.green { background-color: var(--res-green); }
.stat-icon.teal { background-color: var(--res-blue); }
.stat-icon.amber { background-color: var(--res-amber); }
.stat-icon.slate { background-color: var(--res-slate); }
.stat-icon.red { background-color: var(--res-red); }

.stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--res-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--res-navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Two lines of room, so a card whose sub-line wraps does not sit taller than its
   neighbours and break the band's alignment. */
.stat-sub {
    font-size: 12px;
    color: var(--res-muted);
    min-height: 30px;
    line-height: 1.3;
}

/* ============================ Charts ============================ */

.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 1000px) {
    .chart-grid { grid-template-columns: 1fr; }
}

/* Chart.js needs a bounded parent or the canvas grows on every resize. */
.chart-grid .panel-body {
    height: 280px;
    position: relative;
}