@import url('../fonts/cairo.css');

/* ============================================================
   Design tokens — Apple-inspired system shell
   ============================================================ */
:root {
    --main-red:      #ff0701;
    --dark-grey:     #1d1d1f;
    --bg-color:      #f2f2f7;
    --bg-accent:     #ebebf0;
    --primary:       #ff0701;
    --primary-hover: #d80601;
    --primary-soft:  rgba(255, 7, 1, 0.08);
    --primary-soft-strong: rgba(255, 7, 1, 0.14);
    --main-blue:     #007aff;
    --blue-hover:    #0066d6;
    --blue-soft:     rgba(0, 122, 255, 0.1);
    --card-bg:       #ffffff;
    --surface-hover: #f5f5f7;
    --surface-press: #e5e5ea;
    --text-main:     #1d1d1f;
    --text-muted:    #6e6e73;
    --text-tertiary: #aeaeb2;
    --border-color:  rgba(60, 60, 67, 0.16);
    --separator:     rgba(60, 60, 67, 0.2);
    --fill:          rgba(120, 120, 128, 0.14);
    --fill-strong:   rgba(120, 120, 128, 0.22);
    --danger:        #ff0701;
    --success:       #34c759;
    --warning:       #ff9500;
    --radius:        12px;
    --radius-lg:     16px;
    --radius-pill:   980px;
    --shadow-soft:   0 0.5px 0 rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    --focus-ring:    0 0 0 3px rgba(0, 122, 255, 0.4);
    --overlay-scrim: rgba(0, 0, 0, 0.4);
    --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
    --duration-fast: 100ms;
    --duration-ui:   160ms;
    --duration-modal: 240ms;
    --font:          'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hairline:      0.5px;
    --space-1:       4px;
    --space-2:       8px;
    --space-3:       12px;
    --space-4:       16px;
    --space-5:       20px;
    --space-6:       24px;
    --z-modal:       1500;
    --z-modal-top:   3000;
    --z-dropdown:    50;
    --z-alert:       20000;
    --z-toast:       22000;
}

/* ============================================================
   Base
   ============================================================ */
/* html باتجاه LTR حتى يبقى شريط التمرير على اليمين؛ المحتوى RTL داخل body */
html {
    direction: ltr;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    direction: rtl;
    font-family: var(--font);
    background-color: var(--bg-color);
    background-image:
        radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(800px 400px at 100% 0%, rgba(255, 7, 1, 0.045), transparent 55%),
        radial-gradient(700px 360px at 0% 20%, rgba(0, 122, 255, 0.035), transparent 50%);
    background-attachment: fixed;
    margin: 0;
    padding: 28px 20px 0;
    color: var(--text-main);
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0;
}

/* تركيز لوحة المفاتيح موحّد — بدون تحريك العناصر */
:where(
    .btn,
    .top-action-btn,
    .action-btn,
    .option-card,
    .btn-resume-work,
    .alert-card-btn,
    .qty-step-btn,
    .modal-close-inline,
    .btn-notify-sm,
    .btn-notify-icon,
    .match-tools-toggle,
    .match-tools-item,
    .match-copy-bc,
    .notification-item,
    .pos-btn,
    .btn-finish-pos,
    .btn-nav,
    .scan-qty-times-btn
):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* مناطق التمرير الداخلية أيضاً — الشريط يمين والمحتوى يمين */
.scroll-rtl {
    direction: ltr;
    overflow-y: auto;
}
.scroll-rtl > * {
    direction: rtl;
}

.stat-card .value,
.badge,
.table-stock-value,
.col-seq,
.last-item-qty-badge,
#total-raw,
#total-unique,
#current-scans-total,
.review-count-display,
.review-counter,
.page-info-text,
.scan-stock-num {
    font-variant-numeric: lining-nums tabular-nums;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 0;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-soft);
    border: var(--hairline) solid var(--border-color);
}

/* ============================================================
   Intro / Selection Screen
   ============================================================ */
.intro-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 0;
    gap: 28px;
    padding-top: clamp(28px, 6vh, 64px);
}

.intro-brand {
    text-align: center;
    max-width: 640px;
    padding: 0 12px;
    margin-top: 0;
}

.intro-brand-title {
    margin: 0 0 6px;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.intro-brand-sub {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.selection-screen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    justify-items: stretch;
}

button.option-card {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.option-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition:
        transform var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-ui) var(--ease-out),
        opacity var(--duration-fast) var(--ease-out);
    border: var(--hairline) solid var(--border-color);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    aspect-ratio: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.option-card:active {
    transform: scale(0.985);
    background: var(--surface-press);
}
.option-card:focus-visible,
.btn-resume-work:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    flex-shrink: 0;
}
.option-icon svg {
    width: 52px;
    height: 52px;
}
.option-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.option-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
    max-width: 95%;
    letter-spacing: 0.01em;
}

.option-card--notify.has-unread {
    border-color: transparent;
    background: var(--card-bg);
    box-shadow: 0 0 0 1.5px rgba(255, 7, 1, 0.3), var(--shadow-soft);
}
.option-card--notify.has-unread .option-title {
    color: var(--primary);
}

/* ============================================================
   Resume Button
   ============================================================ */
@keyframes pulse-alert {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(0, 122, 255, 0); }
}

.btn-resume-work {
    background: var(--main-blue);
    color: white;
    border: none;
    padding: 14px 28px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition:
        transform var(--duration-fast) var(--ease-out),
        opacity var(--duration-fast) var(--ease-out),
        background var(--duration-ui) var(--ease-out);
    animation: pulse-alert 2.4s var(--ease-out) 3;
    font-family: var(--font);
    letter-spacing: -0.01em;
}
.btn-resume-work-icon {
    flex-shrink: 0;
}
.btn-resume-work:hover {
    transform: none;
    background: var(--blue-hover);
    animation: none;
    opacity: 0.94;
}
.btn-resume-work:active {
    transform: scale(0.97);
    animation: none;
}

/* ============================================================
   Modals
   ============================================================ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--overlay-scrim);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    z-index: 1500;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-modal) var(--ease-out);
}
.modal-overlay.active {
    display: flex;
    opacity: 1;
}
.modal-content {
    background: var(--card-bg);
    width: 90%;
    max-width: 650px;
    border-radius: var(--radius-lg);
    padding: 22px;
    position: relative;
    box-shadow: var(--shadow-elevated);
    border: var(--hairline) solid var(--border-color);
    transform: scale(0.97) translateY(8px);
    opacity: 0.98;
    transition:
        transform var(--duration-modal) var(--ease-out),
        opacity var(--duration-modal) var(--ease-out);
}
.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ============================================================
   Upload Area
   ============================================================ */
.upload-area {
    border: 1.5px dashed rgba(60, 60, 67, 0.28);
    border-radius: var(--radius-lg);
    padding: 40px 20px;
    text-align: center;
    background: var(--fill);
    cursor: pointer;
    position: relative;
    transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.upload-area:hover {
    border-color: var(--primary);
    background: rgba(255, 7, 1, 0.06);
}
/* فقط منطقة رفع Excel في الداشبورد — لا تُطبَّق على بقية file inputs */
.upload-area input[type="file"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* ============================================================
   POS / Scanner Modal
   ============================================================ */
.pos-modal {
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: min(1020px, calc(100vw - 24px));
    width: min(1020px, calc(100vw - 24px));
    box-sizing: border-box;
    font-family: 'Cairo', sans-serif;
    position: relative;
    /* شريط التمرير يمين؛ المحتوى RTL */
    direction: ltr;
}
.pos-modal > * {
    direction: rtl;
}

.pos-scanner-area {
    padding: 44px 40px 48px;
    background: var(--bg-color);
    text-align: center;
    cursor: text;
    transition: background 120ms var(--ease-out);
    position: relative;
    border-bottom: var(--hairline) solid var(--separator);
}

#direct-barcode {
    border: none;
    background: transparent;
    font-size: clamp(1.8rem, 6vw, 2.75rem);
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    color: var(--dark-grey);
    text-align: center;
    width: 100%;
    outline: none;
    letter-spacing: 1px;
    padding: 0;
    margin-top: 10px;
}
#direct-barcode::placeholder {
    color: var(--text-muted);
    font-weight: 600;
}

.pos-controls {
    display: flex;
    gap: 10px;
    padding: 16px 28px;
    justify-content: stretch;
    align-items: center;
    flex-wrap: nowrap;
}
.pos-controls .pos-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    height: 46px;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}
.pos-controls .qty-wrapper {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    max-width: none;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.pos-controls .qty-stepper {
    width: 148px;
    height: 46px;
}
.qty-wrapper label { display: none; }
.qty-stepper {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    width: 148px;
    height: 46px;
    box-sizing: border-box;
    box-shadow: none;
}
.qty-step-btn {
    flex: 0 0 42px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: background 80ms var(--ease-out);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-step-btn:active {
    background: var(--fill-strong);
    transform: scale(0.97);
    transition: transform 100ms var(--ease-out), background 80ms var(--ease-out);
}
#direct-qty {
    border: none;
    border-inline: 1px solid rgba(60, 60, 67, 0.12);
    flex: 1 1 auto;
    width: 56px;
    min-width: 48px;
    max-width: none;
    height: 100%;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    outline: none;
    padding: 0 4px;
    margin: 0;
    color: #1d1d1f !important;
    caret-color: #1d1d1f;
    font-family: var(--font);
    background: #fff !important;
    -moz-appearance: textfield;
    appearance: textfield;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: lining-nums tabular-nums;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1;
    box-sizing: border-box;
}
#direct-qty::-webkit-outer-spin-button,
#direct-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   POS Buttons
   ============================================================ */
.pos-btn {
    padding: 10px 16px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    font-family: 'Cairo', sans-serif;
}
.pos-add-btn  { background: #fafafa; color: var(--main-blue); }
.pos-undo-btn { background: #fafafa; color: var(--danger); }
.pos-redo-btn { background: #fafafa; color: var(--main-blue); }
.pos-redo-btn:disabled {
    opacity: 0.38;
    pointer-events: none;
    cursor: not-allowed;
    color: var(--text-tertiary);
}
.pos-btn:disabled:active,
.pos-redo-btn:disabled:active {
    transform: none;
}
.pos-review-btn { background: #fafafa; color: var(--main-blue); }

.btn-finish-pos {
    margin: 0 16px 16px;
    background: var(--primary);
    color: white;
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    height: 48px;
    font-size: 1.1rem;
    border-radius: var(--radius);
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 100ms var(--ease-out), background 100ms var(--ease-out);
    font-family: 'Cairo', sans-serif;
    box-sizing: border-box;
    display: block;
}

/* ============================================================
   Last Item Card (POS)
   ============================================================ */
.pos-last-item {
    margin: 0 24px 20px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 80ms var(--ease-out), box-shadow 80ms var(--ease-out), border-color 80ms var(--ease-out);
}
.pos-last-item.flash-success {
    background: #eff6ff !important;
    border-color: var(--main-blue);
    box-shadow: 0 0 0 2px var(--main-blue);
}
.last-item-info  { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.last-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
    line-height: 1.2;
}
.last-item-label { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; margin-bottom: 0; font-family: 'Cairo', sans-serif; }
.last-item-code  { font-family: 'Cairo', sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--dark-grey); direction: ltr; letter-spacing: 0.5px; line-height: 1.25; }
.last-item-desc {
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    line-height: 1.4;
}
.last-item-brand-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: 'Cairo', sans-serif;
    font-size: 0.88rem;
}
.last-item-brand-label {
    color: var(--text-muted);
    font-weight: 600;
}
.last-item-brand {
    font-weight: 700;
    color: var(--dark-grey);
}
.last-item-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    width: 100%;
}
.last-prev-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: 'Cairo', sans-serif;
    font-size: 0.88rem;
}
.last-prev-label {
    color: var(--text-muted);
    font-weight: 600;
}
.last-prev-value {
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}
.last-prev-ago {
    color: var(--text-muted);
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    font-variant-numeric: tabular-nums;
}
.last-scan-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.88rem;
}
.last-scan-time-label {
    color: var(--text-muted);
    font-weight: 600;
}
.last-scan-time-value {
    color: var(--text-muted);
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    font-variant-numeric: tabular-nums;
}
.last-stock-line {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 5px;
    margin-top: 4px;
}
.scan-stock-label,
.scan-stock-equals,
.scan-stock-num {
    font-size: 1.05rem;
    color: #1d4ed8;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
}
.scan-stock-num {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: lining-nums;
}
.stock-loc-label {
    font-size: 0.92rem;
    color: #2563eb;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
}
.last-item-qty-badge {
    background: var(--primary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 1.2rem;
    box-shadow: 0 4px 6px rgba(255,7,1,0.3);
    font-family: 'Cairo', sans-serif;
}

.stock-badge {
    background: #fef2f2;
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    display: inline-block;
    min-width: 28px;
    text-align: center;
    font-family: 'Cairo', sans-serif;
}

.table-stock-value {
    background: #eff6ff;
    color: #1d4ed8;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 800;
    display: inline-block;
    min-width: 32px;
    text-align: center;
    font-family: 'Cairo', sans-serif;
}

.table-stock-label {
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #2563eb;
    font-family: 'Cairo', sans-serif;
}

/* ============================================================
   Transfer Results Table
   ============================================================ */
.transfer-results-table {
    table-layout: fixed;
    border-collapse: collapse;
}
.transfer-results-table thead th {
    background: #fff;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.transfer-results-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.92rem;
    background: #fff;
}
.transfer-results-table tbody tr:hover td {
    background: #fafafa;
}
.transfer-results-table th,
.transfer-results-table td {
    vertical-align: middle;
}
.transfer-results-table .col-seq {
    width: 48px;
    text-align: center;
}
.transfer-results-table .col-product {
    width: 36%;
}
.transfer-results-table .col-barcode {
    width: 26%;
    text-align: center;
}
.transfer-results-table .col-stock {
    width: 18%;
    text-align: center;
}
.transfer-results-table .col-qty {
    width: 12%;
    text-align: center;
}
.transfer-results-table .col-times {
    width: 12%;
    text-align: center;
}
.transfer-results-table th.col-barcode,
.transfer-results-table th.col-stock,
.transfer-results-table th.col-qty,
.transfer-results-table th.col-times {
    text-align: center;
}
.transfer-results-table th.col-stock {
    color: var(--primary);
}
.table-seq {
    color: #cbd5e1;
    font-weight: 700;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.product-name-cell {
    display: block;
    font-family: 'Cairo', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.barcode-text {
    display: inline-block;
    font-family: 'Cairo', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: 0;
    direction: ltr;
    unicode-bidi: embed;
    font-variant-numeric: tabular-nums;
}
.stock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 5px 12px;
    border-radius: 8px;
    background: #fff;
    color: #b91c1c;
    font-weight: 800;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid #fecaca;
}
.qty-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    padding: 4px 10px;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid #e2e8f0;
}
.table-stock-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #475569;
}

/* ============================================================
   Generic Buttons
   ============================================================ */
.btn {
    padding: 10px 15px;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        transform var(--duration-fast) var(--ease-out),
        opacity var(--duration-fast) var(--ease-out),
        background var(--duration-ui) var(--ease-out),
        border-color var(--duration-ui) var(--ease-out),
        box-shadow var(--duration-ui) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    height: 44px;
    letter-spacing: -0.01em;
    -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) {
    transform: scale(0.97);
}
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.confirm-actions .btn {
    flex: 1;
    height: 44px;
    font-size: 1rem;
}
.btn-confirm-yes {
    background: var(--primary);
    color: white;
    border: none;
}
.btn-confirm-cancel {
    background: var(--fill);
    color: var(--text-main);
    border: none;
}

.btn-review {
    background: var(--surface-hover);
    color: var(--primary);
    border: none;
    box-shadow: var(--shadow-soft);
    font-size: 1rem;
    letter-spacing: -0.01em;
    height: 44px;
    margin: 0;
    box-sizing: border-box;
}
.btn-review:hover { background: var(--surface-press); border-color: transparent; }

.btn-export {
    background: var(--primary);
    color: #fff;
    width: 100%;
    height: 44px;
    border: none;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    box-sizing: border-box;
}
.btn-export:hover { background: var(--primary-hover); border-color: transparent; color: #fff; }

.btn-blue {
    background: var(--card-bg);
    color: var(--main-blue);
    border: none;
    box-shadow: var(--shadow-soft);
    font-size: 1rem;
    letter-spacing: -0.01em;
    height: 44px;
    margin: 0;
    box-sizing: border-box;
}
.btn-blue:hover { background: var(--surface-hover); border-color: transparent; }

.action-btn {
    background: var(--fill);
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font);
    transition: transform 100ms var(--ease-out), background 100ms var(--ease-out);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.current-scans-table .action-btn {
    min-width: 44px;
    min-height: 44px;
}
.action-btn:active { transform: scale(0.97); }
.action-btn.delete { color: var(--danger); border-color: transparent; margin-right: 5px; background: var(--primary-soft); }
.action-btn.edit { color: var(--main-blue); border-color: transparent; background: var(--blue-soft); }

/* ============================================================
   Top Action Buttons
   ============================================================ */
.top-action-btn {
    background: transparent;
    border: none;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    transition:
        background var(--duration-ui) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        color var(--duration-ui) var(--ease-out);
    color: var(--text-muted);
}
.top-action-btn:active { transform: scale(0.97); }
.btn-back-main {
    background: var(--fill);
    color: var(--text-main);
}
.btn-back-main:hover { background: var(--fill-strong); border-color: transparent; color: var(--text-main); }
.btn-reset-work {
    background: var(--primary-soft);
    color: var(--danger);
}
.btn-reset-work:hover { background: var(--primary-soft-strong); border-color: transparent; color: var(--danger); }

/* ============================================================
   Search Header
   ============================================================ */
.search-header {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    background: var(--surface-hover);
    padding: 15px;
    border-radius: var(--radius);
    border: var(--hairline) solid var(--border-color);
}
.search-header .input-group {
    margin: 0;
    flex: 1;
}

.modal-close-inline {
    background: var(--primary-soft);
    border: none;
    width: 44px; height: 44px;
    border-radius: var(--radius);
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--danger);
    transition:
        background var(--duration-ui) var(--ease-out),
        color var(--duration-ui) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}
.modal-close-inline:active { transform: scale(0.97); }

/* ============================================================
   System Body
   ============================================================ */
.system-body { display: none; }

/* ============================================================
   Export Dropdown
   ============================================================ */
.export-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    align-items: flex-end;
}

.export-dropdown { position: relative; width: 100%; min-width: 250px; }
.export-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-elevated);
    z-index: 9999;
    margin-top: 6px;
    overflow: hidden;
}
.export-option {
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-main);
    transition: background 80ms var(--ease-out);
    border-bottom: var(--hairline) solid var(--separator);
    text-align: right;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.export-option:last-child { border-bottom: none; }
.export-option:hover { background: var(--fill); color: var(--text-main); }
.export-option:active { background: var(--fill-strong); }

.export-option--odoo {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    border-bottom: none;
}
.export-option--odoo:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* ============================================================
   Stats Grid
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.stat-card {
    background: var(--card-bg);
    padding: 20px 16px;
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 100ms var(--ease-out);
    position: relative;
    overflow: hidden;
}
.stat-card:hover { border-color: transparent; background: #fafafa; }
.stat-card h4 { margin: 0; color: var(--text-muted); font-size: 0.88rem; font-weight: 600; z-index: 1; text-align: center; letter-spacing: 0.01em; }
.stat-card .value { font-size: 2.1rem; font-weight: 700; margin: 10px 0 0; color: var(--text-main); z-index: 1; line-height: 1; letter-spacing: -0.02em; }

/* ============================================================
   Toolbar & Inputs
   ============================================================ */
.toolbar {
    display: flex;
    background: var(--card-bg);
    padding: 14px;
    border-radius: var(--radius-lg);
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: var(--shadow-soft);
    margin-bottom: 16px;
    border: none;
}
.input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
    justify-content: flex-end;
}
.input-group label { font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); letter-spacing: 0.01em; }
.input-group input,
.input-group select {
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--fill);
    outline: none;
    transition: background 100ms var(--ease-out), box-shadow 100ms var(--ease-out);
    box-sizing: border-box;
    color: var(--text-main);
}
.input-group input:focus,
.input-group select:focus {
    border-color: transparent;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.22);
}
.toolbar .input-group input { height: 44px; width: 100%; margin: 0; }
.export-settings .input-group input,
.export-settings .input-group select { height: 46px; width: 100%; margin: 0; }

/* ============================================================
   Table
   ============================================================ */
.table-section {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    position: relative;
    padding-bottom: 0;
    border: none;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 15px; text-align: right; border-bottom: var(--hairline) solid var(--separator); }
th {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    letter-spacing: 0.01em;
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 15px;
}
.page-info-text {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ============================================================
   Barcode
   ============================================================ */
.barcode-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.code-text-bottom { font-size: 0.7rem; color: #64748b; font-family: monospace; font-weight: 800; margin-top: 2px; direction: ltr; }
.code-text-bottom span { font-family: monospace; font-size: 0.75rem; font-weight: 800; color: #64748b; direction: ltr; display: inline-block; }

.badge {
    background: #fef2f2;
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    display: inline-block;
    min-width: 30px;
    text-align: center;
}

/* ============================================================
   Review Overlay
   ============================================================ */
#review-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(40, 44, 52, 0.88);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    display: none;
    opacity: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
#review-overlay.active { display: flex; }

.review-card {
    background: white;
    width: 90%;
    max-width: 500px;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    cursor: default;
    transition: none;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.review-card:active { transform: none; }

.review-header { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #f8fafc; padding-bottom: 15px; }
.review-counter { background: var(--primary); color: white; padding: 6px 15px; border-radius: 12px; font-size: 0.9rem; font-weight: 700; cursor: default; box-shadow: 0 2px 4px rgba(255,7,1,0.2); }

.review-body {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 25px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.review-code { font-size: 2.2rem; font-weight: 900; color: var(--dark-grey); margin: 0; direction: ltr; word-break: break-all; pointer-events: none; letter-spacing: 2px; }
.review-count-display { margin: 0; pointer-events: none; }
.review-count-display span { font-size: 3.5rem; color: var(--primary); font-weight: 900; line-height: 1; text-shadow: 0 4px 6px rgba(255,7,1,0.15); }

.review-actions { display: flex; gap: 15px; justify-content: center; width: 100%; cursor: default; }
.btn-nav { flex: 1; padding: 15px; font-size: 1rem; min-width: 140px; cursor: pointer; transition: 0.15s ease-in-out; font-weight: 700; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); font-family: 'Cairo', sans-serif; }
.btn-nav:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-nav-prev { background: white; color: var(--danger); border: 1px solid var(--border-color); }
.btn-nav-next { background: white; color: #2563eb; border: 1px solid var(--border-color); }

#success-screen { display: none; cursor: default; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(29, 29, 31, 0.92);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    color: white;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    box-shadow: var(--shadow-elevated);
    opacity: 0;
    transition:
        opacity var(--duration-modal) var(--ease-out),
        transform var(--duration-modal) var(--ease-out),
        bottom var(--duration-modal) var(--ease-out);
    z-index: 3000;
    pointer-events: none;
    letter-spacing: -0.01em;
}
.toast.show {
    opacity: 1;
    bottom: 40px;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
    text-align: center;
    padding: 14px 15px 20px;
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    width: 100%;
}
/* الحقوق فقط في الداشبورد — تختفي بصفحة الجدول */
body.is-work-mode .footer {
    display: none;
}
.footer-content {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 1;
    direction: ltr;
    min-height: 1.4em;
    max-width: 100%;
}
.footer-copy {
    text-align: center;
    direction: ltr;
}
.footer-line {
    display: inline;
}
.footer-sep {
    display: inline;
}
.odoo-link-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    pointer-events: auto;
    cursor: default;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.odoo-link-dot--ok {
    background: #34c759;
    animation: odoo-dot-pulse-ok 1.6s ease-in-out infinite;
}
.odoo-link-dot--warn {
    background: #8e8e93;
    animation: odoo-dot-pulse-warn 1.6s ease-in-out infinite;
}
.odoo-link-dot--off {
    background: #ff3b30;
    animation: odoo-dot-pulse-off 1.6s ease-in-out infinite;
}
@keyframes odoo-dot-pulse-ok {
    0%, 100% {
        background-color: rgba(52, 199, 89, 0.32);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 0 rgba(52, 199, 89, 0);
    }
    50% {
        background-color: #34c759;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 10px 2px rgba(52, 199, 89, 0.55);
    }
}
@keyframes odoo-dot-pulse-warn {
    0%, 100% {
        background-color: rgba(142, 142, 147, 0.32);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 0 rgba(142, 142, 147, 0);
    }
    50% {
        background-color: #8e8e93;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 10px 2px rgba(142, 142, 147, 0.45);
    }
}
@keyframes odoo-dot-pulse-off {
    0%, 100% {
        background-color: rgba(255, 59, 48, 0.32);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 0 rgba(255, 59, 48, 0);
    }
    50% {
        background-color: #ff3b30;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 10px 2px rgba(255, 59, 48, 0.5);
    }
}
@media (prefers-reduced-motion: reduce) {
    .odoo-link-dot--ok,
    .odoo-link-dot--warn,
    .odoo-link-dot--off {
        animation: none;
    }
}

/* يبدو كنص عادي — بدون تلميح أنه قابل للنقر */
.dev-credit-name {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: inherit;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.dev-credit-name:hover,
.dev-credit-name:focus,
.dev-credit-name:active {
    color: inherit;
    text-decoration: none;
    outline: none;
}

/* ============================================================
   Loading Overlay — بنفس ستايل النظام (أحمر)
   ============================================================ */
.loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--overlay-scrim);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.loading-overlay.active { display: flex; }

.loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 36px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.94);
    border: var(--hairline) solid var(--border-color);
    box-shadow: var(--shadow-elevated);
    min-width: 220px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #fecaca;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-bottom: 6px;
}

.loading-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
}
.loading-sub {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ============================================================
   Alert Overlay — بطاقة بيضاء، زر أحمر داخلها، بدون شريط تمرير
   ============================================================ */
.alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    font-family: var(--font);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.alert-overlay.active { display: flex; }

body.app-update-locked {
    overflow: hidden;
}
.app-update-gate {
    position: fixed;
    inset: 0;
    z-index: 26000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font);
}
.app-update-gate[hidden] {
    display: none !important;
}
.app-update-gate-card {
    width: min(340px, calc(100vw - 32px));
    padding: 22px 20px 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    text-align: center;
    font-family: var(--font);
}
.app-update-gate-title {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
}
.app-update-gate-msg,
.app-update-gate-ver {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.6;
    white-space: pre-wrap;
}
.app-update-gate-card .alert-card-btn {
    margin-top: 12px;
}
#app-update-overlay.app-update-overlay--forced {
    z-index: 25000;
    background: rgba(15, 23, 42, 0.55);
}
#app-update-overlay.app-update-overlay--forced .alert-card {
    width: min(340px, calc(100vw - 32px));
    font-family: var(--font);
}
.alert-card--update .alert-card-body {
    padding-top: 4px;
}

