/* أحجام 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, indigo/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
       (indigo) 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;

    --lux-accent: #4F46E5;
    --lux-accent-dark: #4338CA;
    --lux-accent-light: #EEF2FF;

    --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. */
}

.dark{
    --lux-ink: #E9EBF3;
    --lux-muted: #9AA3B5;
    --lux-border: #2A3040;
    --lux-surface: #1B2030;
    --lux-bg: #12151F;
    --lux-accent-light: rgba(79,70,229,.16);
}

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: #9CA3AF;
}
.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(79,70,229,.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 indigo/blue (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. ---------- */
.bg-primary-50{ background-color: #EEF2FF !important; }
.bg-primary-200{ background-color: #C7D2FE !important; }
.bg-primary-500{ background-color: #6366F1 !important; }
.bg-primary-600{ background-color: #4F46E5 !important; }
.border-primary-500{ border-color: #6366F1 !important; }
.border-primary-600{ border-color: #4F46E5 !important; }
.text-primary-50{ color: #EEF2FF !important; }
.text-primary-400{ color: #818CF8 !important; }
.text-primary-500{ color: #6366F1 !important; }
.text-primary-600{ color: #4F46E5 !important; }
.text-primary-700{ color: #4338CA !important; }
.ring-primary-500{ --tw-ring-color: #6366F1 !important; }
.focus-within\:border-primary-500:focus-within{ border-color: #6366F1 !important; }
.focus-within\:ring-primary-500:focus-within{ --tw-ring-color: #6366F1 !important; }
.focus\:bg-primary-50:focus{ background-color: #EEF2FF !important; }
.focus\:bg-primary-500:focus{ background-color: #6366F1 !important; }
.focus\:bg-primary-700:focus{ background-color: #4338CA !important; }
.focus\:border-primary-300:focus{ border-color: #A5B4FC !important; }
.focus\:border-primary-500:focus{ border-color: #6366F1 !important; }
.focus\:border-primary-600:focus{ border-color: #4F46E5 !important; }
.focus\:ring-offset-primary-700:focus{ --tw-ring-offset-color: #4338CA !important; }
.focus\:ring-primary-200:focus{ --tw-ring-color: #C7D2FE !important; }
.focus\:ring-primary-500:focus{ --tw-ring-color: #6366F1 !important; }
.focus\:ring-primary-600:focus{ --tw-ring-color: #4F46E5 !important; }
.focus\:text-primary-500:focus{ color: #6366F1 !important; }
.focus\:text-primary-600:focus{ color: #4F46E5 !important; }
.group-focus-within\:text-primary-500{ color: #6366F1 !important; }
.group-focus\:text-primary-100{ color: #E0E7FF !important; }
.group-hover\:text-primary-100{ color: #E0E7FF !important; }
.group-hover\:text-primary-500{ color: #6366F1 !important; }
.hover\:bg-primary-500:hover{ background-color: #6366F1 !important; }
.hover\:text-primary-500:hover{ color: #6366F1 !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(79,70,229,.15) !important;
}

/* ---------- Tables: light header, comfortable row height, subtle hover ---------- */
.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;
}
.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;
}

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

/* ---------- 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-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);
}
.client-info-stat-danger{ color: var(--lux-danger); }
.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);
}
.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), #6D28D9);
    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: #10B981; }
.report-row-danger { color: #F43F5E; }

.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(79, 70, 229, 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-subtitle {
    font-size: 13.5px;
    color: var(--lux-muted);
    margin: -8px 0 20px;
}

.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-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;
}

.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;
}

.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 16px;
    font-size: 13px;
    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; }

.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: #10B981;
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow: 0 2px 6px rgba(16,185,129,.35);
}

.shop-card-qty-low { background: #F59E0B; box-shadow: 0 2px 6px rgba(245,158,11,.35); }
.shop-card-qty-out { background: #F43F5E; 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 {
    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: #F43F5E; }

.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); }

.cart-line-remove {
    background: none;
    border: none;
    color: #F43F5E;
    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;
    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%;
    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: #F43F5E; 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;
}

.client-tab-chip-active.client-tab-chip-gray { background: var(--lux-ink); border-color: var(--lux-ink); color: #fff; }
.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; }