/* ═══════════════════════════════════════════════════════════════════
   مِكشاف — نظام التصميم

   ثيمان كاملان: فاتح وغامق. الألوان كلها متغيّرات، والوضع يُحدَّد بـ
   data-theme على <html> (يحفظه المتصفح)، ويتبع تفضيل النظام افتراضيًّا.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────── الثيم الفاتح (الافتراضي) ─────────────── */
:root {
  --bg:          #f6f7f9;
  --bg-soft:     #ffffff;
  --card:        #ffffff;
  --card-hover:  #f3f5f8;
  --border:      #e3e7ed;
  --border-soft: #eef1f5;

  --text:        #1a2029;
  --text-dim:    #5b6673;
  --text-faint:  #8b949e;

  --gold:        #b8862f;
  --gold-soft:   rgba(184, 134, 47, 0.10);
  --green:       #1a7f37;
  --green-soft:  rgba(26, 127, 55, 0.10);
  --red:         #c0392b;
  --red-soft:    rgba(192, 57, 43, 0.10);
  --blue:        #1f6feb;
  --blue-soft:   rgba(31, 111, 235, 0.10);
  --purple:      #8250df;
  --hot:         #d9480f;
  --hot-soft:    rgba(217, 72, 15, 0.10);

  --ring:        rgba(184, 134, 47, 0.22);
  --shadow-sm:   0 1px 2px rgba(16, 24, 40, .05);
  --shadow:      0 4px 14px rgba(16, 24, 40, .08);
  --shadow-lg:   0 12px 34px rgba(16, 24, 40, .14);

  --skel-a:      #eceff3;
  --skel-b:      #f6f8fa;

  --radius:      14px;
  --radius-sm:   9px;
  --font: 'Dubai', 'Segoe UI', 'Tahoma', system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

/* ─────────────── الثيم الغامق ─────────────── */
:root[data-theme="dark"] {
  --bg:          #0d1117;
  --bg-soft:     #131a22;
  --card:        #1a212b;
  --card-hover:  #212a36;
  --border:      #2a3441;
  --border-soft: #212b36;

  --text:        #e6edf3;
  --text-dim:    #9aa7b4;
  --text-faint:  #6b7885;

  --gold:        #d4a24c;
  --gold-soft:   rgba(212, 162, 76, 0.13);
  --green:       #3fb950;
  --green-soft:  rgba(63, 185, 80, 0.13);
  --red:         #f85149;
  --red-soft:    rgba(248, 81, 73, 0.13);
  --blue:        #58a6ff;
  --blue-soft:   rgba(88, 166, 255, 0.13);
  --purple:      #bc8cff;
  --hot:         #ff6b35;
  --hot-soft:    rgba(255, 107, 53, 0.15);

  --ring:        rgba(212, 162, 76, 0.30);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .3);
  --shadow:      0 4px 18px rgba(0, 0, 0, .35);
  --shadow-lg:   0 14px 40px rgba(0, 0, 0, .5);

  --skel-a:      #1e2733;
  --skel-b:      #263141;

  color-scheme: dark;
}

/* من لم يختر: نتبع تفضيل نظامه */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117; --bg-soft: #131a22; --card: #1a212b; --card-hover: #212a36;
    --border: #2a3441; --border-soft: #212b36;
    --text: #e6edf3; --text-dim: #9aa7b4; --text-faint: #6b7885;
    --gold: #d4a24c; --gold-soft: rgba(212,162,76,.13);
    --green: #3fb950; --green-soft: rgba(63,185,80,.13);
    --red: #f85149; --red-soft: rgba(248,81,73,.13);
    --blue: #58a6ff; --blue-soft: rgba(88,166,255,.13);
    --purple: #bc8cff; --hot: #ff6b35; --hot-soft: rgba(255,107,53,.15);
    --ring: rgba(212,162,76,.30);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow: 0 4px 18px rgba(0,0,0,.35);
    --shadow-lg: 0 14px 40px rgba(0,0,0,.5);
    --skel-a: #1e2733; --skel-b: #263141;
    color-scheme: dark;
  }
}

/* ═══════════════════════ الأساسيات ═══════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* [hidden] لا يغلب display المصرَّح (grid/flex) — نجبره مرة واحدة */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; font-size: 16.5px; }
/* حجم الخط: تكبير النظام كله (الشريط والمحتوى والنوافذ) لا المحتوى وحده؛ على المتصفح لأن كشاف يُفتح في نافذة كروم */
body { zoom: var(--fs-scale, 1); }

/*
 * أثناء التحميل الأول (ريفرش المتصفح) نوقف كل الانتقالات والحركات حتى لا
 * يومض الشريط الجانبي ويظهر «يحمّل» بشكل غير مرتّب — يُزال الكلاس بعد الرسم
 * فتعود الانتقالات. والمحتوى يظهر مع الشريط دفعةً واحدة (fade خفيف).
 */
html.preload * { transition: none !important; animation: none !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  direction: rtl;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}

.layout { animation: appFade .28s ease both; }
@keyframes appFade { from { opacity: 0 } to { opacity: 1 } }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

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

::selection { background: var(--gold-soft); }

/* شريط تمرير أنيق */
/* شريط تمرير ملوّن وواضح: ذهبي على مسار خافت، يعرض عند المرور */
html { scrollbar-color: var(--gold) var(--border-soft); scrollbar-width: auto; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--border-soft); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 8px; border: 3px solid var(--border-soft); min-height: 48px; }
::-webkit-scrollbar-thumb:hover { background: #d9a441; border-width: 2px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #d4a24c; }

/* ═══════════════════════ التخطيط ═══════════════════════ */

.layout { display: flex; min-height: 100vh; }

/*
 * الشريط الجانبي له وضعه المستقل: يتبع الصفحة افتراضيًّا، ويمكن تثبيته
 * فاتحًا أو غامقًا وحده. نعيد تعريف متغيّرات الألوان داخله فقط، فترثها كل
 * عناصره دون الحاجة لأي قاعدة إضافية.
 */
.sidebar[data-side="dark"] {
  --bg-soft:     #131a22;
  --card:        #1a212b;
  --card-hover:  #212a36;
  --border:      #2a3441;
  --border-soft: #212b36;
  --text:        #e6edf3;
  --text-dim:    #9aa7b4;
  --text-faint:  #6b7885;
  --gold:        #d4a24c;
  --gold-soft:   rgba(212, 162, 76, .14);
  --green:       #3fb950;
  --green-soft:  rgba(63, 185, 80, .14);
  --red:         #f85149;
  color-scheme: dark;
}

.sidebar[data-side="light"] {
  --bg-soft:     #ffffff;
  --card:        #ffffff;
  --card-hover:  #f3f5f8;
  --border:      #e3e7ed;
  --border-soft: #eef1f5;
  --text:        #1a2029;
  --text-dim:    #5b6673;
  --text-faint:  #8b949e;
  --gold:        #b8862f;
  --gold-soft:   rgba(184, 134, 47, .10);
  --green:       #1a7f37;
  --green-soft:  rgba(26, 127, 55, .10);
  --red:         #c0392b;
  color-scheme: light;
}

.sidebar {
  width: 246px; flex-shrink: 0;
  background: var(--bg-soft);
  color: var(--text);
  border-inline-start: none;
  border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: background-color .2s ease, color .2s ease;
}

.brand { display: block; padding: 22px 20px 18px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .12s; }
.brand:hover { background: var(--card-hover); }
.brand h1 {
  font-size: 25px; font-weight: 800; color: var(--gold);
  letter-spacing: -.6px; line-height: 1.2;
}
.brand .tag { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/*
 * شريط تمرير القائمة الجانبية ظاهر دائمًا لا عند التمرير فقط.
 * كان `auto` يخفيه حتى يتحرّك المستخدم، فيبحث عنه في قائمة صارت ستة عشر بندًا.
 * `scroll` يحجز مساره دائمًا فلا يقفز عرض القائمة عند ظهوره، ولونه يقوى عند
 * المرور على الشريط الجانبي.
 */
.nav {
  padding: 12px 10px; flex: 1;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold) 55%, transparent) transparent;
}
.nav::-webkit-scrollbar { width: 10px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
  min-height: 40px;
}
.sidebar:hover .nav { scrollbar-color: var(--gold) color-mix(in srgb, var(--border) 60%, transparent); }
.sidebar:hover .nav::-webkit-scrollbar-track { background: color-mix(in srgb, var(--border) 60%, transparent); border-radius: 8px; }
.sidebar:hover .nav::-webkit-scrollbar-thumb { background: var(--gold); border-width: 2px; }
.nav::-webkit-scrollbar-thumb:hover { background: #d9a441; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; margin-bottom: 3px; font-size: 14.5px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer; border: none; background: none;
  width: 100%; text-align: right;
  transition: background .14s, color .14s;
  position: relative; text-decoration: none;
}
.nav-item:hover { background: var(--card-hover); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 20%; height: 60%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold);
}
.nav-item .ico { width: 19px; text-align: center; font-size: 15px; }
.nav-item .badge {
  margin-inline-start: auto; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; min-width: 20px; height: 19px;
  line-height: 19px; border-radius: 10px; text-align: center; padding: 0 6px;
}
.nav-item .badge.quiet { background: var(--border); color: var(--text-dim); }

.sidebar-foot { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-faint); }
.sidebar-foot .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin-inline-end: 6px;
  box-shadow: 0 0 0 3px var(--green-soft);
}
.sidebar-foot .credit {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  line-height: 1.75; color: var(--text-faint);
}
.sidebar-foot .credit b { color: var(--gold); font-weight: 600; }

