/* 
 * POS Mobile Fix - إصلاح عرض الموبايل لجدول المنتجات
 * إظهار الكمية والسعر والمجموع بوضوح
 */

/* ==========================================
 * SEARCH BOX FIX - تصغير مربع البحث للموبايل
 * ========================================== */

@media (max-width: 767px) {
    
    /* مربع البحث الرئيسي */
    .pos-search-container {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 6px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }
    
    /* حقل البحث */
    .pos-search-input {
        font-size: 12px !important;
        padding: 8px 10px !important;
        height: 38px !important;
    }
    
    /* الأزرار اليسرى واليمنى */
    .pos-search-left-buttons,
    .pos-search-right-buttons {
        padding: 3px 5px !important;
    }
    
    /* أزرار البحث */
    .btn-search-config,
    .btn-weighing-scale,
    .pos_add_quick_product {
        min-width: 34px !important;
        width: 34px !important;
        height: 34px !important;
        padding: 5px 7px !important;
        font-size: 13px !important;
    }
    
    .btn-search-config i,
    .btn-weighing-scale i,
    .pos_add_quick_product i {
        font-size: 12px !important;
    }
    
    /* تقليل المسافات حول مربع البحث */
    .form-group {
        margin-bottom: 8px !important;
    }
    
    /* الصف الذي يحتوي مربع البحث */
    .row > .col-md-8 {
        padding: 0 8px !important;
    }
    
    /* تقليل ارتفاع العنصر الكلي */
    .box-body {
        padding: 8px !important;
    }
}

/* ==========================================
 * MOBILE TABLE FIX - إصلاح الجدول للموبايل
 * ========================================== */

@media (max-width: 767px) {
    
    /* جعل الجدول scrollable أفقياً */
    .pos_product_div {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* الجدول */
    table#pos_table {
        width: 100% !important;
        min-width: 650px !important;
        font-size: 11px !important;
    }
    
    /* رأس الجدول */
    table#pos_table thead th {
        font-size: 11px !important;
        padding: 6px 4px !important;
        white-space: nowrap !important;
    }
    
    /* خلايا الجدول */
    table#pos_table tbody td {
        font-size: 11px !important;
        padding: 5px 3px !important;
        vertical-align: middle !important;
    }
    
    /* ==========================================
     * COLUMN WIDTHS - عرض الأعمدة للموبايل
     * ========================================== */
    
    /* عمود المنتج */
    table#pos_table th:first-child,
    table#pos_table td:first-child {
        min-width: 200px !important;
        max-width: 250px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    
    /* عمود الكمية */
    table#pos_table th:nth-child(2),
    table#pos_table td:nth-child(2) {
        min-width: 130px !important;
        max-width: 150px !important;
    }
    
    /* عمود السعر */
    table#pos_table th:nth-child(3),
    table#pos_table td:nth-child(3) {
        min-width: 75px !important;
        width: 75px !important;
        text-align: center !important;
    }
    
    /* عمود المجموع */
    table#pos_table th:nth-child(4),
    table#pos_table td:nth-child(4) {
        min-width: 80px !important;
        width: 80px !important;
        text-align: center !important;
    }
    
    /* عمود الحذف */
    table#pos_table th:last-child,
    table#pos_table td:last-child {
        min-width: 40px !important;
        width: 40px !important;
        text-align: center !important;
    }
    
    /* ==========================================
     * QUANTITY BOX - مربع الكمية للموبايل
     * ========================================== */
    
    .pos-qty-container {
        max-width: 90px !important;
        min-width: 90px !important;
    }
    
    .pos-qty-btn {
        min-width: 22px !important;
        width: 22px !important;
        height: 24px !important;
        padding: 2px 4px !important;
    }
    
    .pos-qty-btn i {
        font-size: 9px !important;
    }
    
    .pos-qty-input {
        font-size: 11px !important;
        padding: 2px 3px !important;
        min-width: 35px !important;
        max-width: 45px !important;
        height: 24px !important;
    }
    
    /* الوحدة */
    table#pos_table select.sub_unit {
        font-size: 9px !important;
        padding: 2px 3px !important;
        height: 22px !important;
        max-width: 60px !important;
        margin-left: 3px !important;
    }
    
    /* ==========================================
     * INPUT FIELDS - حقول الإدخال للموبايل
     * ========================================== */
    
    /* سعر الوحدة والمجموع */
    table#pos_table input.pos_unit_price_inc_tax,
    table#pos_table input.pos_line_total {
        font-size: 11px !important;
        padding: 3px 4px !important;
        height: 24px !important;
        text-align: center !important;
        font-weight: 700 !important;
    }
    
    /* عرض المجموع */
    table#pos_table .pos_line_total_text,
    table#pos_table .display_currency {
        font-size: 11px !important;
        font-weight: 700 !important;
        display: inline-block !important;
    }
    
    /* ==========================================
     * DELETE BUTTON - زر الحذف للموبايل
     * ========================================== */
    
    table#pos_table .pos_remove_row {
        padding: 4px 6px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }
    
    /* ==========================================
     * TABLE HEADER - رأس الجدول للموبايل
     * ========================================== */
    
    table#pos_table thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #8D8AA1 !important;
    }
    
    /* ==========================================
     * SCROLL INDICATOR - مؤشر التمرير
     * ========================================== */
    
    .pos_product_div::after {
        content: '← مرر لليسار لرؤية المزيد' !important;
        display: block !important;
        text-align: center !important;
        padding: 8px !important;
        background: #fff3cd !important;
        color: #856404 !important;
        font-size: 11px !important;
        border: 1px solid #ffeaa7 !important;
        border-radius: 4px !important;
        margin-top: 5px !important;
    }
    
    /* إخفاء المؤشر بعد التمرير */
    .pos_product_div.scrolled::after {
        display: none !important;
    }
    
    /* ==========================================
     * PRODUCT NAME - اسم المنتج للموبايل
     * ========================================== */
    
    table#pos_table td:first-child {
        line-height: 1.3 !important;
        word-break: break-word !important;
    }
    
    table#pos_table td:first-child br {
        display: inline !important;
        content: ' - ' !important;
    }
    
    /* ==========================================
     * ROW HEIGHT - ارتفاع الصف للموبايل
     * ========================================== */
    
    table#pos_table tbody tr {
        min-height: 50px !important;
    }
    
    /* ==========================================
     * MAKE SURE ALL COLUMNS VISIBLE - التأكد من ظهور كل الأعمدة
     * ========================================== */
    
    table#pos_table th,
    table#pos_table td {
        display: table-cell !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* إلغاء أي إخفاء */
    table#pos_table .hide,
    table#pos_table .hidden {
        display: table-cell !important;
    }
    
    /* ==========================================
     * NUMBERS FORMATTING - تنسيق الأرقام
     * ========================================== */
    
    /* جعل الأرقام واضحة وكبيرة */
    table#pos_table input[type="text"],
    table#pos_table input[type="number"] {
        direction: ltr !important;
        text-align: center !important;
    }
    
    /* ==========================================
     * TOUCH FRIENDLY - سهولة اللمس
     * ========================================== */
    
    table#pos_table button,
    table#pos_table .btn {
        min-height: 32px !important;
        min-width: 32px !important;
    }
}

