/* ══════════════════════════════════════════════════════════════
   نظام مطالبات الضمان — مبني على متغيّرات style.css
   كل لون هنا إما موروث من النظام، أو دلالي مضبوط ليجاور
   برتقالي العلامة دون منافسته. البرتقالي للأفعال فقط.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* حالات الطلب — نص/خلفية. مضبوطة لتبقى مقروءة وهادئة
     بجانب --primary-color، والأحمر مدفوع لعمق بعيد عنه. */
  --st-review-fg:    #55555f;  --st-review-bg:    #ececf0;
  --st-needs-fg:     #8f5a10;  --st-needs-bg:     #fbf0dc;
  --st-approved-fg:  #2b6a4b;  --st-approved-bg:  #e2efe8;
  --st-rejected-fg:  #9c2419;  --st-rejected-bg:  #f8e3e0;
  --st-completed-fg: #2a5675;  --st-completed-bg: #e3ecf3;

  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gap:  1.25rem;
}

/* ── نمط البيانات التقنية ───────────────────────────────
   الأرقام التسلسلية والمراجع تُقرأ حرفاً حرفاً وتُقارَن
   بصرياً، فتستحق خطاً أحاديّ المسافة وأرقاماً مصطفّة. */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
  letter-spacing: -0.01em;
}
.muted { color: var(--muted-foreground); font-size: 0.9375rem; }
/* .mono على خلية جدول يحوّلها inline-block فتنكسر خطوط الصف — تبقى خلية */
td.mono { display: table-cell; }

/* ── شريط العلامة ─────────────────────────────────────── */
.brandbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 0; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.brandbar-mark {
  font-weight: 800; font-size: 1.0625rem; letter-spacing: 0.18em;
  color: var(--foreground); text-decoration: none;
}
.brandbar-mark span { color: var(--primary-color); }
.brandbar-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; }

.role-chip {
  background: var(--muted); color: var(--muted-foreground);
  font-size: 0.8125rem; font-weight: 700;
  padding: 0.1875rem 0.5rem; border-radius: 0.25rem;
}
.link-plain {
  color: var(--muted-foreground); text-decoration: none; font-size: 1rem;
}
.link-plain:hover { color: var(--primary-color); }

/* ── شرائح الحالة ─────────────────────────────────────── */
.status-badge {
  display: inline-block; padding: 0.25rem 0.75rem;
  border-radius: 0.375rem; font-size: 0.9375rem; font-weight: 700;
  white-space: nowrap; line-height: 1.6;
}
.status-under_review { background: var(--st-review-bg);    color: var(--st-review-fg); }
.status-needs_info   { background: var(--st-needs-bg);     color: var(--st-needs-fg); }
.status-approved     { background: var(--st-approved-bg);  color: var(--st-approved-fg); }
.status-rejected     { background: var(--st-rejected-bg);  color: var(--st-rejected-fg); }
.status-completed    { background: var(--st-completed-bg); color: var(--st-completed-fg); }

/* ── بطاقة بيانات ─────────────────────────────────────── */
/* style.css يوسّط داخل .container؛ كل مكوّناتنا تبدأ من اليمين. */
.warranty-card, .timeline, .stat, .bar-list, .alert, .staff-nav, .status-filters {
  text-align: start;
}
.warranty-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem; margin-bottom: var(--gap);
}
.warranty-card h3 {
  margin: 0 0 1.125rem; font-size: 0.875rem; font-weight: 800;
  letter-spacing: 0.1em; color: var(--muted-foreground);
}
.warranty-card dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.625rem 1.5rem; margin: 0;
}
.warranty-card dt { color: var(--muted-foreground); font-size: 0.9375rem; }
.warranty-card dd { margin: 0; font-weight: 700; font-size: 1rem; }
/* .mono يجعل القيمة ltr inline-block فتلتصق بطرف الخلية الأيسر؛
   نعيدها لبداية السطر العربي كبقية القيم. */
.warranty-card dd.mono { justify-self: start; }
.fault-desc {
  margin: 1.125rem 0 0; padding-top: 1.125rem;
  border-top: 1px solid var(--border); font-size: 1.0625rem; line-height: 1.9;
}
.fault-desc-label { display: block; color: var(--muted-foreground); font-size: 0.9375rem; }
.fault-desc p { margin: 0.25rem 0 0; text-align: start; color: var(--foreground); }
/* ── الخط الزمني — العنصر المميّز ──────────────────────
   المسار الذي يقطعه الطلب هو جوهر هذا المنتج: سؤال العميل
   الوحيد هو «وين وصل طلبي». العقدة الحالية وحدها تحمل حلقة
   لون العلامة، وما قبلها يخفت — فيُقرأ الموقع الحالي فوراً. */
