/* balances: scroll container */
.bal-table-wrap {
    max-height: 70vh;
    overflow: auto;
}

    /* sticky header */
    .bal-table-wrap table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--bs-body-bg, #fff);
        box-shadow: 0 1px 0 rgba(0,0,0,.08);
    }

    /* اختياري: تثبيت الفوتر (Totals) بأسفل السكرول */
    .bal-table-wrap table tfoot td {
        position: sticky;
        bottom: 0;
        z-index: 9;
        background: var(--bs-body-bg, #fff);
        box-shadow: 0 -1px 0 rgba(0,0,0,.08);
    }


/* CustomersBalances table scroll container */
.bal-table-wrap {
    max-height: 70vh;
    overflow: auto;
}

    /* sticky header */
    .bal-table-wrap table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #ffffff;
        box-shadow: 0 1px 0 rgba(0,0,0,.08);
    }

    /* sticky footer (Totals) */
    .bal-table-wrap table tfoot td {
        position: sticky;
        bottom: 0;
        z-index: 9;
        background: #ffffff;
        box-shadow: 0 -1px 0 rgba(0,0,0,.08);
    }


/* Wrapper موجود عندك */
.bal-table-wrap {
    max-height: 70vh;
    overflow: auto;
}

    /* Header sticky موجود عندك */
    .bal-table-wrap table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        /* ✅ لون جذّاب متناسق مع Bootstrap */
        background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-primary-bg-subtle, #e7f1ff) 120%);
        color: var(--bs-white);
        /* ✅ لمسة جمال */
        font-weight: 700;
        letter-spacing: .2px;
        border-bottom: 1px solid rgba(255,255,255,.25);
    }

    /* نخلي صف الهيدر نفسه ما يغير الخلفية */
    .bal-table-wrap table thead.table-light {
        --bs-table-bg: transparent;
    }

    /* Footer sticky */
    .bal-table-wrap table tfoot td {
        position: sticky;
        bottom: 0;
        z-index: 9;
        background: var(--bs-body-bg, #fff);
        border-top: 1px solid var(--bs-border-color);
    }

    /* تحسين Hover */
    .bal-table-wrap table tbody tr:hover td {
        background: rgba(13,110,253,0.05); /* bootstrap primary شفّاف */
    }
.bal-table-wrap {
    max-height: 70vh;
    overflow: auto;
}

    /* حتى يصير سطر واحد بدون تقطيع */
    .bal-table-wrap table {
        border-collapse: separate;
        border-spacing: 0;
    }

        .bal-table-wrap table thead tr {
            background: linear-gradient(90deg, var(--bs-primary) 0%, #1457d4 60%, #0d6efd 100%);
        }

        .bal-table-wrap table thead th {
            position: sticky;
            top: 0;
            z-index: 10;
            background: transparent !important; /* ✅ ياخذ خلفية الـ TR */
            color: #fff !important;
            font-weight: 700;
            border-bottom: 1px solid rgba(255,255,255,.25);
            /* نخفي خطوط الأعمدة اللي تقطع اللون */
            border-right: 0 !important;
            border-left: 0 !important;
        }

            /* لو تريد فاصل ناعم جداً بين الأعمدة بدل القطع */
            .bal-table-wrap table thead th + th {
                box-shadow: inset 1px 0 0 rgba(255,255,255,.10);
            }
/* خلي الجدول قابل للسحب يمين/يسار بالموبايل */
.bal-table-wrap {
    overflow-x: auto; /* سحب أفقي */
    -webkit-overflow-scrolling: touch; /* سحب ناعم على الموبايل */
}

/* امنع التكسير داخل الخلايا حتى يبقى الجدول عريض */
.bal-table th,
.bal-table td {
    white-space: nowrap;
}