/*
 * طبقة الاستجابة الموحّدة — تُحمّل بعد Bootstrap حتى تغلب قواعده.
 *
 * الطبقات:
 *   ≤575.98   هاتف صغير — مودالات غنية بكامل الشاشة
 *   ≤767.98   هاتف — تكديس، أهداف لمس، سلة سفليّة، مسافة سفلية
 *   ≤991.98   هاتف + تابلت — جداول، أهداف لمس، درج الدفع، مطبخ مضغوط
 *   768–991   تابلت فقط — عمودان للفلاتر، قياسات أوضح
 *   hover:none أجهزة اللمس فقط — بلا blur (لا تغيّر تخطيط العرض)
 */

@media (max-width: 767.98px) {
    /* ===== 1) منع تمدّد الصفحة أفقياً ===== */
    html,
    body {
        max-width: 100%;
    }

    body:not(.pos-page) img,
    body:not(.pos-page) video,
    body:not(.pos-page) canvas {
        max-width: 100%;
        height: auto;
    }

    /* ===== 2) الجداول: تمرير أفقي بدل كسر الصفحة ===== */
    /* المغلّفة بـ table-responsive يكفيها تفعيل التمرير باللمس */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        width: 100%;
    }

    /* الجداول غير المغلّفة: نحوّل الجدول نفسه لحاوية تمرير */
    .bysk-mobile-table-scroll {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0.5rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }

    .bysk-mobile-table-scroll > table {
        margin-bottom: 0;
    }

    .table th,
    .table td {
        white-space: nowrap;
    }

    /* أعمدة النصوص الطويلة تبقى قابلة للف حتى لا يصير الجدول عريض بلا داعي */
    .table td.bysk-mobile-wrap,
    .table td .delivery-order-items,
    .table td .kitchen-order-line__name {
        white-space: normal;
    }

    /* ===== 3) المودالات: شبه كامل الشاشة مع جسم قابل للتمرير ===== */
    .modal-dialog:not(.modal-fullscreen) {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-dialog:not(.modal-fullscreen) .modal-content {
        border-radius: 0.75rem;
        max-height: calc(100dvh - 1rem);
    }

    .modal-dialog:not(.modal-fullscreen) .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* أزرار المودال تتكدّس بعرض كامل حتى تكون دايماً قابلة للضغط */
    .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .modal-footer > .btn {
        width: 100%;
        margin: 0;
        min-height: 2.75rem;
    }

    /* ===== 4) مساحات أقل على الموبايل ===== */
    .container,
    .container-fluid {
        padding-inline: 0.5rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card-header,
    .card-footer {
        padding: 0.5rem 0.75rem;
    }

    /* ===== 5) أهداف لمس أكبر لأزرار النماذج ===== */
    .form-control,
    .form-select {
        min-height: 2.6rem;
        font-size: 1rem; /* يمنع iOS من تكبير الصفحة تلقائياً عند التركيز */
    }

    /* أزرار الإرسال/الحفظ الأساسية بعرض كامل — بدون لمس أزرار المطبخ المدمجة */
    form:not(.bysk-mobile-keep-inline) > .btn[type="submit"],
    form:not(.bysk-mobile-keep-inline) > div > .btn[type="submit"],
    .bysk-mobile-block-btn {
        width: 100%;
        min-height: 2.75rem;
    }

    /* ===== 6) أشرطة الإجراءات تتكدّس عمودياً ===== */
    .bysk-mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .bysk-mobile-stack > * {
        width: 100%;
    }

    /* ===== 7) الشريط العلوي: يبقى صفاً واحداً قابلاً للتمرير ===== */
    nav.bysk-topnav .app-topnav-cluster,
    nav.bysk-topnav .desk-nav-cluster {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    nav.bysk-topnav .app-topnav-cluster::-webkit-scrollbar,
    nav.bysk-topnav .desk-nav-cluster::-webkit-scrollbar {
        display: none;
    }

    /* ===== 8) نقطة البيع: الشريط العلوي صف واحد ينزلق أفقياً ===== */
    /* الشبكة كانت تحجز للأدوات عموداً بعرض 130px ومحتواها 333px فتطلع فوق أزرار نوع الطلب،
       وحلّ الصفّين كان يأكل ~40px من طول الشاشة. صف واحد بلا لفّ مع تمرير أفقي يحلّ الاثنين. */
    body.pos-page #posTopToolbarWrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-padding-inline: 0.35rem;
    }

    body.pos-page #posTopToolbarWrap > * {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* نوع الطلب أولاً (يمين الشاشة في RTL) لأنه الأكثر استخداماً */
    body.pos-page #posTopToolbarWrap #deliveryTypeWrap {
        order: 1;
    }

    /* التمرير صار على الشريط كله — تمرير داخلي هنا يقطع السحب في منتصفه */
    body.pos-page #posTopToolbarWrap .pos-toolbar-actions {
        order: 2;
        overflow: visible;
    }

    body.pos-page #posTopToolbarWrap #deliveryTypeButtons {
        overflow: visible;
    }

    /* ===== 8ب) نقطة البيع: أهداف لمس أكبر + بطاقات منتج أقصر ===== */
    /* القياس على 390px: أزرار الشريط 31px وأزرار نوع الطلب 33px وتابات الأقسام 35px — أصغر من حد اللمس المريح */
    body.pos-page #posPageShell #posTopToolbarWrap .pos-toolbar-actions .btn,
    body.pos-page #posTopToolbarWrap #deliveryTypeButtons .js-delivery-type-btn,
    body.pos-page #posCategoryTabsWrapMobile.pos-category-mobile-tabs .nav-link {
        min-height: 2.75rem;
    }

    /* شريط الأقسام والأدوات: صف واحد ينزلق، والعناصر لا تتقلّص */
    body.pos-page #posCategoryTabsWrapMobile.pos-category-mobile-tabs,
    body.pos-page #posTopToolbarWrap .pos-toolbar-actions {
        scroll-padding-inline: 0.25rem;
        scrollbar-width: none;
    }

    body.pos-page #posCategoryTabsWrapMobile.pos-category-mobile-tabs .nav-item,
    body.pos-page #posCategoryTabsWrapMobile.pos-category-mobile-tabs .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* صورة المنتج مربّعة على الديسكتوب؛ على الموبايل تأكل الطول فتظهر صفّان فقط */
    body.pos-page .pos-product-card .pos-product-media-wrap {
        aspect-ratio: 4 / 3;
    }

    /* ===== 8ج) نقطة البيع: السلة تصير درجاً سفلياً بدل بلوك ثابت فوق المنتجات ===== */
    /* الأصناف تنتقل داخل الدرج عبر React، فالبلوك الثابت يُخفى وشريط السلة السفلي يعرض العدد والإجمالي */
    body.pos-page.pos-phone-cart-bar .pos-order-details-top-bar {
        display: none !important;
    }

    /* وضع الصالة يمنح البلوك flex: 1 1 auto داخل عمود المنتجات — داخل الدرج يجب أن يبقى بطوله الطبيعي */
    body.pos-page #posTouchRoot .pos-order-details-top-bar--in-sheet {
        position: static;
        border-bottom: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
        display: block;
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
    }

    body.pos-page #posTouchRoot .pos-order-details-top-bar--in-sheet .pos-order-details-panel,
    body.pos-page #posTouchRoot .pos-order-details-top-bar--in-sheet .pos-order-details-panel > .card {
        display: block;
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
    }

    body.pos-page #posTouchRoot .pos-order-details-top-bar--in-sheet .pos-order-details-panel .card-body {
        overflow: visible;
    }

    body.pos-page .pos-order-details-top-bar--in-sheet .pos-order-details-panel .card-header {
        padding-top: 0.55rem !important;
        padding-bottom: 0.55rem !important;
        font-size: 0.92rem !important;
    }

    body.pos-page .pos-order-details-top-bar--in-sheet .pos-order-details-panel .card-body {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    body.pos-page .pos-order-details-top-bar--in-sheet #orderDetailsList {
        max-height: none !important;
    }

    /* آخر صف منتجات لا يختفي تحت شريط السلة الثابت */
    body.pos-page.pos-phone-cart-bar .pos-products-scroll {
        padding-bottom: 5.5rem;
    }

    /* ===== 9) شاشة المطبخ: أهداف لمس أكبر + شريط محطات ينزلق ===== */
    body .kitchen-lists-row .btn-sm,
    body .kitchen-order-card .btn,
    body .kitchen-station-bar .btn-sm,
    body .kitchen-screen-11 .kitchen-top-bar .btn-sm,
    body .kitchen-screen-11 #kitchenTopSummary .btn-sm {
        min-height: 2.6rem;
    }

    body .kitchen-station-bar .kitchen-station-pills {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body .kitchen-station-bar .kitchen-station-pills::-webkit-scrollbar {
        display: none;
    }

    body .kitchen-station-bar .kitchen-station-pill {
        flex: 0 0 auto;
        min-height: 2.6rem;
        padding-inline: 1rem;
    }
}

