/* ============================================================================
   Customers list — toolbar + redesign (mirrors the orders page toolbar so
   the two pages feel like one product).
   ============================================================================ */

/* ===== شريط الفلاتر + مبدّل العرض — نفس ستايل orders-toolbar ===== */
#customersPage .customers-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

/* شرائح الفلاتر (chips) */
#customersPage .stats-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
#customersPage .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;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#customersPage .stat-tab:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}
#customersPage .stat-tab .stat-count {
    background: color-mix(in srgb, var(--text-title) 8%, transparent);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
}
#customersPage .stat-tab.active {
    background: var(--primary) !important;
    color: var(--text-light) !important;
    border-color: transparent !important;
}
#customersPage .stat-tab.active .stat-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* إخفاء تابات فارغة (يكون عدد العملاء فيها صفر) — نفس سلوك صفحة الطلبات */
#customersPage .stat-tab[style*='display: none'] {
    display: none !important;
}

/* مبدّل العرض: segmented control بنفس ستايل الطلبات */
#customersPage .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 بنسخة موحّدة غير
   مقيّدة بـ #customersPage. تبقّى هنا تأثير شريط العملاء على الجوال فقط. */
@media (max-width: 640px) {
    #customersPage .customers-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    #customersPage .view-toggle-buttons {
        align-self: flex-start;
    }
}

/* ============================================================================
   بطاقات العملاء — نسخة محسّنة بنفس توقيع بطاقات الطلبات (oc-card)
   شريط جانبي ملوّن يعكس مستوى العلاقة (VIP / عادي / جديد / بدون طلبات)
   ============================================================================ */

#customersPage .customers-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}
/* على الهواتف الضيّقة جداً (<360px) لا يتّسع العمود الواحد للحدّ الأدنى 310px،
   فيطرد minmax(310px,1fr) الشبكة ويسبب تمريراً أفقياً للصفحة كاملة. نُحلّه
   بإفلات العمود ليتمدّد/يتقلّص مع الحاوية (min 0) فيبقى صفّ واحد مرن. */
@media (max-width: 360px) {
    #customersPage .customers-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

/* تلوين حسب مستوى العميل — يُغذّي الشارة وهالة التحويم */
#customersPage .cc-card[data-cc='vip'] {
    --cc-band: var(--tier-vip);
    --cc-band-bg: var(--tier-vip-bg);
}
#customersPage .cc-card[data-cc='regular'] {
    --cc-band: var(--primary);
    --cc-band-bg: color-mix(in srgb, var(--primary) 12%, transparent);
}
#customersPage .cc-card[data-cc='new'] {
    --cc-band: var(--new-text, #5d87ff);
    --cc-band-bg: var(--new-bg, #efe5ff);
}
#customersPage .cc-card[data-cc='inactive'] {
    --cc-band: var(--text-secondary, #888);
    --cc-band-bg: color-mix(in srgb, var(--text-secondary, #888) 14%, transparent);
}

/* رأس البطاقة: أفاتار + اسم + مستوى */
#customersPage .cc-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-inline-start: 10px;
}

#customersPage .cc-name-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
#customersPage .cc-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#customersPage .cc-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* شارة مستوى العميل (chip) — مرآة .oc-chip: خلفية الرقاقة من --cc-band-bg
   (نظير «خلفية شارة VIP» في محرّر الثيم — كان الرمز معرّفاً بلا مستهلك فلا
   أثر لتغييره) + نقطة صلبة بلون المستوى. */
#customersPage .cc-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: var(--cc-band-bg, color-mix(in srgb, var(--cc-band, var(--primary)) 24%, var(--surface-solid)));
    white-space: nowrap;
}
#customersPage .cc-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cc-band, var(--primary));
}
/* تصغير الشارة داخل رأس البطاقة (كما في .oc-top .oc-chip) لتُفسح مكان الاسم. */
#customersPage .cc-top .cc-chip {
    padding: 4px 9px;
    font-size: 11px;
    gap: 5px;
}
#customersPage .cc-top .cc-chip::before {
    width: 5px;
    height: 5px;
}

/* صفوف المعلومات (هاتف / مدينة / تفاصيل) */
#customersPage .cc-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    padding-inline-start: 10px;
}
#customersPage .cc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-main);
    min-width: 0;
}
#customersPage .cc-row .ico {
    width: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#customersPage .cc-row .value {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
#customersPage .cc-row .value.phone {
    direction: ltr;
    text-align: right;
    letter-spacing: 0.01em;
    font-weight: 600;
}
#customersPage .cc-row .value.secondary {
    color: var(--text-secondary);
}
#customersPage .cc-row .sep {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* تذييل: عدد الطلبات + تاريخ الإضافة.
   لا نضيف padding-inline-start إضافياً (مثل cc-top/cc-rows) كي ينطبق التذييل
   على نفس نمط شقيقتها .oc-card: المحتوى على هامش البطاقة الطبيعي (16px)
   من الجانبين، والفاصل العلوي (border-top) يبدأ من نفس حافة المحتوى بدل
   أن «يبرز» 10px ناحية الشريط الملوّن. كانت القيمة الزائدة تُحدث asymmetry
   بين جانبَي التذييل (البداية 26px / النهاية 16px) وتفصله عن .oc-foot. */