.timeline { list-style: none; margin: 0 0 var(--gap); padding: 0 1.75rem 0 0; }
.timeline li {
  position: relative; padding: 0 0 1.5rem;
  border-right: 2px solid var(--border); padding-right: 1.5rem;
}
.timeline li:last-child { border-right-color: transparent; padding-bottom: 0.25rem; }
.timeline li::before {
  content: ''; position: absolute; right: -0.4375rem; top: 0.3125rem;
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--muted-foreground); border: 2px solid var(--background);
}
/* الحدث الأحدث يُعرض أولاً، فأول عنصر هو الحالة الحالية */
.timeline li:first-child::before {
  background: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(223, 102, 53, 0.16);
}
.timeline li.is-internal::before { background: var(--st-needs-fg); }
.timeline .t-when {
  color: var(--muted-foreground); font-size: 0.875rem;
  margin-top: 0.375rem; font-variant-numeric: tabular-nums;
}
.timeline .t-note { margin-top: 0.5rem; font-size: 1.0625rem; line-height: 1.85; white-space: pre-line; }
.internal-tag {
  display: inline-block; background: var(--st-needs-bg); color: var(--st-needs-fg);
  font-size: 0.8125rem; padding: 0.125rem 0.5rem;
  border-radius: 0.25rem; font-weight: 700; margin-right: 0.375rem;
}

/* ── تنبيهات ──────────────────────────────────────────── */
.alert {
  padding: 0.9375rem 1.125rem; border-radius: var(--radius);
  margin-bottom: 1.125rem; font-size: 1.0625rem; line-height: 1.8;
  border: 1px solid transparent;
}
.alert-error   { background: var(--st-rejected-bg);  color: var(--st-rejected-fg); }
.alert-info    { background: var(--st-completed-bg); color: var(--st-completed-fg); }
.alert-success { background: var(--st-approved-bg);  color: var(--st-approved-fg); }
.alert strong  { font-weight: 800; }

.secondary-form { margin-top: 2rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.secondary-form h3 { font-size: 1rem; margin: 0 0 1rem; }

/* ── فلاتر اللوحة ─────────────────────────────────────── */
.status-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.4375rem 0.875rem; border: 1px solid var(--border);
  border-radius: 999px; font-size: 0.9375rem; color: var(--foreground);
  text-decoration: none; background: var(--card);
  transition: border-color 0.15s, color 0.15s;
}
.filter-chip span {
  background: var(--muted); border-radius: 999px;
  padding: 0.0625rem 0.5rem; font-size: 0.875rem;
  font-variant-numeric: tabular-nums; color: var(--muted-foreground);
}
.filter-chip:hover { border-color: var(--primary-color); }
.filter-chip.is-active {
  border-color: var(--primary-color); color: var(--primary-color); font-weight: 700;
}
.filter-chip.is-active span {
  background: var(--primary-color); color: var(--primary-foreground);
}

.search-row { display: flex; gap: 0.625rem; margin-bottom: 1.5rem; }
.search-row input { flex: 1; min-width: 0; }   /* الشكل من .form-input */
.search-row .submit-button { width: auto; padding: 0.75rem 1.75rem; }

/* ── جدول المطالبات ───────────────────────────────────── */
.table-scroll {
  overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
}
.claims-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 46rem; }
.claims-table th {
  text-align: right; padding: 0.875rem 1rem; background: var(--muted);
  border-bottom: 1px solid var(--border); font-size: 0.875rem;
  color: var(--muted-foreground); font-weight: 700; white-space: nowrap;
}
.claims-table td {
  padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top;
  text-align: start;   /* style.css يوسّط داخل .container — نمنع ذلك هنا */
}
.claims-table tr:last-child td { border-bottom: 0; }
.claims-table tbody tr:hover { background: var(--input-background); }
/* المراجع والأرقام التسلسلية لا تُكسر: كسرها يجعل المقارنة البصرية مستحيلة */
.claims-table .mono { white-space: nowrap; }
.claims-table a { color: var(--primary-color); text-decoration: none; font-weight: 700; }
.claims-table a:hover { text-decoration: underline; }

/* ── الصور المرفقة ────────────────────────────────────── */
.file-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
  gap: 0.75rem; margin-bottom: var(--gap);
}
.file-thumb {
  display: block; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--card); text-decoration: none;
  transition: border-color 0.15s;
}
.file-thumb:hover { border-color: var(--primary-color); }
.file-thumb img {
  display: block; width: 100%; height: 7.5rem;
  object-fit: cover; background: var(--muted);
}
.file-thumb span {
  display: block; padding: 0.4375rem 0.625rem;
  font-size: 0.875rem; color: var(--muted-foreground);
}

.checkbox-row {
  display: flex; align-items: center; gap: 0.5625rem;
  margin: 0.375rem 0 1.125rem; font-size: 1rem;
}
.checkbox-row input { width: auto; margin: 0; accent-color: var(--primary-color); }

.section-title {
  text-align: start;
  font-size: 0.875rem; font-weight: 800; letter-spacing: 0.1em;
  color: var(--muted-foreground); margin: 0 0 0.875rem;
}

/* ── أساسيات الجودة ───────────────────────────────────── */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (max-width: 32.5rem) {
  .warranty-card { padding: 1.125rem; }
  .warranty-card dl { grid-template-columns: 1fr; gap: 0.25rem; }
  .warranty-card dt { margin-top: 0.625rem; }
  .brandbar { flex-wrap: wrap; gap: 0.5rem; }
  .search-row { flex-direction: column; }
  .search-row .submit-button { width: 100%; }
}

