/* ============================================================
   Order Add/Edit — لغة مودال الطلب متعدّد الخطوات (.ao-*)
   شُقّ من order-details.css. يُحمَّل بعده مباشرةً في _head.html
   فترتيب الـcascade كما كان بالضبط.
   اللغة نفسها تُستهلك في كل مودالات الإضافة/التعديل
   (عميل · ملاحظة · منتج · تكلفة · حملة · مدينة).
   ============================================================ */

/* ===== Add Order — خلفية المرحلتين (.ao-step) =====
   منطقة هادئة بلون الخلفية تتداخل فوقها بطاقات الأقسام البيضاء. هذا
   يمنح إحساس "الشاشة الداخلية" في order-form-redesign. */
.ao-step {
    padding: 16px;
    background: var(--bg-main);
    animation: oddIn 0.25s ease both;
}

/* ===== Add Order — ترويسة المرحلتين (.ao-step-header) =====
   شريط علوي أبيض: زر إغلاق على اليمين (RTL عبر ترتيب المصدر) + عنوان
   رئيسي/فرعي + شارة المرحلة (١/٢) + زر رجوع يظهر في المرحلة 2. الحشوة
   أكبر من المودالات الأخرى لإفساح المجال للعنوان. */
.ao-step-header {
    background: var(--surface-solid);
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.ao-step-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--bg-main);
    border: none;
    color: var(--text-title);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
    font-size: 20px;
    line-height: 1;
}
.ao-step-close:hover {
    background: var(--border-light);
}
.ao-step-title-block {
    flex: 1;
    min-width: 0;
}
.ao-step-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-title);
    line-height: 1.25;
}
.ao-step-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}
.ao-step-count {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    padding: 5px 11px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.ao-step-back {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-title);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.ao-step-back:hover {
    background: var(--bg-main);
}
.ao-step-back.is-visible {
    display: inline-flex;
}

/* ===== Add Order — شريط التقدم (.ao-step-bar) =====
   قطعتان أفقيّتان تحت الترويسة. */
.ao-step-bar {
    display: flex;
    gap: 4px;
    padding: 10px 18px;
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border-light);
}
.ao-step-bar-seg {
    flex: 1;
    height: 4px;
    background: var(--border-light);
    border-radius: 999px;
    transition: background 0.2s ease;
}
.ao-step-bar-seg.is-done {
    background: var(--primary);
}
/* القطعة النشطة (المرحلة الحالية): primary مهدّأ بين الفارغة والمنجزة.
   كان تدرّجاً حادّاً ٥٠/٥٠ يترك حافّة عمودية في المنتصف ويظهر معكوساً في RTL. */
.ao-step-bar-seg.is-active {
    background: color-mix(in srgb, var(--primary) 45%, var(--border-light));
}

/* ===== Add Order — بطاقات الأقسام (.ao-section) =====
   بطاقات بيضاء بحدّ خفيف تتداخل فوق خلفية .ao-step الهادئة. */
.ao-section {
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.ao-section-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 14px;
}
/* رقم الخطوة مكشوف بلا بطاقة: مجرّد رقم بلون primary بجانب العنوان. */
.ao-section-num {
    color: var(--primary);
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
}
.ao-section-title-block {
    flex: 1;
    min-width: 0;
}
.ao-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-title);
    line-height: 1.2;
}
.ao-section-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ===== Add Order — حقول الإدخال (.ao-field) =====
   التسمية فوق الحقل مع أيقونة + نجمة للإلزامي + "اختياري" للاختياري.
   الحقل خلفية بلون الخلفية يتحوّل إلى أبيض وحدّ primary عند التركيز. */
