/* ─── Custom scrollbar ─── */
.custom-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track { background: #f1f5f9; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─── Chart canvas ─── */
.chart-card canvas { display: block; width: 100% !important; height: 100% !important; }

/* ─── Table scroll (dual-axis) ─── */
.table-scroll { max-height: 720px; overflow: auto; }

/* ─── Sidebar mobile toggle ─── */
@media (max-width: 1023px) {
    #sidebar[data-open="true"] { transform: translateX(0); }
}

/* ─── Sidebar scrollbar ─── */
#sidebar nav::-webkit-scrollbar { width: 3px; }
#sidebar nav::-webkit-scrollbar-track { background: transparent; }
#sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }
#sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ─── Sidebar nav active accent ─── */
@keyframes accentSlide {
    from { transform: translateY(-50%) scaleY(0); opacity: 0; }
    to   { transform: translateY(-50%) scaleY(1); opacity: 1; }
}
.sidebar-accent { animation: accentSlide 0.25s ease-out both; }

/* ─── Sidebar status pulse ─── */
@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}
.status-dot-online { animation: statusPulse 2.5s ease-in-out infinite; }

/* ─── Edit form focus override ─── */
.edit-only input:focus,
.edit-only select:focus,
.edit-only textarea:focus { outline: none !important; }

/* ═══════════════════════════════════════════════
   TABLE — row entrance
   ═══════════════════════════════════════════════ */
@keyframes rowIn {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-row { animation: rowIn 0.3s ease both; }

/* ═══════════════════════════════════════════════
   PROGRESS — fill animation
   ═══════════════════════════════════════════════ */
@keyframes fillBar {
    from { width: 0%; }
    to   { width: var(--pct, 0%); }
}
.progress-fill {
    animation: fillBar 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ═══════════════════════════════════════════════
   STATUS — active pill dot pulse
   ═══════════════════════════════════════════════ */
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.3); }
}
.status-dot-active { animation: pulseDot 2s ease-in-out infinite; }

/* ═══════════════════════════════════════════════
   TABLE — chevron reveal on row hover
   ═══════════════════════════════════════════════ */
.row-chevron { transition: transform 0.2s ease, opacity 0.2s ease; }
tr:hover .row-chevron { transform: translateX(3px); opacity: 1 !important; }

/* ═══════════════════════════════════════════════
   TABLE — sticky header
   ═══════════════════════════════════════════════ */
.table-sticky thead { position: sticky; top: 0; z-index: 10; }
.table-sticky thead::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
    height: 1px; background: #e2e8f0;
}

/* ═══════════════════════════════════════════════
   CARD — KPI hover float
   ═══════════════════════════════════════════════ */
.kpi-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px -12px rgba(0,0,0,0.12); }

/* ═══════════════════════════════════════════════
   STATUS PILL — glow on active
   ═══════════════════════════════════════════════ */
@keyframes pillGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.15); }
    50%      { box-shadow: 0 0 0 8px rgba(37,99,235,0); }
}
.pill-active-glow { animation: pillGlow 1.5s ease-in-out 1; }

/* ═══════════════════════════════════════════════
   KPI — trend indicator pulse
   ═══════════════════════════════════════════════ */
@keyframes trendPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
.trend-pulse { animation: trendPulse 2s ease-in-out infinite; }