/* ============================================================
   XCRM — Animations CSS
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeIn      { from { opacity: 0; }                  to { opacity: 1; } }
@keyframes fadeInUp    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp     { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slideInRight{ from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutRight{ from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes pulse       { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes shimmer     {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes bounceIn    {
    0%   { transform: scale(0.3); opacity: 0; }
    50%  { transform: scale(1.05); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes ripple {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}

/* ── Page Transitions ──────────────────────────────────────── */
.page-enter {
    animation: fadeInUp 0.25s ease;
}

/* ── Skeleton Loading ──────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text  { height: 14px; border-radius: 4px; }
.skeleton-title { height: 22px; border-radius: 4px; }
.skeleton-card  { height: 120px; border-radius: var(--radius); }
.skeleton-row   { height: 52px; border-radius: 0; border-top: 1px solid var(--border); }
.skeleton-row:first-child { border-top: none; }

/* ── Hover Effects ─────────────────────────────────────────── */
.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.hover-glow { transition: var(--transition); }
.hover-glow:hover { box-shadow: var(--accent-glow); }

/* ── Button Ripple ─────────────────────────────────────────── */
.btn { overflow: hidden; }
.btn::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: inherit;
    transform: scale(0); opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.btn:active::after { transform: scale(2); opacity: 0; transition: 0s; }

/* ── Number Counter Animation ──────────────────────────────── */
.counter-animate {
    display: inline-block;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Table Row Appear ──────────────────────────────────────── */
tbody tr {
    animation: fadeInUp 0.15s ease both;
}
tbody tr:nth-child(1)  { animation-delay: 0.02s; }
tbody tr:nth-child(2)  { animation-delay: 0.04s; }
tbody tr:nth-child(3)  { animation-delay: 0.06s; }
tbody tr:nth-child(4)  { animation-delay: 0.08s; }
tbody tr:nth-child(5)  { animation-delay: 0.10s; }
tbody tr:nth-child(n+6){ animation-delay: 0.12s; }

/* ── Sidebar Transition ─────────────────────────────────────── */
.sidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.main-content { transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Collapsed sidebar — hide text */
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .company-info,
.sidebar.collapsed .company-chevron,
.sidebar.collapsed .logo-crm,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-section-label {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.sidebar .nav-item span,
.sidebar .company-info,
.sidebar .company-chevron,
.sidebar .logo-crm,
.sidebar .user-info {
    transition: opacity 0.2s ease 0.1s;
}

/* ── Notification Bell Pulse ───────────────────────────────── */
.notif-bell.has-alerts {
    animation: bellShake 1s ease 0s 3;
}
@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    20%       { transform: rotate(-15deg); }
    40%       { transform: rotate(15deg); }
    60%       { transform: rotate(-10deg); }
    80%       { transform: rotate(10deg); }
}

/* ── Progress Bar ──────────────────────────────────────────── */
.progress-bar {
    height: 6px; background: var(--bg-elevated);
    border-radius: 99px; overflow: hidden;
}
.progress-fill {
    height: 100%; border-radius: 99px;
    background: var(--accent-grad);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Status Dot ────────────────────────────────────────────── */
.status-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; flex-shrink: 0;
}
.status-dot.online  { background: var(--green); animation: pulse 2s infinite; }
.status-dot.offline { background: var(--text-muted); }
.status-dot.warning { background: var(--yellow); animation: pulse 2s infinite; }

/* ── Fade Transitions (for SPA routing) ───────────────────── */
.fade-enter { opacity: 0; transform: translateY(8px); }
.fade-active { transition: opacity 0.2s ease, transform 0.2s ease; }
.fade-done   { opacity: 1; transform: translateY(0); }