/* ═══════════════════════════════════════════════════════════════
   KPI Enhancements — Rich tooltips, skeleton loading, animations
   ═══════════════════════════════════════════════════════════════ */

/* ── Rich Tooltip Popover ──────────────────────────────────── */
.kpi-tooltip {
    position: absolute;
    z-index: 50;
    background: #1f2937;
    color: #f9fafb;
    border-radius: 12px;
    padding: 14px 16px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    min-width: 240px;
    max-width: 320px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.kpi-tooltip.visible {
    opacity: 1;
}

.kpi-tooltip-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: #fff;
    border-bottom: 1px solid #374151;
    padding-bottom: 6px;
}

.kpi-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    gap: 12px;
}

.kpi-tooltip-label {
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.kpi-tooltip-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.kpi-tooltip-divider {
    border-top: 1px solid #374151;
    margin: 6px 0;
}

/* Trend colors */
.kpi-tooltip-trend { font-weight: 500; }
.kpi-tooltip-trend.good  { color: #22c55e; }
.kpi-tooltip-trend.bad   { color: #ef4444; }
.kpi-tooltip-trend.stable { color: #9ca3af; }

/* Interpretation line */
.kpi-tooltip-interp {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #374151;
    color: #d1d5db;
    font-size: 11px;
    font-style: italic;
}

/* ── Skeleton Loading ──────────────────────────────────────── */
.kpi-skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: kpi-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes kpi-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Critical Pulse Animation ──────────────────────────────── */
.kpi-critical-pulse {
    animation: kpi-pulse 2s ease-in-out 3;
}

@keyframes kpi-pulse {
    0%, 100% { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
}

/* ── Period Transition ─────────────────────────────────────── */
.dashboard-fade-out {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ── Print overrides ───────────────────────────────────────── */
@media print {
    .kpi-tooltip { display: none !important; }
    .kpi-critical-pulse { animation: none !important; }
    .kpi-skeleton { animation: none !important; background: #f3f4f6 !important; }
}