.ao-field {
    margin-bottom: 12px;
}
.ao-field:last-child {
    margin-bottom: 0;
}
.ao-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.ao-field-label .ao-req {
    color: var(--danger, #dc2626);
    font-weight: 800;
}
.ao-field-label .ao-opt {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 10.5px;
}
.ao-field-ico {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s;
}
.ao-field-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-solid);
    border: 1.5px solid var(--border-main);
    border-radius: 22px;
    padding: 11px 14px;
    transition: all 0.15s;
}
.ao-field-wrap.is-focused {
    background: var(--surface-solid);
    /* مؤشّر التركيز الوحيد في هذا المودال: حلقة الـ3px أُسقطت عمداً لصالح حدٍّ
       يتحوّل إلى --primary (DESIGN.md). بحذف هذا السطر يختفي أثر التركيز
       بالكامل عن حقول إضافة الطلب — لا حلقة ولا حدّ. */
    border-color: var(--primary);
}
.ao-field-wrap.is-focused .ao-field-ico {
    color: var(--primary);
}
.ao-field-wrap.is-filled {
    background: var(--surface-solid);
    border-color: var(--border-main);
}
.ao-field-wrap.is-filled .ao-field-ico {
    color: var(--text-secondary);
}
.ao-field-wrap .form-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-title);
}
.ao-field-wrap .form-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* إلغاء هالة التركيز الداخلية (3px) داخل غلاف الحقل في كل مودالات الإضافة —
   فهي تظهر كحدٍّ داخليٍّ مزدوج بجانب حدّ الغلاف نفسه (المشتكى منه «حدّ داخلي»).
   الغلاف يصير مؤشّر التركيز الوحيد: حدّه يتحوّل إلى --primary عبر :focus-within
   (بلا JS) فيتطابق سلوك حقول إضافة الطلب ويُوحَّد لبقية البطاقات (منتج/مدينة/
   ملاحظة/حملة/تكلفة/عميل). القواعد القديمة المقتصرة على #addOrderModal و
   #addCustomerModal صارت متكرّرة لكنها غير ضارّة (نفس الأثر، تخصيص أعلى). */
.ao-field-wrap .form-input:focus,
.ao-field-wrap .searchable-input:focus,
.ao-field-wrap .ao-dd-input:focus,
.ao-field-wrap .ao-picker-input:focus,
.ao-phone-field .form-input:focus,
.ao-phone-sel:focus-within .form-input:focus {
    outline: none;
    box-shadow: none;
}
.ao-field-wrap:focus-within,
.ao-phone-field:focus-within {
    border-color: var(--primary);
}

/* حقول النصّ الطويلة (textarea) داخل الغلاف: تمدّد عمودياً مع إبقاء
   تغيير الحجم عمودياً فقط، وتحاذى لأعلى بدل التوسيط الأفقي للسطر الواحد. */
.ao-field-wrap:has(textarea) {
    align-items: stretch;
}
.ao-field-wrap textarea.form-input {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}
/* الحقول المحسوبة (readonly) داخل بطاقات الإضافة: مظهر هادئ يميّزها عن
   الحقول القابلة للكتابة دون كسر لغة .ao-field-wrap. */
.ao-field-wrap .form-input[readonly] {
    color: var(--text-secondary);
    cursor: default;
    opacity: 0.85;
}

/* غلاف القوائم المنسدلة (select) داخل الحقل: يخفي السهم الأصلي ويرسم
   سهماً مخصّصاً على الجانب الآخر، تماماً كما في المثال. */
.ao-field-wrap-select {
    position: relative;
    padding-inline-start: 14px;
}
.ao-field-wrap-select .form-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-inline-end: 28px;
}
.ao-field-wrap-select::after {
    content: '';
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: var(--text-muted);
    pointer-events: none;
}

/* توحيد ارتفاع كل صناديق الحقول (مدخل/هاتف/بحث/منتقي) لتتساوى مع القائمة */
.ao-field-wrap,
.ao-phone-field,
.ao-search-dd .searchable-input,
.ao-picker-input {
    min-height: 46px;
}

/* حقل الهاتف بمقدمة الرقم (970+) */
.ao-phone-field {
    display: flex;
    align-items: center;
    background: var(--surface-solid);
    border: 1.5px solid var(--border-main);
    border-radius: 22px;
    padding: 4px 14px 4px 4px;
    transition: all 0.15s;
}
.ao-phone-field.is-focused {
    background: var(--surface-solid);
    border-color: var(--primary);
}
.ao-phone-field.is-filled {
    background: var(--surface-solid);
    border-color: var(--border-main);
}
.ao-phone-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 11px 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.ao-phone-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}
/* مقدمة الهاتف القابلة للاختيار (select) — نمط «start-select» على غرار
   shadcn: <span.ao-phone-sel> يلفّ <select.ao-phone-prefix> ويرسم سهماً
   مخصّصاً متكيّفاً مع الثيم (نفس تقنية .ao-field-wrap-select). الـ wrapper
   بـ LTR صريح كي يتطابق اتجاه النص «+962» مع السهم (يسار→يمين) دون تداخل. */
