/* ============================================================================
   Orders list — «Bold Colorful» cards (design-3)
   نظام بطاقات مختصرة كثيفة: شريط حالة ملوّن على الحافة + chip حالة + صندوق تتبّع
   + قائمة منتجات مصغّرة + تذييل إجمالي وزر إرسال. مبنية على توكنز Meadows
   (ظلال بنفسجية ناعمة، حدود لافندر، ألوان الحالة من --*-text/--*-bg) فتتكيّف
   تلقائياً مع الوضع الليلي والثيم القابل للتخصيص لكل متجر.
   البادئة .oc-* معزولة عن .order-card (المستخدم في صفحة التقارير).
   ============================================================================ */

/* ===== الشبكة: أكثر كثافة من orders-grid لعرض عدة بطاقات ===== */
.oc-grid {
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 14px;
}

/* ===== البطاقة ===== */
/* البطاقة خلفية بيضاء صلبة مسطّحة وظلّ ثابت مطابق لبطاقة «نشاط الطلبات»، بلا حركة
   رفع/تحوّل عند المرور — مع «طيف» (هالة) ملوّن ناعم حول البطاقة عند الـ hover. */
.oc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-solid);
    border: none;
    /* زاوية ناعمة (design-21 «زاوية ناعمة»): ركن واحد كبير غير متوقّع يجعل البطاقة
       ودودة ومميّزة، وبقيّة الأركان متوسطة. الزاوية الكبرى على جهة inline-end العلوية
       (في RTL = أعلى اليسار) حيث رقاقة الحالة، فتؤطّرها بانسيابية. حشو البطاقة (16px)
       يبقي المحتوى داخل القرص البصري فلا يُقصّ. تتقلّص القيمتان على الجوال عبر
       المتغيّرين أدناه كي لا تُقصّ المحتويات عند ضآلة الحشو. */
    --oc-r-big: 40px;
    --oc-r: 16px;
    border-start-end-radius: var(--oc-r-big);
    border-start-start-radius: var(--oc-r);
    border-end-start-radius: var(--oc-r);
    border-end-end-radius: var(--oc-r);
    padding: 16px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow 0.22s ease;
}
/* bolder: الرفع عند المرور يرتدي لون حالة الطلب (إزاحة + ضبابية حقيقية، لا هالة
   صفرية الإزاحة) فيرى المُشغّل أي بطاقة يلامسها ولأي حالة تنتمي. */
.oc-card:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 0 1px color-mix(in srgb, var(--oc-band, var(--primary)) 32%, transparent),
        0 18px 40px -14px color-mix(in srgb, var(--oc-band, var(--primary)) 48%, transparent);
}

/* ألوان الحالة: النقطة/الهالة من --oc-band (نص الحالة)، وخلفية الرقاقة من
   --oc-band-bg وحبرها من --oc-band-ink — كي يظهر أثر منتقَي «خلفية/نص (الحالة)»
   في محرّر الثيم حرفياً على البطاقة */
.oc-card[data-st='new'] {
    --oc-band: var(--new-text);
    --oc-band-bg: var(--new-bg);
    --oc-band-ink: var(--new-text);
}
.oc-card[data-st='ready'] {
    --oc-band: var(--ready-text);
    --oc-band-bg: var(--ready-bg);
    --oc-band-ink: var(--ready-text);
}
.oc-card[data-st='delivering'] {
    --oc-band: var(--delivering-text);
    --oc-band-bg: var(--delivering-bg);
    --oc-band-ink: var(--delivering-text);
}
.oc-card[data-st='completed'] {
    --oc-band: var(--completed-text);
    --oc-band-bg: var(--completed-bg);
    --oc-band-ink: var(--completed-text);
}
.oc-card[data-st='collected'] {
    --oc-band: var(--collected-text);
    --oc-band-bg: var(--collected-bg);
    --oc-band-ink: var(--collected-text);
}
.oc-card[data-st='pending'] {
    --oc-band: var(--pending-text);
    --oc-band-bg: var(--pending-bg);
    --oc-band-ink: var(--pending-text);
}
.oc-card[data-st='review'] {
    --oc-band: var(--review-text);
    --oc-band-bg: var(--review-bg);
    --oc-band-ink: var(--review-text);
}
.oc-card[data-st='cancelled'] {
    --oc-band: var(--cancelled-text);
    --oc-band-bg: var(--cancelled-bg);
    --oc-band-ink: var(--cancelled-text);
}

.clickable-oc-card {
    cursor: pointer;
    user-select: none;
}
/* بلا رفع/تحوّل عند المرور — رفعة بحالة الطلب كما في .oc-card:hover. */
.clickable-oc-card:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 0 1px color-mix(in srgb, var(--oc-band, var(--primary)) 32%, transparent),
        0 18px 40px -14px color-mix(in srgb, var(--oc-band, var(--primary)) 48%, transparent);
    transform: none;
}
.clickable-oc-card:active {
    transform: none;
}

/* ===== الرأس: معرّف + تاريخ + chip الحالة ===== */
.oc-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-inline-start: 10px;
}
.oc-id {
    font-family: var(--app-mono-family);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-title);
    letter-spacing: -0.01em;
}
.oc-id-meta {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}
/* bolder + متين: الحالة هي الإشارة التشغيلية الأولى. الرقاقة تُكرم منتقي الثيم
    حرفياً: خلفيتها من --oc-band-bg (نظير «خلفية (الحالة)») ونصّها من --oc-band-ink
    (نظير «نص (الحالة)») + نقطة صلبة بلون الحالة (--oc-band). حين لا تُضبط هذه
    الرموز (رقاقة بلا حالة) نرجع لصبغة الأساسي 24% مع نص داكن. يتكيّف تلقائياً
    مع الوضع الليلي لأن dark.css يعيد تعريف رموز الحالة نفسها. */
.oc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    color: var(--oc-band-ink, var(--text-title));
    background: var(--oc-band-bg, color-mix(in srgb, var(--oc-band, var(--primary)) 24%, var(--surface-solid)));
    /* بلا letter-spacing: العربية خطّ متّصل وأي تباعد بين الحروف يكسر اتصالها
       فتبدو الكلمة «مخربشة» (حروف متفرّقة). */
    white-space: nowrap;
}
.oc-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--oc-band, var(--primary));
}

/* تصغير رقاقة الحالة داخل رأس البطاقة فقط (دون خلايا الجدول) لتقليل حيّزها
   البصري وإفساح مساحة لمعرّف الطلب والتاريخ في صف الترويسة. */
.oc-top .oc-chip {
    padding: 4px 9px;
    font-size: 11px;
    gap: 5px;
}
.oc-top .oc-chip::before {
    width: 5px;
    height: 5px;
}

/* modifiers لون الحالة: تُستخدم في سياقات بلا نطاق --oc-band (مثل الجدول).
   تضبط الرموز الثلاثة: النقطة (--oc-band) وخلفية الرقاقة (--oc-band-bg)
   وحبرها (--oc-band-ink) — كلٌّ من نظيره في محرّر الثيم، فترثّ الرقاقة منطق
   البطاقة بتناسق تام ويظهر تغيير المنتقي فوراً هنا أيضاً. */
.oc-chip.s-new {
    --oc-band: var(--new-text);
    --oc-band-bg: var(--new-bg);
    --oc-band-ink: var(--new-text);
}
.oc-chip.s-ready {
    --oc-band: var(--ready-text);
    --oc-band-bg: var(--ready-bg);
    --oc-band-ink: var(--ready-text);
}
.oc-chip.s-delivering {
    --oc-band: var(--delivering-text);
    --oc-band-bg: var(--delivering-bg);
    --oc-band-ink: var(--delivering-text);
}
.oc-chip.s-completed {
    --oc-band: var(--completed-text);
    --oc-band-bg: var(--completed-bg);
    --oc-band-ink: var(--completed-text);
}
.oc-chip.s-collected {
    --oc-band: var(--collected-text);
    --oc-band-bg: var(--collected-bg);
    --oc-band-ink: var(--collected-text);
}
.oc-chip.s-pending {
    --oc-band: var(--pending-text);
    --oc-band-bg: var(--pending-bg);
    --oc-band-ink: var(--pending-text);
}
.oc-chip.s-review {
    --oc-band: var(--review-text);
    --oc-band-bg: var(--review-bg);
    --oc-band-ink: var(--review-text);
}
.oc-chip.s-cancelled {
    --oc-band: var(--cancelled-text);
    --oc-band-bg: var(--cancelled-bg);
    --oc-band-ink: var(--cancelled-text);
}

/* ===== سطر الاسم + المدينة ===== */
.oc-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    /* 10px كي يتّحد إيقاع الفواصل بين المجموعات (top/rows/track كلها 10px). */
    margin-bottom: 10px;
    padding-inline-start: 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-title);
    letter-spacing: -0.01em;
}

/* ===== صفوف المعلومات ===== */
.oc-rows {
    display: flex;
    flex-direction: column;
    /* 6px بدل 3px: صفوف المعلومات (هاتف/مصدر/تاريخ) هي جوهر القراءة التشغيلية،
       و3px كانت تُدمجها بصرياً. 6px خطوة مقصودة على سلم الإيقاع تميّز المجموعة
       عن بعضها دون أن تنفصل. */
    gap: 6px;
    margin-bottom: 10px;
    padding-inline-start: 10px;
}
.oc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-main);
    min-width: 0;
}
.oc-row .ico {
    width: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.oc-row .value {
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-row .value.phone {
    direction: ltr;
    text-align: right;
    letter-spacing: 0.01em;
    font-weight: 600;
}
.oc-row .value.secondary {
    color: var(--text-secondary);
}
.oc-row .cur {
    color: var(--text-muted);
    font-size: 10px;
    margin-inline-start: 1px;
}
.oc-sep {
    color: var(--text-muted);
    margin: 0 1px;
    font-size: 10px;
}

/* ===== صندوق التتبّع — صف بمحاذاة صفوف المعلومات: أيقونة + نص + زر نسخ ===== */
.oc-track {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    /* نفس مزاحجة .oc-rows كي تبدأ أيقونة التتبّع على حدّ باقي الأيقونات */
    padding-inline-start: 10px;
}
.oc-track .ico {
    width: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.oc-track-text {
    flex: 1;
    min-width: 0;
    font-family: var(--app-mono-family);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-title);
    letter-spacing: 0.02em;
    direction: ltr;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-solid);
    border: 1px solid var(--border-light);
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}
.oc-copy:hover {
    color: var(--text-title);
    border-color: var(--border-main);
}
.oc-copy.is-copied {
    color: var(--collected-text);
    background: var(--collected-bg);
    border-color: transparent;
}

/* ===== المنتجات ===== */
.oc-prod-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 6px;
    padding-inline-start: 10px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.oc-prod-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.oc-prod {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0 7px 10px;
    border-bottom: 1px solid var(--border-light);
}
.oc-prod:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}
/* آخر منتج يليه التذييل مباشرة (لا صندوق ملاحظات بينهما) ⇐ الخط الفاصل
   يفقد وظيفته فيُخفى، كي لا يبقى خطّ يتّيم أسفل المنتجات في الطلبات بلا ملاحظات. */
