/* =========================================================
   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));
}

/* =========================================================
   الدفعة الثالثة — تحسينات طبقة الجوال
   ========================================================= */
@media (max-width: 860px) {
    /* iOS يكبر الصفحة تلقائياً عند تركيز أي حقل أقل من 16px — أشهر
       حقول التطبيق (بحث الكاشير وكميات الفاتورة) كانت 14px */
    input, select, textarea { font-size: 16px; }
    .search-input-field, .qty-input { font-size: 16px; }

    /* النقر السريع المتتالي (الحاسبة وزيادة الكميات) كان يفسره iOS
       تكبيراً مزدوجاً فيقفز التكبير أثناء البيع */
    button, [role="button"], .btn-qty, .act-btn { touch-action: manipulation; }

    /* أزرار التنقل الثمانية: هدف لمس موصى به وارتفاع مضبوط */
    .nav-buttons button { min-height: 44px; font-size: 14px; }
    .nav-bar { margin-bottom: 12px; }

    /* أزرار الحسم أسفل النوافذ الطويلة فوق شريط الإيماءة لا تحته */
    .modal-backdrop-layer { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .modal-box-content { max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px)); }

    /* قيم بطاقات الصندوق الخمس أصغر — عمود واحد طويل بعمود كامل */
    .cash-card .summary-value { font-size: 20px; }
}

/* ---------- 6) لوحة الأرباح على الجوال — عنقود الودجات في حزام الشريط العلوي ---------- */
@media (max-width: 640px) {
    /* الزران العائمان: بجوار بعضهما داخل الحزام العلوي المخصص (حشوة
       الشريط الجانبية 64px) بدل عمود تحتي — العمود كان يلامس أزرار
       التنقل الأولى (المحاسبة) بلا متنفس، والمكان الاحترافي للعنقود:
       طرف الحزام حيث يقرؤه الإبهام ويلمسه 44px كاملة */
    .activity-widget {
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }

    .profits-toggle {
        font-size: 17px;
    }

    /* اللوحة تملأ عرض الشاشة تقريباً وارتفاعها محكوم بمنطقة الأمان */
    .profits-backdrop {
        padding: 12px;
    }

    .profits-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
    }

    .pf-head {
        padding: 15px 16px 12px;
    }

    .pf-body {
        padding: 14px 14px 16px;
    }

    /* بطاقات المؤشرات: عمودان بدل أربعة — أرقام تُقرأ بلا تزاحم */
    .pf-kpis {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pkpi-v {
        font-size: 15.5px;
    }

    /* الرسم أطول عمودياً على الشاشة الضيقة فتُقرأ الأعمدة — النسبة
       القياسية 760×300 تفرد أفقياً هنا فتنكمش الأعمدة خصرةً */
    .pf-chart {
        aspect-ratio: 5 / 4;
    }

    /* تسميات المحور: الأسبوع يعرض أيامه السبعة كاملة، والشهر والسنة
       يعرضان التسمية كل خانة ثانية حتى لا تتلاصق */
    .pf-lab-skip {
        display: none;
    }

    /* قيم السنة فوق الأعمدة تختفي على الضيق — بطاقة التفصيل تغني */
    .pf-val-year {
        display: none;
    }

    /* شارة اليوم أرشق على الشاشة الضيقة — نصها يبقى واضحاً بلا تضخم */
    .pf-today-pill {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* قيم المحور الرأسي: درجة أصغر وانزياح داخل حشوة اللوحة — تستوعب
       القيم العريضة (مثل 100,000) على الشاشة الضيقة بلا قصّ */
    .pf-lab-y {
        font-size: 10px;
        transform: translate(-12px, -50%);
    }
}