/* =====================================================================
   mobile-app.css
   يحوّل مظهر جميع الصفحات إلى تطبيق موبايل على الشاشات الصغيرة
   - شريط تنقّل سفلي بأيقونات (Bottom Tab Bar)
   - أحجام مضغوطة للأزرار والأيقونات والخطوط
   - تحويل الجداول إلى بطاقات (Cards)
   - نوافذ منبثقة بشكل Bottom Sheet
   يحافظ على ألوان كل قسم كما هي (يعتمد المتغيّرات أدناه كقيم احتياطية)
   ===================================================================== */

/* إلغاء التكبير/التصغير باللمس (القرص والنقر المزدوج) مع إبقاء التمرير */
html {
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
}

:root {
    --mobile-accent: #2c6b96;
    --mobile-accent-2: #78a6c8;
    --mobile-bar-bg: rgba(255, 255, 255, 0.98);
    --mobile-bar-border: rgba(0, 0, 0, 0.08);
    --mobile-card-radius: 14px;
    --mobile-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* الشريط السفلي مخفي افتراضياً على الشاشات الكبيرة */
.mobile-tabbar { display: none; }

/* مقبض السلة مخفي على الشاشات الكبيرة (يظهر فقط في وضع الموبايل) */
.mc-cart-handle { display: none; }

/* =====================================================================
   تخطيط مرن بديل (Flexbox) لشبكات الإحصائيات والتنقّل
   يضمن عملها حتى على المتصفّحات القديمة التي لا تدعم CSS Grid جيداً
   (فتظهر البطاقات متجاورة بدل تمدّدها بعرض كامل).
   ===================================================================== */
.stats-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: stretch !important;
}
.stats-grid > .stat-card {
    flex: 1 1 200px !important;
    min-width: 0 !important;
}
.nav-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.nav-grid > .nav-tile {
    flex: 1 1 200px !important;
    min-width: 0 !important;
}