.oc-prod:has(+ .oc-foot) {
    border-bottom: none;
    padding-bottom: 2px;
}

.oc-prod-thumb {
    width: 30px;
    height: 30px;
    /* 14px (design-21): مربّع مدوّر ناعم يكافئ معالجة الأفاتار في «زاوية ناعمة»،
       فيتناغم مع لغة الأركان الناعمة للبطاقة بدل الزاوية الحادّة 8px. */
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
}
/* مصغّرات بلا صورة: تدرّجات Meadows ممتعة */
.oc-prod-thumb.g1 {
    background: linear-gradient(135deg, var(--primary), var(--primary-soft));
}
.oc-prod-thumb.g2 {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--primary)));
}
.oc-prod-thumb.g3 {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-hover));
}
.oc-prod-thumb.g4 {
    background: linear-gradient(135deg, var(--success), color-mix(in srgb, var(--success) 55%, var(--accent)));
}
.oc-prod-thumb.g5 {
    background: linear-gradient(135deg, var(--pending-text), var(--primary));
}
.oc-prod-thumb.g6 {
    background: linear-gradient(135deg, var(--danger), var(--secondary));
}

/* غلاف المصغّرة + شارة خصم الصنف: علامة برتقالية صغيرة على زاوية صورة المنتج
   في بطاقة القائمة — إشارة سريعة فقط (النسبة)، والتفصيل الكامل (الأصلي مشطوباً
   + المُطبَّق) داخل مودال تفاصيل الطلب. */
.oc-prod-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
}
.oc-prod-disc {
    position: absolute;
    top: -6px;
    inset-inline-end: -8px;
    min-width: 22px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--warning);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
    direction: ltr; /* «‎−20%» تُقرأ رقماً في الاتجاهين */
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.oc-prod-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-prod-qty {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-inline-start: 6px;
}
.oc-prod-price {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.oc-prod-price .cur {
    font-size: 10px;
    color: var(--text-muted);
    margin-inline-start: 1px;
}

/* حاوية الملاحظات أسفل المنتجات: ترفع عن قائمة المنتجات مسافة موحّدة وتلصق
   بالتذييل كي تُقرأ آخر عنصر قبل الإجمالي. */
.oc-notes-after-prod {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* سفلية 10px: فاصل واضح بين بطاقة الملاحظة وخطّ التذييل تحتها. */
    margin: 10px 0 10px;
    padding-inline-start: 10px;
}
/* ملاحظة البطاقة — «التصميم ١٣» من docs/design/order-note-explorations.html:
   قابلة للطي (<details>) — السطر الأول مقصوصاً في الملخّص + مؤشّر سهم يدور عند
   الفتح، والتوسيع يكشف النصّ كاملاً داخل البطاقة نفسها (بلا مودال). */
.oc-note13 {
    background: var(--surface-hover);
    border: 1px solid var(--border-light);
    /* زوايا دائرية أوضح من بقية عناصر البطاقة (8px) — هوية الملاحظة القابلة للطي. */
    border-radius: 14px;
    overflow: hidden;
}
/* إخفاء المثلث الافتراضي للمتصفّح — مؤشّرنا الخاص (caret) يعوّضه. */
.oc-note13-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    cursor: pointer;
    user-select: none;
}
.oc-note13-summary::-webkit-details-marker {
    display: none;
}
.oc-note13-summary .ico {
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
}
.oc-note13-line {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}
/* مؤشّر الفتح: سهم رأسه لأسفل يدور 180° عند التوسيع — انتقال هادئ لا يصرخ. */
.oc-note13-caret {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-inline-start: 4px solid transparent;
    border-inline-end: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    transition: transform 0.2s ease;
}
.oc-note13[open] .oc-note13-caret {
    transform: rotate(180deg);
}
.oc-note13[open] .oc-note13-summary {
    border-bottom: 1px solid var(--border-light);
}
.oc-note13-detail {
    padding: 9px 10px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-main);
    /* درجة أفتح من خلفية الملخّص (عنوان الملاحظة) بمزجها مع لون البطاقة —
       تفرّق بصرياً بين العنوان والمكشوف في الثيمين الفاتح والداكن معاً. */
    background: color-mix(in srgb, var(--surface-hover) 60%, var(--card-bg));
    white-space: normal;
}
/* ملاحظات العميل: هدوء درجة أولى كي تبقى ملاحظة الطلب هي الأبرز. */
.oc-note13--customer .oc-note13-summary .ico {
    color: var(--text-muted);
}
.oc-note13--customer .oc-note13-line,
.oc-note13--customer .oc-note13-detail {
    color: var(--text-secondary);
}

/* ===== التذييل: الإجمالي + زر الإرسال ===== */
/* margin-top:auto يدفع التذييل للأسفل في البطاقات القصيرة، فيتسع الفراغ بين
   المنتجات والتذييل، ويحاذي التذييل الأسفل في كل بطاقات الصف (مع تمدّد الشبكة).
    padding-top يضمن مسافة دنيا حين تكون البطاقة ممتلئة (auto حينها = 0). */
.oc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-main);
}
/* تجميع أزرار الإجراءات (تعديل/حذف) وزر الإرسال معاً في نهاية التذييل،
   في مقابل كتلة الإجمالي في بدايته. يلتفّان معاً عند ضيق المساحة. */
.oc-foot-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* أزرار الإجراءات الأيقونية داخل البطاقة (تعديل + حذف) — مرآة .nc-act.
   التنسيق العام للزرّ في .card-act (components.css)؛ هذا فقط الحاوية. */
.oc-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.oc-total-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* سطر التسمية + وسم الخصم معاً — يبقى البنية سطرين باختصم الطلب أو بدونه،
   فلا يرتفع تذييل البطاقة المُخفَّضة عن نظيرتها فيختل ارتفاع الصفّ. */
.oc-total-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* السعر القديم المشطوب + القيمة الكبيرة على السطر نفسه (الأساس baseline يوازن
   حجمَي الخطّ). عند الضيق على الجوال تلتفّ القيمة وحدها لأنها nowrap. */
.oc-total-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.oc-total-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.oc-discount-old {
    font-size: 11.5px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.oc-discount-tag {
    font-size: 10.5px;
    color: var(--danger);
    font-weight: 700;
}
.oc-total-val {
    font-family: var(--app-font-family);
    font-size: 24px;
    font-weight: 800;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}
.oc-total-val .cur {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-inline-start: 2px;
}

/* زر الإرسال داخل التذييل: مدمج وهادئ كزر واتساب في قائمة العملاء — رقاقة
   أخضر ناعم (خلفية شفّافة + أيقونة خضراء) بدل الزر الأخضر الصاخب الممتلئ بعرض
   البطاقة. لا يملأ العرض بل يقف مدمجاً بجانب الإجمالي، فالإجمالي هو المرساة
   البصرية والإرسال فعل هادئ. !important يلغي الأنماط المضمّنة من
   whatsappSplitButton (خلفية/لون أخضر ممتلئ). */
.oc-send {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}
/* === زر واتساب موحَّد (أيقونة فقط) في الطلبات — جدول وبطاقة ===
   صار الزرّ أييقونياً صرفاً (بلا «إرسال»/«واتساب»)، مربّعاً مدمجاً موحَّداً
   بين عرض القائمة (.ot-main) وعرض البطاقة (.oc-send) ليحتلّ مساحة أقلّ وتبقى
   هويّته الأخضر الهادئة (خلفية شفّافة + أيقونة خضراء) مع امتلاء أخضر عند
   المرور. !important يلغي الأنماط المضمّنة من whatsappSplitButton. */
.oc-send .wa-action-btn,
#ordersPage .ot-main .wa-action-btn {
    height: 30px;
    min-width: 30px;
    width: auto;
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wa-primary, #25d366) 12%, var(--surface-main)) !important;
    color: var(--wa-primary, #25d366) !important;
    border: 1px solid color-mix(in srgb, var(--wa-primary, #25d366) 24%, var(--border-main)) !important;
    box-shadow: none !important;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}
.oc-send .wa-action-btn:hover,
#ordersPage .ot-main .wa-action-btn:hover {
    background: var(--wa-primary, #25d366) !important;
    color: #fff !important;
    border-color: var(--wa-primary, #25d366) !important;
    transform: none;
}
/* الزرّ المفرد (مقدّمة واحدة) في النمط الأيقونيّ: حشوة أفقية تكفي لمربّع
   متناظر حول الأيقونة (14 + 2×8 = 30px). */
.oc-send .wa-action-btn.wa-icon-only,
#ordersPage .ot-main .wa-action-btn.wa-icon-only {
    padding: 0 8px;
}
/* الزرّ المركّب (تعدّد المقدمات): الأبناء يملؤون الارتفاع كاملاً ضمن الوعاء
   ذي overflow:hidden كي لا تقع نقرة في فراغ لا يفعل شيئاً. */
.oc-send .wa-action-btn > button,
#ordersPage .ot-main .wa-action-btn > button {
    height: 100%;
}
.oc-send .wa-action-btn svg,
#ordersPage .ot-main .wa-action-btn svg {
    width: 14px;
    height: 14px;
}

/* === كثافة بطاقة الطلب على الجوال (≤768px) ===
   .oc-card padding 16px يبدو معقولاً على الديسكتوب لكنّه مع قائمة المنتجات
   (متعدّدة) يكدّس بسرعة على شاشة 5". التقليص:
   - padding 16 → 12 (يخفّف ثقل البطاقة)
   - gap الشبكة 14 → 10
   - oc-name font 13.5 → 12.5
   - oc-meta (العميل/المدينة) font 12 → 11
   - oc-foot margin-top يبقى — المنتجات في المنتصف توفّر فجوة كافية
   - .orders-toolbar margin-bottom 18 → 12 + gap 12 → 8
   - .stats-tabs gap 6 → 5
   الأبعاد اللونية (الـchip border-radius 999px، ظلال 18px) ثابتّة
   لأنّها توقيع البطاقة. */
@media (max-width: 768px) {
    .oc-grid {
        gap: 10px;
    }
    .oc-card {
        padding: 12px;
        --oc-r-big: 30px;
        --oc-r: 14px;
    }
    .oc-name {
        font-size: 12.5px;
    }
    .oc-meta {
        font-size: 11px;
    }
    /* الإجمالي وزرّ الإرسال على سطرٍ واحد بدل تكديسهما عمودياً: منع الالتفاف
       كي لا يسقط الزر تحت الإجمالي، مع السماح لكتلة الإجمالي بالانضغاط (لا
       القيمة) لتفسح مكاناً للزر. الزر نفسه يبقى هدفاً لمسياً صالحاً (ارتفاعه
       محروساً بطبقة pointer:coarse في components.css) فلا نُصغّره تحت العتبة. */
    .oc-foot {
        flex-wrap: nowrap;
        gap: 10px;
        margin-top: 10px;
        padding-top: 10px;
    }
    .oc-total-block {
        min-width: 0;
        flex: 1 1 auto;
    }
    .oc-total-val {
        white-space: nowrap;
    }
    .oc-send {
        flex: 0 0 auto;
    }
    /* زرّ واتساب الأيقونيّ الموحَّد على الجوال: مربّع مدمج (بطاقةً وجدولاً)
       أصغر قليلاً من هدف اللمس الافتراضي (44px) ليوازن البطاقة ويفسح مكاناً
       للإجمالي، مع البقاء فوق عتبة WCAG 2.5.8 AA (24px). يطغى على
       min-height:44px في components.css (نفس الأخصّية وorders-cards محمَّل
       بعدها)؛ الأبناء يملؤون الارتفاع عبر height:100% الموجودة أصلاً. */
    .oc-send .wa-action-btn,
    #ordersPage .ot-main .wa-action-btn {
        min-height: 36px;
        height: 36px;
    }
    .oc-id {
        font-size: 13px;
    }
    #ordersPage .orders-toolbar {
        margin-bottom: 12px;
        gap: 8px;
    }
    #ordersPage .stats-tabs {
        gap: 5px;
    }
    #ordersPage .stat-tab {
        padding: 6px 11px;
        font-size: 10.5px;
    }
}
@media (max-width: 420px) {
    .oc-card {
        padding: 10px;
        --oc-r-big: 24px;
        --oc-r: 12px;
    }
}

