/* ============================================================================
   app.css — طبقة التصميم الكاملة للنظام (بديل مستقل عن Tailwind، يعمل أوفلاين)
   الفلسفة: متغيرات تصميم (Design Tokens) في :root  +  كلاسات مكوّنات واضحة.
   لتغيير هوية النظام بالكامل، عدّل المتغيرات في :root فقط.
   ============================================================================ */

:root {
  /* --- الألوان --- */
  --ink:        #12212B;   /* الحبر الأساسي / الخلفيات الغامقة */
  --ink-2:      #2C4150;   /* نص ثانوي */
  --ink-3:      #6C8394;   /* عناوين صغيرة ونصوص خفيفة */
  --surface:    #EFF2F1;   /* خلفية الصفحة */
  --card:       #FFFFFF;   /* البطاقات والفاتورة */
  --line:       #D3DBD8;   /* الخطوط الفاصلة */
  --cash:       #0E7C66;   /* لون النقد: التأكيد والدفع */
  --cash-dark:  #0A5C4B;
  --cash-soft:  #E3F0EB;
  --warn:       #C7791A;   /* تنبيه نواقص المخزون */
  --warn-soft:  #FBF0DF;
  --danger:     #B3372F;   /* حذف / خطأ */
  --danger-soft:#FBE9E7;

  /* --- الخطوط: مكدّس نظامي عربي، لا يحتاج إنترنت --- */
  --font: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Dubai", Arial, sans-serif;

  /* --- المسافات والحدود --- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;
  --tap: 48px;                              /* أصغر مقاس لمس مقبول */
  --shadow: 0 1px 2px rgba(18,33,43,.06), 0 8px 24px -12px rgba(18,33,43,.18);
  --rail-h: 60px;
}

/* ============================ الأساسيات ============================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;           /* يمنع سحب الصفحة للتحديث على الجوال */
}

button, input, select { font: inherit; color: inherit; }

/* كل الأرقام والأسعار تُعرض بترتيب لاتيني ثابت العرض حتى داخل نص عربي */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* وصول لوحة المفاتيح: حلقة تركيز واضحة دائماً */
:where(button, input, select, a, [tabindex]):focus-visible {
  outline: 3px solid var(--cash);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

/* عنوان صغير مع خط شعري — الأسلوب البصري المتكرر في النظام */
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-3); text-transform: uppercase;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============================ الشريط العلوي ============================ */
.rail {
  position: sticky; top: 0; z-index: 40;
  height: var(--rail-h);
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: var(--ink);
  color: #DCE7E4;
}