/* ===== 10) الهواتف فقط: المودالات الغنية بالمحتوى تفتح بكامل الشاشة ===== */
/* مودالات التأكيد الصغيرة تبقى صندوقاً في الوسط — تحويلها لكامل الشاشة يربك المستخدم */
@media (max-width: 575.98px) {
    .modal-dialog.modal-lg:not(.modal-fullscreen),
    .modal-dialog.modal-xl:not(.modal-fullscreen),
    .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
    }

    /* التوسيط العمودي مع ارتفاع كامل يقصّ الرأس والذيل معاً إذا زاد المحتوى عن الشاشة،
       فيصير زر الإغلاق (✕) خارج الشاشة. التمدّد يُبقي الرأس والذيل ظاهرين والجسم يسكرول. */
    .modal-dialog.modal-dialog-centered.modal-lg:not(.modal-fullscreen),
    .modal-dialog.modal-dialog-centered.modal-xl:not(.modal-fullscreen),
    .modal-dialog.modal-dialog-centered.modal-dialog-scrollable:not(.modal-fullscreen) {
        align-items: stretch;
    }

    .modal-dialog.modal-lg:not(.modal-fullscreen) > .modal-content,
    .modal-dialog.modal-xl:not(.modal-fullscreen) > .modal-content,
    .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) > .modal-content {
        min-height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        /* bysk-glass يفرض حدوداً ونصف قطر بـ !important — الزوايا المدوّرة على حافة الشاشة تبدو خطأً */
        border: 0 !important;
        border-radius: 0 !important;
    }

    .modal-dialog.modal-lg:not(.modal-fullscreen) > .modal-content > .modal-header,
    .modal-dialog.modal-xl:not(.modal-fullscreen) > .modal-content > .modal-header,
    .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) > .modal-content > .modal-header,
    .modal-dialog.modal-lg:not(.modal-fullscreen) > .modal-content > .modal-footer,
    .modal-dialog.modal-xl:not(.modal-fullscreen) > .modal-content > .modal-footer,
    .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) > .modal-content > .modal-footer {
        flex: 0 0 auto;
    }

    .modal-dialog.modal-lg:not(.modal-fullscreen) > .modal-content > .modal-body,
    .modal-dialog.modal-xl:not(.modal-fullscreen) > .modal-content > .modal-body,
    .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) > .modal-content > .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-dialog.modal-lg:not(.modal-fullscreen) > .modal-content > .modal-footer,
    .modal-dialog.modal-xl:not(.modal-fullscreen) > .modal-content > .modal-footer,
    .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) > .modal-content > .modal-footer {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== 11) درج «الطلب والدفع»: تمرير واحد + زر الإتمام ثابت بالأسفل ===== */
