/* ============================================================================
   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);
}

/* ألوان الحالة: chip الحالة وهالة hover تستخدمان --oc-band (نص + خلفية) */
.oc-card[data-st='new'] {
    --oc-band: var(--new-text);
    --oc-band-bg: var(--new-bg);
}
.oc-card[data-st='ready'] {
    --oc-band: var(--ready-text);
    --oc-band-bg: var(--ready-bg);
}
.oc-card[data-st='delivering'] {
    --oc-band: var(--delivering-text);
    --oc-band-bg: var(--delivering-bg);
}
.oc-card[data-st='completed'] {
    --oc-band: var(--completed-text);
    --oc-band-bg: var(--completed-bg);
}
.oc-card[data-st='collected'] {
    --oc-band: var(--collected-text);
    --oc-band-bg: var(--collected-bg);
}
.oc-card[data-st='pending'] {
    --oc-band: var(--pending-text);
    --oc-band-bg: var(--pending-bg);
}
.oc-card[data-st='review'] {
    --oc-band: var(--review-text);
    --oc-band-bg: var(--review-bg);
}
.oc-card[data-st='cancelled'] {
    --oc-band: var(--cancelled-text);
    --oc-band-bg: var(--cancelled-bg);
}

.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 + متين: الحالة هي الإشارة التشغيلية الأولى. الرقاقة تأخذ صبغة الحالة
   مكثّفة (@24% على السطح الصلب) كخلفية + نقطة صلبة بلون الحالة + تسمية عريضة
   داكنة (--text-title). النص المحايد الداكن يضمن تبايناً مقروءاً مهما كان لون
   الحالة الذي يختاره المستأجر (حتى الثيمات الباستيل الفاتحة)، بينما يحمل اللون
   حضوره عبر الصبغة والنقطة. يتكيّف تلقائياً مع الوضع الليلي عبر --surface-solid. */
.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(--text-title);
    background: 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-chip.s-new {
    --oc-band: var(--new-text);
}
.oc-chip.s-ready {
    --oc-band: var(--ready-text);
}
.oc-chip.s-delivering {
    --oc-band: var(--delivering-text);
}
.oc-chip.s-completed {
    --oc-band: var(--completed-text);
}
.oc-chip.s-collected {
    --oc-band: var(--collected-text);
}
.oc-chip.s-pending {
    --oc-band: var(--pending-text);
}
.oc-chip.s-review {
    --oc-band: var(--review-text);
}
.oc-chip.s-cancelled {
    --oc-band: 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;
    padding: 7px 11px;
    margin: 0 0 10px 10px;
    background: var(--table-wrapper-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}
.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-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-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 {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 2px 10px;
    padding: 8px 10px;
    background: var(--surface-hover);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--text-main);
    line-height: 1.5;
}
.oc-notes .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 5px;
    flex-shrink: 0;
}

/* ===== التذييل: الإجمالي + زر الإرسال ===== */
/* 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-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-col-menu .ot-col-item {
    gap: 9px;
}
.ot-col-menu .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 {
    background: var(--primary, #6b5dd3);
    border-color: var(--primary, #6b5dd3);
}
.ot-col-menu .ot-col-box svg {
    width: 12px;
    height: 12px;
}
.ot-col-menu .ot-col-label {
    flex: 1 1 auto;
}

/* علامة الحالة المدمجة بجوار رقم الطلب (توقيع 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;
}
/* في الجدول نرفع الصبغة قليلاً (28% من --oc-band) + حلقة داخلية بنفس لون الحالة
   كي تبرز الرقاقة فوق صفوف الـ zebra. لون الحالة يأتي من .s-* التي تضبط --oc-band،
   فيكفي سطر واحد لكل الأحوال بدل ثمانية. النص الداكن يضمن التباين.
   الحجم مطابق لرقاقة رأس البطاقة (.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;
    background: color-mix(in srgb, var(--oc-band, var(--primary)) 28%, var(--surface-solid));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oc-band, var(--primary)) 32%, transparent);
}
#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);
}
#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;
}
#ordersPage .ot-view-caret {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    flex: 0 0 14px;
    transition: transform 0.15s ease;
}
#ordersPage .ot-view-trigger[aria-expanded='true'] .ot-view-caret {
    transform: rotate(180deg);
    color: var(--primary);
}

/* زر «طريقة العرض» فقط (#otViewTrigger): أيقونة مربّعة (42×42) مطابقة لزر
   الفلترة/البحث — بلا نص ظاهر. النص «عرض: ...» يبقى sr-only للوصولية.
   نستخدم id مزدوجاً لرفع الـ specificity فوق قواعد .ot-view-trigger العامة
   (المشتركة مع زر «الأعمدة» #otColTrigger الذي يُبقي شكله الواسع بالنص). */
