/* ═══════════════════════════════════════════════════════════════
   VitaLumen — Admin BI Dashboard Styles
   ═══════════════════════════════════════════════════════════════ */

.bi-dashboard { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
.bi-header { margin-bottom: 1.5rem; }
.bi-header h2 { font-size: 1.4rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem 0; }
.bi-sub { font-size: .8rem; color: var(--text-tertiary); }

/* ── KPI Row ────────────────────────────────────────────────── */
.bi-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.bi-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1rem; text-align: center; }
.kpi-val { font-size: 1.5rem; font-weight: 700; color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.kpi-lbl { font-size: .72rem; color: var(--text-tertiary); margin-top: .25rem; text-transform: uppercase; letter-spacing: .5px; }

/* ── Charts Grid ────────────────────────────────────────────── */
.bi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }
.bi-card h3 { font-size: .85rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 .75rem 0; }
.bi-wide { grid-column: span 2; }
.bi-full { grid-column: span 3; }
.chart-box { position: relative; height: 280px; width: 100%; }

/* ── Heatmap ────────────────────────────────────────────────── */
.hm-wrap { overflow-x: auto; }
.hm-grid { display: grid; grid-template-columns: 40px repeat(24, 1fr); gap: 2px; min-width: 600px; }
.hm-lbl, .hm-d { font-size: .7rem; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; padding: 2px; }
.hm-h { font-size: .6rem; color: var(--text-tertiary); text-align: center; }
.hm-c { aspect-ratio: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center;
    font-size: .55rem; color: var(--text-primary); cursor: default; min-height: 22px; transition: transform .1s; }
.hm-c:hover { transform: scale(1.3); z-index: 1; }

/* ── Skeleton ───────────────────────────────────────────────── */
.bi-card.skeleton { min-height: 200px; }
.sk-pulse { width: 100%; height: 100%; background: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%);
    background-size: 200% 100%; animation: skp 1.5s infinite; border-radius: 6px; }
@keyframes skp { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.bi-error { text-align: center; color: var(--danger); padding: 3rem; font-size: 1rem; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) { .bi-grid { grid-template-columns: 1fr 1fr; } .bi-wide,.bi-full { grid-column: span 2; } }
@media (max-width: 640px) { .bi-grid { grid-template-columns: 1fr; } .bi-wide,.bi-full { grid-column: span 1; } .bi-kpi-row { grid-template-columns: repeat(2, 1fr); } }