/* ===================================================================
   واجهة المتابعة — هاتف أولًا.

   بلا مكتبات ولا إطارات: الصفحة كلّها بضعة كيلوبايتات لأنها تُحمَّل من
   رفع خطّ المحل لا من خادمٍ عملاق. وكلّ كيلوبايت هنا يُدفع ثمنه مرّتين:
   مرّةً في الانتظار، ومرّةً في اشتراك الهاتف.
   =================================================================== */

:root {
  color-scheme: light dark;

  --bg:        #f4f6f9;
  --surface:   #ffffff;
  --line:      #dfe4ec;
  --text:      #16202f;
  --muted:     #64748b;
  --accent:    #0f766e;
  --accent-on: #ffffff;
  --chip:      #eef2f7;
  --good:      #15803d;
  --warn:      #b45309;
  --bad:       #b91c1c;
  --shadow:    0 1px 2px rgba(16, 32, 47, .06), 0 4px 14px rgba(16, 32, 47, .05);

  /* ارتفاع شريط التبويبات — يُحجز أسفل الصفحة كي لا يغطّي آخر سطر */
  --tabs-h: 58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0f172a;
    --surface:   #172032;
    --line:      #263349;
    --text:      #e6edf6;
    --muted:     #94a3b8;
    --accent:    #2dd4bf;
    --accent-on: #062925;
    --chip:      #1e293b;
    --good:      #4ade80;
    --warn:      #fbbf24;
    --bad:       #f87171;
    --shadow:    none;
  }
}

/* مبدّل السمة في المتصفح يعلو على تفضيل النظام في الاتجاهين */
:root[data-theme="dark"] {
  --bg: #0f172a; --surface: #172032; --line: #263349; --text: #e6edf6;
  --muted: #94a3b8; --accent: #2dd4bf; --accent-on: #062925; --chip: #1e293b;
  --good: #4ade80; --warn: #fbbf24; --bad: #f87171; --shadow: none;
}
:root[data-theme="light"] {
  --bg: #f4f6f9; --surface: #ffffff; --line: #dfe4ec; --text: #16202f;
  --muted: #64748b; --accent: #0f766e; --accent-on: #ffffff; --chip: #eef2f7;
  --good: #15803d; --warn: #b45309; --bad: #b91c1c;
  --shadow: 0 1px 2px rgba(16,32,47,.06), 0 4px 14px rgba(16,32,47,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Noto Naskh Arabic", "Tahoma", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

.muted { color: var(--muted); }
.small { font-size: 13px; }

.center { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }

/* ---------------------------- الدخول ---------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.login {
  width: 100%;
  max-width: 360px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent);
  text-align: center;
}
.sub { text-align: center; color: var(--muted); margin: 0 0 14px; }

/* العلامة: بلاطة سطح المكتب نفسها — صغيرةً في الترويسة وأكبر في الدخول */
.mark { width: 26px; height: 26px; flex-shrink: 0; }
.mark-lg { width: 72px; height: 72px; display: block; margin: 0 auto 8px; }

label { font-size: 14px; color: var(--muted); }

input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  min-width: 0;
}
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  font: inherit;
  font-weight: 600;
  color: var(--accent-on);
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  /* هدفٌ يُصاب بالإبهام لا بالفأرة */
  min-height: 46px;
}
button:disabled { opacity: .55; cursor: default; }
.login button { margin-top: 10px; }

.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 8px 12px;
  min-height: 0;
  font-size: 14px;
  font-weight: 500;
}

.error { color: var(--bad); font-size: 14px; margin: 12px 4px 0; }
.login .error { margin: 10px 0 0; }

/* ---------------------- شريط الأرقام القديمة -------------------- */

/*
   لا لونٌ خافت ولا حاشية صغيرة: هذا الشريط هو الفرق بين «مبيعات اليوم»
   و«مبيعات يومٍ مضى». وإخفاؤه بلطفٍ يجعل الرقم يُصدَّق.
*/
.stale-bar {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--warn);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

/* الأرقام نفسها تُخفَّف حين تكون قديمة — إشارةٌ ثانية غير الشريط */
.aged .tile .v,
.aged .ln .v,
.aged .total .v,
.aged .row .a { opacity: .72; }

/* ---------------------------- الإطار ---------------------------- */