.ao-phone-sel {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-inline-start: 6px;
    direction: ltr;
}
.ao-phone-prefix {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0 22px 0 12px; /* يمين 22 للسهم، يسار 12 للنص */
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title);
    height: 30px;
    line-height: 1;
    background-color: var(--surface-hover);
    border: 1px solid transparent;
    border-radius: 999px; /* pill يطابق هوية الحقل */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    /* الخيار «+962 الأردن» (قد يطول مع ~230 دولة): سقف عرض للكبسولة
       المغلقة مع قصٍّ ببيانات متتابعة — القائمة المنسدلة تعرض النص كاملاً. */
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}
.ao-phone-prefix:hover {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--surface-hover));
    border-color: color-mix(in srgb, var(--primary) 26%, transparent);
    color: var(--primary);
}
.ao-phone-prefix:focus,
.ao-phone-prefix:focus-visible {
    outline: none;
    background-color: color-mix(in srgb, var(--primary) 14%, var(--surface-hover));
    border-color: var(--primary);
    color: var(--primary);
}
.ao-phone-sel::after {
    content: '';
    position: absolute;
    inset-inline-end: 10px; /* LTR → يمين */
    top: 50%;
    margin-top: -2px; /* محاذاة رأس المثلث عمودياً */
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: var(--text-muted);
    pointer-events: none;
}

/* حقل المدينة القابل للبحث: أيقونة + سهم على يسار الحقل */
.ao-search-dd {
    position: relative;
}
.ao-search-dd .ao-dd-ico {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
}
.ao-search-dd .ao-dd-input {
    padding-inline-start: 40px !important;
}

/* ===== Add Order — مصدر الطلب (.ao-source-*) =====
   Segmented control: الأربع أيقونات SVG داخل علبة واحدة. القطعة النشطة
   ترتفع بخلفية صلبة وظل، وأيقونتها تأخذ لون العلامة (DESIGN §5). */
.ao-source-row {
    display: flex;
    gap: 4px;
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-radius: 22px;
    padding: 6px;
}
.ao-source-btn {
    flex: 1;
    min-width: 0;
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease;
}
.ao-source-btn:hover {
    color: var(--text-secondary);
}
/* القطعة النشطة: ترتفع بخلفية صلبة وظل، وأيقونتها بلون العلامة. */
.ao-source-btn.is-active {
    background: var(--surface-solid);
    box-shadow: var(--shadow-sm);
    color: var(--brand);
}
.ao-source-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}
/* ألوان العلامات التجارية لكل مصدر (تُستهلك عبر currentColor عند التفعيل). */
.ao-source-btn.fb {
    --brand: var(--brand-facebook);
}
.ao-source-btn.ig {
    --brand: var(--brand-instagram);
}
.ao-source-btn.web {
    --brand: var(--brand-website);
}
.ao-source-btn.wa {
    --brand: var(--wa-primary);
}
/* المصادر الإضافية المفعّلة من معالج الإعداد (مكالمة/متجر/تيك توك) —
   ألوانها من الهوية العامة حين لا توكن علامة مخصّص. */
.ao-source-btn.tel {
    --brand: var(--secondary);
}
.ao-source-btn.sto {
    --brand: var(--mint);
}
.ao-source-btn.tt {
    --brand: var(--primary-deep);
}

/* ===== Add Order — زر المتابعة (.ao-cta-btn) ===== */
.ao-cta-btn {
    width: 100%;
    margin-top: 4px;
    padding: 13px 16px;
    background: var(--primary);
    color: var(--text-light);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease;
}
.ao-cta-btn:hover {
    background: var(--primary-hover);
}
.ao-cta-btn svg {
    flex-shrink: 0;
}

/* ============================================================
   Add Order — امتداد الخطوة ٢ بنفس لغة .ao-*
   (منتقي، ألوان، سلة، ملخّص، تحقّق) — كلها توكنز لتبقى مع الثيم/الداكن.
   ============================================================ */

/* توحيد حقول البحث (المدينة/المنتج/البكج) مع صندوق .ao-field-wrap الهادئ
   بدل الحبّة pill، حتى تتّحد لغة كل حقول الكتابة في المودال. */