#customersPage .cc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-main);
}
#customersPage .cc-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
#customersPage .cc-stat-label {
    font-size: 10.5px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
#customersPage .cc-stat-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
}
#customersPage .cc-stat-value.is-zero {
    color: var(--text-secondary);
}
/* التاريخ أسفل اسم العميل (داخل .cc-sub) — يرث حجمه/لونه من .cc-sub، ونضيف
   فقط tabular-nums لمحاذاة الأرقام. */
#customersPage .cc-sub-date {
    font-variant-numeric: tabular-nums;
}

/* أزرار الإجراءات الأيقونية (تعديل + حذف) — مرآة .oc-actions داخل التذييل.
   التنسيق العام للزرّ في .card-act (components.css)؛ هذا فقط الحاوية. صارت داخل
   التذييل (لا كتلة منفصلة أسفل البطاقة) لتماثل بطاقة الطلب تماماً. */
#customersPage .cc-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* تجميع أزرار الإجراءات (تعديل/حذف) وزر الإرسال معاً في نهاية التذييل (مرآة
   .oc-foot-right)، في مقابل كتلة عدد الطلبات في بدايته. يلتفّان معاً عند ضيق
   المساحة. */
#customersPage .cc-foot-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* زر الإرسال داخل التذييل: مدمج وهادئ كزر واتساب في بطاقة الطلب — رقاقة
   أخضر ناعم (خلفية شفّافة + أيقونة خضراء) بدل الزر الأخضر الصاخب الممتلئ
   بعرض البطاقة. !important يلغي الأنماط المضمّنة من whatsappSplitButton. */
#customersPage .cc-send {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}
#customersPage .cc-send .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;
}
#customersPage .cc-send .wa-action-btn:hover {
    background: var(--wa-primary, #25d366) !important;
    color: #fff !important;
    border-color: var(--wa-primary, #25d366) !important;
    transform: none;
}
#customersPage .cc-send .wa-action-btn.wa-icon-only {
    padding: 0 8px;
}
#customersPage .cc-send .wa-action-btn > button {
    height: 100%;
}
#customersPage .cc-send .wa-action-btn svg {
    width: 14px;
    height: 14px;
}

/* ===== تكيف مع الوضع الليلي ===== */
/* البطاقة بلا حدّ وتعتمد --surface-solid (معتمة في الوضع الليلي كذلك) فلا نتجاوز
   خلفيتها. نبقي فقط تليين ألوان مستويات العميل للتباين على السطح الداكن. */
body.dark-mode #customersPage .cc-card[data-cc='vip'] {
    --cc-band: var(--tier-vip-soft);
    --cc-band-bg: rgba(241, 199, 91, 0.15);
}
body.dark-mode #customersPage .cc-card[data-cc='new'] {
    --cc-band: #b19bff;
    --cc-band-bg: rgba(177, 155, 255, 0.15);
}
body.dark-mode #customersPage .cc-card[data-cc='inactive'] {
    --cc-band: #6b7280;
    --cc-band-bg: rgba(107, 114, 128, 0.18);
}

body.dark-mode #customersPage .cc-foot {
    border-top-color: var(--border-main);
}

/* ============================================================================
   الجدول — ستايل نظيف بنفس توقيع .orders-list (رؤوس بحروف كبيرة متباعدة،
   صفوف مريحة، hover ناعم، شريط جانبي رفيع ملوّن حسب مستوى العميل).
   ============================================================================ */

#customersPage .customers-table-wrapper {
    /* سطح صلب (--surface-solid) مطابق لجدول الطلبات وللبطاقات: لا يتبع
       شفافية البطاقات وإلا صار الجدول «فاتحاً» وغير أبيض عند ضبط صورة خلفية. */
    background: var(--surface-solid);
    border: none;
    border-radius: var(--pane-radius);
    box-shadow: var(--shadow-sm);
    /* تمرير أفقي متى ضاقت الحاوية عن عرض الجدول الأدنى (min-width: 720px).
       كان overflow:hidden يقصّ الأعمدة الزائدة بدل إتاحة تمريرها جانبياً (حتى
       على الجوال لم يكن يوجد overflow-x:auto إطلاقاً). الزوايا الدائرية تظل
       مقصوصة لأن border-radius مع overflow≠visible يقصّ المحتوى. */
    overflow-x: auto;
    margin-bottom: 18px;
    -webkit-overflow-scrolling: touch;
}

#customersPage .customers-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 720px;
}

/* ترويسة الجدول: مطابقة حرفياً لجدول الطلبات (خلفية فاتحة + حدّ سفلي رفيع). */
#customersPage .customers-table 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);
    text-align: right;
    white-space: nowrap;
}
#customersPage .customers-table thead th:last-child {
    width: 80px;
    text-align: center;
}

