/* --- 1. إصلاح مقاسات الأعمدة على الكمبيوتر --- */

/* إعطاء الصنف 50% من عرض الجدول */
.item-table th.col-product,
.item-table td[data-label="الصنف"] {
    width: 50%;
}

/* تحديد عرض الكمية والسعر */
.item-table th.col-quantity,
.item-table td[data-label="الكمية"],
.item-table th.col-price,
.item-table td[data-label*="السعر"] /* يستهدف سعر البيع أو التكلفة */
{
    width: 20%;
}

/* تحديد عرض خانة الحذف */
.item-table th.col-delete,
.item-table td[data-label="حذف"] {
    width: 10%;
}

/* static/css/custom_styles.css */

/* --- 2. إصلاح عرض الفواتير على الموبايل (النسخة المحدثة) --- */
@media (max-width: 767.98px) {
    
    /* إخفاء رأس الجدول الأصلي */
    .item-table thead {
        display: none;
    }

    /* تحويل الجدول والصفوف إلى كتل */
    .item-table, 
    .item-table tbody, 
    .item-table tr {
        display: block;
        width: 100%;
    }

    /* تصميم الصف كـ "بطاقة" */
    .item-table tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden; /* لضمان احتواء العناصر */
    }

    /* تصميم الخانة (السطر داخل البطاقة) */
    .item-table td[data-label] {
        display: flex; /* ✨✨ هنا الحل: استخدام Flexbox */
        align-items: center; /* توسيط عمودي */
        justify-content: space-between; /* توزيع المسافة */
        padding: 10px;
        min-height: 58px; /* ارتفاع ثابت */
        width: 100%;
        border-top: 1px solid #f0f0f0; /* خط فاصل */
    }
    
    .item-table tr td:first-child {
        border-top: none; /* إزالة الخط الفاصل من أول عنصر */
    }

    /* "العنوان" (Label) - الذي ننشئه بـ ::before */
    .item-table td[data-label]::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: right;
        flex-basis: 40%; /* ✨ Label يأخذ 40% من المساحة */
        padding-left: 10px; 
    }

    /* "حقل الإدخال" (Input/Select) */
    .item-table td[data-label] .form-control,
    .item-table td[data-label] .form-select {
        flex-basis: 55%; /* ✨ Input يأخذ 55% من المساحة */
        text-align: left;
    }
    
    /* حالة خاصة لخانة الحذف (checkbox) */
    .item-table td[data-label="حذف"] {
        justify-content: flex-start; /* لا نوزع المسافة */
    }
    .item-table td[data-label="حذف"]::before {
       flex-basis: auto; /* عرض تلقائي للعنوان */
       margin-left: 10px;
    }
    .item-table td[data-label="حذف"] input[type="checkbox"] {
        flex-basis: auto; /* عرض تلقائي للمربع */
        width: 1.5rem; 
        height: 1.5rem;
    }
}