.alert-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: min(360px, calc(100vw - 40px));
    max-width: min(360px, calc(100vw - 40px));
    min-width: 0;
    padding: 22px 20px 16px;
    border-radius: 16px;
    background: #fff;
    border: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

.alert-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 16px;
    background: var(--primary-soft);
    color: var(--primary);
    flex-shrink: 0;
}
.alert-card-icon svg {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}
.alert-card-icon--warn {
    background: rgba(255, 149, 0, 0.12);
    color: var(--warning);
}
.alert-card-icon--info {
    background: rgba(0, 122, 255, 0.12);
    color: var(--primary);
}
.alert-card-icon--success {
    background: rgba(52, 199, 89, 0.12);
    color: var(--success);
}

.alert-card-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.alert-card-title {
    margin: 0;
    padding: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    line-height: 1.35;
    font-family: var(--font);
}

.alert-card-message {
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    overflow: visible;
    max-height: none;
}

.custom-confirm-extra {
    display: none;
}

.alert-card-meta {
    margin: 0;
    padding: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-tertiary);
    line-height: 1.5;
}
.alert-card-meta:empty { display: none !important; }

.alert-card-actions,
.alert-card-actions--single,
.match-close-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.alert-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    box-shadow: none;
    transition: background 120ms var(--ease-out), transform 100ms var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.alert-card-btn:hover { background: var(--primary-hover); }
.alert-card-btn:active { transform: scale(0.97); }
.alert-card-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.alert-card-btn--ghost {
    background: var(--fill);
    color: var(--text-main);
}
.alert-card-btn--ghost:hover {
    background: var(--fill-strong);
}

.alert-card-btn--held {
    background: #fff7ed;
    color: #c2410c;
}
.alert-card-btn--held:hover {
    background: #ffedd5;
}

.alert-card--confirm,
.alert-card--success,
.match-close-card {
    width: min(360px, calc(100vw - 40px));
    max-width: min(360px, calc(100vw - 40px));
}

#match-close-message {
    white-space: pre-wrap;
}

#match-complete-overlay {
    z-index: 20000;
    background: rgba(6, 32, 18, 0.52);
}
#match-complete-overlay .alert-card-meta {
    margin-top: 0;
}

#match-complete-card {
    width: min(520px, calc(100vw - 24px));
    max-width: min(520px, calc(100vw - 24px));
    padding: 32px 24px 20px;
    gap: 20px;
    border: 3px solid var(--success) !important;
    box-shadow: 0 18px 56px rgba(52, 199, 89, 0.28);
}
#match-complete-card .alert-card-title {
    font-size: clamp(1.55rem, 5.5vw, 2.05rem);
    font-weight: 900;
    color: #15803d;
    line-height: 1.25;
}
#match-complete-card .alert-card-message {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.7;
}
#match-complete-card .alert-card-meta {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
}
#match-complete-card .alert-card-btn {
    min-height: 56px;
    font-size: 1.15rem;
    font-weight: 800;
    background: var(--success);
}
#match-complete-card .alert-card-btn:hover {
    background: #2db350;
}
#match-complete-card.match-complete-card--enter {
    animation: matchCompleteCardIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes matchCompleteCardIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 420px) {
    .alert-card,
    .alert-card--confirm,
    .alert-card--success,
    .match-close-card {
        width: calc(100vw - 28px);
        max-width: calc(100vw - 28px);
        padding: 18px 16px 14px;
        gap: 14px;
    }
    .alert-card-title { font-size: 1.08rem; }
    .alert-card-message { font-size: 0.9rem; }
    .alert-card-btn {
        min-height: 46px;
        font-size: 0.95rem;
        white-space: normal;
    }
    #match-complete-card {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        padding: 28px 16px 16px;
        gap: 16px;
    }
    #match-complete-card .alert-card-title {
        font-size: 1.55rem;
    }
    #match-complete-card .alert-card-message {
        font-size: 1.08rem;
    }
    #match-complete-card .alert-card-btn {
        min-height: 54px;
        font-size: 1.1rem;
    }
}

#print-area { display: none; }

@media print {
    body { background: white; margin: 0; padding: 0; }
    .container,
    #review-overlay,
    .toast,
    .modal-overlay,
    #custom-alert-overlay,
    #custom-confirm-overlay,
    #match-complete-overlay,
    #loading-overlay { display: none !important; }

    #print-area { display: block !important; width: 100%; direction: rtl; font-family: 'Cairo', sans-serif; color: black; }

    .print-info { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; font-size: 14px; font-weight: bold; }
    .print-info div { margin-bottom: 5px; }

    .print-table { width: 100%; border-collapse: collapse; }
    .print-table th, .print-table td { border-bottom: 1px solid #000; padding: 10px; text-align: right; vertical-align: middle; }
    .print-table th { border-bottom: 2px solid #000; font-size: 16px; font-weight: bold; }

    .print-barcode-container svg { height: 40px; max-width: 180px; }

    .print-footer { text-align: center; margin-top: 40px; font-size: 14px; font-weight: bold; color: #333; border-top: 1px dashed #ccc; padding-top: 15px; }
}

/* ============================================================
   Utilities & Layout
   ============================================================ */
.is-hidden { display: none !important; }

#resume-work-container {
    display: none;
    margin-top: 50px;
}
#resume-work-container.is-visible { display: block; }

.top-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.card--export { margin-bottom: 20px; }

.warehouse-readonly {
    background: var(--fill);
    color: var(--text-muted);
    font-weight: 600;
}

.toolbar .input-group--wide   { flex: 2; }
.toolbar .input-group--narrow  { flex: 1; }
.toolbar .btn-review--wide     { flex: 1.5; }

#pagination-controls { display: none; }
#pagination-controls.is-visible { display: flex; }

.modal-content--upload  { padding: 25px; }
.modal-content--scans   { max-width: 860px; padding: 25px; }
.modal-content--dialog  { max-width: 400px; text-align: center; padding: 30px; }
.modal-content--confirm { max-width: 450px; text-align: center; padding: 30px; }

.modal-overlay--top { z-index: 3000; }
.modal-overlay--stack { z-index: 3200; }

#modal-transfer-reverse.modal-overlay {
    z-index: 3200;
}

/* اختيار مناقلة للمقارنة فوق نافذة الجرد */
#modal-match-pick-transfer {
    z-index: 16000;
}

/* التنبيهات والتأكيد فوق أي نافذة مفتوحة في النظام */
#custom-alert-overlay,
#custom-confirm-overlay,
#match-complete-overlay {
    z-index: 20000;
}
#odoo-send-overlay,
#odoo-success-overlay {
    z-index: 19000;
}
#loading-overlay {
    z-index: 18000;
}
.toast {
    z-index: 22000;
}

/* بطاقات إشعار الوارد — أسفل يمين الصفحة (تعمل دائماً) */
.manaql-notify-enable-banner {
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 26000;
    width: min(420px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    background: #1c1c1e;
    color: #fff;
    font-family: var(--font);
    text-align: right;
    direction: rtl;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.manaql-notify-enable-banner strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.manaql-notify-enable-banner span {
    display: block;
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 0.88;
}
.manaql-notify-enable-banner:active {
    transform: translateX(-50%) scale(0.98);
}

.incoming-notify-stack {
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: 25000;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.incoming-notify-card {
    pointer-events: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    padding-left: 36px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    border: none;
    box-shadow: var(--shadow-elevated);
    font-family: var(--font);
    text-align: right;
    cursor: pointer;
    direction: rtl;
    position: relative;
    animation: incoming-notify-in 280ms var(--ease-out);
    transition: transform 120ms var(--ease-out), opacity 180ms var(--ease-out);
}
.incoming-notify-card:active {
    transform: scale(0.98);
}
.incoming-notify-card.is-leaving {
    opacity: 0;
    transform: translateY(8px);
}
.incoming-notify-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.35;
    letter-spacing: -0.02em;
}
.incoming-notify-card-body {
    margin: 6px 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.55;
    white-space: pre-wrap;
}
.incoming-notify-card-close {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.incoming-notify-card-close:hover {
    background: var(--primary-hover);
    color: #fff;
}
.incoming-notify-card--action {
    cursor: default;
    padding-left: 16px;
}
.incoming-notify-card--action:active {
    transform: none;
}
.incoming-notify-card-input {
    display: block;
    width: 100%;
    margin-top: 8px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    text-align: center;
    background: #fff;
}
.incoming-notify-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.incoming-notify-card-btn {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 9px 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: #007aff;
    color: #fff;
}
.incoming-notify-card-btn--ghost {
    background: var(--fill);
    color: var(--text-main);
}
@keyframes incoming-notify-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .incoming-notify-card { animation: none; }
    .pos-last-item.flash-success {
        background: #fff !important;
        box-shadow: none;
        border-color: transparent;
    }
}

.upload-icon-wrap { margin-bottom: 15px; }
.upload-title     { margin: 0; }
.upload-desc      { margin: 5px 0 0; color: var(--text-muted); }
.upload-limit     { margin: 5px 0 0; color: var(--text-muted); font-size: 0.85rem; }

.pos-scanner-area--padded { padding-top: 56px; }

.table-section--scroll {
    max-height: 420px;
    overflow-y: auto;
    padding: 0;
    direction: ltr;
}
.table-section--scroll > * {
    direction: rtl;
}

.current-scans-total-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 16px;
    margin-bottom: 15px;
    background: var(--card-bg);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    font-family: var(--font);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--text-main);
}
.current-scans-sep {
    color: #cbd5e1;
    font-weight: 600;
}
.current-scans-total-bar strong {
    color: var(--primary);
    font-size: 1.35rem;
    margin-right: 6px;
}

.current-scan-search {
    background: white;
    border: 2px solid var(--border-color);
}

.current-scans-table { margin: 0; }

.current-scans-thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.current-scans-table .col-num         { width: 40px; }
.current-scans-table .col-stock-th    { text-align: center; width: 120px; }
.current-scans-table .col-qty-th      { text-align: center; width: 160px; }
.current-scans-table .col-times-th    { text-align: center; width: 72px; }

.scan-qty-controls {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.scan-qty-times-btn {
    appearance: none;
    border: 1.5px solid rgba(0, 122, 255, 0.28);
    background: #fff;
    color: var(--main-blue, #007aff);
    border-radius: 10px;
    font-family: var(--font);
    font-weight: 900;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 10px;
    cursor: pointer;
    line-height: 1;
    box-shadow: none;
}
.scan-qty-times-btn.is-open {
    border-color: var(--main-blue, #007aff);
    background: rgba(0, 122, 255, 0.08);
}
button.qty-chip.scan-qty-times-btn {
    min-width: 52px;
    min-height: 34px;
    font-size: 1rem;
}

.scan-times-drop-row td {
    padding: 0 12px 12px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.scan-times-dropdown {
    margin-top: 2px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.scan-times-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #f2f2f7;
    border-bottom: 1px solid var(--border-color);
}
.scan-times-head-title {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text-main);
}
.scan-times-head-meta {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.scan-times-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    direction: ltr;
}
.scan-times-list > * { direction: rtl; }
.scan-times-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fafafa;
    font-family: var(--font);
    font-size: 0.88rem;
}
.scan-times-item:nth-child(odd) { background: #f8fafc; }
.scan-times-item-idx {
    font-weight: 800;
    color: var(--text-muted);
    text-align: center;
}
.scan-times-item-when {
    font-weight: 700;
    color: var(--text-main);
    font-family: var(--font);
    text-align: right;
    direction: rtl;
}
.scan-times-item-qty {
    font-weight: 900;
    color: var(--main-blue);
}
.scan-times-empty {
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    padding: 14px;
    font-size: 0.9rem;
}
.current-scans-table .col-actions-th  { text-align: center; width: 100px; }

.review-label {
    margin: 0 0 5px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.review-divider {
    height: 1px;
    background: #cbd5e1;
    width: 80%;
    margin: 0 auto;
}

.review-card--success {
    cursor: default;
    max-width: 400px;
}

.dialog-icon {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}
.dialog-icon--danger  { color: var(--danger); }
.dialog-icon--warning { color: #eab308; }
.dialog-icon--success { color: #10b981; }

.dialog-title {
    margin-top: 0;
    color: var(--dark-grey);
    font-family: 'Cairo', sans-serif;
}

.dialog-message {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.btn--full {
    margin: 0;
    width: 100%;
    justify-content: center;
}

/* ============================================================
   Odoo Dialogs (Send + Success)
   ============================================================ */
.odoo-dialog-card {
    max-width: min(400px, calc(100vw - 32px));
    width: min(400px, calc(100vw - 32px));
    padding: 24px 20px 18px;
    text-align: center;
    box-sizing: border-box;
}

.odoo-dialog-card--enter {
    animation: odooSuccessEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes odooSuccessEnter {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#odoo-success-overlay.active {
    animation: odooOverlayFade 0.35s ease both;
}

@keyframes odooOverlayFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.odoo-dialog-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text-main);
    font-family: 'Cairo', sans-serif;
}

.odoo-dialog-lead {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.odoo-success-ref {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: 1.5px;
    font-family: 'Cairo', sans-serif;
    direction: ltr;
    font-variant-numeric: lining-nums;
    line-height: 1.2;
    min-height: 2.4rem;
}

.odoo-success-ref.is-loading {
    animation: odooRefPulse 1.2s ease-in-out infinite;
}

@keyframes odooRefPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

.odoo-success-ref-label {
    margin-top: 4px;
    margin-bottom: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 800;
}

.odoo-dialog-route {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    direction: rtl;
}

.odoo-route-box {
    flex: 1;
    min-width: 110px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 10px;
    text-align: center;
    transition:
        border-color 0.45s ease,
        background 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* شاشة الإرسال: البداية — المصدر (زيونة) أخضر */
#odoo-send-route:not(.is-arrived) .odoo-route-box--source {
    border: 2px solid #16a34a;
    background: #f0fdf4;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.1);
}

#odoo-send-route:not(.is-arrived) .odoo-route-box--dest {
    border: 1px solid var(--border-color);
    background: #fff;
    box-shadow: none;
}

/* بعد وصول الشاحنة — الوجهة أخضر والمصدر رمادي */
#odoo-send-route.is-arrived .odoo-route-box--dest {
    border: 2px solid #16a34a;
    background: #f0fdf4;
    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.12);
    transform: scale(1.03);
}

#odoo-send-route.is-arrived .odoo-route-box--source {
    border: 1px solid var(--border-color);
    background: #fff;
    box-shadow: none;
    transform: scale(1);
}

/* شاشة النجاح — الوجهة أخضر ثابت */
#odoo-success-overlay .odoo-route-box--dest {
    border: 2px solid #16a34a;
    background: #f0fdf4;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.1);
}

#odoo-success-overlay .odoo-route-box--source {
    border: 1px solid var(--border-color);
    background: #fff;
}

.odoo-route-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.odoo-route-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.35;
}

.odoo-route-track-line {
    position: relative;
    flex: 0 0 88px;
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.odoo-route-track.is-driving .odoo-route-track-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    height: 4px;
    width: 0;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(270deg, #16a34a, #86efac);
    z-index: 1;
    animation: odooRoadProgress 2s cubic-bezier(0.42, 0, 0.18, 1) forwards;
}

@keyframes odooRoadProgress {
    to { width: 100%; }
}

.odoo-route-track-line--static {
    flex: 0 0 56px;
    min-width: 48px;
}

.odoo-route-road {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: repeating-linear-gradient(
        90deg,
        #cbd5e1 0,
        #cbd5e1 10px,
        transparent 10px,
        transparent 18px
    );
    transition: background 0.6s ease;
}

.odoo-route-road--done {
    background: linear-gradient(90deg, #86efac, #16a34a);
}

.odoo-route-track.is-driving:not(.is-arrived) .odoo-route-road {
    animation: odooRoadMove 0.4s linear infinite;
}

.odoo-route-track.is-driving.is-arrived .odoo-route-road,
.odoo-route-track.is-arrived .odoo-route-road {
    animation: none;
    background: linear-gradient(90deg, #16a34a, #86efac);
    box-shadow: 0 0 8px rgba(22, 163, 74, 0.3);
}

.odoo-route-vehicle {
    position: relative;
    z-index: 2;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(255, 7, 1, 0.25));
    transform: translateX(42px) scaleX(-1);
    transition: filter 0.3s ease;
}

.odoo-route-track.is-driving .odoo-route-vehicle {
    animation: odooVehicleDrive 2s cubic-bezier(0.42, 0, 0.18, 1) forwards;
}

@keyframes odooVehicleDrive {
    0%   { transform: translateX(42px) scaleX(-1) scale(1); filter: drop-shadow(0 2px 4px rgba(255, 7, 1, 0.25)); }
    12%  { transform: translateX(30px) scaleX(-1) scale(1.04); }
    45%  { transform: translateX(0px) scaleX(-1) scale(1.06); }
    78%  { transform: translateX(-32px) scaleX(-1) scale(1.04); }
    88%  { transform: translateX(-42px) scaleX(-1) scale(1.1); filter: drop-shadow(0 3px 8px rgba(22, 163, 74, 0.45)); }
    100% { transform: translateX(-42px) scaleX(-1) scale(1); filter: drop-shadow(0 2px 6px rgba(22, 163, 74, 0.35)); }
}

@keyframes odooRoadMove {
    from { background-position: 0 0; }
    to   { background-position: -18px 0; }
}

.odoo-dialog-stats {
    display: inline-block;
    padding: 8px 16px;
    margin-bottom: 18px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 800;
}

.odoo-dialog-stats--solo {
    margin-bottom: 20px;
}

#odoo-success-table-wrap {
    max-height: min(42vh, 320px);
    margin: 0 0 14px;
}

.odoo-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

#odoo-send-overlay .odoo-dialog-actions {
    direction: ltr;
}

.odoo-dialog-actions .btn {
    width: 100%;
    min-height: 46px;
    height: 46px;
    margin: 0;
    border-radius: 12px;
    box-sizing: border-box;
}

.odoo-dialog-actions .btn-export {
    width: 100%;
}

.odoo-dialog-actions--stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.odoo-dialog-actions--stack .btn,
.odoo-dialog-actions--stack a.btn {
    width: 100%;
    margin: 0;
    justify-content: center;
    min-height: 46px;
    height: 46px;
}

.odoo-dialog-actions--single {
    display: grid;
    grid-template-columns: 1fr;
}

.odoo-dialog-actions--single .btn {
    width: 100%;
}

.odoo-dialog-card.is-leaving {
    animation: odooSendLeave 0.35s ease forwards;
}

@keyframes odooSendLeave {
    to { opacity: 0; transform: translateY(-12px) scale(0.98); }
}

/* ============================================================
   Notifications — Incoming Transfers
   ============================================================ */
.option-card--notify {
    position: relative;
}

.notify-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transform-origin: center;
    will-change: transform;
}
@keyframes notify-badge-pop {
    0%   { transform: scale(0.55); opacity: 0.55; }
    55%  { transform: scale(1.14); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes notify-card-aura {
    0%   { box-shadow: 0 0 0 0 rgba(255, 7, 1, 0.32), var(--shadow-soft); }
    65%  { box-shadow: 0 0 0 12px rgba(255, 7, 1, 0), var(--shadow-soft); }
    100% { box-shadow: 0 0 0 0 rgba(255, 7, 1, 0), var(--shadow-soft); }
}
@keyframes notify-bell-nudge {
    0%, 100% { transform: rotate(0deg); }
    18% { transform: rotate(-11deg); }
    36% { transform: rotate(9deg); }
    54% { transform: rotate(-6deg); }
    72% { transform: rotate(3deg); }
}
@keyframes notify-item-arrive {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.notify-badge.notify-badge--pop {
    animation: notify-badge-pop 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.option-card--notify.notify-card--ping.has-unread {
    animation: notify-card-aura 980ms cubic-bezier(0.22, 1, 0.36, 1);
}
.option-card--notify.notify-card--ping .option-icon svg {
    transform-origin: 50% 15%;
    animation: notify-bell-nudge 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.notification-item.notification-item--arrive {
    animation: notify-item-arrive 320ms var(--ease-out);
}

.notifications-modal {
    max-width: 560px;
    width: min(560px, 94vw);
    max-height: min(82vh, 720px);
    height: min(82vh, 720px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--hairline) solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-color);
    box-shadow: var(--shadow-elevated);
}

.notifications-modal-head {
    position: relative;
    z-index: 8;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 0;
    text-align: center;
    border-bottom: none;
    overflow: visible;
    background: rgba(242, 242, 247, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.btn-notify-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 100ms ease-out, color 100ms ease-out, transform 100ms ease-out;
}
.btn-notify-icon:active {
    transform: scale(0.94);
}
.btn-notify-trash {
    color: #8e8e93;
    position: relative;
    z-index: 5;
}
.btn-notify-trash:hover {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}
.btn-notify-trash:active {
    background: rgba(255, 59, 48, 0.14);
    color: #ff3b30;
}
.btn-notify-trash:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.notifications-modal-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 8px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(242, 242, 247, 0.85), transparent);
}

.notifications-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    direction: ltr;
    min-height: 44px;
    position: relative;
    z-index: 10;
}

.notifications-head-start {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 11;
}

.notifications-head-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    position: relative;
    z-index: 11;
}

.notifications-head-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: calc(100% - 168px);
    min-width: 0;
    text-align: center;
    direction: rtl;
    pointer-events: none;
}

/* legacy spacer — removed from markup */
.notifications-head-spacer {
    display: none;
}

.notifications-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1d1d1f;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.022em;
    line-height: 1.25;
}

.notifications-modal-lead {
    margin: 8px 0 0;
    color: #8e8e93;
    font-size: 0.78rem;
    line-height: 1.35;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.01em;
    pointer-events: none;
}

.notifications-modal-lead[hidden],
.notifications-modal-lead.is-hidden {
    display: none !important;
}

.notifications-head-row {
    display: contents;
}

.notify-dir-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 6px;
    padding: 0;
    border-bottom: 1px solid var(--separator);
    background: transparent;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    overflow: visible;
}

.notify-dir-tab[aria-haspopup="true"]::after {
    content: '▾';
    margin-inline-start: 4px;
    font-size: 0.62rem;
    opacity: 0.5;
    vertical-align: middle;
}
.notify-dir-tab[aria-expanded="true"]::after {
    opacity: 1;
}

.notify-dir-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 8px 18px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.notify-dir-tab.is-active {
    color: var(--text-main);
    border-bottom-color: var(--primary);
}
.notify-dir-tab:active {
    transform: scale(0.98);
}
.notify-dir-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.notify-dir-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-inline-start: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}
.notify-dir-count.is-hidden,
.notify-dir-count[hidden] {
    display: none !important;
}

.notify-dir-dropdown {
    position: relative;
    display: inline-flex;
}

.notify-dir-dropdown > .notify-filter-menu {
    top: calc(100% + 6px);
    /* Logical only — physical left:0 fought RTL and pushed وارد past the modal right edge. */
    left: auto;
    right: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.notify-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: auto;
    right: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
    transform: none;
    min-width: 0;
    width: max-content;
    max-width: min(calc(100vw - 24px), 340px);
    padding: 6px;
    z-index: 50;
}

.notify-filter-cols {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}

.notify-filter-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}