/* نفس نطاق الدرج (‎≤991.98px) ليشمل التابليت والهاتف بالوضع الأفقي.
   القياس على 375×540 (لوحة المفاتيح مفتوحة): قسم الدفع 456px بـ flex-shrink: 0،
   فتقلّصت الحقول لنافذة 22px وصار زر «إتمام البيع» على حدّ الشاشة تماماً. */
@media (max-width: 991.98px) {
    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open #posPaymentCard.pos-sidebar-wrapper {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* مساحة لزرّي إتمام + غير مدفوع المكدّسين فوق الشريط السفلي */
        padding-bottom: calc(9.75rem + var(--bysk-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px));
    }

    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open.pos-checkout-actions-top #posPaymentCard.pos-sidebar-wrapper,
    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open.pos-checkout-mobile-bar-open #posPaymentCard.pos-sidebar-wrapper {
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }

    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open #posPaymentCard .pos-mobile-checkout-header {
        position: sticky;
        top: 0;
        z-index: 12;
        background: #fff;
    }

    /* ‎!important لأن وضع التوصيل يفرض flex: 1 1 auto !important على قسم الحقول */
    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open #posPaymentCard #posCheckoutScrollBody,
    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open #posPaymentCard #posCheckoutFixedFooter {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open #posPaymentCard #posCheckoutFixedFooter {
        box-shadow: none;
        border-top: 0 !important;
        padding-bottom: 0.7rem !important;
    }

    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open #posPaymentCard #posCheckoutStickyFooter {
        position: fixed;
        inset-inline: 0;
        bottom: var(--bysk-bottom-inset, 0px);
        z-index: 2510;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.14);
        padding: 0.6rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0px) + var(--bysk-bottom-inset, 0px));
    }

    /* الأزرار تحت الهيدر: ألغي fixed السفلي بالكامل */
    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open #posPaymentCard #posCheckoutStickyFooter.pos-checkout-actions--sheet-top,
    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open.pos-checkout-actions-top #posPaymentCard #posCheckoutStickyFooter {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 28 !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1) !important;
        border-top: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 0.65rem 0.85rem 0.7rem !important;
        transform: none !important;
    }

    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open.pos-checkout-actions-top #posPaymentCard.pos-sidebar-wrapper {
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }

    /* ===== 12) الأزرار العائمة تختفي فوق الطبقات كاملة الشاشة ===== */
    /* «⚙️ مظهر» ثابت أسفل اليسار بـ z-index 2850، فكان يغطّي زر «تطبيق» في مودال الإضافات
       (القياس على 390px: يغطّي 74px من أصل 203px) ويبدو للمستخدم كأنه بديله. */
    body.pos-page.modal-open:not(.pos-layout-tuner-open) #posLayoutTunerFab,
    body.pos-page.modal-open:not(.pos-layout-tuner-open) #posElPickModeFab,
    body.pos-page.pos-mobile-checkout-open #posLayoutTunerFab,
    body.pos-page.pos-mobile-checkout-open #posElPickModeFab,
    body.pos-page.modal-open #posMobileJumpToCheckout,
    body.pos-page.pos-mobile-checkout-open #posMobileJumpToCheckout {
        display: none !important;
    }

    /* ===== 12ب) شريط أدوات المتصفح السفلي: الأشرطة الثابتة ترتفع فوقه ===== */
    /* كروم على الآيفون (وضع عمودي) يعرض شريط رجوع/تبويبات أسفل الشاشة، و‎bottom: 0‎ يقع تحته
       فيختفي شريط السلة وزر «إتمام البيع». ‎--bysk-bottom-inset‎ يقيسه من visualViewport. */
    body.pos-page #posPhoneCartBar {
        bottom: var(--bysk-bottom-inset, 0px) !important;
    }

    body.pos-page.pos-mobile-checkout-ready.pos-mobile-checkout-open:not(.pos-checkout-actions-top) #posPaymentCard #posCheckoutStickyFooter {
        bottom: var(--bysk-bottom-inset, 0px) !important;
    }

    body.pos-page.pos-phone-cart-bar .pos-products-scroll {
        padding-bottom: calc(6.25rem + var(--bysk-bottom-inset, 0px));
    }

    /* الطول = المرئي فعلياً، وإلا سكرولت الصفحة فغاب الهيدر تحت شريط العنوان */
    body.pos-page {
        min-height: var(--bysk-vvh, 100svh) !important;
    }

    body.pos-page #posTouchRoot.pos-fit-viewport {
        min-height: calc(var(--bysk-vvh, 100svh) - var(--pos-mobile-chrome, 3.25rem)) !important;
        height: calc(var(--bysk-vvh, 100svh) - var(--pos-mobile-chrome, 3.25rem)) !important;
    }

    body.pos-page.pos-mobile-checkout-open #posPaymentCard.pos-sidebar-wrapper {
        height: var(--bysk-vvh, 100svh) !important;
        max-height: var(--bysk-vvh, 100svh) !important;
    }

    /* داخل /desk: الإطار أقصر من الشاشة — لا تستخدم ‎vvh/svh‎ للجهاز */
    html.desk-iframe-child body.pos-page,
    body.desk-embed-body.pos-page {
        min-height: 100% !important;
        height: 100% !important;
    }

    html.desk-iframe-child body.pos-page #posTouchRoot.pos-fit-viewport,
    body.desk-embed-body.pos-page #posTouchRoot.pos-fit-viewport {
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
    }

    html.desk-iframe-child body.pos-page.pos-mobile-checkout-open #posPaymentCard.pos-sidebar-wrapper,
    body.desk-embed-body.pos-page.pos-mobile-checkout-open #posPaymentCard.pos-sidebar-wrapper {
        height: 100% !important;
        max-height: 100% !important;
    }
}