/* ==========================================
 * VERY SMALL SCREENS - شاشات صغيرة جداً
 * ========================================== */

@media (max-width: 480px) {
    
    table#pos_table {
        min-width: 600px !important;
        font-size: 10px !important;
    }
    
    table#pos_table th:first-child,
    table#pos_table td:first-child {
        min-width: 150px !important;
    }
    
    table#pos_table thead th {
        font-size: 10px !important;
        padding: 5px 2px !important;
    }
    
    table#pos_table tbody td {
        font-size: 10px !important;
        padding: 4px 2px !important;
    }
    
    .pos-qty-container {
        max-width: 80px !important;
    }
    
    .pos-qty-input {
        font-size: 10px !important;
        min-width: 30px !important;
    }
}

/* ==========================================
 * LANDSCAPE MODE - الوضع الأفقي
 * ========================================== */

@media (max-width: 767px) and (orientation: landscape) {
    
    table#pos_table {
        min-width: 100% !important;
    }
    
    .pos_product_div::after {
        display: none !important;
    }
}

/* ==========================================
 * CUSTOMER & SETTINGS FIX - تصغير قسم العميل
 * ========================================== */

@media (max-width: 767px) {
    
    /* تصغير select العميل */
    .select2-container {
        font-size: 12px !important;
    }
    
    .select2-selection {
        height: 36px !important;
        min-height: 36px !important;
    }
    
    /* زر إضافة عميل */
    .btn-add-customer,
    .add_new_customer {
        padding: 6px 10px !important;
        min-height: 36px !important;
        height: 36px !important;
    }
    
    .btn-add-customer i {
        font-size: 14px !important;
    }
    
    /* input groups */
    .input-group-addon {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    
    /* تقليل المسافات بين الصفوف */
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    
    .row > div {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* تقليل ارتفاع Box */
    .box {
        margin-bottom: 10px !important;
    }
    
    .box-body {
        padding: 10px !important;
    }
    
    /* تقليل المسافة العلوية والسفلية للصفحة */
    section.content {
        padding: 10px 5px !important;
    }
    
    /* إخفاء بعض العناصر غير الضرورية في الموبايل */
    .visible-md,
    .visible-lg {
        display: none !important;
    }
}

/* ==========================================
 * COMPACT HEADER - رأس مضغوط للموبايل
 * ========================================== */

@media (max-width: 767px) {
    
    /* تقليل padding العام */
    .no-padding {
        padding: 0 !important;
    }
    
    .pr-12 {
        padding-right: 5px !important;
    }
    
    /* تقليل حجم الـ form controls */
    .form-control {
        height: 36px !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    /* تقليل حجم Labels */
    label {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
}