.ao-search-dd .searchable-input,
.ao-picker-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-main);
    border-radius: 22px;
    background: var(--surface-solid);
    color: var(--text-title);
    font-size: 13.5px;
    font-weight: 500;
    transition:
        background 0.15s,
        border-color 0.15s,
        box-shadow 0.15s;
}
.ao-search-dd .searchable-input {
    padding-inline-start: 40px;
}
.ao-search-dd .searchable-input:focus,
.ao-picker-input:focus {
    outline: none;
    background: var(--surface-solid);
    border-color: var(--primary);
}
/* هالة الـ3px العامة (.form-input:focus) تُلغى داخل البطاقة عمداً — فهي صاخبة
   بجانب تسمية طافية. لكن الحدّ يبقى يتحوّل إلى --primary: هو نصف مؤشّر التركيز
   الذي ينصّ عليه DESIGN.md § «floating labels» (حدّ + لون التسمية معاً).
   إلغاؤه كان يترك الحقل المملوء بلا إشارة تركيز سوى تبدّل لون تسمية 11px —
   أي لون وحده على نصّ صغير، وهو ما لا يكفي لـ WCAG 2.4.7. */
#addOrderModal .form-input:focus,
#addOrderModal .searchable-input:focus,
#editOrderModal .form-input:focus,
#editOrderModal .searchable-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary);
}
.ao-search-dd .searchable-input::placeholder,
.ao-picker-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* ===== منتقي المنتجات/البكجات (.ao-picker) ===== */
.ao-picker {
    position: relative;
}
.ao-picker-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
    padding: 6px;
    display: none;
}
.ao-picker-list.is-open {
    display: block;
    animation: oddIn 0.18s ease both;
}
.ao-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.14s;
}
.ao-picker-item:hover,
.ao-picker-item.is-active {
    background: var(--surface-hover);
}
.ao-picker-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg-main);
    flex-shrink: 0;
}
.ao-picker-meta {
    flex: 1;
    min-width: 0;
}
.ao-picker-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ao-picker-price {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-family: var(--app-font-family);
    font-variant-numeric: tabular-nums;
}
.ao-stock {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ao-picker-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* ===== أزرار الألوان (.ao-color) — توكنز فقط ===== */
.ao-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ao-color {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: var(--bg-main);
    border: 1.5px solid var(--border-light);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-title);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        box-shadow 0.15s;
}
.ao-color:hover {
    background: var(--surface-hover);
}
.ao-color-qty {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ===== سلة الطلب (.ao-cart) ===== */
.ao-cart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ao-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 26px 12px;
    color: var(--text-muted);
    font-size: 12.5px;
    border: 1.5px dashed var(--border-light);
    border-radius: 12px;
    background: var(--bg-main);
}
.ao-cart-empty svg {
    color: var(--text-muted);
    opacity: 0.65;
}
.ao-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
.ao-cart-thumb {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--surface-solid);
    flex-shrink: 0;
}
.ao-cart-meta {
    flex: 1;
    min-width: 0;
}
.ao-cart-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ao-cart-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-family: var(--app-font-family);
    font-variant-numeric: tabular-nums;
}
/* مفتاح الكمية المدمج داخل صف السلة (أصغر من المفتاح الافتراضي) */
.ao-cart-item .qty-stepper {
    border-radius: 9px;
    background: var(--surface-solid);
}
.ao-cart-item .qty-step-btn {
    padding: 6px 10px;
    min-width: 30px;
    font-size: 16px;
}
.ao-cart-item .qty-step-input {
    width: 42px;
    font-size: 13px;
}
.ao-cart-remove {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.14s,
        color 0.14s;
}
.ao-cart-remove:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

/* ===== ملخّص الإيصال (.ao-summary) ===== */
.ao-summary {
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.ao-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.ao-summary-row > span:first-child {
    min-width: 0;
}
.ao-summary-val {
    /* قيم الملخّص (المجموع/الخصم/التوصيل/الإجمالي) بخط البرنامج المختار */
    font-family: var(--app-font-family);
    font-variant-numeric: tabular-nums;
    color: var(--text-title);
    font-weight: 600;
    white-space: nowrap;
}
.ao-summary-row.is-discount .ao-summary-val {
    color: var(--danger);
}
.ao-summary-row.is-total {
    border-top: 1px solid var(--border-main);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-title);
}
.ao-summary-row.is-total .ao-summary-val {
    font-size: 17px;
    color: var(--primary);
}

