.cb-page-transition-target,
.cb-stagger-container,
.cb-stagger-item,
.cb-stagger-table tbody tr {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: opacity, transform;
}

html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-stat-card,
html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-mini-metric,
html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-data-card,
html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-card,
html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .portlet,
html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .dashboard-portlet,
html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .card,
html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-table-search,
html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-table-tabs,
html.cb-stagger-boot:not(.cb-stagger-ready) .main-content .cb-stat-card,
html.cb-stagger-boot:not(.cb-stagger-ready) .main-content .cb-data-card,
html.cb-stagger-boot:not(.cb-stagger-ready) .main-content .card {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
}

html.cb-transition-ready .cb-page-transition-target {
    animation: cbPageEnter 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.cb-stagger-ready .cb-stagger-item {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    animation: cbStaggerCardEnter 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--cb-stagger-delay, 0ms);
}

html.cb-stagger-ready .cb-stagger-table tbody tr,
table.cb-table-page-enter tbody tr {
    opacity: 0;
    transform: translateY(20px);
    animation: cbStaggerRowEnter 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--cb-row-delay, calc(var(--cb-row-index, 0) * 50ms));
}

.cb-data-card table.cb-stagger-table tbody tr,
.cb-data-card table.cb-table-page-enter tbody tr,
.cb-data-card table.cb-table-page-leave tbody,
.cb-data-card table.dataTable tbody tr.child,
.cb-data-card table.dataTable tbody tr.parent {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

html.cb-page-leaving .cb-page-transition-target {
    opacity: 0;
    transform: translateY(-8px) scale(0.995);
    pointer-events: none;
    transition:
        opacity 240ms cubic-bezier(0.4, 0, 1, 1),
        transform 240ms cubic-bezier(0.4, 0, 1, 1);
}

html.cb-page-leaving body::before {
    content: "";
    height: 3px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: linear-gradient(90deg, #1e3a5f, #f5b800, #2db896);
    transform-origin: left center;
    animation: cbPageProgress 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.cb-page-leaving body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    background: rgba(248, 250, 252, 0.62);
    animation: cbPageVeil 240ms ease both;
}

table.cb-table-page-leave tbody {
    opacity: 0.65;
    transform: translateY(4px);
    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

.cb-stat-card,
.cb-mini-metric,
.cb-data-card,
.cb-card,
.portlet,
.dashboard-portlet,
.card {
    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease;
}

.cb-stat-card:hover,
.cb-mini-metric:hover,
.cb-data-card:hover,
.cb-card:hover,
.portlet:hover,
.dashboard-portlet:hover,
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.dataTables_processing {
    min-width: 180px;
    min-height: 42px;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 14px !important;
    color: transparent !important;
    background:
        linear-gradient(90deg, rgba(248, 250, 252, 0.35), rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.35)),
        #ffffff !important;
    background-size: 220% 100%;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
    animation: cbSkeletonShimmer 1.1s linear infinite;
}

.dataTables_processing::after {
    content: "Loading...";
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

@keyframes cbPageEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.995);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cbStaggerCardEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cbStaggerRowEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cbPageProgress {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(0.86);
    }
}

@keyframes cbPageVeil {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cbSkeletonShimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-page-transition-target,
    .cb-stagger-container,
    .cb-stagger-item,
    .cb-stagger-table tbody tr,
    html.cb-transition-ready .cb-page-transition-target,
    html.cb-stagger-ready .cb-stagger-item,
    html.cb-stagger-ready .cb-stagger-table tbody tr,
    table.cb-table-page-leave tbody,
    table.cb-table-page-enter tbody tr {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-stat-card,
    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-mini-metric,
    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-data-card,
    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-card,
    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .portlet,
    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .dashboard-portlet,
    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .card,
    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-table-search,
    html.cb-stagger-boot:not(.cb-stagger-ready) .content-layout .cb-table-tabs,
    html.cb-stagger-boot:not(.cb-stagger-ready) .main-content .cb-stat-card,
    html.cb-stagger-boot:not(.cb-stagger-ready) .main-content .cb-data-card,
    html.cb-stagger-boot:not(.cb-stagger-ready) .main-content .card {
        opacity: 1 !important;
        transform: none !important;
    }

    .cb-stat-card:hover,
    .cb-mini-metric:hover,
    .cb-data-card:hover,
    .cb-card:hover,
    .portlet:hover,
    .dashboard-portlet:hover,
    .card:hover {
        transform: none;
    }

    .dataTables_processing,
    html.cb-page-leaving body::before,
    html.cb-page-leaving body::after {
        animation: none !important;
        display: none;
    }
}