/* صفحة التوثيق — موجَّهة للجوال، بطاقات كبيرة وأزرار عريضة */

.wrap { max-width: 640px; margin: 0 auto; padding: 0 14px 50px }
.topbar-in { max-width: 640px }

.count { margin-inline-start: auto; font-size: 13px; color: #b9c6d1 }
.count b { color: #fff; font-size: 16px }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); margin: 14px 0; padding: 16px 16px 14px;
}
.name { font-size: 20px; font-weight: 800; margin: 0 0 10px }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 14px }
.cell { background: #F7F9FB; border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px }
.cell .k { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 2px }
.cell .v { font-size: 15px; font-weight: 700 }
.cell.full { grid-column: 1 / -1 }
.trk { font-family: ui-monospace, monospace }

.attach {
  width: 100%; padding: 15px; border-radius: 12px; background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.attach:hover { background: var(--brand-2) }
.attach:active { transform: translateY(1px) }
.attach[disabled] { opacity: .5; cursor: not-allowed; transform: none }

.hint { text-align: center; color: var(--muted); font-size: 12.5px; margin: 10px 0 0 }
.empty-note { padding: 50px 20px; font-size: 15px }

/* زر الإلغاء الحقيقي — النسخة القديمة كانت تعيد فتح الكاميرا فوراً بلا مخرج */
.linkbtn {
  margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: underline; background: none; border: none; width: 100%;
}
.linkbtn:hover { color: var(--ink) }

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr }
}

/* ============================================================
   طبقة الكاميرا والماسح — منقولة من docs-scanner
   القواعد الأساسية (.btn و .gate و .toast و .hide) في theme.css
   ============================================================ */

:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- الشاشات الكاملة ---------- */
.screen {
  position: fixed; inset: 0; z-index: 60; background: #0B0F14; color: #fff;
  display: none; flex-direction: column; overscroll-behavior: contain;
}
.screen.on { display: flex }

