/* ===========================================================================
   components.css — طبقة المكوّنات الكنسية (Modernize الهادئ)
   ---------------------------------------------------------------------------
   المصدر الواحد للأزرار وحقول الإدخال والبطاقة العامة. تُحمَّل هذه الطبقة
   مباشرةً بعد base.css (التوكنات)، قبل كل أسطح الميزات، فترثّها الأسطح
   وتتجاوزها عند الحاجة. الأسماء ثابتة (مقدّسة) لأن تخصيص هوية المستأجر
   (_fullTheme في settings-theme.js) يعتمد عليها؛ القيم وحدها قابلة للتحسين.

   مُستخرجة من:
   - الأزرار: layout.css (كانت مجزّأةً عبر 305-356 / 1041 / 1125) → مُوحَّدة هنا.
   - الحقول: layout.css (1203-1446) → أُسقط منها 7 أنماط Meadows ميتة لم تُستخدم
     (modern/minimal/neumorphic/glass/colorful/outlined/pill).
   - البطاقة: جديدة (.ds-card)؛ الأسطح المميّزة (oc-* · odd-* · cd-* · kpi) تحتفظ
     بهويتها لكن يجب أن تستهلك نفس التوكنات.
   تحسينات: ‎.btn-ghost (كان مستخدماً بلا تعريف)، ‎:focus-visible و ‎:disabled
   للأزرار، وسهم select الأرجواني #6B5DD3 رُمّم إلى الأساسي #4870D6.
   =========================================================================== */

/* ===========================================================================
   BUTTONS
   - قاعدة صلبة بلا تدرّج/ظل، حبّة pill (999px) موحَّدة مع رقاقة حالة الطلب،
     التركيز الأساسي بلا نيون. كل أزرار التطبيق دائرية الحواف الآن.
   - المتغيرات: primary / secondary / danger / success / warning / info / ghost
     + الحجم ‎.btn-sm (حبّة pill أصغر للأدوات المدمجة).
   =========================================================================== */
.btn {
    /* الخلفية واللون كانا يأتيان من قاعدة .btn في app-bootstrap.min.css
       (‎background-color: transparent‎ و‎color: var(--bs-body-color) = #2A3547‎)،
       وكل متغيّرات الزر أدناه تضبطهما بنفسها فلم يظهر النقص. الظاهر الوحيد كان
       ‎class="btn"‎ المجرّدة في ترقيم سجلّ النشاط. بحذف Bootstrap صارا مسؤوليتنا:
       - transparent مطابق حرفياً لما كان.
       - ‎--text-main‎ يساوي ‎#2A3547‎ في الوضع الفاتح — نفس القيمة بالضبط — ويصحّح
         الوضع الداكن الذي كان يرث لوناً فاتح-الوضع ثابتاً من Bootstrap. */
    background: transparent;
    color: var(--text-main);
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    box-shadow: none;
}

.btn:hover {
    border-color: transparent;
}
.btn:active {
    transform: none;
}

/* حلقة تركيز موحّدة (لوحة المفاتيح فقط) — بلا نيون، درجة أساسية شفّافة */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--primary);
    color: var(--text-light);
    border-color: transparent;
    box-shadow: none;
}
.btn-primary:hover {
    background: var(--primary-hover);
    border-color: transparent;
    box-shadow: none;
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
    box-shadow: none;
}
.btn-secondary:hover {
    background: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-border);
    box-shadow: none;
}

.btn-danger {
    background: var(--danger);
    color: var(--text-light);
    border-color: transparent;
}
.btn-danger:hover {
    background: var(--danger-hover);
}
.btn-danger:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 26%, transparent);
}

.btn-success {
    background: var(--success);
    color: var(--text-light);
    border-color: transparent;
}
.btn-success:hover {
    background: color-mix(in srgb, var(--success) 85%, #000);
}

.btn-warning {
    background: var(--secondary);
    color: var(--text-light);
    border-color: transparent;
}
.btn-warning:hover {
    background: var(--secondary-hover);
}

.btn-info {
    background: var(--primary);
    color: var(--text-light);
    border-color: transparent;
}
.btn-info:hover {
    background: var(--primary-hover);
}

/* زر شفّاف بنص حبري؛ hover بخلفية أساسية خفيفة. كان مستخدماً (مرّتين) بلا تعريف. */
.btn-ghost {
    background: transparent;
    color: var(--text-title);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--light-primary);
    color: var(--primary);
}
.btn-ghost:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* الحجم الصغير: حبّة pill للأدوات المدمجة (21 استخداماً). */
.btn-sm {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
}