/* ============================================================================
   عرض القائمة (الجدول) — ستايل design-3 كامل: شريط حالة بارز + رأس مكتوب
   بأحرف متباعدة + فواصل رفيعة + أرقام mono + hover لافندر ناعم.
   محصور بـ #ordersPage. نستخدم border على أول خلية (موثوق مع border-collapse)
   بدل box-shadow على الصف الذي لا يظهر موثوقاً في الجداول المتداخلة الحدود.
   ============================================================================ */
#ordersPage .orders-list {
    border-radius: var(--pane-radius);
    box-shadow: var(--shadow-sm);
    /* تمرير أفقي على كل الأحجام: متى ضاقت الحاوية عن عرض الجدول (min-width
       أدناه) يظهر شريط تمرير جانبي بدل قصّ الأعمدة. كان overflow:hidden يُعطّل
       التمرير خارج نطاق الجوال. overflow-y:hidden يحافظ على قصّ الزوايا الدائرية
       عمودياً (خلفية thead/آخر صف). */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* سطح صلب (--surface-solid) مطابق للبطاقات ولـ layout.css: لا يتبع
       شفافية البطاقات فيظهر الجدول «فاتحاً» عند وجود صورة خلفية. */
    background: var(--surface-solid);
}
/* table-layout:fixed + width:100% يملأ الجدول عرض الحاوية (متناسقاً مع باقي عناصر
   الصفحة كشريط الأدوات) فلا يبقى فراغ بعد آخر عمود؛ الأعمدة تتوزّع متناسبة على
   نسب colgroup. min-width يمنع انضغاط الأعمدة على الشاشات الضيقة ويُفعّل التمرير
   الأفقي بدل القصّ. كل الأعمدة بعرض أساسي ثابت (العميل 140px ويقصّ بالـ ellipsis). */
#ordersPage .orders-list table {
    table-layout: fixed;
    width: 100%;
    min-width: 600px;
}
#ordersPage .orders-list thead th {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    background: var(--table-header-bg);
    padding: var(--table-header-padding);
    border-bottom: 1px solid var(--table-header-border);
}
#ordersPage .orders-list tbody td {
    padding: var(--table-cell-padding);
    font-size: 13.5px;
    border-bottom: 1px solid var(--table-row-border);
    color: var(--table-row-text, var(--text-main));
    vertical-align: middle;
}
#ordersPage .orders-list tbody tr {
    border-bottom: none;
}
/* صفوف متناوبة (zebra) لتأكيد البنية + تظليل خفيف عند التحويم */
#ordersPage .orders-list tbody tr:nth-child(even) {
    background: var(--table-row-alt-bg, transparent);
}
#ordersPage .orders-list tbody tr:hover {
    background: var(--table-row-hover-bg);
}
#ordersPage .orders-list .order-id-cell {
    /* نبقي الخلية table-cell عادية (لا display:flex) حتى يصطف border-bottom
       مع باقي الأعمدة ويحترم ارتفاع الصف + vertical-align. الـ flex يُنقل إلى
       .oc-id-wrap الداخلي لمحاذاة الشريط والرقم. */
    white-space: nowrap;
    vertical-align: middle;
    font-family: var(--app-mono-family);
    font-weight: 700;
    color: var(--text-title);
    padding-inline-start: 16px;
}
#ordersPage .orders-list .oc-id-wrap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
#ordersPage .orders-list .price-cell {
    font-weight: 700;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* اسم العميل: مع table-layout:fixed قد يفيض النص الطويل، فنقصّه بـ ellipsis. */
#ordersPage .orders-list .customer-name-cell {
    max-width: 0; /* حيلة ليعمل ellipsis داخل خلية fixed مع flex/table */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === عمود العميل مع الأفاتار (ترجمة AvatarFallback من مكوّن ProjectDataTable) ===
    الخلية تبقى table-cell (لتحافظ على محاذاة الرأسية وborder-bottom)، بينما
    يتحوّل المحتوى الداخلي إلى flex: دائرة أحرف + اسم قابل للقصّ + نقطة ملاحظات. */
#ordersPage .orders-list .customer-name-cell .ot-cust {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    max-width: 100%;
}
#ordersPage .orders-list .customer-name-cell .ot-cust-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
#ordersPage .orders-list .ot-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    text-transform: uppercase;
    /* حلقة رفيعة بلون السطح (مرآة border-2 border-background في مكوّن React) */
    box-shadow: 0 0 0 2px var(--surface-solid, #fff);
    line-height: 1;
}
#ordersPage .orders-list .ot-note-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning-color, var(--delivering-text, #d97706));
    flex-shrink: 0;
}
/* أعمدة إضافية اختيارية (المنتجات / المصدر) */
#ordersPage .orders-list .ot-items-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #888);
    white-space: nowrap;
}
#ordersPage .orders-list .ot-source {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--table-row-alt-bg, rgba(0, 0, 0, 0.04));
    color: var(--text-secondary, #888);
    white-space: nowrap;
}

/* === قائمة «الأعمدة»: عناصر checkbox (مرآة DropdownMenuCheckboxItem) ===
   الصندوق نفسه تشاركه قائمتا «كثافة العرض» و«إعدادات الجدول» (ot-density-menu
   · ot-table-settings-menu) كي تتطابق كل قوائم الجدول شكلاً */
.ot-col-menu .ot-col-item,
.ot-density-menu .ot-view-item[data-density],
.ot-table-settings-menu .ot-view-item[data-density] {
    gap: 9px;
}
.ot-col-menu .ot-col-box,
.ot-density-menu .ot-view-item[data-density] .ot-col-box,
.ot-table-settings-menu .ot-view-item[data-density] .ot-col-box {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1.5px solid var(--border-main, #d4d4d4);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-solid, #fff);
    color: #fff;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}
.ot-col-menu .ot-col-item.active .ot-col-box,
.ot-density-menu .ot-view-item[data-density].active .ot-col-box,
.ot-table-settings-menu .ot-view-item[data-density].active .ot-col-box {
    background: var(--primary, #6b5dd3);
    border-color: var(--primary, #6b5dd3);
}
.ot-col-menu .ot-col-box svg,
.ot-density-menu .ot-view-item[data-density] .ot-col-box svg,
.ot-table-settings-menu .ot-view-item[data-density] .ot-col-box svg {
    width: 12px;
    height: 12px;
}
.ot-col-menu .ot-col-label,
.ot-density-menu .ot-view-item[data-density] .ot-col-label,
.ot-table-settings-menu .ot-view-item[data-density] .ot-col-label {
    flex: 1 1 auto;
}
/* البنود غير النشطة: صندوق فارغ بلا علامة (العلامة تُدرج دائماً في الوسم) */
.ot-density-menu .ot-view-item[data-density]:not(.active) .ot-col-box svg,
.ot-table-settings-menu .ot-view-item[data-density]:not(.active) .ot-col-box svg {
    display: none;
}

/* علامة الحالة المدمجة بجوار رقم الطلب (توقيع design-3 لعرض القائمة): شريط رأسي
   قصير 4×18px داخل الخلية، لا شريطاً ممتداً بارتفاع الصف بالكامل. تُلوَّن حسب الحالة. */
.oc-band {
    display: inline-block;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--primary);
}
.oc-band.s-new {
    background: var(--new-text);
}
.oc-band.s-ready {
    background: var(--ready-text);
}
.oc-band.s-delivering {
    background: var(--delivering-text);
}
.oc-band.s-completed {
    background: var(--completed-text);
}
.oc-band.s-collected {
    background: var(--collected-text);
}
.oc-band.s-pending {
    background: var(--pending-text);
}
.oc-band.s-review {
    background: var(--review-text);
}
.oc-band.s-cancelled {
    background: var(--cancelled-text);
}

/* خلية الحالة: chip أنيق مثل البطاقة (لا dropdown)، دون إزاحة auto-margin */
#ordersPage .orders-list .status-cell {
    min-width: 92px;
    white-space: nowrap;
}
#ordersPage .orders-list .status-cell .oc-chip {
    margin-inline-start: 0;
}
/* في الجدول نطابق رقاقة رأس البطاقة حرفياً — بلا أي حدود أو حلقة داخلية —
   فالألوان كلها تأتي من .s-* التي تضبط --oc-band/--oc-band-bg/--oc-band-ink
   من رموز الثيم («خلفية/نص الحالة») مباشرة.
   الحجم مطابق لرقاقة رأس البطاقة (.oc-top .oc-chip): 4px 9px / 11px ونقطة 5px. */
#ordersPage .orders-list .status-cell .oc-chip {
    font-weight: 700;
    font-size: 11px;
    gap: 5px;
    padding: 4px 9px;
}
#ordersPage .orders-list .status-cell .oc-chip::before {
    width: 5px;
    height: 5px;
}

/* عرض الأعمدة متناسق على كل الأحجام: table-layout:fixed + width:auto على كل
   المقاسات (انظر القاعدة الأساسية)، فأعراض الأعمدة مطابقة على الديسكتوب/الآيباد/
   الجوال. لا حاجة لأي تجاوز هنا؛ الحاوية تمرّر أفقياً عند الضيق. */

/* ============================================================================
   عرض القائمة — صفوف قابلة للتوسيع (design-5 من order-ui-showcase.html)
   كثافة قصوى افتراضياً، وصف تفاصيل مدمج يُكشف/يُخفى بزر دائري (بدل المودال
   للاطّلاع السريع). محصور بـ #ordersPage وتحت .ot-expandable.
   ============================================================================ */
#ordersPage .orders-list.ot-expandable .ot-toggle-th {
    width: 48px;
    padding: 0;
}
#ordersPage .orders-list.ot-expandable .ot-toggle-cell {
    width: 48px;
    padding-inline-start: 14px;
    padding-inline-end: 4px;
    text-align: center;
    vertical-align: middle;
}
#ordersPage .orders-list.ot-expandable .ot-toggle {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}
#ordersPage .orders-list.ot-expandable .ot-toggle:hover,
#ordersPage .orders-list.ot-expandable .ot-toggle:focus-visible {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
    outline: none;
}
#ordersPage .orders-list.ot-expandable .ot-toggle svg {
    transition: transform 0.2s ease;
}
/* السهم يدور للأسفل عند الفتح (مؤشر توسيع عام لا يعتمد على اتجاه RTL) */
#ordersPage .orders-list.ot-expandable .ot-main.is-open .ot-toggle svg,
#ordersPage .orders-list.ot-expandable .ot-toggle.is-open svg {
    transform: rotate(90deg);
}
#ordersPage .orders-list.ot-expandable .ot-main.is-open .ot-toggle {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}