/* ---------- الكاميرا ---------- */
.cam-head {
  display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-t) + 10px) 12px 10px; background: rgba(0, 0, 0, .55);
}
.cam-title { flex: 1; text-align: center; font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.icon-btn { width: 44px; height: 44px; border: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; flex: none; cursor: pointer }
.icon-btn:active { background: rgba(255,255,255,.24) }
.icon-btn[hidden] { display: none }
.icon-btn.on { background: #F5C518; color: var(--ink) }

.cam-stage { flex: 1; position: relative; overflow: hidden; background: #000 }
/* contain لا cover: مع cover يرى العامل قصّاً مركزياً من الإطار، فيؤطّر الإيصال
   على مشهد أضيق مما يُلتقط فعلاً — وتصل للخادم صورة فيها حافة طاولة لم يرها.
   contain يجعل ما يُرى هو ما يُلتقط بالضبط، ويجعل طبقة المضلّع تنطبق 1:1. */
#camVideo { width: 100%; height: 100%; object-fit: contain; display: block }
/* الأبعاد تُضبط من docs.js لتطابق مستطيل الفيديو المعروض داخل الحاوية */
#camOverlay { position: absolute; top: 0; left: 0; pointer-events: none }

/* إطار إرشادي بأربع زوايا يساعد العامل على التوسيط.
   يظهر فقط حين يتعذّر الكشف الحيّ (جهاز بطيء أو متصفح قديم)؛ فحين يعمل
   الكشف يصير مضلّع الحواف الفعلي هو الدليل، وإطاران معاً يشوّشان لا أكثر. */
.cam-guide { position: absolute; inset: 9% 7%; pointer-events: none; transition: opacity .25s }
.cam-guide span { position: absolute; width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.55); border-radius: 4px }
.cam-stage.live-on .cam-guide { opacity: 0 }
.cam-guide span:nth-child(1) { top: 0; inset-inline-start: 0; border-bottom: none; border-inline-end: none }
.cam-guide span:nth-child(2) { top: 0; inset-inline-end: 0; border-bottom: none; border-inline-start: none }
.cam-guide span:nth-child(3) { bottom: 0; inset-inline-start: 0; border-top: none; border-inline-end: none }
.cam-guide span:nth-child(4) { bottom: 0; inset-inline-end: 0; border-top: none; border-inline-start: none }

.cam-foot { padding: 14px 16px calc(var(--safe-b) + 20px); background: rgba(0,0,0,.55); text-align: center }
.cam-tip { font-size: 12.5px; color: #C8D6E0; margin-bottom: 12px; min-height: 19px }
/* زر التصوير في المنتصف تماماً مهما اتّسع الزر الجانبي */
.cam-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.cam-side, .cam-side-spacer { flex: 1 1 0; min-width: 0 }
.cam-side { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; color: #C8D6E0; font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 8px 4px; border-radius: 12px; cursor: pointer }
.cam-side:active { background: rgba(255,255,255,.14) }
.shutter { width: 74px; height: 74px; border-radius: 50%; background: transparent; border: 4px solid #fff; display: grid; place-items: center; margin: 0 auto; flex: none; cursor: pointer }
.shutter i { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: block; transition: transform .1s }
.shutter:active i { transform: scale(.88) }
.shutter:disabled { opacity: .45 }

/* ---------- القص ---------- */
.crop-head { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 12px) 14px 12px; background: #111820; border-bottom: 1px solid #1E2833 }
.crop-title { flex: 1; text-align: center; font-size: 13px; color: #C8D6E0; line-height: 1.35 }
.txt-btn { background: none; border: none; font-family: inherit; font-size: 15.5px; font-weight: 700; color: #C8D6E0; padding: 6px 8px; flex: none; cursor: pointer }
.txt-btn.strong { color: #39C1BC }
/* يوازن العرض حين لا يوجد زر مقابل، فيبقى العنوان في المنتصف */
.txt-btn-spacer { flex: none; width: 56px }

.crop-stage { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; padding: 10px; touch-action: none }
#cropCanvas { max-width: 100%; max-height: 100%; display: block; border-radius: 6px }
/* الأبعاد تُضبط من docs.js لتطابق مستطيل الـcanvas بالضبط.
   لا نستخدم inset:0 هنا: مع dir=rtl يتجاهل المتصفح left عند تعارضه مع right. */
#cropOverlay { position: absolute; top: 0; left: 0; pointer-events: none }
#cropPoly { fill: rgba(57,193,188,.16); stroke: #39C1BC; stroke-width: 2.5; stroke-linejoin: round }
.handle { fill: #fff; stroke: var(--brand); stroke-width: 3 }
.handle-hit { fill: transparent; pointer-events: all; cursor: grab; touch-action: none }

.crop-foot { display: flex; gap: 8px; padding: 12px 12px calc(var(--safe-b) + 16px); background: #111820 }
.tool { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 6px; border: none; border-radius: 12px; background: rgba(255,255,255,.08); color: #E6EDF3; font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer }
.tool:active { background: rgba(255,255,255,.18) }
.tool.on { background: var(--brand); color: #fff }
.tool.wide { flex-direction: row; gap: 8px; font-size: 13.5px; padding: 12px }

/* ---------- المراجعة ---------- */
.review-stage { flex: 1; overflow: auto; display: grid; place-items: center; background: #0B0F14; padding: 8px; -webkit-overflow-scrolling: touch }
#reviewImg { max-width: 100%; display: block; border-radius: 6px }
.review-foot { background: #111820; padding: 14px 16px calc(var(--safe-b) + 16px) }
/* سؤال التأكيد أبرز عنصر: هو الحاجز الوحيد أمام إرفاق إيصال لشحنة خطأ */
.rev-confirm { font-size: 17px; font-weight: 800; line-height: 1.45; margin-bottom: 6px }
.rev-confirm b { color: #39C1BC }
.rev-name { font-size: 13.5px; font-weight: 600; color: #C8D6E0; margin-bottom: 2px }
.rev-hint { font-size: 12px; color: #8C9BA8; margin-bottom: 12px }
.rev-tools { display: flex; gap: 8px; margin-bottom: 12px }
/* ثنائي الإجابة: رمادي للنفي وأخضر للإيجاب — نفس تمييز النسخة الأصلية */
.rev-answer { display: flex; gap: 10px }
.rev-answer .btn { width: auto; flex: 1; font-size: 16px; padding: 15px }

/* ---------- مؤشر الانشغال ---------- */
.busy { position: fixed; inset: 0; background: rgba(11,15,20,.72); z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; font-size: 14.5px; font-weight: 600 }
.busy.on { display: flex }
.spin { width: 38px; height: 38px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: rn-spin .8s linear infinite }
@keyframes rn-spin { to { transform: rotate(360deg) } }

/* شريط إعادة الرفع — الصورة محفوظة في الجهاز حتى ينجح الرفع */
.retry-bar { display: flex; align-items: center; gap: 10px; background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: 13.5px; font-weight: 600 }
.retry-bar button { margin-inline-start: auto; background: var(--danger); color: #fff; border: none; font-family: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 9px; white-space: nowrap; cursor: pointer }
.card.pending { opacity: .55; pointer-events: none }