/* ===================================================================== */
/*  وضع تطبيق الموبايل: يُفعّل على الشاشات <= 768px                        */
/* ===================================================================== */
@media (max-width: 768px) {

    html { -webkit-text-size-adjust: 100%; }

    body {
        font-size: 14px !important;
        /* ترك مساحة للشريط السفلي حتى لا يغطي المحتوى */
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
        /* إلغاء توسيط بعض الصفحات (style.css) الذي يكسر تخطيط الموبايل */
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* حاوية أعرض بحواف أصغر */
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    /* ---------------- العناوين والخطوط ---------------- */
    h1, .h1 { font-size: 1.25rem !important; }
    h2, .h2 { font-size: 1.1rem !important; }
    h3, .h3 { font-size: 1rem !important; }
    h4, h5, h6 { font-size: 0.95rem !important; }
    h1.main-title, .main-title { font-size: 1.2rem !important; margin-bottom: 1rem !important; }

    /* ---------------- البطاقات ---------------- */
    .card {
        border-radius: var(--mobile-card-radius) !important;
        box-shadow: var(--mobile-shadow) !important;
        margin-bottom: 12px !important;
    }
    .card-body { padding: 12px !important; }
    .card-title { font-size: 1rem !important; margin-bottom: 0.5rem !important; }
    .card-text { font-size: 0.85rem !important; }

    /* بطاقات اختيار القسم في الصفحة الرئيسية */
    .section-card .card-body { padding: 16px !important; }
    .section-icon { font-size: 2rem !important; margin-bottom: 0.6rem !important; }

    /* ---------------- الأزرار والأيقونات ---------------- */
    .btn {
        font-size: 0.82rem !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 10px !important;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }
    .btn-sm { font-size: 0.75rem !important; padding: 0.35rem 0.5rem !important; min-height: 34px; }
    .btn-lg { font-size: 0.9rem !important; padding: 0.6rem 1rem !important; }
    .btn i, .fas, .far, .fa { font-size: 0.95em; }

    /* أزرار الأدوات داخل الصفوف تصبح دائرية صغيرة أنيقة */
    td .btn.btn-sm,
    .btn-group-sm > .btn { border-radius: 8px !important; }

    /* ---------------- الحقول والنماذج ---------------- */
    .form-control, .form-select {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.7rem !important;
        border-radius: 10px !important;
    }
    .form-label { font-size: 0.8rem !important; margin-bottom: 0.25rem !important; }
    .input-group-text { font-size: 0.8rem !important; padding: 0.4rem 0.6rem !important; }

    /* ---------------- التنبيهات ---------------- */
    .alert { font-size: 0.8rem !important; padding: 0.6rem 0.8rem !important; border-radius: 10px !important; }
    .badge { font-size: 0.7rem !important; }

    /* ===================================================================== */
    /*  تحويل الجداول إلى بطاقات                                              */
    /* ===================================================================== */
    .table-responsive { overflow: visible !important; }

    table.mc-cards { width: 100% !important; border: none !important; background: transparent !important; }
    table.mc-cards thead { display: none !important; }
    table.mc-cards tbody,
    table.mc-cards tr,
    table.mc-cards td { display: block !important; width: 100% !important; }

    table.mc-cards tr {
        background: #fff !important;
        border: 1px solid var(--mobile-bar-border) !important;
        border-radius: var(--mobile-card-radius) !important;
        box-shadow: var(--mobile-shadow) !important;
        padding: 8px 12px !important;
        margin-bottom: 10px !important;
    }

    table.mc-cards td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px;
        text-align: left !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px dashed #eef1f4 !important;
        font-size: 0.82rem !important;
        white-space: normal !important;
        word-break: break-word;
    }
    table.mc-cards td:last-child { border-bottom: none !important; }

    /* عنوان الحقل يظهر على يمين الخلية (RTL) بالاعتماد على data-label */
    table.mc-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--mobile-accent);
        margin-inline-end: 8px;
        flex: 0 0 auto;
        font-size: 0.78rem;
    }
    /* إخفاء العنوان إذا كان فارغاً (خلايا الأزرار مثلاً) */
    table.mc-cards td[data-label=""]::before,
    table.mc-cards td:not([data-label])::before { content: ""; margin: 0; }

    /* خلايا الأزرار تُعرض ممتدة بالكامل */
    table.mc-cards td.mc-actions {
        justify-content: center !important;
        gap: 8px;
        padding-top: 8px !important;
    }

    /* صفوف المجاميع/الإجماليات تبقى بارزة كبطاقة ملوّنة */
    table.mc-cards tr.table-dark,
    table.mc-cards tr.table-primary,
    table.mc-cards tr.table-info,
    table.mc-cards tr.table-warning,
    table.mc-cards tr.fw-bold { font-weight: 700 !important; }

    /* ===================================================================== */
    /*  النوافذ المنبثقة كـ Bottom Sheet                                     */
    /* ===================================================================== */
    .modal-dialog {
        max-width: 100% !important;
        margin: 0 !important;
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: flex-end;
        min-height: auto;
    }
    .modal-content {
        border-radius: 18px 18px 0 0 !important;
        padding: 0.5rem !important;
        max-height: 88vh;
        overflow-y: auto;
        width: 100%;
    }
    .modal-header { padding: 0.9rem !important; }
    .modal-title { font-size: 1.05rem !important; }
    .modal-body { padding: 0.9rem !important; }
    .modal-footer { padding: 0.7rem 0.9rem !important; }
    .modal.fade .modal-dialog { transform: translateY(30px); transition: transform 0.25s ease-out; }
    .modal.show .modal-dialog { transform: translateY(0); }

    /* ===================================================================== */
    /*  الشريط السفلي (Bottom Tab Bar)                                       */
    /* ===================================================================== */
    .mobile-tabbar {
        display: flex !important;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1050;
        background: var(--mobile-bar-bg);
        border-top: 1px solid var(--mobile-bar-border);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(10px);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: stretch;
    }
    .mobile-tabbar button {
        flex: 1 1 0;
        background: none;
        border: none;
        color: #6b7a88;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 0.66rem;
        font-family: inherit;
        padding: 4px 2px;
        border-radius: 10px;
        transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
        cursor: pointer;
    }
    .mobile-tabbar button i { font-size: 1.15rem; }
    .mobile-tabbar button:active { transform: scale(0.92); background: var(--mobile-accent); color: #fff; }
    .mobile-tabbar button.mobile-tab-home { color: var(--mobile-accent); }

    /* إخفاء الشريط السفلي عند فتح نافذة منبثقة حتى لا يتداخل معها */
    body.modal-open .mobile-tabbar { display: none !important; }
}