/* مبدّل وضع الشريط الجانبي */
.side-theme { display: flex; gap: 4px; margin-bottom: 10px; }
.side-theme button {
  flex: 1; padding: 5px 0; font-size: 10.5px;
  background: var(--card); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.side-theme button:hover { color: var(--text); border-color: var(--text-faint); }
.side-theme button.active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); font-weight: 600; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 62px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: var(--bg-soft);
  /* بلا backdrop-filter: الضبابية على شريط ملتصق تُعاد رسمها مع كل سكرول — ثمنها بطء لا يستحقه أثر بصري */
  position: sticky; top: 0; z-index: 20;
}
.topbar h2 { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.topbar .spacer { flex: 1; }

.content { padding: 22px; flex: 1; }
@media (min-width: 1500px) { .content { max-width: 1440px; } }

/* انتقال ناعم بين الصفحات (تنقّل بلا إعادة تحميل) */
#pageRoot { animation: pageIn .22s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#pageRoot.leaving { opacity: .35; transition: opacity .12s ease; }

/* ═══════════════════════ المكوّنات ═══════════════════════ */

.btn {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px; border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .14s, border-color .14s, box-shadow .14s, transform .1s;
  box-shadow: var(--shadow-sm); text-decoration: none;
}
.btn:hover { background: var(--card-hover); border-color: var(--text-faint); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 600;
}
:root[data-theme="dark"] .btn.primary { color: #1a1200; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.sm { padding: 6px 12px; font-size: 13.5px; }
.btn.active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.icon-btn {
  width: 36px; height: 36px; padding: 0; justify-content: center;
  font-size: 16px; border-radius: var(--radius-sm);
}

.input, .select, .textarea {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 12px; border-radius: var(--radius-sm);
  width: 100%; outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--ring);
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.75; }
.select { cursor: pointer; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }

/* بطاقات الأرقام */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 17px 19px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
}
.stat:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.stat::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 3px; height: 100%; background: var(--gold);
}
.stat.green::before { background: var(--green); }
.stat.red::before   { background: var(--red); }
.stat.blue::before  { background: var(--blue); }
.stat.hot::before   { background: var(--hot); }
.stat .label { font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
.stat .value { font-size: 27px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2; }
.stat .value.sm { font-size: 21px; }
.stat .sub { font-size: 12px; color: var(--text-faint); margin-top: 5px; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 19px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 15px; padding-bottom: 13px;
  border-bottom: 1px solid var(--border-soft);
}
.card-head h3 { font-size: 15px; font-weight: 700; }
.card-head .spacer { flex: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.filters .input, .filters .select { width: auto; min-width: 132px; }
.filters .grow { flex: 1; min-width: 190px; }

/* ═══════════════════════ بطاقة الفرصة ═══════════════════════ */

.opp-list { display: grid; gap: 12px; }
.opp {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: grid; grid-template-columns: 64px 1fr auto; gap: 17px; align-items: center;
  cursor: pointer; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.opp:hover {
  border-color: var(--gold); box-shadow: var(--shadow);
  transform: translateX(-3px); text-decoration: none;
}
.opp.hot    { border-inline-start: 3px solid var(--hot); }
.opp.strong { border-inline-start: 3px solid var(--gold); }
.opp.watch  { border-inline-start: 3px solid var(--text-faint); }

.score-ring {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-weight: 800; font-size: 19px; position: relative;
  background: conic-gradient(var(--gold) calc(var(--pct) * 1%), var(--border) 0);
}
.score-ring::before { content: ''; position: absolute; inset: 4px; background: var(--card); border-radius: 50%; }
.score-ring span { position: relative; z-index: 1; }
.score-ring .of { font-size: 9px; color: var(--text-faint); font-weight: 400; }
.opp.hot .score-ring { background: conic-gradient(var(--hot) calc(var(--pct) * 1%), var(--border) 0); }

.opp-body { min-width: 0; }
.opp-title { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opp-meta { font-size: 13px; color: var(--text-dim); display: flex; gap: 15px; flex-wrap: wrap; }
.opp-meta b { color: var(--text); font-weight: 600; }

.opp-money { text-align: left; white-space: nowrap; }
.opp-money .gap { font-size: 21px; font-weight: 800; color: var(--green); letter-spacing: -.5px; }
.opp-money .upside { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  background: var(--border-soft); color: var(--text-dim);
}
.chip.hot    { background: var(--hot-soft);   color: var(--hot); }
.chip.strong { background: var(--gold-soft);  color: var(--gold); }
.chip.watch  { background: var(--border-soft);color: var(--text-dim); }
.chip.green  { background: var(--green-soft); color: var(--green); }
.chip.red    { background: var(--red-soft);   color: var(--red); }
.chip.blue   { background: var(--blue-soft);  color: var(--blue); }

/* ═══════════════════════ التجزئة ═══════════════════════ */

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.pager:empty { display: none; }
.pager-info { font-size: 13px; color: var(--text-dim); }
.pager-btns { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

.pg-btn {
  min-width: 36px; height: 36px; padding: 0 10px;
  background: var(--card); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .13s, border-color .13s, color .13s;
}
.pg-btn:hover:not(:disabled):not(.active) { background: var(--card-hover); color: var(--text); border-color: var(--text-faint); }
.pg-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; }
:root[data-theme="dark"] .pg-btn.active { color: #1a1200; }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-gap { color: var(--text-faint); padding: 0 3px; }

@media (max-width: 700px) {
  .pager { justify-content: center; }
  .pager-info { width: 100%; text-align: center; }
}

/* جدول محلي (LocalTable): شريط أدوات بإطار، بحث بأيقونة، فلاتر، عدّاد، تصدير؛ رأس مظلّل وصفوف متناوبة */
.lt-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: 12px; }
.lt-bar .spacer { flex: 1; }
.lt-search { position: relative; flex: 1 1 240px; max-width: 360px; align-self: flex-end; }
.lt-search .input { width: 100%; padding-inline-start: 34px; padding-inline-end: 34px; background: var(--card); }
.lt-search .input::-webkit-search-cancel-button { display: none; }
.lt-ico { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .55; pointer-events: none; }
.lt-clear { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.lt-clear:hover { color: var(--text); background: var(--card-hover); }
.lt-filter { display: grid; gap: 3px; font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.lt-filter .select { min-width: 118px; padding-top: 7px; padding-bottom: 7px; font-size: 13px; background-color: var(--card); }
.lt-filter .select.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); color: var(--text); font-weight: 600; }
.lt-reset { align-self: flex-end; border: 1px dashed var(--border); background: none; color: var(--text-dim); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.lt-reset:hover { color: var(--red); border-color: var(--red); }
.lt-count { white-space: nowrap; align-self: flex-end; padding: 7px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--border-soft);
  font-size: 12.5px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.lt-export { align-self: flex-end; }
.lt-scroll { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--card); }
.lt-table th { background: var(--bg); color: var(--text-dim); font-size: 12.5px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.lt-table td { padding: 11px 12px; vertical-align: top; }
.lt-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.lt-table tbody tr:hover { background: var(--card-hover); }
.lt-table tbody tr.clickable:hover { background: var(--gold-soft); }
.lt-table tbody tr.clickable td:first-child { box-shadow: inset -3px 0 0 transparent; transition: box-shadow .12s; }
.lt-table tbody tr.clickable:hover td:first-child { box-shadow: inset -3px 0 0 var(--gold); }
.lt-table th.lt-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.lt-table th.lt-sort:hover { color: var(--text); }
.lt-table th.lt-sort.on { color: var(--gold); }
.lt-arrow { font-style: normal; font-size: 10px; margin-inline-start: 4px; }
.lt-pager { margin-top: 12px; padding-top: 12px; }
@media (max-width: 700px) {
  .lt-bar { padding: 10px; }
  .lt-search { max-width: none; flex-basis: 100%; }
  .lt-filter { flex: 1 1 calc(50% - 10px); }
  .lt-filter .select { min-width: 0; width: 100%; }
  .lt-export, .lt-count { flex: 1 1 auto; text-align: center; }
}


/* ═══════════════════════ الجداول ═══════════════════════ */

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: right; font-weight: 600; font-size: 12.5px; color: var(--text-dim);
  padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 11px 10px; border-bottom: 1px solid var(--border-soft); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--card-hover); }
tbody tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

/* ═══════════════════════ خريطة الأحياء ═══════════════════════ */

.map-wrap {
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, var(--card-hover) 0%, var(--bg) 78%);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; height: 620px; margin-bottom: 18px;
  touch-action: none; cursor: grab; box-shadow: var(--shadow-sm);
}
.map-wrap.dragging { cursor: grabbing; }
.map-wrap svg { width: 100%; height: 100%; display: block; direction: ltr; }

.map-land { fill: var(--card); stroke: var(--border); stroke-width: 1.4; stroke-linejoin: round; }
:root[data-theme="dark"] .map-land { fill: #1b2531; stroke: #33414f; }
/* مناطق المملكة: تعبئة خافتة تشتد مع عدد الصفقات، وحدود واضحة، وإضاءة عند المرور */
.map-region { fill: #c9b17a; stroke: #8f7a4d; stroke-width: 0.9; stroke-linejoin: round; transition: fill .15s; cursor: default; }
.map-region:hover { fill: #d4a24c; fill-opacity: 1 !important; }
:root[data-theme="dark"] .map-region { fill: #3a4a5c; stroke: #5b6f86; }
:root[data-theme="dark"] .map-region:hover { fill: #d4a24c; }
.map-region-label { pointer-events: none; font-size: 11px; font-weight: 700; fill: #5b4a22; opacity: .85; letter-spacing: -.2px; }
:root[data-theme="dark"] .map-region-label { fill: #cbd5e1; }
.map-zoomed .map-region-label { opacity: .25; }

.map-bubble { cursor: pointer; }
.map-bubble:hover .bub { stroke: var(--text); stroke-width: 2; }
.map-bubble .bub { stroke: rgba(0,0,0,.28); }
.map-label { pointer-events: none; font-weight: 600; }
.map-sub { pointer-events: none; }

.map-controls { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.map-btn {
  width: 34px; height: 34px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 17px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.map-btn:hover { border-color: var(--gold); color: var(--gold); }

.map-legend {
  position: absolute; bottom: 12px; inset-inline-start: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 11px; padding: 12px 14px; z-index: 3;
  font-size: 11px; color: var(--text-dim); max-width: 232px;
  box-shadow: var(--shadow);
}
.map-legend .lg-title { font-weight: 700; color: var(--text); margin-bottom: 8px; font-size: 12px; }
.map-legend .lg-bar { height: 9px; border-radius: 5px; margin-bottom: 5px; }
.map-legend .lg-ends { display: flex; justify-content: space-between; }
.map-legend .lg-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.map-legend .lg-dot { border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.map-legend .lg-note { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border-soft); line-height: 1.6; }

.map-hint {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 11px; font-size: 11px; color: var(--text-faint);
  box-shadow: var(--shadow-sm);
}

.map-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--card); border: 1px solid var(--gold);
  border-radius: 10px; padding: 11px 14px; font-size: 12px; color: var(--text);
  display: none; box-shadow: var(--shadow-lg); min-width: 168px; line-height: 1.75;
}
.map-tip.show { display: block; }
.map-tip .tp-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.map-tip .tp-row { display: flex; justify-content: space-between; gap: 14px; color: var(--text-dim); }
.map-tip .tp-row b { color: var(--text); font-weight: 600; }

.heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 11px; }
.heat-cell {
  border-radius: var(--radius-sm); padding: 14px 15px;
  border: 1px solid var(--border); cursor: pointer;
  background: var(--card); box-shadow: var(--shadow-sm);
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.heat-cell:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow); }
.heat-cell .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.heat-cell .name { font-weight: 700; font-size: 14px; }
.heat-cell .city { font-size: 11px; color: var(--text-faint); }
.heat-cell .price { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.heat-cell .unit { font-size: 11px; color: var(--text-faint); font-weight: 400; }
.heat-cell .foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--text-dim); }
.heat-cell.hot     { border-color: color-mix(in srgb, var(--hot) 45%, transparent); }
.heat-cell.rising  { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.heat-cell.cooling { border-color: color-mix(in srgb, var(--red) 30%, transparent); }

/* ═══════════════════════ الرسوم ═══════════════════════ */

/* الاتجاه LTR إجباريًّا: داخل SVG يُحسب text-anchor حسب اتجاه النص،
   فلو ورث rtl انقلب معنى start/end وارتطمت التسميات بالأعمدة. */
.chart { width: 100%; height: 220px; direction: ltr; }
.chart-lg { height: 300px; }

/* ═══════════════════════ النافذة ═══════════════════════ */

.modal-bg {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--text) 45%, transparent);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 24px;
  /* لا backdrop-filter هنا: ضبابية على الشاشة كلها تُعاد رسمها مع كل بكسل سكرول داخل النافذة — كانت سبب البطء */
}
.modal-bg.open { display: flex; animation: fadeIn .16s ease; }
/* والصفحة خلف النافذة تُقفل فلا يتسلسل السكرول إليها ولا تُرسم مرتين */
body.modal-open { overflow: hidden; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 840px; max-height: 88vh; overflow-y: auto;
  animation: modalIn .2s cubic-bezier(.2,.8,.3,1);
  /* طبقة مستقلة للسكرول: لا يعاد رسم ما خلفها، ولا يتسرّب السكرول إلى الصفحة عند بلوغ الطرف */
  contain: paint; overscroll-behavior: contain; will-change: transform; -webkit-overflow-scrolling: touch;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }

.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--card); z-index: 2;
}
.modal-head h3 { font-size: 17px; flex: 1; font-weight: 700; }
.modal-body { padding: 20px 22px; }
.close-x {
  background: none; border: none; color: var(--text-dim);
  font-size: 21px; cursor: pointer; line-height: 1; padding: 5px 9px; border-radius: 7px;
}
.close-x:hover { background: var(--border-soft); color: var(--text); }

/* ═══════════════════════ عناصر مساعدة ═══════════════════════ */

.reasons { list-style: none; }
.reasons li {
  padding: 9px 0; padding-inline-start: 23px; position: relative;
  font-size: 14px; color: var(--text-dim); border-bottom: 1px solid var(--border-soft);
}
.reasons li:last-child { border-bottom: none; }
.reasons li::before { content: '◂'; position: absolute; inset-inline-start: 4px; color: var(--gold); }

.price-bar { margin: 16px 0; }
.price-bar .track {
  height: 36px; background: var(--bg); border-radius: 8px;
  position: relative; overflow: hidden; border: 1px solid var(--border);
}
.price-bar .fill { height: 100%; background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 30%, transparent)); }
.price-bar .marker { position: absolute; top: 0; height: 100%; width: 2px; background: var(--gold); }
.price-bar .legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); margin-top: 7px; }

.empty { text-align: center; padding: 52px 20px; color: var(--text-faint); }
.empty .big { font-size: 42px; margin-bottom: 12px; opacity: .55; }

.hint { font-size: 13px; color: var(--text-faint); line-height: 1.7; }

.foot {
  margin-top: 28px; padding: 16px 4px 8px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-faint);
}
.foot b { color: var(--gold); font-weight: 600; }

.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { background: none; border: none; color: var(--text-dim); padding: 7px 13px; cursor: pointer; font-size: 13px; }
.seg-btn.active { background: var(--gold); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .seg-btn.active { color: #1a1200; }

/* ═══════════════════════ التنبيهات المنبثقة ═══════════════════════ */

.toast-wrap { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--card); border: 1px solid var(--border);
  border-inline-start: 3px solid var(--green);
  padding: 13px 17px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); animation: slideIn .22s cubic-bezier(.2,.8,.3,1);
  max-width: 380px; font-size: 14px; transition: opacity .25s;
}
.toast.error { border-inline-start-color: var(--red); }
.toast.warn  { border-inline-start-color: var(--gold); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

.alert-item {
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 9px; background: var(--card);
}
.alert-item.unread { border-inline-start: 3px solid var(--gold); background: var(--card-hover); }
.alert-item .t { font-weight: 700; margin-bottom: 5px; font-size: 14px; }
.alert-item .b { font-size: 13px; color: var(--text-dim); white-space: pre-wrap; line-height: 1.7; }
.alert-item .when { font-size: 11px; color: var(--text-faint); margin-top: 8px; }

/* ═══════════════════════ حالات التحميل ═══════════════════════ */
/* نعرض شكل المحتوى قبل وصوله بدل شاشة فارغة، فيدرك المستخدم ماذا سيظهر. */

.loading { text-align: center; padding: 42px; color: var(--text-faint); }
.spinner {
  width: 26px; height: 26px; border: 2px solid var(--border);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin .7s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skel {
  background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 50%, var(--skel-a) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 6px; display: block;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-line { height: 12px; margin-bottom: 8px; }
.skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; } .skel-line.lg { height: 26px; }
.skel-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.skel-circle { width: 60px; height: 60px; border-radius: 50%; }
.skel-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 17px; align-items: center; }

.top-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; background: transparent; z-index: 300; pointer-events: none; }
.top-progress .bar {
  height: 100%; width: 0; background: var(--gold);
  transition: width .25s ease, opacity .3s ease;
  box-shadow: 0 0 9px var(--gold);
}

