/* ------------------------------------------------------------------
   مكوّنات الواجهة
   كل الخصائص الاتجاهية منطقية (inline-start / inline-end) حتى تنقلب
   الواجهة كاملة بين العربية والإنجليزية دون أي تعديل إضافي.
   ------------------------------------------------------------------ */

/*
 * الإخفاء يسبق كل قاعدة تحدّد العرض.
 * عنصر مخفيّ بـ hidden لكن صنفه يضبط display يبقى ظاهرًا، وإن كان غطاءً
 * شفافًا ابتلع كل ضغطة على الشاشة بلا أن يرى المستخدم سببًا.
 */
[hidden] { display: none !important; }

/* ============================ الهيكل ============================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  min-height: var(--topbar);
}

.brand-mark {
  width: 30px; height: 30px;
  flex: none;
  display: grid; place-items: center;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 15px;
}

.brand-name { font-weight: 600; font-size: 16px; line-height: 1.3; }
.brand-sub { font-size: 11px; color: var(--ink-3); line-height: 1.3; }

.nav { padding: 10px 10px 24px; flex: 1; }
.nav-group { margin-block-start: 14px; }
.nav-label {
  font-size: 11px;
  color: var(--ink-3);
  padding-inline: 10px;
  margin-block-end: 4px;
  font-weight: 500;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--surface-sunk); color: var(--ink); }
.nav-item.active {
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--brand) 18%, transparent);
}
.nav-item .ico { width: 17px; flex: none; opacity: .85; }
.nav-item .count {
  margin-inline-start: auto;
  font-family: var(--font-data);
  font-size: 11px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  padding: 1px 6px;
  border-radius: 9px;
}
.nav-item.active .count { background: #fff3; color: inherit; }

/* ============================ الشريط العلوي ============================= */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 18px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.project-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 10px;
  min-width: 260px;
  max-width: 420px;
}
.project-switch select {
  border: 0; background: transparent; width: 100%;
  padding-block: 3px; cursor: pointer; font-size: 14px;
}
.project-switch .tag {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  flex: none;
}

.topbar-spacer { flex: 1; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--ink-2);
  position: relative;
}
.icon-btn:hover { background: var(--surface-sunk); color: var(--ink); }
.icon-btn .dot {
  position: absolute;
  inset-block-start: -3px; inset-inline-end: -3px;
  min-width: 15px; height: 15px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-family: var(--font-data);
  display: grid; place-items: center;
  padding-inline: 3px;
}

.who {
  display: flex; align-items: center; gap: 9px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--line);
}
.avatar {
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--steel-tint); color: var(--steel);
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px; flex: none;
}
.who-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.who-role { font-size: 11px; color: var(--ink-3); line-height: 1.3; }

/* ============================ المحتوى ============================= */
.content { padding: 22px 26px 60px; max-width: 1560px; width: 100%; }

/*
 * ظهور هادئ عند تبديل الشاشة: إزاحة صغيرة تُشعر أن المحتوى وصل الآن.
 * حركة واحدة مقصودة خير من حركات متفرقة، وتتوقف تمامًا مع تفضيل تقليل الحركة.
 */
.content > * { animation: content-in .18s ease both; }
@keyframes content-in {
  from { opacity: 0; transform: translateY(6px); }
}

.page-head {
  display: flex; align-items: flex-start; gap: 16px;
  margin-block-end: 18px; flex-wrap: wrap;
}
.page-head h1 { margin-block-end: 2px; }
.page-sub { color: var(--ink-3); font-size: 13px; }
.page-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================ لوح العنوان (العنصر المميز) ============================= */
/* مستوحى من خانة العنوان في المخططات الهندسية: شبكة خلايا صغيرة الحواف */
.titleblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  margin-block-end: 20px;
}
.titleblock .cell {
  padding: 9px 12px;
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  min-width: 0;
}
.titleblock .cell:last-child { border-inline-end: 0; }
.titleblock .k {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: none;
  margin-block-end: 1px;
}
.titleblock .v {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titleblock .cell.wide { grid-column: span 2; }
/* خلايا التواريخ أطول من غيرها — تُصغَّر بدل أن تُقص */
.titleblock .cell.dates .v { font-size: 12px; white-space: normal; }
.titleblock .cell.accent { background: var(--brand); color: #fff; }

/* اللوح مطويًا: سطر واحد يكفي على الجوال، والتفاصيل تُفتح عند الطلب */
.titleblock-fold > .titleblock { margin-block-end: 0; }
.titleblock-fold { margin-block-end: 20px; }
.tb-summary { display: none; }
.titleblock .cell.accent .k { color: #ffffffb0; }

/* ============================ البطاقات ============================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.card-head h3 { font-size: 14px; }
.card-head .right { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.card-body { padding: 14px; }
.card-body.flush { padding: 0; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }

/* ============================ مؤشرات ============================= */
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 15px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--line-strong);
}
.kpi[data-tone="brand"]::before { background: var(--brand); }
.kpi[data-tone="ok"]::before { background: var(--ok); }
.kpi[data-tone="warn"]::before { background: var(--warn); }
.kpi[data-tone="stop"]::before { background: var(--stop); }
.kpi .k { font-size: 12px; color: var(--ink-3); }
/* قيمة المؤشر تُكتب بخط الواجهة لا بالأحادي، لأنها قد تحمل كلمة عربية مثل "مليون" */
.kpi .v {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.45;
}
.kpi .v .unit { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-inline-start: 4px; white-space: nowrap; }
.kpi .note { font-size: 11px; color: var(--ink-3); }
/* المؤشر القابل للنقر ينقل إلى مصدر رقمه — سهم صغير يكفي للإشارة دون ضجيج */
.kpi.link {
  display: block;
  width: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .14s ease, transform .14s ease;
}
.kpi.link::after {
  content: "";
  position: absolute;
  inset-block-start: 13px;
  inset-inline-end: 13px;
  width: 6px; height: 6px;
  border-block-start: 1.5px solid var(--ink-3);
  border-inline-end: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  opacity: .45;
}
html[dir="rtl"] .kpi.link::after { transform: rotate(-135deg); }
/* العنوان لا يمرّ تحت السهم مهما طال */
.kpi.link .k { padding-inline-end: 18px; }
.kpi.link:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.kpi.link:hover::after { opacity: 1; }
.kpi.link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* وميض قصير يقول «هذا هو القسم الذي طلبته» بعد القفز إليه */
.jump-flash { animation: jump-flash 0.9s ease; }
@keyframes jump-flash {
  from { box-shadow: 0 0 0 3px var(--brand-tint); }
  to { box-shadow: 0 0 0 0 transparent; }
}

/* ============================ عنوان مجموعة ============================= */
/* يفصل شرائح الصفحة الطويلة بسطر خفيف بدل بطاقة إضافية */
.section-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-block: 22px 8px;
}
.section-label .t {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.section-label .h { font-size: 12px; color: var(--ink-3); }
.section-label:first-child { margin-block-start: 0; }
/* داخل عمود متباعد أصلًا لا تُجمع الهوامش، فيُخفَّض هامش العنوان */
.stack > .section-label { margin-block: 8px 0; }
.stack > .section-label:first-child { margin-block-start: 0; }

/* صف «عرض البقية» أسفل جدول مقصوص عمدًا */
.more-row {
  padding: 10px 14px;
  border-block-start: 1px solid var(--line);
  display: flex;
  justify-content: center;
}

/* ============================ الجداول ============================= */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: start;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.tbl td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl td.num, table.tbl th.num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
table.tbl tr.group-row td {
  background: var(--surface-sunk);
  font-weight: 600;
}
table.tbl tr.total-row td {
  background: var(--surface-2);
  font-weight: 700;
  border-top: 2px solid var(--line-strong);
}
.cell-main { font-weight: 500; }
.cell-sub { font-size: 11.5px; color: var(--ink-3); }

/* ============================ الشارات والحالات ============================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--idle-tint);
  color: var(--idle);
  white-space: nowrap;
}
.badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.badge.ok { background: var(--ok-tint); color: var(--ok); }
.badge.warn { background: var(--warn-tint); color: var(--warn); }
.badge.stop { background: var(--stop-tint); color: var(--stop); }
.badge.info { background: var(--steel-tint); color: var(--steel); }
.badge.brand { background: var(--brand-tint); color: var(--brand); }
.badge.plain::before { display: none; }

.overdue-flag { color: var(--stop); font-weight: 600; font-size: 11.5px; }

/* ختم المراجعة: عنصر التوقيع البصري في المنصة */
.stamp {
  display: inline-grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: var(--r-sm);
  padding: 3px 9px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
  transform: rotate(-3deg);
  color: var(--ok);
  background: color-mix(in srgb, currentColor 7%, transparent);
  text-align: center;
}
.stamp .code { font-family: var(--font-data); font-size: 15px; display: block; }
.stamp.b { color: var(--steel); }
.stamp.c { color: var(--warn); }
.stamp.d { color: var(--stop); }
.stamp.pending { color: var(--ink-3); transform: none; border-style: dashed; }

/* ============================ الأزرار ============================= */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 6px 13px;
  border-radius: var(--r);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-sunk); }
.btn:active { transform: translateY(1px); }

