/* ═══════════════════════════════════════════════════
   LiveCattle — Enriched Styles
   ═══════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c5ccd6; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
aside::-webkit-scrollbar { width: 3px; }
aside::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

::selection { background: #b1e9c7; color: #082719; }

/* ─── Animations ──────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(38, 165, 98, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(38, 165, 98, 0); }
}

.animate-fade-in-up { animation: fadeInUp 0.45s cubic-bezier(.21,1.02,.73,1) both; }
.animate-fade-in { animation: fadeIn 0.3s ease-out both; }
.animate-slide-in { animation: slideInRight 0.3s ease-out both; }

.stagger-children > * { animation: fadeInUp 0.45s cubic-bezier(.21,1.02,.73,1) both; }
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 70ms; }
.stagger-children > *:nth-child(3) { animation-delay: 140ms; }
.stagger-children > *:nth-child(4) { animation-delay: 210ms; }
.stagger-children > *:nth-child(5) { animation-delay: 280ms; }
.stagger-children > *:nth-child(6) { animation-delay: 350ms; }
.stagger-children > *:nth-child(7) { animation-delay: 420ms; }
.stagger-children > *:nth-child(8) { animation-delay: 490ms; }

/* ─── KPI Cards with color ────────────────────── */
.kpi-card {
    transition: transform 0.2s cubic-bezier(.21,1.02,.73,1), box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.1), 0 4px 12px -4px rgba(0,0,0,0.05);
}

/* KPI color variants */
.kpi-card.kpi-green::before { background: linear-gradient(90deg, #48c07e, #26a562); }
.kpi-card.kpi-blue::before { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.kpi-card.kpi-amber::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.kpi-card.kpi-red::before { background: linear-gradient(90deg, #f87171, #ef4444); }
.kpi-card.kpi-purple::before { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.kpi-card.kpi-teal::before { background: linear-gradient(90deg, #2dd4bf, #14b8a6); }

/* ─── Table ───────────────────────────────────── */
.table-row-hover { transition: background 0.15s ease; }
.table-row-hover:hover { background-color: #fafbfc; }

/* ─── Chart container ─────────────────────────── */
.chart-container { position: relative; width: 100%; }

/* ─── Login ───────────────────────────────────── */
.login-bg {
    background: linear-gradient(135deg, #0f1a2e 0%, #162240 40%, #1d3a28 70%, #10462c 100%);
}
.login-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(72, 192, 126, 0.15) 0, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(251, 191, 36, 0.08) 0, transparent 50%);
    pointer-events: none;
}

/* ─── Status dots ─────────────────────────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.active { background: #48c07e; box-shadow: 0 0 0 3px rgba(72,192,126,0.2); }
.status-dot.inactive { background: #d1d5db; }
.status-dot.warning { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.status-dot.danger { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); animation: pulse-glow 2s infinite; }

/* ─── Empty State ─────────────────────────────── */
.empty-state { padding: 3rem; text-align: center; color: #9ca3af; }

/* ─── Skeleton ────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

/* ─── Chart card colored headers ──────────────── */
.chart-card-header {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border-bottom: 1px solid #d6f5e1;
}

/* ─── Page transitions ────────────────────────── */
main { animation: fadeIn 0.2s ease-out; }

/* ─── Gradient text helper ────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, #26a562, #48c07e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}