.notify-filter-col--status {
    min-width: 118px;
    max-height: min(40vh, 320px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-inline-end: 6px;
}

.notify-filter-col--wh {
    min-width: 112px;
    max-width: 168px;
    max-height: min(40vh, 260px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-inline-start: 6px;
    border-inline-start: 1px solid var(--separator);
}

.notify-filter-col .btn-notify-sm {
    width: 100%;
    text-align: right;
    white-space: nowrap;
    color: var(--text-main);
    min-height: 36px;
    padding: 8px 10px;
}

.notifications-empty.is-loading {
    position: relative;
}
.notifications-empty.is-loading::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 10px;
    border: 2px solid var(--fill);
    border-top-color: var(--main-blue);
    border-radius: 50%;
    animation: notify-loading-spin 0.7s linear infinite;
}
@keyframes notify-loading-spin {
    to { transform: rotate(360deg); }
}

.notify-filter-empty {
    margin: 0;
    padding: 8px 6px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
}

.notify-import-dropdown {
    position: relative;
    display: inline-flex;
    z-index: 6;
}

.btn-notify-import-toggle {
    color: #007aff !important;
}
.btn-notify-import-toggle:hover {
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
}
.btn-notify-import-toggle:active {
    background: rgba(0, 122, 255, 0.14);
}

/* قائمة جرد حر / طباعة ليبل — صلبة وقابلة للنقر */
#notify-import-menu.notify-import-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    min-width: 148px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 30;
    pointer-events: auto;
}
#notify-import-menu.notify-import-menu[hidden] {
    display: none !important;
}
#notify-import-menu .btn-notify-sm {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #1d1d1f !important;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    text-align: right;
    line-height: 1.25;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
#notify-import-menu .btn-notify-sm:hover,
#notify-import-menu .btn-notify-sm:active {
    background: rgba(120, 120, 128, 0.14);
    opacity: 1;
}
#notify-import-menu .btn-notify-sm--print {
    color: #007aff !important;
}

.notify-import-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    min-width: 128px;
    padding: 6px;
    border-radius: 12px;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-elevated);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: var(--z-dropdown);
}
.notify-import-menu[hidden] {
    display: none !important;
}
.notify-import-menu .btn-notify-sm {
    width: 100%;
    text-align: right;
    padding: 8px 10px;
    border-radius: 8px;
}
.notify-import-menu .btn-notify-sm.is-active {
    background: rgba(0, 122, 255, 0.12);
    color: #007aff;
}
.notify-import-menu .btn-notify-sm:hover {
    background: rgba(120, 120, 128, 0.12);
    opacity: 1;
}

.notify-filter-menu.notify-import-menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
    left: auto;
    right: auto;
    display: block;
    flex-direction: unset;
    z-index: var(--z-dropdown);
}

.notify-import-menu .btn-notify-sm {
    color: var(--text-main);
}

.btn-notify-sm {
    border: none;
    background: transparent;
    padding: 2px 0;
    margin: 0;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
    color: #ff3b30;
    text-decoration: none;
    min-height: 0;
    transition: opacity 100ms ease-out, transform 100ms ease-out;
}

.btn-notify-sm:hover { opacity: 0.72; background: transparent; }
.btn-notify-sm:active {
    opacity: 0.55;
    transform: scale(0.97);
    background: transparent;
}

.btn-notify-sm--print {
    border: none;
    background: transparent;
    color: #007aff;
}

.btn-notify-sm--print:hover { background: transparent; opacity: 0.72; }

.notifications-list {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 16px 18px;
    display: block;
    /* LTR على الحاوية → شريط التمرير يمين؛ المحتوى RTL */
    direction: ltr;
    background: transparent;
}
.notifications-list > * {
    direction: rtl;
}

.notifications-group {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.04);
}

.notifications-empty {
    margin: 48px 0 12px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 500;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.notifications-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 36px 8px;
    min-height: 180px;
}

.btn-notify-import-excel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: none;
    background: var(--main-blue);
    color: #fff;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition:
        opacity var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        background var(--duration-ui) var(--ease-out);
}

.btn-notify-import-excel:hover {
    opacity: 1;
    transform: none;
    background: var(--blue-hover);
}
.btn-notify-import-excel:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* صف داخل مجموعة iOS */
.notification-item {
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    border: none;
    border-radius: 0;
    background: var(--card-bg);
    padding: 13px 16px;
    overflow: hidden;
    font-family: var(--font);
    display: block;
    cursor: pointer;
    box-shadow: none;
    position: relative;
    transition:
        background var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.notification-item + .notification-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: var(--hairline);
    background: var(--separator);
    pointer-events: none;
}

.notification-swipe-row + .notification-swipe-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: var(--hairline);
    background: var(--separator);
    pointer-events: none;
    z-index: 2;
}

.notification-item:hover {
    background: var(--surface-hover);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.notification-item:active {
    background: var(--surface-press);
    transform: none;
}

.notification-item-main {
    min-width: 0;
}

.notification-item-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.notification-ref {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    direction: ltr;
    text-align: left;
    font-variant-numeric: lining-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.notification-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--danger);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--primary-soft);
}

.notification-sub {
    margin: 5px 0 0;
    color: #8e8e93;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-meta-line {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    color: #aeaeb2;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.notification-meta-line > span:not(:first-child):not(.notification-ago)::before {
    content: '·';
    margin: 0 7px;
    color: #c7c7cc;
    font-weight: 400;
}

.notification-ago {
    margin-inline-start: auto;
    padding-inline-start: 10px;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
    direction: rtl;
}

.notification-ago-num {
    color: inherit;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
}

.notification-resume-text {
    color: #007aff;
    font-weight: 600;
}

.notification-select {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    padding-top: 2px;
    margin-left: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.notification-select input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #007aff;
    cursor: pointer;
}

.notification-item-body {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

.notification-item-body .notification-item-main {
    flex: 1;
    min-width: 0;
}

/* ── Session cards (مجمّع tab) ─────────────────────────── */
.notify-multi-session-card {
    cursor: pointer;
}
.notify-multi-session-card .notify-multi-session-actions {
    cursor: default;
}
.notification-main {
    min-width: 0;
    flex: 1;
}
.notification-title {
    margin: 0 0 2px;
    font-size: 0.97rem;
    font-weight: 600;
    color: #1d1d1f;
    font-family: var(--font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notification-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: var(--font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notify-multi-session-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
/* ─────────────────────────────────────────────────────── */

.notification-item.is-multi-selected {
    background: var(--surface-press);
}

.notification-item.is-multi-selected:active {
    background: #dcdcde;
}

.notification-multi-text {
    color: var(--main-blue);
    font-weight: 600;
}

.notifications-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0 0;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    direction: rtl;
    pointer-events: auto;
    animation: notify-selection-in 180ms var(--ease-out);
}

.notifications-selection-bar.is-hidden,
.notifications-selection-bar[hidden] {
    display: none !important;
}

.notifications-selection-count {
    min-width: 0;
    padding: 0 4px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.notifications-selection-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.notifications-selection-clear {
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 980px;
    background: rgba(0, 122, 255, 0.12);
    color: #007aff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 100ms ease-out, transform 100ms ease-out;
}
.notifications-selection-clear:hover {
    background: rgba(0, 122, 255, 0.18);
}
.notifications-selection-clear:active {
    transform: scale(0.96);
    background: rgba(0, 122, 255, 0.22);
}

.notifications-selection-delete {
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 980px;
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 100ms ease-out, transform 100ms ease-out;
}
.notifications-selection-delete:hover {
    background: rgba(255, 59, 48, 0.18);
}
.notifications-selection-delete:active {
    transform: scale(0.94);
    background: rgba(255, 59, 48, 0.22);
}
.notifications-selection-delete:disabled {
    opacity: 0.35;
    pointer-events: none;
}

@keyframes notify-selection-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.notifications-modal-foot {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: none;
    background: rgba(242, 242, 247, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.notifications-modal-foot::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(242, 242, 247, 0.85), transparent);
}

.notifications-modal-foot .btn--full {
    width: 100%;
    align-self: stretch;
}

.notifications-modal-foot > .btn {
    height: 42px;
    border-radius: 10px;
    font-weight: 750;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    transition: background 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.notifications-modal-foot > .btn:active {
    transform: scale(0.98);
}

.notifications-modal-foot > .btn-blue {
    width: 100%;
    max-width: none;
    min-width: 0;
    align-self: stretch;
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 750;
    box-shadow: none;
}
.notifications-modal-foot > .btn-blue:hover {
    background: #f7f7f7;
}
.notifications-modal-foot > .btn-blue:active {
    transform: scale(0.98);
}
.notifications-modal-foot > .btn-blue:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.notifications-modal-foot > .btn-notify-close {
    width: 100%;
    max-width: none;
    min-width: 0;
    align-self: stretch;
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.84rem;
    font-weight: 750;
    box-shadow: none;
}
.notifications-modal-foot > .btn-notify-close:hover {
    background: var(--primary-soft-strong);
    color: var(--primary);
}
.notifications-modal-foot > .btn-notify-close:active {
    transform: scale(0.98);
}
.notifications-modal-foot > .btn-notify-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.notifications-modal-foot > .btn-notify-open-multi {
    background: #007aff;
    color: #fff;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.25);
}

.notifications-modal-foot > .btn-notify-open-multi:hover {
    background: #0066d6;
}

.notifications-modal-foot > .btn-notify-open-multi:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* —— أرشيف المناقلات — feed كبير شبه الشاشة (مرجع list UI) —— */
#modal-notify-archive.modal-overlay.active {
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(45, 55, 72, 0.45);
}
#modal-notify-archive #notify-archive-console.notify-archive-shell,
#notify-archive-console.notify-archive-shell {
  width: min(1100px, 96vw) !important;
  max-width: min(1100px, 96vw) !important;
  height: min(92vh, 900px) !important;
  max-height: min(92vh, 900px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: var(--hairline) solid rgba(255, 255, 255, 0.65) !important;
  background: #fff !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22) !important;
  color: var(--text-main);
  font-family: var(--font) !important;
}
.notify-archive-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.notify-archive-pane[hidden] {
  display: none !important;
}
.notify-archive-hero {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7f8fb 0%, #fff 100%);
  border-bottom: var(--hairline) solid var(--separator);
}
.notify-archive-hero-main {
  min-width: 0;
  position: relative;
  z-index: 1;
}
.notify-archive-hero-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #2d3748;
  line-height: 1.15;
}
.notify-archive-hero-count {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}
.notify-archive-watermark {
  position: absolute;
  inset-inline-end: 18px;
  top: 8px;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(148, 163, 184, 0.18);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}
#notify-archive-dir-tabs {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  border: var(--hairline) solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(120, 120, 128, 0.1);
}
#notify-archive-dir-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 16px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text-muted);
  cursor: pointer;
}
#notify-archive-dir-tabs button.is-active {
  background: #fff;
  color: var(--text-main);
}
#notify-archive-dir-tabs button:active {
  transform: scale(0.98);
}
.notify-archive-controls {
  flex-shrink: 0;
  padding: 12px 28px 10px;
  border-bottom: var(--hairline) solid var(--separator);
  background: #fff;
}
.notify-archive-status-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 10px;
}
.notify-archive-status-row::-webkit-scrollbar { display: none; }
.notify-archive-chip {
  appearance: none;
  border: var(--hairline) solid var(--border-color);
  background: #fff;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.notify-archive-chip.is-active {
  border-color: transparent;
  background: rgba(120, 120, 128, 0.14);
  color: var(--text-main);
}
.notify-archive-chip:active { transform: scale(0.97); }
.notify-archive-filters {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 0.9fr 1fr;
  gap: 8px;
}
.notify-archive-field {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border: var(--hairline) solid var(--border-color);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--text-main);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  outline: none;
}
.notify-archive-field:focus {
  border-color: rgba(0, 122, 255, 0.45);
  box-shadow: var(--focus-ring);
  background: #fff;
}
.notify-archive-feed {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
}
.notify-archive-empty {
  margin: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
}
.notify-archive-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 20px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 18px 28px;
  border: 0;
  border-bottom: var(--hairline) solid #e8ecf1;
  background: #fff;
  text-align: right;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--duration-fast) var(--ease-out);
}
.notify-archive-item:hover { background: #f8fafc; }
.notify-archive-item:active { background: var(--surface-press); }
.notify-archive-item-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.12);
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.4;
}
.notify-archive-item-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.notify-archive-item-desc {
  margin: 0 0 8px;
  font-size: 0.86rem;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.45;
}
.notify-archive-item-meta {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--primary);
}
.notify-archive-item-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  direction: ltr;
}
.notify-archive-item-when svg {
  width: 14px;
  height: 14px;
  opacity: 0.75;
}
.notify-archive-detail-sheet {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 12px 20px;
  border-radius: 12px;
  background: #fff;
  border: var(--hairline) solid var(--separator);
}
.notify-archive-foot {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-top: var(--hairline) solid var(--separator);
  background: #fafafa;
}
.notify-archive-detail-foot {
  justify-content: flex-start;
}
@media (max-width: 720px) {
  #modal-notify-archive.modal-overlay.active { padding: 8px; }
  #modal-notify-archive #notify-archive-console.notify-archive-shell,
  #notify-archive-console.notify-archive-shell {
    width: min(100%, 98vw) !important;
    max-width: min(100%, 98vw) !important;
    height: min(94vh, 920px) !important;
    max-height: min(94vh, 920px) !important;
    border-radius: 14px !important;
  }
  .notify-archive-hero { padding: 16px 16px 12px; }
  .notify-archive-controls { padding: 10px 16px; }
  .notify-archive-filters { grid-template-columns: 1fr 1fr; }
  .notify-archive-filters #notify-archive-q { grid-column: 1 / -1; }
  .notify-archive-item { padding: 16px; grid-template-columns: 1fr; }
  .notify-archive-item-when { justify-self: start; }
  .notify-archive-watermark { font-size: 2.4rem; inset-inline-end: 10px; }
}

#match-modal.is-archive-readonly .match-scan-row,
#match-modal.is-archive-readonly #btn-match-add,
#match-modal.is-archive-readonly #btn-match-undo {
  opacity: 0.55;
  pointer-events: none;
}

.notifications-modal-foot > .btn-notify-open-multi.is-hidden,
.notifications-modal-foot > .btn-notify-open-multi[hidden],
.notifications-modal-foot > .btn-blue.is-hidden,
.notifications-modal-foot > .btn-blue[hidden],
.notifications-modal-foot > .btn-notify-close.is-hidden,
.notifications-modal-foot > .btn-notify-close[hidden] {
    display: none !important;
}

/* سحب الإشعار لليمين للحذف */
.notification-swipe-row {
    position: relative;
    overflow: hidden;
    background: #ff3b30;
    touch-action: pan-y;
}
.notification-swipe-behind {
    position: absolute;
    inset: 0 auto 0 0;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
    transform: scale(0.92);
    transition: opacity 90ms cubic-bezier(0.23, 1, 0.32, 1), transform 90ms cubic-bezier(0.23, 1, 0.32, 1);
}
.notification-swipe-row.is-armed .notification-swipe-behind,
.notification-swipe-row.is-deleting .notification-swipe-behind {
    opacity: 1;
    transform: scale(1);
}
.notification-swipe-front {
    position: relative;
    z-index: 1;
    background: #fff;
    will-change: transform;
    transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.notification-swipe-row.is-dragging .notification-swipe-front {
    transition: none;
}
.notification-swipe-row.is-deleting {
    transition: height 140ms cubic-bezier(0.23, 1, 0.32, 1), opacity 120ms ease-out, margin 140ms ease-out;
}
.notification-swipe-row.is-deleting .notification-swipe-front {
    transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 100ms ease-out;
    opacity: 0;
}
.notification-swipe-row.is-locked .notification-swipe-behind {
    opacity: 0.28;
}

.notification-item.is-gone {
    opacity: 0.92;
}
.notification-item.is-held {
    background: #fef2f2;
}
.notification-item.is-done {
    background: #f0fdf4;
}
.notification-item.is-held:hover {
    background: #fde8e8;
}
.notification-item.is-done:hover {
    background: #e8f8ee;
}
.notification-item.is-held:active {
    background: #fce4e4;
}
.notification-item.is-done:active {
    background: #dff5e6;
}
.notification-item.is-done .notification-ref {
    color: #248a3d;
}
.notification-item.is-held .notification-ref {
    color: #b91c1c;
}
.notification-item.is-muted .notification-ref {
    color: var(--text-muted, #6e6e73);
}
.notification-item.is-muted .notification-sub,
.notification-item.is-muted .notification-meta-line {
    color: var(--text-tertiary, #aeaeb2);
}
.notification-status--done {
    color: #248a3d !important;
    font-weight: 700;
}
.notification-status--held {
    color: #b91c1c !important;
    font-weight: 700;
}
.notification-gone-text {
    color: #64748b;
    font-weight: 600;
}

/* معاينة المناقلة — نفس روح المواد */
.transfer-preview-modal {
    width: min(920px, 96vw) !important;
    max-width: min(920px, 96vw) !important;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #f2f2f7;
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.18);
}

#modal-transfer-preview .transfer-preview-modal,
#modal-transfer-reverse .transfer-preview-modal,
#modal-stock-quick-report .transfer-preview-modal {
    width: min(1180px, 98vw) !important;
    max-width: min(1180px, 98vw) !important;
}
.transfer-preview-actions.is-outgoing {
    display: flex;
    flex-direction: column-reverse;
}

#modal-transfer-preview .transfer-preview-actions.is-outgoing {
    display: flex;
    flex-direction: row;
}

.transfer-preview-head {
    text-align: right;
    margin: 0;
    padding: 18px 18px 12px;
    background: rgba(242, 242, 247, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    z-index: 10;
}

.transfer-preview-head-top {
    display: block;
    position: relative;
    min-height: 40px;
    padding-left: 48px;
    padding-right: 12px;
}

.transfer-preview-head-tools {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    z-index: 12;
}

.transfer-preview-head-tools.is-hidden {
    display: none;
}

.transfer-preview-head-text {
    text-align: right;
    width: 100%;
}

.transfer-reverse-settings {
    flex-shrink: 0;
    margin: 0 16px 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.04);
}

.transfer-reverse-settings .export-settings {
    margin: 0;
    gap: 12px;
}

.transfer-reverse-search-wrap {
    margin-top: 12px;
}

.transfer-reverse-search-wrap .match-search {
    width: 100%;
}

#transfer-reverse-to-group select,
#transfer-reverse-to-group input.warehouse-readonly {
    width: 100%;
}

.transfer-preview-title {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #1d1d1f;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
}

.transfer-preview-meta {
    margin: 0;
    color: #8e8e93;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.transfer-preview-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 0 16px 12px;
    border: none;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.04);
    /* ltr على الحاوية → شريط التمرير يمين؛ المحتوى يبقى rtl */
    direction: ltr;
    position: relative;
    z-index: 1;
}
.transfer-preview-table-wrap > * {
    direction: rtl;
}

.transfer-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
}

.transfer-preview-table th,
.transfer-preview-table td {
    padding: 11px 14px;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);
    text-align: right;
    font-size: 0.9rem;
}

#modal-transfer-preview .match-tools-menu {
    z-index: 100;
}

.transfer-preview-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 600;
    color: #8e8e93;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.transfer-preview-table tbody tr:last-child td {
    border-bottom: none;
}

.transfer-preview-table .col-seq { width: 48px; text-align: center; color: #aeaeb2; }
.transfer-preview-table .col-code {
    width: 140px;
    font-family: inherit;
    font-weight: 600;
    direction: ltr;
    text-align: right;
    color: inherit;
}
.transfer-preview-table thead th.col-code {
    font-family: inherit;
    font-weight: 600;
    color: #8e8e93;
    text-align: right;
    direction: rtl;
}
.transfer-preview-table tbody td.col-code {
    color: #1d1d1f;
    text-align: right;
}
.transfer-preview-table .col-num {
    width: 88px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.transfer-preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 12px 16px 16px;
    background: rgba(242, 242, 247, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

#modal-transfer-preview .transfer-preview-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px 16px;
}

#modal-stock-quick-report .transfer-preview-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px 16px;
}

#modal-transfer-preview .transfer-preview-actions.is-outgoing {
    flex-direction: row;
}

#modal-transfer-preview .transfer-preview-actions .btn,
#modal-stock-quick-report .transfer-preview-actions .btn {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
}

.transfer-preview-actions .btn {
    height: 44px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 100ms ease-out, opacity 100ms ease-out, background 100ms ease-out;
}
.transfer-preview-actions .btn:active {
    transform: scale(0.985);
}

.transfer-preview-actions .btn-blue {
    background: #fff;
    color: #007aff;
    border: none;
    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.04);
}
.transfer-preview-actions .btn-blue:hover {
    background: #fafafa;
    border: none;
}

.transfer-preview-actions .btn-export {
    background: var(--surface-hover);
    color: var(--text-main);
    border: var(--hairline) solid var(--border-color);
}
.transfer-preview-actions .btn-export:hover {
    background: var(--surface-press);
    border-color: var(--border-color);
}

#modal-transfer-preview .transfer-preview-actions #btn-transfer-preview-match {
    background: var(--main-blue);
    color: #fff;
    border: none;
}
#modal-transfer-preview .transfer-preview-actions #btn-transfer-preview-match:hover {
    background: var(--blue-hover);
}

.label-manual-scan-area {
    border-bottom: none;
    padding-bottom: 12px;
}
#modal-label-manual-scan .label-manual-line-qty {
    width: 100%;
    max-width: 4.5em;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: transparent;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: inherit;
    padding: 2px 4px;
    border-radius: 6px;
}
#modal-label-manual-scan .label-manual-line-qty:focus {
    border-color: var(--border-color);
    background: #fff;
    outline: none;
}

/* سحب الصف لليمين → حذف (بدون زر) */
#modal-label-manual-scan .label-manual-swipe-row {
    position: relative;
    touch-action: pan-y;
    background: transparent;
}
#modal-label-manual-scan .label-manual-swipe-row.is-dragging,
#modal-label-manual-scan .label-manual-swipe-row.is-armed,
#modal-label-manual-scan .label-manual-swipe-row.is-deleting {
    background: #ff3b30;
    z-index: 2;
}
#modal-label-manual-scan .label-manual-swipe-row::after {
    content: 'حذف';
    position: absolute;
    inset: 0 auto 0 0;
    width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 90ms ease, transform 90ms ease;
    z-index: 0;
}
#modal-label-manual-scan .label-manual-swipe-row.is-armed::after,
#modal-label-manual-scan .label-manual-swipe-row.is-deleting::after {
    opacity: 1;
    transform: scale(1);
}
#modal-label-manual-scan .label-manual-swipe-row > td {
    position: relative;
    z-index: 1;
    background: #fff;
    transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
#modal-label-manual-scan .label-manual-swipe-row.is-dragging > td {
    transition: none;
}
.product-price-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.25;
}
.product-price-val {
    font-weight: 700;
}
.product-discount-note {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c62828;
}
#modal-label-manual-scan .transfer-preview-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
    .transfer-preview-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #modal-transfer-preview .transfer-preview-actions {
        display: flex;
        flex-direction: row;
    }
    #modal-stock-quick-report .transfer-preview-actions {
        display: flex;
        flex-direction: row;
    }
    #modal-label-manual-scan .transfer-preview-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-transparency: reduce) {
    .notifications-modal-head,
    .notifications-modal-foot,
    .transfer-preview-head,
    .transfer-preview-actions,
    .transfer-preview-table thead th {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #f2f2f7;
    }
    .transfer-preview-table thead th { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    .notification-item.notification-item--arrive,
    .notifications-selection-bar {
        animation: none !important;
    }
    .notification-item,
    .btn-notify-sm,
    .btn-notify-import-excel,
    .notifications-modal-foot .btn,
    .notifications-selection-clear,
    .notifications-selection-delete,
    .notifications-selection-bar,
    .transfer-preview-actions .btn,
    .notification-swipe-front,
    .option-card,
    .btn,
    .top-action-btn,
    .btn-resume-work,
    .modal-overlay,
    .modal-content,
    .toast,
    .alert-card-btn {
        transition: none !important;
        animation: none !important;
    }
    .modal-overlay.active .modal-content,
    .toast.show {
        transform: none !important;
    }
}

@media (prefers-contrast: more) {
    .notifications-group,
    .transfer-preview-table-wrap {
        border: 1px solid #1d1d1f;
    }
    .notification-item + .notification-item::before {
        background: #1d1d1f;
    }
    .notification-sub,
    .notification-meta-line,
    .transfer-preview-meta {
        color: #3a3a3c;
    }
}

/* ============================================================
   Match / Receive reconciliation modal
   ============================================================ */
.modal-content.match-modal,
.match-modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: min(94vh, 960px);
    height: min(94vh, 960px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--hairline) solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-color);
    box-shadow: var(--shadow-elevated);
    min-height: 0;
}

.match-head {
    flex-shrink: 0;
    padding: 16px 20px 12px;
    text-align: center;
    border-bottom: var(--hairline) solid var(--separator);
    background: rgba(242, 242, 247, 0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    z-index: 4;
}

.match-head-top {
    display: block;
    position: relative;
    min-height: 40px;
    padding-inline: 48px;
}

.match-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 40px;
}

.match-head-spacer {
    display: none;
}

.match-title {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    font-family: var(--font);
    letter-spacing: -0.02em;
    color: var(--text-main);
    text-align: center;
    line-height: 1.2;
}