/* رؤوس قابلة للفرز — الترويسة ثابتة كجدول الطلبات: لا تغيّر لوناً ولا خلفية
   عند التحويم (كان اللون يتحوّل أبيض فيختفي النص على الخلفية الفاتحة). أيقونة
   الفرز مُثبَّتة مطلقاً في طرف الخلية مع حجز مساحة لها كي لا تتداخل مع اسم العمود
   في الأعمدة الضيقة (عدد الطلبات/التاريخ/المدينة). نستخدم محدِّداً عالي النوعية
   (th.sortable-header) كي يغلب قاعدة padding العامة على thead th. */
#customersPage .customers-table thead th.sortable-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-inline-end: 18px;
}
#customersPage .customers-table .sort-icon {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    line-height: 1;
    opacity: 0.6;
    pointer-events: none;
}
/* لا أيّ تأثير تحويم إطلاقاً (حتى على الجوال) — الترويسة ثابتة كجدول الطلبات. */
#customersPage .customers-table thead th.sortable-header:hover {
    color: var(--text-title);
    background: var(--table-header-bg);
}

/* الصفوف: مطابقة لجدول الطلبات — صفوف صلبة، zebra، hover ناعم. مؤشّر مستوى
   العميل هو الشريط العمودي .cc-band في أول عمود (مرآة .oc-band في الطلبات). */
#customersPage .customers-table tbody tr {
    border-bottom: 1px solid var(--table-row-border);
    transition: background-color 0.18s ease;
    background-color: var(--table-row-solid);
}
#customersPage .customers-table tbody tr:nth-child(even) {
    background: var(--table-row-alt-bg, transparent);
}
#customersPage .customers-table tbody tr:last-child {
    border-bottom: none;
}

#customersPage .customers-table tbody tr:hover {
    background: var(--table-row-hover-bg);
}
#customersPage .customers-table tbody tr.clickable-row:hover {
    background: color-mix(in srgb, var(--primary) 4%, var(--table-row-hover-bg));
}

/* خلايا الجدول — مطابقة لجدول الطلبات: حشو مريح، حجم 13.5px، وزن افتراضي
   (المميَّزات كالاسم/رقم الصف تحدّد وزنها صراحةً على عناصرها). */
#customersPage .customers-table tbody td {
    padding: var(--table-cell-padding);
    text-align: right;
    color: var(--table-row-text, var(--text-main));
    vertical-align: middle;
    font-size: 13.5px;
    font-family: var(--app-font-family);
}
/* أول خلية (الشريط الملوّن + الرقم) تبدأ من inline-start كجدول الطلبات؛
   الخلية الأخيرة (واتساب) تُوسَط. */
#customersPage .customers-table tbody td:last-child {
    text-align: center;
}

/* === أول عمود: شريط ملوّن + رقم الصف (مرآة order-id-cell / oc-band في الطلبات) ===
   الشريط العمودي cc-band يدلّ على مستوى العميل (مميز/نشط/جديد/خامل) تماماً كما
   يدلّ oc-band على حالة الطلب في صفحة الطلبات. الرقم بخط mono عريض ليطابق توقيع
   معرّف الطلب. الخلية تبدأ من inline-start (بلا توسيط) كجدول الطلبات. */
#customersPage .customers-table .customer-id-cell {
    white-space: nowrap;
    vertical-align: middle;
    font-family: var(--app-mono-family);
    font-weight: 700;
    color: var(--text-title);
    padding-inline-start: 16px;
}
#customersPage .customers-table .cc-id-wrap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
#customersPage .customers-table .cc-id-text {
    font-variant-numeric: tabular-nums;
}
#customersPage .customers-table .cc-band {
    display: inline-block;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--cc-band, var(--primary));
}
/* ألوان المستوى تُضبط كمتغيّر --cc-band على الصف، فيكتفي cc-band بمصدر واحد
   (مرآة آلية oc-band مع --oc-band على البطاقة). */
#customersPage .customers-table tbody tr[data-cc='vip'] {
    --cc-band: var(--tier-vip);
}
#customersPage .customers-table tbody tr[data-cc='regular'] {
    --cc-band: var(--primary);
}
#customersPage .customers-table tbody tr[data-cc='new'] {
    --cc-band: var(--new-text, #5d87ff);
}
#customersPage .customers-table tbody tr[data-cc='inactive'] {
    --cc-band: #9ca3af;
}

/* اسم العميل: مرآة عمود العميل في الطلبات (customer-name-cell / ot-cust) —
   الخلية table-cell عادية بقصّ ellipsis، والمحتوى الداخلي flex. بلا نقطة مستوى
   (الشريط cc-band يحمل المؤشّر اللوني الآن). */
#customersPage .customers-table .customer-name {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
#customersPage .customers-table .customer-name .cc-cust {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    max-width: 100%;
}
#customersPage .customers-table .customer-name .cc-cust-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--text-title);
    font-size: 13.5px;
}