/* زر دائري أيقوني: مربّع ثابت + border-radius 50% = دائرة تامة. يُستعمل
   لإجراء «إضافة» بارز في الترويسة (طلب/منتج/ملاحظة/حملة/تكلفة/توصيل...).
   الرمز المعروض أيقونة SVG حادّة (ليس محرف «+» النصّي الذي يتباين وزنه
   ومحوره بين الخطوط فلا يتطابق الزرّ بين الترويسات)، وتُحفظ التسمية في
   aria-label/title للوصولية. التمركز صريح (inline-flex + place-content
   center) كي تثبت الأيقونة في منتصف الدائرة بلا اعتماد على إرث .btn.
   الخصوصية .btn.add-circle-btn (0,2,0) تتغلّب على قواعد .btn في كتلة كثافة
   الجوال (padding/font-size) كي تبقى الدائرة ثابتة على كل المقاسات. */
.btn.add-circle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    /* ظل أساسي ناعم (نفس توكن العناصر الأساسية في الودجات وزرّ الألوان)
       يمنح الزرّ الدائري هيئة CTA بارز في كل ترويسة دون كسر لغة
       «القاعدة الصلبة» — التوكن ملتزَم لا قيمة مستحدثة. */
    box-shadow: var(--shadow-primary);
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

/* أيقونة الجمع حادّة ومتطابقة عبر كل الصفحات: محرف «+» النصّي يختلف
   وزنه ومحوره بين الخطوط فلا يتطابق الزرّ بصرياً بين الترويسات. SVG
   بـ currentColor يرث لون الزرّ (أبيض على الأساسي) فيتطابق تماماً. */
.btn.add-circle-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.btn.add-circle-btn:hover {
    box-shadow:
        0 0 2px rgb(145 158 171 / 22%),
        0 16px 30px -6px color-mix(in srgb, var(--primary) 34%, transparent);
}

/* رفعة لَمسية خفيفة على الـ hover فقط (لا على الضغط — احتراماً لقاعدة
   .btn:active { transform: none }). تُلغى لمن يفضّل تقليل الحركة. */
@media (prefers-reduced-motion: no-preference) {
    .btn.add-circle-btn:hover {
        transform: translateY(-1px);
    }
}

/* ===== بوليش زرّ الإضافة في الترويسة =====
   بجانبه في الشريط أفاتار الملف الشخصي (36px ظلّه خفيف 3px 8px) — كان الزر
   بنفس القطر لكن بتوهّج ثقيل فيبدو «شاذّاً» عن جاره. نوحّد لغة الظل مع
   الأفاتار، ونضغط القليلاً عند الضغط لردّة فعل لمسية، وعلى الجوال نصغّر
   القطر قليلاً مع كثافة الشريط المصغّرة كي يلتهم صفاً الترويسة. */
.btn.add-circle-btn:active {
    box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 26%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
    .btn.add-circle-btn:active {
        transform: scale(0.94);
    }
}
@media (max-width: 720px) {
    .btn.add-circle-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        /* ظل الأفاتار نفسه (topbar-profile.css .mpc-avatar) — جارٌ لا منفرد */
        box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 30%, transparent);
    }
    .btn.add-circle-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* زرّ واتساب المركَّب (whatsappSplitButton في admin-whatsapp.js): الوعاء
   <div class="btn-sm wa-action-btn"> لا يحمل صنف .btn، فلا يرث display:inline-flex
   منه ويبقى block. وحينها يهبط زرّ السهم ▾ (display:flex بمستوى كتلة) سطراً
   جديداً تحت زرّ الإرسال بدل أن يقف بجانبه. نُثبّت inline-flex هنا مصدراً
   واحداً لكل المواضع (بطاقة الطلب + جدول العملاء). في RTL يجلس الزرّ الأوّل
   (الإرسال) يميناً والسهم ▾ يساراً. */