/* ── تنقّل الموظفين ───────────────────────────────────── */
.staff-nav {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin: -0.5rem 0 1.5rem; padding-bottom: 0.5rem;
}
.staff-nav a {
  padding: 0.5rem 0.9375rem; border-radius: var(--radius);
  font-size: 1rem; color: var(--muted-foreground); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.staff-nav a:hover { background: var(--muted); color: var(--foreground); }
.staff-nav a.is-current {
  background: var(--primary-color); color: var(--primary-foreground); font-weight: 700;
}

/* ── بطاقات المؤشّرات ─────────────────────────────────
   أربع بطاقات بالضبط، فالأعمدة مثبّتة على قواسم العدد ٤:
   ٤ صفاً واحداً · ٢×٢ · ١ عمود. auto-fit كان يعطي ٣+١
   فيترك بطاقة وحيدة بجانب فراغ ميت. */
.stat-grid {
  display: grid; gap: 0.75rem; margin-bottom: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 56rem) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 20rem) { .stat-grid { grid-template-columns: minmax(0, 1fr); } }
.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.125rem;
  display: flex; flex-direction: column; gap: 0.1875rem;
  text-align: start;          /* الموقع كله لليمين — لا توسيط هنا */
  align-items: flex-start;
}
.stat-label {
  font-size: 0.875rem; color: var(--muted-foreground);
  font-weight: 700; letter-spacing: 0.04em;
}
.stat-value {
  font-size: 2rem; font-weight: 800; line-height: 1.2;
  color: var(--foreground); font-variant-numeric: tabular-nums;
}
.stat-value small {
  font-size: 1rem; font-weight: 700;
  color: var(--muted-foreground); margin-inline-start: 0.25rem;
}
.stat-note { font-size: 0.8125rem; color: var(--muted-foreground); }

/* ── مخطّط الأعطال ────────────────────────────────────
   أشرطة أفقية لا دائري: المقارنة بين الأطوال أدقّ من
   المقارنة بين الزوايا، والتسميات تُقرأ أفقياً بالعربية. */
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.bar-list li {
  display: grid; grid-template-columns: minmax(5rem, 8rem) 1fr auto;
  align-items: center; gap: 0.875rem;
}
.bar-label { font-size: 1rem; }
.bar-track { background: var(--muted); border-radius: 999px; height: 0.5rem; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary-color); border-radius: 999px; }
.bar-value {
  font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--muted-foreground);
}