/*
 * ------------------------------------------------------------------
 * الاستجابة عند الضغط لا عند الإفلات
 * ------------------------------------------------------------------
 *
 * كان الزرّ وحده يستجيب. أمّا صفّ الجدول والتبويب وعنصر القائمة ورابط
 * التنقّل — وهي أكثر ما يُلمس في المنصّة — فتنتظر الإفلات.
 *
 * ومهندسٌ يضغط صفًّا على جواله وهو واقفٌ في الموقع فلا يرى شيئًا يظنّ أنه
 * أخطأ الهدف، فيضغط ثانيةً — فيفتح ما لم يُرد، أو يظنّ المنصّة معلّقة.
 *
 * والتغذية الراجعة تُعطى **في لحظة الضغط**: بعدها بأجزاء الثانية تبدو
 * ردَّ فعلٍ لا استجابة.
 */
tbody tr:active,
.drop .item:active,
.tab:active,
.nav a:active,
.kpi:active {
  /* تغميقٌ خفيف: يُرى فورًا ولا يزيح شيئًا فلا يقفز السطر تحت الإصبع */
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  transition: background 60ms ease-out;
}

/* الصفّ القابل للضغط يقول ذلك قبل أن يُضغط */
tbody tr[data-clickable],
.drop a.item { cursor: pointer; }

/*
 * ومساحة اللمس أوسع من الحبر.
 *
 * الأيقونة أربعةٌ وعشرون بكسلًا، والإصبع يلامس عشرة مليمترات. فتُوسَّع
 * منطقة الالتقاط بلا أن يكبر ما يُرى — وهو ما يجعل الزرّ الصغير يُصاب.
 */
.icon-btn { position: relative; }
.icon-btn::after {
  content: '';
  position: absolute;
  inset: -10px;
}
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-sunk); color: var(--ink); }
.btn.danger { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 35%, var(--line)); }
.btn.sm { padding: 3px 9px; font-size: 12.5px; }

/* ============================ الحقول ============================= */
.field { display: block; margin-block-end: 12px; }
.field > .lbl { display: block; font-size: 12.5px; color: var(--ink-2); margin-block-end: 4px; font-weight: 500; }
.field .hint { font-size: 11.5px; color: var(--ink-3); margin-block-start: 3px; }