/* تثبيت بصري للصف المفتوح */
#ordersPage .orders-list.ot-expandable .ot-main.is-open {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-solid));
}
#ordersPage .orders-list.ot-expandable .ot-main.is-open:hover {
    background: color-mix(in srgb, var(--primary) 9%, var(--surface-solid));
}

/* صف التفاصيل: مطوي افتراضياً، يُكشف بإضافة .is-open */
#ordersPage .orders-list.ot-expandable .ot-detail {
    display: none;
}
#ordersPage .orders-list.ot-expandable .ot-detail.is-open {
    display: table-row;
}
#ordersPage .orders-list.ot-expandable .ot-detail > td {
    padding: 0 !important;
    border-bottom: 1px solid var(--table-row-border);
    background: var(--surface-alt, color-mix(in srgb, var(--primary) 3%, var(--surface-solid)));
}
#ordersPage .orders-list.ot-expandable .ot-detail-inner {
    padding: 16px 18px 18px;
    animation: otDetailIn 0.18s ease-out;
}
@keyframes otDetailIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    #ordersPage .orders-list.ot-expandable .ot-detail-inner {
        animation: none;
    }
    #ordersPage .orders-list.ot-expandable .ot-toggle svg {
        transition: none;
    }
}

/* شبكة التفاصيل: تسمية/قيمة، أعمدة مرنة تتكيّف مع العرض */
#ordersPage .orders-list.ot-expandable .ot-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px 22px;
    margin-bottom: 14px;
}
#ordersPage .orders-list.ot-expandable .ot-dt-item {
    min-width: 0;
}
#ordersPage .orders-list.ot-expandable .ot-dt-lbl {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
#ordersPage .orders-list.ot-expandable .ot-dt-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    line-height: 1.5;
}
#ordersPage .orders-list.ot-expandable .ot-dt-val > .ot-dt-sub {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 1px;
}
#ordersPage .orders-list.ot-expandable .ot-dt-link {
    color: var(--primary);
    text-decoration: none;
}
#ordersPage .orders-list.ot-expandable .ot-dt-link:hover {
    text-decoration: underline;
}
#ordersPage .orders-list.ot-expandable .ot-dt-mono {
    font-family: var(--app-mono-family);
    font-variant-numeric: tabular-nums;
}
#ordersPage .orders-list.ot-expandable .ot-dt-copy {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 6px;
    padding: 2px 7px;
    font: inherit;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-inline-start: 2px;
}
#ordersPage .orders-list.ot-expandable .ot-dt-copy:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid));
    color: var(--primary);
}
#ordersPage .orders-list.ot-expandable .ot-dt-item--note .ot-dt-val {
    font-weight: 500;
    color: var(--text-main);
}

/* المنتجات داخل التفاصيل */
#ordersPage .orders-list.ot-expandable .ot-detail-prod-head {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* الإجراءات داخل التفاصيل */
#ordersPage .orders-list.ot-expandable .ot-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--table-row-border);
}

/* === استجابة الأحجام (ديسكتوب/آيباد/جوال) === */
/* الجوال: نُبقي نفس أعمدة الديسكتوب (لا نخفي التاريخ) كي يبقى عرض الأعمدة متناسقاً
   عبر كل الأحجام؛ ضيق الشاشة يُعالَج بالتمرير الأفقي. نُكتفِ هنا بضبط لوحة التفاصيل
   الموسّعة (شبكة بعمود واحد + إجراءات متقاربة). */
@media (max-width: 540px) {
    /* شبكة بعمود واحد + إجراءات متوسّطة في صف التفاصيل */
    #ordersPage .orders-list.ot-expandable .ot-detail-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    #ordersPage .orders-list.ot-expandable .ot-detail-actions {
        gap: 6px;
    }
}
/* الأجهزة اللوحية: شبكة بعمودين عادةً (يحكمها auto-fill فوق) */
@media (max-width: 768px) {
    #ordersPage .orders-list.ot-expandable .ot-detail-inner {
        padding: 14px;
    }
}

/* ============================================================================
   شريط فلاتر الطلبات + مبدّل العرض — ستايل design-3 (شرائح + segmented control)
   محصور بـ #ordersPage كي لا يؤثّر على بقية الصفحات التي تستخدم .stat-tab.
   ============================================================================ */

#ordersPage .orders-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

/* شرائح الفلاتر (chips) بستايل design-3 */
#ordersPage .stats-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
#ordersPage .stat-tab {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    background: var(--surface-main);
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}
#ordersPage .stat-tab:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}
#ordersPage .stat-tab .stat-count {
    background: var(--surface-hover);
    color: var(--text-secondary);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
}
/* التفعيل موحّد بـ primary Meadows (أنظف من ألوان الحالة المتمايزة المبعثرة) */
#ordersPage .stat-tab.active {
    background: var(--primary) !important;
    color: var(--text-light) !important;
    border-color: transparent !important;
}
#ordersPage .stat-tab.active .stat-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* مبدّل العرض: segmented control بستايل design-3 */
#ordersPage .view-toggle-buttons {
    display: flex;
    background: var(--surface-main);
    border: 1px solid var(--border-main);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    margin-bottom: 0;
    box-shadow: var(--shadow-sm);
}
/* مبدّل العرض (.view-toggle-buttons) انتقل إلى components.css بنسخة موحّدة غير
   مقيّدة بـ #ordersPage. تبقّى هنا تأثير شريط الطلبات على الجوال فقط. */
@media (max-width: 640px) {
    /* على الجوال: المبدّل ينزل تحت الشرائح ويملأ العرض */
    #ordersPage .orders-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    #ordersPage .view-toggle-buttons {
        align-self: flex-start;
    }
}

/* ============================================================================
   قائمة تغيير الحالة المنبثقة (popover) — بالنقر على chip الحالة في البطاقة
   أو الجدول. تتيح التغيير مباشرة دون فتح تفاصيل الطلب.
   ============================================================================ */

/* زر chip قابل للنقر (button) — يأخذ مظهر .oc-chip نفسه بالضبط دون أي تغيير
   بصري. نزيل فقط تنسيق الزر الأصلي (appearance/border) ونرث الخط. لا `font:inherit`
   (كان يُرجع الحجم للموروث) بل نُبقي font-size/weight من .oc-chip (11px/700). */
.oc-chip-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}
.oc-chip-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* زر pill حالة الطلب في «الحركات الحديثة» — نفس سلوك تغيير الحالة المنبثق.
   يأخذ مظهر .ap-pill نفسه بالضبط دون تغيير بصري (نزيل فقط تنسيق الزر الأصلي). */
.ap-pill-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}
.ap-pill-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* الخلفية الشفافة لالتقاط النقر خارج القائمة وإغلاقها
   - مع الفتح: تطبّق تعتيم خفيف + ضبابية على محتوى الصفحة خلفها
   - حتى تظهر القائمة المنبثقة فوق سطح «زجاجي» ناعم */
.oc-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-popover);
    background: color-mix(in srgb, var(--surface-solid) 0%, transparent);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        background-color 0.18s ease,
        backdrop-filter 0.18s ease;
}
.oc-menu-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
    background: color-mix(in srgb, var(--surface-solid) 7.2%, transparent);
    backdrop-filter: blur(2.4px);
    -webkit-backdrop-filter: blur(2.4px);
}

/* القائمة المنبثقة — تأثير زجاجي: شفافية خفيفة جداً + ضبابية ناعمة على المحتوى خلفها */
.oc-status-menu {
    position: fixed;
    z-index: var(--z-popover-top);
    display: none;
    min-width: 196px;
    max-width: 86vw;
    background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-main) 70%, transparent);
    border-radius: var(--pane-radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    padding: 6px;
    opacity: 0;
    transform: scale(0.96);
    transform-origin: top center;
    transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        background-color 0.14s ease;
}
.oc-status-menu.is-open {
    opacity: 1;
    transform: scale(1);
}

.oc-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: start;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.oc-menu-item:hover:not(.is-current) {
    background: var(--nav-bg-active);
}
.oc-menu-item.is-current {
    color: var(--text-muted);
    cursor: default;
}
.oc-menu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.oc-menu-dot.s-new {
    background: var(--new-text);
}
.oc-menu-dot.s-ready {
    background: var(--ready-text);
}
.oc-menu-dot.s-delivering {
    background: var(--delivering-text);
}
.oc-menu-dot.s-completed {
    background: var(--completed-text);
}
.oc-menu-dot.s-collected {
    background: var(--collected-text);
}
.oc-menu-dot.s-pending {
    background: var(--pending-text);
}
.oc-menu-dot.s-review {
    background: var(--review-text);
}
.oc-menu-dot.s-cancelled {
    background: var(--cancelled-text);
}
.oc-menu-cur {
    margin-inline-start: auto;
    color: var(--primary);
    font-weight: 800;
}

/* ============================================================================
   شريط الأدوات الجديد (v2) — يحلّ محل .orders-toolbar / .stats-tabs /
   .view-toggle-buttons القديمين. البادئة .ot-* معزولة عن باقي الصفحة.
   يعتمد على توكنز Meadows + يدعم الوضع الداكن تلقائياً عبر [data-theme].
   ============================================================================ */

/* --- الحاوية الرئيسية --- */
#ordersPage .orders-toolbar-v2 {
    /* حاوية شفافة بلا بطاقة: عناصر التحكم (بحث/فلترة/عرض) تطفو مباشرةً على
       خلفية الصفحة، وكل عنصر يحتفظ بسطحه الخاص. حُذفت الخلفية والحدّ والظلّ
       والاستدارة والحشو التي كانت تطوّق الشريط في «بطاقة». */
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* سياق تكديس مستقل فوق قائمة الطلبات/الجدول: يضمن أن القائمة المنبثقة
       (.ot-view-menu المطلقة داخلها) ترسم فوق البطاقات/الصفوف دائماً ولا
       تنحشر خلفها مهما أنشأ عناصر القائمة سياق تكديس (transform عند hover). */
    position: relative;
    z-index: 1;
}
#ordersPage .ot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- حقل البحث الذكي ---
   الحقل يستخدم خلفية محايدة داكنة قليلاً (مزيج مع bg-main) ليتمايز عن
   شريط الأدوات الأبيض ويصبح "حفرة بحث" مرئية بوضوح. الحدّ رفيع، التركيز
   يكشف اللون الأساسي كحلقة خفيفة حول الحقل. */
#ordersPage .ot-search {
    flex: 1 1 320px;
    min-width: 280px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 12px 0 14px;
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border: 1px solid var(--border-main);
    border-radius: 10px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}
