body {
    font-family: "Inter", sans-serif;
    background-color: #F1F4F5;
}

/* ── Loading overlay ─────────────────────────────── */
#loading-overlay {
    transition: opacity 0.25s ease;
}

#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Skeleton shimmer ────────────────────────────── */
@keyframes shimmer {
    0% {
        background-position: -600px 0;
    }
    100% {
        background-position: 650px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #EFF1F6 25%, #f6f6f6 50%, #EFF1F6 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
}

.skeleton-blue {
    background: linear-gradient(90deg, #B4DEFF 25%, #cdeaff 50%, #B4DEFF 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
}

/* ── Fade-up entry ───────────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 0.35s ease forwards;
}

.fade-up-delay-1 {
    animation-delay: 0.05s;
    opacity: 0;
}

.fade-up-delay-2 {
    animation-delay: 0.10s;
    opacity: 0;
}

.fade-up-delay-3 {
    animation-delay: 0.15s;
    opacity: 0;
}

/* ── Transaction type badges ─────────────────────── */
.badge-credit {
    background: #d1fae5;
    color: #065f46;
}

.badge-debit {
    background: #fee2e2;
    color: #991b1b;
}

.card {
    background: white;
    border-radius: 0;
    box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.04);
    filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.08));
}

.header-transaction {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
}


table {
    th:first-child,
    td:first-child {
        padding-left: 24px !important;
    }

    th:last-child,
    td:last-child {
        padding-right: 24px !important;
    }

    thead {
        th,
        th button,
        th a {
            font-size: 12px;
            line-height: 14px;
            font-weight: 700;
            color: #235881;
        }
    }

    tbody {
        tr {
            -webkit-transition: all 0.15s ease-in-out;
            -ms-transition: all 0.15s ease-in-out;
            transition: all 0.15s ease-in-out;

            & + tr {
                border-top: 1px solid #dfe4e9 !important;
            }

            &:hover {
                background: #f6f8fb;
            }

            .expansion-icon {
                cursor: pointer;
                color: #556168 !important;
            }

            .sortable {
                padding-right: 20px;
            }

            .text-gray {
                color: #A2AEB4 !important;
            }
        }

        /*tr:not(.checkbox) td:not(.checkbox),
        tr:not(.options) td:not(.options) {
            min-width: 100px;
        }*/

        tr td {
            position: relative;
            border-top: 1px solid #dfe4e9;

            font-size: 12px;
            font-weight: 500;
            line-height: 1.4;
            color: #122D42;

            &.right {
                text-align: right;
            }

            &.center {
                text-align: center;
            }

            &.lanes {
                min-width: 45px !important;
            }

            a {
                font-weight: 700;
                text-decoration: none;

                &:hover {
                    opacity: 0.7;
                    text-decoration: none !important;
                }
            }

            > div:first-child {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: start;
                min-height: 31px;
            }
        }
    }
}