/* أحجام Tailwind الأساسية للأيقونات (h-4 w-4 ... إلخ) - Filament يحمّل
   Tailwind كاملًا فتُطبَّق هذه أصلًا داخل اللوحة، لكن صفحات خارج اللوحة
   بالكامل (بوابة الكاشير المعزولة) لا تحمّل Tailwind إطلاقًا وتعتمد
   فقط على هذا الملف - بلا هذه القيم تظهر أيقونات heroicon بحجمها
   الطبيعي الضخم (24×24 أو أكبر) بدل الحجم المقصود. نفس قيم Tailwind
   تمامًا فلا تُغيّر شيئًا داخل اللوحة نفسها.
   ========================================================================== */
.h-4{ height: 1rem; } .w-4{ width: 1rem; }
.h-5{ height: 1.25rem; } .w-5{ width: 1.25rem; }
.h-6{ height: 1.5rem; } .w-6{ width: 1.5rem; }
.h-8{ height: 2rem; } .w-8{ width: 2rem; }
.h-10{ height: 2.5rem; } .w-10{ width: 2.5rem; }
.h-12{ height: 3rem; } .w-12{ width: 3rem; }
.h-14{ height: 3.5rem; } .w-14{ width: 3.5rem; }

/* أزرار رأس الصفحة (إضافة/حفظ/تعديل...) - فيلامنت افتراضيًا يضع هذه
   الأزرار في "نهاية السطر" (يسار الصفحة في RTL) والعنوان في "بداية
   السطر" (يمين)، وهو انعكاس مرآة لتصميمه الأصلي بالإنجليزية. بطلب
   المستخدم: العنوان والأزرار يبقيان مجتمعين على اليمين معًا بدل توزيعهما
   على طرفي الصفحة. */
.filament-header{ justify-content: flex-start !important; }

/* ==========================================================================
   PANEL THEME — Clean / Light / Blue
   Modeled after a reference "cloud storage" style UI: white surfaces,
   soft light-gray page background, Microsoft-blue accent, generous
   rounded corners and spacing, light sidebar with a soft-blue active
   state. Injected on top of Filament's compiled CSS via a render hook.
   Pure presentation layer - no markup or JS behaviour depends on it.
   ========================================================================== */

:root{
    /* Design tokens per the shared RTL dashboard design system
       (sas.md): enterprise-SaaS palette, 8px spacing base, 16/20px
       card radii, soft-only shadows. The accent stays project-defined
       (Microsoft blue, #0078D4) per that spec's own "primary accent:
       project-defined"
       rule - everything else matches its exact values. */
    --lux-ink: #111827;
    --lux-muted: #6B7280;
    --lux-border: #E5E7EB;
    --lux-surface: #FFFFFF;
    --lux-bg: #F6F7FB;

    /* هوية "أزرق مايكروسوفت" (Fluent Communication Blue) بطلب الزبون
       2026-08-16 بدل الإندگو/البنفسجي الافتراضي - #0078D4 هو نفسه لون
       Azure/Outlook/Windows الأساسي، #106EBE ظله الداكن الرسمي (Shade
       10) للتدرجات وحالات hover. */
    --lux-accent: #0078D4;
    --lux-accent-dark: #106EBE;
    --lux-accent-light: #DEECF9;

    --lux-success: #22C55E;
    --lux-danger: #EF4444;
    --lux-warning: #F59E0B;

    --lux-radius-lg: 20px;
    --lux-radius: 16px;
    --lux-radius-sm: 10px;

    --lux-shadow: 0 1px 2px rgba(17,24,39,.04), 0 6px 20px rgba(17,24,39,.05);
    --lux-shadow-lg: 0 16px 40px rgba(17,24,39,.12);

    --lux-space-xs: 8px;
    --lux-space-sm: 16px;
    --lux-space-md: 24px;
    --lux-space-lg: 32px;
    /* Sidebar width (260-280px per spec) is set via
       config('filament.layout.sidebar.width') instead of here, since
       Filament renders it as an inline style that a stylesheet rule
       can't reliably win against. */

    /* Named type scale - formalizes the sizes already in use throughout
       this file (page heading, section title, card label, etc.) so any
       new component picks a value from here instead of inventing one.
       Not applied retroactively to existing rules - their current sizes
       already match these steps, this just makes the scale explicit. */
    --lux-text-xs: 11px;
    --lux-text-sm: 13px;
    --lux-text-base: 14px;
    --lux-text-lg: 16px;
    --lux-text-xl: 22px;
    --lux-text-2xl: 32px;
}

.dark{
    --lux-ink: #E9EBF3;
    --lux-muted: #9AA3B5;
    --lux-border: #2A3040;
    --lux-surface: #1B2030;
    --lux-bg: #12151F;
    /* ثغرة مصحَّحة (2026-08-16): كانت شفافة (rgba) بدل لون صلب، عكس
       النمط النهاري (#EEF2FF لون صلب باهت). لون شفاف يمتزج بلون الخلفية
       اللي خلفه - فوق --lux-bg شبه الأسود يصير التراكب بنفسجي مشبَّع
       وصريح بدل رقعة خفيفة (17 موضع بالنظام: شارات، صفوف مُبرَزة،
       أزرار ثانوية...). لون صلب داكن-بنفسجي خفيف يبقى ثابت المظهر
       بغض النظر عن الخلفية خلفه، تمامًا كالنمط النهاري. */
    --lux-accent-light: #173A56;
}

body.filament-body{
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: var(--lux-bg) !important;
    color: var(--lux-ink);
}