.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border: 2px solid color-mix(in srgb, var(--text) 25%, transparent);
  border-top-color: var(--text); border-radius: 50%; animation: spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: var(--skel-b); }
  #pageRoot, .modal, .modal-bg, .toast { animation: none; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════ صفحة التفاصيل ═══════════════════════ */

.detail-head {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 22px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--card), var(--card-hover));
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.detail-head .ring-lg { width: 84px; height: 84px; font-size: 26px; }
.detail-head .ring-lg .of { font-size: 10px; }
.detail-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 7px; }
.detail-head .sub { color: var(--text-dim); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 18px; }
.kv-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px;
}
.kv-row .k { color: var(--text-dim); }
.kv-row .v { font-weight: 600; text-align: left; }

.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.back-link:hover { color: var(--gold); text-decoration: none; }

/* ═══════════════════════ الجوال ═══════════════════════ */

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 30;
    flex-direction: row; align-items: center; overflow-x: auto;
    border-inline-end: none; border-bottom: 1px solid var(--border);
  }
  .brand { border-bottom: none; border-inline-end: 1px solid var(--border); padding: 12px 16px; white-space: nowrap; }
  .brand .tag { display: none; }
  .nav { display: flex; padding: 8px; gap: 4px; }
  .nav-item { white-space: nowrap; width: auto; padding: 9px 12px; }
  .nav-item span.txt { display: none; }
  .nav-item .ico { font-size: 17px; }
  .nav-item.active::before { inset-inline-start: 20%; top: auto; bottom: 0; width: 60%; height: 3px; border-radius: 3px 3px 0 0; }
  .sidebar-foot { display: none; }

  .content { padding: 14px; }
  .topbar { height: 56px; padding: 0 14px; }
  .topbar h2 { font-size: 15px; }

  .opp { grid-template-columns: 52px 1fr; gap: 13px; }
  .opp-money { grid-column: 2; text-align: right; }
  .score-ring { width: 50px; height: 50px; font-size: 16px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
  .stat .value { font-size: 21px; }
  .map-wrap { height: 460px; }
  .map-hint { display: none; }
  .map-legend { max-width: 162px; font-size: 10px; padding: 9px 11px; }
  .detail-head { padding: 16px; }
  .detail-head h1 { font-size: 19px; }
}

/* ═══════════════════════ صفحة الدخول ═══════════════════════ */

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 20% 10%, var(--gold-soft) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 90%, var(--blue-soft) 0%, transparent 45%),
    var(--bg);
}

.login-card {
  width: 100%; max-width: 400px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 34px 30px;
  box-shadow: var(--shadow-lg);
}

.login-brand { text-align: center; margin-bottom: 26px; }
.login-logo { font-size: 40px; margin-bottom: 8px; }
.login-brand h1 { font-size: 30px; font-weight: 800; color: var(--gold); letter-spacing: -.8px; }
.login-brand .tag { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }

.login-error {
  background: var(--red-soft); border: 1px solid var(--red);
  color: var(--red); padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; margin-bottom: 18px;
}

.login-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim);
  margin: 4px 0 18px; cursor: pointer;
}

.login-btn { width: 100%; justify-content: center; padding: 11px; font-size: 15px; }

.login-foot {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-soft);
  text-align: center; font-size: 11.5px; color: var(--text-faint); line-height: 1.8;
}
.login-foot b { color: var(--gold); font-weight: 600; }

/* ═══════════════════════ قائمة المستخدم ═══════════════════════ */

.user-menu { position: relative; }

.user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
:root[data-theme="dark"] .user-avatar { color: #1a1200; }

.user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .user-name { display: none; } }

.user-drop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 232px; z-index: 60;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: fadeIn .14s ease;
}
.user-head { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }

.user-item {
  display: block; width: 100%; text-align: right;
  padding: 11px 16px; background: none; border: none;
  color: var(--text-dim); cursor: pointer; font-size: 13.5px;
  transition: background .12s, color .12s;
}
.user-item:hover { background: var(--card-hover); color: var(--text); }
.user-item.danger:hover { background: var(--red-soft); color: var(--red); }

/* ═══════════════════════ جرس الإشعارات ═══════════════════════ */

.notif-menu { position: relative; }

.notif-badge {
  position: absolute; top: -5px; inset-inline-start: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px;
  text-align: center; pointer-events: none;
  box-shadow: 0 0 0 2px var(--card);
}

.notif-drop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  width: min(360px, calc(100vw - 32px)); z-index: 60;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: fadeIn .14s ease;
}

.notif-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
}

.notif-list { max-height: 380px; overflow-y: auto; }
.notif-list .alert-item.sm {
  margin: 0; border-radius: 0; border-top: none; border-inline-end: none;
  border-inline-start: 3px solid transparent; padding: 11px 14px;
}
.notif-list .alert-item.sm.unread { border-inline-start-color: var(--gold); }
.notif-list .alert-item.sm .t { font-size: 13px; margin-bottom: 3px; }
.notif-list .alert-item.sm .b {
  font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
}
.notif-list .alert-item.sm .when { margin-top: 5px; }
.notif-list .alert-item.unread { cursor: pointer; }

.notif-foot {
  display: block; padding: 10px 14px; text-align: center;
  font-size: 13px; color: var(--gold); font-weight: 600;
  border-top: 1px solid var(--border-soft); text-decoration: none;
  transition: background .12s;
}
.notif-foot:hover { background: var(--card-hover); }

/* ═══════════════════════ الصلاحيات ═══════════════════════ */

.perm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 6px; margin-top: 8px;
}
.perm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 12.5px;
  background: var(--bg); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.perm-item:hover { border-color: var(--text-faint); }
.perm-item.inherited { opacity: .62; cursor: not-allowed; background: var(--card-hover); }
.perm-item.inherited .perm-tag { color: var(--green); }
.perm-tag { font-size: 10px; margin-inline-start: auto; color: var(--text-faint); }

.role-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; margin-bottom: 9px; background: var(--card);
}
.role-card .rc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.role-card .rc-name { font-weight: 700; }
.role-card .rc-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }

/* ═══════════════════════ سكرول السيدبار ═══════════════════════ */
/* شريط رفيع شفّاف لا يظهر إلا عند المرور — بدل الشريط السميك العام */

.nav {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.nav:hover { scrollbar-color: var(--border) transparent; }

.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;                 /* الشريط العام له إطار 3px — نلغيه هنا */
  border-radius: 2px;
}
.nav:hover::-webkit-scrollbar-thumb { background: var(--border); }
.nav::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* صفحة تفاصيل جهة التمويل */
.lender-logo { width: 64px; height: 64px; border-radius: 16px; background: var(--gold-soft); color: var(--gold); font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* صفقة بقيمة رمزية (ثمن اسمي في الصك) */
.chip.nominal { background: var(--red-soft); color: var(--red); font-size: 11px; margin-inline-start: 6px; vertical-align: middle; }

/* الإشعار عنصر قابل للنقر يودّي إلى هدفه */
.alert-item[data-url] { cursor: pointer; transition: background .12s; }
.alert-item[data-url]:hover { background: var(--card-hover); }
.alert-item .go { color: var(--gold); font-weight: 600; }
.alert-item .alert-detail-link { color: var(--blue); }
.alert-body-full { white-space: pre-wrap; line-height: 1.9; font-size: 15px; }

/* وجهات NHC على الخريطة */
.map-nhc { cursor: pointer; }
.map-nhc .nhc-pin { fill: #0f766e; stroke: #fff; stroke-width: 1.4; }
.map-nhc:hover .nhc-pin { fill: #14b8a6; }
.map-nhc .nhc-name { fill: #0f766e; font-weight: 700; pointer-events: none; }
:root[data-theme="dark"] .map-nhc .nhc-name { fill: #5eead4; }

/* لوحة الإدارة: ست بطاقات في صفّين منتظمين، ولا يُجبر النص الطويل البطاقة على الاتساع فتنكسر الشبكة */
#execStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* بطاقات لوحة القيادة خمس: الشبكة التلقائية كانت تضع أربعًا في صف وتترك الخامسة وحدها */
#dashStats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { #dashStats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { #dashStats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { #dashStats { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { #execStats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #execStats { grid-template-columns: 1fr; } }
.stat { min-width: 0; }
.stat .sub, .stat .label { white-space: normal; overflow-wrap: anywhere; }
.stat .value.sm { font-size: 21px; }

/* المبلغ بالحروف تحت الرقم: يقطع اللبس في قراءة سبعة أرقام */
.amount-words { margin-top: 4px; font-size: 11.5px; color: var(--text-dim); line-height: 1.6; font-weight: 500; }
.kv-row .amount-words { text-align: left; font-weight: 400; }

/* ═══════════════════════ إدارة المخاطر والأزمات ═══════════════════════
   ألوان المستويات: l4 حرج (أحمر) · l3 مرتفع (برتقالي) · l2 متوسط (ذهبي) · l1 منخفض (أخضر)
   وحالات المؤشر: bad · warn · ok. كل لون من متغيّرات الثيم فيعمل فاتحًا وغامقًا. */
.rk { --rk-l4: var(--red); --rk-l3: var(--hot); --rk-l2: var(--gold); --rk-l1: var(--green);
      --rk-l4s: var(--red-soft); --rk-l3s: var(--hot-soft); --rk-l2s: var(--gold-soft); --rk-l1s: var(--green-soft); }

/* الرأس */
.rk-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--card) 0%, var(--card) 62%, var(--gold-soft) 100%); }
.rk-hero-text { flex: 1; min-width: 280px; }
.rk-kicker { font-size: 12.5px; font-weight: 600; color: var(--gold); letter-spacing: .2px; margin-bottom: 6px; }
.rk-hero h3 { font-size: 19px; font-weight: 800; line-height: 1.5; margin: 0 0 8px; letter-spacing: -.2px; }
.rk-hero h3 em { font-style: normal; color: var(--red); border-bottom: 3px solid var(--red-soft); }
.rk-hero .hint { max-width: 760px; }
.rk-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 150px; }
.rk-ring { width: 138px; height: 138px; }
.rk-ring .track { fill: none; stroke: var(--border); stroke-width: 11; }
.rk-ring .bar { fill: none; stroke-width: 11; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.rk-ring .big { font-size: 36px; font-weight: 800; text-anchor: middle; font-family: var(--font); }
.rk-ring .small { font-size: 11px; fill: var(--text-faint); text-anchor: middle; font-family: var(--font); }
.rk-gauge-cap { text-align: center; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.rk-gauge-cap b { font-size: 15px; }

/* عدّادات المستويات */
.rk-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.rk-level { position: relative; overflow: hidden; text-align: start; cursor: pointer; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 12px;
  box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; }
.rk-level::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; width: 4px; height: 100%; background: var(--rk-l1); }
.rk-level.l4::before { background: var(--rk-l4); } .rk-level.l3::before { background: var(--rk-l3); }
.rk-level.l2::before { background: var(--rk-l2); } .rk-level.l1::before { background: var(--rk-l1); }
.rk-level.ind::before { background: var(--blue); }
.rk-level.ind { cursor: default; }
.rk-level:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.rk-level .n { font-size: 28px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; }
.rk-level.l4 .n { color: var(--rk-l4); } .rk-level.l3 .n { color: var(--rk-l3); }
.rk-level.l2 .n { color: var(--rk-l2); } .rk-level.l1 .n { color: var(--rk-l1); }
.rk-level .n .bad { color: var(--red); } .rk-level .n .warn { color: var(--gold); } .rk-level .n .ok { color: var(--green); }
.rk-level .t { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; font-weight: 500; }
@media (max-width: 1100px) { .rk-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .rk-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* شارات الحالة والنقطة النابضة */
.rk-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.rk-badge.ok   { background: var(--green-soft); color: var(--green); }
.rk-badge.warn { background: var(--gold-soft);  color: var(--gold); }
.rk-badge.bad  { background: var(--red-soft);   color: var(--red); }
.rk .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.rk .warn > .dot, .rk .warn .rk-ind-head .dot { background: var(--gold); }
.rk .bad  > .dot, .rk .bad  .rk-ind-head .dot { background: var(--red); animation: rk-pulse 1.8s infinite; }
@keyframes rk-pulse { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 70% { box-shadow: 0 0 0 9px rgba(192,57,43,0); } 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); } }

/* 1. لوحة المؤشرات */
.rk-ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.rk-ind { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px 12px;
  background: var(--bg-soft); overflow: hidden; min-width: 0; }
.rk-ind::after { content: ''; position: absolute; inset-inline-end: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; opacity: .16; }
.rk-ind.ok::after   { background: var(--green); } .rk-ind.ok   { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.rk-ind.warn::after { background: var(--gold); }  .rk-ind.warn { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.rk-ind.bad::after  { background: var(--red); }   .rk-ind.bad  { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); background: color-mix(in srgb, var(--red) 4%, var(--bg-soft)); }
.rk-ind-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; position: relative; }
.rk-ind-head .lbl { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-dim); line-height: 1.45; }
.rk-ind-val { font-size: 15.5px; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; position: relative; }
.rk-ind-thr { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; border-top: 1px dashed var(--border-soft); padding-top: 6px; }