#app {
  max-width: 680px;
  margin: 0 auto;
  /* المساحة السفلى: شريط التبويبات + حافة الهاتف الآمنة */
  padding: 0 16px calc(var(--tabs-h) + env(safe-area-inset-bottom) + 16px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top) + 10px) 0 10px;
  border-bottom: 1px solid var(--line);
}
/* سطر الهويّة فوق سطر المحل: اسم التطبيق خافتٌ وصغير، واسم المحل هو الغامق */
.brandbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.appname { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.who { min-width: 0; }
.acts { display: flex; gap: 8px; flex-shrink: 0; }
.company {
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ترويسة الورق — لا تظهر إلا في الطباعة */
#printHead { display: none; }

/* ---------------------------- المدّة ---------------------------- */

.range { padding: 14px 0 4px; }

.quick { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  background: var(--chip);
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  min-height: 0;
  font-size: 14px;
  font-weight: 500;
}
.chip.on {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.dates {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.dates input {
  padding: 8px 10px;
  font-size: 15px;
  /* حقول التاريخ تعرض yyyy-MM-dd بترتيبٍ لاتيني حتى داخل صفحة عربية */
  direction: ltr;
  text-align: center;
}

/* ------------------------- اختيار الحساب ------------------------ */

.pick {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.pick select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
  min-height: 44px;
}

/* ---------------------------- البطاقات -------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
/* البطاقة الأولى تأخذ الصف كلّه: هي السؤال الذي يُفتح التطبيق من أجله */
.tile.hero { grid-column: 1 / -1; }

.tile .k { font-size: 14px; color: var(--muted); }
.tile .v {
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: right;
}
.tile.hero .v { font-size: 38px; }
.tile .u { font-size: 14px; font-weight: 500; color: var(--muted); }

.tile.good .v { color: var(--good); }
.tile.bad  .v { color: var(--bad); }

/* ------------------------- التقرير العام ------------------------ */

.grp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 4px 16px 10px;
  margin-top: 12px;
}
.grp > h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin: 12px 0 4px;
}
.ln {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.ln:last-child { border-bottom: 0; }
.ln .k { color: var(--muted); font-size: 15px; }
.ln .v {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  white-space: nowrap;
  font-weight: 600;
}
.ln.tot {
  border-top: 2px solid var(--line);
  border-bottom: 0;
  margin-top: 4px;
  padding-top: 10px;
}
.ln.tot .k { color: var(--text); font-weight: 700; }
.ln.tot .v { font-size: 19px; font-weight: 700; }
.ln .v.good { color: var(--good); }
.ln .v.warn { color: var(--warn); }
.ln .v.bad  { color: var(--bad); }

/* ---------------------------- الجداول --------------------------- */

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.total .k { color: var(--muted); font-size: 14px; }
.total .v {
  font-size: 21px; font-weight: 700;
  font-variant-numeric: tabular-nums; direction: ltr;
}

.rows { margin-top: 12px; }

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row .t { min-width: 0; }
.row .n { font-weight: 600; overflow-wrap: anywhere; }
.row .s { font-size: 13px; color: var(--muted); }
.row .amt { text-align: left; white-space: nowrap; flex-shrink: 0; }
.row .a {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.row .b {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.row .a.good { color: var(--good); }
.row .a.bad  { color: var(--bad); }

/* صنف بلغ نقطة الطلب — علامةٌ في الشكل لا في الرقم وحده */
.row.flag .n::after {
  content: " ●";
  color: var(--warn);
  font-size: 12px;
}

.empty { color: var(--muted); text-align: center; padding: 40px 0; }
.note { color: var(--muted); font-size: 13px; text-align: center; padding: 12px 0 0; }

/* ---------------------------- التبويبات ------------------------- */

.tabs {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  /* سبعة تقارير لا تسع شاشة هاتف: تنزلق أفقيًّا، والمقصوص جزئيًّا
     على الحافّة هو ما يدلّ على أنّ وراءها المزيد */
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs button {
  flex: 0 0 auto;
  min-width: 84px;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 0;
  padding: 0 6px;
  height: var(--tabs-h);
  font-size: 14px;
  font-weight: 500;
}
.tabs button[aria-selected="true"] {
  color: var(--accent);
  font-weight: 700;
  /* الخطّ فوق لا تحته: أسفل الشريط حافة الشاشة */
  box-shadow: inset 0 3px 0 var(--accent);
}

.stale { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===================================================================
   الطباعة — وهي طريق حفظ التقرير PDF.

   لا مكتبة PDF في الخادم ولا في الصفحة: المتصفّح نفسه يُخرج PDF
   حقيقيًّا من هذه الأنماط، فيوفَّر على خطّ المحل ميغابايتات لا مقابل
   لها، ويخرج الملف بخطوط الهاتف العربية سليمةً لا صورًا.

   والألوان تُثبَّت فاتحةً هنا مهما كانت سمة الشاشة: ورقةٌ سوداء تستهلك
   حبر الطابعة، وملفٌّ أسود لا يُقرأ إذا طُبع.
   =================================================================== */

@media print {
  :root {
    --bg: #fff; --surface: #fff; --line: #b9c0cc; --text: #000;
    --muted: #444; --accent: #000; --chip: #fff;
    --good: #000; --warn: #000; --bad: #000; --shadow: none;
  }

  .topbar, .tabs, .range, .pick, #error, #loginView { display: none !important; }

  body { background: #fff; color: #000; font-size: 10.5pt; }

  #app {
    max-width: none;
    padding: 0;
    display: block !important;
  }

  #printHead {
    display: block;
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  .ph-company { font-size: 16pt; font-weight: 700; }
  .ph-title { font-size: 13pt; font-weight: 600; margin-top: 2px; }
  .ph-meta { font-size: 9pt; color: #333; margin-top: 4px; }

  /* الأرقام السالبة تفقد لونها على الورق، فيبقى القوس دليلها */
  .neg::before { content: "("; }
  .neg::after  { content: ")"; }

  .tile, .total, .grp {
    border: 1px solid #b9c0cc;
    box-shadow: none;
    break-inside: avoid;
  }
  .cards { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 0; }
  .tile { padding: 6px 8px; }
  .tile .v, .tile.hero .v { font-size: 13pt; }
  .tile.hero { grid-column: span 2; }

  .grp { margin-top: 8px; break-inside: auto; }
  .grp > h2 { font-size: 11pt; }
  .ln { padding: 3px 0; }
  .ln.tot .v { font-size: 12pt; }

  .row { padding: 5px 2px; break-inside: avoid; }
  .rows { margin-top: 6px; }

  .empty, .note { color: #333; }

  @page { size: A4; margin: 12mm; }
}

/* ============================== الجرد بالهاتف ==================== */

/*  الخانات كبيرة عمدًا: تُلمس بإبهامٍ واقفًا بين الرفوف، لا بفأرة.
    والحدُّ الأدنى 44 بكسلًا هو ما توصي به إرشادات اللمس، ودونه يُخطئ
    الإصبع فيُكتب في خانة الكمية ما هو للباركود.                       */
.count-form { display: grid; gap: .5rem; margin: .75rem 0; }
.count-form input {
  font-size: 1.25rem; padding: .7rem; min-height: 48px;
  text-align: center; letter-spacing: .04em;
}
.count-form button { min-height: 52px; font-size: 1.1rem; }

.count-row { display: grid; gap: .35rem; margin-bottom: .5rem; }
.count-row select { padding: .6rem; min-height: 46px; font-size: 1rem; }

.count-scan { width: 100%; min-height: 46px; margin-bottom: .5rem; }

/*  صدى المسح: ما عُدّ الآن. يبقى حتى المسحة التالية — البائع ينظر إليه
    بعد أن يرفع رأسه من الرفّ.                                          */
.count-echo {
  padding: .6rem .8rem; border-radius: .5rem; margin-bottom: .5rem;
  background: rgba(38,166,154,.12); font-size: 1.05rem;
}
.count-echo.bad { background: rgba(200,60,40,.12); }

/*  شريط الطابور. لونان لا ثلاثة: وصل أو لم يصل — والبائع لا يقرأ
    تدرّجًا وهو يمشي.                                                   */
.count-status { padding: .45rem .7rem; border-radius: .4rem; font-size: .95rem; }
.count-status.sent { background: rgba(48,158,106,.12); }
.count-status.waiting { background: rgba(232,137,42,.16); }

.count-list { margin-top: .75rem; display: grid; gap: .4rem; }
.count-item {
  padding: .55rem .7rem; border-radius: .45rem;
  background: rgba(0,0,0,.03);
}
.count-item.unknown { background: rgba(232,137,42,.14); }
.count-item.bad { background: rgba(200,60,40,.14); }
.count-item-name { font-weight: 600; }
.count-item-sub { font-size: .9rem; opacity: .75; }

.count-cam { margin-bottom: .5rem; display: grid; gap: .4rem; }
.count-video { width: 100%; border-radius: .5rem; background: #000; }