/* ===================================================================== */
/*  بطاقات الإحصائيات: ٣ بطاقات في الصف الأفقي على الموبايل               */
/*  + السلة الثابتة المنبثقة أسفل الشاشة                                   */
/* ===================================================================== */
@media (max-width: 768px) {

    /* --- بطاقات إحصائيات admin.php: بطاقتان في الصف (Flexbox) --- */
    .stats-grid { gap: 8px !important; }
    .stats-grid > .stat-card {
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
    }

    /* --- بطاقات Bootstrap (col-md-3) يتم وسمها عبر JS --- */
    .mc-statgrid {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
    .mc-statgrid > .mc-statcol {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 8px !important;
    }

    /* --- تصغير محتوى بطاقة الإحصائية لتناسب ٣ في صف --- */
    .stat-card, .stat-tile, .stats-card {
        border-radius: 12px !important;
        margin-bottom: 0 !important;
        height: 100%;
    }
    .stat-card { padding: 8px 4px !important; }
    .stat-card, .stats-card .card-body, .stat-tile .card-body {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .stat-tile .card-body, .stats-card .card-body { padding: 8px 4px !important; }
    .stat-title,
    .stat-tile .card-title,
    .stats-card p,
    .stat-card .stat-title {
        font-size: 0.6rem !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }
    .stat-value,
    .stat-tile .stat-value,
    .stats-card h3,
    .stat-card h3,
    .stat-card .stat-value {
        font-size: 0.82rem !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }
    .stat-sub, .stat-note { display: none !important; }
    .stat-icon, .stats-icon {
        font-size: 1rem !important;
        margin-bottom: 2px !important;
        width: auto !important;
        height: auto !important;
    }

    /* ===================================================================== */
    /*  السلة الثابتة المنبثقة أسفل الشاشة                                    */
    /* ===================================================================== */

    /* إدخال الباركود يبقى ملتصقاً بأعلى الشاشة ليسهل المسح أثناء التمرير */
    .barcode-card {
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
        margin-bottom: 8px !important;
    }

    /* مساحة سفلية إضافية حتى لا تغطّي السلة آخر المحتوى */
    body.mc-has-cart { padding-bottom: 150px !important; }

    .mc-cart {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1035 !important;
        margin: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 -6px 26px rgba(0, 0, 0, 0.18) !important;
        max-height: 82vh;
        overflow: hidden;
    }
    .mc-cart .card-header,
    .mc-cart .cart-head {
        border-radius: 0 !important;
        padding: 8px 12px !important;
    }
    .mc-cart .cart-totals { padding: 6px 12px !important; }
    .mc-cart .card-body { padding: 8px 10px !important; }

    /* المحتوى (النموذج) قابل للطي */
    .mc-cart form {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transition: max-height 0.28s ease, opacity 0.2s ease;
    }
    .mc-cart.mc-cart-open form {
        max-height: 60vh;
        overflow-y: auto;
        opacity: 1;
    }

    /* مقبض السلة (يُضاف عبر JS) */
    .mc-cart-handle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        border: none;
        background: var(--mobile-accent);
        color: #fff;
        padding: 11px 14px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        border-radius: 16px 16px 0 0;
    }
    .mc-cart-handle .mc-cart-total {
        margin-inline-start: auto;
        font-weight: 800;
        font-size: 0.85rem;
    }
    .mc-cart-handle .mc-cart-caret { transition: transform 0.28s ease; opacity: 0.9; }
    .mc-cart.mc-cart-open .mc-cart-handle .mc-cart-caret { transform: rotate(180deg); }

    /* داخل السلة نُبقي الجداول جداولَ مضغوطة (لا بطاقات) لتفادي التكرار */
    .mc-cart table.mc-cards thead { display: table-header-group !important; }
    .mc-cart table.mc-cards tbody { display: table-row-group !important; }
    .mc-cart table.mc-cards tr {
        display: table-row !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .mc-cart table.mc-cards td {
        display: table-cell !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 0.75rem !important;
        padding: 4px !important;
    }
    .mc-cart table.mc-cards td::before { content: "" !important; margin: 0 !important; }
}

/* ===================================================================== */
/*  صفحة البيع المباشر: بطاقات المنتجات مربّعة، بطاقتان في كل صف           */
/* ===================================================================== */
@media (max-width: 768px) {
    body.mc-page-direct-sales #productsGrid {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
    body.mc-page-direct-sales #productsGrid > [class*="col-"] {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
        margin-bottom: 6px !important;
    }
    /* البطاقة: ارتفاع مضغوط يتبع المحتوى (يظهر الزر كاملاً بلا اقتطاع) */
    body.mc-page-direct-sales #productsGrid .card {
        height: 100% !important;
        border-radius: 12px !important;
        overflow: visible !important;
    }
    body.mc-page-direct-sales #productsGrid .card-body {
        padding: 6px 6px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* الزر ملتصق بأسفل البطاقة وبعرض كامل */
    body.mc-page-direct-sales #productsGrid .card-body .mb-auto { margin-bottom: auto !important; }
    body.mc-page-direct-sales #productsGrid .card-title {
        font-size: 0.66rem !important;
        margin-bottom: 2px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.15;
    }
    body.mc-page-direct-sales #productsGrid .card-text {
        font-size: 0.58rem !important;
        margin-bottom: 1px !important;
    }
    /* إخفاء سطر الباركود لتوفير المساحة بعد تقليل ارتفاع البطاقة */
    body.mc-page-direct-sales #productsGrid .card-body .mb-auto .card-text:first-of-type { display: none !important; }
    body.mc-page-direct-sales #productsGrid .card-text strong { font-size: 0.72rem !important; }
    body.mc-page-direct-sales #productsGrid .btn {
        font-size: 0.6rem !important;
        padding: 0.25rem 0.2rem !important;
        min-height: 28px;
        border-radius: 8px !important;
    }
    body.mc-page-direct-sales #productsGrid .btn i { margin: 0 !important; }
    body.mc-page-direct-sales #productsGrid .alert { padding: 0.15rem !important; font-size: 0.55rem !important; margin-bottom: 3px !important; }
}