/* ── جداول الإدارة ────────────────────────────────────── */
.result-count { margin: 0 0 0.75rem; }
.claim-link { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.claim-link:last-child { margin-bottom: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.row-actions form { margin: 0; }
.inline-form { display: flex; gap: 0.375rem; }
.inline-form input {
  padding: 0.5rem 0.75rem; border: 1px solid var(--border);
  border-radius: 0.375rem; font: inherit; font-size: 0.9375rem;
  background: var(--input-background); width: 9rem; min-width: 0;
}
.btn-small {
  padding: 0.5rem 1rem; border: 1px solid var(--border);
  border-radius: 0.375rem; background: var(--card); color: var(--foreground);
  font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: border-color 0.15s, color 0.15s;
}
.btn-small:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* حقلان جنباً إلى جنب متى اتّسعت المساحة، وإلا فوق بعضهما */
.field-pair {
  display: grid; gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* ── جدول يتكدّس بطاقاتٍ على الشاشات الضيقة ────────────
   الانزلاق الأفقي مقبول لجدول تُقرأ منه البيانات، لكن جدول
   الموظفين فيه أزرار الفعل الأساسية — ودفعها خارج الشاشة
   يجعلها غير قابلة للاستخدام على الجوال. */
@media (max-width: 46rem) {
  .table-plain { border: 0; box-shadow: none; background: transparent; overflow: visible; }
  .stack-sm { min-width: 0; display: block; }
  .stack-sm thead { display: none; }
  .stack-sm tbody, .stack-sm tr, .stack-sm td { display: block; width: 100%; }
  .stack-sm tr {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 0.25rem 0.25rem 0.5rem; margin-bottom: 0.75rem;
  }
  .stack-sm tbody tr:hover { background: var(--card); }
  /* التسمية فوق القيمة، لا شبكة: الشبكة تجعل كل عنصر داخل
     الخلية عنصرَ شبكة مستقلاً فتتمدّد الشرائح وتنفصل الأسطر. */
  .stack-sm td {
    display: block; border-bottom: 1px solid var(--border);
    padding: 0.625rem 0.875rem; text-align: start;
  }
  .stack-sm td:last-child { border-bottom: 0; }
  .stack-sm td::before {
    content: attr(data-label); display: block; margin-bottom: 0.1875rem;
    direction: rtl;   /* لا تتبع اتجاه قيمة الخلية */
    color: var(--muted-foreground); font-size: 0.8125rem;
    font-weight: 700; letter-spacing: 0.04em;
  }
  .inline-form input { width: 100%; }
  [dir="ltr"] .stack-sm td::before { direction: ltr; }
}

/* ── تلميح تحت التسمية يشرح ما يُطلب ولماذا ─────────────── */
.field-hint {
  margin: 0 0 0.625rem; font-size: 0.9375rem; line-height: 1.8;
  color: var(--muted-foreground);
}

/* ── إقرار الشروط ─────────────────────────────────────────
   هدف نقر كبير: مربّع صغير في زاوية نموذج عربي على الجوال
   يُخطئه الإصبع مراراً. */
.terms-row {
  display: flex; align-items: flex-start; gap: 0.75rem;
  margin: 0.5rem 0 1.5rem; font-size: 1rem; line-height: 1.8;
  cursor: pointer; text-align: start;
}
.terms-row input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem; margin: 0.1875rem 0 0;
  flex: none; accent-color: var(--primary-color); cursor: pointer;
}
.terms-row a { color: var(--primary-color); font-weight: 700; }

/* ── أيقونات التسميات ──────────────────────────────────
   بلون هادئ لا لون العلامة: البرتقالي محجوز للأفعال
   وعناوين البطاقات، ولو تكرر على كل تسمية فقد معناه. */
.form-group label i {
  color: var(--muted-foreground);
  margin-left: 0.375rem;
  font-size: 0.875em;
}
.card-title i { font-size: 1em; }

/* بطاقات العرض تتبع نمط .card نفسه: عنوان بأيقونة ثم محتوى */
.warranty-card > h3 {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.125rem; font-weight: 500; letter-spacing: 0;
  color: var(--foreground); margin: 0 0 1.125rem;
  padding-bottom: 0.875rem; border-bottom: 1px solid var(--border);
}
.warranty-card > h3 i { color: var(--primary-color); font-size: 0.9375em; }

/* عنوان قسم خارج البطاقات — بنفس وزن عناوين البطاقات */
.section-heading {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.125rem; font-weight: 500; color: var(--foreground);
  margin: 0 0 0.875rem; text-align: start;
}
.section-heading i { color: var(--primary-color); font-size: 0.9375em; }

/* ── تباعد داخل مجموعة الحقل ───────────────────────────
   .form-group في style.css عمود بلا فجوة، فتلتصق التسمية
   بالحقل. نضيفها هنا فقط — form.html لا يحمّل هذا الملف. */
.form-group { gap: 0.5rem; }
.form-group label {
  font-size: 1rem; font-weight: 500; color: var(--foreground);
  display: flex; align-items: center; gap: 0.4375rem;
}
.form-group .field-hint { margin: -0.125rem 0 0.125rem; }

/* select و textarea يتبعان نفس ارتفاع الحقول */
select.form-input { min-height: 3rem; }
/* المتصفح لا يورّث الخط لـ textarea و select — فيظهر النص العربي بخط آخر */
textarea.form-input, select.form-input { font-family: inherit; }
textarea.form-input { min-height: 7rem; line-height: 1.8; resize: vertical; }

/* ── بطاقة حالة الضمان — العنصر المميّز في هذه الصفحة ────
   سؤال العميل الأول: «ضماني سارٍ؟ لين متى؟». الشريط يجيب
   بنظرة واحدة قبل قراءة أي رقم. */
.warranty-hero { margin-bottom: var(--gap); border-width: 2px; }
.warranty-hero.is-active  { border-color: var(--st-approved-fg); }
.warranty-hero.is-expired { border-color: var(--st-rejected-fg); }

.hero-top {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem;
}
.hero-days { font-size: 1.0625rem; color: var(--muted-foreground); }
.hero-days strong {
  font-size: 1.75rem; font-weight: 800; color: var(--foreground);
  font-variant-numeric: tabular-nums; margin: 0 0.25rem;
}

.progress {
  display: block; height: 0.625rem; border-radius: 999px;
  background: var(--muted); overflow: hidden;
}
.progress-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--primary-color);
}
.is-expired .progress-fill { background: var(--st-rejected-fg); }

.progress-ends {
  display: flex; justify-content: space-between;
  margin-top: 0.625rem; font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
/* الشريط يمتلئ من اليمين (بداية المدة)، فتاريخ التفعيل يجب أن
   يقابله على اليمين. تركه ltr كان يقلبهما. */
.progress-ends time { direction: ltr; unicode-bidi: embed; }
.progress-ends span { display: flex; flex-direction: column; gap: 0.125rem; }
.progress-ends span:first-child { align-items: flex-start; }
.progress-ends span:last-child  { align-items: flex-end; }
.progress-ends small { color: var(--muted-foreground); font-size: 0.8125rem; direction: rtl; }

/* ── بطاقات الطلبات ─────────────────────────────────── */
.claim-cards {
  display: grid; gap: 0.75rem; margin-bottom: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.claim-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.125rem; display: flex; flex-direction: column;
  gap: 0.625rem; align-items: flex-start; text-align: start;
}
.claim-card-top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.625rem; width: 100%;
}
.claim-card .btn-small { text-decoration: none; margin-top: 0.25rem; }