/* التمرير والتركيز: ألوان موحّدة مع زر البحث المطوي قبل التوسّع — بئر محايد
   + حدّ رفيع بلا أي تغيير، ليتطابق الحقل الموسّع مع شكل الزر قبل النقر.
   مؤشّر التركيز هو مؤشّر الكتابة (caret) داخل الحقل. */
#ordersPage .ot-search:hover,
#ordersPage .ot-search:focus-within {
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border-color: var(--border-main);
}
#ordersPage .ot-search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex: 0 0 18px;
}
#ordersPage .ot-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--text-title);
    padding: 0;
}
#ordersPage .ot-search input::placeholder {
    color: var(--text-secondary);
}

/* --- زر الفلاتر + الزر العام --- */
#ordersPage .ot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    /* بئر غائر داخل اللوحة البيضاء — نفس خلفية البحث ليبدو الشريط متناسقاً. */
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    color: var(--text-title);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
    white-space: nowrap;
}
#ordersPage .ot-btn:hover {
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-main));
}
#ordersPage .ot-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
#ordersPage .ot-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    flex: 0 0 16px;
}
#ordersPage .ot-btn[aria-expanded='true'] {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-main));
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-main));
    color: var(--primary);
}
#ordersPage .ot-btn-primary {
    background: var(--primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 28%, transparent);
}
#ordersPage .ot-btn-primary:hover {
    background: var(--primary-hover);
    border-color: transparent;
    color: #fff;
}
#ordersPage .ot-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
#ordersPage .ot-btn-ghost:hover {
    background: var(--surface-hover);
    color: var(--text-title);
}
#ordersPage .ot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--app-mono-family);
}
/* display:inline-flex أعلاه يطغى على [hidden] الافتراضي — بدونه تبقى شارة
   «0» ظاهرة رغم ضبط JS للسمة. الصفر لا شارة له إطلاقاً. */
#ordersPage .ot-badge[hidden] {
    display: none;
}
/* وهن احتياط: شارة بلا نصّ لا تُرسم إطلاقاً حتى لو فُقدت hidden */
#ordersPage .ot-badge:empty {
    display: none !important;
}
#ordersPage .ot-btn[aria-expanded='true'] .ot-badge {
    background: var(--primary);
}

/* زر الفلترة: أيقونة دائرية ناعمة تطابق زر البحث المطويّ (42px، radius 999px،
   وحواف ثابتة دون تغيّر لوني عند المرور). النص «فلترة» sr-only للوصولية. */
#ordersPage .ot-btn-filter {
    width: 42px;
    padding: 0;
    flex: 0 0 42px;
    justify-content: center;
    border-radius: 999px;
    position: relative;
}
/* مرور ناعم مطابق لزر البحث: بئر محايد + حدّ رفيع، دون ميل لوني للأساسي. */
#ordersPage .ot-btn-filter:hover {
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border-color: var(--border-main);
    color: var(--text-title);
}
/* إبقاء الشارة فوق الزر كـ overlay حتى لا تُغيّر عرضه */
#ordersPage .ot-btn-filter .ot-badge {
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
}

/* --- قائمة العرض (Dropdown) --- */
#ordersPage .ot-view-wrap {
    position: relative;
}
#ordersPage .ot-view-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    min-width: 168px;
    /* بئر غائر داخل اللوحة البيضاء — مطابق للبحث وزر الفلترة. */
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border: 1px solid var(--border-main);
    border-radius: 999px;
    color: var(--text-title);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
#ordersPage .ot-view-trigger:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-main));
}
#ordersPage .ot-view-trigger[aria-expanded='true'] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
#ordersPage .ot-view-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
#ordersPage .ot-view-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#ordersPage .ot-view-left svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    stroke-width: 2;
    flex: 0 0 16px;
}
#ordersPage .ot-view-trigger strong {
    color: var(--text-title);
    font-weight: 700;
}

/* زر «طريقة العرض» القديم (#otViewTrigger) حُذف: صار تابَي «قائمة/بطاقات»
   ممدّدين داخل مجموعة العرض في الترويسة الجديدة (قسم xtabs أدناه). */
/* زر «الأعمدة» (#otColTrigger) صار تاباً داخل مجموعة العرض (قسم xtabs
   أدناه) — لم يبقَ له تنسيق مستقل هنا. */
/* القائمة المنبثقة + محتواها مُحدَّدة بلا حصر صفحة (#ordersPage): تُنقل
   القائمة لـ <body> عند الفتح (تطليقها من أي stacking context)، فلو ظلّت
/* قائمة العرض المشتركة (.ot-view-* + @keyframes ot-menu-in) في toolbar.css.
   كانت هنا نسخة ثانية يدهسها customers.css بالكامل — حُذفت. */

/* ================================================================
   شريط الفلاتر النشطة (chips) حُذف بطلب المستخدم — المؤشر الوحيد
   للفلترة النشطة هو شارة العدّاد على زر «فلترة» (.ot-badge).
   ================================================================ */

/* ================================================================
   ✨ فلاتر shadcn المنقولة (orders-filters.js)
   popover أوامر + chips قابلة للتحرير بعامل تشغيل. معزول بالبادئة .otf-*
   ويعتمد توكنز Modernize فيتكيّف مع الوضع الليلي تلقائياً. يُلحق بجسم
   المستند لذا لا يُقيّده سياق تكديس الصفحة.
   ================================================================ */