/* ===== حالات الخطأ داخل الحقل ===== */
.ao-field-error {
    display: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--danger);
    margin-top: 6px;
}
.ao-field-error.is-visible {
    display: block;
    animation: oddIn 0.16s ease both;
}
/* ملاحظة: حقل المدينة (.ao-search-dd) غلافه بلا حدّ — الحدّ الفعلي على
   المدخل الداخلي .searchable-input، لذا يُوجَّه الخطأ إليه كي يتطابق تأثيره
   مع اسم العميل والهاتف (حدّ + هالة على الصندوق المرئي نفسه). */
.ao-field-wrap.is-invalid,
.ao-phone-field.is-invalid,
.ao-search-dd.is-invalid .searchable-input,
.ao-picker-input.is-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent) !important;
}
/* إشارة الخطأ على علبة الـ segmented: حدّ أحمر على الحاوية + أيقونات حمراء،
   مع نص الخطأ الأحمر أسفلها. */
.ao-source-row.is-invalid {
    border-color: color-mix(in srgb, var(--danger) 55%, var(--border-main));
}
.ao-source-row.is-invalid .ao-source-btn {
    color: var(--danger);
}

/* ===== Add Order — منتقي طريقة التنفيذ (.ao-fulfill-row) =====
   مكتفٍ ذاتياً بصفته الخاصة: لا يرث شيئاً من .ao-source-row حتى لا يكسره أي
   تداخل cascade في بيئة أخرى. أزرار «توصيل / استلام من المتجر» مصغّرة، وكل
   زر حصّته بحسب نصّه مع منع أي تقاطع بين النصّين. */
.ao-fulfill-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    margin-inline-end: auto; /* يصفّف في بداية السطر تحت العنوان */
}
.ao-fulfill-row .source-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 16px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-muted);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease;
}
.ao-fulfill-row .source-option:hover {
    color: var(--text-secondary);
}
.ao-fulfill-row .source-option.is-active {
    background: var(--surface-solid);
    box-shadow: var(--shadow-sm);
    color: var(--brand);
}
.ao-fulfill-row.is-invalid {
    border-color: color-mix(in srgb, var(--danger) 55%, var(--border-main));
}
.ao-fulfill-row.is-invalid .source-option {
    color: var(--danger);
}

/* ===== صقل بطاقة إضافة الطلب (أجمل/أرتب) ===== */
/* توحيد حجم البطاقات الثلاث (إضافة/تعديل/تفاصيل الطلب): عرض 640px + حواف
    24px + خلفية تعتيم موحّدة. تفاصيل الطلب يضبط العرض أيضاً inline من JS
    (640px) لكن القاعدة هنا تضمن تطابق الحواف/الخلفية بين الثلاثة. */
/* خلفية التعتيم الضبابية موحّدة لكل مودالات التفاصيل (الطلب + كل التوابع
    عميل/ملاحظة/حملة/إقليم/تكلفة/منتج/بكج/حركة) — كانت حكراً على مودالات
    الطلب فبدت بقية بطاقات التفاصيل أفتح/أمسّ عند فتحها بجانبه. */
#addOrderModal,
#editOrderModal,
#orderDetailsModal,
#customerDetailsModal,
#noteDetailsModal,
#campaignDetailsModal,
#regionDetailsModal,
#productionCostDetailsModal,
#productDetailsModal,
#packageDetailsModal,
#movementDetailsModal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
}

#addOrderModal .modal-content,
#editOrderModal .modal-content,
#orderDetailsModal .modal-content,
/* توحيد بطاقات الإضافة كلها على مقاس مودال الطلب: 640px + زاوية 24px. */
#addNoteModal .modal-content,
#addProductModal .modal-content,
#editProductModal .modal-content,
#campaignModal .modal-content,
#addRegionModal .modal-content {
    max-width: 640px;
    border-radius: 24px;
}