/* فوتر إضافات بنمط الموبايل داخل /desk — هاتف فقط (مو تابلت/سطح مكتب POS) */
@media (max-width: 767.98px) {
    html.desk-iframe-child body.pos-page #itemExtrasModal .modal-footer.pos-extras-modal-footer,
    body.desk-embed-body.pos-page #itemExtrasModal .modal-footer.pos-extras-modal-footer {
        position: fixed !important;
        inset-inline: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2310 !important;
        flex-direction: unset !important;
        display: grid !important;
        grid-template-columns: 1.55fr 1fr !important;
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px) + var(--bysk-bottom-inset, 0px)) !important;
    }

    html.desk-iframe-child body.pos-page #itemExtrasModal .modal-body,
    body.desk-embed-body.pos-page #itemExtrasModal .modal-body {
        padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px) + var(--bysk-bottom-inset, 0px)) !important;
    }
}

/* ===== 13) لوحة الرسم مثبّتة اللون + بلا وميض لمس على أجهزة اللمس ===== */
/* لون ثابت على html: إذا تأخّر رسم الجسم لحظة (تحديث DOM كبير) تظهر لوحة المتصفح، وعلى
   الآيفون بالوضع الداكن لونها أسود. لا نلمس خلفية body حتى يبقى تدرّج الثيم كما هو. */