/* --- Popover الأوامر (مرآة Command + Popover) --- */
.otf-popover {
    position: fixed;
    z-index: 1200;
    width: 264px;
    max-width: calc(100vw - 16px);
    max-height: 360px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface-solid, #fff);
    border: 1px solid var(--border-main, #e5e7eb);
    border-radius: 12px;
    box-shadow:
        0 10px 38px color-mix(in srgb, var(--text-title, #111) 10%, transparent),
        0 2px 8px color-mix(in srgb, var(--text-title, #111) 6%, transparent);
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top center;
    transition:
        opacity 0.14s ease,
        transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
/* display:flex أعلاه يطغى على [hidden] الافتراضي للـ UA، لذا نُلغي العرض صراحةً
   عندما يضبط JS السمة hidden=true على الـ popover. */
.otf-popover[hidden] {
    display: none !important;
}
.otf-popover.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* حقل البحث */
.otf-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--border-main, #eef0f3);
    color: var(--text-secondary, #8a92a6);
}
.otf-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-title, #111);
    font: inherit;
    font-size: 13px;
}
.otf-search-input::placeholder {
    color: var(--text-secondary, #9aa3b2);
}

/* جسم القائمة */
.otf-cmd-list {
    overflow-y: auto;
    padding: 6px 8px;
}
.otf-cmd-group {
    padding: 3px;
}
.otf-sep {
    height: 1px;
    background: var(--border-main, #eef0f3);
    margin: 4px 6px;
}
.otf-empty {
    padding: 18px;
    text-align: center;
    color: var(--text-secondary, #9aa3b2);
    font-size: 13px;
}

.otf-cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-title, #1f2937);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: start;
    transition: background-color 0.12s ease;
}
/* صفوف «الفلاتر المطبقة»: الزر + زر إزالة × في سطر واحد مريح */
.otf-active-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
}
.otf-active-row .otf-cmd-item {
    flex: 1 1 auto;
    min-width: 0;
}
.otf-active-row .otf-cmd-text b {
    font-weight: 700;
}
.otf-active-rm {
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: var(--text-secondary, #8a92a6);
    cursor: pointer;
    transition:
        background-color 0.12s ease,
        color 0.12s ease;
}
.otf-active-rm svg {
    width: 12px;
    height: 12px;
}
.otf-active-rm:hover {
    background: color-mix(in srgb, var(--danger, #e0413a) 12%, transparent);
    color: var(--danger, #e0413a);
}
/* عنوان قسم «الفلاتر المطبقة» — بنفس لغة عناوين المجموعات */
.otf-active-head {
    padding: 8px 11px 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #8a92a6);
    letter-spacing: 0.04em;
}
.otf-active-group {
    padding: 3px;
}
.otf-cmd-item:hover {
    background: color-mix(in srgb, var(--primary, #5b53ff) 8%, transparent);
}
.otf-cmd-item.is-checked {
    color: var(--primary, #5b53ff);
}
.otf-check {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
    color: var(--primary, #5b53ff);
}
.otf-cmd-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--text-secondary, #8a92a6);
}
.otf-cmd-item.is-checked .otf-cmd-ico {
    color: inherit;
}
.otf-cmd-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.otf-count {
    margin-inline-start: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #9aa3b2);
    background: color-mix(in srgb, var(--text-title, #111) 6%, transparent);
    padding: 1px 7px;
    border-radius: 999px;
}
.otf-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 9px;
}

/* --- نماذج الفترة/المبلغ داخل popover --- */
.otf-form {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.otf-form-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 2px;
    color: var(--text-title, #111);
    font-size: 13px;
    font-weight: 700;
}
.otf-form-ico {
    color: var(--text-secondary, #8a92a6);
    display: inline-flex;
}
.otf-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 4px;
}
.otf-range {
    border: 1px solid var(--border-main, #e5e7eb);
    background: transparent;
    color: var(--text-title, #1f2937);
    padding: 6px 11px;
    border-radius: 999px;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.otf-range:hover {
    border-color: var(--primary, #5b53ff);
    color: var(--primary, #5b53ff);
}
.otf-range.is-active {
    background: var(--primary, #5b53ff);
    border-color: var(--primary, #5b53ff);
    color: #fff;
}
.otf-date-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
}
.otf-date {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-main, #e5e7eb);
    border-radius: 8px;
    padding: 7px 8px;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-title, #111);
    background: var(--bg-main, #f7f8fa);
}
.otf-date:focus {
    outline: none;
    border-color: var(--primary, #5b53ff);
}
.otf-date-sep {
    color: var(--text-secondary, #9aa3b2);
    font-size: 12px;
}

.otf-amount-row {
    display: flex;
    gap: 8px;
    padding: 0 4px;
}
.otf-amount-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary, #8a92a6);
}
.otf-num {
    border: 1px solid var(--border-main, #e5e7eb);
    border-radius: 8px;
    padding: 8px 9px;
    font: inherit;
    font-size: 13px;
    color: var(--text-title, #111);
    background: var(--bg-main, #f7f8fa);
    width: 100%;
}
.otf-num:focus {
    outline: none;
    border-color: var(--primary, #5b53ff);
}

.otf-form-foot {
    display: flex;
    justify-content: flex-end;
    padding: 2px 6px 4px;
}
.otf-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.otf-btn-primary {
    background: var(--primary, #5b53ff);
    color: #fff;
}
.otf-btn-primary:hover {
    filter: brightness(1.05);
}

/* حبّة عامل التشغيل داخل نموذج الفترة */
.otf-op-pill {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-main, #e5e7eb);
    background: var(--bg-main, #f7f8fa);
    color: var(--text-title, #1f2937);
    border-radius: 8px;
    padding: 4px 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.otf-op-pill.otf-op-static {
    cursor: default;
    opacity: 0.85;
}
.otf-op-pill svg {
    width: 11px;
    height: 11px;
}

/* --- قائمة عامل التشغيل المنسدلة الصغيرة --- */
.otf-op-menu {
    position: fixed;
    z-index: 1250;
    min-width: 120px;
    background: var(--surface-solid, #fff);
    border: 1px solid var(--border-main, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text-title, #111) 10%, transparent);
    padding: 5px;
    opacity: 0;
    transform: scale(0.97);
    transform-origin: top center;
    transition:
        opacity 0.12s ease,
        transform 0.12s ease;
}
.otf-op-menu.is-open {
    opacity: 1;
    transform: scale(1);
}
.otf-op-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: var(--text-title, #1f2937);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: start;
}
.otf-op-item:hover {
    background: color-mix(in srgb, var(--primary, #5b53ff) 8%, transparent);
}
.otf-op-item.is-current {
    color: var(--primary, #5b53ff);
    font-weight: 700;
}
.otf-op-item svg {
    width: 14px;
    height: 14px;
    margin-inline-start: auto;
}

/* --- الـ chips القابلة للتحرير (مرآة Filters component) — حُذف شريط الطلبات؛
     الأنماط العامة أدناه (.otf-*) تبقى لخدمة chips صفحة العملاء --- */

.otf-chip {
    display: inline-flex;
    align-items: stretch;
    height: 26px;
    border-radius: 7px;
    overflow: hidden;
    font-size: 12px;
    background: color-mix(in srgb, var(--text-title, #111) 6%, transparent);
    color: var(--text-title, #1f2937);
    vertical-align: middle;
}
.otf-chip-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    font-weight: 700;
    background: color-mix(in srgb, var(--primary, #5b53ff) 10%, transparent);
    color: var(--text-title, #1f2937);
}
.otf-chip-head svg {
    width: 13px;
    height: 13px;
    color: var(--text-secondary, #8a92a6);
}
.otf-seg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    padding: 0 8px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition:
        background-color 0.12s ease,
        color 0.12s ease;
}
.otf-seg:hover {
    background: color-mix(in srgb, var(--text-title, #111) 6%, transparent);
    color: var(--primary, #5b53ff);
}
.otf-seg.otf-op {
    font-weight: 600;
}
.otf-seg.otf-op.is-static {
    cursor: default;
}
.otf-seg.otf-op.is-static:hover {
    background: transparent;
    color: var(--text-secondary, #6b7280);
}
.otf-seg.otf-val {
    color: var(--text-title, #1f2937);
    font-weight: 600;
}
.otf-seg.otf-val svg,
.otf-seg.otf-val .otf-cmd-ico {
    width: 13px;
    height: 13px;
}
.otf-seg.otf-val .otf-cmd-ico {
    color: var(--text-secondary, #8a92a6);
    flex: 0 0 13px;
}
.otf-val-count {
    white-space: nowrap;
}
.otf-seg.otf-rm {
    padding: 0 7px;
    border-radius: 0 7px 7px 0;
}
.otf-seg.otf-rm svg {
    width: 12px;
    height: 12px;
}
.otf-seg.otf-rm:hover {
    background: color-mix(in srgb, var(--btn-danger-bg, #fa896b) 16%, transparent);
    color: var(--btn-danger-bg, #fa896b);
}

.otf-clear {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 14px;
    border: 1px solid var(--border-main, #e5e7eb);
    background: transparent;
    color: var(--text-secondary, #6b7280);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}
.otf-clear:hover {
    color: var(--btn-danger-bg, #fa896b);
    border-color: var(--btn-danger-bg, #fa896b);
}

/* --- زر الفلترة: مؤشر نشط --- */
#ordersPage .ot-btn-filter[aria-expanded='true'] {
    background: color-mix(in srgb, var(--primary, #5b53ff) 12%, transparent);
    color: var(--primary, #5b53ff);
}

/* ================================================================
   ✨ لوحة الفلاتر — تصميم أنيق
   ================================================================ */
#ordersPage .ot-filter-panel {
    background: var(--surface-main);
    border: 1px solid var(--border-main);
    border-radius: 16px;
    box-shadow:
        0 10px 40px color-mix(in srgb, var(--text-title) 6%, transparent),
        0 2px 6px color-mix(in srgb, var(--text-title) 4%, transparent);
    overflow: hidden;
    animation: ot-menu-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- رأس اللوحة --- */
#ordersPage .ot-fp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border-main);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary) 5%, var(--surface-main)) 0%,
        var(--surface-main) 100%
    );
}
#ordersPage .ot-fp-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-title);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.01em;
}
#ordersPage .ot-fp-head h3::before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #8baaff));
    border-radius: 3px;
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 35%, transparent);
}
#ordersPage .ot-fp-close {
    background: var(--surface-main);
    border: 1px solid var(--border-main);
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.18s ease;
}
#ordersPage .ot-fp-close:hover {
    background: color-mix(in srgb, var(--btn-danger-bg, #fa896b) 10%, var(--surface-main));
    border-color: color-mix(in srgb, var(--btn-danger-bg, #fa896b) 35%, var(--border-main));
    color: var(--btn-danger-bg, #fa896b);
    transform: rotate(90deg);
}
#ordersPage .ot-fp-close svg {
    width: 14px;
    height: 14px;
}

/* --- شبكة الفلاتر --- */
/* ٣ أعمدة (لا ٤) عبر grid-template-areas: الحالة (الأهم) بعمود عريض يميناً،
   الفترة الزمنية ثم المبلغ تحتها في العمود الأوسط، والمصدر بعمود ضيّق يساراً.
   التسميات ثابتة لكل مجموعة (nth-child) فلا نلمس HTML؛ نغيّر فقط القالب حسب
   عرض الشاشة: ٣ ← ٢ ← ١. */
#ordersPage .ot-fp-grid {
    display: grid;
    grid-template-columns: 1.35fr 1.25fr 0.7fr;
    grid-template-areas:
        'status date   source'
        'status amount source';
    gap: 22px;
    padding: 22px 24px;
}
#ordersPage .ot-fp-grid > .ot-fp-group:nth-child(1) {
    grid-area: status;
}
#ordersPage .ot-fp-grid > .ot-fp-group:nth-child(2) {
    grid-area: date;
}
#ordersPage .ot-fp-grid > .ot-fp-group:nth-child(3) {
    grid-area: amount;
}
#ordersPage .ot-fp-grid > .ot-fp-group:nth-child(4) {
    grid-area: source;
}
#ordersPage .ot-fp-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-title);
    margin-bottom: 12px;
    letter-spacing: 0;
}
#ordersPage .ot-fp-label::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #8baaff));
    border-radius: 2px;
    flex-shrink: 0;
}

/* --- قائمة الحالات كبطاقات شبكية (2 أعمدة) --- */
#ordersPage .ot-status-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-height: none;
    overflow-y: visible;
    padding: 0;
}
#ordersPage .ot-status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-main);
    border-radius: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--surface-main);
    position: relative;
    min-width: 0;
}
#ordersPage .ot-status-item:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border-main));
    background: color-mix(in srgb, var(--primary) 3%, var(--surface-main));
    transform: translateY(-1px);
}
#ordersPage .ot-status-item:has(input:checked) {
    border-color: var(--primary);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary) 8%, var(--surface-main)) 0%,
        var(--surface-main) 100%
    );
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--primary) 18%, transparent),
        inset 0 0 0 1px var(--primary);
}
#ordersPage .ot-status-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: 0;
}
#ordersPage .ot-status-item .ot-status-name {
    flex: 1;
    font-size: 12.5px;
    color: var(--text-title);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ordersPage .ot-status-item .ot-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}
#ordersPage .ot-status-item .ot-status-count {
    font-size: 11px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    font-family: var(--app-mono-family);
    flex-shrink: 0;
}
#ordersPage .ot-status-item:has(input:checked) .ot-status-count {
    background: var(--primary);
    color: #fff;
}

/* --- النطاقات السريعة: Segmented Control --- */
#ordersPage .ot-quick-ranges {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    background: color-mix(in srgb, var(--text-secondary) 8%, var(--surface-main));
    padding: 4px;
    border-radius: 11px;
    border: 1px solid var(--border-main);
    margin-bottom: 12px;
}
#ordersPage .ot-quick-ranges button {
    height: 30px;
    padding: 0 4px;
    border: none;
    background: transparent;
    border-radius: 7px;
    font: inherit;
    font-size: 11.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    white-space: nowrap;
}
#ordersPage .ot-quick-ranges button:hover {
    color: var(--text-title);
    background: color-mix(in srgb, var(--surface-main) 50%, transparent);
}
#ordersPage .ot-quick-ranges button.active {
    background: var(--surface-main);
    color: var(--primary);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text-title) 12%, transparent);
    font-weight: 700;
}

/* --- حقول التاريخ (تظهر فقط مع "مخصص") --- */
#ordersPage .ot-date-inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: color-mix(in srgb, var(--primary) 3%, var(--surface-main));
    border-radius: 11px;
    border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--border-main));
}
#ordersPage .ot-date-inputs input {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-main);
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-title);
    background: var(--surface-main);
    color-scheme: light;
    font-family: var(--app-mono-family);
    transition: all 0.15s ease;
}
[data-theme='dark'] #ordersPage .ot-date-inputs input {
    color-scheme: dark;
}
#ordersPage .ot-date-inputs input:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-main));
}
#ordersPage .ot-date-inputs input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
#ordersPage .ot-date-sep {
    color: var(--text-secondary);
    font-size: 12px;
    flex: 0 0 auto;
    font-weight: 600;
}

/* --- نطاق المبلغ --- */
#ordersPage .ot-amount-range {
    display: flex;
    gap: 8px;
}
#ordersPage .ot-amount-input {
    flex: 1;
    position: relative;
}
#ordersPage .ot-amount-input input {
    width: 100%;
    height: 36px;
    padding: 0 38px 0 12px;
    border: 1.5px solid var(--border-main);
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    color: var(--text-title);
    background: var(--surface-main);
    font-family: var(--app-mono-family);
    transition: all 0.15s ease;
}
#ordersPage .ot-amount-input input:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-main));
}
#ordersPage .ot-amount-input input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
#ordersPage .ot-amount-prefix {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 11.5px;
    pointer-events: none;
    font-weight: 700;
}

/* --- رقائق المصادر (3 أعمدة مع تدرج عند التفعيل) --- */
#ordersPage .ot-multi-chips {
    display: grid;
    /* عمودان في الوضع العادي: عمود المصدر ضيّق (0.7fr) فلا تتسع لـ٣ رقائق في صف
       واحد؛ عمودان يبقيان كل رقاقة مقروءة («انستقرام» و«واتساب»). */
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
#ordersPage .ot-multi-chips button {
    height: 34px;
    padding: 0 8px;
    border: 1.5px solid var(--border-main);
    background: var(--surface-main);
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#ordersPage .ot-multi-chips button:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border-main));
    color: var(--text-title);
    transform: translateY(-1px);
}
#ordersPage .ot-multi-chips button.active {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, #8baaff));
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* --- ذيل اللوحة --- */
#ordersPage .ot-fp-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    border-top: 1px solid var(--border-main);
    background: linear-gradient(
        180deg,
        var(--surface-main) 0%,
        color-mix(in srgb, var(--primary) 3%, var(--surface-main)) 100%
    );
}
#ordersPage .ot-fp-count {
    font-size: 12.5px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#ordersPage .ot-fp-count strong {
    color: var(--primary);
    font-weight: 800;
    font-family: var(--app-mono-family);
    font-size: 14px;
}
#ordersPage .ot-fp-actions {
    display: flex;
    gap: 8px;
}
#ordersPage .ot-fp-actions .ot-btn {
    height: 38px;
    padding: 0 18px;
}
/* ترقية زر "تطبيق" ليكون بارزاً بتدرج وظل */
#ordersPage #otFilterApply {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, #8baaff));
    border: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 32%, transparent);
    transition: all 0.15s ease;
}
#ordersPage #otFilterApply:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 42%, transparent);
}

/* Bulk actions bar — محذوف بناءً على طلب المستخدم */

/* --- إخفاء العناصر القديمة (الستاتس تابس + فيو تول) --- */
/* الإبقاء عليها مخفية فقط عند تواجدها داخل #ordersPage — لتفادي لمس صفحات أخرى */
#ordersPage .orders-toolbar:not(.orders-toolbar-v2) {
    display: none !important;
}

/* --- لوحة الفلاتر: ٣ أعمدة ← ٢ ← ١ حسب عرض الشاشة ---
   وسطياً (٧٢١–١١٨٠px) ننتقل لعمودين: الحالة يساراً ممتدة، الفترة+المبلغ
   متراصّان يميناً، والمصدر بعرض كامل في الأسفل. */
@media (max-width: 1180px) and (min-width: 721px) {
    #ordersPage .ot-fp-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'status date'
            'status amount'
            'source source';
    }
    /* المصدر أصبح بعرض كامل فنعيد ٣ رقائق لكل صف بدل العمودين. */
    #ordersPage .ot-multi-chips {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- الموبايل: الشريط يصبح عمودي --- */
@media (max-width: 720px) {
    #ordersPage .ot-row {
        gap: 8px;
    }
    #ordersPage .ot-fp-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'status'
            'date'
            'amount'
            'source';
        gap: 18px;
        padding: 18px;
    }
    #ordersPage .ot-status-list {
        grid-template-columns: 1fr;
    }
    #ordersPage .ot-quick-ranges {
        grid-template-columns: repeat(3, 1fr);
    }
    #ordersPage .ot-multi-chips {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- ضبط عرض البطاقات والجدول بناءً على الكثافة المختارة (٣ درجات) ---
   مريح (الافتراضي) · متوسط (كان «مضغوط» سابقاً) · مضغوط (أكثر ضغطاً جديداً) */
#ordersPage .orders-grid.ot-density-medium .oc-card {
    padding: 13px 16px 12px;
}
#ordersPage .orders-grid.ot-density-compact .oc-card {
    padding: 8px 11px 7px;
}
#ordersPage .orders-grid.ot-density-compact .oc-card .oc-name,
#ordersPage .orders-grid.ot-density-compact .oc-card .oc-foot {
    /* تفاصيل أقل في الوضع المضغوط — يتم تطبيقه على البطاقات الموجودة */
}
/* الكثافة تمسّ صفوف البيانات فقط — الترويسة ثابتة دائماً بحجم الافتراضي
   (13px/12px 14px) كي يبقى رأس الجدول بنفس الحجم والتنسيق في كل الصفحات
   والكثافات، فلا تتفاوت أحجام الترويسات باختلاف الكثافة المحفوظة لكل صفحة. */