.match-inventory-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.6em;
    padding: 4px 10px;
    border-radius: 10px;
    background: rgba(0, 122, 255, 0.12);
    color: #007aff;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1.2;
    direction: ltr;
    unicode-bidi: isolate;
}
.match-inventory-timer.is-hidden,
.match-inventory-timer[hidden] {
    display: none !important;
}
.match-inventory-timer.is-stopped {
    background: rgba(52, 199, 89, 0.14);
    color: #1b7f3a;
}

.match-meta {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.match-offline-banner {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 149, 0, 0.14);
    color: #9a5b00;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}
.match-offline-banner.is-hidden,
.match-offline-banner[hidden] {
    display: none !important;
}

.match-complete-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 0;
    padding: 16px 18px;
    border-radius: 14px;
    background: #ecfdf3;
    border: 2px solid var(--success);
    color: #15803d;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.55;
    text-align: center;
    animation: matchCompleteBannerIn 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.match-complete-banner.is-hidden,
.match-complete-banner[hidden] {
    display: none !important;
}
.match-complete-banner-text {
    color: #15803d;
}
@keyframes matchCompleteBannerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* اكتمال الجرد يستخدم .alert-overlay / .alert-card */

@media (prefers-reduced-motion: reduce) {
    .match-complete-banner,
    #match-complete-card.match-complete-card--enter {
        animation: none !important;
    }
}

.match-no-barcode {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 59, 48, 0.12);
    color: #c62828;
    font-size: 0.72rem;
    font-weight: 700;
}

/* لوحة منسدلة: ملخص / تصفية */
.match-panel {
    flex-shrink: 0;
    padding: 0 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.match-panel.is-collapsed,
.match-panel.is-hidden,
.match-panel[hidden] {
    display: none !important;
}
.match-panel-body {
    width: 100%;
    overflow: hidden;
    margin-top: 0;
}

.match-panel--summary .match-panel-body,
.match-panel--filters .match-panel-body {
    max-height: none;
    opacity: 1;
    pointer-events: auto;
}
#modal-match .match-panel--summary {
    padding: 0 12px 8px;
}
#modal-match .match-panel--filters {
    padding: 0;
}
#modal-match .match-summary {
    padding: 10px 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}
#modal-match .match-sum-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
#modal-match .match-sum-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 11px;
    border-radius: var(--radius-pill);
    background: var(--fill);
    font-family: var(--font);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.25;
}
#modal-match .match-sum-chip strong {
    font-size: 0.86rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}
#modal-match .match-sum-chip--matched strong { color: #248a3d; }
#modal-match .match-sum-chip--shortage strong { color: var(--primary); }
#modal-match .match-sum-chip--surplus strong { color: var(--main-blue); }
#modal-match .match-sum-chip--extra strong { color: #9a3412; }
#modal-match .match-ops-tabs {
    padding: 0 14px;
    justify-content: center;
    font-family: var(--font);
}
#modal-match .match-ops-tabs .ops-tab {
    font-family: var(--font);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 10px 12px;
}
#modal-match .match-ops-tabs .ops-tab.is-active {
    color: var(--main-blue);
    border-bottom-color: var(--main-blue);
}
#modal-match .match-ops-tabs .ops-tab:focus-visible {
    color: var(--main-blue);
}
.match-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    background: var(--fill);
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    line-height: 1.25;
}

.match-chip strong {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text-main);
}

/* لون الرقم فقط — الخلفية موحّدة هادئة */
.match-chip--matched strong { color: #248a3d; }
.match-chip--shortage strong { color: var(--primary); }
.match-chip--surplus strong { color: var(--main-blue); }
.match-chip--extra strong { color: #9a3412; }
.match-chip--pending strong { color: var(--text-muted); }
.match-chip--scanned strong { color: var(--text-main); }
.match-chip--qty strong { color: var(--text-main); }
.match-chip--amount strong { color: var(--text-main); }

.match-price-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}
.match-price-val {
    font-weight: 900;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    color: #0f172a;
    letter-spacing: 0.02em;
    direction: ltr;
}
.match-price-discount {
    font-size: 0.72rem;
    font-weight: 900;
    color: #c2410c;
    background: #ffedd5;
    border-radius: 999px;
    padding: 1px 7px;
}
.match-price-before {
    font-size: 0.75rem;
    color: #94a3b8;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, Consolas, monospace;
    direction: ltr;
}

.match-head-tools {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    z-index: 5;
}

.match-tools-toggle {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: var(--fill);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background var(--duration-ui) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.match-tools-toggle:hover {
    background: var(--fill-strong);
}
.match-tools-toggle:active {
    transform: scale(0.97);
}

.match-tools-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-elevated);
    border: var(--hairline) solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 30;
}
.match-tools-menu[hidden] {
    display: none !important;
}
.match-tools-divider {
    height: var(--hairline);
    background: var(--separator);
    margin: 4px 6px;
}
.match-tools-item {
    border: none;
    background: transparent;
    text-align: right;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
.match-tools-item:hover {
    background: var(--fill);
}
.match-tools-item--toggle .match-tools-check {
    opacity: 0;
    color: var(--main-blue);
    font-weight: 800;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.match-tools-item--toggle.is-on .match-tools-check {
    opacity: 1;
}
.match-tools-item--parent {
    justify-content: space-between;
    font-weight: 700;
}
.match-tools-chevron {
    opacity: 0.55;
    font-size: 1.1rem;
    line-height: 1;
}
.match-tools-submenu-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 2px;
}
.match-tools-submenu-panel[hidden] {
    display: none !important;
}
.match-tools-item--sub {
    font-size: 0.88rem;
    font-weight: 600;
    padding-inline: 14px 10px;
}
.match-tools-free-block[hidden],
.match-tools-free-block.is-hidden,
.match-tools-item.is-hidden,
.match-tools-item[hidden] {
    display: none !important;
}

.match-table-toolbar {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0;
}
.match-search-wrap {
    flex: 1;
    min-width: 0;
}
.match-panel--search {
    padding: 0 14px 8px;
}
.match-panel--search .match-search {
    box-shadow: var(--shadow-soft);
}
.match-search {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: #fff;
    padding: 0 14px;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 500;
    color: #1d1d1f;
    box-shadow: var(--shadow-soft);
    outline: none;
    box-sizing: border-box;
}
.match-search::placeholder {
    color: var(--text-tertiary);
}
.match-table-focus-btn {
    flex-shrink: 0;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: rgba(120, 120, 128, 0.16);
    color: #1d1d1f;
    padding: 0 14px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    white-space: nowrap;
}
.match-table-focus-btn:hover,
.match-table-focus-btn.is-active {
    background: rgba(0, 122, 255, 0.12);
    color: var(--main-blue);
}

/* وضع الجدول فقط: أخفِ المسح وآخر صنف — الملخص/البحث/التصفية تظهر إن فُتحت من القائمة */
.match-modal--table-focus .match-scan-area,
.match-modal--table-focus .match-last {
    display: none !important;
}
.match-modal--table-focus .match-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

.ops-tabs.is-hidden {
  display: none !important;
}

.match-pick-modal {
    max-width: 520px;
    width: min(520px, 94vw);
    max-height: min(80vh, 640px);
    display: flex;
    flex-direction: column;
    padding: 20px 18px 16px;
    overflow: hidden;
}

.match-pick-title {
    margin: 0 0 4px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 900;
}

.match-pick-lead {
    margin: 0 0 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.match-pick-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    direction: ltr;
}
.match-pick-list > * {
    direction: rtl;
}

.match-pick-item {
    width: 100%;
    text-align: right;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
}

.match-pick-item:hover {
    border-color: var(--primary);
    background: #fff5f5;
}

.match-pick-item-name {
    display: block;
    font-weight: 900;
    direction: ltr;
    text-align: left;
    margin-bottom: 4px;
}

.match-pick-item-meta {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 700;
}

.match-scan-area {
    flex-shrink: 0;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-color);
}

.match-scan-fields {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 12px;
    margin-bottom: 10px;
}

.match-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.match-field label {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
}

.match-field input {
    height: 48px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 0 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    direction: ltr;
    text-align: center;
    background: #fff;
}

.match-field--qty {
    -webkit-touch-callout: none;
}

.match-field--qty.is-qty-pinned label {
    color: var(--primary);
}

.match-field--qty.is-qty-pinned input {
    border-color: var(--primary);
    border-width: 2.5px;
    background: #ffe8e8;
    color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 7, 1, 0.28);
}

.match-field--barcode input {
    font-size: 1.35rem;
    letter-spacing: 0.6px;
}

.match-scan-btns {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 10px;
}

.match-scan-btns .btn {
    width: 100%;
    margin: 0;
    height: 46px;
}

.btn-match-redo {
    border: 1.5px solid var(--border-color);
    background: #fff;
    color: var(--main-blue);
    border-radius: 12px;
    font-family: var(--font);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
}
.btn-match-redo:hover:not(:disabled) {
    border-color: var(--main-blue);
    background: rgba(0, 122, 255, 0.06);
}
.btn-match-redo:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.match-last {
    flex-shrink: 0;
    margin: 0 16px 10px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    box-shadow: none;
}

.match-last-empty {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
}

.match-last--matched,
.match-last--shortage,
.match-last--surplus,
.match-last--pending {
    background: #f8fafc;
    border-color: var(--border-color);
}
.match-last--price-mismatch {
    border-color: #f87171;
}

.match-last-main { min-width: 0; flex: 1; text-align: right; }
.match-last-code-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 8px;
    direction: rtl;
}
.match-last-code {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}
.match-last-desc {
    margin-top: 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-last-msg {
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--text-main);
}

.match-last-nums {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.match-last-nums div {
    min-width: 64px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 8px;
}

.match-last-nums span {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted);
}

.match-last-nums strong {
    display: block;
    margin-top: 2px;
    font-size: 1.1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.match-last-nums strong.is-neg { color: #b91c1c; }
.match-last-nums strong.is-pos { color: #15803d; }

.match-table-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding: 0 12px 8px;
    position: relative;
    z-index: 1;
}
.match-table-wrap.scroll-rtl {
    direction: ltr;
}
.match-table-wrap.scroll-rtl > * {
    direction: rtl;
}

.match-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font);
    table-layout: fixed;
}

.match-table th,
.match-table td {
    padding: 10px 8px;
    border-bottom: var(--hairline) solid var(--separator);
    vertical-align: middle;
    font-size: 0.98rem;
}

.match-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 9px 8px;
    text-align: center;
    vertical-align: middle;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: -0.01em;
    line-height: 1.3;
    background: #fff;
    border-bottom: var(--hairline) solid var(--border-color);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.match-table thead th.col-prod {
    text-align: right;
    padding-inline-end: 10px;
}
.match-table thead th.col-seq,
.match-table thead th.col-num,
.match-table thead th.col-price,
.match-table thead th.col-source,
.match-table thead th.col-status,
.match-table thead th.col-adj {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-muted);
}
.match-th-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    max-width: 100%;
    line-height: 1.2;
}
.match-th-main {
    font-size: 0.74rem;
    font-weight: 750;
    color: var(--text-main);
    white-space: nowrap;
}
.match-th-sub {
    font-size: 0.62rem;
    font-weight: 650;
    color: var(--text-muted);
    white-space: nowrap;
}
.match-th-label {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
}

.match-table .col-prod,
.match-table .match-cell-prod {
    text-align: right;
    min-width: 0;
}
.match-prod-name {
    text-align: right;
}

.match-table tbody tr.match-row:nth-child(even) {
    background: rgba(242, 242, 247, 0.55);
}
.match-table tbody tr.match-row:hover {
    background: var(--surface-hover);
}

.match-prod-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.match-copy-bc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--fill);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.match-copy-bc svg,
.match-scan-times-btn svg {
    pointer-events: none;
}
.match-copy-bc:hover {
    background: var(--blue-soft);
    color: var(--main-blue);
}
.match-copy-bc:active {
    transform: scale(0.94);
}
.match-copy-bc.is-copied {
    background: rgba(52, 199, 89, 0.16);
    color: #1b7a34;
}

.match-table .col-seq { width: 40px; text-align: center; color: #94a3b8; font-weight: 700; }
.match-table .col-num,
.match-table .match-cell-exp,
.match-table .match-cell-qty,
.match-table .match-cell-diff {
    width: 76px;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 1.06rem;
    color: var(--text-main);
}
.match-table .col-price,
.match-table .match-cell-price,
.match-table .match-cell-status {
    text-align: center;
    vertical-align: middle;
    font-size: 1.02rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}
.match-table .col-price { width: 120px; }
.match-table .col-status { width: 96px; }
.match-table .col-adj { width: 100px; text-align: center; white-space: nowrap; }
.match-table .col-source,
.match-table .match-cell-source {
    width: 112px;
    min-width: 96px;
    max-width: 132px;
    text-align: center;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    direction: rtl;
}
.match-table thead th.col-source {
    white-space: nowrap;
    direction: rtl;
    letter-spacing: 0;
}
.match-source-label {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}
.match-table .col-num.is-neg { color: #b91c1c; background: #fef2f2; }
.match-table .col-num.is-pos { color: #15803d; background: #f0fdf4; }

.match-row--discount {
    background: #fff7ed;
}
.match-row--price-mismatch {
    background: #fef2f2;
    box-shadow: inset 3px 0 0 #dc2626;
}
.match-row--discount.match-row--price-mismatch {
    background: #fff1f2;
}

.match-price-flag {
    margin-top: 6px;
    border: 1px solid #fdba74;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 10px;
    padding: 8px 12px;
    min-height: 36px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.match-price-flag.is-on {
    border-color: #f87171;
    background: #fee2e2;
    color: #b91c1c;
}

.match-last-price {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-muted);
}
.match-last-price-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}
.match-last-price-val {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums;
    color: var(--text-main) !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.match-last-price-discount {
    font-size: 0.8rem;
    font-weight: 800;
    color: #c2410c;
    background: #ffedd5;
    border-radius: 999px;
    padding: 2px 8px;
}
.match-last-price.has-discount .match-last-price-val { color: #c2410c !important; }
.match-last-price.has-mismatch .match-last-price-val { color: #b91c1c !important; }
.match-last--price-mismatch {
    border-color: #f87171 !important;
}

.match-prod-name {
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.35;
    font-size: 0.98rem;
    white-space: normal;
    overflow-wrap: anywhere;
}
.match-scan-times-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 100ms ease-out, transform 100ms ease-out;
}
.match-scan-times-btn:hover {
    background: rgba(0, 122, 255, 0.16);
}
.match-scan-times-btn:active {
    transform: scale(0.94);
}

.match-scan-times-sheet {
    width: min(420px, calc(100vw - 28px));
    max-height: min(70vh, 520px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-elevated);
    direction: rtl;
    text-align: right;
    font-family: var(--font);
}
.match-scan-times-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
}
.match-scan-times-sub {
    margin: 4px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.match-scan-times-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: min(42vh, 320px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.match-scan-times-item {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(242, 242, 247, 0.95);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
}
.match-scan-times-empty {
    padding: 16px 8px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.88rem;
}

.match-scan-attempts-sheet {
    width: min(460px, calc(100vw - 28px));
    max-height: min(72vh, 560px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-elevated);
    direction: rtl;
    text-align: right;
    font-family: var(--font);
}
.match-scan-attempts-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
}
.match-scan-attempts-sub {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: #64748b;
}
.match-scan-attempts-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 120px;
    max-height: min(48vh, 400px);
}
.match-scan-attempts-item {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.84rem;
    line-height: 1.45;
    color: #334155;
    overflow-wrap: anywhere;
}
.match-scan-attempts-item--ok { color: #15803d; }
.match-scan-attempts-item--missing,
.match-scan-attempts-item--wrong_focus,
.match-scan-attempts-item--rejected_surplus,
.match-scan-attempts-item--invalid_arabic,
.match-scan-attempts-item--invalid_url,
.match-scan-attempts-item--empty,
.match-scan-attempts-item--extra_added { color: #9a3412; }
.match-scan-attempts-empty {
    margin: 0;
    padding: 12px 4px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.92rem;
}

.match-prod-code {
    margin-top: 3px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'Cairo', sans-serif;
    direction: ltr;
    unicode-bidi: embed;
}

.match-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
}
.match-status--matched { background: rgba(52, 199, 89, 0.16); color: #1b7a34; }
.match-status--shortage { background: var(--primary-soft-strong); color: #b91c1c; }
.match-status--surplus { background: var(--blue-soft); color: #0b5ed7; }
.match-status--extra { background: #ffedd5; color: #9a3412; }
.match-row--extra { --match-row-accent: #fb923c; }
.match-status--pending { background: var(--fill); color: var(--text-muted); }

.match-adj-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    cursor: pointer;
    margin: 0 2px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.match-adj-btn:hover { border-color: var(--main-blue); color: var(--main-blue); }

.match-empty-row {
    text-align: center;
    color: var(--text-muted);
    font-weight: 700;
    padding: 28px 8px !important;
}

.match-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom, 0px));
    border-top: var(--hairline) solid var(--separator);
    background: rgba(242, 242, 247, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    direction: ltr;
    position: sticky;
    bottom: 0;
    z-index: 6;
}
.match-actions.has-diff-export {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.match-actions .btn,
.match-actions .btn-match-reset,
.match-actions .btn-match-export {
    width: 100%;
    margin: 0;
    min-height: 44px;
    grid-column: auto;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    box-sizing: border-box;
    box-shadow: none;
    transition: background 140ms var(--ease-out), color 140ms var(--ease-out), transform 100ms var(--ease-out);
}
.match-actions .btn:active,
.match-actions .btn-match-reset:active,
.match-actions .btn-match-export:active {
    transform: scale(0.98);
}

/* تصدير: ثانوي هادئ مثل أزرار النظام البيضاء */
.btn-match-export {
    border: none;
    background: #fff;
    color: var(--main-blue);
    font-family: var(--font);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}
.btn-match-export:hover {
    background: #fafafa;
    color: var(--main-blue);
}
.btn-match-export-diff {
    background: #fff;
    color: var(--text-main);
}
.btn-match-export-diff:hover {
    background: #fafafa;
    color: var(--text-main);
}
.btn-match-export-diff.is-hidden,
.btn-match-export-diff[hidden] {
    display: none !important;
}

/* تصفير: أحمر النظام فقط */
.btn-match-reset {
    border: none;
    background: var(--primary);
    color: #fff;
    font-family: var(--font);
    font-weight: 700;
    cursor: pointer;
    padding: 10px 12px;
}
.btn-match-reset:hover {
    background: var(--primary-hover);
    color: #fff;
    text-decoration: none;
}

.match-actions .btn-confirm-cancel {
    background: var(--fill);
    color: var(--text-main);
    border: none;
}
.match-actions .btn-confirm-cancel:hover {
    background: var(--fill-strong);
}

/* ============================================================
   Label Print Modal
   ============================================================ */
.label-print-modal {
    width: min(760px, 96vw);
    max-width: min(760px, 96vw);
    max-height: min(92vh, 900px);
    height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 18px;
    min-height: 0;
    box-sizing: border-box;
}

.label-print-head {
    flex: 0 0 auto;
    padding: 20px 22px 12px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.label-print-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
}

.btn-label-excel-sm {
    margin-inline-start: auto;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--main-blue);
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-label-excel-sm:hover {
    border-color: var(--main-blue);
    background: rgba(37, 99, 235, 0.06);
}

.label-print-qty-input {
    width: 72px;
    padding: 6px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    font-variant-numeric: normal;
    color: var(--main-blue);
    background: #fff;
    direction: ltr;
}

.label-print-qty-input:focus {
    outline: none;
    border-color: var(--main-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.label-print-qty-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.label-print-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
    flex-wrap: wrap;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.label-print-search-wrap {
    padding: 0 18px 12px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.label-print-search {
    width: 100%;
    max-width: 100%;
    height: 40px;
    box-sizing: border-box;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    padding: 0 14px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main, #1d1d1f);
    outline: none;
    display: block;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.label-print-search::placeholder {
    color: var(--text-muted, #8e8e93);
    font-weight: 500;
}

.label-print-search:focus {
    border-color: var(--primary, #007aff);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14);
}

.label-print-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.label-print-select-all input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.label-print-selected-count {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted);
}

.label-print-batch-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    color: var(--main-blue);
}

.label-print-batch-toggle-wrap:has(input:checked) {
    border-color: var(--main-blue);
    background: #eff6ff;
}

.label-print-batch-toggle-wrap input {
    width: 16px;
    height: 16px;
    accent-color: var(--main-blue);
}

.label-print-batch-bar {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.label-print-batch-hint {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-main);
    margin-bottom: 10px;
}

.label-print-batch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.label-print-batch-chip {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.label-print-batch-chip:hover {
    border-color: var(--main-blue);
}

.label-print-batch-chip.is-active {
    border-color: var(--main-blue);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.label-print-batch-chip.is-done {
    border-color: #16a34a;
    background: #f0fdf4;
}

.label-print-batch-chip.is-done.is-active {
    border-color: var(--main-blue);
}

.label-print-batch-chip-num {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--main-blue);
    line-height: 1.1;
}

.label-print-batch-chip.is-done .label-print-batch-chip-num {
    color: #15803d;
}

.label-print-batch-chip-range {
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.label-print-batch-chip-check {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 0.75rem;
    color: #16a34a;
    font-weight: 900;
}

.label-print-table-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    max-height: none;
    padding: 0 10px;
    margin: 0 12px 8px;
    direction: ltr;
    box-sizing: border-box;
    width: auto;
}
.label-print-table-wrap > * {
    direction: rtl;
}

.label-print-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Cairo', sans-serif;
    table-layout: fixed;
}

.label-print-table th,
.label-print-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.label-print-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--text-muted);
    z-index: 1;
}

.label-print-table .col-check,
#transfer-reverse-table-wrap .col-check {
    width: 36px;
    text-align: center;
}

.label-print-table .col-seq {
    width: 44px;
    text-align: center;
    font-weight: 800;
}

.label-print-table .col-qty,
.label-print-table .col-print-qty {
    width: 90px;
    text-align: center;
    font-weight: 900;
    font-variant-numeric: lining-nums;
}

.label-print-table .col-print-qty {
    color: var(--main-blue);
}

.label-print-table tr.is-deselected,
#transfer-reverse-table-wrap tr.is-deselected {
    opacity: 0.45;
}

.label-print-table input[type="checkbox"],
#transfer-reverse-table-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.label-print-desc {
    font-weight: 800;
    color: var(--text-main);
    font-size: 0.92rem;
    line-height: 1.35;
}

.label-print-barcode {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text-muted);
    direction: ltr;
    font-family: monospace;
    font-weight: 700;
}

.label-print-templates {
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
    background: #f8fafc;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.dev-menu-modal {
    max-width: 380px;
    width: calc(100% - 24px);
    padding: 24px 20px 18px;
    text-align: center;
}

.dev-menu-title {
    margin: 0 0 16px;
    font-size: 1.2rem;
    font-weight: 900;
}

.dev-menu-actions {
    display: grid;
    gap: 10px;
}

.dev-menu-actions .btn small {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.85;
}

.account-settings-modal {
    max-width: 400px;
    width: calc(100% - 24px);
    padding: 24px 20px 18px;
    text-align: right;
}
.account-settings-lead,
.account-settings-status {
    margin: 0 0 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1.5;
}
.account-settings-label {
    display: block;
    margin: 10px 0 4px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-muted);
}
.account-settings-input {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    margin: 0 0 8px;
    padding: 0 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    background: #fff;
}

.app-settings-modal {
    max-width: 420px;
}
.app-settings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.app-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.app-settings-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    min-width: 0;
}
.app-settings-text strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-color, #1a1a1a);
}
.app-settings-text small {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
}
.app-settings-toggle {
    flex-shrink: 0;
    width: 46px;
    height: 28px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: #c9cdd4;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
    border: none;
}
.app-settings-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}
.app-settings-toggle:checked {
    background: var(--primary);
}
.app-settings-toggle:checked::after {
    transform: translateX(-18px);
}
.option-card.is-tool-disabled {
    opacity: 0.42;
    filter: grayscale(0.35);
    cursor: pointer;
}
/* يبقى قابلاً للنقر حتى بدون تسجيل — assertToolAllowed يفتح بوابة السيريال */

/* ============================================================
   Label style settings modal
   ============================================================ */
.label-style-modal {
    max-width: min(760px, calc(100vw - 28px));
    width: calc(100% - 28px);
    max-height: min(92vh, 920px);
    margin: 3vh auto;
    padding: 16px 16px 14px;
    overflow: auto;
    direction: ltr;
}
.label-style-modal > * {
    direction: rtl;
}

.label-style-head {
    text-align: center;
    margin-bottom: 10px;
}

.label-style-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-main);
}

.label-style-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.label-style-tab,
.label-style-side-tab {
    border: 2px solid var(--border-color);
    background: #fff;
    border-radius: 10px;
    padding: 9px 10px;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    color: var(--text-main);
}

.label-style-tab.is-active,
.label-style-side-tab.is-active {
    border-color: var(--main-blue);
    background: #eff6ff;
    color: var(--main-blue);
}

.label-style-side-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
    direction: ltr;
}

.label-style-side-tabs[hidden] {
    display: none !important;
}


.label-style-preview-wrap {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #e8edf3;
    padding: 10px;
    margin-bottom: 10px;
}