input[type="text"], input[type="date"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 7px 11px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
input[type="number"], input.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
/* الحقول اللاتينية دائمًا من اليسار لليمين */
input[type="email"], input[type="tel"], input[type="url"], input[type="password"] {
  direction: ltr;
  text-align: start;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.7; }

/*
 * الجوال: مفتاحٌ ورقم في صندوقٍ واحد.
 *
 * يبدوان حقلًا واحدًا لا حقلين متجاورين — فالرقم ومفتاحه شيء واحد في ذهن
 * صاحبه. والحدّ على الغلاف لا على الجزأين، والفاصل بينهما خطّ رفيع.
 */
.phone-input {
  display: flex;
  align-items: stretch;
  width: 100%;
  /*
   * الحقل من اليسار لليمين وإن كانت الصفحة عربية.
   *
   * الرقم يُكتب في العالم كلّه «+974 3312 3456»: المفتاح أوّلًا. ولو تُرك
   * لاتجاه الصفحة لظهر «3312 3456 +974» — يُقرأ معكوسًا ويُنسخ معكوسًا.
   */
  direction: ltr;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.phone-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.phone-input input[type="tel"] {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.phone-input input[type="tel"]:focus {
  outline: none;
  box-shadow: none;
}
/* المفتاح ثابتٌ لا يُختار: نصٌّ لا قائمة، فلا ضغطة على من لا يبدّله */
.phone-input .dial {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline: 11px 9px;
  border-right: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-data);
  font-size: 13.5px;
  background: var(--surface-sunk);
  user-select: none;
}
.phone-input input[type="tel"] { flex: 1; min-width: 0; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; min-width: 0; }

.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.toolbar select, .toolbar input[type="search"] { width: auto; min-width: 150px; padding-block: 4px; }
.toolbar .spacer { flex: 1; }
/* فاصل بين مجموعات الأزرار: الأفعال اليومية ثم الإدارية ثم ما لا رجعة فيه */
.toolbar .sep { width: 1px; align-self: stretch; min-height: 22px; background: var(--line-strong); margin-inline: 3px; }
/* فعل يغيّر الحالة بلا رجعة: لون التحذير نفسه الذي يظهر به الشريط المقفل */
.btn.lock { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.btn.lock:hover { background: var(--warn-tint); }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.seg button {
  border: 0; background: var(--surface); padding: 4px 11px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2);
  border-inline-end: 1px solid var(--line);
}
.seg button:last-child { border-inline-end: 0; }
.seg button.on { background: var(--brand); color: #fff; font-weight: 600; }

/* ============================ التبويبات ============================= */
.tabs {
  display: flex; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-block-end: 18px;
}
.tab {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 14px;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.tab .n {
  font-family: var(--font-data);
  font-size: 11px;
  background: var(--surface-sunk);
  padding: 0 5px;
  border-radius: 8px;
  margin-inline-start: 5px;
}

/* ============================ ورقة جدول الكميات ============================= */
.sheet-wrap { overflow: auto; max-height: calc(100vh - 330px); }
table.sheet { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.sheet th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  border-inline-end: 1px solid var(--line);
  padding: 7px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: start;
  white-space: nowrap;
}
table.sheet td {
  border-bottom: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  padding: 0;
  height: 31px;
}
table.sheet td .cellbox {
  padding: 5px 9px;
  min-height: 31px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.sheet td.editable .cellbox { cursor: text; }
table.sheet td.editable:hover { background: var(--surface-2); }
table.sheet td.sel { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-tint); }
table.sheet td.num .cellbox {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
table.sheet tr.grp td { background: var(--surface-sunk); font-weight: 600; }
table.sheet tr.grp td .cellbox { padding-inline-start: 9px; }
table.sheet td.indent .cellbox { padding-inline-start: 26px; }
table.sheet input.cell-input {
  width: 100%; height: 100%;
  border: 0; border-radius: 0;
  padding: 5px 9px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--brand);
}
table.sheet input.cell-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.sheet-locked {
  display: flex; align-items: center; gap: 8px;
  background: var(--warn-tint); color: var(--warn);
  padding: 7px 14px; font-size: 12.5px; font-weight: 500;
  border-bottom: 1px solid var(--line);
}

/* ============================ الجدول الزمني والقوائم ============================= */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--surface-2); }
.list-item .lead {
  width: 34px; height: 34px; border-radius: var(--r);
  display: grid; place-items: center; flex: none;
  background: var(--surface-sunk); color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  font-family: var(--font-data);
}
.list-item .body { flex: 1; min-width: 0; }
.list-item .t { font-size: 13.5px; font-weight: 500; }
.list-item .s { font-size: 11.5px; color: var(--ink-3); }
.list-item .trail { margin-inline-start: auto; text-align: end; flex: none; }

.timeline { position: relative; padding-inline-start: 18px; }
.timeline::before {
  content: ""; position: absolute; inset-block: 6px;
  inset-inline-start: 4px; width: 1px; background: var(--line);
}
.timeline .ev { position: relative; padding-block: 6px; }
.timeline .ev::before {
  content: ""; position: absolute;
  inset-inline-start: -18px; inset-block-start: 13px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.timeline .ev.done::before { border-color: var(--ok); background: var(--ok); }
.timeline .ev .t { font-size: 13px; }
.timeline .ev .s { font-size: 11.5px; color: var(--ink-3); }

/* ============================ المقاييس ============================= */
.meter { height: 6px; background: var(--surface-sunk); border-radius: 4px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.meter.ok > i { background: var(--ok); }
.meter.warn > i { background: var(--warn); }

.bar-row { display: flex; align-items: center; gap: 10px; margin-block-end: 9px; }
.bar-row .lbl { width: 130px; flex: none; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .track { flex: 1; height: 8px; background: var(--surface-sunk); border-radius: 4px; overflow: hidden; }
.bar-row .track > i { display: block; height: 100%; background: var(--steel); }
.bar-row .val { width: 96px; text-align: end; font-family: var(--font-data); font-size: 12px; flex: none; }

/* ============================ خطوات البداية ============================= */
.setup-card { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.setup-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.setup-step:last-child { border-bottom: 0; }
.setup-step .mark {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-data); font-size: 12.5px; font-weight: 600;
  background: var(--surface-sunk); color: var(--ink-2);
  border: 1px solid var(--line-strong);
}
.setup-step[data-done="1"] .mark { background: var(--ok-tint); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.setup-step[data-done="1"] .title { color: var(--ink-3); }
.setup-step .body { flex: 1; min-width: 0; }
.setup-step .title { font-size: 14.5px; font-weight: 600; }
.setup-step .why { font-size: 13px; color: var(--ink-3); line-height: 1.75; }
.setup-step .btn { flex: none; }

/* ============================ الحالات الفارغة ============================= */
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
}
.empty .big { font-size: 15px; color: var(--ink-2); font-weight: 500; margin-block-end: 4px; }
.empty .hint-line { font-size: 13px; color: var(--ink-3); max-width: 42em; margin-inline: auto; line-height: 1.8; }
.empty .btn { margin-block-start: 12px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--surface-2) 37%, var(--surface-sunk) 63%);
  background-size: 400% 100%;
  animation: shine 1.3s ease infinite;
  border-radius: var(--r-sm);
  height: 13px;
  margin-block-end: 9px;
}
@keyframes shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ============================ النوافذ ============================= */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(15, 19, 25, .48);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 100;
  animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  width: min(660px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: rise .16s ease;
}
.modal.wide { width: min(1040px, 100%); }
/* عارض المخططات يريد كل بكسل: المخطط نفسه هو الواجهة */
.modal.full { width: min(1500px, 100%); height: 92vh; max-height: 92vh; }
.modal.full .modal-body { flex: 1; padding: 0; overflow: hidden; display: flex; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.modal-head h3 { flex: 1; }
/* مقبض السحب: يظهر على الجوال فقط حيث الورقة تُسحب */
.sheet-grip { display: none; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; justify-content: flex-end;
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ============================ الرسم البياني ============================= */
.chart { margin: 0; }
.chart-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-block-end: 6px;
}
.chart-max { font-size: 11.5px; color: var(--ink-3); }
.chart-readout { display: flex; align-items: baseline; gap: 6px; }
.chart-readout .rv { font-size: 15px; font-weight: 600; }
.chart-readout .rl { font-size: 11.5px; color: var(--ink-3); }
.chart-plot {
  display: flex; align-items: flex-end; gap: 4px;
  height: 132px;
  padding-block-start: 6px;
}
.chart-bar {
  flex: 1 1 0; min-width: 6px;
  border: 0; padding: 0;
  background: var(--steel);
  opacity: .8;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  transition: opacity .12s ease, background-color .12s ease;
}
.chart-bar:hover, .chart-bar:focus-visible { opacity: 1; background: var(--brand); }
.chart-bar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* أعلى يوم يُميَّز بشكله لا بلونه وحده */
.chart-bar[data-peak] { opacity: 1; box-shadow: inset 0 2px 0 var(--brand); }
.chart-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-3);
  padding-block-start: 5px;
  border-block-start: 1px solid var(--line);
  margin-block-start: 3px;
}
.chart-summary { font-size: 12px; color: var(--ink-2); margin-block-start: 8px; line-height: 1.7; }
.chart-data { margin-block-start: 8px; }
.chart-data summary {
  font-size: 12px; color: var(--ink-3); cursor: pointer;
  padding-block: 4px; min-height: 28px;
}
.chart-data summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chart-data .table-wrap { max-height: 260px; overflow: auto; margin-block-start: 6px; }

/* خطأ داخل النموذج: بجانب ما يكتبه المستخدم لا في زاوية الشاشة */
.form-error {
  padding: 9px 12px;
  border-radius: var(--r);
  background: var(--stop-tint, color-mix(in srgb, var(--stop) 12%, transparent));
  color: var(--stop);
  border: 1px solid color-mix(in srgb, var(--stop) 35%, transparent);
  font-size: 13px;
  line-height: 1.7;
}
.form-error:focus-visible { outline: 2px solid var(--stop); outline-offset: 2px; }

/* دوّارة داخل الزر أثناء الحفظ */
.btn-spinner {
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  display: inline-block;
  margin-inline-end: 7px;
  vertical-align: -2px;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* اختيار نوع المنشأة عند التسجيل: بطاقتان لا قائمة منسدلة — القرار يستحق مساحة */
.kind-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kind-picker.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .kind-picker.three { grid-template-columns: minmax(0, 1fr); } }
.kind-card {
  text-align: start;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.kind-card:hover { border-color: var(--brand); }
.kind-card.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.kind-card .kt { font-weight: 600; font-size: 14px; margin-block-end: 3px; }
.kind-card .kd { font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.kind-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 700px) { .kind-picker { grid-template-columns: minmax(0, 1fr); } }

/* بيانات دخول تُعرض مرة واحدة: تُقرأ وتُنسخ بلا لبس */
.creds { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cred-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-block-end: 1px solid var(--line);
  background: var(--surface-2);
}
.cred-row:last-child { border-block-end: 0; }
.cred-row .k { font-size: 12.5px; color: var(--ink-3); min-width: 92px; }
.cred-row .v { font-size: 14px; font-weight: 600; word-break: break-all; }

/* ============================ تفصيل الطلب ============================= */
/* شبكة الحقائق: كل سؤال يجيب عن نفسه بلا تمرير */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
.facts .fact .k { font-size: 11px; color: var(--ink-3); margin-block-end: 2px; }
.facts .fact .v { font-size: 13.5px; font-weight: 500; line-height: 1.7; }
.req-detail { line-height: 1.9; margin: 0; }
.warn-text { color: var(--warn); }

/* صندوق الإقرار: سؤال واحد صريح للطرف الذي سُجّل الطلب باسمه */
.confirm-box {
  border: 1px solid var(--brand);
  border-inline-start-width: 4px;
  border-radius: var(--r);
  background: var(--brand-tint);
  padding: 12px 14px;
}
.confirm-box .cb-title { font-weight: 700; margin-block-end: 4px; }
.confirm-box .cb-body { font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }

/* ============================ إصدارات المخططات ============================= */
/* النسخة الحالية تُفصل بصريًا لا بترتيبها في قائمة: السؤال «أيّها الحالية» لا يحتمل بحثًا */
.rev-current {
  border: 1px solid var(--brand);
  border-radius: var(--r);
  background: var(--brand-tint);
  padding: 14px;
}
.rev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rev-tag { font-size: 11.5px; font-weight: 700; color: var(--brand); }
.rev-no {
  font-family: var(--font-data);
  font-size: 22px; font-weight: 700; line-height: 1.45;
}
.rev-meta { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; margin-block-start: 4px; }
/* المُستبدَل يبقى مقروءًا لكنه لا ينافس الحالية على الانتباه */
.list-item.superseded { opacity: .72; }
.list-item.superseded .lead { text-decoration: line-through; }

.outdated-box {
  border: 1px solid var(--stop);
  border-inline-start-width: 4px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--stop) 8%, transparent);
  padding: 12px 14px;
}
.outdated-box .ob-title { font-weight: 700; color: var(--stop); margin-block-end: 4px; }
.outdated-box .ob-body { font-size: 13px; line-height: 1.8; }

/* منتقي الشركات داخل نافذة الدعوة */
.picker { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
.picker .list-item { cursor: pointer; }
.picker .list-item:hover { background: var(--surface-2); }
.picker .list-item.picked { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }

/* ============================ الوصولية ============================= */
/* التركيز لا يُحجب (WCAG 2.2 — 2.4.11): الشريط العلوي ورأس الجدول لاصقان،
   فحين ينتقل المستخدم بالمفاتيح إلى صف أسفل الطيّة يُحجز لهما مكان فوقه
   بدل أن يهبط تحتهما ويختفي. */
:root { --sticky-chrome: 104px; }
table.tbl tbody tr,
.kpi.link,
.card,
.setup-step,
.list-item,
a.tab,
input, select, textarea, button, a[href] {
  scroll-margin-block-start: var(--sticky-chrome);
}
/* داخل النوافذ الترويسة وحدها هي اللاصقة، فالمسافة أقل */
.modal-body :is(input, select, textarea, button, a[href], table.tbl tbody tr) {
  scroll-margin-block-start: 72px;
}

/* رابط التخطي يظهر عند التركيز فقط */
.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 50%;
  transform: translate(50%, -240%);
  z-index: 400;
  background: var(--brand);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 13.5px;
  transition: transform .15s ease;
}
.skip-link:focus { transform: translate(50%, 0); }
.content:focus { outline: none; }
/* الصف القابل للفتح يُظهر تركيزه بوضوح لمستخدم لوحة المفاتيح */
table.tbl tbody tr:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* ============================ انقطاع الاتصال ============================= */
.offline-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 300;
  background: var(--stop);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 14px;
  transform: translateY(-100%);
  transition: transform .18s ease;
}
.offline-bar.on { transform: translateY(0); }
/* «بيانات محفوظة» ليست خطأ بل حالة: تُقال بلون التنبيه لا بلون المنع */
.offline-bar[data-kind="stale"] { background: var(--warn); color: #23180a; }

/* ============================ التنبيهات ============================= */
.toasts {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 9px 15px;
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  font-size: 13.5px;
  display: flex; align-items: center; gap: 8px;
  animation: rise .16s ease;
  max-width: 380px;
}
.toast.err { background: var(--stop); }
.toast.ok { background: var(--ok); }

.drop {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  min-width: 290px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 60;
  animation: rise .12s ease;
}
.drop .item { padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 13px; }
.drop .item:last-child { border-bottom: 0; }
/* التنبيه الذي له وجهة يصير رابطًا — ويبقى شكله شكل الصفّ لا شكل الرابط،
   فالسطر كله هدفُ لمسٍ لا كلمةٌ زرقاء فيه */
a.drop-item, .drop a.item {
  display: block; color: inherit; text-decoration: none; cursor: pointer;
  min-height: 44px;
}
.drop a.item:hover, .drop a.item:focus-visible { background: var(--surface-2); }
/* نقطةُ «جديد»: تُقرأ بالشكل واللون معًا لا باللون وحده */
.dot-new {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); margin-inline-end: 6px; vertical-align: middle;
}
.drop .item .s { font-size: 11px; color: var(--ink-3); }