/* رقم الهاتف: ltr، حجم مناسب، ثانوي خفيف */
#customersPage .customer-phone {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}

/* المدينة/التفاصيل: قطع نظيف */
#customersPage .customer-address,
#customersPage .customer-address-details {
    color: var(--text-secondary);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

/* شارة عدد الطلبات — pill نظيفة بنفس أسلوب الحالة في الطلبات */
#customersPage .orders-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11.5px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
#customersPage .orders-badge.is-zero {
    background: color-mix(in srgb, var(--text-secondary, #9ca3af) 12%, transparent);
    color: var(--text-secondary);
}

/* تاريخ الإضافة: ثانوي وصغير */
#customersPage .customer-date {
    color: var(--text-secondary);
    font-size: 11.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* تجاوب الجوال */
@media (max-width: 768px) {
    #customersPage .customers-table {
        font-size: 12px;
        min-width: 640px;
    }
    /* الترويسة لا تتقلّص على الجوال — تبقى بحجم واجهة الطلبات الثابت (13px
       وبطانة 12px 14px) كي تتطابق الترويسات عبر كل الصفحات وكل العروض. */
    #customersPage .customers-table tbody td {
        padding: 10px 8px;
    }
    #customersPage .customer-address,
    #customersPage .customer-address-details {
        max-width: 110px;
    }
}
@media (max-width: 480px) {
    #customersPage .customers-table {
        min-width: 560px;
    }
}

/* === كثافة صفحة العملاء على الجوال (≤768px) ===
   بطاقات العملاء (.cc-card) وشريط الأدوات (.ot-row) تستخدمان padding يلامس
   16-18px على الجوال. التقليص:
   - .cc-card padding 16 → 12
   - .ot-row gap 12 → 8
   - .stat-tab padding 7 13 → 6 11
   الأيقونات الدائرية 32-40px تبقى لأهداف اللمس. */
@media (max-width: 768px) {
    #customersPage .cc-card {
        padding: 12px;
    }
    #customersPage .customers-cards {
        gap: 16px;
    }
    #customersPage .ot-row {
        gap: 8px;
    }
    #customersPage .stat-tab {
        padding: 6px 11px;
        font-size: 10.5px;
    }
    #customersPage .customers-table tbody td {
        padding: 8px 6px;
    }
    /* عدد الطلبات وأزرار الإجراءات على سطرٍ واحد بدل تكديسهما عمودياً (مرآة
       .oc-foot على الجوال): منع الالتفاف كي لا تسقط الأزرار تحت الإحصاء. */
    #customersPage .cc-foot {
        flex-wrap: nowrap;
        gap: 10px;
    }
    #customersPage .cc-stat {
        min-width: 0;
    }
    #customersPage .cc-send .wa-action-btn {
        min-height: 36px;
        height: 36px;
    }
}
@media (max-width: 420px) {
    #customersPage .cc-card {
        padding: 10px;
    }
}

/* ====== تكيف الجدول مع الوضع الليلي ====== */
body.dark-mode #customersPage .customers-table-wrapper {
    background: var(--surface-main);
    border-color: var(--border-main);
}
body.dark-mode #customersPage .customers-table tbody tr:hover,
body.dark-mode #customersPage .customers-table tbody tr.clickable-row:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--table-row-hover-bg));
}

/* ====== زر واتساب داخل الجدول — مضغوط وهادئ =====
   الزر الافتراضي (admin-whatsapp.js) يأتي بستايل .btn-sm مع padding كبير
   وارتفاع 32px. داخل صف الجدول الذي ارتفاعه ~52px يبدو ضخماً ويهيمن بصرياً.
   نعيد ضبطه لزر مدمج 28px مع تباين أخضر ناعم بدل الأخضر الصاخب. */
#customersPage .customers-table .wa-action-btn {
    height: 28px;
    padding: 0 12px;
    font-size: 10.5px;
    font-weight: 700;
    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;
}
#customersPage .customers-table .wa-action-btn:hover {
    background: var(--wa-primary, #25d366) !important;
    color: #ffffff !important;
    border-color: var(--wa-primary, #25d366) !important;
}
#customersPage .customers-table .wa-action-btn > button {
    height: 26px;
    padding: 0 8px;
    font-size: 10.5px;
}
#customersPage .customers-table .wa-action-btn svg {
    width: 12px;
    height: 12px;
}
body.dark-mode #customersPage .orders-badge {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
body.dark-mode #customersPage .orders-badge.is-zero {
    background: color-mix(in srgb, var(--text-secondary) 16%, transparent);
    border-color: color-mix(in srgb, var(--text-secondary) 28%, transparent);
}
body.dark-mode #customersPage .customers-table tbody tr[data-cc='vip'] {
    --cc-band: var(--tier-vip-soft);
}
body.dark-mode #customersPage .customers-table tbody tr[data-cc='new'] {
    --cc-band: #b19bff;
}
body.dark-mode #customersPage .customers-table tbody tr[data-cc='inactive'] {
    --cc-band: #6b7280;
}