/* 2. المصفوفة والأزمة الأولى */
.rk-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; }
@media (max-width: 1100px) { .rk-two { grid-template-columns: 1fr; } }
.rk-matrix { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 6px 8px; align-items: stretch; }
.rk-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: center; align-self: center; }
.rk-axis-x { grid-column: 2; font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: center; }
.rk-grid { display: grid; grid-template-columns: 26px repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(52px, auto); gap: 4px; }
.rk-grid .hx, .rk-grid .hy { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-faint); }
.rk-grid .corner, .rk-grid .hx { min-height: 22px; }
.rk-grid .cell { position: relative; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px; border: 1px solid transparent; }
.rk-grid .cell.l1 { background: var(--rk-l1s); } .rk-grid .cell.l2 { background: var(--rk-l2s); }
.rk-grid .cell.l3 { background: var(--rk-l3s); } .rk-grid .cell.l4 { background: var(--rk-l4s); }
.rk-grid .cell .sev { position: absolute; top: 3px; inset-inline-start: 6px; font-size: 10px; color: var(--text-faint); font-weight: 600; }
.rk-grid .cell .who { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 8px; }
.rk-grid .cell .who b { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--card); color: var(--text); font-size: 11.5px; font-weight: 800; cursor: pointer;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: transform .12s; }
.rk-grid .cell.l4 .who b { border-color: var(--rk-l4); color: var(--rk-l4); }
.rk-grid .cell.l3 .who b { border-color: var(--rk-l3); color: var(--rk-l3); }
.rk-grid .cell.l2 .who b { border-color: var(--rk-l2); color: var(--rk-l2); }
.rk-grid .cell .who b:hover { transform: scale(1.12); }
.rk-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.rk-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-inline-end: 4px; }
.rk-legend .l4 { background: var(--rk-l4); } .rk-legend .l3 { background: var(--rk-l3); } .rk-legend .l2 { background: var(--rk-l2); } .rk-legend .l1 { background: var(--rk-l1); }

.rk-top { display: flex; gap: 16px; align-items: flex-start; }
.rk-top-sev { flex: none; width: 82px; text-align: center; border-radius: var(--radius); padding: 12px 6px; background: var(--bg); border: 1px solid var(--border); }
.rk-top-sev .n { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.rk-top-sev .t { font-size: 12px; color: var(--text-dim); margin-top: 6px; font-weight: 600; }
.rk-top-body { flex: 1; min-width: 0; }
.rk-top-title { font-size: 16px; font-weight: 800; line-height: 1.5; margin-bottom: 6px; }
.rk-top-first { margin: 10px 0; padding: 10px 12px; border-inline-start: 3px solid var(--gold); background: var(--gold-soft); border-radius: 8px; font-size: 13.5px; line-height: 1.7; }
.rk-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }

.rk-signal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 8px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border-soft); margin: 6px 0; line-height: 1.6; }
.rk-signal.bad { background: var(--red-soft); border-color: transparent; }
.rk-signal.warn { background: var(--gold-soft); border-color: transparent; }

/* 3. السجل */
.rk-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.rk-filters .select { width: auto; min-width: 160px; }
.rk-list { display: grid; gap: 10px; }
.rk-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); overflow: hidden;
  border-inline-start-width: 4px; transition: box-shadow .18s; }
.rk-card.l4 { border-inline-start-color: var(--rk-l4); } .rk-card.l3 { border-inline-start-color: var(--rk-l3); }
.rk-card.l2 { border-inline-start-color: var(--rk-l2); } .rk-card.l1 { border-inline-start-color: var(--rk-l1); }
.rk-card:hover { box-shadow: var(--shadow); }
.rk-card-head { display: flex; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer; user-select: none; }
.rk-card-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rk-sev { flex: none; width: 58px; text-align: center; }
.rk-sev .n { font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1; }
.rk-sev .t { font-size: 11px; font-weight: 700; margin-top: 3px; opacity: .85; }
.rk-card-title { flex: 1; min-width: 0; }
.rk-card-title .ttl { font-size: 15px; font-weight: 700; line-height: 1.5; }
.rk-card-title .rank { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 12px;
  background: var(--text); color: var(--card); font-size: 12px; font-weight: 800; margin-inline-end: 4px; vertical-align: middle; }
.rk-card-title .rk-meta { margin: 6px 0 0; }
.rk-chev { flex: none; color: var(--text-faint); font-size: 16px; transition: transform .2s; }
.rk-card.open .rk-chev { transform: rotate(180deg); }
.rk-card-body { display: none; padding: 0 16px 16px; border-top: 1px dashed var(--border-soft); }
.rk-card.open .rk-card-body { display: block; animation: rk-in .18s ease-out; }
@keyframes rk-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rk-why { font-size: 13.5px; line-height: 1.8; margin: 12px 0 6px; color: var(--text-dim); }
.rk-why b { color: var(--text); }
.rk-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 900px) { .rk-plan { grid-template-columns: 1fr; } }
.rk-col { border-radius: var(--radius-sm); padding: 12px 14px; border: 1px solid var(--border-soft); background: var(--card); }
.rk-col h4 { font-size: 13px; font-weight: 700; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--border-soft); }
.rk-col.prevent h4 { border-color: var(--green); } .rk-col.first48 h4 { border-color: var(--red); } .rk-col.d30 h4 { border-color: var(--blue); }
.rk-col ul { margin: 0; padding-inline-start: 18px; }
.rk-col li { font-size: 13px; line-height: 1.75; margin-bottom: 4px; }

/* 4. البروتوكول */
.rk-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; }
.rk-timeline::before { content: ''; position: absolute; top: 20px; inset-inline: 40px; height: 2px; background: var(--border); }
@media (max-width: 900px) { .rk-timeline { grid-template-columns: 1fr 1fr; } .rk-timeline::before { display: none; } }
@media (max-width: 560px) { .rk-timeline { grid-template-columns: 1fr; } }
.rk-step { position: relative; padding: 0 6px; }
.rk-step-n { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--card); }
:root[data-theme="dark"] .rk-step-n { color: #1a1200; }
.rk-step-when { font-weight: 800; font-size: 14px; margin: 10px 0 4px; }
.rk-step-txt { font-size: 13px; line-height: 1.75; color: var(--text-dim); }

/* 5. الحدود */
.rk-limits-card { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.rk-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .rk-limits { grid-template-columns: 1fr; } }
.rk-limit { text-align: center; padding: 18px 14px; border-radius: var(--radius); background: var(--red-soft); border: 1px dashed color-mix(in srgb, var(--red) 40%, transparent); }
.rk-limit .v { font-size: 34px; font-weight: 800; color: var(--red); letter-spacing: -1px; line-height: 1; }
.rk-limit .l { font-size: 13px; font-weight: 700; margin: 8px 0 4px; }
.rk-limit .t { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }

/* الطباعة: كل بطاقة مفتوحة، بلا أزرار، ولا انكسار داخل البطاقة */
@media print {
  .sidebar, .topbar, #pageActions, .rk-filters, .rk-chev, .rk-top .btn { display: none !important; }
  .rk-card-body { display: block !important; }
  .rk-card, .rk-ind, .rk-step, .rk-limit, .rk-two > .card { break-inside: avoid; }
  .rk .card { box-shadow: none; }
  .rk .dot { animation: none; }
}

/* ═══════════════════════ شركاء الوطنية للإسكان ═══════════════════════ */
.np-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; border-color: var(--blue);
  background: linear-gradient(135deg, var(--card) 0%, var(--card) 62%, var(--blue-soft) 100%); }
.np-hero-text { flex: 1; min-width: 280px; }
.np-kicker { font-size: 12.5px; font-weight: 600; color: var(--blue); margin-bottom: 6px; }
.np-hero h3 { font-size: 19px; font-weight: 800; line-height: 1.5; margin: 0 0 8px; letter-spacing: -.2px; }
.np-hero .hint { max-width: 780px; }

.np-ticket { min-width: 200px; }
.np-ticket-box { text-align: center; border: 2px dashed var(--gold); border-radius: var(--radius);
  padding: 16px 20px; background: var(--gold-soft); }
.np-ticket-box .lbl { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.np-ticket-box .val { font-size: 42px; font-weight: 800; color: var(--gold); letter-spacing: -1.5px; line-height: 1.1; margin: 2px 0; }
.np-ticket-box .sub { font-size: 12px; color: var(--text-dim); }
.np-ticket-box .split { display: flex; gap: 10px; justify-content: center; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); font-size: 11.5px; color: var(--text-dim); }

.np-dest { cursor: pointer; transition: background .12s; }
.np-dest:hover { background: var(--card-hover); }
.np-dest.quiet { opacity: .62; }

.np-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.np-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft);
  transition: box-shadow .18s, transform .18s, border-color .18s; min-width: 0; }
.np-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--gold); }
.np-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.np-rank { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue); font-weight: 800; font-size: 13px; }
.np-body { flex: 1; min-width: 0; }
.np-body h4 { font-size: 14.5px; font-weight: 700; line-height: 1.5; margin: 0 0 7px; overflow-wrap: anywhere; }
.np-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.np-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }
.np-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-nums .k { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.np-nums .v { font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.np-flag { margin-top: 9px; font-size: 12px; padding: 6px 9px; border-radius: 7px;
  background: var(--green-soft); color: var(--green); font-weight: 600; }

.np-modal-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.np-modal-top > div { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.np-modal-top .k { font-size: 11.5px; color: var(--text-faint); }
.np-modal-top b { font-size: 17px; letter-spacing: -.4px; }
@media (max-width: 640px) { .np-modal-top, .np-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.np-note { margin-top: 12px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--bg); border-inline-start: 3px solid var(--text-faint); font-size: 13px; line-height: 1.8; color: var(--text-dim); }
.np-note b { color: var(--text); }

@media print {
  .sidebar, .topbar, #pageActions, .filters, .np-note { display: none !important; }
  .np-card, .np .card { break-inside: avoid; box-shadow: none; }
}

/* ═══════════ قوائم الاختيار القابلة للبحث والمنطقة ← المدينة (pickers.js) ═══════════ */
select.pk-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; overflow: hidden; }
.pk { position: relative; display: inline-block; min-width: 132px; vertical-align: middle; }
.filters .pk { min-width: 150px; }
.field .pk { display: block; width: 100%; }
.pk-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: start; cursor: pointer; }
.pk-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-caret { color: var(--text-faint); font-size: 11px; flex: none; }
.pk.pk-set .pk-btn { border-color: var(--gold); }
.pk.open .pk-btn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.pk-panel { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; width: max(100%, 260px); background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.22); z-index: 80; padding: 8px; }
.pk.pk-up .pk-panel { top: auto; bottom: calc(100% + 4px); }
.pk-search { width: 100%; margin-bottom: 6px; }
.pk-list { max-height: 260px; overflow-y: auto; }
.pk-item { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.pk-item:hover, .pk-item:focus { background: var(--gold-soft); outline: none; }
.pk-item.active { color: var(--gold); font-weight: 700; }
.pk-item.pk-empty { color: var(--text-faint); cursor: default; }
.pk-region { max-width: 180px; }

/* ═══════════ حكم الحاسبة: بطاقة الفحوص الأربعة ═══════════ */
.vchecks { display: grid; gap: 8px; margin-top: 6px; }
.vc { display: flex; gap: 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--card); }
.vc-ic { font-weight: 800; font-size: 15px; width: 20px; text-align: center; flex: none; }
.vc-pass { border-color: rgba(63,185,80,.35); } .vc-pass .vc-ic { color: var(--green); }
.vc-warn { border-color: rgba(212,162,76,.45); background: var(--gold-soft); } .vc-warn .vc-ic { color: var(--gold); }
.vc-fail { border-color: rgba(248,81,73,.45); background: var(--red-soft); } .vc-fail .vc-ic { color: var(--red); }
.vc-label { font-weight: 700; font-size: 13px; }
.vc-val { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.vc-note { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* ═══════════ شارات مخاطر المنافسة الحكومية على الفرصة ═══════════ */
.chip.rk-low { background: var(--green-soft); color: var(--green); }
.chip.rk-medium { background: var(--gold-soft); color: var(--gold); }
.chip.rk-high { background: var(--red-soft); color: var(--red); }
.chip.rk-infill { background: rgba(88,166,255,.15); color: #58a6ff; }

/* ═══════════ الخريطة: مسار المناطق ← المدن ← الأحياء ═══════════ */
.map-crumb { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; font-size: 13px; }
.map-crumb .crumb-path a { color: var(--gold); cursor: pointer; font-weight: 600; }
.map-crumb .crumb-path a:hover { text-decoration: underline; }
.map-crumb .crumb-path b { color: var(--text); }
.map-crumb .sep { color: var(--text-faint); margin: 0 6px; }
.map-crumb .crumb-level { color: var(--text-faint); font-size: 12px; }
.map-region.pick { cursor: pointer; }
.map-region.dim { fill-opacity: .22 !important; }
.map-region.focus { stroke: #d4a24c; }
.map-region-badge { pointer-events: none; font-size: 9px; font-weight: 600; fill: #3b2f10; opacity: .9; }
:root[data-theme="dark"] .map-region-badge { fill: #e6edf3; }

/* ═══════════ موجّه المنتج على الفرصة ═══════════ */
.opp-guide { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.55; }
.opp-guide.ok { color: var(--green); }
.opp-guide.alt { color: #58a6ff; }
.guide-card { border-color: var(--gold); }
.guide-line { font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 9px; background: var(--gold-soft); margin-bottom: 10px; line-height: 1.75; }
.guide-line.ok { background: var(--green-soft); }
.guide-alt { margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(88,166,255,.10); font-size: 13px; line-height: 1.7; }
.guide-assump { margin-top: 8px; padding-inline-start: 18px; }
.guide-assump li { margin: 2px 0; }

/* ═══════════ إشارات السوق على الفرصة ═══════════ */
.sig { font-size: 13px; line-height: 1.8; padding: 9px 12px; border-radius: 9px; background: var(--card-hover); margin: 6px 0; }
.sig.ok { background: var(--green-soft); }
.sig.no { background: rgba(180, 35, 24, .10); }
.sig .hint { margin-top: 2px; }


/* ═══════════ الصفحات السبع المتقدّمة (2026-09-28) ═══════════ */
.txt-green { color: var(--green); } .txt-red { color: var(--red); } .txt-faint { color: var(--text-faint); }
.clickable { cursor: pointer; }
.chip.purple { background: rgba(130, 80, 223, .12); color: var(--purple); }
.chip.green { background: var(--green-soft); color: var(--green); }

.adv-hero {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px 26px 20px; margin-bottom: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hero) 14%, var(--card)) 0%, var(--card) 62%);
  border: 1px solid color-mix(in srgb, var(--hero) 35%, var(--border)); box-shadow: var(--shadow-sm);
}
.adv-hero::after { content: ''; position: absolute; inset-inline-start: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hero) 30%, transparent), transparent 70%); pointer-events: none; }
.adv-kicker { font-size: 12.5px; font-weight: 700; color: var(--hero); letter-spacing: .2px; margin-bottom: 6px; }
.adv-hero h2 { font-size: 21px; font-weight: 800; line-height: 1.45; margin: 0 0 6px; letter-spacing: -.3px; }
.adv-hero p { color: var(--text-dim); font-size: 13.5px; line-height: 1.8; margin: 0; max-width: 980px; }

.adv-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 980px) { .adv-grid-2 { grid-template-columns: 1fr; } }
.adv-empty { padding: 42px 20px; text-align: center; color: var(--text-dim); font-size: 14px; line-height: 1.8; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--card); }
.adv-empty .big { font-size: 40px; margin-bottom: 8px; }