.label-style-preview-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 280px;
    max-height: 420px;
    overflow: auto;
    direction: ltr;
}

.lsp-slot {
    width: var(--lsp-slot-w, auto);
    height: var(--lsp-slot-h, auto);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    flex: 0 0 auto;
}

.lsp-scale {
    transform: scale(var(--lsp-scale, 1));
    transform-origin: center center;
    flex: 0 0 auto;
}

.lsp-measure {
    display: grid;
    grid-template-columns: 11mm auto;
    grid-template-rows: 9mm auto;
    background: transparent;
    gap: 0;
}

.lsp-ruler-corner {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    border: 1px solid #64748b;
    border-bottom: none;
    border-inline-end: none;
    padding: 0.4mm;
}

.lsp-ruler-corner span {
    font-size: 1.7mm;
    font-weight: 900;
    font-family: Consolas, monospace;
    color: #0f172a;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    transform: scale(0.92);
}

.lsp-ruler-h {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    width: var(--page-w);
    background: #f8fafc;
    border: 1px solid #64748b;
    border-bottom: none;
    direction: ltr;
    overflow: visible;
}

.lsp-ruler-v {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    height: var(--page-h);
    background: #f8fafc;
    border: 1px solid #64748b;
    border-inline-end: none;
    direction: ltr;
    overflow: visible;
}

.lsp-ruler-h .lsp-tick,
.lsp-ruler-v .lsp-tick {
    position: absolute;
    background: #334155;
}

.lsp-ruler-h .lsp-tick {
    bottom: 0;
    width: 1.2px;
    height: 3.2mm;
    transform: translateX(-50%);
}

.lsp-ruler-h .lsp-tick.is-major {
    height: 5mm;
    background: #0f172a;
}

.lsp-ruler-v .lsp-tick {
    right: 0;
    height: 1.2px;
    width: 3.2mm;
    transform: translateY(-50%);
}

.lsp-ruler-v .lsp-tick.is-major {
    width: 5mm;
    background: #0f172a;
}

.lsp-ruler-h .lsp-tick em,
.lsp-ruler-v .lsp-tick em {
    position: absolute;
    font-style: normal;
    font-size: 2.1mm;
    font-weight: 900;
    color: #0f172a;
    font-family: Consolas, monospace;
    white-space: nowrap;
    line-height: 1;
    background: #f8fafc;
    padding: 0 0.4mm;
}

.lsp-ruler-h .lsp-tick em {
    bottom: 5.4mm;
    left: 50%;
    transform: translateX(-50%);
}

.lsp-ruler-v .lsp-tick em {
    right: 5.4mm;
    top: 50%;
    transform: translateY(-50%);
}

.lsp-resize-handle {
    position: absolute;
    width: 2.4mm;
    height: 2.4mm;
    background: #2563eb;
    border: 0.35mm solid #fff;
    border-radius: 0.3mm;
    z-index: 12;
    box-shadow: 0 0 0 0.2mm rgba(37, 99, 235, 0.35);
    pointer-events: auto;
    touch-action: none;
}

.lsp-resize-handle[data-resize="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.lsp-resize-handle[data-resize="ne"] { top: 0; right: 0; cursor: nesw-resize; }
.lsp-resize-handle[data-resize="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
.lsp-resize-handle[data-resize="se"] { bottom: 0; right: 0; cursor: nwse-resize; }
.lsp-resize-handle[data-resize="n"]  { top: 0; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.lsp-resize-handle[data-resize="s"]  { bottom: 0; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.lsp-resize-handle[data-resize="w"]  { left: 0; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.lsp-resize-handle[data-resize="e"]  { right: 0; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.lsp-measure-body {
    grid-column: 2;
    grid-row: 2;
    width: var(--page-w);
    height: var(--page-h);
    box-shadow: 0 2px 14px rgba(0,0,0,.16);
    border: 1px solid #64748b;
    background: #fff;
    overflow: hidden;
    position: relative;
}

.lsp-ba-page {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    background: #fff;
}

.lsp-ba-label {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    color: #000;
    font-family: var(--font);
}

.lsp-ba-label.is-dim-side {
    opacity: 0.42;
    filter: grayscale(0.15);
}

.lsp-ba-label.is-edit-side {
    outline: 1px solid #93c5fd;
    outline-offset: -1px;
}

.lsp-ba-el {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.05;
    touch-action: none;
    box-sizing: border-box;
}

.lsp-ba-c1,
.lsp-ba-c2 {
    direction: rtl;
    unicode-bidi: plaintext;
}

.lsp-ba-old,
.lsp-ba-new,
.lsp-ba-code {
    direction: ltr;
    unicode-bidi: isolate;
}

.lsp-ba-old .lsp-price-num {
    position: relative;
    display: inline-block;
    max-width: 100%;
    pointer-events: none;
}

.lsp-ba-old .lsp-price-num::after {
    content: '';
    position: absolute;
    left: -3%;
    right: -3%;
    top: 48%;
    height: 0.45mm;
    background: #000;
    transform: rotate(-12deg);
    pointer-events: none;
}

.lsp-draggable {
    cursor: grab;
    outline: 1px dashed transparent;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    z-index: 1;
}

.lsp-draggable:hover {
    outline-color: #60a5fa;
    z-index: 4;
}

.lsp-draggable.is-dragging,
.lsp-draggable.is-selected {
    cursor: grabbing;
    outline-color: #2563eb;
    outline-width: 1.5px;
    z-index: 6;
    background: rgba(37, 99, 235, 0.06);
}

.lsp-shelf {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
    color: #000;
    font-family: var(--font);
}

.lsp-transfer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
    color: #000;
}

.lsp-transfer-label {
    position: relative;
    overflow: hidden;
    background: #fff;
    color: #000;
    flex: 0 0 auto;
}

.lsp-transfer-line {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.1;
    direction: rtl;
    word-break: break-word;
}

.lsp-shelf-title,
.lsp-shelf-barcode-text,
.lsp-shelf-price,
.lsp-shelf-currency,
.lsp-shelf-barcode-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.lsp-shelf-title {
    text-align: center;
    line-height: 1.05;
    direction: rtl;
    word-break: break-word;
    white-space: normal;
}

.lsp-shelf-barcode-box {
    padding: 0;
    background: transparent;
}

.lsp-shelf-barcode {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.lsp-shelf-barcode-text {
    font-family: var(--font);
    direction: ltr;
    text-align: center;
    white-space: nowrap;
}

.lsp-shelf-price {
    direction: ltr;
    line-height: 1;
    white-space: nowrap;
}

.lsp-shelf-currency {
    direction: rtl;
    line-height: 1;
}

.label-style-inspector {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px;
    margin-bottom: 4px;
    max-height: min(28vh, 240px);
    overflow: auto;
    direction: ltr;
}
.label-style-inspector > * {
    direction: rtl;
}

.lsi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.lsi-chip {
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--text-main);
}

.lsi-chip:hover,
.lsi-chip.is-on {
    border-color: var(--main-blue);
    color: var(--main-blue);
}

.lsi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.lsi-head strong {
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--main-blue);
}

.lsi-close {
    border: none;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
}

.lsi-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #e2e8f0;
}

.lsi-label {
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--text-main);
}

.lsi-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    direction: ltr;
}

.lsi-controls--toggle { gap: 6px; }
.lsi-controls--text { width: min(220px, 55vw); }

.lsi-text {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 8px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    background: #fff;
    direction: rtl;
    text-align: right;
}

.lsi-btn,
.lsi-tog {
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--text-main);
}

.lsi-tog {
    min-width: 56px;
    font-size: 0.78rem;
}

.lsi-tog.is-on {
    border-color: var(--main-blue);
    background: #eff6ff;
    color: var(--main-blue);
}

.lsi-input {
    width: 72px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    direction: ltr;
    background: #fff;
}

.label-style-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    direction: ltr;
}

.label-style-actions .btn-label-reset {
    flex: 0 0 auto;
    margin: 0;
}

