/* ============================================================
   KOSHA - Reports Page CSS
   ============================================================ */

/* ─── KPI Cards ──────────────────────────────────────────────── */
.kpi-card {
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); padding: 1.375rem;
    box-shadow: var(--shadow-card); position: relative;
    overflow: hidden; transition: var(--transition);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.kpi-card::after {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px; border-radius: 50%;
    background: rgba(59,130,246,.04);
}
.kpi-icon {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; margin-bottom: .875rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.kpi-value {
    font-size: 1.6rem; font-weight: 800; color: var(--text-primary);
    margin-bottom: .125rem; line-height: 1;
    font-feature-settings: "tnum";
}
.kpi-label { font-size: .8125rem; color: var(--text-muted); }
.kpi-trend {
    font-size: .75rem; font-weight: 700; margin-top: .5rem;
    display: flex; align-items: center; gap: .25rem;
}
.kpi-trend.up { color: var(--accent-dark); }
.kpi-trend.down { color: var(--danger); }
.kpi-trend::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.kpi-trend.up::before { content: '\f062'; font-size: .65rem; }
.kpi-trend.down::before { content: '\f063'; font-size: .65rem; }

/* ─── Chart legend ───────────────────────────────────────────── */
.chart-legend-item {
    display: flex; align-items: center; gap: .375rem;
    font-size: .78rem; color: var(--text-muted);
}

/* ─── GST Summary Table ──────────────────────────────────────── */
.gst-summary-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.gst-summary-table th, .gst-summary-table td { padding: .5rem .625rem; border-bottom: 1px solid var(--border-light); text-align: left; }
.gst-summary-table thead th { background: var(--bg-secondary); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.gst-summary-table tbody tr:hover { background: var(--bg-secondary); }
.gst-summary-table tfoot td { font-weight: 800; border-top: 2px solid var(--border); }