.adv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.adv-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.adv-kpi .i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--card-hover); flex: none; }
.adv-kpi .v { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.adv-kpi .l { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.adv-kpi.hot .i { background: var(--hot-soft); } .adv-kpi.gold .i { background: var(--gold-soft); } .adv-kpi.blue .i { background: var(--blue-soft); } .adv-kpi.purple .i { background: rgba(130, 80, 223, .12); }

.adv-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.adv-seg button { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text-dim); }
.adv-seg button + button { border-inline-start: 1px solid var(--border); }
.adv-seg button.on { background: var(--gold-soft); color: var(--gold); font-weight: 700; }

.adv-ring { width: 44px; height: 44px; flex: none; }
.adv-ring.lg { width: 64px; height: 64px; }
.adv-ring .bg { fill: none; stroke: var(--border); stroke-width: 5; }
.adv-ring .fg { fill: none; stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke: var(--text-faint); transition: stroke-dashoffset .6s ease; }
.adv-ring .fg.hot { stroke: var(--hot); } .adv-ring .fg.rising { stroke: var(--green); } .adv-ring .fg.stable { stroke: var(--gold); } .adv-ring .fg.cooling { stroke: var(--text-faint); }
.adv-ring text { font-size: 15px; font-weight: 800; fill: var(--text); }
.adv-ring.lg text { font-size: 19px; }

/* الحرارة الاستثمارية */
.adv-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.adv-board ol { list-style: none; padding: 0; margin: 0; counter-reset: b; }
.adv-board li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); counter-increment: b; }
.adv-board li:last-child { border-bottom: 0; }
.adv-board li::before { content: counter(b); width: 22px; height: 22px; border-radius: 7px; background: var(--card-hover); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--text-dim); flex: none; }
.adv-board li .n { flex: 1; font-weight: 600; font-size: 13.5px; } .adv-board li .n small { display: block; color: var(--text-faint); font-size: 11px; font-weight: 400; }
.adv-board li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adv-board li:hover { background: var(--card-hover); }
.ih-ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 4px; }
.ih-rank { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.ih-rank span { width: 44px; flex: none; }
.ih-rank .bar { flex: 1; height: 5px; border-radius: 4px; background: var(--border-soft); overflow: hidden; }
.ih-rank .bar div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--hot)); }

/* القيمة العادلة */
.fv-verdict { padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; border: 1px solid var(--border); background: var(--card-hover); }
.fv-verdict.under { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.fv-verdict.over { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.fv-verdict .t { font-size: 17px; font-weight: 800; } .fv-verdict .s { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.fv-big { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 14px; }
.fv-big .v { font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--gold); }
.fv-big .l { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.fv-gauge { position: relative; height: 74px; margin: 26px 8px 6px; border-radius: 6px; background: var(--border-soft); }
.fv-gauge .band { position: absolute; top: 28px; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--green-soft), var(--gold-soft)); border: 1px solid var(--gold); }
.fv-gauge .mark { position: absolute; top: 20px; width: 2px; height: 34px; background: var(--text); transform: translateX(50%); }
.fv-gauge .mark span { position: absolute; top: -26px; right: 50%; transform: translateX(50%); white-space: nowrap; font-size: 11px; line-height: 1.2; text-align: center; font-weight: 700; }
.fv-gauge .mark.fair { background: var(--gold); } .fv-gauge .mark.fair span { color: var(--gold); }
.fv-gauge .mark.ask { background: var(--text-dim); top: 24px; height: 48px; } .fv-gauge .mark.ask span { top: auto; bottom: -26px; color: var(--text-dim); }
.fv-gauge .mark.ask.under { background: var(--green); } .fv-gauge .mark.ask.under span { color: var(--green); }
.fv-gauge .mark.ask.over { background: var(--red); } .fv-gauge .mark.ask.over span { color: var(--red); }
.fv-gauge .lbl { position: absolute; top: 50px; transform: translateX(50%); font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.fv-range { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin: 6px 0; }
.fv-layer { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); }
.fv-layer:last-child { border-bottom: 0; }
.fv-layer .n { width: 26px; height: 26px; border-radius: 8px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; }
.fv-layer .h { font-size: 13.5px; } .fv-layer .h b { color: var(--gold); margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.fv-attrs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fv-alert.under { border-top: 3px solid var(--green); } .fv-alert.over { border-top: 3px solid var(--red); }
.fv-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 22px; }
.fv-bar { display: grid; grid-template-columns: 110px 1fr 64px; grid-template-areas: "name bar val" "name meta val"; align-items: center; gap: 2px 10px; padding: 6px 4px; border-radius: 8px; }
.fv-bar:hover { background: var(--card-hover); }
.fv-bar .name { grid-area: name; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-bar .bar { grid-area: bar; position: relative; height: 12px; border-radius: 6px; background: var(--border-soft); overflow: hidden; }
.fv-bar .bar .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 60%, var(--hot))); }
.fv-bar .bar .rng { position: absolute; top: 3px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.fv-bar .val { grid-area: val; font-weight: 800; font-variant-numeric: tabular-nums; text-align: start; font-size: 13.5px; }
.fv-bar .meta { grid-area: meta; display: flex; gap: 10px; font-size: 11px; color: var(--text-faint); }

/* جودة الحياة */
.adv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.am-card { padding: 14px; transition: transform .15s, box-shadow .15s; }
.am-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue); }
.am-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.am-top .name { font-weight: 800; font-size: 15px; } .am-top .city { font-size: 11.5px; color: var(--text-faint); margin-bottom: 4px; }
.am-icons { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; }
.am-icons span.off { opacity: .35; }
.am-foot { margin-top: 10px; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border-soft); padding-top: 8px; }
.am-detail { margin-bottom: 14px; border-top: 3px solid var(--blue); }
.am-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 22px; }
.am-bar { display: grid; grid-template-columns: 1fr 120px 52px; align-items: center; gap: 10px; font-size: 13px; }
.am-bar small { display: block; color: var(--text-faint); font-size: 11px; }
.am-bar .bar { height: 10px; border-radius: 5px; background: var(--border-soft); overflow: hidden; }
.am-bar .bar div { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 5px; }
.am-bar b { font-variant-numeric: tabular-nums; }

/* المشاريع المستقبلية */
.if-list { display: grid; gap: 12px; }
.if-card { border-inline-start: 4px solid var(--border); }
.if-card.up { border-inline-start-color: var(--green); } .if-card.down { border-inline-start-color: var(--red); }
.if-head { display: flex; gap: 12px; align-items: flex-start; }
.if-ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(130, 80, 223, .12); display: grid; place-items: center; font-size: 23px; flex: none; }
.if-t { flex: 1; min-width: 0; } .if-t .name { font-weight: 800; font-size: 15.5px; }
.if-imp { text-align: end; flex: none; max-width: 240px; }
.if-nums { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 6px; font-size: 12.5px; color: var(--text-dim); }
.if-nums b { color: var(--text); font-variant-numeric: tabular-nums; }
.if-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.if-near { margin-top: 10px; }

/* العرض والطلب */
.sd-nhc { padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); font-size: 13px; margin-bottom: 14px; line-height: 1.7; }
.sd-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .sd-grid { grid-template-columns: 1fr; } }
.sd-dual { display: grid; gap: 3px; }
.sd-dual .s, .sd-dual .d { height: 14px; border-radius: 4px; min-width: 2px; position: relative; font-size: 10.5px; line-height: 14px; color: var(--text); white-space: nowrap; }
.sd-dual .s { background: color-mix(in srgb, var(--blue) 45%, var(--card-hover)); } .sd-dual .d { background: color-mix(in srgb, var(--purple) 45%, var(--card-hover)); }
.sd-dual span { position: absolute; inset-inline-start: calc(100% + 6px); }
.sd-table td { vertical-align: middle; }