/* ============================================================================
   عرض القائمة — صفوف قابلة للتوسيع (مرآة design-5 في صفحة الطلبات)
   كثافة قصوى افتراضياً، وصف تفاصيل مدمج يُكشف/يُخفى بزر دائري (بدل المودال
   للاطّلاع السريع). محصور بـ #customersPage وتحت .ot-expandable. مطابق لجدول
   الطلبات تماماً (نفس البنية، نفس التأثير).
   ============================================================================ */
#customersPage .customers-table-wrapper.ot-expandable .ot-toggle-th {
    width: 48px;
    padding: 0;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-toggle-cell {
    width: 48px;
    padding-inline-start: 14px;
    padding-inline-end: 4px;
    text-align: center;
    vertical-align: middle;
}
#customersPage .customers-table-wrapper.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;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-toggle:hover,
#customersPage .customers-table-wrapper.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;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-toggle svg {
    transition: transform 0.2s ease;
}
/* السهم يدور للأسفل عند الفتح (مؤشر توسيع عام لا يعتمد على اتجاه RTL) */
#customersPage .customers-table-wrapper.ot-expandable .ot-main.is-open .ot-toggle svg,
#customersPage .customers-table-wrapper.ot-expandable .ot-toggle.is-open svg {
    transform: rotate(90deg);
}
#customersPage .customers-table-wrapper.ot-expandable .ot-main.is-open .ot-toggle {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}

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

/* صف التفاصيل: مطوي افتراضياً، يُكشف بإضافة .is-open */
#customersPage .customers-table-wrapper.ot-expandable .ot-detail {
    display: none;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-detail.is-open {
    display: table-row;
}
#customersPage .customers-table-wrapper.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)));
}
#customersPage .customers-table-wrapper.ot-expandable .ot-detail-inner {
    padding: 16px 18px 18px;
    animation: otDetailIn 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    #customersPage .customers-table-wrapper.ot-expandable .ot-detail-inner {
        animation: none;
    }
    #customersPage .customers-table-wrapper.ot-expandable .ot-toggle svg {
        transition: none;
    }
}

/* شبكة التفاصيل: تسمية/قيمة، أعمدة مرنة تتكيّف مع العرض */
#customersPage .customers-table-wrapper.ot-expandable .ot-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px 22px;
    margin-bottom: 14px;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-dt-item {
    min-width: 0;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-dt-lbl {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-dt-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    line-height: 1.5;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-dt-val > .ot-dt-sub {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 1px;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-dt-link {
    color: var(--primary);
    text-decoration: none;
}
#customersPage .customers-table-wrapper.ot-expandable .ot-dt-link:hover {
    text-decoration: underline;
}

/* الإجراءات داخل التفاصيل */
#customersPage .customers-table-wrapper.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) {
    #customersPage .customers-table-wrapper.ot-expandable .ot-detail-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    #customersPage .customers-table-wrapper.ot-expandable .ot-detail-actions {
        gap: 6px;
    }
}
@media (max-width: 768px) {
    #customersPage .customers-table-wrapper.ot-expandable .ot-detail-inner {
        padding: 14px;
    }
}

/* ============================================================================
   شريط الأدوات الجديد v2 (Customers) — مرآة لصفحة الطلبات.
   البادئة .ot-* نفسها لتوافق الـ JS الموحّد، مع بعض الفروقات الخاصة بالعملاء.
   ============================================================================ */

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

/* ===== بحث «Dock» (مرآة صفحة الطلبات): دائرة مطويّة تتوسّع لحقل، وتطوى عند
   فقدان التركيز بنص فارغ. التبديل عبر [data-collapsed] على وعاء .ot-search. ===== */
#customersPage .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;
}
#customersPage .ot-search:hover,
#customersPage .ot-search:focus-within {
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border-color: var(--border-main);
}
#customersPage .ot-search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex: 0 0 18px;
}
#customersPage .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;
}
#customersPage .ot-search input::placeholder {
    color: var(--text-secondary);
}
/* الحالة المطوية: دائرة كاملة كباقة الحالة */
#customersPage .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;
}
#customersPage .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);
}
/* زر الأيقونة: يُنسّف تنسيق الزر الافتراضي، يبقى مرئياً مطويّاً فقط */
#customersPage .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;
}
#customersPage .ot-search[data-collapsed='false'] .ot-search-trigger {
    pointer-events: none;
}
#customersPage .ot-search[data-collapsed='true'] #customersSearchInput {
    width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