.label-style-actions-end {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.label-style-modal {
    direction: ltr;
}
.label-style-modal > * {
    direction: rtl;
}
.label-style-side-tabs,
.label-style-preview-wrap,
.label-style-actions {
    direction: ltr;
}
.label-style-tabs {
    direction: rtl;
}

@media (max-width: 700px) {
    .label-style-modal {
        max-width: calc(100vw - 16px);
        max-height: 90dvh;
        margin: 3vh auto;
        padding: 12px;
    }
    .label-style-preview-stage {
        min-height: 220px;
        max-height: 320px;
    }
    .label-style-inspector {
        max-height: min(36vh, 260px);
    }
    .lsi-input { width: 64px; }
}

@media (max-width: 420px) {
    .label-style-actions {
        flex-wrap: wrap;
    }
    .label-style-actions .btn-label-reset {
        order: 2;
        width: 100%;
    }
    .label-style-actions-end {
        order: 1;
        width: 100%;
    }
    .label-style-actions-end .btn {
        flex: 1;
        min-height: 44px;
    }
    .label-style-side-tabs,
    .label-style-tabs {
        gap: 6px;
    }
    .label-style-tab,
    .label-style-side-tab {
        font-size: 0.8rem;
        padding: 8px 6px;
    }
}

.label-print-templates-label {
    display: block;
    font-weight: 900;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.label-print-template-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.label-template-option {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 800;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.label-template-option:has(input:checked) {
    border-color: var(--main-blue);
    background: #eff6ff;
}

.label-template-option input {
    width: 18px;
    height: 18px;
    accent-color: var(--main-blue);
}

.label-print-actions {
    display: flex;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--border-color);
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.label-print-actions .btn {
    flex: 1;
}

/* ============================================================
   Design polish (approved UX pass)
   ============================================================ */

.label-print-title,
.label-print-templates-label,
.label-print-qty-input,
.label-print-batch-chip-num {
    font-weight: 700;
}

.label-template-option:has(input:checked) {
    border-color: transparent;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.35);
}

.label-print-batch-bar { background: #f8fafc; }
.label-print-batch-chips { align-items: stretch; gap: 10px; }
.label-print-batch-chip {
    flex: 1 1 88px;
    min-width: 80px;
    border-radius: var(--radius);
    padding: 10px 12px;
}
.label-print-batch-chip.is-active {
    border-color: var(--primary);
    background: #fff5f5;
    box-shadow: none;
    outline: 2px solid rgba(255, 7, 1, 0.2);
}
.label-print-batch-chip-num {
    font-size: 1.15rem;
    color: var(--primary);
}
.label-print-batch-hint::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--primary);
    vertical-align: middle;
}

.label-print-actions .btn,
.odoo-dialog-actions .btn,
.confirm-actions .btn {
    height: 46px;
    border-radius: var(--radius);
}
.odoo-dialog-actions,
.label-print-actions { gap: 12px; }

.top-actions-bar {
    gap: 10px;
    margin-bottom: 14px;
}

.export-settings .input-group input,
.export-settings .input-group select,
.export-settings .btn-export {
    height: 46px;
    border-radius: var(--radius);
}

.qty-stepper {
    border-radius: var(--radius);
    height: 46px;
    width: 100%;
}

/* ============================================================
   Event Log Modal
   ============================================================ */
.event-log-modal {
    width: min(720px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.event-log-head {
    padding: 18px 20px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.event-log-title {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 800;
}

.event-log-lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.event-log-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.event-log-count {
    margin-inline-end: auto;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.btn-event-log-clear,
.btn-event-log-export {
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: var(--radius);
    padding: 8px 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--text-main);
}

.btn-event-log-clear:hover { border-color: var(--danger); color: var(--danger); }
.btn-event-log-export:hover { border-color: var(--main-blue); color: var(--main-blue); }

.event-log-list {
    flex: 1;
    overflow: auto;
    padding: 10px 12px;
    min-height: 220px;
    max-height: 52vh;
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 0.78rem;
    direction: ltr;
    text-align: left;
    background: #0f172a;
    color: #e2e8f0;
}

.event-log-item {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    line-height: 1.45;
    word-break: break-word;
}

.event-log-item:last-child { border-bottom: none; }

.event-log-item--error { border-inline-start: 3px solid #f87171; }
.event-log-item--warn  { border-inline-start: 3px solid #fbbf24; }
.event-log-item--info  { border-inline-start: 3px solid #60a5fa; }
.event-log-item--ok    { border-inline-start: 3px solid #4ade80; }

.event-log-meta {
    color: #94a3b8;
    margin-bottom: 2px;
}

.event-log-msg { color: #f8fafc; font-weight: 600; }
.event-log-detail {
    margin-top: 4px;
    color: #cbd5e1;
    white-space: pre-wrap;
}

.event-log-empty {
    padding: 40px 16px;
    text-align: center;
    color: #94a3b8;
    font-family: 'Cairo', sans-serif;
}

.event-log-actions {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   Mobile — overflow guards (layout → Responsive System below)
   ============================================================ */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Apple system shell — global cohesion pass
   ============================================================ */
.pos-modal,
.label-print-modal,
.dev-menu-modal,
.match-pick-modal,
.review-card {
    border: none !important;
    box-shadow: var(--shadow-elevated);
    border-radius: var(--radius-lg);
    background: var(--card-bg) !important;
}

.alert-card {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    border-radius: 16px;
    background: #fff !important;
    border: none !important;
}

.pos-btn,
.btn-finish-pos,
.match-adj-btn,
#modal-match .ops-tab,
.match-tools-toggle,
.match-table-focus-btn {
    transition: transform 100ms var(--ease-out), background 100ms var(--ease-out), opacity 100ms var(--ease-out) !important;
}
.pos-btn:active,
.btn-finish-pos:active,
.match-adj-btn:active,
#modal-match .ops-tab:active,
.match-tools-toggle:active,
.match-table-focus-btn:active {
    transform: scale(0.97);
}

.pos-btn,
.pos-add-btn,
.pos-undo-btn,
.pos-redo-btn,
.pos-review-btn {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: var(--shadow-soft);
    font-weight: 600 !important;
}
.pos-add-btn,
.pos-review-btn { background: #fafafa !important; color: var(--main-blue) !important; }
.pos-undo-btn { background: #fafafa !important; color: var(--danger) !important; }
.pos-redo-btn { background: #fafafa !important; color: var(--main-blue) !important; }

.btn-finish-pos {
    border-radius: 12px !important;
    font-weight: 600 !important;
}

.qty-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.qty-stepper {
    border: 1px solid var(--border-color) !important;
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none !important;
}
#direct-qty {
    color: #1d1d1f !important;
    background: #fff !important;
    opacity: 1 !important;
    min-width: 48px !important;
    width: 56px !important;
    flex: 1 1 auto !important;
}

.pos-last-item {
    border-radius: var(--radius) !important;
    border: none !important;
    box-shadow: var(--shadow-soft);
    background: #fff !important;
}
.pos-last-item.flash-success {
    background: #eff6ff !important;
    box-shadow: 0 0 0 2px var(--main-blue);
}
.match-last {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-soft);
}

.match-table-wrap,
.label-print-table-wrap {
    background: transparent;
    border-radius: 12px;
    margin: 0 12px 8px;
    box-shadow: none;
    border: none !important;
}

.match-actions {
    padding: 12px 16px 16px !important;
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    direction: ltr !important;
}
.match-actions.has-diff-export {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.match-actions .btn,
.match-actions .btn-match-reset {
    border-radius: 12px;
}

.label-print-modal {
    background: var(--bg-color) !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
}
.label-print-head,
.label-print-actions {
    background: rgba(242, 242, 247, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    flex: 0 0 auto;
}
.label-print-head { padding: 16px 18px 10px; }
.label-print-title {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}
.label-print-toolbar,
.label-print-search-wrap,
.label-print-batch-bar,
.label-print-templates {
    flex: 0 0 auto;
}
.label-print-toolbar { padding: 8px 16px; }
.label-print-search-wrap { padding: 0 16px 10px; }
.label-print-table-wrap {
    flex: 1 1 0 !important;
    margin: 0 16px 12px;
}

@media (min-width: 769px) {
    .label-print-table-wrap {
        min-height: 120px;
        max-height: none;
    }
}
.label-template-option {
    border: none !important;
    background: #fff !important;
    box-shadow: var(--shadow-soft);
    border-radius: 12px !important;
}
.label-template-option:has(input:checked) {
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.35), var(--shadow-soft);
    background: #fff !important;
}

.review-body {
    background: var(--fill) !important;
    border: none !important;
    border-radius: 14px !important;
}
.review-counter {
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
}
.btn-nav {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: var(--shadow-soft) !important;
    font-weight: 600 !important;
}
.btn-nav-prev:hover,
.btn-nav-next:hover { transform: none !important; }

.footer {
    border-top: var(--hairline) solid var(--separator);
}
.footer-content {
    color: var(--text-tertiary);
    font-weight: 500;
}

.notify-badge {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255, 7, 1, 0.25);
    border: none !important;
}

.card--export { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
    .btn-resume-work { animation: none !important; }
    .notify-badge.notify-badge--pop,
    .option-card--notify.notify-card--ping.has-unread,
    .option-card--notify.notify-card--ping .option-icon svg,
    .notification-item.notification-item--arrive {
        animation: none !important;
    }
    .modal-overlay { transition: opacity 160ms ease !important; }
    .modal-overlay.active .modal-content,
    .modal-content {
        transition: opacity 160ms ease !important;
        transform: none !important;
    }
    .option-card,
    .btn,
    .btn-notify-sm,
    .top-action-btn {
        transition: none !important;
        transform: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .modal-overlay,
    .loading-overlay,
    .notifications-modal-head,
    .notifications-modal-foot,
    .transfer-preview-head,
    .transfer-preview-actions,
    .match-head,
    .label-print-head,
    .label-print-actions,
    .export-menu,
    .toast,
    .loading-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .modal-overlay { background: rgba(0, 0, 0, 0.5) !important; }
    .notifications-modal-head,
    .notifications-modal-foot,
    .transfer-preview-head,
    .transfer-preview-actions,
    .match-head,
    .label-print-head,
    .label-print-actions {
        background: #f2f2f7 !important;
    }
    .export-menu,
    .loading-card { background: #fff !important; }
    .toast { background: #1d1d1f !important; }
}

@media (prefers-contrast: more) {
    .card,
    .option-card,
    .stat-card,
    .table-section,
    .notifications-group,
    .modal-content {
        outline: 1px solid #1d1d1f;
    }
}

/* ============================================================
   Responsive System — layout only (theme preserved)
   Breakpoints: Phone ≤480 · Tablet ≤768 · Large tablet ≤1024 · Desktop ≥1025
   ============================================================ */

/* —— Shared: prevent accidental horizontal bleed (shell only) —— */
.container,
.system-body,
.main-content,
.intro-wrapper,
.selection-screen,
.card,
.toolbar,
.top-actions-bar,
.export-settings,
.stats-grid {
    max-width: 100%;
    min-width: 0;
}

:where(
    .input-group,
    .toolbar > *,
    .top-actions-bar > *,
    .export-settings > *,
    .match-title-row,
    .notifications-head-row,
    .notification-item-main,
    .product-name-cell,
    .match-cell-prod,
    .match-prod-name,
    .col-desc,
    .label-print-desc
) {
    min-width: 0;
}

/* —— Large tablet / small laptop (≤1024px) —— */
@media (max-width: 1024px) {
    body {
        padding: 20px 16px 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .container {
        width: 100%;
        gap: 16px;
    }

    .selection-screen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 100%;
        gap: 12px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .export-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .export-dropdown {
        min-width: 0;
        width: 100%;
    }

    .toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .toolbar .input-group--wide {
        flex: 1 1 100%;
    }

    .toolbar .input-group--narrow {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }

    .toolbar .btn-review--wide {
        flex: 1 1 100%;
    }

    .product-name-cell {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    /* نوافذ واسعة — لا تُضيَّق إلى عرض الإشعارات */
    .transfer-preview-modal {
        width: min(96vw, 920px) !important;
        max-width: 96vw !important;
    }

    #modal-transfer-preview .transfer-preview-modal {
        width: min(98vw, 1180px) !important;
        max-width: 98vw !important;
    }

    .label-print-modal {
        width: min(96vw, 760px) !important;
        max-width: 96vw !important;
    }

    .match-modal {
        width: min(96vw, 100%) !important;
        max-width: 96vw !important;
    }

    .notifications-modal {
        width: min(94vw, 560px);
        max-width: 94vw;
    }

    .pos-modal {
        width: min(calc(100vw - 20px), 1020px);
        max-width: min(calc(100vw - 20px), 1020px);
    }
}

/* —— Phone + tablet portrait (≤768px) —— */
@media (max-width: 768px) {
    body {
        padding: 14px 12px 0;
        padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    }

    .top-actions-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .top-action-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .export-settings {
        grid-template-columns: 1fr;
    }

    #resume-work-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 16px;
        box-sizing: border-box;
    }

    .btn-resume-work {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        min-height: 48px;
        flex-wrap: wrap;
        white-space: normal;
        text-align: center;
        padding-inline: 16px;
        box-sizing: border-box;
    }

    .pos-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pos-controls .qty-wrapper,
    .pos-controls .qty-stepper {
        width: 100%;
        max-width: 100%;
    }

    .pos-controls .pos-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        min-height: 44px;
        white-space: normal;
    }

    /* —— Modal shell: رأس ثابت + محتوى مرن + أزرار ثابتة —— */
    .modal-overlay.active {
        padding:
            max(8px, env(safe-area-inset-top, 0px))
            max(8px, env(safe-area-inset-right, 0px))
            max(8px, env(safe-area-inset-bottom, 0px))
            max(8px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
    }

    .modal-content.match-modal,
    .modal-content.label-print-modal,
    .modal-content.notifications-modal,
    .modal-content.transfer-preview-modal,
    .modal-content.match-pick-modal,
    .modal-content.event-log-modal {
        max-height: min(94dvh, calc(100dvh - 16px));
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-content.ops-console {
        max-height: 100dvh !important;
        height: 100dvh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* archive stays large inset — not fullscreen ops-console */
    #modal-notify-archive #notify-archive-console.notify-archive-shell,
    #notify-archive-console.notify-archive-shell {
        width: min(100%, calc(100vw - 16px)) !important;
        max-width: min(100%, calc(100vw - 16px)) !important;
        height: min(92dvh, 900px) !important;
        max-height: min(92dvh, 900px) !important;
        border-radius: 14px !important;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22) !important;
        box-sizing: border-box !important;
    }

    /* رفع إكسل */
    #modal-excel.modal-overlay.active {
        align-items: center;
        justify-content: center;
    }

    #modal-excel .modal-content--upload {
        width: min(88vw, 480px);
        max-width: calc(100vw - 32px);
        padding: 16px;
        box-sizing: border-box;
    }

    #modal-excel .upload-area {
        min-height: 160px;
        padding: 24px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    /* جدول نتائج المناقلة — بطاقات */
    .table-section--scroll {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .transfer-results-table {
        table-layout: auto;
        width: 100%;
    }

    .transfer-results-table thead {
        display: none;
    }

    .transfer-results-table,
    .transfer-results-table tbody {
        display: block;
        width: 100%;
    }

    .transfer-results-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "seq product qty"
            ". barcode stock";
        gap: 4px 10px;
        align-items: start;
        margin: 0 0 10px;
        padding: 12px;
        background: #fff;
        border-radius: 14px;
        box-shadow: var(--shadow-soft);
        box-sizing: border-box;
    }

    .transfer-results-table tbody td {
        display: block;
        width: auto !important;
        border: none;
        padding: 0;
        background: transparent !important;
        font-size: 0.9rem;
    }

    .transfer-results-table .col-seq { grid-area: seq; }
    .transfer-results-table .col-product { grid-area: product; min-width: 0; }
    .transfer-results-table .col-barcode { grid-area: barcode; }
    .transfer-results-table .col-stock { grid-area: stock; text-align: left; }
    .transfer-results-table .col-qty {
        grid-area: qty;
        text-align: left;
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--main-blue);
    }

    .transfer-results-table tr.scan-times-drop-row {
        display: block;
        margin: -6px 0 10px;
        padding: 0 12px 12px;
        background: transparent;
        box-shadow: none;
    }

    .transfer-results-table tr.scan-times-drop-row td {
        display: block;
        width: 100% !important;
    }

    .product-name-cell {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    /* جدول نتائج المناقلة — تسميات داخل البطاقات */
    .transfer-results-table .col-barcode::before {
        content: "باركود: ";
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 2px;
    }

    .transfer-results-table .col-stock::before {
        content: "ZAYON/Stock: ";
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 2px;
    }

    .transfer-results-table .col-qty::before {
        content: "رصيد المناقلة: ";
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 2px;
    }

    .transfer-results-table .col-product {
        font-weight: 700;
        line-height: 1.35;
    }

    .transfer-results-table .col-barcode,
    .transfer-results-table .col-stock {
        word-break: break-all;
    }

    /* معاينة مناقلة واردة */
    .transfer-preview-modal {
        width: min(96vw, 920px) !important;
        max-width: 96vw !important;
        height: min(92dvh, calc(100dvh - 16px));
        max-height: min(92dvh, calc(100dvh - 16px));
    }

    #modal-transfer-preview .transfer-preview-modal {
        width: min(98vw, 1180px) !important;
        max-width: 98vw !important;
    }

    .transfer-preview-modal .transfer-preview-head {
        flex-shrink: 0;
    }

    .transfer-preview-modal .transfer-preview-table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin-inline: 12px;
    }

    .transfer-preview-modal .transfer-preview-actions {
        flex-shrink: 0;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
    }

    /* معاينة مناقلة — شبكة زرين على الموبايل (مو صف أفقي يكسر الشاشة) */
    #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions,
    #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions.is-outgoing {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-direction: unset;
        gap: 8px;
        padding: 12px 12px max(14px, env(safe-area-inset-bottom, 0px));
    }

    #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions #btn-transfer-preview-match {
        grid-column: 1 / -1;
    }

    .transfer-preview-modal .transfer-preview-actions .btn {
        min-height: 44px;
        min-width: 0;
    }

    #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions .btn {
        flex: none;
        width: auto;
        max-width: 100%;
        height: auto;
        min-height: 44px;
        font-size: 0.82rem;
        line-height: 1.25;
        padding: 10px 8px;
        white-space: normal;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    .transfer-preview-modal .transfer-preview-table thead {
        display: none;
    }

    .transfer-preview-modal .transfer-preview-table,
    .transfer-preview-modal .transfer-preview-table tbody {
        display: block;
        width: 100%;
    }

    /* بطاقة بند: وصف + شارة عدد · ثم باركود بفاصل */
    .transfer-preview-modal .transfer-preview-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "desc qty"
            "code code";
        gap: 10px 12px;
        align-items: start;
        margin: 0 0 8px;
        padding: 14px;
        background: #fff;
        border-radius: 12px;
        border: 0.5px solid rgba(60, 60, 67, 0.12);
        box-shadow: none;
        box-sizing: border-box;
    }

    .transfer-preview-modal .transfer-preview-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .transfer-preview-modal .transfer-preview-table tbody td {
        display: block;
        width: auto !important;
        border: none;
        padding: 0;
        font-size: 0.9rem;
    }

    .transfer-preview-modal .transfer-preview-table .col-seq {
        display: none !important;
    }

    #modal-transfer-preview .transfer-preview-table tbody td:nth-child(3),
    #modal-label-manual-scan .transfer-preview-table tbody td:nth-child(3) {
        grid-area: desc;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.4;
        font-size: 0.95rem;
        font-weight: 650;
        color: #1d1d1f;
        text-align: right;
    }

    #modal-transfer-preview .transfer-preview-table tbody td:nth-child(3)::before,
    #modal-label-manual-scan .transfer-preview-table tbody td:nth-child(3)::before {
        content: "الوصف";
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        color: #8e8e93;
        letter-spacing: 0.02em;
        margin-bottom: 4px;
        line-height: 1.2;
    }

    /* مسح يدوي: وصف + سعر + عدد · باركود (بدون براند) */
    #modal-label-manual-scan .transfer-preview-table tbody tr.label-manual-swipe-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "desc price qty"
            "code code code";
        overflow: hidden;
    }
    #modal-label-manual-scan .transfer-preview-table .col-price {
        grid-area: price;
        align-self: start;
        justify-self: end;
        min-width: 52px;
        padding: 8px 10px;
        border-radius: 10px;
        background: rgba(60, 60, 67, 0.06);
        text-align: center;
        font-weight: 700;
        font-size: 0.95rem;
        color: #1d1d1f;
        box-sizing: border-box;
    }
    #modal-label-manual-scan .transfer-preview-table .col-price::before {
        content: "السعر";
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        color: #8e8e93;
        text-align: center;
        margin-bottom: 3px;
    }
    #modal-label-manual-scan .transfer-preview-table .col-qty {
        grid-area: qty;
    }
    #modal-label-manual-scan .label-manual-swipe-row::after {
        border-radius: 12px 0 0 12px;
    }

    .transfer-preview-modal .transfer-preview-table .col-qty {
        grid-area: qty;
        align-self: start;
        justify-self: end;
        min-width: 52px;
        padding: 8px 10px;
        border-radius: 10px;
        background: rgba(0, 122, 255, 0.1);
        text-align: center;
        font-weight: 800;
        font-size: 1.15rem;
        font-variant-numeric: tabular-nums;
        line-height: 1.15;
        color: var(--main-blue);
        box-sizing: border-box;
    }

    .transfer-preview-modal .transfer-preview-table .col-qty::before {
        content: "العدد";
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        color: #8e8e93;
        text-align: center;
        margin-bottom: 3px;
        letter-spacing: 0.02em;
    }

    .transfer-preview-modal .transfer-preview-table .col-code {
        grid-area: code;
        min-width: 0;
        margin-top: 2px;
        padding-top: 10px;
        border-top: 0.5px solid rgba(60, 60, 67, 0.12);
        font-weight: 650;
        font-size: 0.9rem;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.03em;
        direction: ltr;
        text-align: right;
        word-break: break-all;
        color: #3a3a3c;
        line-height: 1.3;
    }

    .transfer-preview-modal .transfer-preview-table .col-code::before {
        content: "الباركود";
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        color: #8e8e93;
        direction: rtl;
        text-align: right;
        letter-spacing: 0.02em;
        margin-bottom: 4px;
    }

    /* مناقلة واردة: 6 أعمدة — لا تضع السعر والعدد في نفس خانة qty */
    #modal-transfer-preview .transfer-preview-table tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "desc qty"
            "brand price"
            "code code";
    }
    #modal-transfer-preview .transfer-preview-table tbody td:nth-child(4) {
        grid-area: brand;
        min-width: 0;
        padding-top: 8px;
        border-top: 0.5px solid rgba(60, 60, 67, 0.12);
        word-break: break-word;
        overflow-wrap: anywhere;
        font-size: 0.9rem;
        font-weight: 650;
        color: #1d1d1f;
        text-align: right;
    }
    #modal-transfer-preview .transfer-preview-table tbody td:nth-child(4)::before {
        content: "براند";
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        color: #8e8e93;
        margin-bottom: 4px;
        letter-spacing: 0.02em;
    }
    #modal-transfer-preview .transfer-preview-table .col-price {
        grid-area: price;
        align-self: start;
        justify-self: end;
        min-width: 64px;
        padding: 8px 10px;
        border-radius: 10px;
        background: rgba(60, 60, 67, 0.06);
        text-align: center;
        box-sizing: border-box;
    }
    #modal-transfer-preview .transfer-preview-table .col-price::before {
        content: "السعر";
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        color: #8e8e93;
        text-align: center;
        margin-bottom: 3px;
    }
    #modal-transfer-preview .transfer-preview-table .col-qty {
        grid-area: qty;
    }
    #modal-transfer-preview .transfer-preview-table .col-price .product-price-cell {
        align-items: center;
    }

    /* عكس أرصدة — 5 أعمدة */
    #transfer-reverse-table-wrap .transfer-preview-table tbody tr {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "check desc qty"
            "check code code";
    }
    #transfer-reverse-table-wrap .transfer-preview-table .col-check {
        grid-area: check;
        display: block !important;
        align-self: start;
        padding-top: 4px;
        width: auto !important;
    }
    #transfer-reverse-table-wrap .transfer-preview-table .col-seq {
        display: none !important;
    }
    #transfer-reverse-table-wrap .transfer-preview-table tbody td:nth-child(3)::before {
        content: none;
    }
    #transfer-reverse-table-wrap .transfer-preview-table tbody td:nth-child(4) {
        grid-area: desc;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.4;
        font-size: 0.95rem;
        font-weight: 650;
        color: #1d1d1f;
        text-align: right;
    }
    #transfer-reverse-table-wrap .transfer-preview-table tbody td:nth-child(4)::before {
        content: "الوصف";
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        color: #8e8e93;
        margin-bottom: 4px;
    }

    /* طباعة ليبل */
    .label-print-modal {
        width: min(96vw, 760px) !important;
        max-width: 96vw !important;
        height: min(92dvh, calc(100dvh - 16px));
        max-height: min(92dvh, calc(100dvh - 16px));
    }

    .label-print-modal .label-print-head,
    .label-print-modal .label-print-toolbar,
    .label-print-modal .label-print-search-wrap,
    .label-print-modal .label-print-batch-bar {
        flex-shrink: 0;
    }

    .label-print-modal .label-print-table-wrap {
        flex: 1 1 auto;
        min-height: 60px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .label-print-modal .label-print-templates {
        flex-shrink: 0;
        max-height: 22vh;
        overflow-y: auto;
    }

    .label-print-modal .label-print-actions {
        flex: 0 0 auto;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        gap: 10px;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
    }

    .label-print-modal .label-print-actions .btn {
        flex: 1 1 0;
        min-height: 48px;
        width: auto;
    }

    .label-print-modal .label-print-table thead {
        display: none;
    }

    .label-print-modal .label-print-table,
    .label-print-modal .label-print-table tbody {
        display: block;
        width: 100%;
    }

    .label-print-modal .label-print-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "check desc qty";
        gap: 8px;
        align-items: center;
        margin: 0 0 10px;
        padding: 12px;
        background: #fff;
        border-radius: 14px;
        box-shadow: var(--shadow-soft);
        box-sizing: border-box;
    }

    .label-print-modal .label-print-table tbody td {
        display: block;
        width: auto !important;
        border: none;
        padding: 0;
    }

    .label-print-modal .label-print-table .col-check {
        grid-area: check;
        align-self: start;
    }

    .label-print-modal .label-print-table .col-seq {
        display: none !important;
    }

    .label-print-modal .label-print-table .col-desc {
        grid-area: desc;
        min-width: 0;
    }

    .label-print-modal .label-print-table .col-print-qty {
        grid-area: qty;
        text-align: center;
    }

    .label-print-modal .label-print-qty-input {
        width: 64px;
        min-height: 44px;
        font-size: 16px;
    }

    /* جرد المناقلة */
    .match-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: min(94dvh, calc(100dvh - 12px));
        max-height: min(94dvh, calc(100dvh - 12px));
        border-radius: 16px;
        box-sizing: border-box;
    }

    .match-modal .match-head,
    .match-modal .match-scan-area,
    .match-modal .match-last,
    .match-modal .match-panel,
    .match-modal .match-actions {
        flex-shrink: 0;
    }

    .match-head {
        padding: 12px 14px 6px;
    }

    .match-meta {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .match-scan-area {
        padding: 8px 12px 10px;
    }

    .match-scan-fields {
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 8px;
    }

    .match-scan-btns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .match-scan-btns .btn {
        min-height: 44px;
        min-width: 0;
        width: 100%;
    }

    .match-last {
        flex-direction: column;
        align-items: stretch;
        margin: 0 12px 8px;
        padding: 10px 12px;
    }

    .match-last-nums {
        justify-content: space-between;
    }

    .match-modal .match-panel-body {
        max-height: min(34vh, 260px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .match-table-toolbar {
        flex-wrap: wrap;
        padding: 0;
        gap: 8px;
    }

    .match-search {
        min-height: 44px;
        height: 44px;
    }

    .match-modal .match-table-wrap {
        flex: 1 1 auto;
        min-height: 80px;
        padding: 0 10px 8px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .match-field label { font-weight: 700; }

    .match-tools-toggle {
        width: 44px;
        height: 44px;
    }

    .match-price-flag {
        min-height: 44px;
        padding-block: 10px;
    }

    .match-actions,
    .match-actions.has-diff-export {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .match-actions .btn-match-export-diff {
        grid-column: 1 / -1;
    }

    .match-modal--free .match-actions .btn-confirm-cancel:last-child {
        grid-column: 1 / -1;
    }

    /* بطاقات الجرد الحر */
    .match-modal--free .match-table {
        table-layout: auto;
        width: 100%;
    }

    .match-modal--free .match-table thead {
        display: none;
    }

    .match-modal--free .match-table,
    .match-modal--free .match-table tbody {
        display: block;
        width: 100%;
    }

    .match-modal--free .match-table tr.match-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "seq prod adj"
            ". price qty";
        gap: 6px 10px;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 10px;
        padding: 12px;
        background: #fff;
        border-radius: 14px;
        box-shadow: var(--shadow-soft);
        border-bottom: none;
    }

    .match-modal--free .match-table tr.match-row td {
        display: block;
        width: auto !important;
        border: none;
        padding: 0;
        font-size: 0.92rem;
    }

    .match-modal--free .match-cell-seq {
        grid-area: seq;
        color: #8e8e93;
        font-size: 0.85rem;
    }

    .match-modal--free .match-cell-prod {
        grid-area: prod;
        min-width: 0;
    }

    .match-modal--free .match-cell-adj {
        grid-area: adj;
        display: flex !important;
        gap: 6px;
        justify-content: flex-end;
    }

    .match-modal--free .match-cell-price { grid-area: price; }

    .match-modal--free .match-cell-qty {
        grid-area: qty;
        text-align: left;
        font-size: 1.15rem !important;
        font-weight: 700;
    }

    .match-modal--free .match-cell-qty::before,
    .match-modal--free .match-cell-price::before,
    .match-modal:not(.match-modal--free) .match-cell-price::before,
    .match-modal:not(.match-modal--free) .match-cell-source::before,
    .match-modal:not(.match-modal--free) .match-cell-exp::before,
    .match-modal:not(.match-modal--free) .match-cell-qty::before,
    .match-modal:not(.match-modal--free) .match-cell-diff::before,
    .match-modal:not(.match-modal--free) .match-cell-status::before {
        content: attr(data-label) ": ";
        display: block;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--text-muted);
        text-align: left;
        margin-bottom: 2px;
    }

    .match-modal--free .match-empty-row {
        display: block;
        width: 100%;
        padding: 28px 12px !important;
    }

    .match-modal--free .match-table tr:has(.match-empty-row) {
        display: block;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    /* بطاقات جرد المناقلة */
    .match-modal:not(.match-modal--free) .match-table {
        table-layout: auto;
        width: 100%;
    }

    .match-modal:not(.match-modal--free) .match-table thead {
        display: none;
    }

    .match-modal:not(.match-modal--free) .match-table,
    .match-modal:not(.match-modal--free) .match-table tbody {
        display: block;
        width: 100%;
    }

    .match-modal:not(.match-modal--free) .match-table tr.match-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 10px;
        padding: 12px;
        background: #fff;
        border-radius: 14px;
        box-shadow: var(--shadow-soft);
        border-bottom: none;
    }

    .match-modal:not(.match-modal--free) .match-table tr.match-row td {
        display: block;
        width: auto !important;
        border: none;
        padding: 0;
        background: transparent !important;
    }

    .match-modal:not(.match-modal--free) .match-cell-seq {
        display: none !important;
    }

    .match-modal:not(.match-modal--free) .match-cell-prod {
        flex: 1 1 calc(100% - 110px);
        min-width: 0;
        order: 1;
    }

    .match-modal:not(.match-modal--free) .match-cell-adj {
        display: flex !important;
        gap: 6px;
        order: 2;
        margin-inline-start: auto;
    }

    .match-modal:not(.match-modal--free) .match-cell-price,
    .match-modal:not(.match-modal--free) .match-cell-source,
    .match-modal:not(.match-modal--free) .match-cell-exp,
    .match-modal:not(.match-modal--free) .match-cell-qty,
    .match-modal:not(.match-modal--free) .match-cell-diff {
        order: 3;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        padding: 4px 8px !important;
        border-radius: 8px;
        background: #f2f2f7 !important;
    }

    .match-modal:not(.match-modal--free) .match-cell-status {
        order: 4;
        width: 100%;
    }

    .match-modal:not(.match-modal--free) .match-table tr:has(.match-empty-row) {
        display: block;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    /* إشعارات — نص طويل بدون خروج */
    .notification-ref,
    .notification-sub {
        white-space: normal;
        word-break: break-word;
    }

    .notify-import-menu .btn-notify-sm {
        min-height: 44px;
        padding: 10px 12px;
    }

    .btn-notify-icon {
        width: 44px;
        height: 44px;
    }
    .notifications-selection-clear,
    .notifications-selection-delete {
        min-height: 44px;
    }
    .notifications-selection-delete {
        width: 44px;
        height: 44px;
    }
    .notifications-selection-clear {
        height: 44px;
        padding: 0 16px;
    }

    /* حقول — يمنع زوم iOS */
    #match-barcode,
    #match-qty,
    #match-search,
    .match-search,
    .label-print-search,
    #direct-qty,
    .export-settings .input-group input,
    .export-settings .input-group select,
    .toolbar input,
    .toolbar select {
        min-height: 44px;
        font-size: 16px;
    }
    #direct-barcode {
        min-height: 44px;
        font-size: max(16px, clamp(1.8rem, 6vw, 2.75rem));
    }

    /* misc mobile — consolidated from legacy polish blocks */
    .modal-content:not(.match-modal):not(.label-print-modal):not(.notifications-modal):not(.transfer-preview-modal):not(.match-pick-modal):not(.event-log-modal):not(.ops-console):not(.modal-content--upload):not(.modal-content--scans):not(.pos-modal) {
        max-height: min(92dvh, calc(100dvh - 24px));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 18px 16px;
        width: 94%;
        box-sizing: border-box;
    }

    .modal-content.pos-modal {
        padding: 0;
        width: min(calc(100vw - 16px), 1020px);
        max-width: min(calc(100vw - 16px), 1020px);
        box-sizing: border-box;
    }

    .intro-brand-title {
        font-size: clamp(1.35rem, 6vw, 1.7rem);
        line-height: 1.25;
        padding-inline: 8px;
    }

    .selection-screen {
        gap: 12px;
        width: 100%;
    }

    .option-card {
        width: 100%;
    }

    .option-card h2 {
        font-size: 1.05rem;
    }

    .export-option {
        min-height: 52px;
        padding: 16px;
        font-size: 0.95rem;
    }

    .notification-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .odoo-dialog-actions {
        flex-direction: column;
    }

    .odoo-dialog-actions .btn {
        width: 100%;
    }

    .pos-scanner-area {
        padding: 28px 18px 30px;
    }

    .pos-last-item {
        margin: 0 12px 12px;
        box-sizing: border-box;
        max-width: calc(100% - 24px);
    }

    .btn-finish-pos {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        margin: 0 12px 12px;
        height: auto;
        min-height: 48px;
        padding: 12px 14px;
        line-height: 1.3;
        white-space: normal;
        font-size: 1rem;
        box-sizing: border-box;
    }

    .pos-last-item .last-item-info {
        flex: 1;
        min-width: 0;
    }

    .last-item-code,
    .last-item-desc {
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
    }

    .last-item-qty-badge {
        flex-shrink: 0;
    }

    .pos-controls {
        padding-inline: 12px;
    }

    .current-scans-sep {
        display: none;
    }

    /* عرض البيانات — بطاقات بدل قص الجدول */
    #modal-current-scans .table-section--scroll {
        overflow-x: hidden;
    }

    #modal-current-scans .current-scans-table thead {
        display: none;
    }

    #modal-current-scans .current-scans-table,
    #modal-current-scans .current-scans-table tbody {
        display: block;
        width: 100%;
    }

    #modal-current-scans .current-scans-table tbody tr.scan-item-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "seq code qty"
            "name name name"
            "stock stock del";
        gap: 6px 10px;
        align-items: center;
        margin: 0 0 10px;
        padding: 12px;
        background: #fff;
        border-radius: 14px;
        box-shadow: var(--shadow-soft);
        box-sizing: border-box;
    }

    #modal-current-scans .current-scans-table tbody tr.scan-item-row td {
        display: block;
        width: auto !important;
        max-width: none !important;
        border: none;
        padding: 0;
        background: transparent !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(1) { grid-area: seq; font-weight: 700; color: var(--text-muted); }
    #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(2) { grid-area: code; min-width: 0; }
    #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(3) { grid-area: name; font-size: 0.88rem !important; }
    #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(4) { grid-area: stock; }
    #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(5) { grid-area: qty; }
    #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(6) { grid-area: del; }

    #modal-current-scans .current-scans-table tbody tr:not(.scan-item-row) {
        display: block;
        padding: 20px 12px;
    }

    #modal-current-scans .current-scans-table tbody tr:not(.scan-item-row) td {
        display: block;
        width: 100% !important;
        border: none;
    }

    .modal-content--scans {
        width: 96vw;
        max-height: 94dvh;
        padding: 12px;
    }

    .current-scans-total-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        font-size: 0.85rem;
    }

    .current-scans-table {
        font-size: 0.95rem;
    }

    .label-print-template-options {
        grid-template-columns: 1fr;
    }

    .label-template-option {
        min-height: 48px;
    }

    .pagination-wrapper {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .pagination-wrapper .btn {
        min-height: 44px;
    }

    .footer {
        font-size: 0.75rem;
        padding: 12px 8px calc(12px + env(safe-area-inset-bottom, 0));
        text-align: center;
    }

    .toast {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(92vw, 420px);
        max-width: 92vw;
        font-size: 0.9rem;
    }

    .loading-card {
        width: min(92vw, 360px);
        margin-inline: 12px;
    }

    .dev-menu-modal {
        width: min(94vw, 380px);
        padding: 18px 14px 14px;
    }

    .dev-menu-actions .btn {
        min-height: 48px;
    }

    .event-log-modal {
        width: 96vw;
        max-height: 94dvh;
    }

    .event-log-toolbar {
        flex-wrap: wrap;
    }

    .stat-card h4 {
        font-size: 0.78rem;
    }

    .stat-card .value {
        font-size: 1.35rem;
    }

    .label-print-table .col-print-qty {
        width: 72px;
        font-size: 0.85rem;
    }

    /* POS — لفّ معتدل بدون كسر شريط الكمية على الشاشات الأوسع داخل 768 */
    .pos-modal {
        width: min(calc(100vw - 16px), 1020px);
        max-width: min(calc(100vw - 16px), 1020px);
        max-height: 94dvh;
    }
}

/* —— Narrow phones (≤480px) —— */
@media (max-width: 480px) {
    body {
        padding: 12px 10px 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .selection-screen {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .option-card {
        min-height: 140px;
        padding: 16px 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .toolbar .input-group--narrow {
        flex: 1 1 100%;
    }

    #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-direction: unset;
        gap: 8px;
    }

    #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions #btn-transfer-preview-match {
        grid-column: 1 / -1;
    }

    #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions .btn {
        flex: none;
        width: auto;
        max-width: 100%;
        height: auto;
        min-height: 44px;
        font-size: 0.78rem;
        line-height: 1.2;
        padding: 8px 6px;
        overflow-wrap: anywhere;
    }

    /* ponytail: keep ≤768 two-col scan row — stacking ate table height on phones */
    .match-scan-fields {
        grid-template-columns: minmax(0, 1fr) 88px;
    }

    .match-field--qty,
    #match-qty {
        max-width: 100%;
        width: 100%;
    }

    .match-scan-btns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pos-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pos-controls .qty-wrapper,
    .pos-controls .qty-stepper {
        width: 100%;
        max-width: 100%;
    }

    .pos-controls .pos-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        min-height: 44px;
        white-space: normal;
    }

    .pagination-wrapper .btn {
        flex: 1 1 100%;
    }

    .intro-brand-title {
        font-size: clamp(1.3rem, 7vw, 1.65rem);
    }
}

/* —— Desktop (unchanged visual layout) —— */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
        margin-inline: auto;
    }

    .selection-screen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 1100px;
    }
}