.wa-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===========================================================================
   CARD ACTION BUTTON (.card-act) — زر إجراء أييقوني مدمج داخل بطاقات السطح
   ---------------------------------------------------------------------------
   مصدر وحيد لأزرار «تعديل» و«حذف» (أيقونات فقط) داخل بطاقات الطلبات/العملاء/
   المخزون/التوصيل/الحملات. يوحّد لغة الأزرار الأيقونية التي كانت مكرّرة
   محلياً في كلٍّ من notes.css (.nc-act) و production-costs.css (.pcc-act)
   فيرثها أيّ سطح جديد دون تكرار ~30 سطراً لكلّ صفحة. البطاقات القائمة
   (.nc-act/.pcc-act) تبقى تعمل كما هي — هذا الصنف للأصل الجديد فقط.
   دائرة بحدّ شعرة، أيقونة 15px، hover أساسيّ، وصنف ‎.card-act-danger
   يلوّن الـ hover بالخطر.
   =========================================================================== */
.card-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}
.card-act svg {
    width: 15px;
    height: 15px;
    stroke-width: 2;
    flex-shrink: 0;
}
.card-act:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}
.card-act.card-act-danger:hover {
    background: color-mix(in srgb, var(--danger) 10%, var(--surface-solid));
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}
.card-act:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.card-act.card-act-danger:focus-visible {
    outline-color: var(--danger);
}
@media (prefers-reduced-motion: reduce) {
    .card-act {
        transition: none;
    }
}

/* ===== View toggle (segmented) — مبدّل العرض الموحّد =====
   مُستخرج من نسختَي customers.css و orders-cards.css المتطابقتين (كانتا
   مكرّرتين بنطاقَي #customersPage/#ordersPage). مجموعة أزرار شفّافة، النشط
   منها يملأه الأساسي. صفحة dashboard تحتفظ بنسختها المختلفة عمداً. */
.view-toggle-buttons .btn {
    padding: 6px 18px;
    min-width: auto;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}
.view-toggle-buttons .btn:hover {
    color: var(--text-title);
}
.view-toggle-buttons .btn.btn-secondary {
    background: transparent;
    border: none;
    color: var(--text-secondary);
}
.view-toggle-buttons .btn.btn-primary {
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 32%, transparent);
}
.view-toggle-buttons .btn.btn-primary:hover {
    background: var(--primary-hover);
}

/* ===========================================================================
   FORM FIELDS
   - حقل أبيض بحدّ شعرة محايد، 7px، تركيز أساسي + حلقة أساسية خفيفة.
   - select مع سهم مخصّص (رُمّم لون السهم من البنفسجي القديم إلى الأساسي).
   - ‎.searchable-input يرث هيئة .form-input بالكامل. حبّة الـpill السابقة
     كانت خاصة به وحده فتُنتج لغتين في نموذج واحد؛ لغة البطاقة البيضاوية
     تخصّ مودالات الطلب وحدها عبر ‎.ao-search-dd‎ في order-details.css.
   =========================================================================== */
.form-group {
    margin-bottom: 24px;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-title);
    font-size: 13px;
    text-align: right;
    position: relative;
    padding-right: 10px;
}

/* شريط أساسي صغير يسار التسمية (علامة الحقل) */
.form-label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    background: var(--primary);
    border-radius: 2px;
}

/* تركيز هادئ على المجموعة دون حركة زخرفية */
.form-group:focus-within .form-label {
    color: var(--primary);
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--input-border);
    border-radius: var(--control-radius);
    font-size: 14px;
    background: var(--surface-main);
    color: var(--text-title);
    font-weight: 500;
    font-family: inherit;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
    position: relative;
}

.form-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

.form-input:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-main));
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--input-shadow-focus);
}

.form-input.error {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-main));
}

