/**
 * vision_responsive.css — طبقة استجابة احترافية (Enterprise mobile patterns)
 * • تخطيطات تنفيذية: عمود واحد + عرض كامل
 * • جداول → بطاقات (vm-stack-table + data-label)
 * • شبكات → عمود واحد على الجوال
 *
 * يُحمَّل بعد vision_mobile.css — لا يغيّر Desktop
 */

/* ═══════════════════════════════════════════════════════════════
   ROOT — منع الفيض الأفقي + قفل العرض (جوال ≤768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* حاويات الصفحة الرئيسية */
    .main,
    .sidebar,
    .layout,
    .container,
    .page-wrap,
    .la-shell,
    .la-main,
    .la-outer-wrap,
    .la-ops-wrap,
    .la-tickets-wrap,
    .la-exec-wrap,
    .la-cs-main,
    .ao-wrap,
    .ad-wrap,
    .au-wrap,
    .main-grid,
    .main-col,
    .side-col,
    .panel,
    .panel-card,
    .tab-panel,
    .card,
    .cust-card,
    .la-card,
    .vs-staff-shell,
    .vs-staff-body,
    .ops-command-bar,
    .ops-kpi-grid,
    .ops-panel-head,
    .smart-search-wrap,
    .smart-alerts-scroll,
    .tabs-nav,
    #adminSvcWidgets,
    .dataTables_wrapper,
    .tbl-wrap {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.vision-body-pad {
        padding: 12px max(12px, env(safe-area-inset-right)) 28px max(12px, env(safe-area-inset-left)) !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body.vision-body-pad .container,
    body.vision-body-pad .container.ops-admin-wrap {
        max-width: 100% !important;
        width: 100% !important;
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        overflow-x: hidden !important;
    }

    .smart-search-input,
    .smart-search-wrap,
    .ops-command-bar input,
    .search-bar input,
    .search-bar select {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .smart-search-wrap {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .toast {
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
    }

    .smart-search-results {
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
    }

    table,
    .plain-table,
    canvas,
    pre,
    iframe {
        max-width: 100% !important;
    }

    /* ── إخفاء «الإشعارات الحية» المكررة — الجرس في الترويسة يكفي ── */
    .layout > .sidebar,
    .layout > .sidebar:has(#notifList),
    .layout > .sidebar:has(.notif-list),
    .vision-exec-dashboard .sidebar {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Swipeable tabs — تمرير أفقي بدون انضغاط (مركز العمليات وغيره)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tabs-nav,
    nav.tabs-nav,
    nav[role="tablist"].tabs-nav,
    .nav-pills,
    .action-buttons-row,
    .cs-tabs-nav,
    .vos-tabs,
    .wh-dispatch-tabs,
    .la-ops-wrap .tabs-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 10px !important;
        padding-bottom: 8px !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity;
        scrollbar-width: thin !important;
        scrollbar-color: #94a3b8 #f1f5f9 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .tabs-nav::-webkit-scrollbar,
    .cs-tabs-nav::-webkit-scrollbar,
    .vos-tabs::-webkit-scrollbar,
    .wh-dispatch-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: block !important;
        height: 3px !important;
        width: auto !important;
    }

    .tabs-nav::-webkit-scrollbar-track,
    .cs-tabs-nav::-webkit-scrollbar-track,
    .vos-tabs::-webkit-scrollbar-track,
    .wh-dispatch-tabs::-webkit-scrollbar-track,
    .nav-pills::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 99px;
    }

    .tabs-nav::-webkit-scrollbar-thumb,
    .cs-tabs-nav::-webkit-scrollbar-thumb,
    .vos-tabs::-webkit-scrollbar-thumb,
    .wh-dispatch-tabs::-webkit-scrollbar-thumb,
    .nav-pills::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 99px;
    }

    .tabs-nav::-webkit-scrollbar-thumb:hover,
    .cs-tabs-nav::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

    .tabs-nav .tab-btn,
    .tab-btn,
    .cs-tab-btn,
    .vos-tabs .tab-btn,
    .nav-pills > *,
    .wh-dispatch-tabs .tab-btn,
    .action-buttons-row > * {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        white-space: nowrap !important;
        max-width: none !important;
        min-width: auto !important;
        width: auto !important;
        scroll-snap-align: start;
        text-align: center !important;
    }

    .tab-btn .tab-sub,
    .tab-btn .tab-badge {
        white-space: nowrap !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   packing_list.php — أزرار عمودية + جدول → بطاقات إدخال
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body.vision-packing-page {
        overflow-x: hidden !important;
        padding: 12px !important;
    }

    body.vision-packing-page .container,
    body.vision-packing-page #mainContainer {
        max-width: 100% !important;
        width: 100% !important;
        padding: 14px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.vision-packing-page .header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
    }

    body.vision-packing-page .header .btn-back {
        width: 100% !important;
        justify-content: center;
        min-height: 44px;
    }

    body.vision-packing-page .info-grid {
        grid-template-columns: 1fr !important;
    }

    /* حقل التاريخ — غلاف LTR + عرض نصي */
    body.vision-packing-page .packing-date-wrap {
        direction: ltr !important;
        unicode-bidi: isolate !important;
        width: 100% !important;
    }

    body.vision-packing-page .packing-date-display {
        direction: ltr !important;
        unicode-bidi: isolate !important;
        text-align: right !important;
        font-variant-numeric: lining-nums tabular-nums !important;
        min-height: 44px;
        padding: 8px 12px 8px 44px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
    }

    body.vision-packing-page .packing-date-display[readonly]:not(:disabled) {
        background: #ffffff !important;
        color: #334155 !important;
    }

    body.vision-packing-page .packing-date-display:disabled {
        background: #f1f5f9 !important;
        color: #64748b !important;
    }

    body.vision-packing-page .packing-date-wrap::after {
        left: 12px !important;
        right: auto !important;
        inset-inline-start: 12px !important;
        inset-inline-end: auto !important;
    }

    body.vision-packing-page .info-grid .form-group input,
    body.vision-packing-page .info-grid .form-group select {
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #334155 !important;
    }

    body.vision-packing-page .info-grid .form-group input[readonly],
    body.vision-packing-page .info-grid .form-group input:read-only,
    body.vision-packing-page .info-grid .form-group input:disabled,
    body.vision-packing-page .info-grid .form-group select:disabled {
        background-color: #f1f5f9 !important;
        color: #64748b !important;
    }

    body.vision-packing-page .packing-date-native {
        opacity: 0 !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border: none !important;
        z-index: 2 !important;
    }

    body.vision-packing-page .toolbar-row {
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 10px !important;
        padding-bottom: 0 !important;
    }

    body.vision-packing-page .toolbar-row .btn,
    body.vision-packing-page .toolbar-row .btn-template {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        white-space: normal !important;
        min-height: 48px;
        height: auto !important;
    }

    body.vision-packing-page .toolbar-spacer {
        display: none !important;
    }

    body.vision-packing-page .toolbar-notes {
        flex-direction: column;
        align-items: stretch;
    }

    body.vision-packing-page .bulk-bar.is-visible {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.vision-packing-page .bulk-bar .btn-bulk {
        width: 100% !important;
        min-height: 44px;
    }

    body.vision-packing-page .packing-table-wrap {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        direction: ltr;
    }

    /* ── جدول التعبئة → بطاقات Grid مضغوطة (Enterprise WMS) ── */
    #packingTable.vm-stack-table {
        display: block !important;
        table-layout: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

    #packingTable.vm-stack-table thead {
        display: none !important;
    }

    #packingTable.vm-stack-table tbody {
        display: block;
        width: 100%;
    }

    /* بطاقة = صف — شبكة 6 أعمدة */
    #packingTable.vm-stack-table tbody tr {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px 8px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px;
        padding: 10px 12px 8px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    #packingTable.vm-stack-table tbody tr.main-carton {
        border-top: 3px solid #3b82f6;
    }

    #packingTable.vm-stack-table tbody tr.sub-product {
        border-inline-start: 3px solid #8b5cf6;
        background: #fafbff;
    }

    /* خلية — تسمية صغيرة + حقل مضغوط */
    #packingTable.vm-stack-table tbody td {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: visible !important;
        text-align: start !important;
    }

    #packingTable.vm-stack-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: 9px;
        line-height: 1.15;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
        margin: 0;
        border: none;
    }

    #packingTable.vm-stack-table tbody td input[type="text"],
    #packingTable.vm-stack-table tbody td input[type="number"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: 30px !important;
        padding: 2px 5px !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    #packingTable.vm-stack-table tbody td .hs-ac-wrap,
    #packingTable.vm-stack-table tbody td .pic-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ── ترتيب الشبكة الذكي ── */
    /* 1: تحديد | 2-3: كرتون | 4-6: HS */
    #packingTable.vm-stack-table tbody td.select-cell {
        grid-column: 1 / 2;
        grid-row: 1;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #packingTable.vm-stack-table tbody td.select-cell::before {
        display: none !important;
    }

    #packingTable.vm-stack-table tbody td:nth-child(2) {
        grid-column: 2 / 4;
        grid-row: 1;
    }

    #packingTable.vm-stack-table tbody td:nth-child(3) {
        grid-column: 4 / 7;
        grid-row: 1;
    }

    /* 4: اسم المنتج — عرض كامل */
    #packingTable.vm-stack-table tbody td.prod-name-cell,
    #packingTable.vm-stack-table tbody td:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    #packingTable.vm-stack-table tbody td.prod-name-cell input {
        text-align: start !important;
        height: 32px !important;
    }

    /* 5-7: صورة | PCS | CTNS */
    #packingTable.vm-stack-table tbody td.pic-cell,
    #packingTable.vm-stack-table tbody td:nth-child(5) {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    #packingTable.vm-stack-table tbody td:nth-child(6) {
        grid-column: 3 / 5;
        grid-row: 3;
    }

    #packingTable.vm-stack-table tbody td:nth-child(7) {
        grid-column: 5 / 7;
        grid-row: 3;
    }

    /* 8-10: L | W | H */
    #packingTable.vm-stack-table tbody td:nth-child(8) {
        grid-column: 1 / 3;
        grid-row: 4;
    }

    #packingTable.vm-stack-table tbody td:nth-child(9) {
        grid-column: 3 / 5;
        grid-row: 4;
    }

    #packingTable.vm-stack-table tbody td:nth-child(10) {
        grid-column: 5 / 7;
        grid-row: 4;
    }

    /* 11-13: CBM | N.W | G.W */
    #packingTable.vm-stack-table tbody td:nth-child(11) {
        grid-column: 1 / 3;
        grid-row: 5;
    }

    #packingTable.vm-stack-table tbody td:nth-child(12) {
        grid-column: 3 / 5;
        grid-row: 5;
    }

    #packingTable.vm-stack-table tbody td:nth-child(13) {
        grid-column: 5 / 7;
        grid-row: 5;
    }

    /* 14-15: السعر | الإجمالي */
    #packingTable.vm-stack-table tbody td:nth-child(14) {
        grid-column: 1 / 4;
        grid-row: 6;
    }

    #packingTable.vm-stack-table tbody td:nth-child(15) {
        grid-column: 4 / 7;
        grid-row: 6;
    }

    /* 16: إجراءات — أسفل البطاقة بعرض كامل */
    #packingTable.vm-stack-table tbody td.action-cell,
    #packingTable.vm-stack-table tbody td:nth-child(16) {
        grid-column: 1 / -1;
        grid-row: 7;
        margin-top: 4px;
        padding-top: 6px !important;
        border-top: 1px dashed #e2e8f0 !important;
    }

    #packingTable.vm-stack-table tbody td.action-cell::before {
        display: none !important;
    }

    #packingTable.vm-stack-table tbody td.action-cell .row-actions {
        display: flex !important;
        gap: 6px !important;
        width: 100% !important;
    }

    #packingTable.vm-stack-table .btn-del-row {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    #packingTable.vm-stack-table .btn-row-dup {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 4px !important;
        font-size: 14px !important;
    }

    #packingTable.vm-stack-table .pic-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 30px !important;
    }

    #packingTable.vm-stack-table .pic-btn {
        min-height: 30px !important;
        height: 30px !important;
        width: 100% !important;
        padding: 2px 4px !important;
        justify-content: center;
    }

    #packingTable.vm-stack-table .pic-wrap .img-preview {
        max-height: 28px !important;
        max-width: 100% !important;
    }

    /* صف الإجماليات */
    #packingTable.vm-stack-table tfoot {
        display: block;
        margin-top: 6px;
        width: 100%;
    }

    #packingTable.vm-stack-table tfoot tr {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px;
        background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
        border: 1px solid #bfdbfe;
        border-radius: 10px;
    }

    #packingTable.vm-stack-table tfoot td {
        display: block !important;
        border: none !important;
        padding: 4px !important;
        text-align: center !important;
        font-size: 12px;
        background: transparent !important;
    }

    #packingTable.vm-stack-table tfoot .tot-val-cell,
    #packingTable.vm-stack-table tfoot .tot-merge-cbm,
    #packingTable.vm-stack-table tfoot .tot-merge-money {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        padding: 10px 8px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }

    body.vision-packing-page .packing-submit-bar {
        margin-top: 16px;
        padding: 14px;
        border-radius: 12px;
        background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
        border: 1px solid #86efac;
    }

    body.vision-packing-page .packing-submit-bar .btn-save-db {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        white-space: normal !important;
    }

    body.vision-packing-page .packing-submit-note {
        margin: 0 0 12px;
        font-size: 12px;
        color: #64748b;
        line-height: 1.55;
    }

    #packingTable.vm-stack-table tfoot td::before {
        display: none !important;
    }

    #packingTable.vm-stack-table tfoot td[colspan="5"] {
        grid-column: 1 / -1;
        font-weight: 800;
        font-size: 13px;
        color: #1e40af;
    }

    #packingTable.vm-stack-table tfoot .tot-merge-cbm,
    #packingTable.vm-stack-table tfoot .tot-merge-money {
        grid-column: 1 / -1;
    }

    #packingTable.vm-stack-table tfoot .tot-amount {
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Executive dashboard (super_admin_dashboard.php)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .vision-exec-dashboard .layout {
        flex-direction: column;
        min-height: auto;
    }

    .vision-exec-dashboard .main {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 12px 20px !important;
    }

    .vision-exec-dashboard .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .vision-exec-dashboard .kpi-card {
        padding: 14px 16px;
    }

    .vision-exec-dashboard .kpi-val {
        font-size: 26px;
    }

    .vision-exec-dashboard .kpi-icon {
        font-size: 24px;
    }

    .vision-exec-dashboard .charts-grid,
    .vision-exec-dashboard .exec-split-row {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .vision-exec-dashboard .card {
        padding: 16px;
    }

    .vision-exec-dashboard .card-title {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 14px;
    }

    .vision-exec-dashboard .qlinks {
        grid-template-columns: 1fr !important;
    }

    .vision-exec-dashboard .qlink {
        min-height: 48px;
        font-size: 14px;
    }

    .vision-exec-dashboard .bottle-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .vision-exec-dashboard .bottle-label {
        min-width: 0;
        width: 100%;
        white-space: normal;
        font-size: 13px;
    }

    .vision-exec-dashboard .bottle-row > div[style*="flex:1"] {
        flex: 1 1 100% !important;
        width: 100%;
    }

    .vision-exec-dashboard .exec-cn-kpis {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .vision-exec-dashboard .exec-cn-kpi {
        min-width: 0;
    }

    .vision-exec-dashboard .smart-alerts-scroll {
        flex-direction: column;
        align-items: stretch;
    }

    .vision-exec-dashboard .smart-alert {
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .vision-exec-dashboard .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .vision-exec-dashboard .exec-cn-kpis {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   شبكات عامة — عمود واحد على الجوال
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .vm-stack-grid,
    .meta-grid,
    .wh-form-grid,
    .stats-grid,
    .data-grid,
    .ship-summary,
    .ad-grid,
    .charts-grid {
        grid-template-columns: 1fr !important;
    }

    #adminSvcWidgets {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .doc-head {
        flex-direction: column;
    }

    .doc-body {
        padding: 20px 16px !important;
    }
}

@media (max-width: 480px) {
    #adminSvcWidgets {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Table → Card stack (Enterprise mobile — v2)
   • خلية بسيطة: Grid — تسمية ~33% | محتوى 1fr (RTL)
   • خلية معقدة: Flex column — تسمية فوق + محتوى عرض كامل
   • لا min-width:0 على المحتوى بشكل أعمى (يمنع تقطيع الحروف)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tbl-wrap,
    .au-table-wrap,
    .la-wh-table-wrap,
    .ops-cn-table-wrap,
    .table-wrapper,
    .dataTables_wrapper {
        overflow-x: visible !important;
    }

    .vm-stack-table {
        border: none;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }

    .vm-stack-table thead {
        display: none;
    }

    /* ── بطاقة = صف ── */
    .vm-stack-table tbody tr {
        display: block;
        margin-bottom: 14px;
        padding: 16px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    }

    .vm-stack-table tbody tr:hover td {
        background: transparent;
    }

    /* أعمدة مخفية (DataTables) */
    .vm-stack-table tbody td[style*="display: none"],
    .vm-stack-table tbody td[style*="display:none"] {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* ── أساس كل خلية ── */
    .vm-stack-table tbody td {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 13px;
        line-height: 1.5;
        direction: rtl;
        text-align: start;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: manual;
        white-space: normal;
    }

    .vm-stack-table tbody td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* ── تسمية الحقل (::before) — مشتركة ── */
    .vm-stack-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: #64748b;
        font-size: 11px;
        line-height: 1.45;
        letter-spacing: 0;
        word-break: normal;
        overflow-wrap: normal;
        white-space: normal;
    }

    /* ── رأس البطاقة: أول عمود بدون تسمية ── */
    .vm-stack-table tbody td:first-child {
        display: block;
        padding-top: 0 !important;
        padding-bottom: 14px !important;
        margin-bottom: 6px;
        border-bottom: 1px solid #e2e8f0 !important;
        font-size: 14px;
        font-weight: 600;
    }

    .vm-stack-table tbody td:first-child::before {
        display: none;
    }

    .vm-stack-table tbody td:first-child strong {
        font-size: 15px;
        word-break: normal;
    }

    .vm-stack-table tbody td:first-child .btn-view,
    .vm-stack-table tbody td:first-child .btn-sm,
    .vm-stack-table tbody td:first-child button {
        display: block;
        width: 100%;
        margin-top: 10px;
        min-height: 44px;
        white-space: normal;
        box-sizing: border-box;
    }

    /* ── خلايا بسيطة: Grid — تسمية يمين | محتوى يسار (RTL) ── */
    .vm-stack-table tbody td:not(:first-child):not(:is(
        :has(form),
        :has(button),
        :has(textarea),
        :has(select),
        :has(input:not([type="hidden"])),
        :has(.pricing-form),
        :has(.notes-box),
        :has(.action-box),
        :has(.btn-view),
        :has(.btn-sm),
        :has(.btn-submit),
        :has(.cs-btn),
        :has(> div),
        :has(> * + *)
    )) {
        display: grid;
        grid-template-columns: minmax(76px, 33%) minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 4px;
        align-items: center;
    }

    .vm-stack-table tbody td:not(:first-child):not(:is(
        :has(form),
        :has(button),
        :has(textarea),
        :has(select),
        :has(input:not([type="hidden"])),
        :has(.pricing-form),
        :has(.notes-box),
        :has(.action-box),
        :has(.btn-view),
        :has(.btn-sm),
        :has(.btn-submit),
        :has(.cs-btn),
        :has(> div),
        :has(> * + *)
    ))::before {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        padding-inline-end: 6px;
    }

    .vm-stack-table tbody td:not(:first-child):not(:is(
        :has(form),
        :has(button),
        :has(textarea),
        :has(select),
        :has(input:not([type="hidden"])),
        :has(.pricing-form),
        :has(.notes-box),
        :has(.action-box),
        :has(.btn-view),
        :has(.btn-sm),
        :has(.btn-submit),
        :has(.cs-btn),
        :has(> div),
        :has(> * + *)
    )) > * {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        max-width: 100%;
        text-align: start;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* ── خلايا معقدة: عمود — تسمية فوق + محتوى 100% ── */
    .vm-stack-table tbody td:not(:first-child):is(
        :has(form),
        :has(button),
        :has(textarea),
        :has(select),
        :has(input:not([type="hidden"])),
        :has(.pricing-form),
        :has(.notes-box),
        :has(.action-box),
        :has(.btn-view),
        :has(.btn-sm),
        :has(.btn-submit),
        :has(.cs-btn),
        :has(> div),
        :has(> * + *)
    ) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .vm-stack-table tbody td:not(:first-child):is(
        :has(form),
        :has(button),
        :has(textarea),
        :has(select),
        :has(input:not([type="hidden"])),
        :has(.pricing-form),
        :has(.notes-box),
        :has(.action-box),
        :has(.btn-view),
        :has(.btn-sm),
        :has(.btn-submit),
        :has(.cs-btn),
        :has(> div),
        :has(> * + *)
    )::before {
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
        padding-bottom: 6px;
        margin-bottom: 2px;
        border-bottom: 1px dashed #e2e8f0;
    }

    .vm-stack-table tbody td:not(:first-child):is(
        :has(form),
        :has(button),
        :has(textarea),
        :has(select),
        :has(input:not([type="hidden"])),
        :has(.pricing-form),
        :has(.notes-box),
        :has(.action-box),
        :has(.btn-view),
        :has(.btn-sm),
        :has(.btn-submit),
        :has(.cs-btn),
        :has(> div),
        :has(> * + *)
    ) > * {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        box-sizing: border-box;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* colspan / رسائل فارغة */
    .vm-stack-table tbody td[colspan] {
        display: block;
        text-align: center !important;
    }

    .vm-stack-table tbody td[colspan]::before {
        display: none;
    }

    /* ── محتوى متداخل: نماذج، ملاحظات، تنبيهات ── */
    .vm-stack-table .notes-box {
        width: 100%;
        max-width: 100%;
        white-space: pre-wrap;
        word-break: normal;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }

    .vm-stack-table tbody td form,
    .vm-stack-table .pricing-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .vm-stack-table .price-inputs {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .vm-stack-table .price-inputs > *,
    .vm-stack-table .pricing-form input,
    .vm-stack-table .pricing-form select,
    .vm-stack-table .pricing-form textarea,
    .vm-stack-table .pricing-form .form-control,
    .vm-stack-table .pricing-form .btn-submit,
    .vm-stack-table tbody td .input-price {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-height: 44px;
        box-sizing: border-box;
    }

    .vm-stack-table tbody td:not(:first-child) button,
    .vm-stack-table tbody td:not(:first-child) .btn,
    .vm-stack-table tbody td:not(:first-child) .btn-sm,
    .vm-stack-table tbody td:not(:first-child) .btn-view,
    .vm-stack-table tbody td:not(:first-child) .btn-submit,
    .vm-stack-table tbody td:not(:first-child) .cs-btn {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        white-space: normal;
        box-sizing: border-box;
    }

    .vm-stack-table tbody td div[style*="display:flex"],
    .vm-stack-table tbody td div[style*="display: flex"] {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
        box-sizing: border-box;
    }

    .vm-stack-table tbody td div[style*="display:flex"] button,
    .vm-stack-table tbody td div[style*="display: flex"] button {
        flex: 1 1 100%;
        min-width: 0;
    }

    .vm-stack-table tbody td .action-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .vm-stack-table tbody td span[style*="display:inline-block"],
    .vm-stack-table tbody td .badge,
    .vm-stack-table tbody td [class*="badge"] {
        display: inline-block !important;
        max-width: 100%;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        vertical-align: top;
    }

    .vm-stack-table tbody td strong {
        word-break: normal;
        overflow-wrap: break-word;
    }

    .vm-stack-table tbody td br {
        display: block;
        content: "";
        margin-top: 4px;
    }

    /* DataTables */
    table.dataTable.vm-stack-table,
    table.cust-dt.vm-stack-table,
    table.tbl.vm-stack-table,
    table.plain-table.vm-stack-table {
        min-width: 0 !important;
    }

    .dataTables_wrapper .dataTables_scroll {
        overflow: visible !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Modals — جوال (جميع النوافذ المنبثقة)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── الغلاف (backdrop) — توسيط إجباري عند الفتح ── */
    .modal-overlay[style*="display: flex"],
    .modal-overlay[style*="display:flex"],
    .modal-overlay.active,
    #detailsModal[style*="display: flex"],
    #detailsModal[style*="display:flex"],
    #packingFilesModal[style*="display: flex"],
    #packingFilesModal[style*="display:flex"],
    #shipDataModal[style*="display: flex"],
    #shipDataModal[style*="display:flex"],
    #pricingModal[style*="display: flex"],
    #pricingModal[style*="display:flex"],
    #serviceModal[style*="display: flex"],
    #serviceModal[style*="display:flex"],
    #historyModal[style*="display: flex"],
    #historyModal[style*="display:flex"],
    #quoteSuccessModal[style*="display: flex"],
    #quoteSuccessModal[style*="display:flex"],
    #opsCnDetailModal[style*="display: flex"],
    #opsCnDetailModal[style*="display:flex"],
    #csDetailModal[style*="display: flex"],
    #csDetailModal[style*="display:flex"],
    #csNoteModal[style*="display: flex"],
    #csNoteModal[style*="display:flex"],
    #cOrderModal[style*="display: flex"],
    #cOrderModal[style*="display:flex"],
    #histModal[style*="display: flex"],
    #histModal[style*="display:flex"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 5vh 10px !important;
        padding-top: max(5vh, env(safe-area-inset-top)) !important;
        padding-bottom: max(5vh, env(safe-area-inset-bottom)) !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        transform: none !important;
    }

    /* تجاوز inline RTL/قديم (align-items:flex-start على الغلاف = انزياح) */
    #detailsModal[style*="display: flex"],
    #detailsModal[style*="display:flex"],
    #opsCnDetailModal[style*="display: flex"],
    #opsCnDetailModal[style*="display:flex"],
    .modal-overlay[style*="align-items"] {
        align-items: flex-start !important;
        justify-content: center !important;
        left: 0 !important;
        right: 0 !important;
    }

    [dir="rtl"] .modal-overlay[style*="display: flex"],
    [dir="rtl"] .modal-overlay[style*="display:flex"],
    [dir="rtl"] #detailsModal[style*="display: flex"],
    [dir="rtl"] #detailsModal[style*="display:flex"] {
        justify-content: center !important;
        align-items: flex-start !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* ── صندوق المحتوى — إبطال أي إزاحة ── */
    .modal-overlay[style*="display: flex"] > .modal,
    .modal-overlay[style*="display:flex"] > .modal,
    .modal-overlay[style*="display: flex"] .modal,
    .modal-overlay[style*="display:flex"] .modal,
    .modal-overlay.active > .modal,
    .modal-overlay.active .modal,
    .modal-overlay .modal-content,
    .modal-overlay .modal-wide,
    .modal-overlay .modal-details-box,
    #detailsModal[style*="display: flex"] .modal-details-box,
    #detailsModal[style*="display:flex"] .modal-details-box,
    #packingFilesModal .modal,
    #shipDataModal .modal,
    #pricingModal .modal,
    #serviceModal .modal,
    #historyModal .modal,
    #quoteSuccessModal .modal,
    #csDetailModal[style*="display: flex"] .modal-box,
    #csDetailModal[style*="display:flex"] .modal-box,
    #cOrderModal[style*="display: flex"] .modal-box,
    #cOrderModal[style*="display:flex"] .modal-box,
    #histModal[style*="display: flex"] .modal-box,
    #histModal[style*="display:flex"] .modal-box,
    #csNoteModal[style*="display: flex"] .note-box,
    #csNoteModal[style*="display:flex"] .note-box,
    .super_admin .modal-content {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        float: none !important;
        width: 100% !important;
        max-width: 95vw !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        margin-inline: auto !important;
        padding: 44px 16px 18px !important;
        box-sizing: border-box !important;
        max-height: 85vh !important;
        max-height: 85dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        flex: 0 1 auto !important;
        align-self: flex-start !important;
    }

    #detailsModal .modal-details-box {
        max-width: min(95vw, 720px) !important;
        width: 100% !important;
    }

    .modal[style*="max-width"],
    .modal-wide[style*="max-width"] {
        max-width: 95vw !important;
        width: 100% !important;
    }

    /* ── زر الإغلاق — ثابت داخل زاوية الصندوق ── */
    .modal-overlay .modal-close,
    #detailsModal .modal-close,
    .modal .modal-close[style],
    .modal-close[style*="sticky"],
    .modal-close[style*="float"] {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        float: none !important;
        margin: 0 !important;
        z-index: 10 !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        font-size: 18px !important;
        line-height: 1 !important;
        cursor: pointer;
        color: #64748b !important;
        padding: 0 !important;
    }

    [dir="rtl"] .modal-overlay .modal-close,
    [dir="rtl"] #detailsModal .modal-close {
        left: 10px !important;
        right: auto !important;
    }

    /* VisionUI dialogs — تمركز إجباري (لا تكسره قواعد الـ modal العامة) */
    #vision-ui-root .vui-backdrop {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    #vision-ui-root .vui-dialog {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        width: min(calc(100vw - 24px), 420px) !important;
        max-width: min(calc(100vw - 24px), 420px) !important;
        transform: translate(-50%, -50%) scale(0.96) !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    #vision-ui-root .vui-dialog.show {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    [dir="rtl"] #vision-ui-root .vui-dialog,
    [dir="ltr"] #vision-ui-root .vui-dialog {
        left: 50% !important;
        right: auto !important;
    }

    .vui-dialog__foot {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .vui-dialog__foot .vui-btn {
        width: 100%;
        min-height: 44px;
    }

    [dir="rtl"] .vui-dialog__body {
        padding: 0 16px 16px !important;
    }

    /* ── أساس: منع فيض أفقي ── */
    .modal,
    .modal-overlay,
    .modal-box,
    .modal-body,
    .modal-tab-panel,
    #pfBody,
    #modalContent,
    #modalToolbar {
        box-sizing: border-box;
        max-width: 100%;
    }

    .modal *,
    .modal-overlay *,
    .modal-box *,
    #pfBody *,
    #modalContent * {
        box-sizing: border-box;
    }

    .modal img,
    .modal video,
    .modal pre,
    .modal table,
    .modal input,
    .modal select,
    .modal textarea,
    .modal button,
    .modal a {
        max-width: 100%;
    }

    .modal pre {
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .modal h2,
    .modal h3,
    .modal-box h3,
    #detailsModal #modalTitle {
        font-size: 15px !important;
        line-height: 1.45;
        padding-inline-start: 0 !important;
        padding-inline-end: 44px !important;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* ── Flex داخل النوافذ ── */
    .modal .modal-toolbar,
    .modal-actions,
    .modal-tab-panel [style*="display:flex"],
    .modal-tab-panel [style*="display: flex"],
    .modal-body [style*="display:flex"],
    .modal-body [style*="display: flex"],
    .modal [style*="display:flex"],
    .modal [style*="display: flex"] {
        flex-wrap: wrap !important;
        max-width: 100%;
        gap: 10px !important;
    }

    .modal .modal-toolbar,
    .modal-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .modal .modal-toolbar .tb-btn,
    .modal-actions button,
    .modal-actions .btn {
        width: 100% !important;
        min-height: 44px;
        text-align: center;
        justify-content: center;
    }

    /* ── بطاقات الموردين (قوائم التعبئة + تفاصيل الطلب) ── */
    .modal .supplier-card,
    #packingFilesModal .supplier-card,
    #pfBody .supplier-card {
        overflow: visible !important;
        max-width: 100% !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box;
    }

    /* صف المورد: اسم + تتبع في سطر | الشارة سطر كامل | التحميل تحته */
    .modal .supplier-card > div[style*="display:flex"],
    .modal .supplier-card > div[style*="display: flex"],
    #packingFilesModal .supplier-card > div[style*="display:flex"],
    #pfBody .supplier-card > div[style*="display:flex"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 10px !important;
        row-gap: 8px !important;
        align-items: start !important;
        justify-content: start !important;
        flex-wrap: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    .modal .supplier-card > div[style*="display:flex"] > span:nth-child(1),
    #pfBody .supplier-card > div[style*="display:flex"] > span:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 700;
        word-break: normal;
    }

    .modal .supplier-card > div[style*="display:flex"] > span:nth-child(2),
    #pfBody .supplier-card > div[style*="display:flex"] > span:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        font-size: 11px !important;
        word-break: break-all;
        overflow-wrap: anywhere;
        text-align: start;
    }

    .modal .supplier-card > div[style*="display:flex"] > .method-badge,
    .modal .supplier-card > div[style*="display:flex"] > span.method-badge,
    .modal .supplier-card > div[style*="display:flex"] > span:nth-child(n+3),
    #pfBody .supplier-card > div[style*="display:flex"] > .method-badge,
    #pfBody .supplier-card > div[style*="display:flex"] > span:nth-child(n+3) {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* رأس بطاقة المورد (نافذة التفاصيل) */
    .modal .supplier-card-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .modal .supplier-card-head > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: start !important;
    }

    .modal .supplier-card-head > div:first-child .supplier-num {
        grid-column: 1;
    }

    .modal .supplier-card-head > div:first-child .supplier-track {
        grid-column: 2;
        font-size: 11px !important;
        word-break: break-all;
    }

    .modal .supplier-card-head .method-badge,
    .modal .supplier-card-head > div:first-child > span[style*="background"],
    .modal .supplier-card-head > div:first-child > span:not(.supplier-num):not(.supplier-track):not(.method-badge) {
        grid-column: 1 / -1;
    }

    .modal .supplier-card-head > div:last-child {
        grid-template-columns: 1fr !important;
    }

    .modal .supplier-card-head > div:last-child button {
        width: 100% !important;
        min-height: 40px;
        white-space: normal !important;
        margin-top: 4px;
    }

    .modal .supplier-card-body {
        padding: 12px !important;
    }

    /* الشارات */
    .modal .method-badge,
    .modal [class*="method-"] {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        text-align: center;
        justify-content: center;
        line-height: 1.4;
        padding: 6px 10px !important;
    }

    /* أزرار التحميل / الإجراءات داخل بطاقة المورد */
    .modal .supplier-card .btn-sm,
    .modal .supplier-card .btn-down,
    .modal .supplier-card a.btn-sm,
    .modal .supplier-card a[class*="btn"],
    #pfBody .supplier-card a,
    #pfBody .supplier-card button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px;
        margin-top: 8px !important;
        white-space: normal !important;
        text-align: center;
        gap: 6px;
    }

    .modal .supplier-card > div[style*="font-size:11px"],
    #pfBody .supplier-card > div[style*="font-size:11px"] {
        word-break: break-all;
        overflow-wrap: anywhere;
        margin-top: 4px;
    }

    /* تبويبات CS modal */
    #csDetailModal .modal-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    #csDetailModal .modal-tab {
        flex: 0 0 auto;
        min-width: 100px;
        white-space: nowrap;
    }

    #csDetailModal .modal-tab-panel {
        padding: 14px 12px !important;
    }

    /* نماذج داخل modals */
    .modal .pricing-form,
    .modal form {
        width: 100% !important;
        max-width: 100% !important;
    }

    .modal .price-inputs {
        flex-direction: column !important;
        width: 100% !important;
    }

    .modal .price-inputs > * {
        width: 100% !important;
    }

    /* #packingTable — أولوية نهائية فوق vm-stack-table العام */
    #packingTable.vm-stack-table tbody tr {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #packingTable.vm-stack-table tbody td:first-child {
        display: flex !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        font-size: inherit;
        font-weight: inherit;
    }

    #packingTable.vm-stack-table tbody td:not(:first-child):is(:has(input)) {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   customer.php — لوحة العميل (جوال فقط)
   • إحصائيات 2×2 | بطاقات طلبات مضغوطة | أزرار أفقية
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── إصلاحات التراجع (customer.php) ── */

    /* 1a) بانرات action_required — إظهار كامل */
    .page-wrap .notice-banner-stack:not(.action-alerts-container),
    .page-wrap .cust-alert-stack,
    body > #fixSuccessBanner,
    body > .notif-bar {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    /* 1b) إشعارات المستودع الخضراء — حاوية قابلة للتمرير */
    .page-wrap .action-alerts-container,
    .page-wrap #wh-notices.action-alerts-container,
    .page-wrap .cust-wh-notices.action-alerts-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 180px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
        padding: 0 4px 0 0 !important;
    }

    body > .notif-bar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 10px 14px !important;
    }

    body > .notif-bar a.notif-bar-item {
        width: 100%;
        margin: 0 !important;
        padding: 6px 8px !important;
    }

    body > #fixSuccessBanner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)) !important;
    }

    .page-wrap .action-alerts-container .wh-notice-card,
    .page-wrap #wh-notices .wh-notice-card,
    .page-wrap .notice-banner-stack:not(.action-alerts-container) .alert,
    .page-wrap .notice-banner-stack:not(.action-alerts-container) .notice-banner,
    .page-wrap .wh-notice-card.alert,
    .page-wrap .wh-notice-card:nth-child(1),
    .page-wrap .wh-notice-card:nth-child(2),
    .page-wrap .wh-notice-card:nth-child(3),
    .page-wrap .wh-notice-card:nth-child(n) {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .page-wrap .wh-notice-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .page-wrap .wh-notice-act-btn {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        font-size: 11px !important;
        padding: 7px 8px !important;
        box-sizing: border-box !important;
    }

    .page-wrap .wh-notice-title,
    .page-wrap .wh-notice-body {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* 2) إخفاء لوحة الإشعارات المكررة أسفل الصفحة — الجرس في الترويسة يكفي */
    .page-wrap #notifCard,
    .page-wrap .side-col #notifCard,
    .page-wrap .sidebar-notifs,
    .page-wrap .notifications-panel {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* 3) منع تكسر رقم الطلب — سطر 1: رقم + شارة (flex عبر grid) */
    .page-wrap table.cust-dt.vm-stack-table tbody td.order-id-cell,
    .page-wrap table.cust-dt.vm-stack-table tbody td:nth-child(1) {
        min-width: 0 !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody td.order-id-cell strong,
    .page-wrap table.cust-dt.vm-stack-table tbody td.order-id-cell .order-number,
    .page-wrap table.cust-dt.vm-stack-table tbody td:nth-child(1) strong,
    .page-wrap table.cust-dt.vm-stack-table .order-number,
    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(1) strong,
    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(1) {
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        display: block !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody td:nth-child(2),
    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(2) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody td:nth-child(1) small,
    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(1) small {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody td:nth-child(3) span {
        white-space: nowrap !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
    }

    .page-wrap .tab-content,
    .page-wrap .tab-pane,
    .page-wrap .tab-panel,
    .page-wrap .dataTables_wrapper,
    .page-wrap .card-body,
    .page-wrap .tbl-wrap,
    .page-wrap .dt-top,
    .page-wrap .dt-bot,
    .page-wrap .dataTables_scroll,
    .page-wrap .dataTables_scrollBody,
    .page-wrap .dataTables_info,
    .page-wrap .dataTables_paginate {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .page-wrap .tab-panel:not(.active) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .page-wrap .tab-panel.active {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .page-wrap .dataTables_wrapper {
        margin-bottom: 12px !important;
    }

    .page-wrap #ordersCard,
    .page-wrap #ordersCard.card,
    .page-wrap .main-col,
    .page-wrap .card {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* إبطال قواعد vm-stack-table العامة داخل لوحة العميل */
    .page-wrap table.cust-dt.vm-stack-table tbody tr {
        display: grid !important;
        height: fit-content !important;
        min-height: 0 !important;
        max-height: none !important;
        align-items: start !important;
        align-content: start !important;
        grid-auto-rows: min-content !important;
        grid-template-rows: none !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: none !important;
        flex: none !important;
        flex-direction: unset !important;
        align-self: start !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody td::before {
        display: none !important;
        content: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody tr[style*="display: none"],
    .page-wrap table.cust-dt.vm-stack-table tbody tr[style*="display:none"] {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .page-wrap table.cust-dt.vm-stack-table {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        table-layout: auto !important;
    }

    .page-wrap table.cust-dt.vm-stack-table thead {
        display: none !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        line-height: 0 !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .page-wrap table.cust-dt.vm-stack-table tbody tr.dtrg-group,
    .page-wrap table.cust-dt.vm-stack-table tbody tr.child {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .page-wrap table.dataTable.cust-dt.vm-stack-table {
        min-height: 0 !important;
        height: auto !important;
    }

    /* خدماتك المفضلة — عرض كامل قبل الجداول */
    .page-wrap .cust-quick-links-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        box-sizing: border-box !important;
    }

    .page-wrap .cust-quick-links-wrap .cust-quick-links-body {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 8px !important;
    }

    .page-wrap .cust-quick-link-btn {
        width: 100% !important;
        min-height: 44px !important;
    }

    /* مهامي العائمة — منطقة آمنة فوق شريط المتصفح/الأزرار السفلية */
    .vot-wrap.mode-floating {
        position: fixed !important;
        bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9999 !important;
        margin: 0 !important;
        transform: none !important;
        max-width: calc(100vw - 32px) !important;
        touch-action: manipulation;
    }

    [dir="rtl"] .vot-wrap.mode-floating {
        left: 20px !important;
        right: auto !important;
    }

    [dir="ltr"] .vot-wrap.mode-floating {
        right: 20px !important;
        left: auto !important;
    }

    .vot-wrap.mode-floating.is-hidden {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .vot-wrap.mode-floating .vot-fab-anchor {
        position: relative !important;
        display: inline-block !important;
        pointer-events: auto;
    }

    .vot-wrap.mode-floating .vot-fab-close {
        position: absolute !important;
        top: -5px !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        flex: none !important;
    }

    [dir="rtl"] .vot-wrap.mode-floating .vot-fab-close {
        left: -5px !important;
        right: auto !important;
    }

    [dir="ltr"] .vot-wrap.mode-floating .vot-fab-close {
        right: -5px !important;
        left: auto !important;
    }

    [dir="ltr"] .vot-wrap.mode-floating .vot-panel {
        left: auto !important;
        right: 0 !important;
    }

    /* 3) ملخص الأداء — عرضي مدمج (دائرة + أرقام بجانبها) */
    .page-wrap .performance-summary-wrap,
    .page-wrap .performance-chart-card {
        clear: both !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 14px !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        float: none !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .page-wrap .perf-chart-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .page-wrap .perf-chart-donut,
    .page-wrap #performanceChart {
        flex: 0 0 96px !important;
        width: 96px !important;
        height: 96px !important;
        max-width: 96px !important;
        margin: 0 !important;
        position: relative !important;
    }

    .page-wrap #statusChart {
        display: block !important;
        width: 96px !important;
        height: 96px !important;
        max-width: 96px !important;
        margin: 0 auto !important;
    }

    .page-wrap .perf-chart-stats {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .page-wrap .perf-stat-item span:first-child {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 72% !important;
    }

    .page-wrap .perf-activity-row {
        padding: 8px 14px 12px !important;
    }

    .page-wrap .perf-activity-canvas {
        height: 52px !important;
    }

    .page-wrap .main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .page-wrap .main-col,
    .page-wrap .side-col {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    /* 4) نوافذ customer.php — توسيط إجباري */
    #cOrderModal,
    #histModal,
    #rejectQuoteModal {
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    #cOrderModal[style*="display: flex"],
    #cOrderModal[style*="display:flex"],
    #histModal[style*="display: flex"],
    #histModal[style*="display:flex"],
    #rejectQuoteModal[style*="display: flex"],
    #rejectQuoteModal[style*="display:flex"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 5vh 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #cOrderModal .modal-box,
    #histModal .modal-box,
    #rejectQuoteModal > div {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        float: none !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: min(95vw, 680px) !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
    }

    #cOrderModal .modal-body,
    #histModal .modal-body {
        overflow-x: visible !important;
        overflow-y: auto !important;
        padding: 16px 14px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #cOrderModal .sub-card,
    #cOrderModal .supplier-card {
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #cOrderModal .sub-card-head,
    #cOrderModal .supplier-card-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    #cOrderModal .sub-card-head > div[style*="display:flex"],
    #cOrderModal .sub-card-head > div:last-child,
    #cOrderModal .supplier-card > div[style*="display:flex"],
    #cOrderModal .supplier-card-head > div {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #cOrderModal .od-method-badge,
    #cOrderModal .method-badge,
    #cOrderModal .sub-card-head span[style*="border-radius"],
    #cOrderModal .sub-card-head span[style*="padding"],
    #cOrderModal .supplier-card .method-badge,
    #cOrderModal .supplier-card span[style*="background"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    #cOrderModal .od-status-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #cOrderModal .od-status-row > div:last-child {
        align-self: stretch !important;
        text-align: center !important;
    }

    #cOrderModal .od-status-row span[style*="border-radius"] {
        display: inline-block !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    #cOrderModal .sub-card > div[style*="padding"] {
        padding: 10px 12px !important;
        overflow-x: visible !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #cOrderModal .od-metric {
        max-width: 100% !important;
        white-space: normal !important;
    }

    /* ── صناديق الإحصائيات ── */
    .page-wrap .widgets {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .page-wrap .widget {
        padding: 10px 12px !important;
        min-height: 0 !important;
        align-items: center;
    }

    .page-wrap .widget-num {
        font-size: 22px !important;
        line-height: 1.1;
    }

    .page-wrap .widget-label {
        font-size: 10px !important;
        margin-top: 2px !important;
        line-height: 1.25;
    }

    .page-wrap .widget-icon {
        font-size: 22px !important;
    }

    /* ── بطاقة طلب — شبكة مضغوطة (جدول الطلبات) ── */
    .page-wrap #ordersCard table.cust-dt.vm-stack-table {
        border: none;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-auto-rows: min-content !important;
        grid-template-rows: none !important;
        gap: 5px 8px;
        align-items: start !important;
        align-content: start !important;
        padding: 10px 12px !important;
        margin-bottom: 10px;
        height: fit-content !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td {
        direction: inherit;
        text-align: start;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td::before {
        display: none !important;
        content: none !important;
    }

    /* نوع الخدمة — سطر 2 (يمين) */
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody tr[data-service]::before {
        content: attr(data-service);
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        align-self: center;
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }

    /*
     * سطر 1 = رقم الطلب + شارة الحالة (نفس الصف)
     * display:contents على td1 يجعل strong و small أبناء الشبكة مباشرة
     */
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td.order-id-cell,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(1) {
        display: contents !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td.order-id-cell strong,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td.order-id-cell .order-number,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(1) strong {
        grid-column: 1;
        grid-row: 1;
        font-size: 13px !important;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.25;
        min-width: 0 !important;
        width: 100% !important;
        align-self: center !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        display: block !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(1) small {
        grid-column: 1;
        grid-row: 2;
        font-size: 11px !important;
        color: #94a3b8 !important;
        line-height: 1.2;
        align-self: center !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(1) br {
        display: none !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(1) > span[style*="inline-block"] {
        grid-column: 1 / -1;
        grid-row: 6;
        margin-top: 2px;
        width: 100%;
        max-width: 100%;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(1) > .cust-sub-progress {
        grid-column: 1 / -1;
        grid-row: 7;
        margin-top: 4px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(1) > div:not(.cust-sub-progress) {
        grid-column: 1 / -1;
        grid-row: 6;
        margin-top: 2px;
        width: 100%;
    }

    .page-wrap .cust-sub-progress-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .page-wrap .cust-sub-progress-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .page-wrap .cust-sub-progress-count {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-inline-start: 8px !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(1) .hist-btn {
        grid-column: 1 / -1;
        grid-row: 8;
        margin-top: 4px;
        font-size: 11px;
        padding: 0;
        min-height: 0 !important;
        width: auto;
        justify-self: start;
    }

    /* سطر 1: شارة الحالة — بجانب رقم الطلب */
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        align-self: center !important;
        justify-self: end;
        min-width: 0 !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(3) span {
        font-size: 10px !important;
        padding: 3px 8px !important;
        line-height: 1.25;
        white-space: nowrap;
    }

    /* سطر 3: مسار الشحنة (من → إلى) */
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        font-size: 13px !important;
        font-weight: 600;
        color: #0f172a !important;
        line-height: 1.35;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(2)::before {
        content: '🇨🇳 →';
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        flex-shrink: 0;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(2) br,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(2) small {
        display: none !important;
    }

    /* السعر */
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 4;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 4px !important;
        margin-top: 2px !important;
        border-top: 1px dashed #e2e8f0 !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(4)::before {
        display: block !important;
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        flex-shrink: 0;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(4) strong {
        font-size: 13px !important;
        color: #166534 !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(4) small,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(4) span {
        font-size: 13px !important;
        color: #0f172a;
    }

    /* الإجراءات — أفقي مضغوط */
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 5;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px !important;
        padding-top: 6px !important;
        margin-top: 2px !important;
        border-top: 1px dashed #e2e8f0 !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5)::before {
        display: none !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) > a,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) > button,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) > form,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) > div {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        margin: 0 !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) > div {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px !important;
        width: 100%;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) a,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) button,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) form,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) .btn,
    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) .btn-sm {
        width: auto !important;
        max-width: 100% !important;
        min-height: 34px !important;
        height: auto !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) form {
        flex: 1 1 calc(50% - 4px);
        display: flex !important;
    }

    .page-wrap #ordersCard table.cust-dt.vm-stack-table tbody td:nth-child(5) form button {
        flex: 1 1 auto;
        width: 100% !important;
    }

    /* ── جدول الشحنات النشطة — نفس المنطق ── */
    .page-wrap #custShipsTbl.vm-stack-table tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-auto-rows: min-content !important;
        grid-template-rows: none !important;
        gap: 5px 8px;
        align-items: start !important;
        align-content: start !important;
        padding: 10px 12px !important;
        margin-bottom: 10px;
        height: fit-content !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 10px;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td {
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        min-height: 0 !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td::before {
        display: none !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody tr[data-service]::before {
        content: attr(data-service);
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(1) {
        display: contents !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(1) strong {
        grid-column: 1;
        grid-row: 1;
        font-size: 13px !important;
        font-family: monospace;
        color: #0f172a;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(1) small {
        grid-column: 1;
        grid-row: 2;
        font-size: 11px !important;
        color: #94a3b8 !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(1) br {
        display: none;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(1) .hist-btn {
        margin-top: 4px;
        font-size: 11px;
        align-self: flex-start;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        justify-self: end;
        align-self: center !important;
        flex-shrink: 0 !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex !important;
        align-items: center;
        gap: 6px;
        font-size: 13px !important;
        font-weight: 600;
        color: #0f172a;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(2)::before {
        content: '🇨🇳 →';
        font-size: 11px;
        color: #94a3b8;
        flex-shrink: 0;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(2) br,
    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(2) small {
        display: none !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 4;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding-top: 4px !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-size: 13px !important;
        color: #0f172a;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(3)::before {
        display: block !important;
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(3) small {
        font-size: 11px !important;
        color: #64748b !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 5;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px !important;
        padding-top: 6px !important;
        border-top: 1px dashed #e2e8f0 !important;
        white-space: normal !important;
    }

    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(5) a,
    .page-wrap #custShipsTbl.vm-stack-table tbody td:nth-child(5) button {
        flex: 1 1 auto;
        width: auto !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* ── طلبات الخدمات الإضافية — مضغوط ── */
    .page-wrap #custSvcTbl.vm-stack-table tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        padding: 10px 12px !important;
        margin-bottom: 10px;
        min-height: 0 !important;
        border-radius: 10px;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td {
        padding: 0 !important;
        border: none !important;
        min-height: 0 !important;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td::before {
        font-size: 11px !important;
        color: #94a3b8 !important;
        font-weight: 700;
        margin-bottom: 1px;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        display: block !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        border: none !important;
        font-size: 13px !important;
        font-weight: 700;
        color: #0f172a;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(1)::before {
        display: none !important;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(5) {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(5)::before {
        display: none !important;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(2),
    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(4) {
        display: flex !important;
        flex-direction: column;
        gap: 1px;
        font-size: 13px !important;
        color: #0f172a;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        text-align: end;
        align-items: flex-end;
    }

    .page-wrap #custSvcTbl.vm-stack-table tbody td:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 3;
        display: block !important;
        font-size: 12px !important;
        color: #475569;
        padding-top: 4px !important;
        border-top: 1px dashed #e2e8f0 !important;
    }
}

/* الطباعة — استعادة شكل الجدول */
@media print {
    .vm-stack-table thead {
        display: table-header-group !important;
    }

    .vm-stack-table tbody tr {
        display: table-row !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .vm-stack-table tbody td {
        display: table-cell !important;
        padding: inherit !important;
        border: inherit !important;
        width: auto !important;
        direction: inherit !important;
    }

    .vm-stack-table tbody td > * {
        grid-column: unset !important;
        width: auto !important;
        max-width: none !important;
    }

    .vm-stack-table tbody td::before {
        display: none !important;
        content: none !important;
    }
}