/* —— Touch targets (phones/tablets with coarse pointer) —— */
@media (hover: none) and (pointer: coarse) {
    :where(
        .btn,
        .top-action-btn,
        .option-card,
        .btn-notify-sm,
        .btn-notify-icon,
        .match-adj-btn,
        #modal-match .ops-tab,
        .pos-btn,
        .match-tools-item,
        .export-option,
        .label-template-option,
        .notification-item,
        .btn-resume-work,
        .pagination-wrapper .btn,
        .transfer-preview-actions .btn,
        .label-print-actions .btn,
        .match-scan-btns .btn,
        .scan-qty-times-btn,
        .action-btn
    ) {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .qty-step-btn {
        min-width: 44px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .option-card:hover {
        transform: none;
        border-color: transparent;
        background: var(--surface-hover);
        box-shadow: var(--shadow-soft);
    }
    .qty-step-btn:hover { background: var(--fill); }
    .pos-add-btn:hover,
    .pos-review-btn:hover { border-color: var(--main-blue); }
    .pos-undo-btn:hover { border-color: var(--danger); }
    .pos-redo-btn:hover:not(:disabled) { border-color: var(--main-blue); }
    .btn-finish-pos:hover { background: var(--primary-hover); }
    .scan-qty-times-btn:hover {
        border-color: var(--main-blue, #007aff);
        background: rgba(0, 122, 255, 0.08);
    }
    .action-btn:hover { background: var(--fill-strong); border-color: transparent; }
    .action-btn.delete:hover { background: var(--primary-soft-strong); border-color: transparent; color: var(--danger); }
    .action-btn.edit:hover { background: rgba(0, 122, 255, 0.16); border-color: transparent; color: var(--main-blue); }
    .modal-close-inline:hover { background: var(--danger); color: white; transform: none; }
    .btn-nav-prev:hover { background: #fef2f2; border-color: var(--danger); }
    .btn-nav-next:hover { background: #eff6ff; border-color: #2563eb; }
}

/* —— Very small phones —— */
@media (max-width: 360px) {
    body {
        padding: 10px 8px 0;
    }

    .intro-brand-title {
        font-size: 1.25rem;
    }

    .option-card {
        min-height: 132px;
        padding: 14px 10px;
    }

    .match-modal--free .match-table tr.match-row {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "seq adj"
            "prod prod"
            "price qty";
    }
}

/* جرد audit — أعمدة متساوية العرض؛ الرفع والمطابقة بنفس الارتفاع */
.inventory-audit-toolbar.ops-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}
.inventory-audit-file-field,
.inventory-audit-run-field {
  width: auto;
  min-width: 0;
  max-width: none;
}
.inventory-audit-run-spacer {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  visibility: hidden;
  user-select: none;
}
.inventory-audit-file-btn,
.inventory-audit-run {
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  border-radius: 10px;
  font-family: var(--font);
}
.inventory-audit-run {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1.5px solid rgba(0, 122, 255, 0.28);
  background: rgba(0, 122, 255, 0.08);
  color: #007aff;
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 120ms var(--ease-out),
    border-color 120ms var(--ease-out),
    transform 100ms var(--ease-out),
    opacity 120ms var(--ease-out);
}
.inventory-audit-run:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.14);
  border-color: rgba(0, 122, 255, 0.45);
}
.inventory-audit-run:active:not(:disabled) {
  transform: scale(0.985);
}
.inventory-audit-run.is-ready:not(:disabled) {
  border-color: #007aff;
  background: rgba(0, 122, 255, 0.12);
}
.inventory-audit-run:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.inventory-audit-run:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.inventory-audit-file-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.inventory-audit-file-btn {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1.5px dashed rgba(60, 60, 67, 0.28);
  background: var(--fill);
  cursor: pointer;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.inventory-audit-file-btn:hover {
  border-color: var(--primary);
  background: rgba(255, 7, 1, 0.06);
}
.inventory-audit-file-btn.is-loaded {
  border-style: solid;
  border-color: rgba(60, 60, 67, 0.18);
  background: #fff;
}
.inventory-audit-file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.inventory-audit-file-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.inventory-audit-file-btn em {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-muted);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.inventory-audit-file-btn.is-loaded em {
  color: var(--text-main);
  font-weight: 700;
}
.inventory-audit-file-clear {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--fill);
  color: var(--text-muted);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font);
}
.inventory-audit-file-clear:hover {
  background: var(--primary-soft);
  color: var(--danger);
}
.inventory-audit-file-clear[hidden] {
  display: none !important;
}
#inventory-audit-console .ops-grid tbody td.ops-empty-cell {
  text-align: center;
  opacity: 0.6;
  padding: 48px 12px;
  color: var(--text-muted);
  font-weight: 600;
}
#inventory-audit-console .ops-grid .ops-prod-name {
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}
#inventory-audit-console .ops-grid .col-seq {
    width: 2.75rem;
    text-align: center;
    color: #94a3b8;
    font-weight: 700;
}
#inventory-audit-console .ops-grid .ops-prod-code {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  direction: ltr;
  text-align: right;
}
#inventory-audit-console .ops-grid .ops-num.is-neg {
  color: #b91c1c;
  font-weight: 750;
}
#inventory-audit-console .ops-grid .ops-num.is-pos {
  color: #248a3d;
  font-weight: 750;
}
#inventory-audit-console .ops-grid tbody tr.is-audit-up td {
  background: #f0fdf4;
}
#inventory-audit-console .ops-grid tbody tr.is-audit-down td {
  background: #fef2f2;
}
#inventory-audit-console .ops-grid tbody tr.is-audit-up:hover td {
  background: #e8f8ee;
}
#inventory-audit-console .ops-grid tbody tr.is-audit-down:hover td {
  background: #fde8e8;
}
@media (max-width: 768px) {
  .inventory-audit-toolbar.ops-toolbar {
    grid-template-columns: 1fr;
  }
}
.inventory-audit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inventory-audit-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--text-muted);
}
.inventory-audit-sort-wrap .ops-input {
  height: 32px;
  min-width: 120px;
  max-width: 160px;
  padding: 0 10px;
  font-size: 0.78rem;
}
#inventory-audit-sort[hidden] {
  display: none !important;
}
.inventory-audit-sort-wrap:has(#inventory-audit-sort[hidden]) {
  display: none;
}
#inventory-audit-summary.ops-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
#inventory-audit-summary .ops-metric {
  flex: none;
  min-width: 128px;
  max-width: none;
  margin: 0;
  padding: 14px 18px;
  gap: 4px;
  border-inline-end: 1px solid var(--border-color);
  box-sizing: border-box;
}
#inventory-audit-summary .ops-metric:last-child {
  border-inline-end: 0;
}
#inventory-audit-summary .ops-metric-value {
  font-size: 1.28rem;
  line-height: 1.2;
}
#inventory-audit-summary .ops-metric-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
}

/* ============================================================
   العمليات — سطح بيانات حديث شبه ملء الشاشة
   ============================================================ */
#modal-ops.modal-overlay.active,
#modal-inventory-audit.modal-overlay.active {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: rgba(0, 0, 0, 0.48);
}
.modal-content.ops-console,
.ops-console {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--text-main);
  font-family: var(--font) !important;
  transform: none !important;
  opacity: 1 !important;
}
.ops-console,
.ops-console *,
.ops-console button,
.ops-console input,
.ops-console select,
.ops-console label,
.ops-console table,
.ops-console th,
.ops-console td {
  font-family: var(--font) !important;
}
.ops-top,
.ops-tabs,
.ops-toolbar,
.ops-metrics,
.ops-sheet-meta,
.ops-foot {
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  background: #fff;
}
.ops-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 12px;
}
.ops-top-main {
  min-width: 0;
}
.ops-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-main);
}
.ops-lead {
  margin: 4px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}
.ops-top-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ops-status {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.ops-ref {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary);
}
.ops-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ops-tabs::-webkit-scrollbar {
  display: none;
}
.ops-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.ops-tab:hover {
  color: var(--text-main);
}
.ops-tab:active {
  transform: scale(0.98);
}
.ops-tab.is-active {
  color: var(--text-main);
  border-bottom-color: var(--primary);
}
.ops-tab.is-hidden {
  display: none !important;
}
.ops-tab:focus-visible {
  outline: none;
  color: var(--primary);
  box-shadow: var(--focus-ring);
}
.ops-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 12px 24px;
  background: #fafafa;
  border-bottom: 1px solid var(--border-color);
}
.ops-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ops-field span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
}
.ops-field--wide {
  flex: 1 1 160px;
  min-width: 140px;
}
.ops-input {
  box-sizing: border-box;
  height: 40px;
  width: 100%;
  min-width: 120px;
  max-width: 160px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 600;
}
.ops-field--wide .ops-input {
  max-width: none;
}
.ops-input:focus {
  outline: none;
  border-color: rgba(0, 122, 255, 0.55);
  box-shadow: var(--focus-ring);
}
#ops-barcode.ops-input {
  direction: ltr;
  text-align: left;
}
.ops-run {
  margin-inline-start: auto;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.ops-run:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.ops-run:hover {
  background: #2a2a2a;
}
.ops-run:active {
  transform: scale(0.98);
}
.ops-run:disabled {
  opacity: 0.5;
  cursor: wait;
}
.ops-run--ghost {
  margin-inline-start: 0;
  background: #fff;
  color: #111;
  border: 1px solid #d0d0d0;
}
.ops-run--ghost:hover {
  background: #f5f5f5;
}
.ops-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 10px;
  background: #fff;
}
.ops-progress[hidden] {
  display: none !important;
}
.ops-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: #ececec;
  position: relative;
  overflow: hidden;
}
.ops-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ops-pct, 0%);
  background: #111;
  border-radius: 99px;
  transition: width 160ms ease;
}
.ops-progress-text {
  font-size: 0.75rem;
  color: #666;
  min-width: 3.5rem;
  text-align: end;
  direction: ltr;
}
.ops-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  position: relative;
  z-index: 1;
}
.ops-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-color);
}
.ops-metrics[hidden] {
  display: none !important;
}
.ops-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 100px;
  padding: 12px 16px 12px 0;
  margin-inline-end: 16px;
  border-inline-end: 1px solid var(--border-color);
}
.ops-metric:last-child {
  border-inline-end: 0;
  margin-inline-end: 0;
}
.ops-metric-value {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.15;
}
.ops-metric-label {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-muted);
}
.ops-sheet {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  /* شريط التمرير يمين مثل بقية التطبيق */
  direction: ltr;
}
.ops-sheet > * {
  direction: rtl;
}
.ops-sheet-meta {
  padding: 8px 24px;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--text-muted);
  border-top: 1px solid #f0f0f0;
}
.ops-empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 40px 20px;
}
.ops-empty strong {
  font-size: 1.02rem;
  font-weight: 750;
  color: var(--text-main);
}
.ops-empty span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
}
.ops-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.ops-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 11px 20px;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--text-muted);
  white-space: nowrap;
}
.ops-grid tbody td {
  padding: 11px 20px;
  border-bottom: 1px solid #f3f3f3;
  color: var(--text-main);
  vertical-align: middle;
}
.ops-grid tbody tr:hover {
  background: #fafafa;
}
.ops-num {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}
.ops-suggest {
  font-weight: 800;
  color: var(--primary);
}
.ops-th-btn {
  all: unset;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  color: var(--primary);
}
.ops-th-btn:hover { text-decoration: underline; }
.ops-th--filter { position: relative; }
.ops-dead-pop {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 8;
  width: min(320px, 80vw);
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-align: right;
  white-space: normal;
  font-weight: 600;
  color: var(--text-main);
}
.ops-dead-pop[hidden] { display: none !important; }
.ops-dead-pop label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 0.8rem;
  font-weight: 600;
}
.ops-dead-pop .ops-dead-whs {
  max-height: 140px;
  overflow: auto;
  margin: 6px 0;
}
.ops-dead-pop .ops-dead-row {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.ops-dead-pop .ops-dead-row input {
  width: 72px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.ops-dead-pop button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.ops-dest-select {
  max-width: 180px;
  height: 32px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
}
.ops-row--suggest td:first-child,
.ops-row--pull td:first-child {
  box-shadow: inset -3px 0 0 var(--primary);
}
.ops-row--ref {
  background: var(--primary-soft);
}
.ops-abc {
  display: inline-flex;
  min-width: 1.5rem;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 800;
}
.ops-abc--A {
  background: var(--primary-soft-strong);
  color: var(--primary);
}
.ops-abc--B {
  background: #fff4e5;
  color: #9a5b00;
}
.ops-abc--C {
  background: var(--fill);
  color: var(--text-muted);
}
.ops-product-head {
  padding: 18px 20px 10px;
}
.ops-product-name {
  font-size: 1.1rem;
  font-weight: 800;
}
.ops-product-meta {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
  direction: ltr;
  text-align: right;
}
.ops-subhead {
  margin: 10px 20px 6px;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--text-muted);
}
.ops-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 24px;
  border-top: 1px solid var(--border-color);
  background: #fff;
}
/* RTL: أول زر (إغلاق) يمين · ثاني زر (تصدير) يسار */
.ops-foot-btn {
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.ops-foot-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.ops-foot-btn:hover {
  background: #f7f7f7;
}
.ops-foot-btn:active {
  transform: scale(0.98);
}
.ops-foot-btn--primary {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}
.ops-foot-btn--primary:hover {
  background: var(--primary-hover);
}
@media (max-width: 768px) {
  .ops-top,
  .ops-tabs,
  .ops-toolbar,
  .ops-metrics,
  .ops-sheet-meta,
  .ops-foot {
    padding-inline: 14px;
  }
  .ops-grid thead th,
  .ops-grid tbody td,
  .ops-product-head,
  .ops-subhead {
    padding-inline: 14px;
  }
  .ops-top {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .ops-run {
    margin-inline-start: 0;
    width: 100%;
  }
  .ops-field {
    flex: 1 1 calc(50% - 8px);
  }
  .ops-input {
    max-width: none;
  }
  .ops-foot-btn {
    min-width: 42%;
  }
}

/* ============================================================
   Mobile-fit audit 2026-09-05 — CSS only, no option changes
   ============================================================ */
@media (max-width: 768px) {
  /* safe-area على شاشات العمليات / الجرد fullscreen */
  #modal-ops.modal-overlay.active,
  #modal-inventory-audit.modal-overlay.active {
    padding: 0;
  }
  #modal-ops .ops-console,
  #modal-inventory-audit .ops-console {
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }
  #modal-ops .ops-foot,
  #modal-inventory-audit .ops-foot,
  #modal-notify-archive .notify-archive-foot,
  #modal-notify-archive .notify-archive-detail-foot {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .ops-foot-btn {
    min-height: 44px;
    height: auto;
    padding-block: 10px;
  }
  .ops-input,
  .notify-archive-field input,
  .notify-archive-field select,
  #inventory-audit-sort {
    font-size: 16px;
    min-height: 44px;
  }
  .notify-dir-tab {
    min-height: 44px;
    padding: 10px 18px;
  }
  .notifications-modal {
    height: min(82dvh, 720px);
    max-height: min(90dvh, calc(100dvh - 16px));
  }
  .notifications-head-text {
    max-width: calc(100% - 56px);
    width: min(100%, 280px);
  }
  .notifications-modal-lead {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .notifications-head-top {
    min-height: 52px;
  }
  /* Dropdown is too narrow as containing block — menu grew past modal right and got clipped.
     Static dropdown + tabs (position:relative) keeps both in/out filters inside the head. */
  .notify-dir-dropdown {
    position: static;
  }
  .notify-dir-dropdown > .notify-filter-menu {
    left: 0;
    right: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: auto;
    max-width: none;
  }
  .match-tools-menu {
    max-height: min(60vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* جداول العمليات/الجرد — تمرير مع تلميح + عمود أول ثابت */
  .ops-sheet {
    position: relative;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  }
  .ops-grid {
    min-width: 560px;
  }
  #inventory-audit-table.ops-grid {
    min-width: 0;
  }
  .ops-grid thead th:first-child,
  .ops-grid tbody td:first-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.04);
  }
  .ops-grid thead th:first-child {
    z-index: 3;
  }
  .ops-metrics {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .ops-metric {
    flex: 0 0 auto;
    min-width: 110px;
  }
  .ops-tabs {
    scrollbar-width: thin;
  }
  .ops-toolbar .ops-run {
    width: auto;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding-block: 10px;
  }
  .inventory-audit-run-spacer {
    display: none;
  }
  .inventory-audit-file-clear {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  /* جرد — بطاقات نتائج */
  #inventory-audit-table thead {
    display: none;
  }
  #inventory-audit-table,
  #inventory-audit-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  #inventory-audit-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "seq code status"
      "co odoo delta";
    gap: 6px 10px;
    margin: 0 0 10px;
    padding: 12px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
  }
  #inventory-audit-table tbody td {
    display: block;
    width: auto !important;
    border: none;
    padding: 0;
    white-space: normal;
  }
  #inventory-audit-table tbody td:nth-child(1) { grid-area: seq; font-weight: 700; color: var(--text-muted); }
  #inventory-audit-table tbody td:nth-child(2) { grid-area: code; min-width: 0; overflow-wrap: anywhere; direction: ltr; text-align: right; }
  #inventory-audit-table tbody td:nth-child(3) { grid-area: co; }
  #inventory-audit-table tbody td:nth-child(4) { grid-area: odoo; }
  #inventory-audit-table tbody td:nth-child(5) { grid-area: delta; font-weight: 700; }
  #inventory-audit-table tbody td:nth-child(6) { grid-area: status; }
  #inventory-audit-table tbody td:nth-child(3)::before { content: "شركة: "; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
  #inventory-audit-table tbody td:nth-child(4)::before { content: "أودو: "; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
  #inventory-audit-table tbody td:nth-child(5)::before { content: "فرق: "; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
  #inventory-audit-table tbody tr:has(td.ops-empty-cell),
  #inventory-audit-table tbody tr:has(td[colspan]) {
    display: block;
    grid-template-areas: none;
  }
  #inventory-audit-table tbody tr:has(td.ops-empty-cell) td,
  #inventory-audit-table tbody tr:has(td[colspan]) td {
    display: block;
    width: 100% !important;
    text-align: center;
    padding: 24px 12px;
  }
  /* تعطيل sticky/min-width للجرد بعد البطاقات */
  #inventory-audit-console .ops-sheet {
    -webkit-mask-image: none;
    mask-image: none;
  }
  #inventory-audit-console .ops-grid thead th:first-child,
  #inventory-audit-console .ops-grid tbody td:first-child {
    position: static;
    box-shadow: none;
  }

  body {
    padding-top: max(14px, env(safe-area-inset-top, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .intro-wrapper {
    gap: 16px;
  }
  .option-title,
  .option-desc {
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .intro-wrapper {
    gap: 12px;
  }
  .option-icon svg {
    width: 40px;
    height: 40px;
  }
  .pos-scanner-area--padded {
    padding-top: 36px;
  }
  .last-item-code {
    font-size: 1.15rem;
  }
  .notify-archive-hero {
    flex-wrap: wrap;
    gap: 10px;
  }
  #notify-archive-dir-tabs {
    width: 100%;
  }
}

@media (max-width: 720px) {
  #modal-notify-archive #notify-archive-console.notify-archive-shell,
  #notify-archive-console.notify-archive-shell {
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: min(100%, calc(100vw - 16px)) !important;
  }
}

/* ============================================================
   Phone pass 2026-09-06 — notifications + transfer preview
   ============================================================ */
@media (max-width: 768px) {
  /* إشعارات — ملء الشاشة تقريباً بدون تصادم العنوان */
  #modal-notifications .notifications-modal {
    width: min(100vw - 12px, 560px);
    max-width: calc(100vw - 12px);
    height: min(92dvh, calc(100dvh - 12px));
    max-height: min(92dvh, calc(100dvh - 12px));
    border-radius: 14px;
  }
  #modal-notifications .notifications-head-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    direction: ltr;
    min-height: 48px;
    position: relative;
  }
  #modal-notifications .notifications-head-start {
    flex: 0 0 auto;
    z-index: 11;
  }
  #modal-notifications .notifications-head-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: calc(100% - 88px);
    text-align: center;
    direction: rtl;
    pointer-events: none;
  }
  #modal-notifications .notifications-modal-title {
    font-size: 1.08rem;
  }
  #modal-notifications .notifications-modal-lead {
    margin-top: 4px;
    font-size: 0.72rem;
  }
  #modal-notifications .notification-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #modal-notifications .notification-meta-line {
    gap: 4px 0;
    row-gap: 4px;
  }
  #modal-notifications .notification-ago {
    margin-inline-start: 0;
    padding-inline-start: 0;
    flex: 1 0 100%;
    text-align: start;
  }
  #modal-notifications .notification-item {
    padding: 12px 14px;
  }
  #modal-notifications .notifications-modal-foot {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
  }
  #modal-notifications .notifications-modal-foot > .btn {
    height: auto;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
  }

  /* معاينة واردة — رأس + جدول + أزرار */
  #modal-transfer-preview .transfer-preview-modal {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    height: min(96dvh, calc(100dvh - 8px));
    max-height: min(96dvh, calc(100dvh - 8px));
    border-radius: 12px;
  }
  #modal-transfer-preview .transfer-preview-title {
    font-size: 1.08rem;
    overflow-wrap: anywhere;
  }
  #modal-transfer-preview .transfer-preview-meta {
    overflow-wrap: anywhere;
    line-height: 1.35;
    font-size: 0.78rem;
  }
  #modal-transfer-preview .transfer-preview-table-wrap {
    margin: 0 8px 8px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #modal-transfer-preview .transfer-preview-table tbody tr {
    margin-bottom: 8px;
  }
  #modal-transfer-preview .transfer-preview-table tbody tr:last-child {
    margin-bottom: 0;
  }
  #modal-transfer-preview .transfer-preview-table .col-code,
  #modal-transfer-preview .transfer-preview-table tbody td {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 390px) {
  #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions {
    gap: 6px;
    padding: 8px 10px max(12px, env(safe-area-inset-bottom, 0px));
  }
  #modal-transfer-preview .transfer-preview-modal .transfer-preview-actions .btn {
    font-size: 0.72rem;
    padding: 8px 5px;
  }
  #modal-notifications .notifications-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  #modal-notifications.modal-overlay.active {
    padding: 0;
  }
}

/* Phone UI match modal — top-level (isPhoneUi, not viewport width) */
html.manaql-phone #modal-match .match-modal,
html.manaql-phone #modal-match.modal-content,
html.manaql-phone .match-modal {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}

html.manaql-phone #modal-match .match-scan-area {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(242, 242, 247, 0.94);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

html.manaql-phone #modal-match .match-table-wrap {
  display: none !important;
}

html.manaql-phone #modal-match .match-card-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 8px;
}

html.manaql-phone #modal-match .match-card-list[hidden] {
  display: none !important;
}

html.manaql-phone #modal-match .match-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-soft);
}

html.manaql-phone #modal-match .match-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

html.manaql-phone #modal-match .match-card-seq {
  flex-shrink: 0;
  min-width: 2.1em;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

html.manaql-phone #modal-match .match-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

html.manaql-phone #modal-match .match-card-code {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

html.manaql-phone #modal-match .match-card-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

html.manaql-phone #modal-match .match-card-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-muted);
}

html.manaql-phone #modal-match .match-card-value {
  min-width: 0;
}

html.manaql-phone #modal-match .match-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html.manaql-phone #modal-match .match-card-metric {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f2f2f7;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

html.manaql-phone #modal-match .match-card-metric span {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-muted);
}

html.manaql-phone #modal-match .match-card-metric strong {
  font-size: 1.02rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

html.manaql-phone #modal-match .match-card-metric strong.is-neg { color: #b91c1c; }
html.manaql-phone #modal-match .match-card-metric strong.is-pos { color: #15803d; }
html.manaql-phone #modal-match .match-card .match-price-cell {
  width: 100%;
}

html.manaql-phone #modal-match .match-card .match-price-cell .match-price-val {
  font-size: 1.18rem;
}

html.manaql-phone #modal-match .match-card .match-price-cell .match-price-flag {
  width: 100%;
}

html.manaql-phone #modal-match .match-card-adj {
  display: flex;
  gap: 6px;
  margin-inline-start: auto;
}

html.manaql-phone #modal-match .match-adj-btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.25rem;
}

html.manaql-phone #modal-match .match-copy-bc,
html.manaql-phone #modal-match .match-scan-times-btn {
  width: 30px;
  height: 30px;
}

html.manaql-phone #modal-match .match-card-empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-weight: 700;
}

/* Phone UI transfer preview — top-level (isPhoneUi, not viewport width) */
html.manaql-phone :is(#modal-transfer-preview, #modal-stock-quick-report) .transfer-preview-table-wrap {
  display: none !important;
}

html.manaql-phone :is(#modal-transfer-preview, #modal-stock-quick-report) .transfer-preview-card-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 6px;
}

html.manaql-phone :is(#modal-transfer-preview, #modal-stock-quick-report) .transfer-preview-card-list[hidden] {
  display: none !important;
}

/* وارد — بطاقة صنف مضغوطة بلا فراغات */
html.manaql-phone #modal-transfer-preview .transfer-preview-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(60, 60, 67, 0.14);
  box-shadow: none;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-row--head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-seq,
html.manaql-phone #modal-transfer-preview .transfer-preview-card-qty {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-qty::before {
  content: "×";
  margin-inline-end: 1px;
  font-weight: 800;
  opacity: 0.7;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-title {
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  color: #1d1d1f;
  overflow-wrap: anywhere;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 4px 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(60, 60, 67, 0.1);
  direction: rtl;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-fact--bc {
  align-items: flex-start;
  text-align: start;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-fact--brand {
  align-items: center;
  text-align: center;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-fact--price {
  align-items: flex-end;
  text-align: end;
  grid-column: auto;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #8e8e93;
  line-height: 1.15;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-value {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1d1d1f;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-value .product-price-cell {
  align-items: flex-end;
  gap: 1px;
}

html.manaql-phone #modal-transfer-preview .transfer-preview-card-empty {
  margin: 0;
  padding: 18px 8px;
  text-align: center;
  color: var(--text-muted);
  font-weight: 700;
}

/* كشف أرصدة — تخطيط البطاقة السابق */
html.manaql-phone #modal-stock-quick-report .transfer-preview-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-soft);
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-seq,
html.manaql-phone #modal-stock-quick-report .transfer-preview-card-qty {
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-qty::before {
  content: "العدد ";
  font-size: 0.62rem;
  font-weight: 800;
  color: #8e8e93;
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-title {
  width: 100%;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.4;
  color: #1d1d1f;
  overflow-wrap: anywhere;
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-line {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 0.5px solid rgba(60, 60, 67, 0.12);
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-value {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.92rem;
  color: #1d1d1f;
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-value .product-price-cell {
  align-items: flex-start;
}

html.manaql-phone #modal-stock-quick-report .transfer-preview-card-empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-weight: 700;
}

html.manaql-phone :is(#modal-transfer-preview, #modal-stock-quick-report) .transfer-preview-actions,
html.manaql-phone :is(#modal-transfer-preview, #modal-stock-quick-report) .transfer-preview-actions.is-outgoing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px max(14px, env(safe-area-inset-bottom, 0px));
}

html.manaql-phone :is(#modal-transfer-preview, #modal-stock-quick-report) .transfer-preview-actions .btn {
  width: 100%;
  min-height: 44px;
  min-width: 0;
  padding: 10px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

/* Phone UI notifications — top-level (isPhoneUi, not viewport width) */
html.manaql-phone #modal-notifications .notifications-modal {
  width: min(100vw - 12px, 560px);
  max-width: calc(100vw - 12px);
  height: min(92dvh, calc(100dvh - 12px));
  max-height: min(92dvh, calc(100dvh - 12px));
  border-radius: 14px;
}

html.manaql-phone #modal-notifications .notifications-head-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  direction: ltr;
  min-height: 48px;
  position: relative;
}

html.manaql-phone #modal-notifications .notifications-head-start {
  flex: 0 0 auto;
  z-index: 11;
}

html.manaql-phone #modal-notifications .notifications-head-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 88px);
  text-align: center;
  direction: rtl;
  pointer-events: none;
}

html.manaql-phone #modal-notifications .notifications-modal-title {
  font-size: 1.08rem;
}

html.manaql-phone #modal-notifications .notifications-modal-lead {
  margin-top: 4px;
  font-size: 0.72rem;
}

html.manaql-phone #modal-notifications .notification-sub {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.manaql-phone #modal-notifications .notification-meta-line {
  gap: 4px 0;
  row-gap: 4px;
}

html.manaql-phone #modal-notifications .notification-ago {
  margin-inline-start: 0;
  padding-inline-start: 0;
  flex: 1 0 100%;
  text-align: start;
}

html.manaql-phone #modal-notifications .notification-ref,
html.manaql-phone #modal-notifications .notification-sub {
  word-break: break-word;
}