/* الحالة الموسّعة: حقل بِلّي */
#customersPage .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;
}
#customersPage .ot-search[data-collapsed='false'] #customersSearchInput {
    width: auto;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease 0.1s;
}
#customersPage .ot-search .ot-search-icon {
    transition: transform 0.25s ease;
}
/* زر الإغلاق (X) في الحالة الموسّعة فقط */
#customersPage .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;
}
#customersPage .ot-search .ot-search-clear svg {
    width: 14px;
    height: 14px;
}
#customersPage .ot-search .ot-search-clear:hover {
    background: color-mix(in srgb, var(--text-title) 8%, transparent);
    color: var(--text-title);
}
#customersPage .ot-search .ot-search-clear:active {
    transform: scale(0.92);
}
#customersPage .ot-search[data-collapsed='false'] .ot-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
#customersPage .ot-search[data-collapsed='false'] .ot-search-clear.is-visible {
    display: inline-flex;
}
@media (prefers-reduced-motion: reduce) {
    #customersPage .ot-search,
    #customersPage .ot-search[data-collapsed='true'],
    #customersPage .ot-search[data-collapsed='false'],
    #customersPage .ot-search .ot-search-icon,
    #customersPage .ot-search #customersSearchInput {
        transition: none !important;
    }
}

#customersPage .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;
}
#customersPage .ot-btn:hover {
    background: var(--nav-bg-hover, #ecf2ff);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-main));
}
#customersPage .ot-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
#customersPage .ot-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    flex: 0 0 16px;
}
#customersPage .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);
}
#customersPage .ot-btn-primary {
    background: var(--primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 28%, transparent);
}
#customersPage .ot-btn-primary:hover {
    background: var(--primary-hover);
    border-color: transparent;
    color: #fff;
}
#customersPage .ot-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
#customersPage .ot-btn-ghost:hover {
    background: var(--nav-bg-hover, #ecf2ff);
    color: var(--text-title);
}
#customersPage .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 للسمة. الصفر لا شارة له إطلاقاً (مرآة الطلبات). */
#customersPage .ot-badge[hidden] {
    display: none !important;
}
/* وهن احتياط: شارة بلا نصّ لا تُرسم إطلاقاً حتى لو فُقدت hidden */
#customersPage .ot-badge:empty {
    display: none !important;
}


/* زر الفلترة: أيقونة دائرية 42px مطابقة لزر الفلترة في صفحة الطلبات
   (orders-cards.css#ot-btn-filter) — بلا حشوة جانبية وبشارة عائمة فوق الزر. */
#customersPage .ot-btn-filter {
    width: 42px;
    padding: 0;
    flex: 0 0 42px;
    justify-content: center;
    border-radius: 999px;
    position: relative;
}
/* مرور ناعم مطابق لزر البحث: بئر محايد + حدّ رفيع، دون ميل لوني للأساسي. */
#customersPage .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 حتى لا تُغيّر عرضه */
#customersPage .ot-btn-filter .ot-badge {
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
}
/* مؤشر نشط — مطابق للطلبات */
#customersPage .ot-btn-filter[aria-expanded='true'] {
    background: color-mix(in srgb, var(--primary, #5b53ff) 12%, transparent);
    color: var(--primary, #5b53ff);
}

#customersPage .ot-view-wrap {
    position: relative;
}
#customersPage .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;
}
#customersPage .ot-view-trigger:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-main));
}
#customersPage .ot-view-trigger[aria-expanded='true'] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
#customersPage .ot-view-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
#customersPage .ot-view-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#customersPage .ot-view-left svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    stroke-width: 2;
    flex: 0 0 16px;
}
#customersPage .ot-view-trigger strong {
    color: var(--text-title);
    font-weight: 700;
}

/* ================================================================
   ترويسة التابات الممدّدة (xtabs) — نسخة من ترويسة الطلبات v2
   (orders-cards.css §xtabs) مقيّدة بـ #customersPage: مجموعة البحث + الفترة +
   زر الفلترة (يمين)، ومجموعة طريقة العرض قائمة/بطاقات (يسار).
   ================================================================ */
#customersPage .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%;
}
#customersPage .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 الافتراضية — مرآة الطلبات */
#customersPage .xtab svg {
    flex: none;
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}
#customersPage .xtab:hover {
    background: var(--nav-bg-hover, var(--surface-hover));
    color: var(--text-title);
}
#customersPage .xtab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
/* التسمية مطوية (عرض صفر) إلا في التاب الممدّد — قلب مكوّن ExpandableTabs */
#customersPage .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;
}
#customersPage .xtab[aria-pressed='true'] {
    background: var(--surface-hover);
    color: var(--primary);
    padding: 7px 13px;
    gap: 7px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
#customersPage .xtab[aria-pressed='true'] .xtab-label {
    width: auto;
    opacity: 1;
}
#customersPage .xsep {
    width: 1.2px;
    height: 22px;
    background: var(--border-main);
    margin: 0 4px;
    flex: none;
}
#customersPage .xsep[hidden] {
    display: none;
}
/* شريط التحكم بشقّين: مجموعة يمنى (بحث+فترة+فلترة) وفاصل مرن ومجموعة يسرى (عرض) */
#customersPage .xcontrols {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
#customersPage .xspacer {
    flex: 1;
}
/* «تعديلات القائمة»: تسكن مجموعة العرض نفسها وتظهر عند اختيار قائمة فقط.
   قاعدة [hidden] صريحة كي لا يغلبها display:flex الصريح أعلاه. */