html {
    background-color: var(--bysk-ambient-b, #f1f5f9);
}

/* وميض اللمس الرمادي على كل عنصر (iOS/أندرويد) — لدينا حالة :active خاصة أصلاً */
* {
    -webkit-tap-highlight-color: transparent !important;
}

@media (hover: none) {
    /* منع قائمة الضغط الطويل على الأزرار فقط — النصوص والأرقام تبقى قابلة للنسخ */
    button,
    .btn,
    [role='button'],
    [role='tab'] {
        -webkit-touch-callout: none;
    }
}

/* ===== 13ب) تثبيت رسم الطبقات المتحرّكة على أجهزة اللمس ===== */
/* backface-visibility وحدها — بلا transform — تُثبّت الرسم أثناء الحركة على WebKit وأندرويد
   دون أن يصير العنصر حاوية مرجعية للعناصر الثابتة جواه (وهذا ما يكسر أشرطة position: fixed). */
@media (hover: none) {
    .modal-content,
    #posPaymentCard,
    #posPhoneCartBar,
    .st-handover-bar {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ===== 14) أجهزة اللمس فقط: بلا blur خلف الطبقات ===== */
/* WebKit يرسم إطارات سوداء لحظية مع backdrop-filter + عناصر ثابتة.
   النطاق: hover:none فقط — لا يغيّر تخطيط شاشات اللمس الكبيرة. */
@media (hover: none) {
    body.bysk-glass .modal-content,
    body.bysk-glass .dropdown-menu,
    body.bysk-glass nav.bysk-topnav.navbar,
    body.bysk-glass nav.dress-topnav.navbar,
    body.bysk-glass nav.dress-desk-nav.navbar,
    body.bysk-glass .app-mobile-nav-offcanvas.offcanvas,
    body.bysk-glass .offcanvas.text-bg-dark,
    body.bysk-glass .pos-kb-dock__panel,
    .bysk-glass-modal-panel,
    .bysk-ui-confirm-backdrop,
    .kitchen-gift-confirm-backdrop,
    .bysk-sr-overlay,
    #posSectionInventoryLockOverlay,
    .pos-product-card .pos-product-qty-overlay,
    .st-handover-bar,
    .products-hub-page .ph-sticky,
    .daily-dash-action-bar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.bysk-glass .modal-content,
    body.bysk-glass .dropdown-menu,
    .bysk-glass-modal-panel {
        background: #fff !important;
    }

    body.bysk-glass nav.bysk-topnav.navbar,
    body.bysk-glass nav.dress-topnav.navbar,
    body.bysk-glass nav.dress-desk-nav.navbar,
    body.bysk-glass .app-mobile-nav-offcanvas.offcanvas,
    body.bysk-glass .offcanvas.text-bg-dark {
        background: #0f172a !important;
    }
}

/* ===== 15) هاتف: شريط التنقّل + محتوى الصفحات + مسافة سفلية ===== */
@media (max-width: 767.98px) {
    nav.bysk-topnav .btn,
    nav.bysk-topnav .desk-shell-mobile-menu-btn,
    nav.bysk-topnav .app-topnav-mobile-menu-btn,
    nav.bysk-topnav .bysk-fullscreen-toggle-btn,
    nav.bysk-topnav a.btn-danger {
        min-height: 2.75rem;
    }

    nav.bysk-topnav .desk-nav-cluster,
    nav.bysk-topnav .app-topnav-cluster {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    nav.bysk-topnav .desk-nav-cluster.desk-shell-desktop-nav {
        overflow: visible !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .app-topnav-mobile-quick {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
    }

    .app-topnav-mobile-quick .desk-nav-quick-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding-inline: 0.55rem;
    }

    .app-mobile-nav-offcanvas .offcanvas-body {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        overscroll-behavior: contain;
    }

    .app-mobile-nav-section {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.55rem 0 0.75rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    }

    .app-mobile-nav-section:last-of-type {
        border-bottom: 0;
    }

    .app-mobile-nav-section__title {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        color: #94a3b8;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        padding-inline: 0.25rem;
        margin-bottom: 0.15rem;
    }

    .app-mobile-nav-section__links {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .app-mobile-nav-link {
        display: block;
        width: 100%;
        min-height: 2.85rem;
        padding: 0.7rem 0.9rem;
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(148, 163, 184, 0.22);
        color: #f8fafc !important;
        font-weight: 700;
        font-size: 0.95rem;
        text-decoration: none !important;
        line-height: 1.35;
    }

    .app-mobile-nav-link:hover,
    .app-mobile-nav-link:focus {
        background: rgba(37, 99, 235, 0.28);
        border-color: rgba(96, 165, 250, 0.55);
        color: #fff !important;
    }

    :root {
        --bysk-mobile-bottom-clearance: calc(
            1rem
            + env(safe-area-inset-bottom, 0px)
            + max(var(--bysk-bottom-inset, 0px), 4.75rem)
        );
    }

    html.desk-iframe-child body > main.container-fluid,
    body.desk-embed-body > main.container-fluid,
    body:not(.pos-page) > main.container-fluid,
    body:not(.pos-page) > main.container {
        padding-inline: 0.55rem !important;
        padding-top: 0.55rem !important;
        padding-bottom: var(--bysk-mobile-bottom-clearance) !important;
    }

    body.pos-page > main.container-fluid,
    body.pos-page > main.container,
    html.desk-iframe-child body.pos-page > main.container-fluid,
    body.desk-embed-body.pos-page > main.container-fluid {
        padding-bottom: 0.5rem !important;
    }

    body > main.max-w-6xl,
    body > main.max-w-5xl,
    body > main.bysk-report-main,
    .bysk-mobile-page-end-pad {
        padding-bottom: var(--bysk-mobile-bottom-clearance) !important;
    }

    .kitchen-screen-11 {
        padding-bottom: var(--bysk-mobile-bottom-clearance) !important;
    }

    .cd-dashboard-card,
    main .card:last-child {
        margin-bottom: 0.25rem;
    }

    /* صفوف الفلاتر تتكدّس بعرض كامل على الهاتف فقط */
    main .row.g-2.align-items-end > [class*="col-"],
    main form.row.g-2 > [class*="col-"],
    main form.row.g-3 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    main .btn-group {
        flex-wrap: wrap;
        width: 100%;
    }

    main .btn-group > .btn {
        flex: 1 1 auto;
        min-height: 2.6rem;
    }

    main .scr-tabs,
    main .hh-tabs,
    main .ppr-tabs,
    main .rfm-tabs,
    main [role="group"][aria-label*="فترة"],
    main [role="group"][aria-label*="فلتر"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.4rem;
        padding-bottom: 0.15rem;
        scrollbar-width: none;
    }

    main .scr-tabs::-webkit-scrollbar,
    main .hh-tabs::-webkit-scrollbar,
    main .ppr-tabs::-webkit-scrollbar,
    main .rfm-tabs::-webkit-scrollbar {
        display: none;
    }

    main .scr-tabs .btn,
    main .hh-tabs .btn,
    main .ppr-tabs .btn,
    main .rfm-tabs .btn,
    main [role="group"][aria-label*="فترة"] > a,
    main [role="group"][aria-label*="فلتر"] > a {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 2.5rem;
    }

    main .row.g-3 > [class*="col-6"],
    main .row.g-2 > [class*="col-6"] {
        margin-bottom: 0;
    }

    main h4,
    main .h4 {
        font-size: 1.1rem;
        line-height: 1.35;
    }

    .table td:not([class*="text-"]),
    .bysk-mobile-table-scroll td {
        max-width: 12rem;
    }

    .table td.bysk-mobile-wrap,
    .bysk-mobile-table-scroll td.bysk-mobile-wrap,
    .table td:first-child,
    .bysk-mobile-table-scroll td:first-child {
        white-space: normal;
        word-break: break-word;
    }

    body:not(.modal-open) > .offcanvas-backdrop,
    body:not(.modal-open) > .modal-backdrop {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .offcanvas-backdrop.showing,
    .offcanvas-backdrop.show {
        transition: opacity 0.15s linear;
    }

    .bysk-fs-reenter-chip {
        top: calc(0.45rem + env(safe-area-inset-top, 0px));
        inset-inline-end: calc(0.45rem + env(safe-area-inset-right, 0px));
        z-index: 1040;
        max-width: 40vw;
    }

    .app-mobile-nav-offcanvas.offcanvas {
        max-width: min(100vw, 22rem);
    }

    .app-mobile-nav-offcanvas .offcanvas-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0f172a;
    }

    .app-mobile-nav-offcanvas .offcanvas-body {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px) + var(--bysk-bottom-inset, 0px));
        overscroll-behavior: contain;
    }

    .st-handover-bar,
    .daily-dash-action-bar,
    .products-hub-page .ph-sticky {
        bottom: max(0px, var(--bysk-bottom-inset, 0px)) !important;
        padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    }

    /* مطبخ الهاتف: خطوط أوضح بدل قياسات الكiosk الكثيفة */
    .kitchen-screen-11 .kitchen-lists-row .kitchen-grid-table thead th {
        font-size: 0.72rem;
        padding: 0.4rem 0.35rem;
    }

    .kitchen-screen-11 .kitchen-lists-row .kitchen-grid-table tbody td {
        font-size: 0.78rem;
        padding: 0.4rem 0.35rem;
    }

    .kitchen-screen-11 .kitchen-lists-row .kitchen-grid-table .btn-sm {
        font-size: 0.72rem;
        min-height: 2.4rem;
        padding: 0.28rem 0.45rem;
    }

    .kitchen-screen-11 .kitchen-lists-row .kitchen-grid-table .badge {
        font-size: 0.68rem;
        padding: 0.22em 0.4em;
    }

    .kitchen-screen-11 .kitchen-lists-row .kitchen-time-line {
        font-size: 0.7rem;
    }

    /* تسجيل الدخول: لوحة المفاتيح لا تبتلع الحقول */
    body.login-vkb-page.login-vkb-pad main.container,
    body.login-vkb-page.login-vkb-pad main.container-fluid {
        padding-bottom: min(52vh, 22rem) !important;
    }

    #loginVkbPanel .login-vkb-key {
        min-height: 2.75rem;
        --bs-btn-font-size: 1.2rem;
        font-size: var(--bs-btn-font-size);
    }

    #loginVkbPanel .login-vkb-key--glyph {
        --bs-btn-font-size: 1.35rem;
        font-size: 1.35rem;
    }

    #loginVirtualKeyboard {
        padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== 16) هاتف + تابلت (≤991.98): جداول، أهداف لمس، مسافات ===== */