/* المستشار */
.cp-wrap { display: flex; flex-direction: column; gap: 10px; }
.cp-thread { max-height: 62vh; min-height: 260px; overflow-y: auto; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.cp-msg { display: flex; } .cp-msg.me { justify-content: flex-start; } .cp-msg.bot { justify-content: flex-end; }
.cp-bubble { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.75; }
.cp-msg.me .cp-bubble { background: var(--gold-soft); border-start-start-radius: 4px; }
.cp-msg.bot .cp-bubble { background: var(--card-hover); border: 1px solid var(--border); border-start-end-radius: 4px; }
.cp-a { font-weight: 600; }
.cp-u { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; font-size: 11.5px; color: var(--text-dim); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chips .chip { font-size: 12px; }
.cp-form { display: flex; gap: 8px; } .cp-form .input { flex: 1; }
.cp-typing { color: var(--text-dim); animation: cpPulse 1.2s ease-in-out infinite; }
@keyframes cpPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* منشئ التقارير */
.rb-sections { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-sections label { user-select: none; } .rb-sections input { vertical-align: middle; margin: 0 0 0 4px; }
.rb-preview { --c: #b8862f; position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-align: center; padding: 0 16px 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--card)), var(--card)); }
.rb-preview .band { height: 8px; background: var(--c); margin: 0 -16px 22px; }
.rb-preview .logo img { max-height: 60px; max-width: 200px; margin-bottom: 8px; }
.rb-preview .brand { font-weight: 800; font-size: 16px; } .rb-preview .tag { font-size: 12px; color: var(--text-dim); }
.rb-preview .title { font-size: 30px; font-weight: 800; color: var(--c); margin: 14px 0 4px; }
.rb-preview .sub { font-size: 14px; color: var(--text-dim); }
.rb-preview .line { width: 80px; height: 3px; background: var(--c); margin: 16px auto; }
.rb-preview .foot { font-size: 11.5px; color: var(--text-faint); }
.rb-list { display: grid; gap: 8px; }
.rb-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--card-hover); }


/* ═══════════ الصفحات المتقدّمة — الجولة الثانية (وضوح القراءة) ═══════════ */
.adv-explain { margin: -6px 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 0 16px; }
.adv-explain summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 14px; list-style: none; }
.adv-explain summary::-webkit-details-marker { display: none; }
.adv-explain summary::before { content: '▸ '; color: var(--gold); }
.adv-explain[open] summary::before { content: '▾ '; }
.adv-explain > div, .adv-explain > ul, .adv-explain > p { padding-bottom: 14px; font-size: 13.5px; line-height: 1.85; color: var(--text); }
.adv-explain ol, .adv-explain ul { padding-inline-start: 20px; margin: 4px 0; }
.adv-explain li { margin: 4px 0; }

.ih-tbl th, .ih-tbl td { padding: 6px 8px; font-size: 13px; }
.ih-tbl td:first-child { color: var(--text-faint); width: 26px; }
.ih-read { font-size: 12.5px; line-height: 1.75; color: var(--text); margin: 6px 0 4px; }
.ih-rank small { width: 22px; text-align: start; color: var(--text-faint); }
.heat-cell.thin { border-style: dashed; opacity: .85; }
.heat-cell.thin .name { color: var(--text-dim); }

.if-tbl th, .if-tbl td { padding: 7px 8px; font-size: 13px; vertical-align: middle; }
.if-tbl tbody tr:hover { background: var(--card-hover); }
.if-detail { margin-bottom: 14px; border-top: 3px solid var(--purple); }

.sd-key { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.sd-key.s { background: var(--blue); color: #fff; } .sd-key.d { background: var(--gold); color: #fff; }
.sd-dual .s { background: var(--blue); color: #fff; } .sd-dual .d { background: var(--gold); color: #fff; }
.sd-dual .s span, .sd-dual .d span { color: var(--text); }


/* نصيحة كشاف على بلاطة الحي */
.ih-advice { margin: 8px 0 4px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--card-hover); }
.ih-advice .t { font-weight: 800; font-size: 13px; } .ih-advice .t small { font-weight: 500; color: var(--text-dim); margin-inline-start: 6px; }
.ih-advice .x { font-size: 12.5px; line-height: 1.7; margin-top: 3px; color: var(--text); }
.ih-advice.buy { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.ih-advice.sell { background: var(--hot-soft); border-color: color-mix(in srgb, var(--hot) 45%, transparent); }
.ih-advice.negotiate { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.ih-advice.avoid { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 45%, transparent); }

/* ═══════════ الإشعارات الفورية (على نسق حصاد) ═══════════ */
.live-dot { position: absolute; bottom: 2px; inset-inline-end: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
.live-state { margin: 8px 12px 0; font-size: 12.5px; line-height: 1.8; color: var(--text-dim); background: var(--card-hover); border-radius: var(--radius-sm); padding: 7px 10px; }
.live-state.ok { color: var(--green); background: var(--green-soft); }
.live-state.bad { color: var(--red); background: var(--red-soft); }
.live-status { margin: 6px 12px 4px; font-size: 11.5px; color: var(--text-faint); line-height: 1.7; }
.live-foot { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--border-soft); }
.live-prefs { margin: 0 12px 6px; font-size: 12.5px; }
.live-prefs summary { cursor: pointer; color: var(--gold); padding: 4px 0; }
.live-prefs label { display: flex; gap: 6px; align-items: center; padding: 3px 0; color: var(--text); }
.live-prefs input { width: auto; margin: 0; }
.live-note { margin: 0 12px 10px; font-size: 11px; line-height: 1.7; color: var(--text-faint); }
.live-toasts { position: fixed; inset-inline-start: 20px; bottom: 76px; z-index: 210; display: flex; flex-direction: column; gap: 8px; width: 340px; max-width: calc(100vw - 40px); pointer-events: none; }
.live-toast { pointer-events: auto; position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 10px 34px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); border-inline-start: 4px solid var(--gold); box-shadow: var(--shadow-lg); text-decoration: none; color: var(--text); animation: live-in .22s ease; transition: opacity .35s, transform .35s; }
.live-toast:hover { text-decoration: none; border-color: var(--gold); }
.live-toast.urgent { border-inline-start-color: var(--hot); }
.live-toast.nudge { cursor: default; border-inline-start-color: var(--gold); }
.live-toast b { font-size: 13.5px; }
.live-toast span { font-size: 12.5px; line-height: 1.75; color: var(--text-dim); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.live-toast small { font-size: 10.5px; color: var(--text-faint); }
.live-toast .live-x { position: absolute; top: 6px; left: 6px; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.live-toast .live-x:hover { background: var(--card-hover); color: var(--text); }
.live-toast .live-row { display: flex; gap: 6px; margin-top: 6px; }
.live-toast.out { opacity: 0; transform: translateY(8px); }
@keyframes live-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .live-toasts { inset-inline-start: 8px; right: 8px; width: auto; max-width: none; bottom: 72px; } }

/* ═══════════════════════ قائمة المراقبة والإنذارات الحيّة (2026-10-06) ═══════════════════════ */
.wl-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.wl-events { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-ev { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; background: var(--card); }
.wl-ev:hover { border-color: var(--text-faint); }
.wl-row.sel td { background: var(--card-hover); }
.wl-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.wl-rule { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--card); display: flex; flex-direction: column; gap: 7px; }
.wl-rule-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wl-rule-ic { font-size: 20px; }
.wl-rule-what { font-size: 13px; color: var(--text); line-height: 1.7; }
.wl-rule-rule { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }
.wl-rule-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-faint); margin-top: auto; }

/* ═══ شرح رادار الفرز ═══ */
.sd-explain { padding: 0 0 12px; }
.sd-explain p { font-size: 13px; color: var(--text-dim); line-height: 1.9; margin: 0 0 8px; }
.sd-explain p b { color: var(--text); }

/* ═══ مصفوفة الصلاحيات: من الدور / إضافية / محجوبة ═══ */
.perm-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; background: var(--card); }
.perm-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.perm-group-head .spacer { flex: 1; }
.perm-group .perm-grid { margin: 0; }
.perm-item.inh { background: color-mix(in srgb, var(--green) 10%, transparent); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.perm-item.inh .perm-tag { color: var(--green); }
.perm-item.extra { background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.perm-item.extra .perm-tag { color: var(--blue); }
.perm-item.deny { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 50%, var(--border)); }
.perm-item.deny > span:first-of-type { text-decoration: line-through; color: var(--text-dim); }
.perm-item.deny .perm-tag { color: var(--red); }
.perm-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--text-dim); margin: 4px 0 10px; }
.perm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: middle; }
.u-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.u-tools .input { max-width: 280px; }
.matrix th, .matrix td { text-align: center; white-space: nowrap; }
.matrix td:first-child, .matrix th:first-child { text-align: right; white-space: normal; min-width: 220px; }
.matrix .ok { color: var(--green); font-weight: 800; }
.matrix .grp td { background: var(--card-hover); font-weight: 700; font-size: 12px; text-align: right; }

/* ═══ صفحة العرض: ما الفائدة؟ ═══ */
.ld-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.benefit-list .benefit { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.benefit-list .benefit:last-child { border-bottom: 0; }
.benefit .b-ic { font-size: 22px; line-height: 1; padding-top: 2px; }
.benefit .b-title { font-weight: 800; font-size: 14px; margin-bottom: 3px; }
.benefit .b-text { font-size: 13px; color: var(--text-dim); line-height: 1.8; }
.benefit.ok .b-title { color: var(--green); }
.benefit.no .b-title { color: var(--red); }

/* ═══ شواهد التقييم ═══ */
.ev-line { font-size: 13px; color: var(--text-dim); line-height: 1.8; margin: 4px 0; }
.ev-line b { color: var(--text); }
.ev-warn { border: 1px solid color-mix(in srgb, var(--red) 50%, var(--border)); background: color-mix(in srgb, var(--red) 8%, transparent); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.8; margin: 6px 0; }
.ev-bars { display: flex; gap: 4px; align-items: flex-end; height: 56px; margin-top: 6px; }
.ev-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 9px; color: var(--text-faint); }
.ev-bar i { display: block; width: 100%; background: color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 3px 3px 0 0; min-height: 2px; }
.calc-assume { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 0 0 12px; }
.calc-assume label { font-size: 12px; color: var(--text-dim); display: block; margin-bottom: 3px; }
.calc-warn { border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border)); background: color-mix(in srgb, var(--gold) 9%, transparent); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.8; margin-top: 8px; }
.sc-table td.ok { color: var(--green); font-weight: 700; } .sc-table td.no { color: var(--red); font-weight: 700; }

/* ═══ صفحة تفاصيل حي في رادار البناء ═══ */
.bd-hero { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 14px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, var(--card)), var(--card)); }
.bd-hero-main { flex: 1; min-width: 280px; }
.bd-kicker { font-size: 12px; color: var(--gold); font-weight: 700; letter-spacing: .3px; margin-bottom: 4px; }
.bd-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.6px; margin: 0 0 8px; }
.bd-hero .bd-city { font-size: 18px; font-weight: 600; color: var(--text-dim); }
.bd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bd-headline { font-size: 15px; line-height: 1.9; color: var(--text); max-width: 760px; margin: 0; }
.bd-hero-side { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.bd-stats .stat .value.sm { font-size: 22px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 14px; }
.bd-econ { margin-bottom: 0; }
.bd-econ.taw { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.bd-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.bd-big-label { font-size: 12px; color: var(--text-dim); margin-bottom: 3px; }
.bd-big-val { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.bd-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--card-hover); margin: 4px 0 6px; }
.bd-seg { display: block; height: 100%; }
.bd-seg.land, .bd-legend i.land { background: #8d6e3a; }
.bd-seg.build, .bd-legend i.build { background: #5b7fb5; }
.bd-seg.sell, .bd-legend i.sell { background: #b36a6a; }
.bd-seg.other, .bd-legend i.other { background: #8a7fa8; }
.bd-lines { margin: 4px 0 10px; font-size: 13px; }
.bd-lines summary { cursor: pointer; color: var(--gold); font-weight: 600; padding: 4px 0; }
.bd-lines table { margin-top: 6px; }
.bd-lines td { padding: 5px 8px; }
.bd-lines tr.bd-total td { font-weight: 700; border-top: 1px solid var(--border); }
.bd-seg.profit, .bd-legend i.profit { background: var(--green); }
.bd-legend i.loss { background: var(--red); }
.bd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.bd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: middle; }
.bd-flow { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bd-step { flex: 1; min-width: 130px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--card-hover); }
.bd-step span { display: block; font-size: 11.5px; color: var(--text-dim); }
.bd-step b { display: block; font-size: 16px; margin: 2px 0; }
.bd-step small { display: block; font-size: 11px; color: var(--text-faint); }
.bd-step.ok { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.bd-step.ok b { color: var(--green); }
.bd-arrow { align-self: center; color: var(--text-faint); font-weight: 700; padding: 0 2px; }
.bd-verdict { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-top: 10px; font-size: 13px; }
.bd-note { border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border)); background: color-mix(in srgb, var(--green) 7%, transparent); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.8; margin-bottom: 14px; }
.bd-sens th, .bd-sens td { text-align: center; }
.bd-sens td:first-child, .bd-sens th:first-child { text-align: right; }
.bd-tabs { display: flex; gap: 6px; }


/* ═══ المظهر: حجم الخط (في الإعدادات) ═══ */
.font-quick { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.font-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.font-presets button { padding: 9px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; font: inherit; }
.font-presets button:hover { border-color: var(--text-faint); }
.font-presets button.active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); font-weight: 700; }
.font-presets button[data-fs="0.9"]  { font-size: .9em; }
.font-presets button[data-fs="1.12"] { font-size: 1.12em; }
.font-presets button[data-fs="1.25"] { font-size: 1.25em; }
.font-presets button[data-fs="1.4"]  { font-size: 1.4em; }

/* ═══ رادار الطلب: حالة كل شرط في المطابقة ═══ */
.dm-states { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-st { font-size: 11px; padding: 2px 8px; border-radius: 12px; background: var(--border-soft); color: var(--text-dim); white-space: nowrap; }
.dm-st.yes { background: var(--green-soft); color: var(--green); }
.dm-st.near { background: var(--gold-soft); color: var(--gold); }
.dm-st.unknown { background: var(--border-soft); color: var(--text-faint); }
.dm-lv { font-weight: 700; font-size: 12.5px; }
.dm-lv.exact { color: var(--green); } .dm-lv.partial { color: var(--blue); } .dm-lv.near { color: var(--gold); }
.dm-match { border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; background: var(--card); display: grid; gap: 10px; }
.dm-match + .dm-match { margin-top: 10px; }
.dm-match.exact { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.dm-match.near { border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }
.dm-match-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dm-match-head .spacer { flex: 1; }
.dm-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-dim); }
.dm-facts b { color: var(--text); }
.dm-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.8; white-space: pre-line; background: var(--bg); border-radius: 8px; padding: 8px 12px; }
.dm-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.dm-checks .vc { padding: 7px 10px; }
.dm-checks .vc-neutral .vc-ic { color: var(--text-faint); }
.dm-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.dm-warn { border: 1px solid color-mix(in srgb, var(--red) 45%, var(--border)); background: var(--red-soft); color: var(--text); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.dm-cover { font-weight: 700; }

/* ═══ مكتب الصفقات ═══ */
.dd-obl { display: grid; grid-template-columns: 130px 1fr 120px 120px auto auto; gap: 6px; margin-bottom: 6px; align-items: center; }
@media (max-width: 760px) { .dd-obl { grid-template-columns: 1fr 1fr; } }
.dd-wf { display: grid; gap: 4px; }
.dd-wf-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--bg); font-size: 13px; }
.dd-wf-row.in { background: var(--green-soft); }
.dd-wf-row.total { border: 1px solid var(--border); font-size: 14px; }
.dd-wf-row.total.ok b { color: var(--green); }
.dd-wf-row.total.bad b { color: var(--red); }
.dd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .dd-grid { grid-template-columns: 1fr; } }
.dd-combo.comfortable { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.dd-combo.tight { border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); }
.dd-flags { margin-top: 10px; display: grid; gap: 4px; font-size: 12.5px; color: var(--text-dim); }
tr.dd-sel td { background: var(--gold-soft); }
.dd-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dd-step { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); background: var(--card); }
.dd-step.done { background: var(--green-soft); color: var(--green); border-color: transparent; }
.dd-step.now { background: var(--gold); color: #fff; border-color: transparent; font-weight: 700; }
.dd-step.lost { background: var(--red-soft); color: var(--red); border-color: transparent; }
.fc-bar { height: 8px; border-radius: 4px; background: var(--border-soft); position: relative; overflow: hidden; min-width: 80px; }
.fc-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--green); border-radius: 4px; }
.dd-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }

/* ═══ مستشار كشاف: اليقين ═══ */
.cp-cert { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }

/* ═══ مكتب الصفقات (تصميم 2026-10-13) ═══ */
.dd-sim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }
.dd-place { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.dd-place > label { grid-column: 1 / -1; margin-bottom: 0; }
.dd-place .pk { min-width: 0; }
.dd-check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; margin: 2px 0 14px; cursor: pointer; }
.dd-check input { width: 16px; height: 16px; accent-color: var(--gold); }
.dd-sub { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.dd-obl-wrap { border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px; background: var(--bg); margin-bottom: 14px; }
.dd-obl { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(110px, 1fr) minmax(110px, 1fr) 110px 38px; gap: 8px; align-items: center; margin-bottom: 8px; }
.dd-obl .input, .dd-obl .select { min-width: 0; background: var(--card); }
.dd-obl-head { margin-bottom: 4px; }
.dd-obl-head span { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.dd-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-size: 13px; cursor: pointer; }
.dd-toggle input { accent-color: var(--green); width: 16px; height: 16px; }
.dd-del { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text-faint); cursor: pointer; }
.dd-del:hover { color: var(--red); border-color: var(--red); }
.dd-add { margin-top: 2px; }
@media (max-width: 900px) {
  .dd-obl { grid-template-columns: 1fr 1fr; }
  .dd-obl-head { display: none; }
  .dd-obl { padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
}
.dd-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.dd-search { max-width: 240px; }
.dd-empty { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-dim); line-height: 1.8; }
.dd-empty .big { font-size: 34px; }

.dd-result .card-head { flex-wrap: wrap; gap: 8px; }
.dd-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.8; margin-bottom: 14px; }
.dd-banner.ok { background: var(--green-soft); }
.dd-banner.bad { background: var(--red-soft); }
.dd-banner-ic { font-size: 18px; line-height: 1.5; }
.dd-box { border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px; background: var(--bg); min-width: 0; }

.dd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dd-tile { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card); display: grid; gap: 2px; min-width: 0; }
.dd-tile span { font-size: 12px; color: var(--text-dim); }
.dd-tile b { font-size: 20px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.dd-tile small { font-size: 11.5px; color: var(--text-faint); }
.dd-tile.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); } .dd-tile.ok b { color: var(--green); }
.dd-tile.bad { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); } .dd-tile.bad b { color: var(--red); }
.dd-tile.warn { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); } .dd-tile.warn b { color: var(--gold); }