#customersPage .xlist-adjust {
    display: flex;
    align-items: center;
    gap: 4px;
}
#customersPage .xlist-adjust[hidden] {
    display: none;
}
#customersPage .xtabs .ot-col-wrap {
    display: contents;
}

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

/* --- زرّ الفلترة كأيقونة تاب: نلغي التنسيق الدائري المستقل --- */
#customersPage .xtabs .ot-btn {
    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;
}
#customersPage .xtabs .ot-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
    color: var(--text-secondary);
}
#customersPage .xtabs .ot-btn:hover {
    background: var(--nav-bg-hover, var(--surface-hover));
    border-color: transparent;
    color: var(--text-title);
}
#customersPage .xtabs .ot-btn svg {
    color: inherit;
}
/* الحالة المفتوحة (popover): صبغة أساسية خفيفة كالتاب الممدّد */
#customersPage .xtabs .ot-btn[aria-expanded='true'] {
    background: var(--surface-hover);
    border-color: transparent;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}
#customersPage .xtabs .ot-btn[aria-expanded='true'] svg {
    color: var(--primary);
}
/* شارة عدّاد الفلاتر خارج جسم الأيقونة بزاوية سفلية بعيدة — بحلقة سطح */
#customersPage .xtabs .ot-btn-filter {
    position: relative;
}
#customersPage .xtabs .ot-btn-filter .ot-badge {
    position: absolute;
    bottom: auto;
    inset-inline-end: auto;
    top: -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);
}
/* وفي الفلاتر النشطة: الزر بوهج «المضغوط» نفسه (مرآة الطلبات) */
#customersPage .xtabs .ot-btn-filter.is-active {
    background: var(--surface-hover);
    color: var(--primary);
}
/* --- زر الأعمدة كأيقونة تاب (مرآة الطلبات): نلغي التنسيق الدائري المستقل
   (42px بئر محايد بعرض 168px) ليجلس داخل الوعاء كأيقونة بمقاس التاب نفسه --- */
#customersPage .xtabs .ot-view-trigger {
    height: auto;
    min-width: 0;
    width: auto;
    justify-content: center;
    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;
}
#customersPage .xtabs .ot-view-trigger svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
    color: var(--text-secondary);
}
#customersPage .xtabs .ot-view-trigger:hover {
    background: var(--nav-bg-hover, var(--surface-hover));
    border-color: transparent;
    color: var(--text-title);
}
/* الحالة المفتوحة (قائمة الأعمدة): صبغة أساسية خفيفة كالتاب الممدّد */
#customersPage .xtabs .ot-view-trigger[aria-expanded='true'] {
    background: var(--surface-hover);
    border-color: transparent;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}
#customersPage .xtabs .ot-view-trigger[aria-expanded='true'] svg {
    color: var(--primary);
}
/* بنود قائمة الكثافة بنمط بنود الأعمدة نفسه (مرآة الطلبات) */
#customersPage .ot-density-menu .ot-view-item {
    padding: 7px 10px;
    gap: 8px;
    font-size: 12.5px;
    border-radius: 7px;
}

/* --- الجوال: صفّ واحد قابل للسحب لكل شريط (مرآة الطلبات) --- */
@media (max-width: 720px) {
    #customersPage .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;
    }
    #customersPage .xtabs::-webkit-scrollbar {
        display: none;
    }
    #customersPage .xtab {
        padding: 5px;
        font-size: 0.75rem;
        scroll-snap-align: start;
    }
    #customersPage .xtab svg {
        width: 15px;
        height: 15px;
    }
    #customersPage .xtab[aria-pressed='true'] {
        padding: 5px 10px;
        gap: 6px;
    }
    #customersPage .xsep {
        height: 18px;
        margin: 0 2px;
    }
    #customersPage .xtabs .ot-btn,
    #customersPage .xtabs .ot-view-trigger {
        padding: 5px;
    }
    #customersPage .xtabs .ot-btn svg,
    #customersPage .xtabs .ot-view-trigger svg {
        width: 15px;
        height: 15px;
    }
    #customersPage .xtabs .ot-search {
        height: 27px;
    }
    #customersPage .xtabs .ot-search[data-collapsed='true'] {
        flex: 0 0 27px;
        width: 27px;
        min-width: 27px;
    }
    #customersPage .xtabs .ot-search[data-collapsed='false'] {
        flex: 1 1 100%;
        min-width: 140px;
    }
    #customersPage .xcontrols {
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #customersPage .xcontrols::-webkit-scrollbar {
        display: none;
    }
    #customersPage .xcontrols [data-xtgroup='mainC'] {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }
    #customersPage .xcontrols [data-xtgroup='viewC'] {
        flex: 0 0 auto;
        width: auto;
        margin-inline-start: auto;
    }
    /* حين يتمدّد البحث تُخفى مجموعة العرض مؤقتاً ليتنفس الحقل */
    #customersPage .xcontrols:has(.ot-search[data-collapsed='false']) [data-xtgroup='viewC'] {
        display: none;
    }
    /* تعديلات القائمة (الكثافة/الأعمدة) تختبئ على الجوال لتوفير الصف */
    #customersPage #otListAdjustC,
    #customersPage #otListAdjustSepC {
        display: none !important;
    }
    #customersPage .xspacer {
        display: none;
    }
}

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