#ordersPage .orders-list.ot-density-medium tbody td {
    padding: 10px 14px;
}
#ordersPage .orders-list.ot-density-compact tbody td {
    padding: 5px 10px;
    font-size: 12.5px;
}
#ordersPage .orders-list.ot-density-compact .ot-toggle-cell,
#ordersPage .orders-list.ot-density-compact .ot-detail {
    padding-block: 0;
}

/* ============================================================================
   حقل البحث القابل للطيّ (Dock) — نسخة عربية من فكرة ExpandingSearchDock:
   زر أيقونة دائري مُطوى افتراضياً، يكبر لحقل بحث ممتدّ بنقرة/تركيز.
   RTL: يتّسق مع --
   تخطيط toolbar (يكبر ضمن الشريط لا فوقه) كي لا يقفز باقي العناصر.
   ============================================================================ */

/* التبديل بين الحالتَين يعتمد على [data-collapsed] على وعاء .ot-search.
   الحالة المطوية تأخذ شكل زر الحالة في البطاقة: دائرة كاملة (border-radius 999px)
   كباقة الحالة، بخلفية صبغة فاتحة وحلقة لون أساسي عند التمرير. */
#ordersPage .ot-search[data-collapsed='true'] {
    flex: 0 0 42px;
    min-width: 42px;
    width: 42px;
    padding: 0;
    gap: 0;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border-radius: 999px;
    transition:
        flex-basis 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        min-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-radius 0.25s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
/* التمرير على الزر المطوي: يبقى على حالته قبل النقر تماماً (حواف دائريّة +
   نفس ألوان الراحة: بئر محايد + حدّ رفيع) دون أي تغيير، لتوحيد المظهر
   على كل الأجهزة. نُلغي بذلك تغيير الحدّ/الخلفية من القاعدة العامة. */
#ordersPage .ot-search[data-collapsed='true']:hover {
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border-color: var(--border-main);
    color: var(--text-title);
}

/* زر الأيقونة المُغلِّف: يُمسح تنسيق الزر الافتراضي ويبقى مرئياً فقط في حالة الطي */
#ordersPage .ot-search .ot-search-trigger {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    border-radius: 6px;
    transition: opacity 0.2s ease;
}
#ordersPage .ot-search[data-collapsed='false'] .ot-search-trigger {
    /* في الحالة الموسّعة الأيقونة تخدم كزخرفة بجانب الحقل */
    pointer-events: none;
}
#ordersPage .ot-search[data-collapsed='true'] #ordersSearchInput {
    /* إخفاء الحقل بصرياً مع إبقائه قابلاً للتركيز بالبرامج المساعدة */
    width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

#ordersPage .ot-search[data-collapsed='false'] {
    flex: 0 0 300px;
    min-width: 260px;
    max-width: 360px;
    width: auto;
    padding: 0 16px 0 18px;
    justify-content: flex-start;
    cursor: text;
    border-radius: 999px;
    transition:
        flex-basis 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        min-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-radius 0.25s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
#ordersPage .ot-search[data-collapsed='false'] #ordersSearchInput {
    width: auto;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease 0.1s;
}

/* منطقة الأيقونة: لا تغيير عند التمرير (تبقى كحالتها قبل النقر) */
#ordersPage .ot-search .ot-search-icon {
    transition: transform 0.25s ease;
}

/* زر الإغلاق (X) يظهر فقط في الحالة الموسّعة */
#ordersPage .ot-search .ot-search-clear {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 26px;
    padding: 0;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}
#ordersPage .ot-search .ot-search-clear svg {
    width: 14px;
    height: 14px;
}
#ordersPage .ot-search .ot-search-clear:hover {
    background: color-mix(in srgb, var(--text-title) 8%, transparent);
    color: var(--text-title);
}
#ordersPage .ot-search .ot-search-clear:active {
    transform: scale(0.92);
}
#ordersPage .ot-search[data-collapsed='false'] .ot-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
#ordersPage .ot-search[data-collapsed='false'] .ot-search-clear.is-visible {
    display: inline-flex;
}

/* احترام تفضيل تقليل الحركة: إيقاف الانتقالات */
@media (prefers-reduced-motion: reduce) {
    #ordersPage .ot-search,
    #ordersPage .ot-search[data-collapsed='true'],
    #ordersPage .ot-search[data-collapsed='false'],
    #ordersPage .ot-search .ot-search-icon,
    #ordersPage .ot-search #ordersSearchInput {
        transition: none !important;
    }
}

/* ============================================================================
   (حُذف) زر الاستعلام + popover ملخص الحالات + شريط ترويسة الحالات —
   حلّ محلّها شريط تابات الحالات الدائم في الترويسة الجديدة (#otStatusTabs
   أدناه): فلتر عام واحد في الترويسة فلا مبرّر للاستعلام ولا «انشر في
   الترويسة» ولا قوائم «هو/أي من/ليس هو» المنبثقة.
   ============================================================================ */


/* ============================================================================
   الترويسة الجديدة — تابات قابلة للتمدّد (xtabs)
   ============================================================================
   مرجع التصميم: docs/design/html/expandable-tabs-demo.html (منقول من العرض
   الخارجي إلى توكنز Modernize). البنية فوق شريط الأدوات v2:
   ① شريط تابات حالات الطلب (#otStatusTabs) — تاب ممدّد واحد (النشط) يظهر
      اسمه وعدّه، والبقية أيقونات صامتة؛ النشط يُصبَغ بلون بادج الحالة عبر
      ‎--status-bg/--status-text‎ من متغيّرات الثيم الحيّة.
   ② شريط تحكم بشقّين (.xcontrols): يميناً مجموعة البحث (doc المطويّ) +
      الفترة + زرّي الفلترة والاستعلام، ويساراً مجموعة عرض قائمة/بطاقات
      تسكن «تعديلات القائمة» (الكثافة + الأعمدة) داخل مستطيلها نفسه.
   الأصناف .xtabs/.xtab/.xsep مقيّدة كلها بـ #ordersPage فلا تتسرّب لأي سطح
   آخر يعيد استعمال .ot-*. */
#ordersPage .xtabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-main);
    background: var(--surface-main);
    border-radius: 16px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
    width: fit-content;
    max-width: 100%;
}
#ordersPage .xtabs-pill {
    border-radius: 999px;
    padding: 5px;
    margin-bottom: 6px;
}
#ordersPage .xtab {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 7px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        padding 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.3s ease;
    white-space: nowrap;
    position: relative;
}
/* أيقونات أرقّ من عتبة 2 الافتراضية — خطّ 1.7 يمنح التابات رشاقة العرض
   الخارجي (CSS يغلب صفة stroke-width في الوسم). */
#ordersPage .xtab svg {
    flex: none;
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}
#ordersPage .xtab:hover {
    background: var(--nav-bg-hover, var(--surface-hover));
    color: var(--text-title);
}
#ordersPage .xtab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
/* التسمية مطوية (عرض صفر) إلا في التاب الممدّد — قلب مكوّن ExpandableTabs */
#ordersPage .xtab .xtab-label {
    display: inline-block;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition:
        width 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.05s,
        opacity 0.3s ease 0.1s;
}
#ordersPage .xtab[aria-pressed='true'] {
    background: var(--surface-hover);
    color: var(--primary);
    padding: 7px 13px;
    gap: 7px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
#ordersPage .xtab[aria-pressed='true'] .xtab-label {
    width: auto;
    opacity: 1;
}
/* تابات الحالات: النشط يأخذ صبغة بادج الحالة لا الأساسي */
#ordersPage .xtab[data-status][aria-pressed='true'] {
    background: var(--status-bg, var(--surface-hover));
    color: var(--status-text, var(--primary));
}
/* عدّ التاب: يظهر على الممدّد فقط (المصدر /api/orders/counts — لا يُعدّ من
   نافذة الصفحة المعروضة) */