/* ===================================================================== */
/*  صفحة التوصيل: جدول المنتجات يُعرض بطاقتين في كل صف + زر بعرض البطاقة    */
/* ===================================================================== */
@media (max-width: 768px) {
    /* حاوية الصفوف تصبح شبكة مرنة عمودين */
    #deliveryProductsTable.mc-cards tbody {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #deliveryProductsTable.mc-cards tr {
        width: calc(50% - 4px) !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 10px !important;
    }
    #deliveryProductsTable.mc-cards td {
        width: 100% !important;
        padding: 3px 0 !important;
        font-size: 0.72rem !important;
    }
    #deliveryProductsTable.mc-cards td::before { font-size: 0.68rem !important; }
    /* خلية الأزرار: الزر بعرض البطاقة بالكامل */
    #deliveryProductsTable.mc-cards td.mc-actions {
        justify-content: stretch !important;
        padding-top: 6px !important;
    }
    #deliveryProductsTable.mc-cards td.mc-actions .btn {
        width: 100% !important;
        font-size: 0.72rem !important;
    }
}

/* ===================================================================== */
/*  صفحة الجملة: بطاقات المنتجات بطاقتان في الصف + زر بعرض البطاقة         */
/* ===================================================================== */
@media (max-width: 768px) {
    body.mc-page-wholesale #productsGrid {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
    body.mc-page-wholesale #productsGrid > * {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 8px !important;
    }
    body.mc-page-wholesale #productsGrid .product-card,
    body.mc-page-wholesale #productsGrid .card {
        border-radius: 14px !important;
        height: 100% !important;
    }
    body.mc-page-wholesale #productsGrid .card-body { padding: 8px !important; }
    body.mc-page-wholesale #productsGrid .card-title {
        font-size: 0.75rem !important;
        margin-bottom: 4px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.15;
    }
    body.mc-page-wholesale #productsGrid .product-details p {
        font-size: 0.62rem !important;
        margin-bottom: 2px !important;
    }
    /* حقل الكمية والزر يتراصّان عمودياً بعرض البطاقة الكامل */
    body.mc-page-wholesale #productsGrid .product-details .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    body.mc-page-wholesale #productsGrid .product-details .d-flex > * { margin: 0 !important; width: 100% !important; }
    body.mc-page-wholesale #productsGrid .product-quantity { width: 100% !important; }
    body.mc-page-wholesale #productsGrid .btn {
        width: 100% !important;
        font-size: 0.72rem !important;
        padding: 0.35rem !important;
    }
}

