/* Global page & UI animations */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@keyframes animFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes animFadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes animFadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes animScaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes animSlideInSidebar {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes animPulseSoft {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* App shell */
body:not(.login-body) .sidebar {
    animation: animSlideInSidebar 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body:not(.login-body) .content {
    animation: animFadeIn 0.45s ease both;
}

body:not(.login-body) .top-header {
    animation: animFadeInDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

body:not(.login-body) .top-header .profile-card {
    animation: animScaleIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

body.app-ready .nav-link {
    animation: animFadeInLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.app-ready .sidebar > .nav-link:nth-child(2) { animation-delay: 0.04s; }
body.app-ready .sidebar > .nav-link:nth-child(3) { animation-delay: 0.08s; }
body.app-ready .sidebar > .nav-link:nth-child(4) { animation-delay: 0.12s; }
body.app-ready .sidebar > .nav-link:nth-child(5) { animation-delay: 0.16s; }
body.app-ready .sidebar > .nav-link:nth-child(6) { animation-delay: 0.2s; }
body.app-ready .sidebar > .nav-link:nth-child(7) { animation-delay: 0.24s; }
body.app-ready .sidebar > .nav-link:nth-child(8) { animation-delay: 0.28s; }
body.app-ready .sidebar > .nav-link:nth-child(9) { animation-delay: 0.32s; }
body.app-ready .sidebar-footer .nav-link { animation-delay: 0.36s; }
body.app-ready .sidebar-footer .logout-btn { animation-delay: 0.4s; }

body.app-ready .sidebar-footer .logout-btn {
    animation: animFadeInLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Page sections */
.page {
    animation: animFadeIn 0.35s ease both;
}

.page > .page-header {
    animation: animFadeInDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.page > .quick-actions,
.page > .content-card,
.page > .dashboard-default-section,
.page > .dashboard-expiry-section,
.page > .toolbar {
    animation: animFadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page > .quick-actions { animation-delay: 0.1s; }
.page > .content-card:nth-of-type(1) { animation-delay: 0.12s; }
.page > .content-card:nth-of-type(2) { animation-delay: 0.22s; }
.page > .content-card:nth-of-type(3) { animation-delay: 0.32s; }
.page > .content-card:nth-of-type(4) { animation-delay: 0.42s; }
.page > .dashboard-default-section { animation-delay: 0.12s; }
.page > .dashboard-expiry-section { animation-delay: 0.12s; }

/* Instructor, course, insurance-style pages */
.page.page-animated > .page-header .btn-primary {
    animation: animFadeInRight 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.page .content-card.anim-card,
#instructor-page > .content-card,
#course-page > .content-card,
#users-page > .content-card,
#update-insurance-page > .content-card {
    animation: animFadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page .content-card h3 {
    animation: animFadeInDown 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.filter-row .form-group,
.anim-stagger .form-group {
    animation: animFadeInUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.filter-row .form-group:nth-child(1),
.anim-stagger .form-group:nth-child(1) { animation-delay: 0.16s; }
.filter-row .form-group:nth-child(2),
.anim-stagger .form-group:nth-child(2) { animation-delay: 0.22s; }
.filter-row .form-group:nth-child(3),
.anim-stagger .form-group:nth-child(3) { animation-delay: 0.28s; }
.filter-row .form-group:nth-child(4),
.anim-stagger .form-group:nth-child(4) { animation-delay: 0.34s; }
.filter-row .form-group:nth-child(5),
.anim-stagger .form-group:nth-child(5) { animation-delay: 0.4s; }
.filter-row .form-group:nth-child(6),
.anim-stagger .form-group:nth-child(6) { animation-delay: 0.46s; }

/* Dashboard expiry cards stagger */
.expiry-card,
.action-card,
.stat-card {
    animation: animFadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quick-actions .action-card:nth-child(1) { animation-delay: 0.14s; }
.quick-actions .action-card:nth-child(2) { animation-delay: 0.2s; }
.quick-actions .action-card:nth-child(3) { animation-delay: 0.26s; }

[style*="grid-template-columns"] > .expiry-card:nth-child(1) { animation-delay: 0.08s; }
[style*="grid-template-columns"] > .expiry-card:nth-child(2) { animation-delay: 0.14s; }
[style*="grid-template-columns"] > .expiry-card:nth-child(3) { animation-delay: 0.2s; }
[style*="grid-template-columns"] > .expiry-card:nth-child(4) { animation-delay: 0.26s; }

.action-card:hover,
.expiry-card:hover {
    transform: translateY(-4px);
}

/* Tables */
.data-table tbody tr {
    animation: animFadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.data-table tbody tr:nth-child(1) { animation-delay: 0.03s; }
.data-table tbody tr:nth-child(2) { animation-delay: 0.06s; }
.data-table tbody tr:nth-child(3) { animation-delay: 0.09s; }
.data-table tbody tr:nth-child(4) { animation-delay: 0.12s; }
.data-table tbody tr:nth-child(5) { animation-delay: 0.15s; }
.data-table tbody tr:nth-child(6) { animation-delay: 0.18s; }
.data-table tbody tr:nth-child(7) { animation-delay: 0.21s; }
.data-table tbody tr:nth-child(8) { animation-delay: 0.24s; }
.data-table tbody tr:nth-child(n+9) { animation-delay: 0.27s; }

.data-table tbody tr:hover {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Buttons & inputs */
button,
.cust-btn-primary,
.cust-btn-success,
.btn-primary,
.btn-secondary,
.icon-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

button:hover:not(:disabled),
.cust-btn-primary:hover,
.cust-btn-success:hover,
.btn-primary:hover,
.btn-secondary:hover,
.icon-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

button:active:not(:disabled),
.cust-btn-primary:active,
.cust-btn-success:active,
.btn-primary:active,
.icon-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

input,
select,
textarea,
.search-input {
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus {
    transform: translateY(-1px);
}

/* Modals */
.modal-backdrop.show .modal {
    animation: animScaleIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Pagination & badges */
.pagination-wrapper,
.status,
.nav-badge {
    animation: animFadeIn 0.4s ease 0.2s both;
}

.status {
    transition: transform 0.2s ease;
}

/* Login page */
body.login-body .login-screen {
    animation: animFadeIn 0.4s ease both;
}

body.login-body .login-left {
    animation: animFadeInLeft 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.login-body .login-right {
    animation: animFadeInRight 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

body.login-body .stat-card {
    animation: animFadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.login-body .stats-list .stat-card:nth-child(1) { animation-delay: 0.2s; }
body.login-body .stats-list .stat-card:nth-child(2) { animation-delay: 0.28s; }
body.login-body .stats-list .stat-card:nth-child(3) { animation-delay: 0.36s; }

body.login-body .input-group {
    animation: animFadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.login-body #loginForm .input-group:nth-of-type(1) { animation-delay: 0.22s; }
body.login-body #loginForm .input-group:nth-of-type(2) { animation-delay: 0.28s; }
body.login-body #loginForm .options-row { animation-delay: 0.34s; }
body.login-body #loginForm .btn-primary { animation-delay: 0.4s; }

body.login-body .options-row,
body.login-body .btn-primary,
body.login-body #forgotPasswordPanel .input-group,
body.login-body #forgotPasswordPanel .btn-primary {
    animation: animFadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Toasts */
.toast {
    animation: animFadeInRight 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Global loader */
.global-loader.show .global-loader-box {
    animation: animScaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Section visibility toggles (dashboard expiry panel) */
.dashboard-expiry-section:not(.is-hidden),
.dashboard-default-section:not(.is-hidden) {
    animation: animFadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dashboard-expiry-section.is-hidden,
.dashboard-default-section.is-hidden {
    animation: none;
}