/* ---------- Sidebar: light, same surface as content, soft blue active state ---------- */
.filament-sidebar{
    background: var(--lux-surface) !important;
    border-color: var(--lux-border) !important;
}
.filament-sidebar-header{
    border-color: var(--lux-border) !important;
}
.sidebar-greeting{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 24px 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--lux-border);
}
.sidebar-greeting-avatar{
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--lux-accent-light);
    color: var(--lux-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
}
.sidebar-greeting-text{
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sidebar-greeting-hello{
    font-size: 11px;
    color: var(--lux-muted) !important;
}
.sidebar-greeting-name{
    font-size: 13.5px;
    font-weight: 800;
    color: var(--lux-ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filament-sidebar a,
.filament-sidebar span,
.filament-sidebar p{
    color: var(--lux-muted) !important;
}
.filament-sidebar-item{
    margin: 0 12px 2px;
}
.filament-sidebar-item a{
    border-radius: var(--lux-radius-sm) !important;
    padding: 10px 14px !important;
    transition: background .15s ease, color .15s ease !important;
}
.filament-sidebar-item a:hover{
    background: var(--lux-accent-light) !important;
}
.filament-sidebar-item a:hover span,
.filament-sidebar-item a:hover svg{
    color: var(--lux-accent) !important;
}
.filament-sidebar-item-active a{
    background: var(--lux-accent-light) !important;
    color: var(--lux-accent) !important;
}
.filament-sidebar-item-active a span,
.filament-sidebar-item-active a svg{
    color: var(--lux-accent) !important;
    font-weight: 600;
}
.filament-sidebar svg{
    color: var(--lux-muted);
}
.filament-sidebar-group{
    border-inline-start-color: var(--lux-border) !important;
}
.filament-sidebar-group p{
    font-weight: 700;
    letter-spacing: .04em;
}

/* ---------- Topbar ----------
   Used to be display:none on desktop (sidebar-toggle button is
   redundant there). Reverted: the topbar also carries Filament's toast
   notifications, global search, and user menu - display:none unmounts
   ALL of them, which silently killed every notification/error toast on
   desktop while they kept working on mobile. Keeping the bar visible
   everywhere is the only fully safe option (CSS can't selectively
   un-hide one descendant - like the notifications widget - once an
   ancestor has display:none). */
.filament-main-topbar{
    background: var(--lux-surface) !important;
    border-color: var(--lux-border) !important;
}

/* ---------- Page heading ---------- */
.filament-main-content h1,
.filament-header-heading{
    color: var(--lux-ink);
    font-weight: 800;
    font-size: 32px !important;
    line-height: 1.25 !important;
}
@media (max-width: 640px){
    .filament-main-content h1,
    .filament-header-heading{
        font-size: 22px !important;
    }
}

/* ---------- Cards / table containers ---------- */
.filament-tables-header-container{
    background: var(--lux-surface) !important;
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    box-shadow: var(--lux-shadow) !important;
    overflow: hidden;
}

/* Stat widget cards -> clean white cards, blue accent value */
.filament-stats-overview-widget-card{
    background: var(--lux-surface) !important;
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    box-shadow: var(--lux-shadow) !important;
    padding: var(--lux-space-md) !important;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.filament-stats{
    gap: var(--lux-space-md) !important;
}
a.filament-stats-overview-widget-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--lux-shadow-lg) !important;
    border-color: var(--lux-accent) !important;
}
.filament-stats-overview-widget-card .text-3xl{
    color: var(--lux-ink) !important;
    font-weight: 800 !important;
    font-size: 32px !important;
    margin-top: 4px;
}

/* Small label row (icon + text) sitting above the big number */
.filament-stats-overview-widget-card > div > div:first-child{
    color: var(--lux-muted) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Turn the inline label icon into a small colored badge, matching the
   quick-access cards' visual language, instead of a bare small glyph. */
.filament-stats-overview-widget-card > div > div:first-child svg{
    width: 30px !important;
    height: 30px !important;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--lux-accent-light);
    color: var(--lux-accent) !important;
}

/* The last card ("صافي الربح") is the headline bottom-line figure -
   given a subtle accent treatment so it reads as the summary takeaway
   of the row, without introducing a new grouping/heading. */
.dashboard-hero-stat{
    background: linear-gradient(135deg, var(--lux-accent) 0%, var(--lux-accent-dark) 100%) !important;
    border-color: var(--lux-accent-dark) !important;
}
.dashboard-hero-stat > div > div:first-child{
    color: rgba(255,255,255,.75) !important;
}
.dashboard-hero-stat > div > div:first-child svg{
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
}
.dashboard-hero-stat .text-3xl{
    color: #fff !important;
}

/* ---------- Welcome / account widget ---------- */
.filament-account-widget{
    margin-bottom: 4px;
}
.filament-account-widget .rounded-xl,
.filament-account-widget > div{
    border-radius: var(--lux-radius) !important;
    border: 1px solid var(--lux-border) !important;
    box-shadow: var(--lux-shadow) !important;
}

/* ---------- Buttons ---------- */
.filament-button{
    border-radius: var(--lux-radius-sm) !important;
    font-weight: 600 !important;
    transition: transform .1s ease, box-shadow .15s ease, filter .15s ease !important;
}
.filament-button:active{ transform: translateY(1px); }
.filament-button.bg-primary-600{
    box-shadow: 0 4px 14px rgba(0,120,212,.28);
}
.filament-button.bg-primary-600:hover{
    filter: brightness(1.08);
}

.filament-tables-link-action{
    font-weight: 600 !important;
}

/* ---------- Filament's "primary" Tailwind color scale, recompiled by
   hand to a Microsoft-blue (Fluent Communication Blue) scale (the
   installed build ships an amber scale; there is no npm build step
   here, so utility classes are overridden 1:1 instead of relying on a
   Tailwind config change). Covers buttons, focus rings, active
   nav/pagination, links and badges everywhere. Scale (2026-08-16,
   replaces the previous indigo/violet identity): 50 #DEECF9 · 200
   #C7E0F4 · 300 #9BCBEB · 400 #429CE3 · 500 #2B88D8 · 600 #0078D4 · 700
   #106EBE. ---------- */
.bg-primary-50{ background-color: #DEECF9 !important; }
.bg-primary-200{ background-color: #C7E0F4 !important; }
.bg-primary-500{ background-color: #2B88D8 !important; }
.bg-primary-600{ background-color: #0078D4 !important; }
.border-primary-500{ border-color: #2B88D8 !important; }
.border-primary-600{ border-color: #0078D4 !important; }
.text-primary-50{ color: #DEECF9 !important; }
.text-primary-400{ color: #429CE3 !important; }
.text-primary-500{ color: #2B88D8 !important; }
.text-primary-600{ color: #0078D4 !important; }
.text-primary-700{ color: #106EBE !important; }
.ring-primary-500{ --tw-ring-color: #2B88D8 !important; }
.focus-within\:border-primary-500:focus-within{ border-color: #2B88D8 !important; }
.focus-within\:ring-primary-500:focus-within{ --tw-ring-color: #2B88D8 !important; }
.focus\:bg-primary-50:focus{ background-color: #DEECF9 !important; }
.focus\:bg-primary-500:focus{ background-color: #2B88D8 !important; }
.focus\:bg-primary-700:focus{ background-color: #106EBE !important; }
.focus\:border-primary-300:focus{ border-color: #9BCBEB !important; }
.focus\:border-primary-500:focus{ border-color: #2B88D8 !important; }
.focus\:border-primary-600:focus{ border-color: #0078D4 !important; }
.focus\:ring-offset-primary-700:focus{ --tw-ring-offset-color: #106EBE !important; }
.focus\:ring-primary-200:focus{ --tw-ring-color: #C7E0F4 !important; }
.focus\:ring-primary-500:focus{ --tw-ring-color: #2B88D8 !important; }
.focus\:ring-primary-600:focus{ --tw-ring-color: #0078D4 !important; }
.focus\:text-primary-500:focus{ color: #2B88D8 !important; }
.focus\:text-primary-600:focus{ color: #0078D4 !important; }
.group-focus-within\:text-primary-500{ color: #2B88D8 !important; }
.group-focus\:text-primary-100{ color: #C7E0F4 !important; }
.group-hover\:text-primary-100{ color: #C7E0F4 !important; }
.group-hover\:text-primary-500{ color: #2B88D8 !important; }
.hover\:bg-primary-500:hover{ background-color: #2B88D8 !important; }
.hover\:text-primary-500:hover{ color: #2B88D8 !important; }

/* متغيّرات dark: مختلفة كليًا بالاسم عن الأساسية أعلاه (dark:bg-primary-600
   وليس bg-primary-600) فما كانت مغطّاة - أهمها checked:bg-primary-*
   (خانات اختيار/راديو محدَّدة بالنمط الليلي) اللي بقيت برتقالية رغم كل
   التعديلات السابقة. */
.dark .dark\:border-primary-500{ border-color: #2B88D8 !important; }
.dark .dark\:bg-primary-600{ background-color: #0078D4 !important; }
.dark .dark\:text-primary-300{ color: #9BCBEB !important; }
.dark .dark\:text-primary-700{ color: #106EBE !important; }
.dark .dark\:checked\:border-primary-600:checked{ border-color: #0078D4 !important; }
.dark .dark\:checked\:bg-primary-500:checked{ background-color: #2B88D8 !important; }
.dark .dark\:checked\:bg-primary-600:checked{ background-color: #0078D4 !important; }
.dark .dark\:hover\:text-primary-500:hover{ color: #2B88D8 !important; }
.dark .dark\:focus\:border-primary-500:focus{ border-color: #2B88D8 !important; }
.dark .dark\:focus\:text-primary-600:focus{ color: #0078D4 !important; }

/* ---------- Login page + sidebar header decorative gradients ----------
   نفس فئة ثغرة bug-023 (تظليل choices.js) - Filament يخبز هذي التدرّجات
   الزخرفية (توهّج خلفية صفحة الدخول + الخط الرفيع فوق فورم الدخول +
   نظيره أسفل شعار السايدبار) بلون عنبري (#92400e/#fef3c7/#fbbf24) مباشرة
   داخل CSS المُجمَّع وقت البناء - بلا كلاس bg-primary-* منفصل، فتتجاوز
   كل overrides الكلاسات أعلاه كليًا. استبدال مباشر للـbackground-image
   النهائي هنا (يتجاوز متغيرات --tw-gradient-* الداخلية بالكامل). */
.filament-login-page{
    background-image: radial-gradient(circle at top, #DEECF9, #fff 50%) !important;
}
.dark .filament-login-page{
    background-image: radial-gradient(circle at top, #0B3D5C, #1f2937, #111827 100%) !important;
}
.filament-login-page form:before,
.filament-sidebar-header:before{
    background-image: linear-gradient(to right, #e5e7eb, #2B88D8, #e5e7eb) !important;
}
:is(.dark .filament-login-page form):before,
:is(.dark .filament-sidebar-header):before{
    background-image: linear-gradient(to right, #374151, #2B88D8, #374151) !important;
}

/* ---------- Forms ---------- */
.filament-forms-input,
.filament-forms-textarea,
.filament-forms-select-component{
    border-radius: var(--lux-radius-sm) !important;
    border-color: var(--lux-border) !important;
    background: var(--lux-surface) !important;
    color: var(--lux-ink) !important;
}
.filament-forms-input:focus,
.filament-forms-textarea:focus{
    border-color: var(--lux-accent) !important;
    box-shadow: 0 0 0 3px rgba(0,120,212,.15) !important;
}

/* ثغرة مصحَّحة (2026-08-16): العنصر المُظلَّل (hover/كيبورد) بقائمة
   Select القابلة للبحث (choices.js) - كان برتقاليًا (#D97706) رغم كل
   تعديلات الهوية اللونية السابقة، لأن Filament يبني لونه عبر
   @apply bg-primary-600 وقت compile مباشرة داخل هذا المحدِّد المركَّب
   نفسه (vendor/filament/filament/dist/app.css) - لا يُلصَق كلاس
   bg-primary-600 منفصل على عنصر الـDOM، فتجاوز override الكلاسات
   العامة أعلاه كليًا. لازم محدِّد مطابق بالضبط هنا لتجاوزه. */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
    background-color: var(--lux-accent) !important;
    color: #fff !important;
}

/* ---------- Tables: light header, comfortable row height, subtle hover ----------
   #FAFAFC (header/hover tint) هي درجة أفتح شعرة من --lux-surface الأبيض
   بالنمط النهاري - بالنمط الليلي هذا الرقم الثابت يصير أبيض شبه كامل
   فوق سطح داكن (كارثة بصرية)، فله override مخصَّص أسفل قسم ".dark"
   بأقرب درجة "أفتح شعرة من السطح" في اللوحة الداكنة. */
.filament-tables-table thead th{
    background: #FAFAFC !important;
    color: var(--lux-muted) !important;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-color: var(--lux-border) !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.filament-tables-row{
    transition: background .12s ease;
}
.filament-tables-row td{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.filament-tables-row:hover{
    background: #FAFAFC !important;
}
.filament-tables-table tbody td{
    border-color: var(--lux-border) !important;
}
.dark .filament-tables-table thead th{
    background: #1F2433 !important;
}
.dark .filament-tables-row:hover{
    background: #1F2433 !important;
}
.filament-tables-pagination-item-active{
    background: var(--lux-accent) !important;
    border-color: var(--lux-accent-dark) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* ---------- Modals ---------- */
.filament-modal-window{
    border-radius: var(--lux-radius-lg) !important;
    box-shadow: var(--lux-shadow-lg) !important;
}

/* الإشعارات كانت تظهر خلف المودالات المفتوحة (بلاغ 2026-09-13). محاولتان
   سابقتان فشلتا: (1) رفع z-index بمفرده - لا يكفي لأن السبب الحقيقي
   ترتيب رسم Chrome الفعلي لعناصر position:fixed متداخلة بنفس شجرة
   .filament-app-layout، لا رقم z-index المطلق. (2) نقل حاوية الإشعارات
   لتصبح ابنًا مباشرًا لـ<body> عبر جافاسكربت (document.body.appendChild)
   - حلّ العرض بصريًا لكن **كسر Livewire فعليًا** (الضغط على أي زر حفظ
   بعدها توقّف بلا استجابة ولا إشعار) لأن Livewire يتتبّع عقدة DOM هذي
   بالذات ضمن شجرته الداخلية لإعادة الرسم (morphdom) - نقلها خارجيًا
   بجافاسكربت يُفقد Livewire تتبّعها فيفشل أي تحديث لاحق بصمت. الحل
   الآمن (لا يلمس DOM إطلاقًا، فقط CSS): `isolation: isolate` يجبر
   المتصفح على إنشاء سياق تكديس (stacking context) صريح ومستقل لهذا
   العنصر بمعزل عن أي تداخل مع أسلافه، فيصير ترتيب رسمه يعتمد فقط على
   z-index الرقمي النقي - نفس مبدأ transform/opacity المعروف بإنشاء
   سياقات تكديس، لكن isolation:isolate الوحيد بلا أي أثر جانبي بصري
   (transform/opacity قد يحرّكان أو يُعتّمان العنصر بالغلط).
*/
.filament-notifications{
    isolation: isolate;
    z-index: 9999 !important;
}

/* ---------- Dark/light toggle button (custom, injected via sidebar.end) ---------- */
.lux-theme-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 16px 20px;
    padding: 10px;
    border-radius: var(--lux-radius-sm);
    border: 1px solid var(--lux-border);
    background: var(--lux-bg);
    color: var(--lux-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lux-theme-toggle:hover{
    background: var(--lux-accent-light);
    color: var(--lux-accent);
}
.lux-theme-toggle svg{
    width: 16px;
    height: 16px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: #C7CCD8; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: #A6ADBD; }
.dark ::-webkit-scrollbar-thumb{ background: #363D50; }
.dark ::-webkit-scrollbar-thumb:hover{ background: #454E68; }

/* ---------- Store / new-sale page ---------- */
.store-layout{
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1024px){
    .store-layout{ grid-template-columns: 1fr; }
    .store-summary-col{ position: static; }
}

.store-summary-col{ position: sticky; top: 24px; }

.store-summary-card{
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow);
    padding: var(--lux-space-md);
}

.store-summary-title{
    font-size: 15px;
    font-weight: 800;
    color: var(--lux-ink);
    margin-bottom: 16px;
}

.store-summary-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: var(--lux-muted);
    background: var(--lux-bg);
    border: 1px dashed var(--lux-border);
    border-radius: var(--lux-radius-sm);
    padding: 28px 12px;
    font-size: 13px;
}

.store-summary-product{
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--lux-accent-light);
    border-radius: var(--lux-radius-sm);
    padding: 12px;
    margin-bottom: 14px;
}
.store-summary-product-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--lux-surface);
    color: var(--lux-accent);
    flex-shrink: 0;
}
.store-summary-product-name{
    font-weight: 700;
    color: var(--lux-ink);
    font-size: 14px;
}
.store-summary-product-meta{
    font-size: 12px;
    color: var(--lux-muted);
    margin-top: 2px;
}

.store-summary-rows{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--lux-border);
}
.store-summary-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--lux-muted);
}
.store-summary-row strong{ color: var(--lux-ink); font-weight: 700; }
.store-summary-row-total{
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px dashed var(--lux-border);
    font-size: 14px;
}
.store-summary-row-total strong{ color: var(--lux-accent); font-size: 16px; }

.store-summary-type{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.store-summary-type-label{ font-size: 13px; color: var(--lux-muted); }
.store-summary-type-badge{
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}
.store-summary-type-badge-installment{
    background: var(--lux-accent-light);
    color: var(--lux-accent);
}
.store-summary-type-badge-cash{
    background: rgba(16,185,129,.12);
    color: var(--lux-success);
}

.store-submit-btn{ width: 100%; justify-content: center; }

.store-success-banner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.25);
    color: var(--lux-success);
    border-radius: var(--lux-radius);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-weight: 600;
}
.store-success-banner-text{
    display: flex;
    align-items: center;
    gap: 10px;
}
.store-success-icon{ display: flex; }

.store-success-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lux-success);
    color: #fff;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}

.store-success-print-btn:hover { opacity: .9; color: #fff; }

/* ---------- Dashboard quick actions: large rounded buttons (icon +
   title), one click from the dashboard for the 6 most common daily
   tasks. ---------- */
.quick-actions-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--lux-space-sm);
}
@media (max-width: 900px){
    .quick-actions-grid{
        grid-auto-flow: column;
        grid-auto-columns: minmax(110px, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }
    .quick-action-btn{ scroll-snap-align: start; }
}
.quick-action-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 20px 12px;
    border-radius: var(--lux-radius);
    border: 1px solid var(--lux-border);
    background: var(--lux-surface);
    color: var(--lux-ink);
    text-decoration: none;
    box-shadow: var(--lux-shadow);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.quick-action-btn:hover{
    transform: translateY(-3px);
    box-shadow: var(--lux-shadow-lg);
    border-color: var(--lux-accent);
}
.quick-action-btn:focus-visible{
    outline: 2px solid var(--lux-accent);
    outline-offset: 2px;
}
.quick-action-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--lux-accent-light);
    color: var(--lux-accent);
}
.quick-action-label{
    font-size: 12.5px;
    font-weight: 700;
}

/* ---------- Dashboard sections: a consistent title + consistent
   vertical rhythm between every block in the main column, so the page
   reads as one flow instead of unrelated boxes stacked at random
   spacing. ---------- */
.dashboard-section-title{
    font-size: 13px;
    font-weight: 800;
    color: var(--lux-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
}

/* ---------- Trash bin page ---------- */
.trash-bin-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.trash-bin-tab{
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--lux-muted);
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.trash-bin-tab:hover{
    background: var(--lux-accent-light);
    color: var(--lux-accent);
}
.trash-bin-tab-active{
    background: var(--lux-accent);
    border-color: var(--lux-accent);
    color: #fff;
}
.trash-bin-tab-active:hover{
    background: var(--lux-accent);
    color: #fff;
}

/* ---------- Dashboard: single vertical stack (quick actions -> KPIs),
   each section carrying equal visual weight/spacing so the page reads
   as one flow. ---------- */
.dashboard-stack{
    display: flex;
    flex-direction: column;
    gap: var(--lux-space-lg);
}
.dashboard-stack > *{
    margin-bottom: 0 !important;
}

/* KPI cards: 6 equal cards, one highlighted (hero) with the brand
   accent per request. Native `title` attribute on each card doubles as
   the "full value" tooltip. */
.kpi-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--lux-space-sm);
}
@media (max-width: 1100px){
    .kpi-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
    .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
}
.kpi-card{
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow);
    padding: 16px;
    text-decoration: none;
    color: var(--lux-ink);
    cursor: default;
    transition: transform .12s ease, box-shadow .15s ease;
}
.kpi-card-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--lux-accent-light);
    color: var(--lux-accent);
}
.kpi-card-label{
    font-size: 12px;
    font-weight: 700;
    color: var(--lux-muted);
}
.kpi-card-value{
    font-size: 22px;
    font-weight: 800;
    color: var(--lux-ink);
}
.kpi-card-hero{
    background: linear-gradient(135deg, var(--lux-accent), var(--lux-accent-dark));
    border-color: var(--lux-accent-dark);
}
.kpi-card-hero .kpi-card-icon{
    background: rgba(255,255,255,.18);
    color: #fff;
}
.kpi-card-hero .kpi-card-label{ color: rgba(255,255,255,.8); }
.kpi-card-hero .kpi-card-value{ color: #fff; }

/* ---------- Combined payments card: the real "الدفعات" relation-manager
   table plus the projected/upcoming rows appended right after it,
   visually stitched into ONE seamless card instead of two separate
   boxes. The relation manager keeps its own border/shadow/radius by
   default; inside this wrapper those are stripped so only the OUTER
   wrapper shows a boundary. ---------- */
.combined-payments-card{
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow);
    overflow: hidden;
}
.combined-payments-card .filament-tables-header-container{
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.combined-payments-card .filament-tables-table{
    margin-bottom: 0 !important;
}

table.upcoming-rows-table{
    width: 100%;
    border-collapse: collapse;
}
tr.upcoming-row td{
    font-size: 14px;
    color: var(--lux-muted);
    padding: 14px 16px;
    text-align: center;
    border-top: 1px solid var(--lux-border);
    background: var(--lux-surface);
}
tr.upcoming-row:hover td{
    background: #FAFAFC;
}
.upcoming-icon-col{
    width: 32px;
}
.upcoming-icon-late{ color: var(--lux-danger); }
.upcoming-icon-soon{ color: var(--lux-warning); }
.upcoming-icon-normal{ color: var(--lux-muted); }
.upcoming-pay-btn{
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--lux-success);
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
}
.upcoming-pay-btn:hover{
    filter: brightness(0.95);
}
.op-muted-col{
    color: var(--lux-muted) !important;
    font-size: 12.5px !important;
}
.hidden-page-action{
    display: none !important;
}
.upcoming-badge{
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.upcoming-badge-late{ background: rgba(239,68,68,.1); color: var(--lux-danger); }
.upcoming-badge-soon{ background: rgba(245,158,11,.12); color: var(--lux-warning); }
.upcoming-badge-normal{ background: var(--lux-accent-light); color: var(--lux-accent); }
.upcoming-payments-note{
    font-size: 11.5px;
    color: var(--lux-muted);
    line-height: 1.6;
    padding: 10px 24px 16px;
}

/* ---------- Client info card (AppUserResource view page) ---------- */
.client-info-card{
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
    padding: var(--lux-space-md);
}
.client-info-header{
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: var(--lux-space-md);
    margin-bottom: var(--lux-space-md);
    border-bottom: 1px solid var(--lux-border);
}
.client-info-avatar{
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--lux-accent-light);
    color: var(--lux-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}
.client-info-name{
    font-size: 18px;
    font-weight: 800;
    color: var(--lux-ink);
    margin: 0 0 4px;
}
.client-info-status{
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.client-info-status-active{ background: rgba(34,197,94,.1); color: var(--lux-success); }
.client-info-status-inactive{ background: rgba(239,68,68,.1); color: var(--lux-danger); }
.client-info-status-neutral{ background: rgba(148,163,184,.15); color: var(--lux-muted); }

.client-info-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lux-space-sm) var(--lux-space-md);
    margin-bottom: var(--lux-space-md);
}
@media (max-width: 640px){
    .client-info-grid{ grid-template-columns: 1fr; }
}
.client-info-item{
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.client-info-item-full{ grid-column: 1 / -1; }
.client-info-label{
    font-size: 11px;
    color: var(--lux-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.client-info-value{
    font-size: 14px;
    color: var(--lux-ink);
    font-weight: 600;
    word-break: break-word;
}

.client-info-stats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lux-space-sm);
    padding-top: var(--lux-space-md);
    border-top: 1px solid var(--lux-border);
}
@media (max-width: 640px){
    .client-info-stats{ grid-template-columns: 1fr; }
}
.client-info-stat{
    background: var(--lux-bg);
    border-radius: var(--lux-radius-sm);
    padding: 12px;
    text-align: center;
}
.client-info-stat-value{
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--lux-ink);
}
/* "المتبقي عليه" هو الرقم الأهم بهذا الصف لموظف يحصّل ديونًا - يكبر
   قليلًا عن البقية (نفس مبدأ "hero number" المُطبَّق أصلًا بـ.kpi-card-hero). */
.client-info-stat-danger{ color: var(--lux-danger); font-size: 21px; }
.client-info-stat-success{ color: var(--lux-success); }
.client-info-stat-label{
    display: block;
    font-size: 11.5px;
    color: var(--lux-muted);
    margin-top: 4px;
}

/* ---------- Late installments page ---------- */
.late-stats-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--lux-space-sm);
    margin-bottom: var(--lux-space-md);
}
/* بطاقتا النظرة العامة بعمودين ثابتين مهما كان عرض الشاشة - منفصلتان
   عمدًا عن شبكة بطاقات درجات التأخير أسفلهما (auto-fit) حتى لا تلتف
   إحدى درجات التأخير لوحدها بسطر معزول عند أي عرض شاشة. */
.late-stats-grid-hero{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--lux-space-sm);
}
.late-stat-card{
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
    padding: var(--lux-space-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.late-stat-card-hero{
    background: linear-gradient(135deg, var(--lux-accent), #005A9E);
    border: none;
}
.late-stat-card-hero .late-stat-value,
.late-stat-card-hero .late-stat-label{
    color: #fff;
}
.late-stat-value{
    font-size: 24px;
    font-weight: 800;
    color: var(--lux-ink);
}
.late-stat-label{
    font-size: 12px;
    color: var(--lux-muted);
    font-weight: 600;
}
.late-stat-sub{
    font-size: 11px;
    color: var(--lux-muted);
    margin-top: 2px;
}
.late-stat-card-warning{ border-inline-start: 3px solid var(--lux-warning); }
.late-stat-card-danger{ border-inline-start: 3px solid var(--lux-danger); }

[x-cloak]{ display: none !important; }

/* ===== Reports pages ===== */
.report-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 700px) {
    .report-cards-grid { grid-template-columns: 1fr; }
}

.report-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 14px;
    padding: 20px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.report-card:hover {
    transform: translateY(-2px);
    border-color: var(--lux-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.report-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--lux-accent-light);
    color: var(--lux-accent);
    margin-bottom: 4px;
}

.report-card-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--lux-ink);
}

.report-card-desc {
    font-size: 13px;
    color: var(--lux-muted);
    line-height: 1.6;
}

.report-back-link {
    display: inline-block;
    font-size: 13px;
    color: var(--lux-muted);
    text-decoration: none;
    margin-bottom: 4px;
}

.report-back-link:hover { color: var(--lux-accent); }

.report-filter-card {
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 14px;
    padding: 16px 20px;
}

.report-filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.report-filter-form .filament-forms-field-wrapper { min-width: 180px; }
.report-filter-actions { display: flex; gap: 8px; align-items: center; }

.report-filter-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.report-note { font-size: 13px; color: var(--lux-muted); }

.report-rows-card {
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 14px;
    padding: 8px 0;
    overflow-x: auto;
}

.report-section-title {
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px 4px;
    color: var(--lux-ink);
}

.report-rows-table { width: 100%; border-collapse: collapse; }

.report-rows-table th {
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--lux-muted);
    padding: 10px 20px;
    border-bottom: 1px solid var(--lux-border);
}

.report-rows-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--lux-border);
    font-size: 14px;
}

.report-rows-table tbody tr:last-child td,
.report-rows-table tfoot tr td { border-bottom: none; }

.report-row-label { color: var(--lux-muted); }
.report-row-value { font-weight: 600; color: var(--lux-ink); }
.report-row-success { color: var(--lux-success); }
.report-row-danger { color: var(--lux-danger); }

.report-row-net td {
    border-top: 2px solid var(--lux-border);
    font-size: 15px;
    font-weight: 700;
}

.report-row-link { color: inherit; text-decoration: none; }
.report-row-link:hover { color: var(--lux-accent); }

/* ===== Camera barcode scanner (product serials) ===== */
.camera-scanner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lux-surface);
    border: 1px dashed var(--lux-accent);
    color: var(--lux-accent);
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.camera-scanner-btn:hover { background: rgba(0, 120, 212, 0.06); }

.camera-scanner-box {
    margin-top: 10px;
    border: 1px solid var(--lux-border);
    border-radius: 12px;
    overflow: hidden;
    max-width: 420px;
}

#serial-camera-reader { width: 100%; }

.camera-scanner-hint {
    font-size: 12px;
    color: var(--lux-muted);
    padding: 8px 12px;
    margin: 0;
}

/* ===== Products shop view ===== */
.shop-toolbar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
    padding: 10px 0 18px;
    border-bottom: 1px solid var(--lux-border);
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--lux-bg);
}

/* صف علوي واحد: البحث (الإجراء الأساسي، يأخذ المساحة المتاحة) +
   "مبيعات أخرى"/"إرجاع" كإجراءين ثانويين مضغوطين بجانبه - بدل صفين
   منفصلين بعرض كامل يزاحمان البحث بصريًا (لاحظ التدقيق الخبير الحي). */
.shop-toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.shop-toolbar-row .shop-search-wrap { flex: 1 1 240px; min-width: 0; }

.shop-search-wrap { position: relative; }

.shop-search-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--lux-muted);
    pointer-events: none;
}

.shop-search {
    width: 100%;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 12px;
    padding: 12px 42px 12px 16px;
    font-size: 14px;
    color: var(--lux-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
    /* input[type=search] بالمتصفحات المبنية على WebKit يرسم خلفية بيضاء
       ثابتة عبر chrome أصلي (native appearance) تتجاهل background هنا -
       تحييدها ضروري ليعمل الوضع الليلي على هذا الحقل. */
    -webkit-appearance: none;
    appearance: none;
}

.shop-search:focus {
    outline: none;
    border-color: var(--lux-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux-accent) 15%, transparent);
}

/* شرائط تصنيف أفقية - النمط العالمي لتصفية أحادية المعيار (فئات
منتجات): قابلة للتمرير أفقيًا على الموبايل بدل الالتفاف لأسطر عديدة. */
.shop-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    /* تمرير أفقي فعلي على اللمس (خصوصًا داخل تطبيق PWA مثبَّت standalone
    حيث overflow-x العادي وحده كان غير موثوق بالسحب باللمس) - راجع
    السكربت المرافق أسفل .shop-categories بملفَي cashier-store.blade.php
    و store.blade.php لدعم عجلة الفأرة (mouse wheel) أيضًا. */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    /* تلميح بصري إن فيه شرائح إضافية مقصوصة بالحافتين (نمط عالمي
    لأي قائمة تصفية أفقية - Airbnb، Instagram) - تدرّج شفافية ثابت
    بلا حاجة لـJS يتتبع موضع التمرير. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}

.shop-categories::-webkit-scrollbar { display: none; }

.shop-category-chip {
    flex-shrink: 0;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    color: var(--lux-muted);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.shop-category-chip:hover { border-color: var(--lux-accent); color: var(--lux-accent); }

.shop-category-chip-active {
    background: var(--lux-accent);
    border-color: var(--lux-accent);
    color: #fff;
}

.shop-category-chip-active:hover { color: #fff; }

/* زر "مبيعات أخرى" (أشياء/خدمات خارج المخزون) - بجانب البحث، بلون
   بارز مميَّز عن شرائح التصنيف حتى لا يُخلَط بها كفلتر. */
.shop-other-sale-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lux-accent-light);
    border: 1px solid var(--lux-accent);
    color: var(--lux-accent);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.shop-other-sale-btn:hover { background: var(--lux-accent); color: #fff; }

/* على الشاشات الضيقة يبقى الأيقونة فقط (+ tooltip عبر title) حتى لا
   يضغط النص على مساحة البحث - نفس فكرة "إجراء ثانوي مضغوط". */
@media (max-width: 480px) {
    .shop-other-sale-btn-label { display: none; }
    .shop-other-sale-btn { padding: 10px; }
}

.shop-results-count {
    font-size: 12.5px;
    color: var(--lux-muted);
    font-weight: 600;
    margin: -10px 0 16px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1200px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.shop-card {
    display: flex;
    flex-direction: column;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(17,24,39,.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color .15s ease;
}

.shop-card[role="button"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(17,24,39,.10);
    border-color: color-mix(in srgb, var(--lux-accent) 35%, var(--lux-border));
}

.shop-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, var(--lux-bg, #f5f6fa), color-mix(in srgb, var(--lux-accent) 6%, var(--lux-bg, #f5f6fa)));
}

.shop-card-image img { width: 100%; height: 100%; object-fit: cover; }
.shop-card-image-placeholder { color: var(--lux-muted); opacity: 0.4; }

.shop-card-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    font-size: 10.5px;
    font-weight: 800;
    background: rgba(17,24,39,.75);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
}

.shop-card-qty {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 10.5px;
    font-weight: 700;
    background: var(--lux-success);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow: 0 2px 6px rgba(16,185,129,.35);
}

.shop-card-qty-low { background: var(--lux-warning); box-shadow: 0 2px 6px rgba(245,158,11,.35); }
.shop-card-qty-out { background: var(--lux-danger); box-shadow: 0 2px 6px rgba(244,63,94,.35); }

.shop-card-body { padding: 14px; display: flex; flex-direction: column; gap: 5px; }

.shop-card-tag {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--lux-accent);
    background: color-mix(in srgb, var(--lux-accent) 10%, transparent);
    border-radius: 999px;
    padding: 2px 9px;
    margin-bottom: 2px;
}

.shop-card-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    color: var(--lux-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* توزيع الكمية بين المخازن - تظهر فقط إن كان الصنف موجودًا بأكثر من مخزن واحد */
.shop-card-warehouses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 10.5px;
    color: var(--lux-muted);
    font-weight: 600;
}

.shop-card-notes,
.shop-card-specs {
    font-size: 11.5px;
    color: var(--lux-muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--lux-border);
}

.shop-card-price { font-size: 16px; font-weight: 800; color: var(--lux-ink); }
.shop-card-price span { font-size: 10.5px; font-weight: 600; color: var(--lux-muted); }

.shop-card-btn-sell {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--lux-accent);
    color: #fff;
    transition: transform .12s ease, opacity .15s ease;
}

.shop-card[role="button"]:hover .shop-card-btn-sell { transform: scale(1.08); }
.shop-card-btn-disabled { opacity: 0.35; }

@media (max-width: 640px) {
    .shop-card-btn-sell { width: 44px; height: 44px; }
}

.shop-card-btn-sell-pop { animation: shopCardBtnPop .35s ease; }

@keyframes shopCardBtnPop {
    0% { transform: scale(1); }
    40% { transform: scale(0.8); }
    70% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--lux-muted);
    padding: 48px 0;
}

/* shop card inside "بيع جديد": whole card is clickable */
.shop-card[role="button"] { cursor: pointer; }
.shop-card-out { opacity: 0.55; }

/* ===================== واجهة نقطة بيع: عرض مقسوم ثابت =====================
   كتالوج + ملخص طلب ثابت الظهور دائمًا (مثل Square/Shopify POS)، وليس
   خلف زر عائم. على الشاشات الضيقة يتحوّل الملخص لورقة سفلية يفتحها
   شريط ثابت أسفل الشاشة (وليس فقاعة صغيرة يسهل تفويتها). */
.pos-shell {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.pos-main { flex: 1; min-width: 0; }

.pos-cart {
    flex-shrink: 0;
    width: 360px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 16px;
    box-shadow: var(--lux-shadow);
}

.pos-cart-hidden { visibility: hidden; }

.pos-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--lux-border);
    flex-shrink: 0;
}

.pos-cart-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 15px;
    color: var(--lux-ink);
}

.pos-cart-count {
    background: var(--lux-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 8px;
}

.pos-cart-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--lux-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-inline-start: auto;
}

.pos-cart-clear:hover { color: var(--lux-danger); }

.pos-cart-collapse {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--lux-bg, #f5f6fa);
    border: none;
    color: var(--lux-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.pos-cart-body {
    overflow-y: auto;
    padding: 6px 18px;
    flex: 1;
}

.pos-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--lux-muted);
    padding: 40px 12px;
    text-align: center;
}

.pos-cart-empty-hint { font-size: 12px; }

.pos-cart-footer {
    padding: 12px 18px 18px;
    border-top: 1px solid var(--lux-border);
    flex-shrink: 0;
}

.pos-cart-actions { display: flex; flex-direction: column; gap: 8px; }
.pos-cart-action-full { width: 100%; justify-content: center; }

/* الشريط السفلي الثابت (بديل السلة على الشاشات الضيقة) */
.pos-cart-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    align-items: center;
    justify-content: space-between;
    background: var(--lux-accent);
    color: #fff;
    border: none;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 -6px 20px rgba(0,0,0,.15);
}

.pos-cart-bar-info { display: flex; align-items: center; gap: 8px; }
.pos-cart-bar-total { display: flex; align-items: center; gap: 6px; }

@media (max-width: 1024px) {
    .pos-shell { display: block; }

    .pos-cart {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        width: auto;
        max-height: 80vh;
        max-height: 80dvh;
        border-radius: 20px 20px 0 0;
        z-index: 50;
        display: none;
        box-shadow: 0 -8px 30px rgba(0,0,0,.15);
    }

    .pos-cart-open { display: flex; }
    .pos-cart-collapse { display: flex; align-items: center; justify-content: center; }
    .pos-cart-bar { display: flex; }
}

.cart-line {
    padding: 12px 0;
    border-bottom: 1px solid var(--lux-border);
}

.cart-line:last-child { border-bottom: none; }

.cart-line-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cart-line-name { font-weight: 700; font-size: 13.5px; color: var(--lux-ink); cursor: pointer; }

.cart-line-cost {
    display: block;
    font-size: 11.5px;
    color: var(--lux-muted);
    margin-top: -2px;
    margin-bottom: 4px;
}

.cart-line-imeis {
    display: block;
    font-size: 11px;
    color: var(--lux-muted);
    margin-bottom: 4px;
    text-align: left;
}

.cart-line-remove {
    background: none;
    border: none;
    color: var(--lux-danger);
    font-size: 12px;
    cursor: pointer;
}

.cart-line-warehouse {
    width: 100%;
    background: var(--lux-bg);
    border: 1px solid var(--lux-border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--lux-ink);
    font-family: inherit;
    margin-bottom: 8px;
}

.cart-line-warehouse-label {
    display: inline-block;
    font-size: 11px;
    color: var(--lux-muted);
    margin-bottom: 8px;
}

.cart-line-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cart-line-qty {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--lux-border);
    border-radius: 8px;
    overflow: hidden;
}

.cart-line-qty button {
    width: 26px;
    height: 26px;
    border: none;
    background: var(--lux-bg, #f5f6fa);
    color: var(--lux-ink);
    cursor: pointer;
    font-size: 15px;
}

.cart-line-qty input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 13px;
    color: var(--lux-ink);
    background: transparent;
    /* السهمان الافتراضيان لـ type="number" كانا يزاحمان الرقم نفسه
       داخل هذا العرض الضيّق ويتداخلان مع زري +/− المخصَّصين بجانبه -
       مُستغنى عنهما هنا لوجود أزرار مخصَّصة بديلة. */
    -moz-appearance: textfield;
}

.cart-line-qty input::-webkit-outer-spin-button,
.cart-line-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-line-price {
    width: 90px;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12.5px;
    color: var(--lux-ink);
    -moz-appearance: textfield;
}

.cart-line-price::-webkit-outer-spin-button,
.cart-line-price::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-line-subtotal {
    margin-inline-start: auto;
    font-weight: 800;
    font-size: 13px;
    color: var(--lux-accent);
}

.cart-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--lux-muted);
}

.cart-total-value { font-size: 17px; font-weight: 800; color: var(--lux-ink); }

/* ===================== بوابة الكاشير: مودال دفع بسيط بلا نظام Actions ===================== */
.pos-cart-checkout-btn {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 10px;
    background: #16A34A;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.pos-cart-checkout-btn:hover { opacity: .9; }

.cashier-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.5);
    z-index: 60;
}

.cashier-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 61;
    width: 92%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--lux-surface);
    border-radius: 16px;
    box-shadow: var(--lux-shadow-lg);
}

.cashier-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--lux-border);
    font-weight: 800;
    font-size: 15px;
    color: var(--lux-ink);
}

.cashier-modal-body { padding: 16px 20px; }

.cashier-modal-summary {
    background: var(--lux-bg);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--lux-muted);
    margin-bottom: 14px;
}

.cashier-modal-summary-total { font-weight: 800; color: var(--lux-ink); margin-top: 6px; }

.cashier-modal-label { display: block; font-size: 13px; color: var(--lux-muted); margin-bottom: 6px; margin-top: 12px; }
.cashier-modal-label:first-of-type { margin-top: 0; }

.cashier-modal-input {
    width: 100%;
    /* ثغرة مصحَّحة: ما كانت تضبط background إطلاقًا - تعتمد على أبيض
       المتصفح الافتراضي، اللي يبقى صحيح بالنمط النهاري (نص داكن على
       أبيض) لكن بالنمط الليلي يصير نص فاتح (--lux-ink) على أبيض ثابت =
       غير مقروء كليًا. */
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--lux-ink);
    font-family: inherit;
}

.cashier-modal-error { color: var(--lux-danger); font-size: 12px; margin-top: 4px; }

.cashier-modal-footer {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--lux-border);
}

.cashier-modal-btn-secondary {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--lux-border);
    background: var(--lux-surface);
    color: var(--lux-muted);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.cashier-modal-btn-primary {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: var(--lux-accent);
    color: #fff;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

/* مودال "إرجاع/استبدال" - أعرض من المودالات الأخرى لأنه يحتاج مساحة
   لعرض قائمة النتائج/بنود الفاتورة. */
.cashier-modal-wide { max-width: 560px; }

.shop-returns-btn { background: rgba(245,158,11,.1); border-color: var(--lux-warning); color: var(--lux-warning); }
.shop-returns-btn:hover { background: var(--lux-warning); color: #fff; }

.returns-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    max-height: 260px;
    overflow-y: auto;
}

.returns-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--lux-bg);
    border: 1px solid var(--lux-border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: border-color .15s ease;
}

.returns-result-row:hover { border-color: var(--lux-accent); }

.returns-result-id { font-weight: 700; color: var(--lux-accent); font-size: 12.5px; }
.returns-result-name { flex: 1; color: var(--lux-ink); font-size: 13px; }
.returns-result-total { font-weight: 700; color: var(--lux-ink); font-size: 12.5px; }

.returns-empty { color: var(--lux-muted); font-size: 13px; text-align: center; padding: 20px 0; }

.returns-back-btn {
    background: none;
    border: none;
    color: var(--lux-accent);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    padding: 0 0 12px;
}

.returns-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.returns-item-row {
    border: 1px solid var(--lux-border);
    border-radius: 10px;
    padding: 10px 12px;
}

.returns-item-info { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.returns-item-name { font-weight: 700; color: var(--lux-ink); font-size: 13px; }
.returns-item-meta { color: var(--lux-muted); font-size: 11.5px; }

.returns-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.returns-item-qty {
    width: 60px;
    border: 1px solid var(--lux-border);
    border-radius: 8px;
    padding: 7px 8px;
    font-size: 13px;
    text-align: center;
    font-family: inherit;
}

.returns-item-actions .cashier-modal-btn-secondary,
.returns-item-actions .cashier-modal-btn-primary {
    flex: none;
    padding: 7px 12px;
    font-size: 12.5px;
}

.returns-item-done { color: var(--lux-success); font-size: 12px; font-weight: 600; }

/* breadcrumbs rendered inside page content (topbar is hidden on desktop) */
.page-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: -8px;
}

.page-breadcrumbs-link { color: var(--lux-accent); text-decoration: none; font-weight: 600; }
.page-breadcrumbs-link:hover { text-decoration: underline; }
.page-breadcrumbs-sep { color: var(--lux-muted); }
.page-breadcrumbs-current { color: var(--lux-muted); font-weight: 500; }

/* تبويبات تصنيف العملاء (صفحة العملاء): نفس نمط شرائح تصنيفات المتجر
   لكن بألوان دلالية لكل حالة (متأخر=أحمر، نشط=أخضر...). */
.client-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.client-tab-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border);
    color: var(--lux-muted);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.client-tab-chip:hover { border-color: var(--lux-accent); color: var(--lux-accent); }

.client-tab-count {
    background: var(--lux-bg);
    color: inherit;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 800;
}

/* ملاحظة: --lux-ink مخصَّص للنصوص (يتقلب: داكن بالنمط النهاري، فاتح
   بالليلي) - استخدامه كخلفية هنا كان يجعل الشريحة النشطة تصير بيضاء على
   بيضاء بالوضع الليلي (النص الأبيض فوق خلفية --lux-ink الفاتحة). لون
   ثابت مخصَّص (لا يتقلب مع الوضع) بدل الاعتماد على متغيّر نصي. */
.client-tab-chip-active.client-tab-chip-gray { background: #374151; border-color: #374151; color: #fff; }
.dark .client-tab-chip-active.client-tab-chip-gray { background: #4B5563; border-color: #4B5563; }
.client-tab-chip-active.client-tab-chip-danger { background: var(--lux-danger); border-color: var(--lux-danger); color: #fff; }
.client-tab-chip-active.client-tab-chip-success { background: var(--lux-success); border-color: var(--lux-success); color: #fff; }
.client-tab-chip-active.client-tab-chip-warning { background: var(--lux-warning); border-color: var(--lux-warning); color: #fff; }
.client-tab-chip-active .client-tab-count { background: rgba(255,255,255,.25); color: #fff; }

/* روابط اتصال/واتساب بجانب رقم هاتف العميل في جدول العملاء */
.app-user-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--lux-accent-light);
    color: var(--lux-accent);
    margin-inline-start: 4px;
    vertical-align: middle;
    transition: opacity .15s ease;
}

.app-user-contact-link:hover { opacity: .75; }
.app-user-contact-link-whatsapp { background: rgba(34,197,94,.12); color: #16A34A; }

/* شريط رجوع/تحديث/تقدّم PWA (راجع partials/pwa-nav-bar.blade.php) يغطي
جزءًا من الشريط الجانبي والعلوي بلوحة فيلامنت لأنهما position:fixed/
sticky مثبَّتان على أعلى نافذة العرض مباشرة (inset-y-0 / top-0) -
padding-top على body لا يؤثر عليهما إطلاقًا (لا يتبعان تدفّق body
العادي). الحل هنا: إزاحتهما 32px (ارتفاع الشريط) عند وضع standalone
تحديدًا فقط - بلا أي أثر على المتصفح العادي. */
@media (display-mode: standalone) {
    .filament-sidebar { top: 32px !important; }
    .filament-main-topbar { top: 32px !important; }
}

/* ===== صفحة المنتجات: خلايا مخصَّصة (صورة/سعر+هامش/حالة مخزون/مخازن) =====
   كل الألوان عبر متغيرات --lux-* القياسية فتتوافق مع الوضع الليلي
   تلقائيًا بلا أي عمل إضافي - راجع تعليق ".dark" أعلى الملف. */
.product-thumb {
    border-radius: 12px;
    border: 1px solid var(--lux-border);
    object-fit: cover;
    box-shadow: var(--lux-shadow);
}

.product-price-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}
.product-price-sale {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--lux-ink);
}
.product-price-currency {
    font-size: 11px;
    font-weight: 600;
    color: var(--lux-muted);
}
.product-price-cost {
    font-size: 11.5px;
    color: var(--lux-muted);
}
.product-price-margin {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.product-price-margin-positive { background: rgba(34,197,94,.12); color: var(--lux-success); }
.product-price-margin-negative { background: rgba(239,68,68,.1); color: var(--lux-danger); }

/* يمنع عمود "اسم المنتج" من فرض تمرير أفقي على حاوية الجدول عند
   الأسماء/المواصفات/الباركود الطويلة على شاشات أضيق من 1280px - يقتصر
   على صفحة المنتجات تحديدًا (لا يؤثر على أعمدة "الاسم" بموارد أخرى). */
.filament-resources-products .filament-table-cell-name {
    max-width: 200px;
}
.filament-resources-products .filament-table-cell-name .filament-tables-text-column > .inline-flex span,
.filament-resources-products .filament-table-cell-name .text-sm p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.product-stock-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}
.product-stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
}
.product-stock-count { font-weight: 800; margin-inline-start: 2px; }
.product-stock-out {
    background: rgba(239,68,68,.1);
    color: var(--lux-danger);
}
.product-stock-out .product-stock-dot { background: var(--lux-danger); }
.product-stock-low {
    background: rgba(245,158,11,.12);
    color: var(--lux-warning);
}
.product-stock-low .product-stock-dot { background: var(--lux-warning); }
.product-stock-in {
    background: rgba(34,197,94,.1);
    color: var(--lux-success);
}
.product-stock-in .product-stock-dot { background: var(--lux-success); }

.product-warehouse-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.product-warehouse-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 8px;
    background: var(--lux-bg);
    border: 1px solid var(--lux-border);
    color: var(--lux-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- صفحة تعديل منتج IMEI: عمودين (يمين تفاصيل، يسار مخزون
   IMEI) بدل تبويبات أسفل الفورم - بطلب الزبون. الصفحة RTL افتراضيًا
   (لوحة عربية)، فأول عنصر بترتيب الـDOM يظهر يمين تلقائيًا بلا حاجة
   قواعد اتجاه صريحة. ---------- */
.product-edit-columns{
    display: grid;
    /* عمود الفورم أضيق الآن (بطلب الزبون) - عرض ثابت معقول لحقل
       واحد بكل سطر (راجع تعليق product-edit-column-form أدناه لماذا
       الحقول المزدوجة صارت عمود واحد)، والباقي كله لجدول الـIMEI
       اللي يحتاج المساحة أكثر ويقل احتياجه للتمرير الأفقي. */
    grid-template-columns: 340px 1fr;
    gap: var(--lux-space-lg);
    align-items: start;
}
@media (max-width: 900px){
    .product-edit-columns{
        grid-template-columns: 1fr;
    }
}
.product-edit-column-form{
    /* بدون min-width:0 هذا العمود يتجاهل حصته من الـfr كليًا لو أي
       عنصر بداخله له min-content أعرض من الحصة - افتراضي شبكة CSS
       لعناصرها min-width:auto (أي "بعرض المحتوى مهما كان")، لا يحترم
       الـfr إطلاقًا. نفس علة عمود الجدول أدناه، بالاتجاه المعاكس. */
    min-width: 0;
}
.product-edit-column-form .grid-cols-1.lg\:grid-cols-2{
    /* الحقول المزدوجة بالفورم (الاسم+التصنيف، سعر التكلفة+سعر البيع)
       مبنية بـTailwind على "lg:grid-cols-2" - شرط يعتمد على عرض
       الشاشة الكلي لا عرض هذا العمود بالذات، فكان يفعّل عمودين رغم
       إن عمود الفورم نفسه ضيّق (340px)، فتتقلّص كل خانة إدخال لعرض
       غير قابل للاستخدام. هنا نفرضها عمود واحد دومًا (كل حقل بسطر
       لحاله) بغض النظر عن عرض الشاشة - بطلب الزبون تحديدًا لتوفير
       مساحة أكبر لجدول الـIMEI المجاور.
     */
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.product-edit-column-serials{
    /* بلا بطاقة خاصة بهذا العمود (بطلب الزبون - كان "جدول بداخل
       جدول"): جدول فيلامنت نفسه أصلًا له بطاقته الجاهزة (حدود+ظل+
       زوايا دائرية+خلفية بيضاء، راجع filament-tables-container
       بحزمة tables). إضافة بطاقة ثانية هنا حوله كانت تكرارًا بصريًا
       محضًا (حدّان متداخلان + ظلّان + padding مضاعف) يهدر المساحة
       بلا أي فائدة - أُزيلت بالكامل، الجدول الآن يملأ عرض العمود
       كاملًا ببطاقته الأصلية فقط. */
    min-width: 0;
    overflow-x: auto;
}
.product-edit-column-heading{
    margin: 0 0 var(--lux-space-sm);
    font-size: 15px;
    font-weight: 800;
    color: var(--lux-ink);
}