/* ============================ صفحة الدخول ============================= */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
}
.login-aside {
  background: var(--brand-deep);
  color: #fff;
  padding: 54px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
}
/* شبكة قياس خفيفة كخلفية — إشارة إلى ورق المخططات */
.login-aside::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to left, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}
.login-aside > * { position: relative; z-index: 1; }
.login-aside h2 { font-size: 27px; line-height: 1.6; font-weight: 600; max-width: 15em; }
.login-aside .flow {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-block-start: 22px;
}
.login-aside .flow span {
  border: 1px solid #ffffff40;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12.5px;
}
.login-form-wrap { display: grid; place-items: center; padding: 40px 26px; }
.login-card { width: min(400px, 100%); }
.demo-users { margin-block-start: 18px; border-top: 1px solid var(--line); padding-block-start: 14px; }
/*
 * صار زرًّا لا div: يُدخل بضغطة، فيجب أن يُبلغه قارئُ الشاشة ولوحةُ
 * المفاتيح. والزرّ يرث حدًّا وخلفيّةً من المتصفّح تُنزَعان.
 */
.demo-users .u {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 9px; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: 13px;
  background: transparent; border: none;
  color: var(--ink); text-align: start;
  min-height: 40px;
}
.demo-users .u:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.demo-users .u:active { background: var(--surface-sunk); }
.demo-users .u:hover { background: var(--surface-sunk); }
.demo-users .u .r { margin-inline-start: auto; font-size: 11px; color: var(--ink-3); }

/* ============================ مساعدات ============================= */
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.inline { display: flex; align-items: center; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt { margin-block-start: 14px; }
.mb { margin-block-end: 14px; }
.hr { height: 1px; background: var(--line); margin-block: 14px; }
.note-box {
  background: var(--steel-tint);
  border: 1px solid color-mix(in srgb, var(--steel) 25%, transparent);
  color: var(--steel);
  border-radius: var(--r);
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.7;
}
.warn-box {
  background: var(--warn-tint);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--warn);
  border-radius: var(--r);
  padding: 10px 13px;
  font-size: 12.5px;
}