.brand { display: flex; align-items: center; gap: 9px; margin-inline-end: 6px; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand span { display: block; font-size: 10.5px; color: #7E9AA4; letter-spacing: .06em; }

.rail-tabs { display: flex; gap: 4px; margin-inline-start: auto; }

.tab {
  min-height: 40px; padding: 0 15px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: var(--r-md);
  background: transparent; color: #9DB4BC;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.tab:hover { background: rgba(255,255,255,.07); color: #E8F1EF; }
.tab[aria-selected="true"] { background: var(--cash); color: #fff; }

/* مؤشر الاتصال + عدّاد العمليات غير المزامَنة */
.link-state {
  display: inline-flex; align-items: center; gap: 7px;
  margin-inline-start: 8px; padding: 0 11px; height: 34px;
  border-radius: 999px; background: rgba(255,255,255,.08);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 0; color: #C9DAD6; cursor: pointer;
}
.link-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cash); flex: none; }
.link-state[data-state="offline"] { background: rgba(199,121,26,.18); color: #F0C689; }
.link-state[data-state="offline"] .dot { background: var(--warn); }
.link-state .pending { font-variant-numeric: tabular-nums; opacity: .8; }

/* ============================ الشاشات ============================ */
main { padding: 14px; max-width: 1600px; margin: 0 auto; }
.screen[hidden] { display: none; }

/* شاشة الكاشير: البضاعة يسار، الفاتورة يمين (قرب يد الكاشير في RTL) */
.pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 14px;
  align-items: start;
}

/* ============================ البحث والباركود ============================ */
.scan {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 12px; margin-bottom: 12px;
}

.scan-input {
  width: 100%; height: 56px;
  padding: 0 52px 0 16px;
  border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  font-size: 17px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.scan-input::placeholder { font-weight: 500; color: var(--ink-3); }
.scan-input:focus { outline: 0; border-color: var(--cash); background: #fff; }

.scan-icon {
  position: absolute; inset-inline-end: 26px; top: 30px;
  width: 22px; height: 22px; color: var(--ink-3); pointer-events: none;
}

.scan-hint { margin: 9px 2px 0; font-size: 12px; color: var(--ink-3); }
.scan-hint kbd {
  font: inherit; font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px;
}

/* ============================ شبكة المنتجات ============================ */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.tile {
  position: relative; min-height: 104px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 11px 12px;
  text-align: start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(18,33,43,.05);
  cursor: pointer;
  transition: transform .1s, border-color .15s, box-shadow .15s;
}
.tile:hover  { border-color: var(--cash); box-shadow: var(--shadow); }
.tile:active { transform: scale(.975); }
.tile:disabled { opacity: .5; cursor: not-allowed; }

.tile-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.tile-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 8px; }
.tile-price { font-size: 18px; font-weight: 800; color: var(--cash); letter-spacing: -.02em; }
.tile-qty { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.tile-qty[data-low="1"] { color: var(--warn); }
.tile-qty[data-low="2"] { color: var(--danger); }

/* ============================ الفاتورة (شريط الكاشير) ============================
   العنصر المميز في التصميم: الفاتورة تبدو كورق كاشير حقيقي —
   سطور مفصولة بخطوط منقّطة، وحافة سفلية ممزّقة، وشاشة مجموع غائرة.
   ============================================================================ */
.ticket-wrap { position: sticky; top: calc(var(--rail-h) + 14px); }

.ticket {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--rail-h) - 60px);
}

/* الحافة الممزّقة: SVG بنمط مثلثات متكرر، لونه لون الفاتورة */
.ticket-tear { display: block; fill: var(--card); filter: drop-shadow(0 2px 1px rgba(18,33,43,.10)); }

.ticket-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.ticket-no { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }

.ticket-lines { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 90px; }

.line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 9px 14px;
}
.line + .line { border-top: 1px dashed var(--line); }   /* التنقيط = ورق الكاشير */
.line-in { animation: slide-in .18s ease-out; }
@keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } }

