@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

* { font-family: 'Poppins', 'Hind Siliguri', sans-serif; }

body { -webkit-tap-highlight-color: transparent; }

.loader {
    width: 28px;
    height: 28px;
    border: 3px solid #fecdd3;
    border-bottom-color: #e11d48;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 0.8s linear infinite;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal-enter {
    animation: slideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideUp {
    from { transform: translateY(24px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.fade-in { animation: fadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.sidebar-active { background-color: #e11d48 !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #fca5a5; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

.brand-gradient {
    background: linear-gradient(135deg, #be123c 0%, #e11d48 45%, #f43f5e 100%);
}

/* ---------- Professional micro-interactions ---------- */

/* Global smooth press/hover feel for interactive elements */
button, .cursor-pointer, a { transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease; }
button:active, .cursor-pointer:active { transform: scale(0.96); }

/* Staggered list-item entrance: apply .stagger-item with inline --d delay */
.stagger-item {
    opacity: 0;
    animation: staggerIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--d, 0ms);
}
@keyframes staggerIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Page/tab transition wrapper */
.page-transition { animation: pageIn 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pageIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Splash logo gentle breathing */
.splash-logo { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* Skeleton shimmer for loading placeholders */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 12px;
}
@keyframes shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Toast slide + fade */
#toast {
    transform: translate(-50%, -12px);
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#toast.toast-show {
    transform: translate(-50%, 0);
}

/* Bottom nav icon pop on active */
.nav-btn { transition: color 0.2s ease, transform 0.2s ease; }
.nav-btn.nav-active i { transform: translateY(-3px) scale(1.1); }
.nav-btn i { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }

/* Dashboard / stat cards pop-in */
.stat-card { animation: cardPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes cardPop {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Smooth checkbox / toggle transitions already handled by tailwind peer, add ease */
input[type="checkbox"] + div { transition: background-color 0.25s ease; }
input[type="checkbox"] + div:after { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Badge pulse for emergency / live indicators kept but smoothed */
.animate-pulse { animation-duration: 1.8s; }