/* ============================================================
   Toolbar — مكوّنات شريط أدوات القوائم المشتركة (.ot-*)
   ============================================================
   بيت القواعد الأساسية (غير المقيّدة بصفحة) لعائلة .ot-*.
   يُحمَّل **مباشرةً بعد customers.css** حيث كانت تعيش القواعد
   الحيّة، فترتيب الـcascade مطابق لما كان بالضبط.

   ⚠️ التخصيصات المقيّدة بصفحة (#ordersPage .ot-row …) تبقى في
   ملف سطحها — هي تخصّه ولها أسبقية المعرّف على أي حال.

   ⚠️ كانت هذه الكتلة معرّفة **مرتين** (orders-cards.css و
   customers.css) وتباعدت نسختاها في .ot-view-item:hover
   (--surface-hover مقابل --nav-bg-hover). المحفوظ هنا هو
   النسخة التي كانت تفوز فعلياً (customers.css، الأحدث تحميلاً)
   فلا يتغيّر شيء بصرياً. تعديل النسخة الأخرى كان بلا أثر.
   ============================================================
   (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;
}

/* ============================================================
   أزرار الشريط ذات الخلفية البيضاء — توحيد مع زر الإشعارات
   ============================================================
   الفلترة (.ot-btn-filter) والبحث المطويّ (.ot-search[data-collapsed])
   وطريقة العرض (.ot-view-trigger / #otViewTrigger) وزر الاستعلام
   (.ot-btn-inquiry — يفتح popover ملخص حالات الطلب) كانت تستخدم بئراً
   غائراً (color-mix لـ --bg-main). المطلوب: خلفية بيضاء مطابقة لزر
   الجرس (.notification-bell → --surface-main) على كل الصفحات، ومرور
   بنفس صبغة الجرس الأساسية.
   البناء ‎body :is(#صفحة…)‎ يمنح الأسبقية معرّف الصفحة (‎1,1,1‎) فوق
   قواعد الصفحات ‎(1,1,0)‎ فتسري على كل الأسطح بغضّ النظر عن ترتيب
   التحميل، والوضع الليلي يتبعها تلقائياً لأن --surface-main مُعاير فيه أصلاً. */
body :is(#ordersPage, #productionCostsPage, #customersPage, #advertisingPage,
    #deliveryPage, #inventoryPage, #notesPage, #reportsPage, #activityLogPage,
    #settingsThemeTab) .ot-btn-filter,
body :is(#ordersPage, #productionCostsPage, #customersPage, #advertisingPage,
    #deliveryPage, #inventoryPage, #notesPage, #reportsPage, #activityLogPage,
    #settingsThemeTab) .ot-search[data-collapsed='true'],
body :is(#ordersPage, #productionCostsPage, #customersPage, #advertisingPage,
    #deliveryPage, #inventoryPage, #notesPage, #reportsPage, #activityLogPage,
    #settingsThemeTab) .ot-view-trigger,
body :is(#ordersPage, #productionCostsPage, #customersPage, #advertisingPage,
    #deliveryPage, #inventoryPage, #notesPage, #reportsPage, #activityLogPage,
    #settingsThemeTab) .ot-btn-inquiry {
    background: var(--surface-main);
}
body :is(#ordersPage, #productionCostsPage, #customersPage, #advertisingPage,
    #deliveryPage, #inventoryPage, #notesPage, #reportsPage, #activityLogPage,
    #settingsThemeTab) .ot-btn-filter:hover,
body :is(#ordersPage, #productionCostsPage, #customersPage, #advertisingPage,
    #deliveryPage, #inventoryPage, #notesPage, #reportsPage, #activityLogPage,
    #settingsThemeTab) .ot-search[data-collapsed='true']:hover,
body :is(#ordersPage, #productionCostsPage, #customersPage, #advertisingPage,
    #deliveryPage, #inventoryPage, #notesPage, #reportsPage, #activityLogPage,
    #settingsThemeTab) .ot-view-trigger:hover,
body :is(#ordersPage, #productionCostsPage, #customersPage, #advertisingPage,
    #deliveryPage, #inventoryPage, #notesPage, #reportsPage, #activityLogPage,
    #settingsThemeTab) .ot-btn-inquiry:hover {
    /* مرور الجرس: صبغة أساسية خفيفة بدل البئر الرمادي */
    background: color-mix(in srgb, var(--primary) 9%, var(--surface-main));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-main));
}

/* ============================================================
   ✨ زر «إعدادات الجدول» (الجوال) — ترس في خلية زاوية الترويسة
   ============================================================
   نمط صفحة الطلبات مُعمَّم على كل الأسطح صاحبة جدول (العملاء · التوصيل ·
   الحملات · تكاليف الإنتاج · المخزون): على الجوال (≤720px) يظهر زر ترس
   دائري في خلية زاوية الترويسة (فوق سهم توسيع الصف) يفتح القائمة الموحّدة
   ‎.ot-table-settings-menu (كثافة العرض + إظهار الأعمدة). خارج الجوال
   يبقى مخفياً وتسكن التعديلات في «تعديلات القائمة» بشريط الأدوات.
   (صفحة الطلبات لديها نسختها المقيّدة بصفحتها في orders-cards.css —
   القيم نفسها، فلا تعارض cascade.) */
.ot-table-settings-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}
.ot-table-settings-btn svg {
    width: 16px;
    height: 16px;
}
.ot-table-settings-btn:hover,
.ot-table-settings-btn[aria-expanded='true'] {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}
/* توسيط وتحاذي الترس مع دائرة التوسيع تحته: خلية الزاوية تأخذ نفس حشو
   خلية السهم (‎14px بداية/‎4px نهاية) كما في صفحة الطلبات، فيقف الزران
   عمودياً على خط واحد. البناء body :is(#صفحات…) يمنح الأسبقية فوق قواعد
   «padding: 0» الخاصة بكل صفحة مهما كان ترتيب التحميل. */
body :is(#customersPage, #deliveryPage, #advertisingPage, #productionCostsPage, #inventoryPage)
    .ot-expandable
    th.ot-toggle-th:has(> .ot-table-settings-btn) {
    vertical-align: middle;
    text-align: center;
    padding-inline-start: 14px;
    padding-inline-end: 4px;
}
@media (max-width: 720px) {
    .ot-table-settings-btn {
        display: inline-flex;
    }
}

/* تنسيق القائمة الموحّدة — بنود مضغوطة وفاصل رفيع بين قسمَي الكثافة
   والأعمدة كي تُقرأ القائمة أقساماً لا كومة بنود (مرآة orders-cards.css).
   ‎.ts-columns حاضنة بنود الأعمدة التي يبنيها renderColumnsMenu. */
.ot-table-settings-menu .ot-view-item {
    padding: 7px 10px;
    gap: 8px;
    font-size: 12.5px;
    border-radius: 7px;
}
.ot-table-settings-menu .ot-view-group-label:not(:first-child) {
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid var(--border-light);
}
.ot-table-settings-menu .ts-columns {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-main);
}