/* ============================ الشاشات الصغيرة ============================= */
@media (max-width: 1120px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.side { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------
   الجداول على الجوال: كل صف يصير بطاقة.
   مهندس الموقع يفتح المنصة من جواله، وجدول بتسعة أعمدة لا يُقرأ بإصبع واحد.
   العنوان يأتي من data-label الذي يضعه بناء الجدول.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  /* الشريط على الجوال: سطر هوية النسخة، ثم الأزرار مجتمعة.
     الفاصل الرأسي يفقد معناه حين تلتف الأزرار، فيُخفى. */
  .toolbar .sep { display: none; }
  .toolbar .spacer { display: none; }

  .table-wrap { overflow-x: visible; }

  table.tbl,
  table.tbl tbody,
  table.tbl tr,
  table.tbl td { display: block; width: 100%; }

  table.tbl thead { display: none; }

  table.tbl tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    padding: 10px 12px;
    margin-block-end: 10px;
    box-shadow: var(--shadow-1);
  }
  table.tbl tbody tr:hover { background: var(--surface); }

  table.tbl td {
    border: 0;
    padding: 4px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-align: start;
  }

  /* عنوان العمود يظهر بجانب القيمة بدل ترويسة الجدول */
  table.tbl td::before {
    content: attr(data-label);
    flex: none;
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 500;
  }

  /* العمود الأول عنوان البطاقة: بلا تسمية وبحجم أكبر */
  table.tbl td.primary {
    display: block;
    padding-block-end: 8px;
    margin-block-end: 6px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  table.tbl td.primary::before { display: none; }

  /* خلايا الأزرار: بلا تسمية وبعرض كامل */
  table.tbl td.no-label { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-block-start: 10px; }
  table.tbl td.no-label::before { display: none; }
  table.tbl td.no-label .btn { flex: 1 1 auto; justify-content: center; }

  table.tbl td.num { justify-content: space-between; }
  table.tbl tr.total-row td { border-bottom: 0; }

  /* ------------------------------------------------------------------
     جدول الكميات يبقى ورقة أفقية على الجوال — لأنه كذلك في طبيعته —
     لكن عمود الوصف يثبت عند التمرير، وإلا ضاع المستخدم عن أي بند يحرّر.
     ------------------------------------------------------------------ */
  table.sheet td:nth-child(2),
  table.sheet th:nth-child(2) {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
    max-width: 190px;
  }
  table.sheet th:nth-child(2) { z-index: 4; background: var(--surface-2); }
  table.sheet tr.grp td:nth-child(2) { background: var(--surface-sunk); }
  .sheet-wrap { max-height: calc(100vh - 260px); }

  /* ------------------------------------------------------------------
     النوافذ على الجوال: ورقة تصعد من الأسفل بدل مربع في المنتصف —
     اليد تصل إلى أزرارها، والمحتوى الطويل يُمرَّر بلا قصّ.
     ------------------------------------------------------------------ */
  .modal-back { padding: 0; align-items: end; }
  .modal, .modal.wide, .modal.full {
    position: relative;          /* الامتداد أسفلها يُقاس عليها هي لا على الخلفية */
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: sheet-up .2s ease;
  }
  /* الترويسة زجاج طافٍ يمرّ المحتوى تحته، لا شريط صلب يقتطع من الشاشة */
  .modal-head {
    position: sticky; top: 0; z-index: 2;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    touch-action: none;               /* السحب لنا لا للمتصفح */
    cursor: grab;
  }
  .modal-head:active { cursor: grabbing; }
  /* امتداد أسفل الورقة: الارتداد والسحب لأعلى يرفعانها عن حافة الشاشة،
     فلولا هذا الامتداد لانكشفت فجوة تحتها لحظة الحركة */
  .modal::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    height: 45vh;
    background: var(--surface);
    pointer-events: none;
  }
  .sheet-grip {
    display: block;
    width: 38px; height: 4px;
    margin: 8px auto 0;
    border-radius: 99px;
    background: var(--line-strong);
    opacity: .7;
    touch-action: none;
    cursor: grab;
  }
  /* التعتيم يتبع الإصبع أثناء السحب بدل أن يتبع الزمن */
  .modal-back { background: rgba(15, 19, 25, calc(.48 * var(--sheet-progress, 1))); }
  .modal-foot {
    position: sticky; bottom: 0;
    border-radius: 0;
    padding-block: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));  /* لا تختفي الأزرار خلف شريط النظام */
  }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
  /* الحالة النهائية مكتوبة صراحة، وإلا بقيت الورقة مزاحة للأسفل بعد انتهاء الحركة */
  @keyframes sheet-up {
    from { transform: translateY(28px); opacity: .6; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* ------------------------------------------------------------------
     شاشة الدخول على الجوال: عمود الهوية يتحول إلى ترويسة قصيرة أعلى النموذج
     بدل أن يبتلع نصف الشاشة. الشعار والجملة يبقيان — والبقية تُختصر.
     ------------------------------------------------------------------ */
  .login-page { grid-template-columns: 1fr; }
  .login-aside {
    padding: 22px 20px 24px;
    gap: 12px;
    background: linear-gradient(160deg, var(--brand-deep), var(--brand));
  }
  .login-aside h2 { font-size: 20px; line-height: 1.7; margin-block-start: 14px !important; max-width: none; }
  .login-aside .flow { margin-block-start: 12px; gap: 5px; }
  .login-aside .flow span { font-size: 11.5px; padding: 2px 9px; }
  .login-aside p { display: none; }        /* الشرح الطويل يُقرأ على الحاسب لا على شاشة الدخول في الجوال */
  .login-form-wrap { padding: 22px 18px 40px; align-items: start; }
  .login-card { width: 100%; }

  /* الشريط العلوي على الجوال: مبدّل المشروع يأخذ المساحة، والباقي يختصر */
  .topbar { gap: 8px; padding-inline: 12px; }
  .topbar .project-switch { flex: 1 1 auto; min-width: 0; }
  .topbar .project-switch .tag { display: none; }        /* رمز المشروع يظهر في لوح العنوان أصلًا */
  .topbar .who .btn,                                      /* تسجيل الخروج ينتقل إلى أسفل القائمة الجانبية */
  .topbar .icon-btn[aria-label="المظهر"],
  .topbar .icon-btn[aria-label="Theme"],
  .topbar > .btn.ghost { display: none; }                 /* واللغة كذلك — تُبدَّل مرّةً لا كلّ يوم */
  .topbar .who { padding-inline-start: 6px; }
  .mobile-only { display: flex !important; }

  /*
   * أهداف اللمس: الأصابع لا تصيب زرًا ارتفاعه ٢٦ بكسل، ولا ٣٤.
   *
   * ٤٤ أرضية موثّقة لا رقم مختار، وتتّسع داخل شريط عنوانٍ ارتفاعه ٥٨
   * فلا يتغيّر التخطيط. ومهندس الموقع يضغط وهو واقف في الشمس،
   * بيدٍ واحدة، والأخرى تحمل شيئًا.
   */
  .btn { min-height: 44px; padding-inline: 16px; }
  .btn.sm { min-height: 40px; }
  .nav-item { padding-block: 10px; }
  .tab { padding: 11px 15px; }
  .icon-btn { width: 44px; height: 44px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }  /* 16px يمنع تكبير الصفحة تلقائيًا في iOS، و٤٤ أرضية الإبهام */
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 258px;
    /* آخر القائمة تسجيل الخروج — ولا يقع تحت شريط النظام في أسفل الشاشة */
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 90;
    transform: translateX(0);
    transition: transform .18s ease;
    box-shadow: var(--shadow-2);
  }
  /* القائمة تنزلق من جهة بداية السطر: يمينًا في العربية ويسارًا في الإنجليزية */
  html[dir="rtl"] .sidebar:not(.open) { transform: translateX(100%); }
  html[dir="ltr"] .sidebar:not(.open) { transform: translateX(-100%); }
  .menu-btn { display: grid !important; }
  .content { padding: 16px 14px 60px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: minmax(0, 1fr); }
  .project-switch { min-width: 0; flex: 1; }
  .who-name, .who-role { display: none; }
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-summary {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
    list-style: none;
    min-height: 44px;
  }
  .tb-summary::-webkit-details-marker { display: none; }
  .tb-summary .code { flex: 0 0 auto; white-space: nowrap; }
  .tb-summary .nm {
    font-weight: 600; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tb-summary .pc { color: var(--ink-3); font-size: 13px; }
  .tb-summary::after { content: "⌄"; color: var(--ink-3); font-size: 15px; line-height: 1; }
  .titleblock-fold[open] > .tb-summary {
    border-radius: var(--r) var(--r) 0 0;
    border-block-end: 0;
  }
  .titleblock-fold[open] > .tb-summary::after { content: "⌃"; }
  .titleblock-fold[open] > .titleblock {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  .tb-summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .scrim { position: fixed; inset: 0; background: #0008; z-index: 80; }
}

.menu-btn { display: none; }
/* عناصر تظهر على الجوال فقط (مثل تسجيل الخروج في أسفل القائمة) */
.mobile-only { display: none; }

@media print {
  .sidebar, .topbar, .page-actions, .toolbar { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .content { padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ============================ تقليل الحركة ============================= */
/* من ضبط جهازه على تقليل الحركة يرى الواجهة نفسها بلا انزلاق ولا وميض */
/*
 * ------------------------------------------------------------------
 * تفضيلات العرض — ثلاث إشارات مستقلّة يرسلها النظام
 * ------------------------------------------------------------------
 */

/*
 * ١) الحركة المخفَّضة.
 *
 * «مخفَّضة» لا تعني «ملغاة». من طلبها يتضرّر من الانزلاق والارتداد
 * والتوازي — لا من تغيّر لونٍ يقول له إن الزرّ استُقبل. وإلغاء كل شيء
 * بـ`.001ms` يسلبه التغذية الراجعة كلّها، فيضغط ولا يدري أوصل ضغطه أم لا.
 *
 * فالانتقالات المكانية تُلغى، والبصرية تبقى وتُقصَّر.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity, background-color, border-color, color !important;
    transition-duration: 120ms !important;
  }
  /* والإزاحة تُلغى — وهي ما يُتعب صاحب الحساسية الدهليزية */
  .btn:active, .card:hover { transform: none !important; }
}

/*
 * ٢) الشفافية المخفَّضة.
 *
 * الزجاج جميلٌ لمن يراه، وحجابٌ لمن لا يميّز الحوافّ. فيصير السطح صلبًا
 * ويُرفع الطمس — ويبقى الحدّ ليُعرف أين ينتهي السطح ويبدأ ما تحته.
 */
@media (prefers-reduced-transparency: reduce) {
  .modal-head, .drop, .sheet, .toolbar {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--line);
  }
}

/*
 * ٣) التباين الأعلى.
 *
 * من طلبه لا يرى الحدّ الرفيع ولا النصّ الباهت. فتُثخَّن الحدود ويُرفع
 * الباهت إلى لون النصّ الأساسي — ولا يُترك حدٌّ شفّاف على سطحٍ شفّاف.
 */
@media (prefers-contrast: more) {
  :root { --line: color-mix(in srgb, var(--ink) 45%, transparent); }
  .btn, .card, input, select, textarea { border-width: 2px; }
  .muted, .small.muted { color: var(--ink-2); }
  .modal-head, .drop { background: var(--surface) !important; backdrop-filter: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   عارض المخططات
   المخطط يملأ المساحة، والأدوات شريط واحد أسفله لا لوحات تحيط به.
   ══════════════════════════════════════════════════════════════════ */

.plan-stage {
  position: relative;
  flex: 1;
  min-height: 320px;
  display: flex;
  background: var(--bg);
  overflow: hidden;
}

.cad-view { position: absolute; inset: 0; }

.cad-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;              /* التحريك والتقريب لنا لا للمتصفح */
}
.cad-canvas:active { cursor: grabbing; }

.plan-loading,
.plan-note {
  margin: auto;
  padding: 28px;
  max-width: 460px;
  text-align: center;
  color: var(--muted);
}
.plan-note p:first-child { color: var(--ink); margin-block-end: 6px; }
.plan-note .btn { margin-block-start: 14px; }

.plan-frame, .plan-image {
  width: 100%; height: 100%;
  border: 0;
  object-fit: contain;
  background: var(--bg);
}

.plan-foot {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.plan-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-tools .btn { min-width: 38px; }

.plan-status {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}
.plan-status.muted { color: var(--muted); font-weight: 400; }

/* لوحة الطبقات تطفو فوق المخطط: تُفتح عند الحاجة ولا تقتطع من مساحته */
.plan-layers {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 230px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-pop);
  display: none;
}
.plan-layers.open { display: block; }
.plan-layers-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding-block-end: 8px;
  margin-block-end: 6px;
  border-bottom: 1px solid var(--line);
}
.plan-layer {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 2px;
  font-size: 13px;
  cursor: pointer;
}
.plan-layer span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: ltr; text-align: start;
}
.plan-layer:hover { color: var(--accent); }

.plan-format { display: flex; align-items: center; gap: 10px; }

@media (max-width: 720px) {
  .modal.full { height: 92vh; }
  .plan-layers { inset-inline: 12px; width: auto; }
  .plan-foot { gap: 8px; }
  .plan-tools { flex: 1; }
}


/* حقل المبالغ: الفواصل تُقرأ بلمحة، والأرقام تصطف بعرض ثابت فلا ترقص وأنت تكتب */
.amount-field { display: contents; }
input.amount {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  direction: ltr;
  text-align: start;
}

/* عنوان الجهة في قائمة الدخول: يفصل أطراف المشروع فلا تختلط الأسماء */
.demo-users .side-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-block: 12px 4px;
  padding-inline-start: 2px;
}
.demo-users .side-lbl:first-of-type { margin-block-start: 0; }


/* ══════════════════════════════════════════════════════════════════
   الجدول الزمني
   الجواب أولًا: رقم كبير يقرؤه المالك من بعيد، ثم التفصيل لمن أراده.
   ══════════════════════════════════════════════════════════════════ */

.timeline-head { display: grid; gap: 18px; }

.th-main { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.th-num {
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.timeline-head.late .th-num { color: var(--stop, #c0392b); }
.th-label .l1 { font-size: 15px; font-weight: 600; line-height: 1.5; }
.th-label .l2 { font-size: 13px; color: var(--muted); margin-block-start: 2px; }

.th-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  padding-block-start: 14px;
  border-top: 1px solid var(--line);
}
.th-fact .k { font-size: 12px; color: var(--muted); margin-block-end: 3px; }
.th-fact .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.th-fact .v.ok { color: var(--ok, #1e8e5a); }
.th-fact .v.warn { color: var(--warn, #b8860b); }
.th-fact .v.stop { color: var(--stop, #c0392b); }
.th-note { margin: 0; }

/* ── الشريط ── */
.tl-wrap { display: grid; gap: 10px; }
.tl-ends { display: flex; justify-content: space-between; gap: 12px; }
.tl-ends .k { font-size: 12px; color: var(--muted); }
.tl-ends .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-ends .end { text-align: end; }

.tl-track {
  position: relative;
  height: 58px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  overflow: hidden;
}
/* المدة المنقضية طبقة خافتة، والعمل المنجَز فوقها — الفرق بينهما يُرى بلا شرح */
.tl-elapsed { position: absolute; inset-block: 0; inset-inline-start: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.tl-done { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 6px; background: var(--brand); }

.tl-phase {
  position: absolute;
  inset-block-start: 8px;
  height: 26px;
  min-width: 3px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  display: flex; align-items: center;
  padding-inline: 6px;
  overflow: hidden;
}
.tl-phase span {
  font-size: 11px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  color: var(--ink);
}
.tl-phase.done { background: color-mix(in srgb, var(--ok, #1e8e5a) 25%, transparent); border-color: var(--ok, #1e8e5a); }
.tl-phase.overdue { background: color-mix(in srgb, var(--stop, #c0392b) 22%, transparent); border-color: var(--stop, #c0392b); }

.tl-today { position: absolute; inset-block: 0; width: 2px; background: var(--accent); }
.tl-today span {
  position: absolute; inset-block-start: 0;
  transform: translateX(-50%);
  font-size: 10px; font-weight: 600;
  background: var(--accent); color: #fff;
  padding: 1px 6px; border-radius: 0 0 4px 4px;
  white-space: nowrap;
}

.tl-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.tl-legend .sw {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-inline-end: 6px; vertical-align: -2px;
}
.tl-legend .sw.elapsed { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.tl-legend .sw.done { background: var(--brand); }
.tl-legend .sw.planned { background: var(--muted); }
.tl-legend .sw.actual { background: var(--brand); }

/* ── المراحل ── */
.ms-list { display: grid; gap: 2px; }
.ms-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(120px, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.ms-row:last-child { border-bottom: 0; }
.ms-row.overdue { background: color-mix(in srgb, var(--stop, #c0392b) 4%, transparent); }
.ms-name .t { font-weight: 600; }
.ms-name .s { margin-block-start: 2px; }

.ms-bar {
  position: relative;
  height: 20px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
.ms-fill { height: 100%; background: var(--brand); border-radius: 10px; transition: width .3s ease; }
.ms-pct {
  position: absolute; inset-block: 0; inset-inline-end: 8px;
  display: flex; align-items: center;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}

.ms-side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ── المنحنى ── */
svg.curve { width: 100%; height: auto; display: block; }

@media (max-width: 720px) {
  .ms-row { grid-template-columns: 1fr; gap: 8px; }
  .ms-side { justify-content: flex-start; }
  .tl-track { height: 46px; }
  .tl-phase span { display: none; }
}

/* إسناد الموظفين: صفّ واحد لكل موظف، والمربّع هو القرار كله */
.assign-list { display: grid; gap: 2px; }
.assign-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.assign-row:last-child { border-bottom: 0; }
.assign-row:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.assign-row.on .body .t { font-weight: 600; }
.assign-row input[type=checkbox] { width: 18px; height: 18px; flex: none; }
.assign-row input:disabled { opacity: .45; cursor: default; }
.assign-row .body { min-width: 0; }
.assign-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ملّاك المشروع: من هو، وما يملكه، في سطر واحد */
.owner-list { display: grid; gap: 2px; }
.owner-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.owner-row:last-child { border-bottom: 0; }
.owner-row .t { font-weight: 600; }
.owner-row .s { margin-block-start: 2px; }
.owner-row .perms { display: flex; gap: 6px; flex-wrap: wrap; }

/* مجموعات الصلاحيات في النافذة */
.perm-group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.perm-group + .perm-group { margin-block-start: 10px; }
.perm-group .g-title {
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin-block-end: 8px;
}
.perm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; cursor: pointer; font-size: 14px;
}
.perm-row:hover { color: var(--accent); }
.perm-row input { width: 17px; height: 17px; flex: none; }

@media (max-width: 720px) {
  .owner-row { grid-template-columns: 1fr; gap: 8px; }
}

/* زرّ يقرأ كشارة: يقول الحالة ويُفتح للتعديل */
.badge-btn {
  border-radius: 999px;
  font-size: 12px;
  padding-inline: 12px;
}
.badge-btn.ok { color: var(--ok, #1e8e5a); border-color: color-mix(in srgb, var(--ok, #1e8e5a) 40%, transparent); }
.badge-btn.warn { color: var(--warn, #b8860b); border-color: color-mix(in srgb, var(--warn, #b8860b) 40%, transparent); }
.badge-btn.stop { color: var(--stop, #c0392b); border-color: color-mix(in srgb, var(--stop, #c0392b) 40%, transparent); }


/* ══════════════════════════════════════════════════════════════════
   المواد والاختيارات
   الخيارات جنبًا إلى جنب ليقارنها المالك بعينه، ولكل خيار وسمان:
   قرار الاستشاري وقرار المالك — لا يُدمجان في وسم واحد.
   ══════════════════════════════════════════════════════════════════ */

.mat-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-block-end: 12px;
  border-bottom: 1px solid var(--line);
}
.mat-title { font-size: 18px; font-weight: 600; line-height: 1.5; }

.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.opt-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
  background: var(--surface);
}
/* الخيار الذي اجتمع عليه القراران يُرى من بعيد */
.opt-card.approved {
  border-color: var(--ok, #1e8e5a);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok, #1e8e5a) 35%, transparent);
}

.opt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opt-label { font-weight: 600; line-height: 1.5; }

.opt-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}
.opt-facts dt { color: var(--muted); }
.opt-facts dd { margin: 0; font-variant-numeric: tabular-nums; }

.opt-verdicts {
  display: grid; gap: 6px;
  padding-block-start: 10px;
  border-top: 1px solid var(--line);
}
.verdict { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verdict .w {
  font-size: 12px; color: var(--muted);
  min-width: 46px;
}
.verdict .n {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.opt-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.note-box.ok {
  border-color: color-mix(in srgb, var(--ok, #1e8e5a) 40%, transparent);
  background: color-mix(in srgb, var(--ok, #1e8e5a) 7%, transparent);
}

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


/* ══════════════════════════════════════════════════════════════════
   لوحة المالك
   الجواب أولًا ورقمًا كبيرًا، ثم ما ينتظر قراره، ثم ما دون ذلك.
   ══════════════════════════════════════════════════════════════════ */

.owner-hero { display: grid; gap: 16px; }
.oh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.oh-name { font-size: 20px; font-weight: 600; line-height: 1.5; }

.oh-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.oh-num .n {
  font-size: clamp(38px, 9vw, 58px);
  font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.owner-hero.late .oh-num .n { color: var(--stop, #c0392b); }
.oh-num .u { font-size: 15px; font-weight: 600; }

.oh-meter { display: grid; gap: 6px; }
.oh-meter-row { display: flex; justify-content: space-between; gap: 10px; }

.oh-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  padding-block-start: 14px;
  border-top: 1px solid var(--line);
}
.oh-fact .k { font-size: 12px; color: var(--muted); margin-block-end: 3px; }
.oh-fact .v { font-size: 15px; font-weight: 600; }
.oh-fact .v.stop { color: var(--stop, #c0392b); }

/* ما ينتظر قرارك: صفوف كبيرة تُضغط بإبهام واحد */
.dec-head { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; }
.dec-head h3 { flex: 1; }
.dec-list { display: grid; gap: 2px; }

.dec-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 10px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none; color: inherit;
  text-align: start; cursor: pointer;
  font: inherit;
  border-radius: var(--r-sm);
}
.dec-item:last-child { border-bottom: 0; }
.dec-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dec-item.overdue { background: color-mix(in srgb, var(--stop, #c0392b) 5%, transparent); }
.dec-item .i {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: 15px;
}
.dec-item .b { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dec-item .tt { font-weight: 600; }
.dec-item .ss { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dec-item .go { color: var(--muted); font-size: 20px; }

.nothing-waiting { display: flex; align-items: center; gap: 14px; }
.nothing-waiting .tick {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok, #1e8e5a) 14%, transparent);
  color: var(--ok, #1e8e5a);
  font-size: 18px;
}
.nothing-waiting .tt { font-weight: 600; }

/* مربّعات الملخّص */
.sum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.sum-tile {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px;
  text-align: start;
  cursor: pointer;
  font: inherit; color: inherit;
  display: grid; gap: 3px; align-content: start;
}
.sum-tile:disabled { cursor: default; opacity: .75; }
.sum-tile:not(:disabled):hover { border-color: var(--accent); }
.sum-tile .sv { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sum-tile .sl { font-size: 13px; line-height: 1.5; }
.sum-tile.warn .sv { color: var(--warn, #b8860b); }
.sum-tile.ok .sv { color: var(--ok, #1e8e5a); }

.sum-money {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px;
  display: grid; gap: 8px;
}
.sum-money .mrow {
  display: flex; justify-content: space-between; gap: 12px;
  font-variant-numeric: tabular-nums;
}

/* سطر المشكلة في التقرير اليومي: يُرى ولا يُخفى */
.issue-line {
  margin-block-start: 6px;
  padding: 6px 10px;
  border-inline-start: 3px solid var(--warn, #b8860b);
  background: color-mix(in srgb, var(--warn, #b8860b) 7%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.img-failed {
  display: grid; place-items: center;
  min-height: 90px;
  background: var(--surface-sunk, color-mix(in srgb, var(--ink) 5%, transparent));
}


/* ══════════════════════════════════════════════════════════════════
   تقرير اليوم من الجوال
   بيدٍ واحدة وفي الشمس: أهداف لمسٍ كبيرة، وزرّ الإرسال أسفل الإبهام.
   ══════════════════════════════════════════════════════════════════ */

.today-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-inline-start: 4px solid var(--brand);
}
.today-strip.done { border-inline-start-color: var(--ok, #1e8e5a); }
.today-strip .ts-body { flex: 1; min-width: 180px; }
.today-strip .ts-title { font-weight: 600; font-size: 15px; }
.today-strip .ts-btn { min-height: 48px; padding-inline: 20px; }

.quick { display: grid; gap: 8px; }
.quick .q-label {
  font-size: 13px; font-weight: 600;
  margin-block-start: 8px;
}
.quick .q-label:first-of-type { margin-block-start: 0; }
/* حجم الخط ١٦ بكسل فأكثر، وإلا كبّر سفاري الصفحة عند التركيز ولم يعدها */
.quick textarea {
  font-size: 16px;
  line-height: 1.7;
  min-height: 56px;
}

/* شرائح الطقس: اختيار بضغطة بدل كتابة بلوحة مفاتيح */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: inherit; font: inherit; font-size: 14px;
  cursor: pointer;
}
.chip.on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  font-weight: 600;
}

/* شريط الصور الملتقطة */
.shots { display: flex; gap: 8px; flex-wrap: wrap; }
.shots:empty { display: none; }
.shot { position: relative; width: 84px; height: 84px; }
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  display: block;
}
.shot .x {
  position: absolute;
  inset-block-start: -8px; inset-inline-end: -8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--ink); color: var(--surface);
  font-size: 13px; line-height: 1;
  cursor: pointer;
}
/* هدف اللمس أوسع من الدائرة المرئية: الإصبع أعرض من ثمانية وعشرين بكسل */
.shot .x::after { content: ''; position: absolute; inset: -10px; }

.btn.shoot {
  min-height: 52px;
  width: 100%;
  justify-content: center;
  gap: 10px;
  border-style: dashed;
  font-size: 15px;
}
.btn.shoot .cam { font-size: 18px; color: var(--brand); }

/* الإرسال يملأ العرض ويقع أسفل الشاشة — حيث يصل الإبهام بلا تغيير قبضة */
.q-foot { width: 100%; }
.btn.send {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 720px) {
  .today-strip { flex-direction: column; align-items: stretch; }
  .today-strip .ts-btn { width: 100%; }
  .shot { width: 76px; height: 76px; }
}

/* ------------------------------------------------------------------
   خيط الدعم الفني
   ------------------------------------------------------------------
   رسالتنا ورسالتهم تُميَّزان بموضعٍ ولون، لا بتسميةٍ تُقرأ. فمن فتح
   التذكرة بعد أسبوع عرف من قال ماذا بنظرةٍ واحدة.

   والملاحظة الداخلية تُوسَم وسمًا لا يُخطئه أحد — فمن يكتب فيها يكتب
   وهو موقنٌ أنها لا تخرج، ومن يقرأ لا يظنّها أُرسلت.
   ------------------------------------------------------------------ */
.thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px 2px;
  margin-block: 10px;
}
.thread .msg {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 12px;
  max-width: 88%;
  align-self: flex-start;
}
.thread .msg.staff {
  background: var(--brand-tint);
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
  align-self: flex-end;
}
.thread .msg.internal {
  background: var(--warn-tint);
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
  border-inline-start-width: 3px;
}
.thread .msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.thread .msg-head .when { color: var(--ink-3); font-size: 11.5px; }
.thread .msg-body { white-space: pre-wrap; line-height: 1.7; font-size: 14px; }
.thread-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------------
   زرّ الملاحظة — حاضرٌ في كل شاشة
   ------------------------------------------------------------------
   المنصّة في فترة تعديل، والملاحظة التي لا تُكتب لحظتها لا تُكتب أبدًا.
   فالزرّ في الجهة المقابلة للإبهام الغالب وفوق الشريط السفلي: لا يُغطّي
   زرًّا أساسيًّا، ولا يُضغط سهوًا.
   ------------------------------------------------------------------ */
.fb-btn {
  position: fixed;
  inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 16px;
  z-index: 300;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px; padding: 0 18px;
  background: var(--steel); color: #fff;
  border: none; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
  cursor: pointer;
}
.fb-btn span { font-size: 16px; line-height: 1; }
.fb-btn:hover { background: #17414f; }
.fb-btn:active { background: #17414f; transform: translateY(1px); }

.fb-sheet { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; }
.fb-back { position: absolute; inset: 0; background: rgba(20, 24, 31, .45); }
.fb-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--surface);
  border-radius: 14px 14px 0 0;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 34px rgba(0, 0, 0, .28);
}
@media (min-width: 720px) {
  .fb-sheet { align-items: center; }
  .fb-card { border-radius: 14px; }
}

.fb-head { margin-bottom: 16px; }
.fb-head b { display: block; font-size: 16.5px; line-height: 1.5; }
.fb-head span { font-size: 13px; color: var(--ink-3); line-height: 1.6; }

.fb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.fb-chip {
  font: inherit; font-size: 13.5px;
  min-height: 40px; padding: 0 16px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 999px;
  cursor: pointer;
}
.fb-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }

.fb-form textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.7;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  resize: vertical; min-height: 110px;
}
.fb-where {
  margin-block-start: 9px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6;
}
.fb-actions { display: flex; gap: 9px; justify-content: flex-end; margin-block-start: 16px; }

/* الزرّ لا يُطبع ولا يظهر في لقطة */
@media print { .fb-btn, .fb-sheet { display: none !important; } }

/* صفُّ العرض أثناء الدخول: مُعطَّلٌ ومُعلَنٌ أنّه يعمل */
.demo-users .u[disabled] { opacity: .55; cursor: default; }
.demo-users .u[aria-busy="true"] { opacity: 1; background: var(--surface-sunk); }
.demo-users .u[aria-busy="true"] .r { color: var(--brand); font-weight: 600; }

/* ── بحث الشريط العلوي ── */
.search-wrap{position:relative;flex:0 1 320px;min-width:0}
.topbar-search{width:100%;min-height:40px;padding:8px 14px;border:1px solid var(--line,#d9dee5);border-radius:999px;
  background:var(--paper-2,#f6f7f9);font:inherit;font-size:14px;color:inherit}
.topbar-search:focus{outline:2px solid var(--brand,#7a1f3d);outline-offset:1px;background:#fff}
.search-results{position:absolute;inset-inline-start:0;inset-inline-end:0;top:calc(100% + 6px);z-index:320;
  background:#fff;border:1px solid var(--line,#d9dee5);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.16);
  max-height:60vh;overflow:auto;padding:6px}
.search-results[hidden]{display:none!important}
.search-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;min-height:48px;
  padding:8px 12px;border:none;background:none;border-radius:10px;font:inherit;text-align:start;cursor:pointer;color:inherit}
.search-row:hover,.search-row:focus{background:var(--paper-2,#f3f4f6);outline:none}
.search-kind{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--brand-soft,#f4e6eb);color:var(--brand,#7a1f3d);white-space:nowrap}
.search-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-meta{font-size:12px;color:var(--muted,#6b7480);font-variant-numeric:tabular-nums;white-space:nowrap}
.search-empty{padding:14px;color:var(--muted,#6b7480);text-align:center}
@media (max-width:760px){.search-wrap{flex-basis:44px}.topbar-search{padding-inline:10px}.topbar-search::placeholder{color:transparent}}

/* ── الملخّص الذكي ── */
.brief-body{margin-top:14px;display:grid;gap:8px}
.brief-body[hidden]{display:none!important}
.brief-line{padding:10px 14px;border-inline-start:3px solid var(--brand,#7a1f3d);background:var(--paper-2,#f6f7f9);border-radius:10px;line-height:1.8}

/* شعار المنشأة مكان الحرف */
.brand-mark.has-logo{background:#fff;padding:3px;overflow:hidden}
.brand-mark.has-logo img{width:100%;height:100%;object-fit:contain;display:block}

/* ── التدفّق النقدي ── */
.cf-table{display:grid;gap:2px}
.cf-head,.cf-row{display:grid;grid-template-columns:110px 1fr 1fr 130px;gap:10px;align-items:center;padding:8px 6px}
.cf-head{font-size:12px;color:var(--muted,#6b7480);border-bottom:1px solid var(--line,#e6e9ee)}
.cf-row{border-radius:10px;cursor:pointer;min-height:44px}
.cf-row:hover,.cf-row:focus{background:var(--paper-2,#f6f7f9);outline:none}
.cf-month{font-weight:600;white-space:nowrap}
.cf-bar-wrap{position:relative;height:22px;background:var(--paper-2,#f1f3f6);border-radius:6px;overflow:hidden}
.cf-bar{position:absolute;inset-block:0;inset-inline-start:0;border-radius:6px}
.cf-bar.in{background:var(--ok,#1f7a4d)}
.cf-bar.out{background:var(--brand,#7a1f3d);opacity:.75}
.cf-val{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink,#16202c);text-shadow:0 0 6px #fff}
.cf-cum{font-variant-numeric:tabular-nums;font-weight:600;text-align:end}
.cf-cum.neg{color:var(--stop,#a4262c)}
.cf-detail{padding:4px 12px 10px 130px;display:grid;gap:4px}
.cf-detail[hidden]{display:none!important}
.cf-line{display:grid;grid-template-columns:10px 1fr auto auto;gap:10px;align-items:center;font-size:13px}
.cf-line .dot{width:8px;height:8px;border-radius:50%;background:var(--ok,#1f7a4d)}
.cf-line .dot.out{background:var(--brand,#7a1f3d)}
@media (max-width:760px){.cf-head,.cf-row{grid-template-columns:80px 1fr 1fr 96px;gap:6px}.cf-detail{padding-inline-start:12px}.cf-val{font-size:11px}}

/* صفّ تفعيل الإشعارات في الجرس */
.drop .push-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper-2,#f6f7f9)}
.drop .push-row .s{flex:1;line-height:1.6}

/* ══════════════════════════════════════════════════════════════════
   الجوال: الشريط السفلي، والقائمة الجانبية المسحوبة، والبحث الطافي
   ------------------------------------------------------------------
   الإبهام يصل إلى أسفل الشاشة لا إلى زاويتها العليا. فأكثر ما يُفتح
   يوميًّا يُوضع حيث تصل اليد، والقائمة الكاملة خلف «المزيد».
   ══════════════════════════════════════════════════════════════════ */
:root { --tabbar: 62px; }

.tabbar { display: none; }

/* الشريط العلوي زجاجٌ يمرّ المحتوى تحته — سطح واحد لا شريط صلب */
.topbar {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* عنصر القائمة يستجيب في لحظة الضغط كالصفّ والزرّ */
.list-item:active,
.tab-link:active {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  transition: background 60ms ease-out;
}

/* التنبيه يُغلق بلمسة — لا انتظار ثلاث ثوانٍ فوق ما تقرأ */
.toast { cursor: pointer; }

@media (max-width: 860px) {
  .tabbar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 70;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--line);
  }
  .tab-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: var(--tabbar);
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    border: 0; background: none; font-family: inherit; cursor: pointer;
  }
  .tab-link .ico { font-size: 20px; line-height: 1; }
  /* الفعّال بقناتين: لونٌ ووزن — لا لونٌ وحده */
  .tab-link.active { color: var(--brand); font-weight: 700; }
  .tab-link.active .ico { transform: translateY(-1px); }
  .tab-link .count {
    position: absolute;
    top: 7px; inset-inline-start: calc(50% + 6px);
    min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 9px;
    background: var(--stop); color: #fff;
    font-family: var(--font-data); font-size: 10.5px; line-height: 17px;
    text-align: center;
  }

  /* المحتوى والأزرار الطافية ترتفع فوق الشريط */
  .content { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 24px); }
  .fb-btn { inset-block-end: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 12px); }
  .toasts { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 12px); }
  .modal-back { z-index: 100; }

  /* القائمة الجانبية تُسحب لتُغلق: الانتقال يُطفأ حين تمسكها اليد، والتمرير الرأسيّ يبقى للمتصفّح */
  .sidebar { touch-action: pan-y; }
  .sidebar.dragging { transition: none; }
  .grid.side { grid-template-columns: minmax(0, 1fr); }
  .scrim {
    opacity: var(--drawer-progress, 1);
    transition: opacity .18s ease;
  }
  .scrim.dragging { transition: none; }

  /* زرّ القائمة في الأعلى ما عاد لازمًا: «المزيد» في الأسفل يقوم مقامه */
  .menu-btn { display: none !important; }

  /*
   * البحث: عدسةٌ في الشريط، وحين تُضغط يتّسع الحقل فوق الشريط كلّه.
   *
   * والعدسة على الغلاف لا على الحقل: قاعدةُ `input[type="search"]`
   * أقوى من قاعدة الصنف، فخلفيّةُ الحقل ليست لنا. وكان الحقل على الهاتف
   * مربّعًا أبيض فارغًا — بلا نصٍّ ولا رمزٍ يقول إنّه بحث.
   */
  .search-wrap { flex-basis: 44px; }
  .search-wrap::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 44px;
    margin-block: auto;
    height: 20px;
    background-color: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / 20px no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / 20px no-repeat;
    pointer-events: none;
  }
  input.topbar-search { padding-inline: 0; min-height: 44px; }
  .search-wrap:focus-within {
    position: absolute;
    inset-inline: 12px;
    top: 7px;
    z-index: 45;
    flex-basis: auto;
  }
  .search-wrap:focus-within::after { inset-inline-start: auto; inset-inline-end: 0; }
  .search-wrap:focus-within input.topbar-search { padding-inline: 16px 44px; }
  .search-wrap:focus-within .topbar-search::placeholder { color: var(--ink-3); }

  /* الأرقام الكبيرة أربعةً في عمود تدفع «إجراءات تنتظرك» إلى أسفل الشاشة.
     اثنان في السطر يكفيان لأن يُقرأ الرقم بلمحة ويُرى ما ينتظر بلا تمرير.
     والقاعدة لكل شبكةٍ أرقامُها بطاقاتُ مؤشّرات — لا للوحة المحفظة وحدها */
  .grid.kpis,
  .grid.c3:has(> .kpi),
  .grid.c4:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .grid.kpis .kpi,
  .grid.c3:has(> .kpi) .kpi,
  .grid.c4:has(> .kpi) .kpi { padding: 12px 12px 10px; }
  .grid.kpis .kpi .v,
  .grid.c3:has(> .kpi) .kpi .v,
  .grid.c4:has(> .kpi) .kpi .v { font-size: 21px; }
  .grid.kpis .kpi .note,
  .grid.c3:has(> .kpi) .kpi .note,
  .grid.c4:has(> .kpi) .kpi .note { display: none; }
  .kpi .k { font-size: 12.5px; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar, .tabbar { background: var(--surface) !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  .topbar, .tabbar { background: var(--surface) !important; backdrop-filter: none !important; }
}
@media print { .tabbar, .scrim { display: none !important; } }


/* ══════════════════════════════════════════════════════════════════
   شريط التبويبات على الهاتف
   ------------------------------------------------------------------
   ستة عشر تبويبًا لا تتّسع لها شاشة. فالشريط يُمرَّر أفقيًّا، ويبقى
   ملتصقًا تحت الشريط العلوي كي لا يضيع صاحبه في صفحةٍ طويلة، وتُخفى
   شريطة التمرير لأنّها تحت الإصبع لا تحت الفأرة.
   ══════════════════════════════════════════════════════════════════ */
/* بلا `scroll-behavior: smooth`: زحّ التبويب عند فتح الشاشة يجب أن يكون
   واقعًا قبل أوّل إطار، لا حركةً يراها المستخدم فيظنّ الشريط انزلق وحده */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

@media (max-width: 860px) {
  .tabs {
    position: sticky;
    top: var(--topbar);
    z-index: 30;
    margin-inline: -14px;
    padding-inline: 14px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    /* التلاشي عند الحافّة يقول إنّ وراءها تبويباتٍ أخرى — أصدق من شريطةٍ مخفيّة */
    mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .tab { padding: 12px 14px; }
}

@media (prefers-reduced-transparency: reduce) {
  .tabs { background: var(--surface) !important; backdrop-filter: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   الاشتراك والباقات
   ------------------------------------------------------------------
   السعر يُقرأ بلمحة، والاستهلاك يُرى قبل أن يضيق، والباقة القائمة
   تُعرف بلا قراءة — بحدٍّ ملوّن ووسمٍ فوقها.
   ══════════════════════════════════════════════════════════════════ */
.plan-now {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-block-end: 6px;
}
.plan-now-name { font-size: 19px; font-weight: 600; line-height: 1.5; }
.plan-now-price { font-size: 22px; font-weight: 700; }
.plan-now-price .per, .plan-price .per { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

.use-row { margin-block-start: 10px; }
.use-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; margin-block-end: 5px;
}

.plans-body { padding: 16px 18px 18px; }
.plans-bar { display: flex; justify-content: center; margin-block-end: 16px; }
.cycle-seg button { min-height: 38px; padding-inline: 16px; }
.plans-foot { margin-block-start: 14px; text-align: center; line-height: 1.9; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.plan-card.popular { border-color: color-mix(in srgb, var(--brand) 42%, transparent); box-shadow: var(--shadow-1); }
.plan-card.current { border-color: var(--ok); background: var(--surface-2); }
.plan-flag {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: 14px;
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.7;
}
.plan-flag.now { background: var(--ok); }
.plan-name { font-size: 16px; font-weight: 600; line-height: 1.6; }
.plan-price { font-size: 24px; font-weight: 700; line-height: 1.35; }
.plan-save { font-size: 12px; color: var(--ok); font-weight: 600; }
.plan-lines { list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.plan-lines li { display: flex; gap: 7px; line-height: 1.7; }
.plan-lines li::before { content: "✓"; color: var(--ok); flex: none; font-weight: 700; }
.plan-note { line-height: 1.8; min-height: 2.6em; }
.plan-card .btn { margin-block-start: auto; justify-content: center; }

@media (max-width: 700px) {
  .plans-body { padding: 14px 12px 16px; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .cycle-seg { width: 100%; }
  .cycle-seg button { flex: 1; }
}


/* مخفيٌّ بصريًّا، مقروءٌ لقارئ الشاشة */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}


/* عنوان فرعيّ داخل مجموعة المشروع: أخفّ من عنوان المجموعة، ويترك نفَسًا فوقه */
.nav-sub {
  font-size: 10.5px;
  color: var(--ink-3);
  padding-inline: 10px;
  margin: 10px 0 2px;
  font-weight: 600;
  letter-spacing: 0;
}


/* سطر الخصوصية والشروط تحت نموذج التسجيل */
.legal-line { text-align: center; margin-block-start: 12px; line-height: 1.9; }
.legal-line a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }


/* شريط «نسخة جديدة»: يُعلن ولا يفرض — فوق الشريط السفليّ على الجوال */
.update-bar {
  position: fixed;
  inset-inline: 12px;
  inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 350;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: var(--ink); color: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  font-size: 13.5px;
  max-width: 460px; margin-inline: auto;
}
.update-bar .btn { background: var(--surface); color: var(--ink); border-color: transparent; }
@media (max-width: 860px) {
  .update-bar { inset-block-end: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 12px); }
}
@media print { .update-bar { display: none !important; } }