/* القائمة المنبثقة + محتواها بلا حصر صفحة (#customersPage): تُنقل القائمة
   لـ <body> عند الفتح، فلو ظلّت المحدّدات محصورة لما طُبِّقت بعد النقل
   وظهرت العناصر بلا تنسيق. (الأزرار المشتركة .ot-view-* مُعرَّفة في
/* قائمة العرض المشتركة (.ot-view-*) انتقلت إلى toolbar.css —
   يُحمَّل مباشرةً بعد هذا الملف فالـcascade كما كان. */

/* ================================================================
   ✨ شريط الفلاتر النشطة (chips) — تصميم أنيق
   ================================================================ */
#customersPage .ot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    /* حدّ متّصل محايد وخلفية محايدة — مطابق لشريط الطلبات. الحدّ المتقطّط
       البنفسجي السابق كان يظهر كـ«خط منقّط» زائد أسفل البحث/الفلتر حتى عند
       غياب أي فلتر نشط، لأن display:flex كان يتجاوز خاصية hidden. */
    border-top: 1px solid var(--border-light);
    margin-top: 6px;
    background: var(--surface-hover);
    border-radius: 0 0 10px 10px;
}
/* إخفاء الحاوية عند الفراغ — يمنع ظهور «خط منقّط» فارغ أسفل شريط الأدوات
   قبل تفعيل أي فلتر، تماماً كصفحة الطلبات. */
#customersPage .ot-chips:empty {
    display: none;
}
/* إخفاء العناصر القديمة (الإبقاء على توافق خلفي) */
#customersPage .customers-toolbar:not(.customers-toolbar-v2) {
    display: none !important;
}
#customersPage .smart-search {
    display: none;
}

/* الكثافة — ثلاث درجات بمرآة صفحة الطلبات: مريح (افتراضي) · متوسط · مضغوط */
#customersPage .customers-cards.ct-density-medium .cc-card {
    padding: 13px 16px 12px;
}
#customersPage .customers-cards.ct-density-compact .cc-card {
    padding: 8px 11px 7px;
}
/* الكثافة تمسّ خلايا البيانات فقط — الترويسة (th) ثابتة دائماً بحجم الافتراضي
   المطابق لجدول الطلبات فلا يتغيّر حجم رأس الجدول باختلاف الكثافة. */
#customersPage .customers-table-wrapper.ct-density-medium td {
    padding: 10px 14px;
}
#customersPage .customers-table-wrapper.ct-density-compact td {
    padding: 5px 10px;
    font-size: 12.5px;
}

/* ============================================================
   Add Customer — مطابقة بطاقة إضافة الطلب (أغسطس 2026)
   مودال إضافة عميل يعيد استخدام لغة .ao-* (ترويسة مرحلية + بطاقات أقسام
   بيضاء فوق خلفية هادئة + تسميات طافية + زر CTA pill) ليتطابق بصرياً مع
   #addOrderModal. القواعد هنا مرآة للقواعد الموسومة بـ #addOrderModal في
   order-details.css (نفس السلوك، نطاق مختلف) كي لا تتأثّر بطاقة الطلب بأي
   تعديل لاحق على بطاقة العميل — وهو النمط المتّبع في production-costs.css.
   يتطلّب placeholder=" " على المدخلات لتعمل التسمية الطافية بـ CSS خالص.
   ============================================================ */

/* الخلفية وحجم البطاقة مطابقان لمودال الطلب (تعتيم 50% + ضباب + 640px). */
#addCustomerModal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
}
#addCustomerModal .modal-content {
    max-width: 640px;
    border-radius: 24px;
}

/* كثافة الجوال — مرآة تقليص حواف مودال الطلب. */
@media (max-width: 768px) {
    #addCustomerModal .modal-content {
        border-radius: 14px;
    }
}
@media (max-width: 480px) {
    #addCustomerModal .modal-content {
        border-radius: 12px;
    }
}

/* زر الإغلاق والإجراء بزوايا pill متناسقة. */
#addCustomerModal button {
    border-radius: 999px;
}

/* إلغاء هالة التركيز العامة (3px) داخل البطاقة لصالح حدّ primary، مرآةً
   لقاعدة #addOrderModal — حتى لا تبدو صاخبة بجانب التسمية الطافية. */
#addCustomerModal .form-input:focus,
#addCustomerModal .searchable-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary);
}

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