@media (max-width: 991.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    body:not(.pos-page) img,
    body:not(.pos-page) video,
    body:not(.pos-page) canvas {
        max-width: 100%;
        height: auto;
    }

    .table-responsive,
    .bysk-mobile-table-scroll {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        width: 100%;
    }

    .bysk-mobile-table-scroll {
        display: block;
        border-radius: 0.5rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }

    .bysk-mobile-table-scroll > table {
        margin-bottom: 0;
    }

    .form-control,
    .form-select {
        min-height: 2.5rem;
        font-size: 1rem;
    }

    .modal-dialog:not(.modal-fullscreen) {
        margin: 0.65rem auto;
        max-width: min(100% - 1.3rem, 40rem);
    }

    .modal-dialog:not(.modal-fullscreen) .modal-content {
        max-height: calc(100dvh - 1.3rem);
    }

    .modal-dialog:not(.modal-fullscreen) .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    nav.bysk-topnav .btn,
    nav.bysk-topnav .desk-nav-quick-btn,
    nav.bysk-topnav .desk-nav-dropdown-toggle {
        min-height: 2.55rem;
    }

    nav.bysk-topnav .desk-nav-cluster,
    nav.bysk-topnav .app-topnav-cluster {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    :root {
        --bysk-tablet-bottom-clearance: calc(
            0.75rem
            + env(safe-area-inset-bottom, 0px)
            + max(var(--bysk-bottom-inset, 0px), 1.25rem)
        );
    }

    /* الهوامش الأفقية فقط هنا — المسافة السفلية للهواتف في ≤767 وللتابلت في 768–991 */
    body:not(.pos-page) > main.container-fluid,
    body:not(.pos-page) > main.container {
        padding-inline: clamp(0.55rem, 1.6vw, 1.15rem) !important;
    }

    body.pos-page > main.container-fluid,
    body.pos-page > main.container {
        padding-bottom: 0.5rem !important;
    }

    body .kitchen-station-bar .kitchen-station-pills {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body .kitchen-station-bar .kitchen-station-pills::-webkit-scrollbar {
        display: none;
    }

    body .kitchen-station-bar .kitchen-station-pill {
        flex: 0 0 auto;
        min-height: 2.5rem;
        padding-inline: 0.9rem;
    }

    body .kitchen-lists-row .btn-sm,
    body .kitchen-order-card .btn,
    body .kitchen-screen-11 .kitchen-top-bar .btn-sm {
        min-height: 2.4rem;
    }

    /* مشتريات: الشريط الجانبي فوق المحتوى بعرض كامل تحت lg */
    .row > aside[class*="col-lg-"] {
        margin-bottom: 0.75rem;
    }

    /* تقارير: تبويبات تنزلق */
    main .scr-tabs,
    main .hh-tabs,
    main .ppr-tabs,
    main .rfm-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.4rem;
        scrollbar-width: none;
    }

    main .scr-tabs::-webkit-scrollbar,
    main .hh-tabs::-webkit-scrollbar,
    main .ppr-tabs::-webkit-scrollbar,
    main .rfm-tabs::-webkit-scrollbar {
        display: none;
    }

    /* لوحة ضبط المقاسات لا تضيق أكثر من اللازم على التابلت */
    #posLayoutTunerPanel {
        max-width: min(28rem, 92vw) !important;
    }

    /* نقطة البيع: شريط علوي ينزلق على التابلت أيضاً (الدفع ورقة منفصلة) */
    body.pos-page #posTopToolbarWrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-padding-inline: 0.35rem;
    }

    body.pos-page #posTopToolbarWrap::-webkit-scrollbar {
        display: none;
    }

    body.pos-page #posTopToolbarWrap > * {
        flex: 0 0 auto;
        min-width: 0;
    }

    body.pos-page #posCategoryTabsWrapMobile.pos-category-mobile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.pos-page #posCategoryTabsWrapMobile.pos-category-mobile-tabs .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 2.55rem;
    }
}

