/* 
 * POS Bottom Bar Fix - تقليل ارتفاع شريط الأزرار السفلي
 * لعرض الصفحة بشكل أفضل
 */

/* ==========================================
 * BOTTOM BUTTONS BAR - شريط الأزرار السفلي
 * ========================================== */

/* تقليل ارتفاع الأزرار */
.btn-lg,
button.btn-lg,
a.btn-lg {
    padding: 8px 14px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 36px !important;
}

/* أزرار الدفع المحددة */
.btn-payment-cash,
.btn-payment-card,
.pos-express-finalize,
#pos-finalize,
#pos-draft,
#pos-quotation,
.btn-whatsapp {
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 6px !important;
}

/* أيقونات داخل الأزرار */
.btn-lg i,
.btn i {
    font-size: 12px !important;
    margin: 0 4px !important;
}

/* ==========================================
 * TOTAL AMOUNT DISPLAY - عرض المجموع
 * ========================================== */

/* المبلغ الإجمالي */
.total_paying,
#total_paying_amount,
.total-amount-display {
    font-size: 20px !important;
    line-height: 1.2 !important;
    padding: 6px 10px !important;
}

/* ==========================================
 * CONTAINER - الحاوية
 * ========================================== */

/* تقليل ارتفاع الحاوية */
.pos_form_actions,
.pos-bottom-bar,
.no-print {
    padding: 8px 10px !important;
    min-height: auto !important;
}

/* الصف الذي يحتوي الأزرار */
.row {
    margin: 0 !important;
}

.row > div {
    padding: 4px 6px !important;
}

/* ==========================================
 * RESPONSIVE - للشاشات المختلفة
 * ========================================== */

@media (max-width: 768px) {
    
    /* تصغير جميع الأزرار */
    .btn,
    .btn-lg,
    button.btn-lg,
    button {
        padding: 5px 8px !important;
        font-size: 11px !important;
        height: 32px !important;
        min-height: 32px !important;
        line-height: 1.2 !important;
        border-radius: 5px !important;
        margin: 2px !important;
    }
    
    .btn-lg i,
    .btn i {
        font-size: 11px !important;
        margin: 0 3px !important;
    }
    
    /* المبلغ الإجمالي */
    .total_paying,
    #total_paying_amount {
        font-size: 16px !important;
        padding: 4px 8px !important;
    }
    
    /* تنسيق الأزرار في صفين */
    .pos-bottom-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
        padding: 5px !important;
    }
    
    /* الصف الأول من الأزرار */
    .btn-payment-cash,
    .btn-payment-card,
    .pos-express-finalize {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* زر الإلغاء */
    #pos-cancel,
    .btn-cancel {
        padding: 4px 8px !important;
        font-size: 10px !important;
        height: 28px !important;
    }
    
    /* زر الفواتير الأخيرة */
    #btn-last-transaction,
    .btn-last-invoice {
        padding: 4px 8px !important;
        font-size: 10px !important;
        height: 28px !important;
    }
    
    /* تقليل المسافات */
    .no-print {
        padding: 5px !important;
    }
    
    .row {
        margin: 0 !important;
    }
    
    .row > div {
        padding: 2px !important;
    }
}

/* ==========================================
 * VERY SMALL MOBILE - موبايل صغير جداً
 * ========================================== */

@media (max-width: 480px) {
    
    /* أزرار أصغر للشاشات الصغيرة جداً */
    .btn,
    .btn-lg {
        padding: 4px 6px !important;
        font-size: 10px !important;
        height: 28px !important;
        min-height: 28px !important;
    }
    
    .btn i {
        font-size: 10px !important;
    }
    
    /* المبلغ */
    .total_paying {
        font-size: 14px !important;
    }
    
    /* تقليل النص - إظهار الأيقونات فقط */
    .btn-text-mobile-hide {
        display: none !important;
    }
}

/* ==========================================
 * FIXED BOTTOM BAR - شريط ثابت في الأسفل
 * ========================================== */

/* إذا كان الشريط fixed */
.fixed-bottom,
.navbar-fixed-bottom {
    padding: 6px 10px !important;
    min-height: 50px !important;
    max-height: 60px !important;
}

/* ==========================================
 * BUTTON GROUPS - مجموعات الأزرار
 * ========================================== */

.btn-group {
    margin: 0 2px !important;
}

.btn-group .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* ==========================================
 * SPACING - المسافات
 * ========================================== */

/* تقليل المسافات بين الأزرار */
.btn + .btn {
    margin-left: 4px !important;
}

/* تقليل المسافات العمودية */
.mb-2, .my-2 {
    margin-bottom: 4px !important;
}

.mt-2, .my-2 {
    margin-top: 4px !important;
}

.p-2 {
    padding: 4px !important;
}

/* ==========================================
 * SPECIFIC BUTTONS - أزرار محددة
 * ========================================== */

/* زر الفاتورة الأخيرة */
#btn-last-transaction {
    padding: 5px 8px !important;
    font-size: 11px !important;
    height: 32px !important;
}

/* زر حذف الطلب */
#pos-cancel,
.btn-danger {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* زر عرض الفاتورة */
.btn-show-invoice {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* ==========================================
 * TEXT INSIDE BUTTONS - النص داخل الأزرار
 * ========================================== */

.btn-text {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* إخفاء بعض النصوص على الموبايل */
@media (max-width: 576px) {
    .btn .btn-text {
        display: none !important;
    }
    
    .btn i {
        margin: 0 !important;
    }
}

/* ==========================================
 * OVERALL COMPACT MODE - وضع مضغوط شامل
 * ========================================== */

/* تطبيق على جميع عناصر الأزرار */
section.content.no-print {
    padding-bottom: 60px !important;
}

/* تقليل الـ padding الكلي */
.content-wrapper {
    padding-bottom: 50px !important;
}