/* ── أفعال أسفل الصفحة ──────────────────────────────── */
.hero-actions { margin-top: 0.5rem; text-align: start; }
.submit-button.as-link {
  display: block; text-align: center; text-decoration: none;
  box-sizing: border-box;
}
.center-link { display: block; text-align: center; margin-top: 1rem; }

/* ── روابط خدمات الضمان في صفحة التسجيل ────────────────
   بطاقتان لا زرّان: كل واحدة تحمل عنواناً وسطراً يشرح
   متى تُستخدم، فلا يحتار العميل أيهما يخصّه. */
.service-links {
  display: grid; gap: 0.75rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.service-links a {
  display: flex; align-items: flex-start; gap: 0.875rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.125rem; text-decoration: none; color: var(--foreground);
  text-align: start; transition: border-color 0.15s;
}
.service-links a:hover { border-color: var(--primary-color); }
.service-links i {
  color: var(--primary-color); font-size: 1.375rem;
  margin-top: 0.125rem; flex: none;
}
.service-links span { display: flex; flex-direction: column; gap: 0.25rem; }
.service-links strong { font-size: 1.0625rem; font-weight: 700; }
.service-links span { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.7; }
.service-links strong { color: var(--foreground); }

/* ── شريط النسخة التجريبية ──────────────────────────────
   مقصود أن يكون مزعجاً: الخلط بين التجريبي والحي أثناء
   الاختبار هو ما يوصل رسالة لعميل حقيقي. */
.staging-bar {
  background: repeating-linear-gradient(45deg,
    var(--st-needs-bg), var(--st-needs-bg) 12px,
    #f6e2c0 12px, #f6e2c0 24px);
  color: var(--st-needs-fg); text-align: center;
  padding: 0.625rem 1rem; font-size: 0.9375rem; font-weight: 700;
  border-bottom: 2px solid var(--st-needs-fg);
}

/* ── زر يبدو رابطاً — لفتح نافذة لا للانتقال ───────────── */
.link-button {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--primary-color); font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.link-button:hover { opacity: .85; }

/* نافذة الشروط تُنسَّق بالكامل في style.css — لا نكرّر قواعدها هنا.
   تكرارها كان يتغلّب على الأصل فيباعد الأسطر ويحوّل العناوين
   الرمادية إلى سوداء. */

/* ── صفحة دخول الموظفين — بطاقة واحدة في منتصف الشاشة ─── */
.login-wrap { max-width: 26rem; margin: 8vh auto 0; text-align: center; }
.login-wrap .brandbar-mark { display: inline-block; font-size: 1.5rem; margin-bottom: 1.75rem; }
.login-wrap h1 { font-size: 1.5rem; font-weight: 700; }
.login-wrap .subtitle { margin-bottom: 1.5rem; }
.login-wrap form, .login-wrap .alert { text-align: start; }

/* ── شاشة نجاح التسجيل — تحل محل النموذج ───────────────────
   التنبيه العابر يختفي قبل أن يقرأه العميل؛ هذه تبقى وتقول له
   ماذا حدث، وما رقمه، وأين يجد بطاقته. */
.success-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2.5rem 1.75rem 2rem; text-align: center;
}
.success-panel[hidden], .service-links[hidden], form[hidden] { display: none; }
.success-check {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; border-radius: 50%;
  background: var(--st-approved-bg); color: var(--st-approved-fg);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.success-panel h2 { font-size: 1.625rem; font-weight: 700; margin-bottom: 0.5rem; }
.success-lead { color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.8; }
.success-ref {
  display: inline-flex; flex-direction: column; gap: 0.25rem;
  margin: 1.5rem 0 1.25rem; padding: 0.875rem 1.5rem;
  background: var(--input-background); border-radius: var(--radius);
}
.success-ref span { font-size: 0.875rem; color: var(--muted-foreground); }
.success-ref strong {
  font-family: var(--mono); font-size: 1.25rem; letter-spacing: 0.02em;
}
.success-mail {
  display: flex; align-items: flex-start; gap: 0.75rem; text-align: start;
  background: var(--st-approved-bg); color: var(--st-approved-fg);
  border-radius: var(--radius); padding: 1rem 1.125rem;
  font-size: 1rem; line-height: 1.9; margin-bottom: 1.5rem;
}
.success-mail i { font-size: 1.25rem; margin-top: 0.3rem; flex: none; }
.success-mail strong { font-weight: 700; word-break: break-all; }
.success-mail.is-warning { background: var(--st-needs-bg); color: var(--st-needs-fg); }
.success-actions { display: flex; flex-direction: column; gap: 0.25rem; }

/* أثر دائم في السجل بأن العميل أُشعر بالبريد */
.mail-tag {
  display: inline-block; background: var(--st-approved-bg); color: var(--st-approved-fg);
  font-size: 0.8125rem; padding: 0.125rem 0.5rem;
  border-radius: 0.25rem; font-weight: 700; margin-right: 0.375rem;
}

/* رسالة حقل رقم الضمان: أخضر حين يُعرف الجهاز، رمادي أثناء التحقق */
.error-message.is-ok   { color: var(--st-approved-fg); font-weight: 700; }
.error-message.is-info { color: var(--muted-foreground); }

/* اقتراح تصحيح البريد — تحت الحقل، هادئ وقابل للنقر */
.email-suggest { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--st-needs-fg); }
.email-suggest[hidden] { display: none; }

/* ── زر اللغة — نص فقط يعرض اللغة الأخرى، بلون الهوية ──────────
   الرابطان في الصفحة (للوصول ولتعليم js)، والحالي مخفي: بالعربي يظهر
   «English» وبالإنجليزي «عربي» — بلا إطار ولا أيقونة، كرابط هادئ. */
.lang-switch { display: inline-flex; flex: none; }
.lang-switch a.is-current { display: none; }
.lang-switch a {
  color: var(--primary-color); font-size: 0.9375rem; font-weight: 600; line-height: 1.4;
  text-decoration: none; white-space: nowrap;
  text-underline-offset: 0.25em;
}
.lang-switch a:hover { text-decoration: underline; }

/* شريط العلامة: الشعار في البداية، الزر في النهاية (يسار الشاشة بالعربي)،
   والروابط بينهما؛ على الجوال تنزل الروابط سطراً تحتهما. */
.brandbar > .lang-switch { order: 3; }
.brandbar-meta { order: 2; margin-inline-start: auto; }
@media (max-width: 40rem) {
  .brandbar { gap: 0.75rem 0.5rem; }
  .brandbar > .lang-switch { margin-inline-start: auto; }
  .brandbar-meta { order: 4; width: 100%; margin: 0; }
}

/* زر اللغة في صفحة التسجيل — أعلى الصفحة، يسار الشاشة */
.page-lang { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
/* نص البطاقة الشارح بلا ميل — <em> وسم تعليم فقط لنقطة الترجمة */
.i18n-plain { font-style: normal; }
/* زر اللغة في صفحة الدخول — تحت العنوان، في الوسط */
.login-lang { display: flex; justify-content: center; margin: 0.25rem 0 0.75rem; }

/* ── حقل رفع الملفات بنصوص الموقع (file_pick في lib/view.php) ── */
.file-pick {
  position: relative; display: flex; align-items: center; gap: 0.75rem;
  width: 100%; min-height: 3rem; padding: 0.5rem 0.75rem; cursor: pointer;
}
.file-pick-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
.file-pick:focus-within { border-color: var(--primary-color); }
.file-pick-btn {
  flex: none; padding: 0.375rem 0.75rem; border-radius: calc(var(--radius) - 4px);
  background: var(--card); border: 1px solid var(--border);
  font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
}
.file-pick-btn i { color: var(--primary-color); }
.file-pick-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted-foreground); font-size: 0.9375rem;
}
.file-pick.has-file .file-pick-name { color: inherit; }

