/* 
 * POS Action Buttons Mobile - تصغير وتنسيق أزرار الإجراءات للموبايل
 * الأزرار: بيع أجل، تعليق، عرض سعر، WhatsApp، بيع كاش، بطاقة، إلغاء، الفواتير
 */

/* ==========================================
 * MOBILE BUTTONS GRID - شبكة الأزرار للموبايل
 * ========================================== */

@media (max-width: 767px) {
    
    /* Container الأزرار */
    .pos_form_actions,
    .pos-action-buttons,
    section.content.no-print {
        padding: 5px !important;
    }
    
    /* ترتيب الأزرار في شبكة */
    .pos-buttons-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* الأزرار الرئيسية */
    .btn-success,
    .btn-warning,
    .btn-danger,
    .btn-info,
    .btn-primary,
    .btn-default {
        width: 100% !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* الأيقونات داخل الأزرار */
    .btn i {
        font-size: 11px !important;
        margin: 0 3px !important;
        vertical-align: middle !important;
    }
    
    /* ==========================================
     * SPECIFIC BUTTONS - أزرار محددة
     * ========================================== */
    
    /* بيع أجل */
    #pos-draft,
    .btn-pos-draft {
        background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
        border: none !important;
        color: white !important;
    }
    
    /* تعليق الفاتورة */
    #pos-quotation,
    .btn-pos-quotation {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        border: none !important;
        color: white !important;
    }
    
    /* عرض سعر */
    .btn-show-price,
    .btn-quotation {
        background: linear-gradient(135deg, #f39c12 0%, #d68910 100%) !important;
        border: none !important;
        color: white !important;
    }
    
    /* WhatsApp Invoice */
    .btn-whatsapp,
    #btn-whatsapp-invoice {
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
        border: none !important;
        color: white !important;
    }
    
    /* بيع كاش */
    #pos-finalize,
    .pos-express-finalize,
    .btn-payment-cash {
        background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
        border: none !important;
        color: white !important;
    }
    
    /* بطاقة */
    .btn-payment-card,
    .btn-card {
        background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%) !important;
        border: none !important;
        color: white !important;
    }
    
    /* إلغاء */
    #pos-cancel,
    .btn-cancel {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        border: none !important;
        color: white !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
        height: 30px !important;
    }
    
    /* الفواتير الأخيرة */
    #btn-last-transaction {
        background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
        border: none !important;
        color: white !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
        height: 30px !important;
        width: 100% !important;
        margin-top: 4px !important;
    }
    
    /* ==========================================
     * TOTAL AMOUNT - المبلغ الإجمالي
     * ========================================== */
    
    .total-amount-section {
        background: white !important;
        padding: 6px !important;
        border-radius: 6px !important;
        margin: 4px 0 !important;
        text-align: center !important;
        border: 2px solid #e74c3c !important;
    }
    
    .total_paying,
    #total_paying_amount {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #e74c3c !important;
        display: block !important;
    }
    
    .total-label {
        font-size: 11px !important;
        color: #7f8c8d !important;
        display: block !important;
    }
    
    /* ==========================================
     * BUTTON GROUPS - مجموعات الأزرار
     * ========================================== */
    
    /* الصف الأول: بيع أجل، تعليق */
    .buttons-row-1 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
    }
    
    /* الصف الثاني: عرض سعر، WhatsApp */
    .buttons-row-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
    }
    
    /* الصف الثالث: بيع كاش، بطاقة */
    .buttons-row-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
    }
    
    /* الصف الرابع: إلغاء */
    .buttons-row-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
}

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

@media (max-width: 480px) {
    
    /* أزرار أصغر */
    .btn-success,
    .btn-warning,
    .btn-danger,
    .btn-info,
    .btn-primary,
    .btn-default {
        padding: 5px 6px !important;
        font-size: 10px !important;
        height: 30px !important;
        min-height: 30px !important;
    }
    
    .btn i {
        font-size: 10px !important;
        margin: 0 2px !important;
    }
    
    /* إخفاء بعض النصوص وإبقاء الأيقونات فقط */
    .btn-text-xs-hide {
        display: none !important;
    }
    
    /* المبلغ */
    .total_paying {
        font-size: 16px !important;
    }
}

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

@media (max-width: 767px) and (orientation: landscape) {
    
    /* في الوضع الأفقي - 3 أزرار في الصف */
    .pos-buttons-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .buttons-row-1,
    .buttons-row-2,
    .buttons-row-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ==========================================
 * HOVER EFFECTS - تأثيرات Hover
 * ========================================== */

@media (max-width: 767px) {
    
    .btn:active {
        transform: scale(0.95) !important;
        opacity: 0.9 !important;
    }
}