.dd-lender { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.dd-lender:last-child { border-bottom: 0; }
.dd-lender-n { text-align: end; flex: none; }
.dd-skip { margin-top: 8px; font-size: 13px; }
.dd-skip summary { cursor: pointer; color: var(--text-dim); }

.dd-combo-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.dd-combo-head h3 { font-size: 18px; font-weight: 800; margin: 2px 0; }
.dd-kicker { font-size: 12.5px; color: var(--gold); font-weight: 700; }
.dd-verdict-chip { font-size: 13px; padding: 5px 14px; flex: none; }
.dd-verdict { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.8; margin-bottom: 12px; background: var(--bg); border-inline-start: 4px solid var(--border); }
.dd-verdict.comfortable { border-color: var(--green); } .dd-verdict.tight { border-color: var(--gold); }
.dd-verdict.check { border-color: var(--blue); } .dd-verdict.capacity, .dd-verdict.fails { border-color: var(--red); }
.dd-combo .dd-tiles { margin-bottom: 14px; }
.dd-combo .dd-grid { margin-top: 4px; }
.dd-kv { grid-template-columns: 1fr; }
.dd-table td { vertical-align: middle; }

.dd-box .dd-tiles { grid-template-columns: 1fr 1fr; }

/* ═══ خرائط رادار الفرز ═══ */
.sm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
@media (max-width: 1000px) { .sm-wrap { grid-template-columns: 1fr; } }
.sm-map { height: 620px; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: var(--bg); z-index: 0; }
@media (max-width: 700px) { .sm-map { height: 440px; } }
.sm-map.small { height: 380px; }
.sm-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sm-tools { display: grid; gap: 8px; border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px; background: var(--bg); }
.sm-tools label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.sm-tools input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; }
.sm-list { border: 1px solid var(--border-soft); border-radius: 12px; overflow: auto; max-height: 470px; background: var(--card); }
.sm-list-h { font-size: 12.5px; color: var(--text-dim); padding: 8px 12px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: var(--card); z-index: 1; }
.sm-row { display: grid; grid-template-columns: 22px 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border-soft); background: none; color: var(--text); text-align: start; cursor: pointer; font: inherit; }
.sm-row:hover { background: var(--gold-soft); }
.sm-row i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.sm-rank { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.sm-name { display: grid; min-width: 0; }
.sm-name b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-name small { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-prem { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.sm-legend { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font: 12px/1.7 inherit; font-family: inherit; direction: rtl; max-width: 230px; box-shadow: var(--shadow-sm); }
.sm-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }
.sm-legend-note { color: var(--text-faint); font-size: 11px; margin-top: 4px; line-height: 1.6; }
.sm-city-tip { background: var(--card); color: var(--text); border: 1px solid var(--border); font-family: inherit; font-size: 12px; direction: rtl; box-shadow: var(--shadow-sm); padding: 3px 8px; white-space: nowrap; }
.sm-city-tip span { color: var(--text-faint); font-size: 11px; }
.sm-city-tip.sm-tip-hidden { display: none; }
.sm-city-tip.sm-tip-hover { z-index: 700; border-color: var(--gold); }
/* بلاطات OpenStreetMap فاتحة فقط: في الوضع الداكن تُقلب ألوانها (الماء والطرق تبقى مفهومة) */
.sm-dark .sm-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.86) saturate(0.55); }
.sm-dark { background: #1b1d22; }
.sm-cand { background: none; border: 0; font-size: 18px; line-height: 18px; text-align: center; text-shadow: 0 0 3px #fff, 0 0 6px rgba(0,0,0,.35); }
.leaflet-popup-content-wrapper { background: var(--card); color: var(--text); border-radius: 12px; }
.leaflet-popup-tip { background: var(--card); }
.leaflet-popup-content { margin: 12px 14px; font-family: inherit; }
.sm-pop { font-size: 12.5px; }
.sm-pop-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.sm-pop-h b { font-size: 15px; }
.sm-pop-h span { color: var(--text-faint); }
.sm-pop-tier { color: #fff; border-radius: 8px; padding: 4px 8px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.sm-pop table { width: 100%; border-collapse: collapse; }
.sm-pop td { padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
.sm-pop td:last-child { text-align: end; }
.sm-pop-warn { margin-top: 6px; color: var(--red); font-weight: 600; }
.sm-pop-note { margin-top: 6px; color: var(--text-faint); line-height: 1.6; }
.sm-pop-btn { margin-top: 10px; width: 100%; justify-content: center; display: flex; }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { font-size: 10px; }
/* شهود العلاوة ودرجة اليقين (صفحة حي الفرز) */
.sw-card { border-width: 2px; }
.sw-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.sw-badge { color: #fff; font-weight: 800; font-size: 16px; padding: 8px 14px; border-radius: 10px; white-space: nowrap; }
.sw-verdict { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.sw-table td { vertical-align: top; }
.sw-table tr.sw-main td { background: var(--gold-soft); }
.sw-reasons { margin: 12px 0 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 13px; color: var(--text-dim); }
tr.sw-built td { opacity: 0.55; }
tr.sw-built td .chip { opacity: 1; font-size: 11px; }
.sm-pop-cert { margin-top: 6px; font-weight: 700; }
.sm-bars { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.sm-bars i { flex: 1; border-radius: 4px 4px 0 0; min-height: 2px; }
.sm-focus span { color: var(--gold); font-size: 26px; line-height: 26px; text-shadow: 0 0 3px #fff, 0 0 8px rgba(0,0,0,.45); }

/* تبويبات الأقسام (رادار الفرز: الخريطة، الأحياء، مصنع القطع، المدن، المستبعدة) — تلتصق تحت الشريط العلوي */
.rtabs { position: sticky; top: 70px; z-index: 30; display: flex; gap: 6px; overflow-x: auto; padding: 6px; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); scrollbar-width: none; }
.rtabs::-webkit-scrollbar { display: none; }
.rtab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 10px; background: none;
  color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .13s, color .13s; }
.rtab:hover { background: var(--card-hover); color: var(--text); }
.rtab.active { background: var(--gold); color: #fff; }
:root[data-theme="dark"] .rtab.active { color: #1a1200; }
.rtab .n { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rtab.active .n { background: rgba(255,255,255,.28); color: inherit; }
.rtab-panel[hidden] { display: none; }
@media (max-width: 700px) { .rtabs { top: 66px; } .rtab { padding: 9px 12px; font-size: 13px; } }
/* تبويبات كثيرة (مخزوننا: 9): على الشاشة الواسعة تنزل إلى سطر ثانٍ بدل أن يختفي آخرها خارج الشريط بلا شريط تمرير ظاهر؛
   وعلى الجوال يبقى التمرير الأفقي مع تلاشٍ عند الطرف يدلّ على أن بعده تبويبات */
@media (min-width: 701px) { .rtabs { flex-wrap: wrap; overflow-x: visible; } }
@media (max-width: 700px) { .rtabs { -webkit-mask-image: linear-gradient(to left, #000 86%, transparent); mask-image: linear-gradient(to left, #000 86%, transparent); } }

/* رأس تبويب مصنع القطع */
.fc-head { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin-bottom: 16px; }
.fc-intro { flex: 1 1 420px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.fc-intro h3 { font-size: 17px; font-weight: 800; margin: 6px 0 8px; }
.fc-intro .hint { margin: 0; line-height: 1.9; }
.fc-stats { flex: 1 1 360px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fc-stat { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: grid; align-content: center; gap: 2px; }
.fc-stat .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fc-stat .l { font-size: 12.5px; color: var(--text-dim); }
.fc-stat.go .v { color: var(--green); } .fc-stat.neg .v { color: var(--gold); } .fc-stat.cau .v { color: var(--red); }

.sw-prob { display: grid; justify-items: center; min-width: 96px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 12px; }
.sw-prob b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sw-prob span { font-size: 11.5px; color: var(--text-faint); }

/* الطباعة (عرض على الإدارة): الجداول بلا أدوات، بلا القائمة الجانبية، وبتظليلها */
@media print {
  .sidebar, .topbar, #pageActions, .lt-bar, .lt-pager, .rtabs, .lt-export { display: none !important; }
  .lt-scroll { border: 0; overflow: visible; }
  .lt-table th, .lt-table tbody tr:nth-child(even) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lt-table tr { break-inside: avoid; }
  .card { box-shadow: none; break-inside: auto; }
}

/* الجدول في شبكة أعمدة (adv-grid-2 وأمثالها): عنصر الشبكة لا ينكمش افتراضيًّا فكان الجدول العريض يمدّ البطاقة
   خارج الشاشة على الجوال. البطاقة تنكمش والجدول يتمرّر داخل إطاره */
.lt, .card:has(.lt), .adv-grid-2 > * { min-width: 0; max-width: 100%; }

/* صفحة حي في آلة الزمن */
.fd-legend { display: flex; gap: 18px; justify-content: center; font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.fd-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-inline-end: 6px; }
.fd-legend i.dash { height: 0; border-top: 2px dashed; background: none; }
.fd-wf { display: grid; gap: 6px; }
.fd-wf-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 90px; gap: 10px; align-items: center; font-size: 13.5px; }
.fd-wf-row.base span { color: var(--text-dim); }
.fd-wf-row.total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; font-weight: 700; }
.fd-wf-row b { text-align: left; font-variant-numeric: tabular-nums; }
.fd-bar { position: relative; height: 14px; background: var(--bg); border-radius: 7px; overflow: hidden; }
.fd-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.fd-bar i { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; }
.fd-bar i.up { background: var(--green); }
.fd-bar i.down { background: var(--red); }
.fd-market { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.fd-m { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.fd-m .l { font-size: 12px; color: var(--text-dim); }
.fd-m .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 2px 0; }
.lt-table tbody tr.fd-self td { background: var(--gold-soft); }
@media (max-width: 700px) { .fd-wf-row { grid-template-columns: 1fr 1.2fr 70px; font-size: 12.5px; } }

/* ===== Invest-heat district page + infrastructure project page (2026-10-14) ===== */
a.ih-cell { display: block; color: inherit; text-decoration: none; }
a.ih-cell:hover { text-decoration: none; }
.adv-ring.xl { width: 76px; height: 76px; }
.adv-ring.xl text { font-size: 19px; }
.ihd-score { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ihd-parts { display: grid; gap: 12px; }
.ihd-part-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; }
.ihd-part-bar { display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: 10px; align-items: center; margin-top: 4px; }
.ihd-part-bar .bar { height: 9px; border-radius: 6px; background: var(--border-soft); overflow: hidden; }
.ihd-part-bar .bar div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--hot)); }
.ihd-part-n { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ihd-rules { display: grid; gap: 8px; }
.ihd-rule { border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 10px; opacity: .78; }
.ihd-rule.on { opacity: 1; border-color: var(--gold); background: var(--gold-soft); }
.ihd-rule-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 4px; }
.ihd-rule-h .mini { margin-inline-start: auto; }
.ihd-cond { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; font-size: 12.5px; color: var(--text-faint); padding: 3px 0; line-height: 1.6; }
.ihd-cond > span:first-child { flex: 0 0 18px; }
.ihd-cond > span:nth-child(2) { flex: 1 1 0; min-width: 140px; }
.ihd-cond.ok { color: var(--text); }
.ihd-cond.ok > span:first-child { color: var(--green); }
.ihd-cond b { font-weight: 600; text-align: end; margin-inline-start: auto; max-width: 100%; overflow-wrap: anywhere; }
/* قيمة طويلة (جملة الضجيج مثلًا) تنزل سطرًا كاملًا تحت شرطها بدل أن تزاحمه فيتكسّر حرفًا حرفًا */
.ihd-cond b.long { flex: 1 0 100%; text-align: start; padding-inline-start: 26px; font-weight: 500; line-height: 1.75; }
.sm-proj { background: var(--card); border: 1.5px solid #8250df; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; font-size: 13px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.sm-proj-sm { font-size: 11px; border-color: #8a8f98; }
.sm-proj-main { font-size: 19px; border-width: 2.5px; }
.ip-hero { border-color: color-mix(in srgb, #8250df 50%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #8250df 10%, var(--card)), var(--card)); }
.ip-hero .bd-kicker { color: #8250df; }
.ip-verdict { margin: 12px 0 6px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); font-weight: 600; line-height: 1.8; }
.ip-verdict.closer { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.ip-verdict.farther { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.ip-box { position: relative; height: 46px; margin: 26px 8px 6px; direction: ltr; }
.ip-box-line { position: absolute; top: 22px; height: 2px; background: var(--border); }
.ip-box-iqr { position: absolute; top: 12px; height: 22px; border-radius: 6px; background: var(--gold-soft); border: 1px solid var(--gold); }
.ip-box-med { position: absolute; top: 8px; width: 2px; height: 30px; background: var(--gold); transform: translateX(-1px); }
.ip-box-near { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #8250df; border: 2px solid var(--card); transform: translate(-7px, 0); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.ip-box-near span { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: #8250df; direction: rtl; }
.ip-box-ticks { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--text-dim); direction: ltr; flex-wrap: wrap; }
.ip-card td:first-child { width: 190px; color: var(--text-dim); }
@media (max-width: 700px) { .ip-card td:first-child { width: 110px; } .ihd-part-bar { grid-template-columns: 1fr; } }

/* ===== Inventory plot page: price range bar (2026-10-14) ===== */
.ii-range { position: relative; height: 34px; margin: 22px 8px 6px; direction: ltr; }
.ii-band { position: absolute; top: 10px; height: 14px; border-radius: 7px; background: var(--gold-soft); border: 1px solid var(--gold); }
.ii-mid { position: absolute; top: 4px; width: 3px; height: 26px; border-radius: 2px; background: var(--gold); transform: translateX(-1px); }
.ii-ask { position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #8250df; border: 2px solid var(--card); transform: translateX(-7px); }
.ii-ask span { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: #8250df; direction: rtl; }

/* ===== Pressured seller page: negotiation plan (2026-10-14) ===== */
.sdp-plan { border-color: var(--gold); border-width: 2px; }
.sdp-points { margin: 0 0 8px; padding-inline-start: 20px; line-height: 1.9; font-size: 13.5px; }
.sdp-points li { margin-bottom: 2px; }

/* ===== LocalTable card mode (2026-10-15): cards in a grid, same toolbar and pager ===== */
.lt-card { min-width: 0; display: flex; }
.lt-card > .card { margin: 0; flex: 1; }
.lt-cards { margin-top: 12px; }
.lt-cards-empty { grid-column: 1 / -1; }
.lt-card > a { flex: 1; min-width: 0; }

/* ═══════ خرائط الصفحات (KMap): جودة الحياة، المشاريع المستقبلية، مخزوننا ═══════ */
.km-card { padding: 0; overflow: hidden; }
.km-card > .card-head { padding: 12px 16px; flex-wrap: wrap; gap: 10px; margin: 0; }
.km-map { height: min(64vh, 560px); min-height: 360px; background: var(--card-hover); }
.km-foot { padding: 10px 16px 12px; margin: 0; line-height: 1.8; }
.km-toggle { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none; }
.km-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.km-kind { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--text); font-family: inherit; }
.km-kind i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.km-kind small { color: var(--text-faint); }
.km-kind.off { opacity: .45; }
.km-kind.off i { background: var(--border) !important; }
.km-pin-wrap { background: none; border: 0; }
.km-pin { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--card); border: 3px solid var(--c); box-shadow: 0 2px 7px rgba(0,0,0,.3); line-height: 1; transition: transform .12s; }
.km-pin:hover { transform: scale(1.12); }
.km-pin b { position: absolute; top: -9px; inset-inline-end: -11px; background: var(--c); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); font-family: inherit; }
.km-pin.approx { border-style: dashed; }
.km-legend b { display: block; margin-bottom: 4px; }
.km-legend .km-row { display: flex; align-items: center; gap: 4px; }
.km-legend .km-scale { display: flex; gap: 2px; margin: 4px 0 2px; }
.km-legend .km-scale span { flex: 1; height: 10px; border-radius: 2px; }
.km-tip { line-height: 1.7; min-width: 210px; max-width: 300px; white-space: normal; }
.km-tip b.t { font-size: 14px; }
.km-pop-list { max-height: 220px; overflow: auto; margin-top: 8px; border-top: 1px solid var(--border-soft); }
.km-pop-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--border-soft); color: var(--text); text-decoration: none; font-size: 12.5px; line-height: 1.5; }
.km-pop-list a:hover { background: var(--card-hover); }
.km-pop-list small { color: var(--text-faint); }
.km-pop-list b { white-space: nowrap; color: var(--gold); }

/* إشارات السوق: مسافات تفصل أجزاء البطاقة (الحكم، العناوين الفرعية، الجداول) */
.sg-card > .hint { margin: 0 0 16px; line-height: 1.9; }
.sg-card h4 { margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: 15px; }
.sg-card .stat { margin: 4px 0 8px; }
.sg-card > p.hint:last-child { margin-top: 16px; margin-bottom: 0; }
.sg-guide { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; background: var(--card-hover); line-height: 1.95; font-size: 13.5px; }
.sg-guide ul { margin: 6px 0 6px; padding-inline-start: 20px; }
.sg-guide li { margin-bottom: 4px; }
/* التعثّر ربعًا ربعًا: الأقدم يسارًا والأحدث ذهبي، والفجوة مخطّطة */
.op-spark { display: flex; gap: 3px; align-items: flex-end; height: 34px; width: 136px; direction: ltr; }
.op-spark span { flex: 1; background: color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 3px 3px 0 0; min-height: 3px; }
.op-spark span.last { background: var(--gold); }
.op-spark span.gap { height: 100%; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-faint) 45%, transparent) 0 2px, transparent 2px 5px); }
.op-spark-x { display: flex; justify-content: space-between; width: 136px; font-size: 10px; color: var(--text-faint); margin-top: 3px; direction: ltr; }

/* خدمات حي القطعة في خريطة مخزوننا */
.iv-sv { margin: 8px 0 4px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--card-hover); }
.iv-sv-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.iv-sv-score { color: #fff; font-weight: 800; border-radius: 8px; padding: 2px 8px; font-size: 14px; }
.iv-sv-score small { font-weight: 600; opacity: .85; font-size: 10px; }
.iv-sv-icons { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0; font-size: 12.5px; }
.iv-sv-icons span.off { opacity: .35; }

/* القطع قطعةً قطعة في خريطة مخزوننا */
.km-plot-wrap { background: none; border: 0; }
.km-plot { transform: translate(-50%, -50%); display: inline-block; white-space: nowrap; background: var(--card); color: var(--text); border: 2px dashed var(--c); border-inline-start: 6px solid var(--c);
  border-radius: 8px; padding: 1px 6px; font-size: 11px; font-weight: 700; line-height: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.25); direction: ltr; font-variant-numeric: tabular-nums; }
.km-plot.exact { border-style: solid; }
.km-plot:hover { z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.km-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: color-mix(in srgb, var(--gold) 12%, var(--card)); border-top: 1px solid var(--border-soft); font-size: 13.5px; }
.km-picking, .km-picking .leaflet-interactive { cursor: crosshair !important; }


/* ═══════════════════════ مخططاتنا: الموضع والجاهزية والعمران ═══════════════════════ */
.pl-intro { line-height: 1.9; font-size: 13.5px; color: var(--text-dim); }
.pl-intro b { color: var(--text); }
.pl-map { height: min(56vh, 480px); }
.pl-us { display: inline-flex; gap: 3px; vertical-align: middle; }
.pl-u { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; align-items: center; justify-content: center; font-size: 12px; border: 1.5px solid var(--border); opacity: .32; filter: grayscale(.7); }
.pl-u.yes, .pl-u.partial, .pl-u.no, .pl-u.s-yes, .pl-u.s-partial, .pl-u.s-no { opacity: 1; filter: none; }
.pl-u.yes { border-color: #2e9e5b; background: color-mix(in srgb, #2e9e5b 18%, transparent); }
.pl-u.partial { border-color: #c9a227; background: color-mix(in srgb, #c9a227 18%, transparent); }
.pl-u.no { border-color: #c0392b; background: color-mix(in srgb, #c0392b 15%, transparent); }
.pl-u.s-yes, .pl-u.s-partial, .pl-u.s-no { border-style: dashed; opacity: .78; }
.pl-u.s-yes { border-color: #2e9e5b; } .pl-u.s-partial { border-color: #c9a227; } .pl-u.s-no { border-color: #c0392b; }
.pl-chead { line-height: 1.8; }
.pl-plots { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; max-height: 96px; overflow: auto; }
.pl-sec { border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 14px; }
.pl-sec h4 { margin: 0 0 8px; font-size: 14.5px; }
details.pl-sec summary { cursor: pointer; }
.pl-cmap { height: 320px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--card-hover); }
.pl-cmap-legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.pl-cmap-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 4px; vertical-align: middle; }
.pl-cact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.pl-urow { display: grid; grid-template-columns: 118px auto 1fr; gap: 6px 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--border-soft); }
.pl-ul { font-weight: 700; font-size: 13px; }
.pl-seg button { font-size: 12px; padding: 5px 9px; }
.pl-seg button:disabled { cursor: default; }
.pl-sug { background: none; border: 1px dashed var(--border); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; }
.pl-sug:hover { background: var(--card-hover); }
.pl-snips { grid-column: 1 / -1; background: var(--card-hover); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.85; }
.pl-snip + .pl-snip { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 4px; }
.pl-resv { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-res { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--text); }
.pl-res:disabled { cursor: default; }
.pl-res small { color: var(--text-faint); }
.pl-res.yes { border-color: #2e9e5b; background: color-mix(in srgb, #2e9e5b 12%, var(--card)); }
.pl-res.no { border-color: #c0392b; background: color-mix(in srgb, #c0392b 10%, var(--card)); }
.pl-ugrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pl-ucell { display: flex; gap: 8px; align-items: center; border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 10px; background: var(--card-hover); }
.pl-ucell.yes { border-color: #2e9e5b; } .pl-ucell.partial { border-color: #c9a227; } .pl-ucell.no { border-color: #c0392b; }
.pl-ui { font-size: 20px; line-height: 1; }
@media (max-width: 640px) { .pl-urow { grid-template-columns: 1fr; } .pl-cmap { height: 260px; } }
/* «أين القطعة؟» في صفحة القطعة */
.ii-map { height: min(52vh, 440px); min-height: 320px; }
.ii-pick { border-top: 0; border-bottom: 1px solid var(--border-soft); }
.km-plot.ii-me { font-size: 13px; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.pl-poplist { margin-top: 6px; border-top: 1px solid var(--border-soft); max-height: 260px; overflow: auto; }
.pl-poprow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.pl-popbtns { display: flex; gap: 6px; flex-shrink: 0; }
.pl-srem { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--green) 8%, var(--card)); border: 1px dashed color-mix(in srgb, var(--green) 45%, var(--border)); line-height: 1.8; }