/* ===================================================================== */
/*  صفحة الرواجع: بحث في الهيدر + أزرار أقسام ثابتة + بطاقتان في الصف       */
/* ===================================================================== */
@media (max-width: 768px) {

    /* الهيدر ثابت أعلى الشاشة ويحوي شريط البحث */
    body.mc-page-returns .returns-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1032 !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin: 0 -10px 8px !important;
        padding: 10px 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    }
    body.mc-page-returns .returns-topbar .home-link {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }
    body.mc-page-returns .returns-title {
        font-size: 1.05rem !important;
        justify-content: center;
        margin: 0 !important;
    }
    body.mc-page-returns .returns-topbar .returns-search {
        margin: 0 !important;
        width: 100% !important;
    }
    body.mc-page-returns .returns-topbar .returns-search input {
        padding: 0.5rem 2rem 0.5rem 0.8rem !important;
        font-size: 0.8rem !important;
    }

    /* أزرار الأقسام (مباشر/توصيل/جملة) ثابتة أسفل الهيدر مباشرة */
    body.mc-page-returns #salesTabs.sale-pills {
        position: sticky !important;
        top: var(--mc-returns-header-h, 54px) !important;
        z-index: 1031 !important;
        background: #fff !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        margin: 0 -10px !important;
        padding: 8px 10px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
    body.mc-page-returns #salesTabs.sale-pills .nav-link {
        white-space: nowrap !important;
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
    }
    /* فلاتر التاريخ تنزل أسفل الأزرار (غير ثابتة) */
    body.mc-page-returns .controls-row { flex-direction: column !important; gap: 8px !important; }

    /* السماح بالتثبيت داخل البطاقة (تفادي overflow يكسر sticky) */
    body.mc-page-returns .returns-panel,
    body.mc-page-returns .returns-panel .card-body { overflow: visible !important; }
    body.mc-page-returns .returns-panel .card-body { padding: 0 !important; }

    /* بطاقات المبيعات: بطاقتان في كل صف (البطاقة نفسها زر الاختيار) */
    body.mc-page-returns #salesTabContent .row > .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    body.mc-page-returns .sale-card .card-body { padding: 8px 10px !important; }
    body.mc-page-returns .sale-card .card-title { font-size: 0.72rem !important; padding-left: 1.1rem !important; }
    body.mc-page-returns .sale-card .small,
    body.mc-page-returns .sale-card .small .d-flex span { font-size: 0.66rem !important; }
    body.mc-page-returns .sale-card .items-list { max-height: 60px !important; }
    body.mc-page-returns .sale-card .items-list .text-muted { font-size: 0.62rem !important; }
}

