/* ==========================================
       1. إعدام الديف الغلس والتاجات الفاضية (من الـ Inspect)
       ========================================== */

.inner-page-content-premium {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.inner-page-content-premium>p,
.payment-section>p {
    display: none !important;
    /* إخفاء أي مسافات فاضية بتيجي من لوحة التحكم */
}


/* ==========================================
       2. الكارت الأساسي
       ========================================== */

.payment-section {
    position: relative;
    z-index: 10;
    margin-top: 10px;
}

.payment-card {
    background: var(--site-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 20px;
    /* تقليل البادينج عشان الموبايل */
    transition: 0.3s ease;
}

[data-theme="dark"] .payment-card {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}


/* ==========================================
       3. هندسة الجدول (زي الصورة القديمة بالظبط)
       ========================================== */

.table-responsive {
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    /* 🚨 منع السكرول الأفقي نهائياً 🚨 */
}

[data-theme="dark"] .table-responsive {
    border-color: #334155 !important;
}

.table-custom {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    table-layout: fixed;
    /* 🚨 إجبار الجدول يلتزم بعرض الشاشة 🚨 */
    word-wrap: break-word;
    /* كسر الكلمات الطويلة */
}


/* تقسيم عرض الأعمدة ليتناسب مع الموبايل */

.table-custom th:nth-child(1),
.table-custom td:nth-child(1) {
    width: 26%;
}


/* Date */

.table-custom th:nth-child(2),
.table-custom td:nth-child(2) {
    width: 28%;
}


/* Username */

.table-custom th:nth-child(3),
.table-custom td:nth-child(3) {
    width: 20%;
}


/* Amount */

.table-custom th:nth-child(4),
.table-custom td:nth-child(4) {
    width: 26%;
}


/* Method */


/* الهيدر (لون أزرق صريح زي الصورة) */

.table-custom th {
    background: #2b3990 !important;
    /* نفس درجة الأزرق في الصورة القديمة */
    color: #ffffff !important;
    font-weight: 600;
    border: none !important;
    padding: 12px 8px;
    text-align: left;
}

[data-theme="dark"] .table-custom th {
    background: #1e293b !important;
    border-bottom: 2px solid #334155 !important;
}


/* الخلايا العادية */

.table-custom td {
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px 8px;
    vertical-align: middle;
    color: #475569 !important;
    background: #ffffff !important;
    font-weight: 500;
    font-size: 0.95rem;
}


/* 🚨 تظبيط الدارك مود الإجباري 🚨 */

[data-theme="dark"] .table-custom td {
    border-top: 1px solid #334155 !important;
    background: #111827 !important;
    color: #cbd5e1 !important;
}


/* السطور المخططة (Striped) */

.table-custom.table-striped tbody tr:nth-of-type(odd) td {
    background: #f4f6f9 !important;
    /* رمادي فاتح جداً */
}

[data-theme="dark"] .table-custom.table-striped tbody tr:nth-of-type(odd) td {
    background: #1f2937 !important;
}


/* البادج الأخضر للمبلغ */

.amount-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
}


/* ==========================================
       4. الترقيم (Pagination)
       ========================================== */

.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.pagination {
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.pagination li a,
.pagination li span {
    border-radius: 8px !important;
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    background: var(--site-bg, #ffffff) !important;
    color: var(--site-text, #475569) !important;
    font-weight: 600;
}

[data-theme="dark"] .pagination li a,
[data-theme="dark"] .pagination li span {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

.pagination li.active span {
    background: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}


/* ==========================================
       5. وضع الموبايل الإجباري (التطابق 100%)
       ========================================== */

@media (max-width: 768px) {
    .payment-card {
        padding: 10px;
        border-radius: 8px;
        border: none;
    }
    .table-custom th,
    .table-custom td {
        padding: 8px 4px !important;
        /* تقليل المسافات للعصر */
        font-size: 12px !important;
        /* تصغير الخط عشان المحتوى يكفي */
    }
    /* إخفاء الأيقونات في الموبايل لتوفير المساحة */
    .table-custom th i {
        display: none !important;
    }
    .amount-badge {
        font-size: 11px;
        padding: 3px 5px;
    }
}