/* ============================================================================
   Very Mooi — Dashboard Tables Enhancement (Sticky Action Column + Header)
   ----------------------------------------------------------------------------
   الهدف: عمود "الإجراءات" يفضل ثابت ومرئي دايماً مهما كان الجدول عريض،
   من غير ما الأدمن يعمل سكرول أفقي عشان يوصله.

   إزاي تستخدمه:
   1) احفظ الملف ده في: wwwroot/css/dashboard-tables.css
   2) ضمّه في الـ _MainLayout.cshtml (في الـ <head>):
        <link rel="stylesheet" href="~/css/dashboard-tables.css" />
   3) في أي صفحة قائمة (Index)، لفّ الجدول بـ:
        <div class="vm-table-wrap"> ... <table class="... vm-sticky-action"> ... </table> </div>
      وحُط على عمود الإجراءات (الـ th والـ td الأخير) كلاس: vm-action-col

   بيشتغل تلقائياً مع RTL (عربي) و LTR (إنجليزي).
   ========================================================================== */

/* الحاوية اللي بيحصل جواها السكرول الأفقي */
.vm-table-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}

/* تثبيت رأس الجدول عند السكرول الرأسي */
.vm-sticky-action thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--vm-head-bg, #f8f9fc);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* ============ عمود الإجراءات الثابت ============ */

/* LTR: العمود الأخير يثبت على اليمين */
.vm-sticky-action .vm-action-col {
    position: sticky;
    right: 0;
    z-index: 4;
    background: #fff;
    box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.18);
}

/* رأس عمود الإجراءات لازم يبقى فوق الكل (sticky رأسي + أفقي) */
.vm-sticky-action thead th.vm-action-col {
    z-index: 6;
    background: var(--vm-head-bg, #f8f9fc);
}

/* RTL (عربي): العمود الأول/الأخير يثبت على الشمال بدل اليمين */
[dir="rtl"] .vm-sticky-action .vm-action-col,
html[lang="ar"] .vm-sticky-action .vm-action-col {
    right: auto;
    left: 0;
    box-shadow: 8px 0 12px -8px rgba(0, 0, 0, 0.18);
}

/* تلوين صفوف الـ hover حتى تحت العمود الثابت */
.vm-sticky-action tbody tr:hover .vm-action-col {
    background: #f7f8fb;
}

/* دعم الـ dark mode لو الداش بورد عنده */
@media (prefers-color-scheme: dark) {
    .vm-sticky-action thead th {
        background: var(--vm-head-bg-dark, #1e1e2d);
    }

    .vm-sticky-action .vm-action-col {
        background: var(--vm-cell-bg-dark, #1a1a27);
    }

    .vm-sticky-action thead th.vm-action-col {
        background: var(--vm-head-bg-dark, #1e1e2d);
    }

    .vm-sticky-action tbody tr:hover .vm-action-col {
        background: #23232f;
    }
}

/* تحسين شكل شريط السكرول نفسه */
.vm-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.vm-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.vm-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
}

    .vm-table-wrap::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

/* ============ بطاقات ملخّص الدفع (تستخدم في صفحة Details) ============ */

.vm-pay-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 10px 0 4px;
}

.vm-pay-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

    .vm-pay-card .vm-pay-label {
        font-size: 13px;
        color: #8a8a99;
        margin-bottom: 6px;
        display: block;
    }

    .vm-pay-card .vm-pay-value {
        font-size: 22px;
        font-weight: 600;
        color: #1a1a2e;
        line-height: 1.2;
    }

    .vm-pay-card .vm-pay-sub {
        font-size: 12px;
        color: #a0a0ac;
        margin-top: 4px;
    }

/* شريط تقدّم الدفع */
.vm-pay-progress {
    height: 8px;
    border-radius: 6px;
    background: #eef0f5;
    overflow: hidden;
    margin-top: 10px;
}

    .vm-pay-progress > span {
        display: block;
        height: 100%;
        border-radius: 6px;
        background: linear-gradient(90deg, #5b4f9d, #7f77dd);
        transition: width 0.4s ease;
    }

/* خط لوني عاليسار البطاقة حسب الحالة */
.vm-pay-card.is-paid::before,
.vm-pay-card.is-remaining::before,
.vm-pay-card.is-plan::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.vm-pay-card.is-paid::before {
    background: #1d9e75;
}

.vm-pay-card.is-remaining::before {
    background: #ef9f27;
}

.vm-pay-card.is-plan::before {
    background: #5b4f9d;
}