#ordersPage #otViewTrigger {
    justify-content: center;
    gap: 0;
    width: 42px;
    min-width: 0;
    padding: 0;
    flex: 0 0 42px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
}
#ordersPage #otViewTrigger .ot-view-left {
    justify-content: center;
    gap: 0;
}
#ordersPage #otViewTrigger .ot-view-left svg {
    color: inherit;
}
#ordersPage #otViewTrigger:hover {
    background: var(--surface-hover);
}
#ordersPage #otViewTrigger[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);
    box-shadow: none;
}
/* القائمة المنبثقة + محتواها مُحدَّدة بلا حصر صفحة (#ordersPage): تُنقل
   القائمة لـ <body> عند الفتح (تطليقها من أي stacking context)، فلو ظلّت
   المحدّدات بـ #ordersPage لما طُبِّقت بعد النقل وظهرت العناصر بلا تنسيق. */
.ot-view-menu {
    /* position:fixed (بدل absolute داخل .ot-view-wrap) حتى لا يُقيّدها أي
       stacking context في الأصل — نفس النهج المعتمد لـ .oc-status-menu.
       الموضع يُضبط بالـ JS عند الفتح بالنسبة لزر التشغيل (trigger rect). */
    position: fixed;
    min-width: 240px;
    max-width: calc(100vw - 16px);
    /* سطح صلب معتم دائماً (لا زجاجية): --surface-solid مع لون احتياطي #fff.
       حذفنا backdrop-filter لأنه كان يُظهر محتوى الصفحة خلف القائمة (زجاجي
       شفاف)؛ القائمة المنبثقة يجب أن تكون صلبة لا ضبابية. */
    background: var(--surface-solid, #ffffff);
    border: 1px solid var(--border-main);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    /* طبقة --z-popover تطابق عائلة الـ popovers في المشروع (.oc-status-menu=--z-popover-top)
       وتضمن ظهور القائمة فوق أي بطاقة/جدول حتى لو حصلت على stacking context. */
    z-index: var(--z-popover);
    animation: ot-menu-in 0.12s ease-out;
}
.ot-view-menu[hidden] {
    display: none;
}
@keyframes ot-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.ot-view-group-label {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ot-view-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-title);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: start;
    transition:
        background-color 0.12s ease,
        color 0.12s ease;
}
.ot-view-item:hover {
    background: var(--surface-hover);
}
.ot-view-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.ot-view-item svg:not(.ot-view-check) {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    stroke-width: 2;
    flex: 0 0 16px;
}
.ot-view-item.active {
    color: var(--primary);
    font-weight: 700;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.ot-view-item.active svg:not(.ot-view-check) {
    color: var(--primary);
}
.ot-view-check {
    margin-inline-start: auto;
    width: 14px;
    height: 14px;
    color: var(--primary);
    opacity: 0;
    stroke-width: 2.5;
}
.ot-view-item.active .ot-view-check {
    opacity: 1;
}
.ot-view-divider {
    height: 1px;
    background: var(--border-main);
    margin: 6px 4px;
}

/* ================================================================
   ✨ شريط الفلاتر النشطة (chips) — تصميم أنيق
   ================================================================ */
#ordersPage .ot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid var(--border-light);
    margin-top: 6px;
    /* لا تدرّج بنفسجي: الفلاتر النشطة رقائقها ملوّنة بالفعل وتحمل الصبغة.
       خلفية محايدة تحافظ على التوازن ولا تضيف ضوضاء بصرية. */
    background: var(--surface-hover);
    border-radius: 0 0 10px 10px;
}
#ordersPage .ot-chips:empty {
    display: none;
}
#ordersPage .ot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 4px 0 12px;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-main));
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border-main));
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 8%, transparent);
}
#ordersPage .ot-chip-label {
    color: color-mix(in srgb, var(--primary) 60%, var(--text-secondary));
    font-weight: 500;
    margin-inline-end: 2px;
}
#ordersPage .ot-chip button {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}
#ordersPage .ot-chip button:hover {
    background: var(--primary);
    color: #fff;
    transform: rotate(90deg);
}
#ordersPage .ot-chip button svg {
    width: 10px;
    height: 10px;
    stroke-width: 2.5;
}
#ordersPage .ot-chip-clear {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 999px;
    margin-inline-start: 4px;
    transition: all 0.15s ease;
}
#ordersPage .ot-chip-clear:hover {
    background: color-mix(in srgb, var(--btn-danger-bg, #fa896b) 12%, transparent);
    color: var(--btn-danger-bg, #fa896b);
}

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

/* --- Popover الأوامر (مرآة Command + Popover) --- */
.otf-popover {
    position: fixed;
    z-index: 1200;
    width: 248px;
    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: 5px;
}
.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: 9px;
    width: 100%;
    padding: 8px 9px;
    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-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) --- */
#ordersPage .ot-chips {
    gap: 8px;
}

