/* ===========================================================================
   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 {
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .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: .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 .2s ease, box-shadow .2s ease, transform .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); }
}

/* زرّ واتساب المركَّب (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 .15s ease, color .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 .2s ease, box-shadow .2s ease, background-color .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 .24s cubic-bezier(.4, 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%;
    }
}