/* ── اللوجو الرسمي «DEFENᗡ» (images/defend-wordmark.svg) ── */
.wordmark { display: block; height: 1rem; width: auto; }
.brandbar-mark { display: inline-flex; align-items: center; }
.login-wrap .brandbar-mark .wordmark { height: 1.5rem; margin-inline: auto; }

/* ── شاشة الرفع ────────────────────────────────────────────
   تغطي الصفحة من الضغط على «تسجيل» حتى رد الخادم: العميل يرى
   أين وصل (تجهيز ← رفع ← حفظ) ونسبة حقيقية، ولا يضغط مرة ثانية. */
.upload-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(250, 248, 246, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: upload-fade 0.2s ease-out;
}
.upload-overlay[hidden] { display: none; }
.upload-card {
  width: 100%; max-width: 22rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 1rem; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.18);
  padding: 2rem 1.5rem 1.5rem; text-align: center;
}
.upload-ring { position: relative; width: 7.5rem; height: 7.5rem; margin: 0 auto 1.25rem; }
.upload-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.upload-ring circle { fill: none; stroke-width: 8; }
.upload-ring-track { stroke: #f3e3da; }
.upload-ring-bar {
  stroke: var(--primary-color); stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;   /* 2π × 52 */
  transition: stroke-dashoffset 0.35s ease-out;
}
/* الحفظ لا نسبة له: الحلقة تدور حتى يرد الخادم */
.upload-overlay[data-stage="save"] .upload-ring svg { animation: upload-spin 1.1s linear infinite; }
.upload-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.625rem; font-weight: 700; color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.upload-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.upload-steps {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem; text-align: start;
}
.upload-steps li {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  color: var(--muted-foreground); font-size: 0.9375rem;
  transition: background-color 0.2s, color 0.2s;
}
.upload-steps i {
  flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; color: transparent;
  border: 2px solid #e2dcd8; transition: all 0.2s;
}
.upload-steps li.is-active { background: #fdf1eb; color: var(--foreground); font-weight: 600; }
.upload-steps li.is-active i {
  border-color: var(--primary-color); border-top-color: transparent;
  animation: upload-spin 0.8s linear infinite;
}
.upload-steps li.is-done { color: var(--st-approved-fg); }
.upload-steps li.is-done i {
  background: var(--st-approved-fg); border-color: var(--st-approved-fg); color: #fff;
}
.upload-note { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; }
@keyframes upload-spin { to { transform: rotate(270deg); } }
.upload-steps li.is-active i { animation-name: upload-spin-full; }
@keyframes upload-spin-full { to { transform: rotate(360deg); } }
@keyframes upload-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .upload-overlay, .upload-ring svg, .upload-steps li.is-active i { animation: none !important; }
}

/* ── صور الضرر: مصغّرات + مربع «إضافة صورة أخرى» ─────────────
   حقل الملفات الأصلي يُظهر «image.jpg» فقط، فلا يعرف العميل أن صورته
   الأولى وصلت ولا أنه يستطيع إضافة غيرها. هنا يرى كل صورة فور اختيارها. */
.photo-pick { position: relative; }
.photo-pick-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.photo-grid {
  display: grid; gap: 0.625rem;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
}
.photo-tile, .photo-add { aspect-ratio: 1; border-radius: 0.75rem; }
.photo-tile {
  position: relative; overflow: hidden;
  background: var(--input-background); border: 1px solid var(--border);
  animation: upload-fade 0.2s ease-out;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile.no-preview::before {
  content: "\f03e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; color: var(--muted-foreground);
}
.photo-num {
  position: absolute; bottom: 0.375rem; inset-inline-start: 0.375rem;
  min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); color: #fff;
  font-size: 0.75rem; font-weight: 700; line-height: 1.375rem; text-align: center;
}
.photo-remove {
  position: absolute; top: 0.375rem; inset-inline-end: 0.375rem;
  width: 2rem; height: 2rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.875rem;
  display: flex; align-items: center; justify-content: center;
}
.photo-remove:hover, .photo-remove:focus-visible { background: #9c2419; }
.photo-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem; padding: 0.5rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--primary-color); background: #fdf6f2;
  color: var(--primary-color); font-weight: 600; font-size: 0.875rem; line-height: 1.3;
  transition: background-color 0.15s;
}
.photo-add:hover { background: #fbebe2; }
.photo-add[hidden] { display: none; }
.photo-add i { font-size: 1.5rem; }
.photo-add-count { color: var(--muted-foreground); font-weight: 500; font-size: 0.75rem; }
.photo-pick:focus-within .photo-add { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.photo-status { margin: 0.625rem 0 0; font-size: 0.9375rem; min-height: 1.25rem; }
.photo-status.is-ok   { color: var(--st-approved-fg); }
.photo-status.is-warn { color: var(--st-rejected-fg); font-weight: 600; }
.photo-status.is-shake { animation: photo-shake 0.4s; }
@keyframes photo-shake {
  25% { transform: translateX(-6px); } 75% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-tile, .photo-status.is-shake { animation: none; }
}

/* ── إعادة فتح طلب مرفوض (staff/claim.php) ──────────────── */
.reopen-tag {
  display: inline-block; background: #fdf1eb; color: #b4481c;
  font-size: 0.8125rem; padding: 0.125rem 0.5rem;
  border-radius: 0.25rem; font-weight: 700; margin-right: 0.375rem;
}
.other-claims { margin-top: 1rem; }
.other-claims ul { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.other-claims li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.other-claims li + li { border-top: 1px solid var(--border); padding-top: 0.875rem; }
.other-claims .other-note {
  flex-basis: 100%; margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.nowrap { white-space: nowrap; }

/* ── شارة «جديد/تحديث» في قائمة المطالبات ───────────────
   طلب لم يفتحه موظف خدمة العملاء بعد، أو حدّثه العميل/المدير بعد آخر فتح. */
.att-tag {
  display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle;
  margin-inline-start: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 999px;
  font-family: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0;
  background: var(--primary-color); color: #fff;
}
.att-tag::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor;
  animation: att-pulse 1.6s ease-in-out infinite;
}
.att-tag.att-updated { background: #fdf1eb; color: #b4481c; }
@keyframes att-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .att-tag::before { animation: none; } }
tr.is-attention td { background: #fffaf7; }
tr.is-attention td:first-child { box-shadow: inset -3px 0 0 var(--primary-color); font-weight: 700; }
[dir="ltr"] tr.is-attention td:first-child { box-shadow: inset 3px 0 0 var(--primary-color); }

/* ── إعادة إرسال بطاقة الضمان (staff/warranties.php) ───── */
.resend-card { margin-top: 0.5rem; }
.resend-card summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--primary-color); font-size: 0.875rem; font-weight: 600; list-style: none;
}
.resend-card summary::-webkit-details-marker { display: none; }
.resend-form {
  margin-top: 0.5rem; padding: 0.75rem; border-radius: var(--radius);
  background: var(--input-background); display: flex; flex-direction: column; gap: 0.375rem;
  min-width: 15rem; max-width: 22rem;
}
.resend-label { font-size: 0.8125rem; font-weight: 600; }
.resend-form .field-hint { font-size: 0.75rem; margin: 0; }
.resend-form .btn-small { align-self: flex-start; }
.resend-last { color: var(--st-approved-fg); }
.resend-last.is-failed { color: var(--st-rejected-fg); }

/* ── الصورة الأمامية: مثال صفحة «حول» + تنبيه الشاشة المطفأة (form.html) ── */
.front-guide {
  display: flex; align-items: center; gap: 1rem;
  margin: 0.25rem 0 0.75rem; padding: 0.75rem 0.875rem;
  background: #fdf6f2; border: 1px solid #f6dccd; border-radius: var(--radius);
}
.front-guide-phone {
  flex: none; width: 6rem; padding: 0.3rem; border-radius: 0.9rem;
  background: #1a1a1a; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.fg-screen {
  background: #f2f2f7; border-radius: 0.65rem; padding: 0.45rem 0.35rem 0.55rem;
  font-size: 0.5rem; line-height: 1.3; color: #1a1a1a; min-height: 7.5rem;
}
.fg-title { font-weight: 700; text-align: center; margin-bottom: 0.35rem; font-size: 0.5625rem; }
.fg-row {
  display: flex; justify-content: space-between; gap: 0.2rem;
  background: #fff; padding: 0.22rem 0.3rem; border-bottom: 1px solid #e5e5ea;
}
.fg-row span:last-child { color: #8e8e93; }
.fg-row span { min-width: 0; overflow: hidden; white-space: nowrap; }
/* الرقم في سطر تحت العنوان: عرض الهاتف المصغّر لا يتسع لهما جنباً إلى جنب */
.fg-row.is-key { flex-direction: column; gap: 0.1rem;
  outline: 1.5px solid var(--primary-color); outline-offset: -1px; border-radius: 0.2rem; }
.fg-row.is-key span:last-child { letter-spacing: 0.02em; }
.fg-row.is-key span { color: var(--primary-color); font-weight: 700; }
.front-guide-text { margin: 0; font-size: 0.9375rem; line-height: 1.8; color: var(--foreground); }
.front-guide-text strong { color: #b4481c; }
.front-guide-body { min-width: 0; }
.front-guide-dial { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.8; color: var(--muted-foreground, #555); }
.dial-code {
  display: inline-block; padding: 0 0.45rem; border-radius: 0.35rem;
  background: #fff; border: 1px solid #f6dccd; color: #b4481c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: 0.08em;
}

.dark-warn {
  display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem;
  padding: 0.75rem 0.875rem; border-radius: var(--radius);
  background: var(--st-needs-bg); color: var(--st-needs-fg);
  font-size: 0.9375rem; line-height: 1.7; font-weight: 600;
}
.dark-warn[hidden] { display: none; }
.dark-warn i { margin-top: 0.3rem; }
.upload-area.is-dark-warn { border-color: #d69e2e !important; }

/* ── تنبيه الشمول (آيفون Duo) — form.html و claim.php ────────── */
.coverage-notice {
  display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem;
  padding: 0.7rem 0.875rem; border-radius: var(--radius);
  background: #eef4fb; color: #1f4f7a; font-size: 0.9375rem; line-height: 1.7;
}
.coverage-notice[hidden] { display: none; }
.coverage-notice i { margin-top: 0.3rem; }
.duo-badge {
  display: inline-block; margin-top: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem;
  background: #eef4fb; color: #1f4f7a; font-size: 0.8125rem; font-weight: 700;
}

/* ── حالات مركز الصيانة + بطاقة الإجراء (staff/claim.php · center.php) ── */
.status-in_repair       { background: #e3ecf3; color: #2a5675; }
.status-center_rejected { background: #f8e3e0; color: #9c2419; }
.center-choices { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.center-choice {
  display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer;
  padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.15s, background-color 0.15s;
}
.center-choice input { margin-top: 0.3rem; }
.center-choice span { display: flex; flex-direction: column; gap: 0.2rem; }
.center-choice small { color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.6; }
.center-choice:has(input:checked) { border-color: var(--primary-color); background: #fdf6f2; }
.center-choice.is-center_rejected:has(input:checked) { border-color: #9c2419; background: #fbeeec; }

/* تنبيه برتقالي خفيف: ما يحتاج تصرّفاً من العميل (مطلوب تصحيح) */
.alert-warning { background: var(--st-needs-bg); color: var(--st-needs-fg); }

/* ── حالات التحقق من التسجيل (staff/registrations.php) ─────── */
.status-reg-pending   { background: var(--st-review-bg); color: var(--st-review-fg); }
.status-reg-needs_fix { background: var(--st-needs-bg);  color: var(--st-needs-fg); }
.status-reg-active    { background: var(--st-approved-bg); color: var(--st-approved-fg); }
.submit-button.reg-approve { background: var(--st-approved-fg); }

/* عدّاد أحرف وصف العطل (claim.php) */
.char-count { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--muted-foreground); text-align: end; }
.form-group[hidden] { display: none; }