/* === كثافة مودال الإضافة على الجوال (≤768px) — إلغاء المودال بحجم
   سطح المكتب على شاشات <768. كان max-width 640px + border-radius 24px
   + padding الداخلي يجعل البطاقة تشبه «صحن عائم» على الجوال لا نافذة
   منبثقة. التقليص:
   - max-width 640px → لا تغيير (الـwidth:90% من layout.css يحكم)
   - border-radius 24px → 14px (pill يبقى على الأزرار فقط)
   - .ao-step padding 16px → 12px (المنطقة المحيطة بالبطاقات)
   - .ao-step-header padding 18px 18px 14px → 12px 12px 10px
   - .ao-row-2 gap 12px → 8px
   على ≤480px: padding 12→10، border-radius 14→12. حقل .ao-field يحتفظ
   بـ min-height 46px لأهداف اللمس. */
@media (max-width: 768px) {
    #addOrderModal .modal-content,
    #editOrderModal .modal-content,
    #orderDetailsModal .modal-content,
    #addNoteModal .modal-content,
    #addProductModal .modal-content,
    #editProductModal .modal-content,
    #campaignModal .modal-content,
    #addRegionModal .modal-content {
        border-radius: 14px;
    }
    .ao-step {
        padding: 12px;
    }
    .ao-step-header {
        padding: 12px 12px 10px;
        gap: 10px;
    }
    .ao-step-close {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .ao-row-2 {
        gap: 8px;
    }
    .ao-field {
        margin-bottom: 10px;
    }
    .ao-phone-field,
    .ao-search-dd .searchable-input,
    .ao-picker-input {
        min-height: 42px;
    }
}
@media (max-width: 480px) {
    #addOrderModal .modal-content,
    #editOrderModal .modal-content,
    #orderDetailsModal .modal-content {
        border-radius: 12px;
    }
    .ao-step {
        padding: 10px;
    }
    .ao-step-header {
        padding: 10px 10px 8px;
    }
}

/* كل أزرار البطاقة بزوايا دائرية متناسقة (pill) — عدا تبويبات المنتج/البكج. */
#addOrderModal button:not(.stat-tab),
#addOrderModal .qty-stepper,
#editOrderModal button:not(.stat-tab),
#editOrderModal .qty-stepper {
    border-radius: 999px;
}

/* صفّ حقلين متجاورين (الهواتف) — ينهار إلى عمود واحد على الشاشات الضيقة. */
.ao-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* إيقاع عمودي مطابق لـ .ao-field (12px): حقول الصفّ بهامش 0، فبدون هذا
       الهامش يلتصق الصفّ بما بعده (بقّة المسافة بين التصنيف/الحملة وربط
       بعميل في مودال الملاحظة). */
    margin-bottom: 12px;
}
.ao-row-2 .ao-field {
    margin-bottom: 0;
}
.ao-row-2:last-child {
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .ao-row-2 {
        grid-template-columns: 1fr;
    }
}

/* زرّ الإجراء الأساسي يأخذ ظل primary (توقيع Modernize للأفعال الرئيسية). */
.ao-cta-btn {
    box-shadow: var(--shadow-primary);
}
.ao-cta-btn:disabled {
    opacity: 0.7;
    cursor: progress;
}

/* ===== حقول التسمية الطافية (floating label) في بطاقات الإضافة =====
   نمط floating-label على كل .ao-field داخل أي وعاء يحمل صنف ‎.ao-float‎
   (مودالات: طلب/عميل/ملاحظة/منتج/تكلفة/حملة/مدينة). يعتمد على :focus-within
   و :has(input:not(:placeholder-shown)) فلا يحتاج JS؛ الأيقونات الزخرفية تُخفى
   لتكون التسمية هي المعرّف، وتحتفظ حقول الهاتف بمقدمة 970+. يتطلّب
   placeholder=" " على المدخلات. حقول textarea والحقول المحسوبة readonly تُستثنى
   فتبقى تسميتها ثابتة فوق الحقل أوضح. */