/* ===================================================================== */
/*  صفحة الإدارة admin.php: بطاقة منتج مرتّبة + نوافذ تعديل/معاينة أنيقة     */
/* ===================================================================== */
@media (max-width: 768px) {

    /* إظهار جميع البطاقات كاملة (إزالة حد الارتفاع الذي كان يُظهر ٤ فقط) */
    .admin-products-scroll {
        max-height: none !important;
        overflow: visible !important;
    }

    /* رأس اللوحة: أزرار الاستيراد/التصدير بجانب عنوان "قائمة المنتجات" */
    .panel-head {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .panel-head .panel-title {
        flex: 1 1 auto !important;
        font-size: 1rem !important;
        margin: 0 !important;
    }
    .panel-head .panel-tools { display: contents !important; }
    .panel-head .panel-tools .tool-btn {
        font-size: 0.72rem !important;
        padding: 0.35rem 0.6rem !important;
    }
    .panel-head .panel-tools .tool-search {
        flex: 1 1 100% !important;
        order: 5 !important;
    }
    .panel-head .panel-tools .tool-search input { width: 100% !important; }

    /* عرض بطاقات المنتجات بطاقتين في كل صف أفقي */
    #adminProductsTable.mc-cards tbody {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #adminProductsTable.mc-cards tr {
        width: calc(50% - 4px) !important;
        margin: 0 !important;
        padding: 8px 10px !important;
    }

    /* بطاقة المنتج: نُظهر الباركود + الاسم + الكمية، ونخفي بقية الأعمدة */
    #adminProductsTable.mc-cards td:nth-child(4),
    #adminProductsTable.mc-cards td:nth-child(5),
    #adminProductsTable.mc-cards td:nth-child(6),
    #adminProductsTable.mc-cards td:nth-child(7),
    #adminProductsTable.mc-cards td:nth-child(8) {
        display: none !important;
    }
    /* خلية الباركود تُعرض في المنتصف بدون عنوان جانبي */
    #adminProductsTable.mc-cards td:nth-child(1) {
        display: block !important;
        text-align: center !important;
        padding: 6px 0 !important;
    }
    #adminProductsTable.mc-cards td:nth-child(1)::before { content: "" !important; margin: 0 !important; }
    #adminProductsTable.mc-cards td:nth-child(1) .barcode-container { align-items: center; }

    /* الأزرار أسفل البطاقة، ممتدة ومتباعدة */
    #adminProductsTable.mc-cards td.mc-actions { padding-top: 8px !important; }
    #adminProductsTable.mc-cards td.mc-actions .act-group {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
    }
    #adminProductsTable.mc-cards td.mc-actions .act-btn {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        font-size: 0.95rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ===== نافذة التعديل: اسم+كمية في صف، وباقي الحقول كل حقلين في صف ===== */
    #editItemModal .modal-body {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 8px !important;
    }
    #editItemModal .modal-body > .mb-3 {
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        margin-bottom: 10px !important;
    }
    #editItemModal .modal-body > .mb-3 .form-label { font-size: 0.72rem !important; }

    /* ===== نافذة المعاينة: نفس النسق (اسم+كمية في صف، والأسعار كل اثنين في صف) ===== */
    #previewItemModal .modal-body .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* الباركود وتاريخ الإضافة على عرض كامل */
    #previewItemModal .modal-body .row > .col-md-6:first-child,
    #previewItemModal .modal-body .row > .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    #previewItemModal .modal-body .form-label { font-size: 0.72rem !important; margin-bottom: 2px !important; }
    #previewItemModal .modal-body .form-control-static {
        font-weight: 700;
        background: #f6f8fb;
        border-radius: 8px;
        padding: 6px 8px;
        margin: 0;
        font-size: 0.8rem;
    }

    /* لمسة جمالية على رأس النوافذ المنبثقة في صفحة الإدارة */
    #editItemModal .modal-header,
    #previewItemModal .modal-header {
        background: var(--mobile-accent);
        color: #fff;
        border-radius: 18px 18px 0 0;
    }
    #editItemModal .modal-header .btn-close,
    #previewItemModal .modal-header .btn-close { filter: invert(1) grayscale(1); }
}

