/* =====================================================================
   نظام المستخلصات — نظام التصميم  v1.0
   ---------------------------------------------------------------
   الاتجاه: لغة الرسم الهندسي والحصر — حبر أزرق داكن على ورق بارد،
   ولون نحاسي واحد للتمييز (لون علامات الموقع وأدوات المساحة).
   العنصر المميّز: «مسطرة القياس» — أشرطة التقدّم مرسومة بعلامات
   تدريج كعصا المساحة، لأن جوهر المستخلص هو قياس المنفَّذ.
   ===================================================================== */

/* ------------------------------ 1) الرموز ------------------------------ */
/* ------------------------------ 1) الرموز ------------------------------ */
:root{
  /* اللون المميّز — أزرق مخضر داكن: رصانة مالية بشخصية مستقلة */
  /* 🔑 قاعدة اللون: كل لون له معنى ثابت في النظام كله.
     لو لوّنّا للتزيين تعلّم المستخدم أن اللون بلا دلالة، فيتجاهله يوم
     نلوّن به شيئاً مهمّاً فعلاً.
       زمرّدي  → مال مستحق للمقاول
       نحاسي   → محتجز أو معلّق (ليس خطأ، وليس نهائياً)
       أحمر    → يحتاج تصرّفاً منك
       أخضر    → تمّ: مصروف أو معتمد
       رمادي   → معلومة خارج الحساب */
  --acc:        #0E6E5C;
  --acc-2:      #0A5748;
  --acc-3:      #08483C;
  --acc-tint:   #E6F2EF;
  --acc-line:   #B3D9CF;
  /* 🔑 القائمة رمادية غامقة محايدة لا ملوّنة: اللون فيها كان سيزاحم
     ألوان البطاقات ويُفقدها دلالتها. الحياد هنا يجعل كل لون في
     المحتوى مسموعاً. */
  --side-bg:    #1F2229;
  --side-bg-2:  #2A2E37;
  --side-txt:   #C3C7CE;
  --side-dim:   #8A9099;
  --acc-deep:   #1F2229;
  --acc-soft:   #8A9099;

  /* نحاسي — المحتجز والمعلّق */
  --cop:        #A8701C;
  --cop-2:      #7A4E16;
  --cop-tint:   #F6EADB;
  --cop-line:   #E3CBA6;

  /* الأسطح */
  --canvas:     #F6F7F9;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAFC;
  --side:       #FAFBFD;
  --line:       #E1E7EF;
  --line-soft:  #EFF3F7;

  /* نص */
  --text:       #0F2138;
  --text-2:     #3E5266;
  --muted:      #7A8CA0;

  /* دلالات */
  --pos:        #0B7C5A;
  --pos-tint:   #EAF6F1;
  --neg:        #C0293F;
  --neg-tint:   #FDF0F2;
  --warn:       #A8701C;
  --warn-tint:  #F6EADB;

  /* توافق مع أسماء قديمة مستخدمة في الشاشات */
  /* أسماء قديمة تستخدمها شاشات قائمة — تشير إلى الهوية الجديدة
     حتى لا يبقى لونان في النظام. لا تُحذف: بعض الشاشات تناديها. */
  --ink:        #0B2E28;
  --ink-2:      #08483C;
  --ink-3:      #0A5748;
  --brass:      #A8701C;   /* الاسم تاريخي — صار النحاسي فعلاً */
  --brass-2:    #7A4E16;
  --brass-tint: #F6EADB;
  --brass-line: #E3CBA6;

  /* مقاييس */
  --r-sm: 6px;  --r: 9px;  --r-lg: 13px;
  --sp: 4px;
  --nav-w: 238px;
  --nav-w-min: 62px;   /* عرض القائمة مطويّة — أيقونات فقط */
  --fs: 14px;

  --shadow-sm: 0 1px 2px rgba(15,33,56,.06);
  --shadow:    0 2px 8px rgba(15,33,56,.08);
  --shadow-lg: 0 8px 28px rgba(15,33,56,.13);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  /* ⚠️ القصّ هنا لا على .app: القصّ على حاوية فيها عناصر sticky
     يُبطل الالتصاق ويقصّ أي عنصر بارز على حرف القائمة. */
  overflow-x: hidden;
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: var(--fs);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

/* الأرقام دائماً أحادية العرض ومصطفّة */
.n, .num, td.n, input.n{
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  direction: ltr;
  text-align: left;
}

a{ color: var(--acc-2); }

:focus-visible{
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------ 2) الهيكل ------------------------------ */
.app{ display: flex; min-height: 100vh; }

/* القائمة الجانبية — يمين في الواجهة العربية */
.side{
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  /* 🔑 داكنة عمداً: الفصل اللوني عن المحتوى يجعل العين تعرف مكانها
     دون تفكير، ويترك الأرقام وحدها على سطح فاتح بلا لون يزاحمها. */
  background: var(--side-bg);
  color: var(--side-txt);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  border: none;
  transition: width .18s ease, flex-basis .18s ease;
}

.side-brand{
  padding: 8px 16px 15px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: transparent;
  display: flex; align-items: center; gap: 10px;
}
.side-brand .mark{
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 8px;
  background: var(--acc);
  display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 15px;
  font-family: 'IBM Plex Mono', monospace;
  box-shadow: var(--shadow-sm);
}
.side-brand .nm{ font-weight: 600; font-size: 14px; line-height: 1.2; color: #FFFFFF; white-space: nowrap; }
.side-brand .sub{ font-size: 10.5px; color: var(--side-dim); font-weight: 400; white-space: nowrap; }

.side-nav{ padding: 8px; overflow-y: auto; flex: 1; }
.side-sec{
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  color: var(--side-dim);
  padding: 14px 9px 5px;
}
.side-nav a{
  display: flex; align-items: center; gap: 10px;
  padding: 8.5px 10px;
  border-radius: 7px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  position: relative;
  margin-bottom: 1px;
  transition: background .12s, color .12s;
}
.side-nav a{ color: var(--side-txt); }
.side-nav a:hover{ background: var(--side-bg-2); color: #FFFFFF; }
.side-nav a.on{ background: var(--acc); color: #FFFFFF; font-weight: 600; }
.side-nav a.on::before{
  content: ''; position: absolute;
  inset-inline-end: -8px; top: 6px; bottom: 6px; width: 3px;
  background: var(--acc);
  border-radius: 2px 0 0 2px;
}
.side-nav a svg{ width: 17px; height: 17px; flex: 0 0 17px; opacity: .75; }
.side-nav a.on svg{ opacity: 1; color: #FFFFFF; }
.side-nav a span{ white-space: nowrap; overflow: hidden; }
.side-nav a .cnt{
  margin-inline-start: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; font-weight: 600;
  background: var(--acc); color: #fff;
  padding: 1px 7px; border-radius: 20px;
}

.side-foot{
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; gap: 9px;
}
.side-foot .av{
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--acc); display: grid; place-items: center;
  font-weight: 600; font-size: 12px; color: #fff;
}
.side-foot{ border-top: 1px solid rgba(255,255,255,.10); }
.side-foot .who{ font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #FFFFFF; white-space: nowrap; }
.side-foot .rol{ font-size: 10.5px; color: var(--side-dim); white-space: nowrap; }
.side-foot .out{ color: var(--side-txt); }
.side-foot .out:hover{ background: var(--side-bg-2); color: #FFFFFF; }
.side-foot .out{
  margin-inline-start: auto; color: var(--muted);
  display: grid; place-items: center; padding: 5px; border-radius: var(--r-sm);
}
.side-foot .out:hover{ background: var(--acc-tint); color: var(--acc); }

/* زر طيّ القائمة */
/* 🔑 المطويّة تعرض الأيقونات لا تختفي: الاختفاء الكامل يفقد المستخدم
   موضعه في النظام، والشريط الرفيع يبقى دليلاً ونقطة رجوع. */
.side.collapsed{ width: var(--nav-w-min); flex-basis: var(--nav-w-min); }
.side.collapsed .side-brand{ padding: 8px 0 15px; justify-content: center; }
.side.collapsed .side-toggle{ margin: 10px auto 0; }
.side.collapsed .side-brand > div:not(.mark),
.side.collapsed .side-sec,
.side.collapsed .side-nav a span,
.side.collapsed .side-nav a .cnt,
.side.collapsed .side-foot > div:not(.av){ display: none; }
.side.collapsed .side-nav a{ justify-content: center; padding: 10px 0; }
.side.collapsed .side-foot{ justify-content: center; }

/* سهم الطيّ على حرف القائمة — أقرب لليد وأوضح أنه يخصّها */
.side-toggle{
  /* 🔑 عنصر عادي في تدفّق القائمة — لا position: absolute.
     التموضع المطلق يحتاج أباً مُموضَعاً، و.side لاصقة لا نسبية، فكان
     الزرّ يُحسب بالنسبة للصفحة كلها فيلتصق بحرف الشاشة ويمدّدها أفقياً.
     صفّ في أعلى القائمة يحلّ الثلاثة معاً: لا قصّ ولا تمدّد ولا فراغ. */
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  margin: 10px 10px 0 auto;
  background: var(--side-bg-2); border: none;
  color: var(--side-txt);
  cursor: pointer; padding: 0; flex: 0 0 auto;
}
.side-toggle:hover{ background: #3A3F4A; color: #FFFFFF; }
.side-toggle svg{ width: 15px; height: 15px; transition: transform .18s ease; }
.side.collapsed .side-toggle svg{ transform: rotate(180deg); }

/* العمود الرئيسي */
.main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 16px;
  height: 46px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 30;
}
.crumb{ display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.crumb a{ color: var(--muted); text-decoration: none; font-weight: 500; }
.crumb a:hover{ color: var(--brass-2); }
.crumb .sep{ color: #C3CCD6; font-size: 11px; }
.crumb .cur{ font-weight: 600; color: var(--text); }
.topbar .acts{ margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }

.burger{
  display: inline-grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px; cursor: pointer; color: var(--text-2);
}
.burger:hover{ background: var(--acc-tint); border-color: var(--acc-line); color: var(--acc); }

/* 🔑 ضغط المسافات لا حجم الأرقام: المساحة المكتسبة من الحشو أكبر مما
   يعطيه التصغير، والأرقام المالية تبقى مقروءة لمن تجاوز الأربعين. */
.page{ padding: 13px 16px; flex: 1; }
.page-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 11px;
}
.page-head h1{
  margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}
.page-head .sub{ font-size: 11.5px; color: var(--muted); margin-top: 1px; }


/* شريط البحث العلوي */
.topsearch{
  display: flex; align-items: center; gap: 7px;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 12px;
  color: var(--muted); font-size: 12.5px; min-width: 230px; cursor: text;
}
.topsearch:hover{ border-color: var(--acc-line); }
@media (max-width: 760px){ .topsearch{ display: none; } }

/* ------------------------------ 3) الأزرار ------------------------------ */
.btn{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--acc); color: #fff;
  border: 1px solid var(--acc);
  border-radius: var(--r-sm);
  padding: 6px 13px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover{ background: var(--acc-2); border-color: var(--acc-2); }
.btn svg{ width: 15px; height: 15px; }

.btn.primary{ background: var(--acc); border-color: var(--acc); box-shadow: var(--shadow-sm); }
.btn.primary:hover{ background: var(--acc-2); border-color: var(--acc-2); }

.btn.ghost{ background: var(--surface); color: var(--text); border-color: var(--line); }
.btn.ghost:hover{ background: var(--surface-2); border-color: #C7D0DA; }

.btn.danger{ background: var(--surface); color: var(--neg); border-color: #EBC5CC; }
.btn.danger:hover{ background: var(--neg-tint); }

.btn.sm{ padding: 5px 10px; font-size: 12.5px; }
.btn.sm svg{ width: 13px; height: 13px; }
.btn.block{ width: 100%; justify-content: center; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }

/* ------------------------------ 4) البطاقات ------------------------------ */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.card + .card{ margin-top: 10px; }
.card-head{
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h2{ margin: 0; font-size: 13px; font-weight: 600; }
.card-head .hint{ font-size: 12px; color: var(--muted); font-weight: 400; }
.card-body{ padding: 12px 13px; }
.card-body.tight{ padding: 0; }

/* شريط المؤشرات — سطر واحد كثيف بدل بطاقات فارغة */
.kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.kpi{ padding: 13px 16px; border-inline-start: 1px solid var(--line-soft); }
.kpi:first-child{ border-inline-start: none; }
.kpi .k{
  font-size: 11.5px; color: var(--muted); font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.kpi .v{
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 600; line-height: 1.25; margin-top: 3px;
  direction: ltr; text-align: right;
}
.kpi .v.pos{ color: var(--pos); }
.kpi .v.neg{ color: var(--neg); }
.kpi .v.zero{ color: #B9C3CE; }
.kpi .cap{ font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ---------------------- 5) العنصر المميّز: مسطرة القياس ---------------------- */
/* شريط تقدّم بعلامات تدريج — مستمَد من عصا المساحة، وجوهر المستخلص القياس */
.gauge{ margin-top: 7px; }
.gauge-track{
  position: relative;
  height: 7px;
  background: var(--line-soft);
  border-radius: 1px;
  overflow: hidden;
}
.gauge-fill{
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  background: var(--brass);
  border-radius: 1px;
}
.gauge-fill.pos{ background: var(--pos); }
.gauge-fill.over{ background: var(--neg); }
/* علامات التدريج كل 10% */
.gauge-ticks{
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to left,
    transparent 0, transparent calc(10% - 1px),
    rgba(14,26,43,.20) calc(10% - 1px), rgba(14,26,43,.20) 10%
  );
  pointer-events: none;
}
.gauge-lbl{
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--muted); margin-top: 4px;
}
.gauge-lbl span:last-child{ font-family: 'IBM Plex Mono', monospace; }

/* ------------------------------ 6) الجداول ------------------------------ */
.tbl-wrap{ overflow-x: auto; }
table.tbl{ width: 100%; border-collapse: collapse; }
table.tbl th{
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  text-align: right;
  padding: 7px 11px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.tbl td{
  padding: 7px 11px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  vertical-align: middle;
}
table.tbl tbody tr:last-child td{ border-bottom: none; }
table.tbl tbody tr:hover td{ background: var(--surface-2); }
table.tbl td.n{ text-align: left; white-space: nowrap; }
/* الرأس نص عربي لا رقم: يرث الخط الأساسي، وإلا ظهرت الحروف متباعدة */
table.tbl th.n{ text-align: left; font-family: inherit; }
table.tbl .strong{ font-weight: 600; }
table.tbl .sub{ font-size: 11.5px; color: var(--muted); }
table.tbl td .row-acts{ display: flex; gap: 5px; justify-content: flex-start; }

/* شبكة إدخال كثيفة (بنود المستخلص) */
table.grid{ width: 100%; border-collapse: collapse; }
table.grid th{
  background: var(--acc); color: #fff;
  font-size: 11px; font-weight: 500;
  padding: 7px 5px; border: 1px solid var(--acc-2);
  white-space: nowrap; text-align: center;
}
table.grid td{ padding: 2px; border: 1px solid var(--line-soft); }
table.grid input, table.grid select{
  width: 100%; padding: 6px 7px;
  border: 1px solid transparent; border-radius: 4px;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  background: transparent; color: var(--text);
}
table.grid input:hover{ border-color: var(--line); background: var(--surface); }
table.grid input:focus{
  outline: none; border-color: var(--acc);
  background: var(--surface); box-shadow: 0 0 0 2px rgba(15,110,114,.14);
}
table.grid td.calc{
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  direction: ltr; text-align: left;
  padding: 7px 9px; background: var(--surface-2); white-space: nowrap;
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
}
table.grid tr.sep td{ background: var(--brass-tint); font-weight: 600; }
table.grid tr.neg td.calc{ color: var(--neg); }
table.grid tr.over td.calc{ background: var(--warn-tint); }

/* ------------------------------ 7) النماذج ------------------------------ */
.fields{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.fld label{
  display: block; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); margin-bottom: 5px;
}
.fld label .req{ color: var(--neg); }
.fld input, .fld select, .fld textarea{
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  background: var(--surface); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(15,110,114,.12);
}
.fld input[readonly]{ background: var(--surface-2); color: var(--muted); }
.fld textarea{ min-height: 74px; resize: vertical; line-height: 1.6; }
.fld .note{ font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.fld.wide{ grid-column: 1 / -1; }

.filters{ display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.filters input[type=text], .filters select{
  padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px; font-weight: 500; background: var(--surface);
}
.filters input[type=text]{ min-width: 230px; }
.filters input:focus, .filters select:focus{ outline: none; border-color: var(--acc); }
.chk{
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: pointer;
}

/* ------------------------------ 8) الوسوم ------------------------------ */
.pill{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line); white-space: nowrap;
}
.pill.brass{ background: var(--brass-tint); color: var(--brass-2); border-color: var(--brass-line); }
.pill.pos  { background: var(--pos-tint);   color: var(--pos);     border-color: #BFE3D4; }
.pill.neg  { background: var(--neg-tint);   color: var(--neg);     border-color: #EFC9D1; }
.pill.warn { background: var(--warn-tint);  color: var(--warn);    border-color: #EBD9AE; }
.pill.off  { background: #F1F4F7; color: var(--muted); border-color: var(--line); }
.pill .dot{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ------------------------------ 9) التنبيهات ------------------------------ */
.alert{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; margin-bottom: 14px;
  border: 1px solid;
}
.alert svg{ width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }
.alert.good{ background: var(--pos-tint);  border-color: #BFE3D4; color: var(--pos); }
.alert.bad { background: var(--neg-tint);  border-color: #EFC9D1; color: var(--neg); }
.alert.warn{ background: var(--warn-tint); border-color: #EBD9AE; color: var(--warn); }
.alert.info{ background: var(--brass-tint);border-color: var(--brass-line); color: var(--brass-2); }

/* ------------------------------ 10) الحالة الفارغة ------------------------------ */
/* شاشة فارغة = دعوة للفعل، لا رسالة اعتذار */
.empty{ padding: 26px 20px; text-align: center; }
.empty .ic{
  width: 46px; height: 46px; margin: 0 auto 14px;
  border-radius: var(--r); background: var(--brass-tint);
  border: 1px solid var(--brass-line);
  display: grid; place-items: center; color: var(--brass);
}
.empty .ic svg{ width: 22px; height: 22px; }
.empty h3{ margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.empty p{ margin: 0 0 16px; font-size: 13px; color: var(--muted); }

/* ------------------------------ 11) الملخص المالي ------------------------------ */
.sumlist .r{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.sumlist .r:last-child{ border-bottom: none; }
.sumlist .r .lbl{ color: var(--text-2); font-weight: 500; }
.sumlist .r .lbl small{ color: var(--muted); font-size: 11px; font-weight: 400; }
.sumlist .r .amt{
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-weight: 600; direction: ltr;
}
.sumlist .r.sub{ background: var(--surface-2); }
.sumlist .r.sub .lbl, .sumlist .r.sub .amt{ font-weight: 700; }
.sumlist .r.ded .amt{ color: var(--neg); }
.sumlist .r.add .amt{ color: var(--pos); }

.netbox{
  background: linear-gradient(135deg, var(--acc-3) 0%, var(--acc) 100%); color: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--r); padding: 16px 18px; margin-top: 12px;
}
.netbox .k{ font-size: 12.5px; color: rgba(255,255,255,.6); font-weight: 500; }
.netbox .v{
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 600; color: #fff;
  direction: ltr; text-align: left; margin-top: 3px;
}
.netbox .w{ font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 6px; line-height: 1.6; }

/* ------------------------------ 12) الشاشات الصغيرة ------------------------------ */
@media (max-width: 900px){
  /* على الموبايل تنزلق فوق المحتوى ولا تُطوى — الشريط الرفيع يسرق
     عرضاً ثميناً على شاشة صغيرة. */
  .side.collapsed{ width: var(--nav-w); flex-basis: var(--nav-w); }
  .side.collapsed .side-nav a span,
  .side.collapsed .side-sec,
  .side.collapsed .side-brand > div:not(.mark),
  .side.collapsed .side-foot > div:not(.av){ display: block; }
  .side.collapsed .side-nav a{ justify-content: flex-start; padding: 9px 11px; }
  .side-toggle{ display: none; }
  .side{
    position: fixed; inset-block: 0; inset-inline-end: 0;
    transform: translateX(100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .side.open{ transform: translateX(0); }
  .burger{ display: inline-grid; place-items: center; }
  .page{ padding: 14px; }
  .kpi .v{ font-size: 18px; }
  .scrim{
    position: fixed; inset: 0; background: rgba(14,26,43,.42);
    z-index: 39; display: none;
  }
  .scrim.on{ display: block; }
}

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

/* ---------------------- 12b) لوحة المتابعة: مسار المال ---------------------- */
/* 🔑 المسار يشرح المنتج في ثانية: من قيمة الأعمال إلى ما يستحقه المقاول.
   المقاول يفهم الرحلة بصرياً قبل أن يقرأ رقماً واحداً. */
.flow{
  display: flex; align-items: stretch; gap: 5px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.flow .step{
  flex: 1 1 96px; min-width: 96px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 8px 11px;
}
.flow .step .k{ font-size: 10px; color: var(--muted); font-weight: 500;
                display: flex; align-items: center; gap: 5px; }
.flow .step .k svg{ width: 13px; height: 13px; flex: 0 0 13px; opacity: .85; }
.flow .step .v{
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; margin-top: 1px;
  direction: ltr; text-align: right; color: var(--ink);
}
.flow .step.hold{ background: var(--cop-tint); border-color: var(--cop-line); }
.flow .step.hold .k{ color: var(--cop-2); }
.flow .step.hold .v{ color: var(--cop-2); }
.flow .step.done{ background: var(--pos-tint); border-color: #BFE3D4; }
.flow .step.done .k{ color: var(--pos); }
.flow .step.done .v{ color: var(--pos); }
/* 🔑 خلفية فاتحة لا ممتلئة: الرقم يُقرأ أسرع على فاتح، واللون يكفي
   للدلالة دون أن يصرخ. الامتلاء محجوز لما يحتاج تصرّفاً. */
.flow .step.due{
  flex: 1.35 1 118px;
  background: var(--acc-tint); border-color: var(--acc-line);
}
.flow .step.due .k{ color: var(--acc-2); }
.flow .step.due .v{ color: var(--acc-2); font-size: 19px; }
.flow .arw{
  display: grid; place-items: center; color: #B7C2BD; flex: 0 0 auto;
}
.flow .arw svg{ width: 15px; height: 15px; }
@media (max-width: 560px){
  .flow .arw{ display: none; }
  .flow .step{ flex: 1 1 44%; }
}

/* ---------------------- 12c) يحتاج انتباهك ---------------------- */
/* 🔑 هذا ما يبيع المنتج: النظام يمسك على المقاول خطأً قبل أن يكلّفه.
   البطاقات تعرض أرقاماً؛ هذا القسم يعرض تصرّفاً مطلوباً. */
.todo{ background: var(--surface); border: 1px solid var(--line);
       border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
       margin-bottom: 10px; }
.todo .hd{ padding: 8px 13px; border-bottom: 1px solid var(--line-soft);
           display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.todo .hd h2{ margin: 0; font-size: 13px; font-weight: 600; }
.todo .hd .cnt{ font-family: 'IBM Plex Mono', monospace; font-size: 11px;
                background: var(--neg-tint); color: var(--neg);
                padding: 1px 9px; border-radius: 20px; font-weight: 600; }
.todo a.it, .todo div.it{
  display: flex; align-items: center; gap: 11px;
  padding: 8px 13px; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.todo .it:last-child{ border-bottom: none; }
.todo a.it:hover{ background: var(--surface-2); }
.todo .it .ic{ width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
               display: grid; place-items: center; }
.todo .it .ic svg{ width: 16px; height: 16px; }
.todo .it.act .ic{ background: var(--neg-tint); color: var(--neg); }
.todo .it.hold .ic{ background: var(--cop-tint); color: var(--cop); }
.todo .it.ok  .ic{ background: var(--pos-tint); color: var(--pos); }
.todo .it .tx{ flex: 1; min-width: 0; }
.todo .it .t1{ font-size: 12.5px; font-weight: 600; }
.todo .it .t2{ font-size: 11px; color: var(--muted); margin-top: 0; }
.todo .it .amt{ font-family: 'IBM Plex Mono', monospace; font-weight: 600;
                font-size: 13px; direction: ltr; white-space: nowrap; }
.todo .it .go{ color: #B7C2BD; flex: 0 0 auto; }
.todo .it .go svg{ width: 15px; height: 15px; }

/* ---------------------- 12d) صف المديولات ---------------------- */
/* المديول غير المشترك يظهر ولا يختفي: العميل يجب أن يرى ما يمكنه شراؤه */
.mods-head{ font-size: 11.5px; color: var(--muted); font-weight: 600; margin: 11px 0 6px; }
.mods{ display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; }
.mod{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
      padding: 9px 7px; text-align: center; text-decoration: none; color: var(--text-2);
      display: block; transition: border-color .12s, background .12s; }
.mod:hover{ border-color: var(--acc-line); background: var(--acc-tint); }
.mod svg{ width: 20px; height: 20px; color: var(--muted); }
.mod .nm{ display: block; font-size: 11.5px; font-weight: 600; margin-top: 3px; }
.mod .st{ display: block; font-size: 10.5px; color: var(--cop); margin-top: 1px; }
.mod.on{ background: var(--acc); border-color: var(--acc); color: #fff; }
.mod.on:hover{ background: var(--acc-2); }
.mod.on svg{ color: #fff; }
.mod.on .st{ color: rgba(255,255,255,.72); }

/* ------------------------------ 13) الطباعة ------------------------------ */
@media print{
  .side, .topbar, .no-print{ display: none !important; }
  body{ background: #fff; }
  .page{ padding: 0; }
  .card{ border: none; box-shadow: none; }
}