.form-input:disabled {
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* select بمظهر موحّد + سهم مخصّص. لون السهم عند التركيز رُمّم من البنفسجي
   القديم (#6B5DD3) إلى الأساسي (#4870D6) ليلتزم هوية Modernize. */
select.form-input {
    background-color: var(--surface-solid);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Cpath%20fill%3D%22%237C8FAC%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.2c-5%200-9.3%201.8-13.2%205.4A17.6%2017.6%200%200%200%200%2082.6c0%204.8%201.8%209.3%205.4%2013.2l128%20127.9c3.9%203.9%208.4%205.7%2013.2%205.7s9.3-1.8%2013.2-5.7l128-127.9c3.6-3.9%205.4-8.4%205.4-13.2%200-4.8-1.8-9.3-5.4-13.2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position:
        left 1.2em top 50%,
        0 0;
    background-size:
        0.8em auto,
        100%;
    cursor: pointer;
}

select.form-input:focus {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Cpath%20fill%3D%22%234870D6%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.2c-5%200-9.3%201.8-13.2%205.4A17.6%2017.6%200%200%200%200%2082.6c0%204.8%201.8%209.3%205.4%2013.2l128%20127.9c3.9%203.9%208.4%205.7%2013.2%205.7s9.3-1.8%2013.2-5.7l128-127.9c3.6-3.9%205.4-8.4%205.4-13.2%200-4.8-1.8-9.3-5.4-13.2z%22%2F%3E%3C%2Fsvg%3E');
}

textarea.form-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* حقل المدينة القابل للبحث.
   كان يفرض هيئته الخاصة (حبّة 999px + هالة سماوية بـ--accent) فيهزم
   .form-input بالتخصيص، رغم أنّه يُكتب دائماً `class="form-input
   searchable-input"`. أثر ذلك في «إضافة عميل جديد» و«تعديل العميل»:
     • حقل المدينة حبّة بين ثلاثة حقول بزوايا 7px — لغتان في نموذج واحد.
     • القائمة المنسدلة (layout.css) تلتصق بأسفل الحقل عبر border-top: none
       و margin-top: -1px ونصف قطر --control-radius، أي أنّها مبنيّة على حقلٍ
       زواياه 7px؛ فوق حبّة 999px ينفصل المفصل بصرياً ويبدو مكسوراً.
     • التركيز سماوي (--accent) بينما إخوته أساسيّة (--primary).
   لا نعيد تعريف شيء هنا: .form-input يملك الهيئة، وهذا المحدِّد يضيف فقط ما
   يخصّ سلوك البحث. مودالا الطلب غير متأثّرين (لهما .ao-dd-input مُخصّص). */
.searchable-dropdown {
    position: relative;
}
.searchable-dropdown .searchable-input {
    width: 100%;
}

/* ===========================================================================
   CARD PRIMITIVE
   - بطاقة عامة موحّدة: سطح أبيض بلا حدود، 7px، ظل التوقيع، hover يرفع.
   - الأسطح المميّزة (oc-* · odd-* · cd-* · kpi) تحتفظ بهويتها لكن تستهلك التوكنات.
   - نُبقي مساحة داخلية 24px (‎--card-padding) و30px للبطاقات الواسعة.
   =========================================================================== */
.ds-card {
    background: var(--card-bg);
    border: 0;
    border-radius: var(--pane-radius);
    padding: var(--card-padding);
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-card:hover {
    box-shadow: var(--shadow-hover);
}

/* مسطّحة: حدّ شعرة بدل الظل (حين تكون البطاقة داخل سطح آخر مرفوع). */
.ds-card--flat {
    box-shadow: none;
    border: 1px solid var(--border-main);
}

/* كبيرة: زاوية 16px ومساحة 30px للألواح الواسعة. */
.ds-card--lg {
    padding: var(--card-padding-lg);
    border-radius: var(--radius-xl);
}

.ds-card__title {
    color: var(--text-title);
    font: 600 16px/1.3 var(--app-font-family);
    margin: 0 0 8px;
}
.ds-card__body {
    color: var(--text-secondary);
    font: 400 13px/1.5 var(--app-font-family);
}

/* ============================================================
   كثافة الجوال (≤768px) — تقليص حقول الإدخال والأزرار
   ============================================================
   - .form-input:        12px 16px → 9px 12px (أفقي أقلّ يفسح لمحتوى أوسع)
   - .form-group:        24px → 14px بين الحقول
   - .form-label:        10px → 6px أسفل التسمية (المسافة بينها وبين الحقل)
   - .btn:               7px 16px → 6px 12px
   - .btn-sm:            8px 16px → 6px 12px
   - .view-toggle-buttons .btn: 6px 16px → 5px 12px
   لا نلمس .qty-stepper ولا .wa-action-btn هنا — لهما قواعد pointer:coarse
   تحرس min-height:44px. تقليصها على الجوال سيُبطل هدف اللمس. */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 14px;
    }
    .form-label {
        margin-bottom: 6px;
        padding-right: 8px;
    }
    .form-input {
        padding: 9px 12px;
        font-size: 13.5px;
    }
    textarea.form-input {
        min-height: 90px;
    }

    .btn {
        padding: 6px 12px;
        font-size: 13px;
        gap: 5px;
    }
    .btn-sm {
        padding: 6px 12px;
        font-size: 10.5px;
    }
    .view-toggle-buttons .btn {
        padding: 5px 12px;
        font-size: 11.5px;
    }
}
/* شاشات صغيرة جدّاً: تقليص إضافي طفيف. */
@media (max-width: 420px) {
    .form-input {
        padding: 8px 11px;
    }
    .btn {
        padding: 5px 10px;
    }
}

/* ============================================================
   طبقة اللمس — أهداف نقر صالحة للإصبع
   ============================================================
   المشكلة: أكثر عناصر التحكّم استخداماً كانت أصغر من أي حدّ لمس
   معقول — × الرقاقة 20×20 (دون حدّ WCAG 2.5.8 AA نفسه: 24×24)،
   مسح البحث 26×26، أزرار واتساب 26–28، حذف السلة 28×28، ومفاتيح
   الكمية 28. ولم تكن في المشروع **أي** قاعدة pointer: coarse، أي
   أنّ اللمس لم يُخدَم أصلاً لا أنّه خُدم بمقاسات صغيرة.

   المفتاح نوع المؤشِّر لا عرض الشاشة: استعلام max-width يخطئ
   اللابتوب ذا الشاشة اللمسية والآيباد ذا لوحة المفاتيح معاً. ومع
   pointer: coarse يحتفظ مستخدم المكتب بالكثافة التي صُمِّمت عليها
   واجهة التشغيل، ويكسب الإصبع هدفاً كاملاً.

   أسلوبان، والهندسة هي التي تختار:
   (أ) توسيع غير مرئي بـ ::after — يبقى العنصر بمقاسه المرسوم فلا
       تتغيّر اللغة البصرية، وتكبر منطقة النقر وحدها.
   (ب) مقاس حقيقي — حين يقصّ الأب (overflow: hidden) أيّ توسيع
       وهمي فيُبطله.

   ملاحظة RTL: التوسيط بـ left:50% + translate(-50%,-50%) متماثل
   حول المحور، فلا ينقلب مع الاتجاه ولا يحتاج خصائص منطقية.
   ============================================================ */
@media (pointer: coarse) {
    /* ---------- (أ) توسيع غير مرئي ---------- */

    /* × الرقاقة بلا بادئة صفحة عمداً: نفس المكوّن مُعرَّف مرّتين
       (#ordersPage في orders-cards.css و#customersPage في
       customers.css)، والتوسيع سلوك واحد لا ينبغي أن يُنسَخ معهما
       ولا أن يفوت صفحةً ثالثة تُضاف لاحقاً. */
    .ot-chip button,
    .ot-search-clear,
    .ao-cart-remove,
    .card-act {
        position: relative;
    }

    .ot-chip button::after,
    .ot-search-clear::after,
    .ao-cart-remove::after,
    .card-act::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--tap-w, 44px);
        height: var(--tap-h, 44px);
        /* بلا pointer-events: none — العنصر الزائف ابنٌ للزرّ، فالنقرة
           عليه تصعد إليه. هذا هو جوهر الحيلة لا تفصيلاً فيها. */
    }

    /* × الرقاقة: 32 لا 44. الرقائق متجاورة بفجوة 8px، فهدف 44 كان
       سيمتدّ فوق الرقاقة المجاورة ويبتلع نقرتها. 32 يتجاوز حدّ
       WCAG 2.5.8 AA (24×24) بهامش مريح ويقف دون الفجوة. */
    .ot-chip button {
        --tap-w: 32px;
        --tap-h: 32px;
    }

    /* ---------- (ب) مقاس حقيقي ---------- */

    /* مفاتيح الكمية: على .qty-stepper خاصية overflow:hidden فتقصّ أيّ
       ::after يتجاوز حدودها. الحبّة تكبر فعلياً — وهو السلوك الصحيح
       على اللمس أصلاً — و.qty-stepper له align-items:stretch فيتبعها
       حقل الرقم تلقائياً بلا تصدّع. */
    .qty-stepper .qty-step-btn {
        min-height: 44px;
    }

    /* زرّ واتساب: يأتي بشكلين من admin-whatsapp.js — <button> مفرد،
       أو <div> وعاءً لزرَّين (المقدمة + ▾) عليه overflow:hidden ضمن
       style مضمّن. الوعاء يقصّ أي ::after على أبنائه، فلا ينفع
       التوسيع الوهمي هنا؛ نُكبّر الوعاء فعلياً بدل ذلك.
       min-height يتغلّب على height المُعلَنة في orders-cards.css
       وcustomers.css (الارتفاع المُستخدَم = max(min-height, height))
       فلا حاجة لرفع الأخصّية رغم أنّ الملفَّين يُحمَّلان بعد هذا. */
    .oc-send .wa-action-btn,
    .customers-table .wa-action-btn,
    #ordersPage .ot-main .wa-action-btn {
        min-height: 44px;
    }

    /* وفي شكل الوعاء تحديداً: الزرّان الداخليان هما ما يحمل onclick،
       والوعاء يحمل stopPropagation فقط. لولا مدّهما لكامل الارتفاع
       لبقيا وسط وعاء 44px، فتقع النقرة في الفراغ حوله على
       عنصر لا يفعل شيئاً — أي هدف أكبر بلا فائدة. */
    .oc-send .wa-action-btn > button,
    .customers-table .wa-action-btn > button,
    #ordersPage .ot-main .wa-action-btn > button {
        height: 100%;
    }
}

