/* =========================================================
   mobile.css — طبقة الجوال المستقلة لـ «إدارة المحل»
   =========================================================
   هذه الطبقة تعمل على الشاشات الضيقة واللمسية حصراً ولا تمس سطح
   المكتب بشيء: كل قاعدة داخل استعلام عرض مخصص، وتُحمّل بعد ملف
   الهوية الأساسي css_shop-manager.css فتتمتع بأولوية الترتيب.

   محتوياتها:
   1) شريط الأدوات العلوي (التراجع/التقدم/الربح/ملء الشاشة + زر
      النشاطات): شريط ثابت بعرض الشاشة أعلاها لا يغطيه شريط المتصفح
      أبداً، والمحتوى يبدأ تحته بحشوة محجوزة أعلى body.
   2) إصلاح فيض صفحة المحاسبة الأفقي: عناصر شبكة نقطة البيع كانت
      بلا min-width:0 فتمدد المسار بعرض جدول الفاتورة (376px+)
      ويخرج الحاسبة وزر البيع عن الشاشة — الآن الجدول يتمرر داخلياً.
   3) أهداف لمس ≥44px للأزرار الصغيرة داخل الجداول على الجوال.
   4) شريط تنقل مضغوط (3 أزرار بالصف) وزر النشاطات في طرف الشريط
      العلوي — على نفس ارتفاع أزرار التراجع/التقدم.
   5) احترام منطقة الأمان العلوية (النوتش) والسفلية (الإيماءة).
   ========================================================= */

/* ---------- 1) شريط الأدوات العلوي: التراجع/التقدم/الربح/ملء الشاشة ---------- */
@media (max-width: 860px) {
    /* شريط ثابت بعرض الشاشة أعلاها — تحت شريط المتصفح مباشرة فلا يغطيه
       أبداً (fixed; top:0)، والأزرار في وسطه وزر النشاطات في طرفه،
       والمحتوى يبدأ تحته بحشوة معتبرة في body. كان أسفل الشاشة فكان
       شريط المتصفح المنهار يغطيه عند التمرير وتمدده */
    .history-controls {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        gap: 14px;
        padding: calc(8px + env(safe-area-inset-top, 0px)) 64px 10px;
        background: rgba(11, 18, 32, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: none;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 6px 18px rgba(2, 6, 23, 0.25);
        z-index: 950;
    }

    body.theme-light .history-controls {
        background: rgba(241, 245, 249, 0.92);
    }

    .btn-history {
        width: 44px;
        height: 44px;
        font-size: 18px;
        box-shadow: var(--shadow-sm);
        background-color: var(--card);
    }

    .btn-history:active:not(:disabled) {
        transform: scale(0.94);
    }

    /* حشوة أعلى المحتوى بارتفاع الشريط — بداية الصفحة تُرى كاملة تحته */
    body {
        padding-top: calc(80px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* التنبيهات تحت الشريط العلوي لا فوقه */
    #toast-container {
        top: calc(76px + env(safe-area-inset-top, 0px));
    }
}

/* ---------- 2) إصلاح فيض المحاسبة: شبكة نقطة البيع تنكمش تحت الجدول ---------- */
@media (max-width: 860px) {
    /* min-width:auto الافتراضي لعناصر الشبكة يمنعها الانكماش تحت
       min-content لجدول الفاتورة (6 أعمدة) فيتمدد المسار كله ويخرج
       الويدجت عن الشاشة. الصفر يُلزم الجدول بالتمرير داخل غلافه */
    .pos-layout-wrapper > * {
        min-width: 0;
    }

    .pos-invoice-area,
    .pos-sidebar-container {
        min-width: 0;
    }

    /* الفاتورة نفسها: أعمدتها تتنفس داخل التمرير الأفقي الخاص بها */
    .pos-layout-wrapper .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- 3) أهداف اللمس داخل الجداول والصفوف ---------- */
@media (max-width: 700px) {
    .btn-qty {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-delete {
        min-height: 44px;
    }

    /* أزرار مجموعات الإجراءات داخل صفوف الجداول (تعديل/حذف/＋):
       أساس min-height:32px بخصوصية أعلى كان يتغلب على قاعدة .btn-qty —
       نفس الخصوصية هنا ترفعها لهدف لمس مريح */
    .row-actions-group .btn-qty,
    .row-actions-group .btn-delete {
        min-height: 44px;
        min-width: 44px;
    }

    /* أزرار حالة اليوم بكشف العامل (✓ حضور / ✗ غياب / عطلة) — أكثر
       أزرار اليوم لمسًا: هدف 44px كاملاً */
    .att-toggle.w-day-att {
        min-height: 44px;
        min-width: 44px;
        padding: 4px 14px;
    }

    .back-navigation-btn {
        min-height: 44px;
    }

    /* أزرار كمية الفاتورة: زيادة ± وحقل الكمية — لمس مريح بلا إفراط */
    .qty-controls .btn-qty,
    .qty-controls input {
        min-height: 44px;
    }

    .row-actions-group {
        gap: 8px;
    }

    /* أزرار إجراءات الصفوف الاحترافية (.act-btn): هدف لمس كامل 44px
       وأيقونة أوضح — تتعايش مع قواعد .btn-qty أعلاه؛ النظام الجديد
       لأزرار الجداول الأيقونية والقديم لمرحّلات الكمية وأشرطة الأدوات */
    :root {
        --act-size: 44px;
        --act-icon: 18px;
        --act-gap: 8px;
    }
}

/* ---------- 4) شريط تنقل مضغوط + زر النشاطات في الشريط العلوي ---------- */
@media (max-width: 640px) {
    .nav-bar {
        gap: 8px;
    }

    .nav-buttons button {
        padding: 9px 12px;
        font-size: 13px;
    }

    /* زر النشاطات: داخل حزام شريط الأدوات العلوي أسفل اليسار — على نفس
        ارتفاع أزرار التراجع/التقدم فيبدو جزءاً من الشريط */
    .activity-widget {
        top: calc(9px + env(safe-area-inset-top, 0px));
        bottom: auto;
        left: 12px;
        right: auto;
    }

    .activity-toggle {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    /* لوحة النشاطات تنسدل من الشريط العلوي تحت زرها مباشرة */
    .activity-panel {
        top: calc(70px + env(safe-area-inset-top, 0px));
        bottom: auto;
        left: 12px;
        right: auto;
        width: min(320px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: min(60vh, 520px);
        transform: translateY(-12px);
    }

    .activity-panel.open {
        transform: translateY(0);
    }

    /* تبويبات الفترة: لمس أوسع */
    .tab-button-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* رقاقة الخطة: نص «متبقٍ 14 يوماً في الخطة المجانية» كان يُقص
        بثلاث نقاط بسقف 130px العام — السقف يرتفع على الجوال الضيق */
    .nav-bar .lic-chip,
    .nav-bar .lic-chip:hover {
        max-width: 168px;
        font-size: 10.5px;
    }
}

/* ---------- 5) منطقة الأمان السفلية (أجهزة الإيماءة) ----------
   الشريط العلوي يحترم منطقة النوتش من داخله (padding)، وهنا مواضع
   العناصر التي تطفو أسفل الشاشة */
.watermark {
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
}