#ordersPage .xtab .xtab-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, currentColor 14%, transparent);
}
#ordersPage .xtab[aria-pressed='true'] .xtab-count {
    display: inline-flex;
}
#ordersPage .xsep {
    width: 1.2px;
    height: 22px;
    background: var(--border-main);
    margin: 0 4px;
    flex: none;
}
#ordersPage .xsep[hidden] {
    display: none;
}
/* شريط التحكم بشقّين: مجموعة يمنى (بحث+فترة) وفاصِل مرن ومجموعة يسرى (عرض) */
#ordersPage .xcontrols {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
#ordersPage .xspacer {
    flex: 1;
}
/* «تعديلات القائمة»: تسكن مجموعة العرض نفسها وتظهر عند اختيار قائمة فقط.
   قاعدة [hidden] صريحة كي لا يغلبها display:flex الصريح أعلاه. */
#ordersPage .xlist-adjust {
    display: flex;
    align-items: center;
    gap: 4px;
}
#ordersPage .xlist-adjust[hidden] {
    display: none;
}
#ordersPage .xtabs .ot-col-wrap {
    display: contents;
}

/* --- البحث (doc) داخل المجموعة: يذوب في وعاء .xtabs — مطويّ كأيقونة صامتة
   بنفس مقاس التاب، وممدّد كحقل محدَّد بحدّ ظاهر (مرآة .xsearch في العرض) --- */
#ordersPage .xtabs .ot-search {
    flex: 0 1 auto;
    min-width: 0;
    height: 32px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
#ordersPage .xtabs .ot-search[data-collapsed='true'] {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    padding: 0;
    gap: 0;
    justify-content: center;
}
#ordersPage .xtabs .ot-search[data-collapsed='true']:hover {
    background: var(--nav-bg-hover, var(--surface-hover));
    border-color: transparent;
}
#ordersPage .xtabs .ot-search[data-collapsed='false'] {
    flex: 0 1 230px;
    min-width: 170px;
    max-width: 300px;
    padding: 0 12px;
    background: var(--surface-main);
    border-color: var(--border-main);
}

/* --- زرّا الفلترة والاستعلام + زر الأعمدة كأيقونات تابات ---
   نلغي التنسيق الدائري المستقل (42px بئر محايد) ليجلسوا داخل الوعاء
   كأزرار تابات شفافة بمقاس التاب نفسه. */
#ordersPage .xtabs .ot-btn,
#ordersPage .xtabs .ot-view-trigger {
    height: auto;
    min-width: 0;
    width: auto;
    flex: 0 0 auto;
    padding: 7px;
    gap: 0;
    border: 0;
    background: transparent;
    border-radius: 999px;
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 500;
}
#ordersPage .xtabs .ot-btn svg,
#ordersPage .xtabs .ot-view-trigger svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
    color: var(--text-secondary);
}
#ordersPage .xtabs .ot-btn:hover,
#ordersPage .xtabs .ot-view-trigger:hover {
    background: var(--nav-bg-hover, var(--surface-hover));
    border-color: transparent;
    color: var(--text-title);
}
#ordersPage .xtabs .ot-btn svg {
    color: inherit;
}
/* الحالة المفتوحة (popover/قائمة أعمدة): صبغة أساسية خفيفة كالتاب الممدّد */
#ordersPage .xtabs .ot-btn[aria-expanded='true'],
#ordersPage .xtabs .ot-view-trigger[aria-expanded='true'] {
    background: var(--surface-hover);
    border-color: transparent;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}
#ordersPage .xtabs .ot-btn[aria-expanded='true'] svg,
#ordersPage .xtabs .ot-view-trigger[aria-expanded='true'] svg {
    color: var(--primary);
}
/* شارة عدّاد الفلاتر: خارج جسم الأيقونة بزاوية سفلية بعيدة — بحلقة سطح
   (ring) تقطعها عن الأيقونة كي لا تغطيها ولا تختلط بها بصرياً */
#ordersPage .xtabs .ot-btn-filter {
    position: relative;
}
#ordersPage .xtabs .ot-btn-filter .ot-badge {
    position: absolute;
    bottom: -8px;
    inset-inline-start: -10px;
    box-shadow:
        0 0 0 2px var(--surface-main),
        0 2px 6px color-mix(in srgb, var(--text-title) 18%, transparent);
}
/* وفي الفلاتر النشطة: الزر بوهج «المضغوط» نفسه الذي تعرفه العين من تابات
   البطاقات/كل الفترات (خلفية هادئة + صبغة أساسية) — إشارة بقاء لا ومضة */
#ordersPage .xtabs .ot-btn-filter.is-active {
    background: var(--surface-hover);
    color: var(--primary);
}

/* --- الجوال: صفّ واحد قابل للسحب لكل شريط — ارتفاع مضغوط ثابت ---
   بدل الالتفاف لأعمدة (كان يبتلع نصف الشاشة)، يبقى كل شريط صفاً واحداً
   بمقاسات أصغر (أيقونة ١٥px وحشو ٥px) يُسحب أفقياً لبقية التابات.
   إخفاء شريط التمرير: الحركة بالسحب مألوفة، والشريط يضيف ضوضاء بصرية. */
@media (max-width: 720px) {
    #ordersPage .xtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        width: 100%;
        padding: 3px;
        gap: 2px;
    }
    #ordersPage .xtabs::-webkit-scrollbar {
        display: none;
    }
    #ordersPage .xtab {
        padding: 5px;
        font-size: 0.75rem;
        scroll-snap-align: start;
    }
    #ordersPage .xtab svg {
        width: 15px;
        height: 15px;
    }
    #ordersPage .xtab[aria-pressed='true'] {
        padding: 5px 10px;
        gap: 6px;
    }
    #ordersPage .xtab .xtab-count {
        min-width: 17px;
        height: 17px;
        font-size: 10.5px;
    }
    #ordersPage .xsep {
        height: 18px;
        margin: 0 2px;
    }
    #ordersPage .xtabs .ot-btn,
    #ordersPage .xtabs .ot-view-trigger {
        padding: 5px;
    }
    #ordersPage .xtabs .ot-btn svg,
    #ordersPage .xtabs .ot-view-trigger svg {
        width: 15px;
        height: 15px;
    }
    #ordersPage .xtabs .ot-search {
        height: 27px;
    }
    #ordersPage .xtabs .ot-search[data-collapsed='true'] {
        flex: 0 0 27px;
        width: 27px;
        min-width: 27px;
    }
    #ordersPage .xtabs .ot-search[data-collapsed='false'] {
        flex: 1 1 100%;
        min-width: 140px;
    }
    #ordersPage .xcontrols {
        /* صف واحد: البحث والفترات يميناً ومجموعة العرض تلصق بيساره —
           بلا سطور مستقلة تفرّغ الصفحة. عند الضيق يُسحب الصف أفقياً. */
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #ordersPage .xcontrols::-webkit-scrollbar {
        display: none;
    }
    #ordersPage .xcontrols [data-xtgroup='main'] {
        /* بلا تمدّد: الصندوق يلتف على محتواه (بحث+فترات+فلترة) فيصير الفراغ
           في وسط الصف بينه وبين مجموعة العرض، لا داخل صندوق البحث نفسه */
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }
    /* مجموعة العرض (بطاقات/قائمة) تلصق بنهاية الصف (اليسار) كما في الكمبيوتر */
    #ordersPage .xcontrols [data-xtgroup='view'] {
        flex: 0 0 auto;
        width: auto;
        margin-inline-start: auto;
    }
    /* حين يتمدّد البحث تُخفى أزرار العرض مؤقتاً ليتنفس الحقل، وتعود عند الطي —
       :has مدعوم في كل المتصفحات الحديثة والمشروع يستخدم color-mix أصلاً */
    #ordersPage .xcontrols:has(.ot-search[data-collapsed='false']) [data-xtgroup='view'] {
        display: none;
    }
    /* إعدادات الجدول انتقلت على الجوال إلى زر الترس في ترويسة الجدول —
       لا معنى لتكرارها هنا فتُخفى من مجموعة العرض (ترس + «مضغوط» + الأعمدة) */
    #ordersPage #otListAdjust,
    #ordersPage #otListAdjustSep {
        display: none !important;
    }
    #ordersPage .xspacer {
        display: none;
    }
}

/* احترام تفضيل تقليل الحركة: تمدّد التسمية فوري بلا انتقال */
@media (prefers-reduced-motion: reduce) {
    #ordersPage .xtab,
    #ordersPage .xtab .xtab-label {
        transition: none;
    }
}

/* ================================================================
   ✨ إعدادات الجدول (الجوال): الترس يسكن خلية زاوية الترويسة نفسها
   (فوق سهم فتح الطلب) — فيقف بزاوية البداية تلقائياً: يمين بالعربي
   وشمال بالإنجليزي، بلا أي حساب اتجاه. الجوال فقط، وسطح المكتب يترك
   التعديلات في مجموعة العرض بالترويسة. القائمة تستخدم .ot-view-menu
   المشتركة (بلا حصر صفحة في toolbar.css لأن setFloatingMenuOpen ينقلها
   إلى <body> عند الفتح).
   ================================================================ */
/* توسيط الترس في خلية الزاوية: نفس حشو خلية السهم (.ot-toggle-cell) فيحاذي
   الدائرة تحته أفقياً بالضبط، ونفس مقاسها ودائرتها فيبدوان زوجاً متناسقاً.
  Sel. بنفس خصوصية قاعدة .ot-toggle-th (padding:0) وهي بعدها في الملف فتغلبها */
#ordersPage .orders-list.ot-expandable th.col-toggle {
    vertical-align: middle;
    text-align: center;
    padding-inline-start: 14px;
    padding-inline-end: 4px;
}
#ordersPage .ot-table-settings-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}
#ordersPage .ot-table-settings-btn svg {
    width: 16px;
    height: 16px;
}
#ordersPage .ot-table-settings-btn:hover,
#ordersPage .ot-table-settings-btn[aria-expanded='true'] {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}
/* ================================================================
   ✨ تنسيق قائمتي الإعدادات (كثافة العرض + إعدادات الجدول) — بنود مضغوطة
   بنفس لغة بنود الأعمدة، وكل قسم يفصله خط رفيع عن سابقه كي تُقرأ القائمة
   أقساماً لا كومة بنود. صندوق الاختبار: مشترك مع قائمة الأعمدة أعلاه.
   ================================================================ */
#ordersPage .ot-density-menu .ot-view-item,
#ordersPage .ot-table-settings-menu .ot-view-item {
    padding: 7px 10px;
    gap: 8px;
    font-size: 12.5px;
    border-radius: 7px;
}
/* فاصل رفيع بين أقسام القائمة (كثافة / أعمدة) — ليس قبل أول قسم.
   الفاصل على حاوية ‎#otTsColumns نفسها (لا على عنوانها المُولَّد) فهو
   مضمون الظهور دائماً مهما أُعيد رسم البنود */
#ordersPage .ot-density-menu .ot-view-group-label:not(:first-child),
#ordersPage .ot-table-settings-menu .ot-view-group-label:not(:first-child) {
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid var(--border-light);
}
#ordersPage .ot-table-settings-menu #otTsColumns {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-main);
}

@media (max-width: 720px) {
    #ordersPage .ot-table-settings-btn {
        display: inline-flex;
    }
}