.ao-float .ao-field {
    position: relative;
}
.ao-float .ao-field:has(input:not([type='hidden']), select, textarea) .ao-field-label {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: start center;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0 4px;
    max-width: calc(100% - 24px);
    background: transparent;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    transition:
        top 0.16s ease,
        transform 0.16s ease,
        color 0.15s ease,
        background 0.15s ease;
    z-index: 2;
}
/* إخفاء الأيقونات الزخرفية (التسمية الطافية تكفي) */
.ao-float .ao-field-label .ao-field-ico,
.ao-float .ao-field-wrap .ao-field-ico,
.ao-float .ao-dd-ico {
    display: none;
}
/* المدينة: إلغاء حشو الأيقونة بعد إخفائها */
.ao-float .ao-dd-input {
    padding-inline-start: 14px !important;
}
/* حالة الطفو: تركيز، أو قيمة مدخلة (مع استبعاد hidden كحقل المدينة المخفي)،
   أو اختيار خيار فعلي غير فارغ في القائمة.
   ملاحظة: حقول الهاتف (.ao-phone-sel) مستثناة من شرط الـ select — مقدمة
   الهاتف لها قيمة دائمة (962) فكانت تُبقي التسمية مرتفعة دائماً بدل أن
   تخضع لتركيز/كتابة الـ input. الآن تطير التسمية بالـ input وحده تماماً
   كحقل اسم العميل. */
.ao-float .ao-field:has(input:not([type='hidden']), select, textarea):focus-within .ao-field-label,
.ao-float .ao-field:has(input:not([type='hidden']):not(:placeholder-shown)) .ao-field-label,
.ao-float .ao-field:has(.is-filled) .ao-field-label,
.ao-float .ao-field:not(:has(.ao-phone-sel)):has(select option:checked:not([value=''])) .ao-field-label {
    top: 0;
    transform: translateY(-50%) scale(0.82);
    background: var(--surface-solid);
    color: var(--primary);
}
/* القوائم المنسدلة تعرض نصّها دائماً (مثل «بلا خصم» في حقل نوع الخصم)، فلو بقيت
   التسمية وسط الحقل عند اختيار الخيار الفارغ تداخلت معه الحروف. تطير التسمية
   فوق القائمة دوماً كأنّها مملوءة — باستثناء حقول الهاتف لتسميتها مرتبطة
   بحقل الرقم لا بالمقدّمة. */
.ao-float .ao-field:has(select):not(:has(.ao-phone-sel)) .ao-field-label {
    top: 0;
    transform: translateY(-50%) scale(0.82);
    background: var(--surface-solid);
    color: var(--primary);
}
.ao-float .ao-field:has(input:not([type='hidden']):not(:placeholder-shown)):not(:focus-within) .ao-field-label,
.ao-float .ao-field:has(.is-filled):not(:focus-within) .ao-field-label {
    color: var(--text-secondary);
}
/* استثناء: textarea والحقول المحسوبة (readonly) — تسمية ثابتة فوق الحقل.
   التوسيط العمودي للطافي لا يصلح لحقول متعدّدة الأسطر، والحقول المحسوبة تعرض
   قيمة ثابتة دائماً فالتسمية فوقها أوضح. تُعاد هنا لوضعها الافتراضي بترتيب
   لاحق + شمول حالة :focus-within كي تهيمن على قاعدة الطفو. */
.ao-float .ao-field:has(textarea) .ao-field-label,
.ao-float .ao-field:has(input[readonly]) .ao-field-label,
.ao-float .ao-field:has(textarea):focus-within .ao-field-label,
.ao-float .ao-field:has(input[readonly]):focus-within .ao-field-label {
    position: static;
    inset-inline-start: auto;
    top: auto;
    transform: none;
    max-width: none;
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    color: var(--text-title);
    font-size: 12px;
    font-weight: 700;
}

/* استثناء إضافي: الراديو والملفات — مدخلات لا تقبل placeholder ولا قيمة نصّية
   قابلة للكتابة، فشرط الطفو ‎:not(:placeholder-shown)‎ يظل محقّقاً دائماً ويرفع
   التسمية فوق عنصر ليس حقل كتابة (بطاقات نوع المنتج/زر اختيار الملف). تبقى
   التسمية ثابتة فوقها كحالة textarea/readonly. */
.ao-float .ao-field:has(input[type='radio']) .ao-field-label,
.ao-float .ao-field:has(input[type='file']) .ao-field-label,
.ao-float .ao-field:has(input[type='radio']):focus-within .ao-field-label,
.ao-float .ao-field:has(input[type='file']):focus-within .ao-field-label {
    position: static;
    inset-inline-start: auto;
    top: auto;
    transform: none;
    max-width: none;
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    color: var(--text-title);
    font-size: 12px;
    font-weight: 700;
}