/* ===================================================================== */
/*  صفحة التقارير admin_reports.php                                        */
/*  إحصائيات بطاقتين في الصف + هيدر ثابت + فلاتر بعمود واحد وأزرار عمودية    */
/* ===================================================================== */
@media (max-width: 768px) {

    /* بطاقات الإحصائيات: بطاقتان في كل صف */
    body.mc-page-reports .mc-statgrid > .mc-statcol {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* الهيدر وحده ثابت أعلى الشاشة (بدل تثبيت الكتلة كاملة) */
    body.mc-page-reports .reports-sticky-top { position: static !important; }
    body.mc-page-reports .reports-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1031 !important;
        margin: 0 -10px 10px !important;
        border-radius: 0 !important;
        padding: 10px 12px !important;
    }
    body.mc-page-reports .reports-title { font-size: 1rem !important; }
    body.mc-page-reports .reports-back { padding: 4px 8px !important; font-size: 0.72rem !important; }
    body.mc-page-reports .reports-back-spacer { display: none !important; }

    /* الحقول الثلاثة (من تاريخ/إلى تاريخ/نوع المبيعات) في صف أفقي واحد */
    body.mc-page-reports .reports-sticky-top form.row {
        margin-left: -3px !important;
        margin-right: -3px !important;
    }
    body.mc-page-reports .reports-sticky-top form.row > .col-md-2 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
    /* حاوية الأزرار بعرض كامل تحت صف الحقول */
    body.mc-page-reports .reports-sticky-top form.row > .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    body.mc-page-reports .reports-sticky-top form .form-label { font-size: 0.6rem !important; }
    body.mc-page-reports .reports-sticky-top form .form-label.d-block { display: none !important; }
    body.mc-page-reports .reports-sticky-top form .form-control {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.3rem !important;
    }
    /* الأزرار الثلاثة في صف أفقي واحد (جنباً إلى جنب) */
    body.mc-page-reports .reports-sticky-top form .d-flex {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    body.mc-page-reports .reports-sticky-top form .d-flex > .btn,
    body.mc-page-reports .reports-sticky-top form .d-flex > a {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        /* الحجم كما هو، لكن النص أكبر بنسبة 50% (0.62rem × 1.5 ≈ 0.93rem) */
        font-size: 0.93rem !important;
        padding: 0.45rem 0.2rem !important;
        white-space: normal !important;
        text-align: center;
        line-height: 1.15;
    }

    /* قسم "ملخص المبيعات": بطاقة بجانب بطاقة */
    body.mc-page-reports #salesSummaryRow > .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    body.mc-page-reports #salesSummaryRow .card-body { padding: 10px !important; }
    body.mc-page-reports #salesSummaryRow .fa-2x { font-size: 1.4em !important; }

    /* تكبير النص داخل بطاقات الإحصائيات بنسبة 50% مع بقاء حجم البطاقة كما هو */
    body.mc-page-reports .stat-title,
    body.mc-page-reports .stat-tile .card-title {
        font-size: 0.9rem !important;   /* 0.6rem × 1.5 */
        line-height: 1.25 !important;
    }
    body.mc-page-reports .stat-value,
    body.mc-page-reports .stat-tile .stat-value {
        font-size: 1.23rem !important;  /* 0.82rem × 1.5 */
    }
}

/* ===================================================================== */
/*  بطاقات "تفاصيل المبيعات حسب النوع" بتصميم أنيق ومتناسق                  */
/* ===================================================================== */
@media (max-width: 768px) {
    #salesByTypeTable.mc-cards tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    #salesByTypeTable.mc-cards tr {
        background: #fff !important;
        border: 1px solid #eef1f6 !important;
        border-right: 4px solid var(--mobile-accent) !important;
        border-radius: 14px !important;
        box-shadow: var(--mobile-shadow) !important;
        padding: 12px 14px !important;
        margin: 0 !important;
    }
    /* عنوان نوع المبيعات كرأس للبطاقة */
    #salesByTypeTable.mc-cards td:nth-child(1) {
        display: block !important;
        text-align: center !important;
        font-weight: 800 !important;
        font-size: 0.95rem !important;
        color: var(--mobile-accent) !important;
        border-bottom: 2px dashed #eef1f6 !important;
        padding: 0 0 8px !important;
        margin-bottom: 8px !important;
    }
    #salesByTypeTable.mc-cards td:nth-child(1)::before { content: "" !important; margin: 0 !important; }

    /* صفوف القيم: عنوان يمين وقيمة يسار */
    #salesByTypeTable.mc-cards td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f5f7fa !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        color: #2c3e50 !important;
    }
    #salesByTypeTable.mc-cards td:last-child { border-bottom: none !important; }
    #salesByTypeTable.mc-cards td::before {
        color: #8a94a6 !important;
        font-weight: 600 !important;
        font-size: 0.78rem !important;
    }
    /* إبراز الربح (أخضر) والنسبة (شارة) */
    #salesByTypeTable.mc-cards td:nth-child(5) { color: #1a7f37 !important; }
    #salesByTypeTable.mc-cards td:nth-child(6)::after { content: ""; }
    #salesByTypeTable.mc-cards td:nth-child(6) {
        color: var(--mobile-accent) !important;
    }
}