.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-compact .oc-card {
    padding: 11px 14px 10px;
}
#ordersPage .orders-grid.ot-density-compact .oc-card .oc-name,
#ordersPage .orders-grid.ot-density-compact .oc-card .oc-foot {
    /* تفاصيل أقل في الوضع المضغوط — يتم تطبيقه على البطاقات الموجودة */
}
#ordersPage .orders-list.ot-density-compact tbody td {
    padding: 8px 14px;
}
#ordersPage .orders-list.ot-density-compact thead th {
    padding: 8px 14px;
}

/* ============================================================================
   حقل البحث القابل للطيّ (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;
    }
}

/* ============================================================================
   زر الاستعلام (Inquiry) + popover ملخص الحالات + شريط ترويسة الحالات.
   مرجع التصميم: .dzin/orders-toolbar-redesign.html (الأقسام ٣ و ٤).
   تعتمد كلها توكنز Modernize وتتكيّف مع الوضع الليلي عبر [data-theme].
   ============================================================================ */

/* --- زر الاستعلام في شريط الأدوات --- */
/* زر دائري أيقوني 42px مطابق لزر الفلترة (.ot-btn-filter): بئر محايد + حدّ رفيع،
   يفتح popover ملخص الحالات. */
#ordersPage .ot-inquiry-wrap {
    position: relative;
}
#ordersPage .ot-btn-inquiry {
    width: 42px;
    height: 42px;
    padding: 0;
    flex: 0 0 42px;
    justify-content: center;
    border-radius: 999px;
    position: relative;
}
/* مرور ناعم مطابق لزر الفلترة: بئر محايد + حدّ رفيع دون ميل لوني للأساسي. */
#ordersPage .ot-btn-inquiry:hover {
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border-color: var(--border-main);
    color: var(--text-title);
}

