/* ============================================================================
   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: نص داكن على صبغة المستوى المكثّفة
   فوق السطح الصلب + نقطة صلبة بلون المستوى. */
#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: 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;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
#customersPage .orders-badge.is-zero {
    background: color-mix(in srgb, var(--text-secondary, #9ca3af) 12%, transparent);
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--text-secondary, #9ca3af) 22%, transparent);
}

/* تاريخ الإضافة: ثانوي وصغير */
#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;
    }
    #customersPage .customers-table thead th {
        padding: 10px 8px;
        font-size: 10px;
    }
    #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 thead th {
        padding: 8px 6px;
    }
    #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 {
    /* حاوية شفافة بلا بطاقة: عناصر التحكم (بحث/فلترة/عرض) تطفو مباشرةً على
        خلفية الصفحة، وكل عنصر يحتفظ بسطحه الخاص. مطابق لشريط الطلبات. */
    margin-bottom: 16px;
    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);
}

#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;
}
#customersPage .ot-view-caret {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    flex: 0 0 14px;
    transition: transform 0.15s ease;
}
#customersPage .ot-view-trigger[aria-expanded='true'] .ot-view-caret {
    transform: rotate(180deg);
    color: var(--primary);
}
/* زر «طريقة العرض» فقط (#otViewTriggerC): أيقونة مربّعة (42×42) مطابقة لزر
   الفلترة/البحث — بلا نص ظاهر. النص «عرض: ...» يبقى sr-only للوصولية.
   نستخدم id مزدوجاً لرفع الـ specificity فوق قواعد .ot-view-trigger العامة
   (المشتركة مع زر «الأعمدة» #otColTriggerC الذي يُبقي شكله الواسع بالنص). */
#customersPage #otViewTriggerC {
    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;
}
#customersPage #otViewTriggerC .ot-view-left {
    justify-content: center;
    gap: 0;
}
#customersPage #otViewTriggerC .ot-view-left svg {
    color: inherit;
}
#customersPage #otViewTriggerC:hover {
    background: var(--surface-hover);
}
#customersPage #otViewTriggerC[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;
}
/* القائمة المنبثقة + محتواها بلا حصر صفحة (#customersPage): تُنقل القائمة
   لـ <body> عند الفتح، فلو ظلّت المحدّدات محصورة لما طُبِّقت بعد النقل
   وظهرت العناصر بلا تنسيق. (الأزرار المشتركة .ot-view-* مُعرَّفة في
   orders-cards.css أيضاً كنسخة عامة، فلا تعارض.) */
.ot-view-menu {
    /* position:fixed (بدل absolute) حتى لا يُقيّدها أي stacking context في
       الأصل — نفس النهج المعتمد لـ .oc-status-menu. الموضع يُضبط بالـ JS. */
    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-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(--nav-bg-hover, #ecf2ff);
}
.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) — تصميم أنيق
   ================================================================ */
#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;
}

/* الكثافة المدمجة (compact) — تُطبَّق على الجدول والبطاقات */
#customersPage .customers-cards.ct-density-compact .cc-card {
    padding: 11px 14px 10px;
}
#customersPage .customers-table-wrapper.ct-density-compact th,
#customersPage .customers-table-wrapper.ct-density-compact td {
    padding: 8px 14px;
}

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