.line-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.line-unit { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.line-total { font-size: 15px; font-weight: 800; min-width: 62px; text-align: end; letter-spacing: -.02em; }

/* مبدّل الكمية — أزرار كبيرة للّمس */
.stepper { display: flex; align-items: center; gap: 1px; background: var(--surface); border-radius: var(--r-sm); }
.stepper button {
  width: 32px; height: 32px; border: 0; background: transparent;
  font-size: 19px; font-weight: 700; color: var(--ink-2);
  cursor: pointer; border-radius: var(--r-sm); line-height: 1;
}
.stepper button:hover { background: var(--line); }
.stepper .q { min-width: 30px; text-align: center; font-size: 14px; font-weight: 800; }

.ticket-empty { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.ticket-empty svg { width: 34px; height: 34px; margin-bottom: 8px; opacity: .45; }

/* --- مجاميع الفاتورة --- */
.sums { padding: 11px 14px 0; border-top: 1px solid var(--line); }
.sum { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); padding: 3px 0; }
.sum b { font-weight: 700; }

/* --- شاشة المجموع الغائرة: العنصر الذي يُقرأ من مسافة --- */
.readout {
  margin: 11px 12px 12px;
  padding: 11px 14px 13px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #0A1720, #162831);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.07);
}
.readout .eyebrow { color: #6E8C94; }
.readout .eyebrow::after { background: rgba(255,255,255,.12); }

.readout-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.readout-value {
  font-size: clamp(2.4rem, 6.2vw, 3.3rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  color: #EDF8F4;
  text-shadow: 0 0 22px rgba(14,124,102,.45);
}
.readout-cur { font-size: 17px; font-weight: 700; color: #7FB9A8; }
.readout.bump .readout-value { animation: bump .22s ease-out; }
@keyframes bump { 0% { transform: translateY(5px); opacity: .35; } }

.ticket-actions { display: flex; gap: 8px; padding: 0 12px 13px; }

/* ============================ الأزرار ============================ */
.btn {
  min-height: var(--tap); padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .08s, border-color .15s;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-cash  { flex: 1; background: var(--cash); color: #fff; font-size: 16.5px; }
.btn-cash:hover:not(:disabled) { background: var(--cash-dark); }

.btn-ghost { background: var(--card); border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--ink-3); }

.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn-danger:hover { background: #F6DCD9; }

.btn-sm { min-height: 38px; padding: 0 13px; font-size: 13.5px; }
.btn-icon { width: var(--tap); padding: 0; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ============================ الحقول والنماذج ============================ */
.field { display: block; margin-bottom: 13px; }
.field > span {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.field input, .field select {
  width: 100%; height: 46px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--card);
}
.field input:focus, .field select:focus { outline: 0; border-color: var(--cash); }
.field small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--cash); }

/* ============================ البطاقات والجداول ============================ */
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 15px; margin-bottom: 14px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }

.table-scroll { overflow-x: auto; margin: 0 -15px -15px; padding: 0 15px 15px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: start; padding: 8px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3);
  border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
tbody td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr[data-low="true"] { background: var(--warn-soft); }
td.actions { white-space: nowrap; text-align: end; }

.pill {
  display: inline-block; padding: 2.5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: var(--surface); color: var(--ink-2);
}
.pill-warn   { background: var(--warn-soft);   color: var(--warn); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-cash   { background: var(--cash-soft);   color: var(--cash); }

/* بطاقات أرقام التقارير */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 11px; margin-bottom: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 15px; box-shadow: var(--shadow);
}
.stat .eyebrow { margin-bottom: 9px; }
.stat-value { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat-sub { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.stat-cash .stat-value { color: var(--cash); }
.stat-warn .stat-value { color: var(--warn); }

/* ============================ النوافذ المنبثقة ============================ */
dialog.sheet {
  width: min(460px, 100%);
  margin: auto; padding: 0;
  border: 0; border-radius: var(--r-lg);
  background: var(--card); color: var(--ink);
  box-shadow: 0 30px 70px -18px rgba(18,33,43,.5);
}
dialog.sheet::backdrop { background: rgba(11,23,32,.6); backdrop-filter: blur(2px); }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.sheet-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; }
.sheet-body { padding: 16px; max-height: min(66vh, 520px); overflow-y: auto; }
.sheet-foot { display: flex; gap: 9px; padding: 13px 16px; border-top: 1px solid var(--line); }
.sheet-foot .btn { flex: 1; }

/* صندوق حساب الباقي في نافذة الدفع */
.change-box {
  margin-top: 13px; padding: 13px 15px;
  border-radius: var(--r-md); background: var(--cash-soft);
  display: flex; align-items: baseline; justify-content: space-between;
}
.change-box b { font-size: 25px; font-weight: 800; color: var(--cash-dark); letter-spacing: -.03em; }
.change-box.short { background: var(--danger-soft); }
.change-box.short b { color: var(--danger); }

/* أزرار المبالغ السريعة */
.quick-cash { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.quick-cash button {
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: 14px; font-weight: 700; cursor: pointer;
}
.quick-cash button:hover { border-color: var(--cash); color: var(--cash); }

/* ============================ التنبيهات ============================ */
.toasts {
  position: fixed; inset-inline: 0; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 14px;
}
.toast {
  max-width: 440px; padding: 12px 17px;
  border-radius: var(--r-md); background: var(--ink); color: #E9F2F0;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 14px 34px -10px rgba(18,33,43,.55);
  animation: toast-up .2s ease-out;
}
@keyframes toast-up { from { opacity: 0; transform: translateY(14px); } }
.toast-ok   { background: var(--cash-dark); }
.toast-warn { background: var(--warn); color: #fff; }
.toast-err  { background: var(--danger); color: #fff; }

/* ============================ شريط الفاتورة على الجوال ============================ */
.mobile-bar { display: none; }

/* ============================ التجاوب (Responsive) ============================ */
@media (max-width: 1023px) {
  main { padding: 11px 11px 84px; }              /* مساحة لشريط الفاتورة السفلي */
  .pos { grid-template-columns: 1fr; }

  /* على الجوال: الفاتورة تختفي وتصبح شريطاً سفلياً يُفتح باللمس */
  .ticket-wrap {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    max-height: 88vh; padding: 0 9px;
    transform: translateY(101%);
    transition: transform .24s cubic-bezier(.32,.72,0,1);
  }
  .ticket-wrap[data-open="true"] { transform: translateY(0); }
  .ticket { max-height: 84vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .ticket-tear { display: none; }

  .mobile-bar {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 13px calc(9px + env(safe-area-inset-bottom));
    background: var(--ink); color: #E7F1EE;
    box-shadow: 0 -8px 24px -10px rgba(18,33,43,.5);
  }
  .mobile-bar .count {
    min-width: 30px; height: 30px; padding: 0 7px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--cash); color: #fff; font-size: 13.5px; font-weight: 800;
  }
  .mobile-bar .mb-total { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
  .mobile-bar .btn { margin-inline-start: auto; min-height: 42px; }

  .tab span { display: none; }                    /* أيقونات فقط في التبويبات */
  .tab { padding: 0 13px; }
  .brand span { display: none; }
}

@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  .field-row { grid-template-columns: 1fr; }
  .rail { padding: 0 9px; }
  .link-state .label { display: none; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================ الطباعة ============================
   مضبوطة على ورق الطابعات الحرارية 80mm. للطابعات العادية A4 بدّل
   الحجم أدناه إلى: @page { size: A4; margin: 12mm; }
   ================================================================ */
@page { size: 80mm auto; margin: 3mm; }

@media print {
  body { background: #fff; }

  /* نُخفي كل شيء ما عدا نافذة الفاتورة */
  .rail, main, .mobile-bar, .toasts, .no-print { display: none !important; }

  /* النافذة المنبثقة تُطبع كصفحة عادية بعرض الورق كاملاً */
  dialog.sheet {
    display: block !important;
    position: static; inset: auto;
    width: 100%; max-width: none; margin: 0; padding: 0;
    border: 0; box-shadow: none;
  }
  dialog.sheet::backdrop { display: none; }
  .sheet-body { max-height: none; overflow: visible; padding: 0; }

  /* شاشة المجموع الغامقة تستهلك حبراً هائلاً — نعكسها للطباعة */
  .readout { background: #fff; box-shadow: none; border: 2px solid #000; margin: 8px 0; }
  .readout-value, .readout-cur, .readout .eyebrow { color: #000; text-shadow: none; }
  .readout .eyebrow::after { background: #000; }

  .pill { border: 1px solid #000; background: #fff !important; color: #000 !important; }
}

/* ============================================================================
   طبقة الصلاحيات وشاشة الدخول  (أُضيفت في v1.1.0)
   ============================================================================ */

/* القاعدة الوحيدة التي تُخفي كل ما لا يخصّ الكاشير.
   وضع الدور على <body> يجعل الإخفاء فورياً بلا كود في كل شاشة. */
body[data-role="cashier"] .owner-only { display: none !important; }

/* ============================ شاشة الدخول ============================ */
#loginScreen {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 20px;
  background:
    radial-gradient(1100px 520px at 78% -10%, #1B3540 0%, transparent 62%),
    var(--ink);
}
#loginScreen[hidden] { display: none; }

.login-card {
  width: min(390px, 100%);
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 24px 22px 20px;
  box-shadow: 0 34px 80px -22px rgba(0,0,0,.65);
  animation: login-in .26s cubic-bezier(.32,.72,0,1);
}
@keyframes login-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.login-brand img { width: 44px; height: 44px; border-radius: 11px; }
.login-brand b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.login-brand span { font-size: 12px; color: var(--ink-3); letter-spacing: .05em; }

.login-err {
  margin: 0 0 12px; padding: 10px 13px;
  border-radius: var(--r-md);
  background: var(--danger-soft); color: var(--danger);
  font-size: 13px; font-weight: 600;
}
.login-err.hidden { display: none; }

.login-note {
  margin: 14px 0 0; font-size: 11.5px; line-height: 1.65;
  color: var(--ink-3); text-align: center;
}

/* ============================ بطاقة المستخدم ============================ */
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-inline-start: 8px; padding: 0 5px 0 11px; height: 36px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #D6E4E1;
  cursor: pointer; transition: background .15s;
}
.user-chip:hover { background: rgba(179,55,47,.24); }
.user-chip[hidden] { display: none; }

.user-chip .avatar {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cash); color: #fff;
  font-size: 12.5px; font-weight: 800;
}
.user-chip .who { text-align: start; line-height: 1.15; }
.user-chip .who b  { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.user-chip .who em { font-style: normal; font-size: 10px; color: #86A2AA; letter-spacing: .05em; }

@media (max-width: 700px) { .user-chip .who { display: none; } .user-chip { padding: 0 5px; } }

/* ============================================================================
   مسح الباركود بالكاميرا  (أُضيفت في v1.3.0)
   ============================================================================ */

/* حاوية حقل + زر كاميرا (نافذة المنتج) */
.input-with-btn { position: relative; }
.input-with-btn input { padding-inline-end: 46px; }

.cam-btn {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); border-radius: var(--r-sm);
  display: grid; place-items: center;
  transition: color .15s, background .15s;
}
.cam-btn:hover { color: var(--cash); background: var(--cash-soft); }
.cam-btn svg { width: 19px; height: 19px; }

/* زر الكاميرا فوق شريط بحث الكاشير — بجانب أيقونة الباركود الثابتة */
.scan #posCamBtn {
  position: absolute; inset-inline-end: 54px; top: 26px;
  width: 32px; height: 32px;
}

/* زر الكاميرا داخل نافذة المنتج */
.input-with-btn .cam-btn {
  position: absolute; inset-inline-end: 4px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
}

/* ============================ نافذة المسح ============================ */
.scan-sheet { width: min(440px, 100%); }

.scan-viewport {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #000; overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.scan-viewport video {
  width: 100%; height: 100%; object-fit: cover;
  /* لا انعكاس افتراضياً — الانعكاس تجميلي للكاميرا الأمامية فقط ولا يخدم
     أي غرض وظيفي هنا. الاعتماد على تخمين نوع الكاميرا لعكسها ثم تصحيح
     العكس بشرط لاحق كان غير موثوق: بعض الأجهزة لا تُبلغ عن نوع الكاميرا
     بدقة حتى مع كاميرا خلفية مؤكَّدة، فتظهر معكوسة بلا داعٍ. الافتراض
     الصحيح للاستخدام الأساسي (الكاميرا الخلفية لمسح الباركود) هو عدم
     الانعكاس؛ نعكس فقط في الحالة المؤكَّدة يقيناً أدناه. */
}
/* نعكس فقط حين يُصرّح الجهاز بوضوح أنها كاميرا أمامية — لا افتراضاً */
.scan-viewport video[data-facing="user"] { transform: scaleX(-1); }

/* إطار الاستهداف — يرشد المستخدم أين يضع الباركود */
.scan-frame {
  position: absolute; inset: 18% 10%;
  border: 2.5px solid var(--cash);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 999px rgba(0,0,0,.38);
  pointer-events: none;
  animation: scan-pulse 1.6s ease-in-out infinite;
}
@keyframes scan-pulse {
  0%, 100% { border-color: var(--cash); }
  50%      { border-color: #7FE0C4; }
}

.scan-msg {
  margin: 0; padding: 16px 18px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
  text-align: center;
}
.scan-msg.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scan-frame { animation: none; }
}

/* عكس يدوي احتياطي — يعلو أي حالة أخرى بغضّ النظر عن facingMode */
.scan-viewport video.mirror-flip { transform: scaleX(-1) !important; }

/* ============================================================================
   الصلاحيات المفصّلة  (v1.4.0)
   — القاعدة العامة owner-only تبقى لما هو للمالك حصراً (الإعدادات مثلاً)
   — perm-* تُخفى عن كل من لم يُمنح الصلاحية المقابلة (المالك ممنوح دائماً)
   ============================================================================ */
body[data-perm-products="0"] .perm-products { display: none !important; }
body[data-perm-costs="0"]    .perm-costs    { display: none !important; }
body[data-perm-reports="0"]  .perm-reports  { display: none !important; }

/* جدول المستخدمين في الإعدادات */
.users-table td { vertical-align: middle; }
.users-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--cash); cursor: pointer; }
.users-table .u-role { font-size: 11px; color: var(--ink-3); }

/* ============================================================================
   تسليم الصندوق  (v1.7.0)
   ============================================================================ */
body[data-auth="out"] #handoverBtn { display: none; }
.ho-unseen td { background: var(--cash-soft); }
@media (max-width: 700px) { #handoverBtn .ho-label { display: none; } }

/* زر سداد الدين — كزر التسليم: أيقونة فقط على الجوال، ومخفي قبل الدخول */
body[data-auth="out"] #repayBtn { display: none; }
@media (max-width: 700px) { #repayBtn .rp-label { display: none; } }