/* --- Popover الاستعلام (مُلحق بـ body، position:fixed) --- */
.oti-popover {
    position: fixed;
    z-index: 1200;
    width: 320px;
    max-width: calc(100vw - 16px);
    background: var(--surface-solid, #fff);
    border: 1px solid var(--border-main, #e5e7eb);
    border-radius: 14px;
    box-shadow:
        0 18px 40px color-mix(in srgb, var(--text-title, #111) 14%, transparent),
        0 2px 8px color-mix(in srgb, var(--text-title, #111) 6%, transparent);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition:
        opacity 0.15s ease,
        transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    direction: rtl;
}
.oti-popover[hidden] {
    display: none !important;
}
.oti-popover.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.oti-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px 11px;
    border-bottom: 1px solid var(--border-main, #eef0f3);
}
.oti-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
}
.oti-total {
    background: color-mix(in srgb, var(--primary) 11%, transparent);
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.oti-body {
    padding: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
.oti-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    color: var(--text-title);
    font: inherit;
    text-align: start;
    transition: background-color 0.12s ease;
}
.oti-row:hover {
    background: var(--bg-main);
}
.oti-row.is-active {
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.oti-row .oti-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--oti-c, var(--text-secondary));
    flex: 0 0 10px;
}
.oti-row .oti-dot-all {
    background: var(--primary);
}
.oti-row .oti-name {
    flex: 0 0 auto;
    min-width: 76px;
    font-size: 13px;
    font-weight: 500;
}
.oti-row .oti-bar {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--bg-main);
    overflow: hidden;
    position: relative;
}
.oti-row .oti-bar > i {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--oti-c, var(--text-secondary));
    border-radius: 999px;
    transition: width 0.25s ease;
}
.oti-row .oti-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
    min-width: 26px;
    text-align: end;
}
.oti-row .oti-val-all {
    color: var(--primary);
}
.oti-row .oti-pct {
    font-size: 11px;
    color: var(--text-secondary);
    min-width: 38px;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.oti-foot {
    margin-top: 2px;
    padding: 12px 14px;
    border-top: 1px solid var(--border-main, #eef0f3);
    display: flex;
    align-items: center;
    gap: 10px;
}
.oti-switch {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    border: none;
    background: var(--border-strong, #d4dae3);
    cursor: pointer;
    flex: 0 0 36px;
    transition: background-color 0.2s ease;
    padding: 0;
}
.oti-switch > span {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
    transition: inset-inline-start 0.2s ease;
}
.oti-switch.on {
    background: var(--primary);
}
.oti-switch.on > span {
    inset-inline-start: 18px;
}
.oti-foot-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.oti-foot-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
}
.oti-foot-hint {
    font-size: 11px;
    color: var(--text-secondary);
}

/* --- لوحة اختيار الحالات المنشورة (تظهر فقط عند تفعيل النشر) --- */
.oti-pub {
    padding: 11px 14px 14px;
    border-top: 1px solid var(--border-main, #eef0f3);
}
.oti-pub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}
.oti-pub-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.oti-pub-all {
    border: none;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 7px;
    transition: background-color 0.12s ease;
}
.oti-pub-all:hover {
    background: var(--bg-main);
}
.oti-pub-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.oti-pub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--border-main, #e5e7eb);
    border-radius: 999px;
    background: var(--surface-solid, #fff);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}
.oti-pub-pill:hover {
    border-color: color-mix(in srgb, var(--oti-c) 40%, var(--border-main));
}
.oti-pub-pill .oti-pub-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oti-c, var(--text-secondary));
    flex: 0 0 8px;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}
/* مُفعّل: صبغة الحالة 24% فوق السطح (مطابقة رقاقة البطاقة .oc-chip) + نقطة كاملة */
.oti-pub-pill.on {
    background: color-mix(in srgb, var(--oti-c) 24%, var(--surface-solid));
    border-color: transparent;
    color: var(--text-title);
    font-weight: 600;
}
.oti-pub-pill.on .oti-pub-dot {
    opacity: 1;
}

/* --- شريط ترويسة الحالات («انشر في الترويسة») --- */
/* شريط chips قابل للنقر أعلى صفحة الطلبات، يظهر عند تفعيل الميزة من الـ popover.
   بطاقة موحّدة (نفس لغة .page) لكن أكثر هدوءاً — خلفية محايدة + حدّ رفيع. */
#ordersPage .ohs-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 0;
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius, 14px);
    margin-top: -6px;
    position: relative;
    z-index: 1;
    animation: oti-fade 0.2s ease;
}
/* display:flex أعلاه يتغلّب على [hidden] الافتراضي للـ UA (نفس بقّ .otf-popover
   الموثّق)، فلابد من إلغاء العرض صراحةً كي يُخفيه × / المفتاح فعلاً. */
#ordersPage .ohs-bar[hidden] {
    display: none !important;
}
@keyframes oti-fade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    #ordersPage .ohs-bar {
        animation: none;
    }
}
#ordersPage .ohs-chips {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}
#ordersPage .ohs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--surface-solid);
    color: var(--text-title);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    white-space: nowrap;
}
#ordersPage .ohs-chip:hover {
    border-color: var(--border-main);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}
#ordersPage .ohs-chip.is-active {
    /* مطابقة رقاقة حالة الطلب في البطاقة (.oc-chip): صبغة لون الحالة 24% فوق
       السطح الصلب + نقطة بلون الحالة + نص داكن عريض — نفس معالجة الحالة في
       بطاقة الطلب بدل لون primary العام. */
    background: color-mix(in srgb, var(--oti-c) 24%, var(--surface-solid));
    border-color: transparent;
    color: var(--text-title);
    font-weight: 700;
}
#ordersPage .ohs-chip .ohs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oti-c, var(--text-secondary));
    flex: 0 0 8px;
}
#ordersPage .ohs-chip-all .ohs-dot {
    display: none;
}
#ordersPage .ohs-chip-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- استجابة الجوال --- */
@media (max-width: 768px) {
    #ordersPage .ohs-bar {
        gap: 8px;
        padding: 9px 11px;
    }
    #ordersPage .ohs-chips {
        gap: 4px;
    }
    #ordersPage .ohs-chip {
        padding: 4px 9px;
        font-size: 12px;
    }
    /* قائمة الـ popover أضيق قليلاً على الجوال */
    .oti-popover {
        width: calc(100vw - 24px);
    }
    .oti-row .oti-name {
        min-width: 64px;
    }
}