html.manaql-phone #modal-notifications .notification-item {
  padding: 16px 18px;
}

html.manaql-phone #modal-notifications .notification-item + .notification-item::before,
html.manaql-phone #modal-notifications .notification-swipe-row + .notification-swipe-row::after {
  left: 18px;
  right: 18px;
}

html.manaql-phone #modal-notifications .notify-dir-tab {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.82rem;
}

html.manaql-phone #modal-notifications .notify-import-menu .btn-notify-sm {
  min-height: 44px;
  padding: 10px 12px;
}

html.manaql-phone #modal-notifications .notifications-selection-clear {
  min-height: 44px;
  height: 44px;
  padding: 0 16px;
}

html.manaql-phone #modal-notifications .notifications-selection-delete {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
}

html.manaql-phone #modal-notifications .notifications-modal-foot {
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
}

html.manaql-phone #modal-notifications .notifications-modal-foot > .btn {
  height: auto;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}

/* Phone UI task 6 — home, direct scan, current scans, Excel */
html.manaql-phone .intro-wrapper {
  width: 100%;
  max-width: 100%;
  padding-inline: 12px;
  padding-top: clamp(20px, 4vh, 48px);
  gap: 20px;
  box-sizing: border-box;
}

html.manaql-phone .selection-screen {
  grid-template-columns: 1fr;
  max-width: 100%;
  gap: 12px;
}

html.manaql-phone .option-card {
  min-height: 152px;
  padding: 22px 16px;
  border-radius: 18px;
}

html.manaql-phone .option-card .option-icon svg {
  width: 48px;
  height: 48px;
}

html.manaql-phone .option-title {
  font-size: 1.05rem;
}

html.manaql-phone .option-desc {
  font-size: 0.9rem;
}

html.manaql-phone #resume-work-container {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding-inline: 12px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

html.manaql-phone .btn-resume-work {
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  justify-content: center;
  white-space: normal;
  box-sizing: border-box;
}

html.manaql-phone #modal-scan .pos-modal {
  width: min(calc(100vw - 12px), 640px);
  max-width: calc(100vw - 12px);
  height: min(96dvh, calc(100dvh - 12px));
  max-height: calc(100dvh - 12px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.manaql-phone #modal-scan .pos-scanner-area {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 14px;
  background: rgba(242, 242, 247, 0.96);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

html.manaql-phone #modal-scan .pos-scanner-area--padded {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

html.manaql-phone #modal-scan #direct-barcode {
  min-height: 56px;
  font-size: clamp(1.7rem, 7vw, 2.35rem);
  padding: 10px 12px 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--border-color) inset;
}

html.manaql-phone #modal-scan .pos-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

html.manaql-phone #modal-scan .pos-controls .qty-wrapper {
  grid-column: 1 / -1;
  width: 100%;
}

html.manaql-phone #modal-scan .pos-controls .qty-stepper {
  width: 100%;
  height: 50px;
}

html.manaql-phone #modal-scan .pos-controls .pos-btn,
html.manaql-phone #modal-scan .qty-step-btn {
  min-height: 44px;
}

html.manaql-phone #modal-scan .pos-controls .pos-btn {
  height: 50px;
  padding: 12px 14px;
  white-space: normal;
}

html.manaql-phone #modal-scan .pos-last-item {
  margin: 0 12px 12px;
  padding: 14px;
  border-radius: 18px;
  align-items: stretch;
  gap: 12px;
}

html.manaql-phone #modal-scan .last-item-info {
  gap: 6px;
}

html.manaql-phone #modal-scan .last-item-header {
  gap: 6px 8px;
}

html.manaql-phone #modal-scan .last-item-code {
  font-size: 1.25rem;
}

html.manaql-phone #modal-scan .last-item-desc,
html.manaql-phone #modal-scan .last-item-brand-line,
html.manaql-phone #modal-scan .last-prev-qty,
html.manaql-phone #modal-scan .last-scan-time-line {
  font-size: 0.9rem;
}

html.manaql-phone #modal-scan .last-item-qty-badge {
  min-width: 60px;
  min-height: 60px;
  font-size: 1.35rem;
}

html.manaql-phone #modal-scan .btn-finish-pos {
  margin: 0 12px 12px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  min-height: 52px;
  height: auto;
  padding: 12px 16px;
  white-space: normal;
  box-sizing: border-box;
}

html.manaql-phone #modal-current-scans .modal-content--scans {
  width: min(calc(100vw - 12px), 760px);
  max-width: calc(100vw - 12px);
  max-height: calc(100dvh - 12px);
  padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

html.manaql-phone #modal-current-scans .current-scans-total-bar {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  font-size: 0.9rem;
}

html.manaql-phone #modal-current-scans .current-scans-total-bar strong {
  font-size: 1.15rem;
  margin-right: 0;
}

html.manaql-phone #modal-current-scans .search-header .input-group {
  width: 100%;
}

html.manaql-phone #modal-current-scans .current-scan-search {
  min-height: 48px;
  font-size: 1rem;
}

html.manaql-phone #modal-current-scans .table-section--scroll {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

html.manaql-phone #modal-current-scans .current-scans-table thead {
  display: none;
}

html.manaql-phone #modal-current-scans .current-scans-table,
html.manaql-phone #modal-current-scans .current-scans-table tbody {
  display: block;
  width: 100%;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row,
html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row--phone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "seq code qty"
    "name name name"
    "stock stock del";
  gap: 6px 10px;
  align-items: center;
  margin: 0 0 10px;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td {
  display: block;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  border: none;
  padding: 0;
  background: transparent !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(1) {
  grid-area: seq;
  font-weight: 700;
  color: var(--text-muted);
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(2) {
  grid-area: code;
  min-width: 0;
  font-size: 1rem !important;
  line-height: 1.35;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(3) {
  grid-area: name;
  font-size: 0.92rem !important;
  line-height: 1.45;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(4) {
  grid-area: stock;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(5) {
  grid-area: qty;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(6) {
  grid-area: del;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(6) .scan-qty-controls {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 6px;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(6) .action-btn,
html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(6) .scan-qty-times-btn {
  min-height: 44px;
  width: 100%;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(6) .scan-qty-times-btn {
  min-width: 0;
  font-size: 1rem;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-item-row td:nth-child(7) .action-btn {
  width: 100%;
  min-height: 44px;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-times-drop-row td {
  padding: 0 0 12px !important;
}

html.manaql-phone #modal-current-scans .current-scans-table tbody tr.scan-times-drop-row td > .scan-times-dropdown {
  margin-top: 0;
}

html.manaql-phone #modal-excel.modal-overlay.active {
  align-items: center;
  justify-content: center;
  padding: 6px;
}

html.manaql-phone #modal-excel .modal-content--upload {
  width: min(calc(100vw - 12px), 560px);
  max-width: calc(100vw - 12px);
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

html.manaql-phone #modal-excel .upload-area {
  min-height: 220px;
  padding: 28px 18px;
  gap: 14px;
  border-radius: 18px;
}

html.manaql-phone #modal-excel .upload-area input[type="file"] {
  width: 100%;
  min-height: 44px;
  height: auto;
}

html.manaql-phone #modal-excel .upload-icon-wrap svg {
  width: 72px;
  height: 72px;
}

html.manaql-phone #modal-excel .upload-title {
  font-size: 1.05rem;
  text-align: center;
}

/* Phone UI final pass — ops, inventory, labels, account */
html.manaql-phone #modal-ops .ops-card-list,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html.manaql-phone #modal-ops .ops-card-list[hidden],
html.manaql-phone #modal-inventory-audit .inventory-audit-card-list[hidden] {
  display: none !important;
}

html.manaql-phone #modal-ops .ops-card,
html.manaql-phone #modal-inventory-audit .inventory-audit-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-soft);
}

html.manaql-phone #modal-ops .ops-card-head,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

html.manaql-phone #modal-ops .ops-card-seq,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-seq {
  flex-shrink: 0;
  min-width: 2.1em;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

html.manaql-phone #modal-ops .ops-card-head-text,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-title {
  min-width: 0;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

html.manaql-phone #modal-ops .ops-card-subtitle {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 2px;
  direction: ltr;
}

html.manaql-phone #modal-ops .ops-card-body,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-body {
  display: grid;
  gap: 8px;
}

html.manaql-phone #modal-ops .ops-card-field,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

html.manaql-phone #modal-ops .ops-card-label,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-muted);
}

html.manaql-phone #modal-ops .ops-card-value,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

html.manaql-phone #modal-ops .ops-card-strong,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-strong {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

html.manaql-phone #modal-ops .ops-card-strong.is-neg,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-strong.is-neg { color: #b91c1c; }
html.manaql-phone #modal-ops .ops-card-strong.is-pos,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-strong.is-pos { color: #15803d; }

html.manaql-phone #modal-ops .ops-card-empty,
html.manaql-phone #modal-inventory-audit .inventory-audit-card-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-muted);
  font-weight: 700;
}

html.manaql-phone #modal-ops .ops-card select,
html.manaql-phone #modal-ops .ops-card .ops-dest-select {
  min-height: 44px;
  width: 100%;
}

html.manaql-phone #modal-ops .ops-card-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html.manaql-phone #modal-ops .ops-product-head {
  padding: 12px 12px 6px;
}

html.manaql-phone #modal-ops .ops-product-name {
  font-size: 1.1rem;
  line-height: 1.3;
}

html.manaql-phone #modal-ops .ops-product-meta {
  font-size: 0.8rem;
}

html.manaql-phone #modal-ops .ops-subhead {
  margin: 0;
  padding: 0 12px;
}

html.manaql-phone #modal-label-print .label-print-table-wrap,
html.manaql-phone #modal-label-manual-scan .transfer-preview-table-wrap {
  flex: 1 1 auto;
  min-height: 60px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.manaql-phone #modal-label-print .label-print-modal,
html.manaql-phone #modal-label-manual-scan .transfer-preview-modal {
  width: min(96vw, 760px);
  max-width: 96vw;
  height: min(92dvh, calc(100dvh - 16px));
  max-height: min(92dvh, calc(100dvh - 16px));
}

html.manaql-phone #modal-label-print .label-print-table thead,
html.manaql-phone #modal-label-manual-scan .transfer-preview-table thead {
  display: none;
}

html.manaql-phone #modal-label-print .label-print-table,
html.manaql-phone #modal-label-print .label-print-table tbody,
html.manaql-phone #modal-label-manual-scan .transfer-preview-table,
html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody {
  display: block;
  width: 100%;
}

html.manaql-phone #modal-label-print .label-print-table tbody tr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "check desc qty";
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
}

html.manaql-phone #modal-label-print .label-print-table tbody td {
  display: block;
  width: auto !important;
  border: none;
  padding: 0;
}

html.manaql-phone #modal-label-print .label-print-table .col-check {
  grid-area: check;
  align-self: start;
}

html.manaql-phone #modal-label-print .label-print-table .col-seq {
  display: none !important;
}

html.manaql-phone #modal-label-print .label-print-table .col-desc {
  grid-area: desc;
  min-width: 0;
}

html.manaql-phone #modal-label-print .label-print-table .col-print-qty {
  grid-area: qty;
  text-align: center;
}

html.manaql-phone #modal-label-print .label-print-qty-input {
  width: 64px;
  min-height: 44px;
  font-size: 16px;
}

html.manaql-phone #modal-label-print .label-print-actions {
  flex-direction: row;
  gap: 8px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

html.manaql-phone #modal-label-print .label-print-actions .btn,
html.manaql-phone #modal-label-manual-scan .transfer-preview-actions .btn {
  min-height: 44px;
  width: auto;
  flex: 1 1 0;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody tr.label-manual-swipe-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "desc price qty"
    "code code code";
  gap: 8px;
  margin: 0 0 10px;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody td {
  display: block;
  width: auto !important;
  border: none;
  padding: 0;
  font-size: 0.9rem;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody td:nth-child(3) {
  grid-area: desc;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
  font-size: 0.95rem;
  font-weight: 650;
  color: #1d1d1f;
  text-align: right;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody td:nth-child(3)::before {
  content: "الوصف";
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #8e8e93;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  line-height: 1.2;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody td:nth-child(4) {
  grid-area: price;
  align-self: start;
  justify-self: end;
  min-width: 52px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(60, 60, 67, 0.06);
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1d1d1f;
  box-sizing: border-box;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody td:nth-child(4)::before {
  content: "السعر";
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #8e8e93;
  text-align: center;
  margin-bottom: 3px;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody td:nth-child(5) {
  grid-area: qty;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-table tbody td:nth-child(2) {
  grid-area: code;
  min-width: 0;
  overflow-wrap: anywhere;
  direction: ltr;
}

html.manaql-phone #modal-label-manual-scan .label-manual-line-qty {
  min-height: 44px;
  width: 100%;
  font-size: 16px;
}

html.manaql-phone #modal-label-manual-scan .transfer-preview-actions {
  flex-direction: row;
  gap: 8px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

html.manaql-phone #modal-account-settings .account-settings-modal,
html.manaql-phone #modal-dev-pin .account-settings-modal {
  width: min(calc(100vw - 24px), 400px);
  max-width: none;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

html.manaql-phone #modal-account-settings .account-settings-input,
html.manaql-phone #modal-dev-pin .account-settings-input {
  min-height: 44px;
  height: auto;
  font-size: 16px;
}

html.manaql-phone #modal-account-settings .dev-menu-actions,
html.manaql-phone #modal-dev-pin .dev-menu-actions {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

html.manaql-phone #modal-account-settings .dev-menu-actions .btn,
html.manaql-phone #modal-dev-pin .dev-menu-actions .btn {
  min-height: 44px;
}

html.manaql-phone #modal-account-settings .account-settings-label {
  margin-top: 8px;
}

html.manaql-phone #modal-app-settings .app-settings-row {
  min-height: 44px;
}

/* ============================================================
   أداة التحقق من الأسعار — قارئ كاميرا ملء الشاشة
   ============================================================ */
#modal-price-check.modal-overlay {
  padding: 0;
  background: #0b0b0d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 2600;
}
#modal-price-check.modal-overlay.active {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
#modal-price-check .price-check-stage {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  overflow: hidden;
  background: #000;
}
#price-check-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.price-check-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.price-check-frame {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(92%, 440px);
  height: min(46vh, 300px);
  transform: translate(-50%, -50%);
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.38);
}
.price-check-hint {
  position: absolute;
  left: 20px;
  right: 20px;
  top: calc(42% + min(23vh, 158px));
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.price-check-icon-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 980px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.price-check-icon-btn--close {
  right: 12px;
  left: auto;
  font-size: 1.6rem;
  line-height: 1;
}
.price-check-icon-btn--torch {
  left: 12px;
  right: auto;
  font-size: 0.82rem;
  padding: 0 14px;
}
.price-check-icon-btn--torch[aria-pressed="true"] {
  background: var(--primary);
}
.price-check-sheet,
.price-check-fallback {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 3;
  background: #fff;
  border-radius: 22px;
  padding: 18px 16px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.price-check-sheet {
  max-height: min(72vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.price-check-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -6px 0 8px auto;
  padding: 0;
  border: 0;
  border-radius: 980px;
  background: rgba(60, 60, 67, 0.08);
  color: var(--text-main);
  cursor: pointer;
}
.price-check-sheet.is-stock .price-check-back {
  display: flex;
}
.price-check-sheet.is-stock .price-check-product {
  display: none;
}
.price-check-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 11px 2px;
  border-bottom: var(--hairline) solid var(--separator);
}
.price-check-row-label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.price-check-row-value {
  color: var(--text-main);
  font-size: 1.12rem;
  font-weight: 800;
  text-align: right;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.price-check-discount-val {
  color: var(--primary);
}
.price-check-code-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.price-check-code-line .price-check-row-value {
  min-width: 0;
  letter-spacing: 0.06em;
}
.price-check-copy {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(60, 60, 67, 0.08);
  color: var(--text-main);
  cursor: pointer;
}
.price-check-stock-link {
  display: block;
  width: 100%;
  margin: 12px 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
}
.price-check-stock-link[hidden] {
  display: none;
}
.price-check-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin: 12px 0 14px;
}
.price-check-actions[hidden] {
  display: none;
}
.price-check-actions .price-check-stock-link {
  width: auto;
  margin: 0;
  text-align: center;
}
.price-check-actions .price-check-stock-link[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}
.price-check-stock-list .price-check-row-label,
.price-check-stock-list .price-check-row-value {
  font-size: 1.28rem;
}
.price-check-stock-head {
  margin: 12px 0 2px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 800;
}
.price-check-stock-head:first-child {
  margin-top: 0;
}
.price-check-type-btn {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-main);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.price-check-stage:has(#price-check-sheet:not([hidden])) .price-check-type-btn,
.price-check-stage:has(#price-check-fallback:not([hidden])) .price-check-type-btn {
  display: none;
}
.price-check-stock-list .price-check-row-label {
  text-align: right;
}
/* RTL: اسم المخزن يمين · مبيعات + العدد يسار */
.price-check-audit-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.price-check-audit-head .price-check-row-label {
  flex: 1;
  min-width: 0;
  text-align: right;
}
.price-check-audit-sales {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: left;
}
.price-check-audit-sales .price-check-row-value {
  text-align: left;
}
/* فواصل بطاقات المناقلات في التدقيق — نفس لون النظام · أسمك قليلاً */
.price-check-stock-list .price-check-row--audit {
  border-bottom: 1.5px solid var(--separator);
}
.price-check-stock-list .price-check-audit-head {
  border-bottom: 1.5px solid var(--separator);
}
/* RTL: النص يمين · زر الطباعة يسار */
.price-check-row--audit {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}
.price-check-audit-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.price-check-audit-print {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(60, 60, 67, 0.08);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* طباعة فوق · مشاركة تحت — نفس المقاس */
.price-check-audit-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.price-check-audit-share {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(60, 60, 67, 0.08);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.price-check-again {
  min-height: 48px;
}
.price-check-fallback-lead {
  margin: 0 0 12px;
  text-align: center;
  font-weight: 700;
  color: var(--text-main);
}
.price-check-manual {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  text-align: center;
}

/* Phone native chrome — hide scrollbars, lock pinch, keep desktop unchanged */
html.manaql-phone {
  touch-action: pan-y;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overflow-x: hidden;
  max-width: 100%;
}
html.manaql-phone body {
  touch-action: pan-y;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-attachment: scroll;
  -webkit-text-size-adjust: 100%;
}
html.manaql-phone .container {
  flex: 1 0 auto;
  height: auto;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
html.manaql-phone .intro-wrapper {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
html.manaql-phone .selection-screen {
  width: 100%;
  max-width: 100%;
}
html.manaql-phone .footer {
  margin-top: 24px;
  width: 100%;
  max-width: 100%;
  padding: 18px 12px max(22px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
html.manaql-phone .footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
}
html.manaql-phone .footer-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: inherit;
  line-height: inherit;
}
html.manaql-phone .footer-sep {
  display: none;
}
html.manaql-phone .footer-line,
html.manaql-phone .footer-copy .dev-credit-name {
  display: block;
  font-size: inherit;
  line-height: inherit;
  font-weight: 600;
}
html.manaql-phone,
html.manaql-phone * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html.manaql-phone *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

#modal-stock-quick-report .transfer-preview-table .col-num.is-neg,
#modal-stock-quick-report .transfer-preview-card-value.is-neg { color: #b91c1c; font-weight: 800; }
#modal-stock-quick-report .transfer-preview-table .col-num.is-pos,
#modal-stock-quick-report .transfer-preview-card-value.is-pos { color: #15803d; font-weight: 800; }

/* التعديل الاستثنائي — إدارة الموظفين (شبه كاملة مثل النوافذ الكبيرة) */
/* إدارة/متابعة الموظفين — لوحة قائمة+تفاصيل (staff-shell) */
.modal-content.staff-shell-modal {
  max-width: min(1100px, 98vw) !important;
  width: min(1100px, 98vw) !important;
  max-height: min(92vh, 920px) !important;
  height: min(92vh, 920px);
  margin: 2vh auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  text-align: right;
}
.staff-shell-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--separator, #e5e5ea);
  flex-shrink: 0;
}
.staff-shell-title { margin: 0 0 4px; font-size: 1.15rem; }
.staff-shell-lead { margin: 0; font-size: 0.88rem; color: #666; }
.staff-shell-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.staff-shell-stat { font-size: 0.85rem; color: #666; margin-inline-end: 4px; }
.staff-shell-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 0;
}
.staff-shell-rail {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--separator, #e5e5ea);
  background: #fafafa;
}
.staff-shell-search {
  margin: 10px;
  padding: 8px 10px;
  border: 1px solid var(--separator, #ddd);
  border-radius: 8px;
  font: inherit;
}
.staff-shell-list {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.staff-shell-pane {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 16px;
}
.staff-shell-back {
  display: none;
  margin-bottom: 10px;
  border: 0;
  background: transparent;
  color: var(--accent, #007aff);
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.staff-shell-empty {
  padding: 24px 12px;
  color: #888;
  text-align: center;
}
.staff-shell-create-head,
.staff-detail-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.staff-admin-create-grid {
  display: grid;
  gap: 6px 10px;
  margin-bottom: 10px;
}
.staff-detail-card {
  border: 1px solid var(--separator, #ddd);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
}
.staff-detail-badge {
  font-size: 0.8rem;
  color: #555;
  background: #f2f2f7;
  border-radius: 999px;
  padding: 2px 8px;
}
.staff-detail-meta {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: #555;
}
.staff-monitor-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--separator, #e5e5ea);
  flex-shrink: 0;
  font-size: 0.88rem;
}
.staff-monitor-steps button {
  border: 0;
  background: transparent;
  color: var(--accent, #007aff);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font: inherit;
}
@media (max-width: 820px) {
  .staff-shell-body { grid-template-columns: 1fr; }
  .staff-shell-rail { border-inline-end: 0; border-bottom: 1px solid var(--separator, #e5e5ea); max-height: 42vh; }
  .staff-shell-back { display: inline-block; }
  .staff-shell-body.is-show-pane .staff-shell-rail { display: none; }
  .staff-shell-body:not(.is-show-pane) .staff-shell-pane > .staff-shell-back { display: none; }
  html.manaql-phone .staff-shell-body.is-show-pane .staff-shell-rail { display: none; }
  html.manaql-phone .staff-shell-body:not(.is-show-pane) .staff-shell-pane { display: none; }
  html.manaql-phone .staff-shell-body:not(.is-show-pane) .staff-shell-rail { max-height: none; flex: 1; }
}


.staff-admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
html.manaql-phone #modal-staff-admin .staff-admin-modal,
html.manaql-phone #modal-staff-monitor .staff-admin-modal {
  width: calc(100vw - 16px) !important;
  max-width: none !important;
  height: min(94vh, 100dvh - 12px);
  max-height: min(94vh, 100dvh - 12px) !important;
  margin: 6px auto;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
.staff-admin-card { border: 1px solid var(--separator, #ddd); border-radius: 10px; padding: 10px 12px; }
.staff-admin-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.staff-admin-perms { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0; }
.staff-admin-perm { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.staff-admin-group { margin-top: 10px; }
.staff-admin-group-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--separator, #ddd);
}
.staff-admin-role-title {
  font-size: 0.85rem;
  color: var(--secondary-label, #666);
  margin: 8px 0 4px;
}
.staff-admin-serial-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-family: ui-monospace, monospace;
  direction: ltr;
}
.staff-admin-serial-row button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.staff-monitor-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.staff-monitor-crumb button {
  border: 0;
  background: transparent;
  color: var(--accent, #007aff);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.staff-admin-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-admin-card-actions .btn { flex: 1 1 auto; min-width: 0; }