/* ===================================================================== */
/*  صفحة الموظفين admin_employees.php: بطاقتان مربّعتان في كل صف           */
/* ===================================================================== */
@media (max-width: 768px) {
    body.mc-page-employees .mc-statgrid > .mc-statcol {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    body.mc-page-employees .stats-card {
        aspect-ratio: 2 / 1; /* الارتفaع أقل بنسبة 50% من المربّع */
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.mc-page-employees .stats-card .card-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        padding: 4px 6px !important;
    }
    body.mc-page-employees .stats-card .stats-icon {
        font-size: 1.15rem !important;
        margin: 0 !important;
    }
    body.mc-page-employees .stats-card h3 {
        font-size: 1.05rem !important;
        margin: 0 !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }
    body.mc-page-employees .stats-card p {
        font-size: 0.66rem !important;
        margin: 0 !important;
        text-align: center;
        line-height: 1.1 !important;
    }
}

/* ===================================================================== */
/*  صفحة المصاريف admin_expenses.php: بطاقتان مربّعتان في كل صف            */
/* ===================================================================== */
@media (max-width: 768px) {
    body.mc-page-expenses .mc-statgrid > .mc-statcol {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    body.mc-page-expenses .stat-card {
        aspect-ratio: 2 / 1; /* الارتفاع أقل بنسبة 50% من المربّع */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        padding: 5px 6px !important;
        gap: 1px !important;
    }
    body.mc-page-expenses .stat-card i {
        font-size: 1.15rem !important;
        margin: 0 !important;
    }
    body.mc-page-expenses .stat-card h3 {
        font-size: 0.95rem !important;
        margin: 0 !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }
    body.mc-page-expenses .stat-card p {
        font-size: 0.64rem !important;
        margin: 0 !important;
        text-align: center;
        line-height: 1.1 !important;
    }

    /* إخفاء بطاقات الإحصائيات عند التمرير للأسفل (وتظهر عند الرجوع للأعلى) */
    body.mc-page-expenses .mc-statgrid {
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
        max-height: 400px;
    }
    body.mc-page-expenses .mc-statgrid.mc-stats-hidden {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ===================================================================== */
/*  الصفحة الرئيسية index.php: بطاقات الأقسام مربّعة بطاقتين في كل صف        */
/* ===================================================================== */
@media (max-width: 768px) {
    /* عمودان لبطاقات الأقسام */
    body.mc-page-home .row.g-4 > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* بطاقة القسم مربّعة بمحتوى متمركز */
    body.mc-page-home .section-card {
        aspect-ratio: 1 / 1;
        border-radius: 16px !important;
    }
    body.mc-page-home .section-card .card-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 10px !important;
        height: 100%;
        gap: 6px;
    }
    body.mc-page-home .section-card .section-icon {
        font-size: 2rem !important;
        margin: 0 !important;
    }
    body.mc-page-home .section-card .card-title {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }
    body.mc-page-home .section-card .card-text {
        font-size: 0.68rem !important;
        margin: 0 !important;
    }

}

/* ===================================================================== */
/*  أيقونة تثبيت التطبيق في الصفحة الرئيسية (تظهر في كل الأحجام)           */
/* ===================================================================== */
.pwa-install-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(44, 107, 150, 0.25);
    border-radius: 16px;
    padding: 10px 18px;
    box-shadow: 0 6px 20px rgba(44, 107, 150, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.pwa-install-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(44, 107, 150, 0.22); }
.pwa-install-card:active { transform: scale(0.97); }
.pwa-install-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex: 0 0 auto;
}
.pwa-install-label {
    font-weight: 800;
    color: #2c6b96;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .pwa-install-card { padding: 8px 14px; gap: 10px; }
    .pwa-install-icon { width: 40px; height: 40px; }
    .pwa-install-label { font-size: 0.9rem; }
}

/* شاشات صغيرة جداً */
@media (max-width: 380px) {
    body { font-size: 13px !important; }
    .btn { font-size: 0.78rem !important; }
    .mobile-tabbar button { font-size: 0.6rem; }
    .mobile-tabbar button i { font-size: 1.05rem; }
}