/* ===== سعر عليه خصم — عابر للأسطح =====
   يُصدره priceHtml() في app-core-state.js: الأصلي مشطوباً، ثم السعر المُطبَّق،
   ثم رقاقة مقدار الخصم. تُستخدم في المخزون والباقات ومنتقيات الطلب والتقارير،
   فمكانها هنا لا في ملف صفحة. */
.price-was {
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 600;
    margin-inline-end: 6px;
}
.price-now {
    font-weight: 800;
    color: inherit;
}
.price-off {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 800;
    vertical-align: middle;
    white-space: nowrap;
}

/* ===== شريط ترقيم الصفحات — عابر للأسطح =====
   تستعمله صفحتا الطلبات (التالي/السابق على مؤشّرات الخادم) والعملاء (أزرار
   أرقام مرقّمة جانب-العميل) بدل السكرول اللامتناهي. خصائص منطقية فقط
   (inline-start/end) كي يعمل في RTL وLTR بلا قلب في i18n.css. */
.pg-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 8px 6px;
}
/* ‎display:flex أعلاه يغلب نمط ‎[hidden]‎ الافتراضي للمتصفح، فيبقى الشريط
   ظاهراً بعدou controller.stop()‎ (hidden=true) مضhoraً عدّاداً قديماً
   فوق قائمة فارغة. نعيد للـhidden سلطة الإخفاء صراحةً. */