/* ===== 17) تابلت فقط (768–991): عمودان بدل تكديس كامل ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    body:not(.pos-page) > main.container-fluid,
    body:not(.pos-page) > main.container,
    body > main.max-w-6xl,
    body > main.max-w-5xl,
    .bysk-mobile-page-end-pad {
        padding-bottom: max(1rem, var(--bysk-tablet-bottom-clearance)) !important;
    }

    .kitchen-screen-11 {
        padding-bottom: var(--bysk-tablet-bottom-clearance) !important;
    }

    main .row.g-2.align-items-end > [class*="col-"],
    main form.row.g-2 > [class*="col-"],
    main form.row.g-3 > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    main .row.g-2.align-items-end > [class*="col-12"],
    main form.row.g-2 > [class*="col-12"],
    main form.row.g-3 > [class*="col-12"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .modal-footer > .btn {
        min-height: 2.55rem;
    }

    /* نقطة البيع: 3 منتجات في الصف على التابلت العمودي (عمود المنتجات بعرض كامل) */
    body.pos-page .pos-products-col .pos-product-col {
        width: 33.333333% !important;
    }

    .kitchen-screen-11 .kitchen-order-item__name,
    .kitchen-screen-11 .kitchen-order-line__name {
        font-size: 0.95rem;
    }

    .kitchen-screen-11 .kitchen-lists-row .kitchen-grid-table thead th {
        font-size: 0.7rem;
    }

    .kitchen-screen-11 .kitchen-lists-row .kitchen-grid-table tbody td {
        font-size: 0.78rem;
    }

    body.login-vkb-page.login-vkb-pad main.container,
    body.login-vkb-page.login-vkb-pad main.container-fluid {
        padding-bottom: min(48vh, 26rem) !important;
    }

    #loginVirtualKeyboard > #loginVkbPanel {
        max-width: min(52rem, 100%);
        margin-inline: auto;
    }
}

/* ===== 18) شاشات عريضة صغيرة (لابتوب 992–1199): هوامش أوضح ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body:not(.pos-page):not(.desk-embed-body) > main.container-fluid {
        padding-inline: 1rem !important;
    }

    .kitchen-screen-11 .kitchen-lists-row .kitchen-grid-table thead th {
        font-size: 0.68rem;
    }

    .kitchen-screen-11 .kitchen-lists-row .kitchen-grid-table tbody td {
        font-size: 0.74rem;
    }
}