/**
 * تنسيقات الجداول المتجاوبة - ICORE ERP
 * يتم تطبيقها على جميع جداول النظام
 * الإصدار: 2.0 - دعم موسع لجميع صفحات النظام
 */

/* ============================================
   إعدادات الجدول الأساسية
   ============================================ */

/* جميع الجداول تستخدم table-layout: auto للتوسع التلقائي */
.table {
    table-layout: auto;
    width: 100%;
}

/* تنسيق الخلايا */
.table th,
.table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem 0.4rem !important;
    vertical-align: middle;
}

/* السماح بالتفاف النص في عمود الاسم والوصف */
.table .col-name {
    white-space: normal !important;
    word-break: break-word;
}

/* ============================================
   أعمدة صغيرة جداً (الترقيم)
   ============================================ */

.col-xs {
    width: 40px !important;
    max-width: 50px !important;
    min-width: 35px !important;
    text-align: center !important;
}

/* ============================================
   أعمدة صغيرة (للبيانات المختصرة)
   ============================================ */

.col-code {
    width: 90px !important;
    max-width: 110px !important;
    min-width: 70px !important;
}

.col-tax,
.col-status {
    width: 65px !important;
    max-width: 80px !important;
    min-width: 55px !important;
    text-align: center !important;
}

.col-sm,
.col-type,
.col-unit,
.col-qty,
.col-quantity {
    width: 75px !important;
    max-width: 90px !important;
    min-width: 60px !important;
}

/* ============================================
   أعمدة متوسطة
   ============================================ */

.col-md,
.col-date,
.col-price,
.col-amount,
.col-category {
    width: 100px !important;
    min-width: 85px !important;
    max-width: 120px !important;
}

.col-reference,
.col-customer,
.col-vendor,
.col-supplier {
    width: 120px !important;
    min-width: 100px !important;
    max-width: 150px !important;
}

/* ============================================
   أعمدة كبيرة (للنصوص الطويلة)
   ============================================ */

.col-lg,
.col-name,
.col-description,
.col-notes {
    min-width: 150px !important;
    max-width: 300px !important;
}

/* ============================================
   عمود الإجراءات
   ============================================ */

.col-actions {
    width: 130px !important;
    min-width: 120px !important;
    max-width: 160px !important;
    white-space: nowrap !important;
}

/* تصغير أزرار الإجراءات */
.table .btn-group-sm .btn,
.table .btn-sm {
    padding: 0.2rem 0.35rem !important;
    font-size: 0.7rem !important;
}

/* ============================================
   تصغير الـ Badges
   ============================================ */

.table .badge {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.4rem !important;
    font-weight: 500 !important;
}

/* ============================================
   تنسيق الكود
   ============================================ */

.table code,
.table .code {
    font-size: 0.75rem !important;
    padding: 0.1rem 0.3rem !important;
    background-color: #f8f9fa;
    border-radius: 3px;
}

/* ============================================
   صف العناوين الثابت
   ============================================ */

.table-wrapper,
.table-responsive {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
}

.table thead.sticky-header th,
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #212529 !important;
}

.table thead.sticky-header .filter-row th {
    top: 38px;
    z-index: 9;
    background-color: #495057 !important;
}

/* ============================================
   تنسيقات الموبايل
   ============================================ */

@media (max-width: 992px) {
    .table th,
    .table td {
        padding: 0.4rem 0.3rem !important;
        font-size: 0.8rem !important;
    }
    
    .table .badge {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.3rem !important;
    }
    
    .table .btn-group-sm .btn,
    .table .btn-sm {
        padding: 0.15rem 0.25rem !important;
        font-size: 0.65rem !important;
    }
    
    /* إخفاء بعض الأعمدة على الشاشات الصغيرة */
    .table .d-lg-table-cell {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .table th,
    .table td {
        padding: 0.3rem 0.2rem !important;
        font-size: 0.75rem !important;
    }
    
    .col-actions {
        width: 100px !important;
        min-width: 90px !important;
    }
    
    /* إخفاء النص في الأزرار */
    .table .btn .btn-text {
        display: none !important;
    }
    
    /* إخفاء المزيد من الأعمدة */
    .table .d-md-table-cell {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .table th,
    .table td {
        padding: 0.25rem 0.15rem !important;
        font-size: 0.7rem !important;
    }
    
    .table .badge {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.2rem !important;
    }
    
    .col-actions {
        width: 80px !important;
        min-width: 70px !important;
    }
    
    .table .btn-group-sm .btn {
        padding: 0.1rem 0.2rem !important;
    }
}

/* ============================================
   تنسيقات Select2 في الفلاتر
   ============================================ */

.filter-row .select2-container {
    min-width: 60px !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection {
    min-height: 28px !important;
    font-size: 0.75rem !important;
    padding: 0 !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0.15rem 0.4rem !important;
    line-height: 1.4 !important;
}

.filter-row input.form-control-sm {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.4rem !important;
    height: 28px !important;
}

/* ============================================
   ألوان الحالات
   ============================================ */

.status-active:not(.status-badge), .status-approved:not(.status-badge), .status-completed:not(.status-badge), .status-paid:not(.status-badge), .status-cleared:not(.status-badge) {
    background-color: var(--theme-status-active-bg, #198754) !important;
    color: var(--theme-status-active-text, white) !important;
}

.status-inactive:not(.status-badge), .status-rejected:not(.status-badge), .status-cancelled:not(.status-badge) {
    background-color: var(--theme-status-inactive-bg, #dc3545) !important;
    color: var(--theme-status-inactive-text, white) !important;
}

.status-pending:not(.status-badge), .status-draft:not(.status-badge) {
    background-color: var(--theme-status-pending-bg, #ffc107) !important;
    color: var(--theme-status-pending-text, #212529) !important;
}

.status-partial:not(.status-badge) {
    background-color: var(--theme-status-partial-bg, #0dcaf0) !important;
    color: var(--theme-status-partial-text, #212529) !important;
}

/* ============================================
   تحسينات إضافية
   ============================================ */

/* إزالة الحدود الزائدة */
.table-borderless th,
.table-borderless td {
    border: none !important;
}

/* تحسين hover */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* تحسين الصفوف المخططة */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* تنسيق الروابط في الجدول */
.table a:not(.btn) {
    color: #0d6efd;
    text-decoration: none;
}

.table a:not(.btn):hover {
    text-decoration: underline;
}

/* تنسيق الأرقام */
.table .text-number,
.table .amount,
.table .price,
.table .quantity {
    font-family: 'Courier New', monospace;
    direction: ltr;
    text-align: right;
}