.pg-bar[hidden] {
    display: none;
}
.pg-pages {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.pg-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    /* نمط HeroUI: أزرار بلا حدود، والصفحة النشطة دائرة بسطح ناعم لا لون أساسي */
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-title);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.pg-btn:hover:not(:disabled):not(.is-active) {
    background: var(--surface-hover);
    color: var(--primary);
}
.pg-btn.is-active {
    background: var(--surface-hover);
    color: var(--text-title);
    cursor: default;
}
.pg-btn:disabled {
    opacity: 0.45;
    cursor: default;
}
.pg-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-inline: 12px;
    font-size: 14px;
}
.pg-nav svg {
    flex: none;
}
/* في LTR تُقلب الأسهم أفقیاً كي يبقى «السابق» باتجاه البداية دائماً */
[dir='ltr'] .pg-nav svg {
    transform: scaleX(-1);
}
.pg-ellipsis {
    color: var(--text-muted);
    font-size: 13px;
    padding-inline: 2px;
}
.pg-info {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.pg-count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

/* صفحة واحدة (أقل من حجم الصفحة): عدّاد «عرض … من …» فقط بلا أزرار — أنظف. */
.pg-bar.pg-single .pg-btn,
.pg-bar.pg-single .pg-pages,
.pg-bar.pg-single .pg-info {
    display: none;
}