/* ============================================================
   Pro-Dashboard — هوية سنكري القابضة (مستخرجة من الموقع الرسمي)
   ============================================================ */
/* ============================================================
   نظام التصاميم (الحزمة 88): 4 تصاميم قابلة للتبديل × فاتح/داكن × شفافية.
   الحامل: سمات data-style / data-theme / data-glass على <html>.
   • رموز (tokens) جديدة تُعرّف لكل تصميم/وضع، وطبقة «أسماء قديمة → جديدة»
     تجعل كل أنماط المكوّنات الحالية ترث التصميم الفعّال تلقائياً (بلا تغيير DOM).
   • الخطوط: i18n يضبط --font-ar/--font-latin حسب اختيار المستخدم (5 لكل لغة).
   ============================================================ */
:root {
  /* ثوابت */
  --near-black: #0C0A09;
  --ease: cubic-bezier(.4, .15, .2, 1); --dur: .2s; --blur: 15px;
  --r-sm: 10px; --r: 13px; --r-lg: 16px; --r-xl: 22px;
  /* الخطوط (القيمتان --font-ar/--font-latin يضبطهما i18n) */
  --font-ar: 'Cairo', system-ui, 'Segoe UI', sans-serif;
  --font-latin: 'IBM Plex Sans', system-ui, sans-serif;
  --font-num: var(--font-latin);
  --font-display: 'Zilla Slab', Georgia, serif;

  /* ===== الافتراضي: «أونكس سنكري» (فاتح — «عاجي مصقول»، الحزمة 8) =====
     فخامة هادئة حديثة بدفء عاجي: خلفية عاجية دافئة، بطاقات بيضاء بظلال ناعمة
     **وحدود شبح رقيقة تضبط الحواف** (الحزمة 8 — اختيار المالك «ج-①»)، أسطح ثانوية
     بمسحة شمبانيا، والنحاسي محصور في الأفعال والمؤشر الحاكم. */
  --bg: #F6F4F0; --surface: #FFFFFF; --surface-2: #F5F1EA;
  --ink: #191714; --ink-soft: #3A362F; --muted: #8A837B; --faint: #B3A99C;
  --line: #EFEBE4; --line-soft: #F5F2EC;
  --accent: #B8603C; --accent-strong: #9a4e30; --accent-ink: #ffffff;
  --accent-soft: rgba(184,96,60,.10); --accent-soft-2: rgba(184,96,60,.17);
  --good: #5f7457; --good-bg: #e3efe0; --warn: #c0822f; --warn-bg: #f6e6c9; --bad: #b4453c; --bad-bg: #f7dcd8;
  --track: #EFEAE2;
  --topbar: #1E1C1F; --topbar-ink: #F0EDEB; --topbar-line: #B8603C; --topbar-glass: rgba(30,28,31,.78);
  --shadow: 0 1px 2px rgba(25,23,20,.03), 0 10px 30px rgba(25,23,20,.07);
  --shadow-lg: 0 2px 6px rgba(25,23,20,.05), 0 26px 60px rgba(25,23,20,.13);
  --shadow-accent: 0 10px 24px rgba(184,96,60,.25);
  --glass-surface: rgba(255,255,255,.6); --glass-border: rgba(255,255,255,.75);
  --grid-bg: none;
  --ambient: radial-gradient(900px 480px at 92% -10%, rgba(184,96,60,.05), transparent 60%), radial-gradient(700px 520px at -6% 12%, rgba(218,205,193,.16), transparent 62%);

  /* ===== أسماء الرموز القديمة → الجديدة (توافق مع كل الأنماط القائمة) ===== */
  --copper: var(--accent); --copper-dark: var(--accent-strong); --copper-soft: var(--accent-soft-2);
  --text: var(--ink-soft); --taupe: var(--muted); --sand: var(--faint);
  --champagne: var(--surface-2); --ivory: var(--surface-2); --white: var(--surface);
  --green: var(--good); --red: var(--bad); --amber: var(--warn);
  --radius: var(--r-lg);
}

/* ============ «أونكس سنكري» — الوضع الداكن (مزاج «فحم دافئ» الافتراضي) ============ */
:root[data-style="classic"][data-theme="dark"] {
  --bg: #141215; --surface: #1D1A1C; --surface-2: #171416;
  --ink: #F1EDE9; --ink-soft: #DAD4CD; --muted: #A8A099; --faint: #867E76;
  --line: #2C282B; --line-soft: #242023;
  --accent: #DD8155; --accent-strong: #B8603C; --accent-ink: #1A130E;
  --accent-soft: rgba(221,129,85,.14); --accent-soft-2: rgba(221,129,85,.24);
  --good: #8FB07F; --good-bg: rgba(95,116,87,.22); --warn: #D9A24E; --warn-bg: rgba(192,130,47,.20); --bad: #D57A6F; --bad-bg: rgba(180,69,60,.24);
  --track: #2A2629;
  /* الشريط فحمي سنكري **ثابت في الوضعين** (الحزمة 7 — اختيار المالك «ب»؛ أُلغي انعكاس الحزمة 94) */
  --topbar: #1E1C1F; --topbar-ink: #F0EDEB; --topbar-line: #B8603C; --topbar-glass: rgba(30,28,31,.85);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4); --shadow-lg: 0 24px 60px rgba(0,0,0,.55); --shadow-accent: 0 10px 26px rgba(221,129,85,.3);
  --glass-surface: rgba(29,26,28,.82); --glass-border: rgba(255,255,255,.07);
  --ambient: radial-gradient(820px 460px at 92% -8%, rgba(221,129,85,.08), transparent 60%);
}

/* ============ ① جَناح سنكري (wing) — فاتح ============ */
:root[data-style="wing"] {
  --r-sm: 9px; --r: 13px; --r-lg: 17px; --r-xl: 22px;
  --bg: #F4EFEA; --surface: #FFFFFF; --surface-2: #FBF6F1;
  --ink: #211C18; --ink-soft: #463D35; --muted: #7C6F64; --faint: #A99C90;
  --line: #EADFD5; --line-soft: #F3ECE4;
  --accent: #B8603C; --accent-strong: #9A4E30; --accent-ink: #FFFFFF;
  --accent-soft: rgba(184,96,60,.10); --accent-soft-2: rgba(184,96,60,.17);
  --good: #5E7A55; --good-bg: #E7EFE1; --warn: #C0822F; --warn-bg: #F7EACB; --bad: #B4453C; --bad-bg: #F7DED9;
  --track: #EDE3D9;
  --topbar: #211C18; --topbar-ink: #F4EFEA; --topbar-line: #B8603C; --topbar-glass: rgba(33,28,24,.72);
  --shadow: 0 4px 14px rgba(33,28,24,.07); --shadow-lg: 0 18px 44px rgba(33,28,24,.14); --shadow-accent: 0 8px 20px rgba(184,96,60,.30);
  --glass-surface: rgba(255,255,255,.55); --glass-border: rgba(255,255,255,.72);
  --ambient: radial-gradient(820px 460px at 100% -8%, rgba(184,96,60,.08), transparent 60%), radial-gradient(680px 520px at -6% 10%, rgba(218,205,193,.20), transparent 62%);
}
:root[data-style="wing"][data-theme="dark"] {
  /* معايرة الحزمة 6: مقروئية أعلى للنصوص الثانوية والفواصل */
  --bg: #17120F; --surface: #231B16; --surface-2: #1B1410;
  --ink: #F4EDE5; --ink-soft: #DCD1C5; --muted: #B0A296; --faint: #8B7E71;
  --line: #3B3025; --line-soft: #2F261D;
  --accent: #D07C52; --accent-strong: #B8603C; --accent-ink: #1A130E;
  --accent-soft: rgba(208,124,82,.15); --accent-soft-2: rgba(208,124,82,.24);
  --good: #8FB07F; --good-bg: rgba(94,122,85,.22); --warn: #D9A24E; --warn-bg: rgba(192,130,47,.20); --bad: #D57A6F; --bad-bg: rgba(180,69,60,.24);
  --track: #33271B;
  /* الشريط فحمي ثابت في الوضعين (الحزمة 7 — أُلغي انعكاس الحزمة 94) */
  --topbar: #211C18; --topbar-ink: #F4EFEA; --topbar-line: #B8603C; --topbar-glass: rgba(33, 28, 24, .85);
  --shadow: 0 4px 16px rgba(0,0,0,.42); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --shadow-accent: 0 8px 22px rgba(208,124,82,.32);
  --glass-surface: rgba(40,32,26,.82); --glass-border: rgba(255,255,255,.08);
  --ambient: radial-gradient(820px 460px at 100% -8%, rgba(208,124,82,.10), transparent 60%), radial-gradient(680px 520px at -6% 10%, rgba(120,80,55,.16), transparent 62%);
}

/* ============ ② مخطّط الكلك (bp) — فاتح ============ */
:root[data-style="bp"] {
  --r-sm: 5px; --r: 7px; --r-lg: 9px; --r-xl: 12px;
  --bg: #F1F0EB; --surface: #FBFAF6; --surface-2: #F4F3EE;
  --ink: #20201C; --ink-soft: #3E3E38; --muted: #6E6E66; --faint: #9E9E94;
  --line: #DEDDD5; --line-soft: #E9E8E1;
  --accent: #B0582F; --accent-strong: #8F4522; --accent-ink: #FFFFFF;
  --accent-soft: rgba(176,88,47,.08); --accent-soft-2: rgba(176,88,47,.15);
  --graphite: #43474A;
  --good: #4C7150; --good-bg: #E7EFE7; --warn: #B07C2C; --warn-bg: #F5EBCF; --bad: #B0463A; --bad-bg: #F6DFDB;
  --track: #E5E4DC;
  --topbar: #2C2F31; --topbar-ink: #EDEDE7; --topbar-line: #B0582F; --topbar-glass: rgba(44,47,49,.72);
  --shadow: 0 1px 2px rgba(20,20,18,.06); --shadow-lg: 0 10px 30px rgba(20,20,18,.11); --shadow-accent: 0 3px 10px rgba(176,88,47,.2);
  --glass-surface: rgba(251,250,246,.6); --glass-border: rgba(255,255,255,.8);
  --grid-bg: linear-gradient(rgba(70,84,90,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(70,84,90,.05) 1px, transparent 1px);
}
:root[data-style="bp"][data-theme="dark"] {
  /* معايرة الحزمة 6: مقروئية أعلى للنصوص الثانوية والفواصل */
  --bg: #131513; --surface: #1C1E1C; --surface-2: #161816;
  --ink: #EDEFEB; --ink-soft: #D0D2CC; --muted: #9AA09A; --faint: #71766F;
  --line: #303430; --line-soft: #262A26;
  --accent: #C56B3E; --accent-strong: #AC552C; --accent-ink: #141210;
  --accent-soft: rgba(197,107,62,.13); --accent-soft-2: rgba(197,107,62,.2);
  --graphite: #AEB4B6;
  --good: #82A877; --good-bg: rgba(76,113,80,.2); --warn: #CDA054; --warn-bg: rgba(176,124,44,.18); --bad: #D0776B; --bad-bg: rgba(176,70,58,.2);
  --track: #2A2D2A;
  /* الشريط غرافيتي ثابت في الوضعين (الحزمة 7 — أُلغي انعكاس الحزمة 94) */
  --topbar: #2C2F31; --topbar-ink: #EDEDE7; --topbar-line: #B0582F; --topbar-glass: rgba(44, 47, 49, .85);
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 14px 40px rgba(0,0,0,.55); --shadow-accent: 0 3px 12px rgba(197,107,62,.28);
  --glass-surface: rgba(30,32,30,.82); --glass-border: rgba(230,235,230,.08);
  --grid-bg: linear-gradient(rgba(150,170,175,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(150,170,175,.045) 1px, transparent 1px);
}

/* ============ ③ المِرصَد (marsad) — فاتح («نهار الكونسول») ============ */
:root[data-style="marsad"] {
  --r-sm: 8px; --r: 11px; --r-lg: 15px; --r-xl: 20px;
  --bg: #EBEEF1; --surface: #FFFFFF; --surface-2: #F2F5F7;
  --ink: #14181C; --ink-soft: #39424A; --muted: #66727B; --faint: #97A2AA;
  --line: #DEE4E8; --line-soft: #EAEEF1;
  --accent: #B8603C; --accent-strong: #9A4E30; --accent-ink: #FFFFFF;
  --accent-soft: rgba(184,96,60,.10); --accent-soft-2: rgba(184,96,60,.18);
  --good: #4C7150; --good-bg: #E6EFE8; --warn: #B07C2C; --warn-bg: #F5EBCF; --bad: #B0463A; --bad-bg: #F6DFDB;
  --track: #E4E9EC;
  --topbar: #14181C; --topbar-ink: #EAEEF2; --topbar-line: #B8603C; --topbar-glass: rgba(20,24,28,.72);
  --shadow: 0 2px 8px rgba(20,30,38,.06); --shadow-lg: 0 16px 40px rgba(20,30,38,.12); --shadow-accent: 0 4px 14px rgba(184,96,60,.2);
  --glow: 0 0 0 1px rgba(184,96,60,.4), 0 8px 20px rgba(184,96,60,.16);
  --glass-surface: rgba(255,255,255,.6); --glass-border: rgba(255,255,255,.85);
  --ambient: radial-gradient(900px 500px at 100% -12%, rgba(184,96,60,.05), transparent 62%), radial-gradient(680px 520px at -6% 8%, rgba(70,110,130,.06), transparent 62%);
}
:root[data-style="marsad"][data-theme="dark"] {
  /* معايرة الحزمة 6: مقروئية أعلى للنصوص الثانوية والفواصل */
  --bg: #0E1216; --surface: #171C22; --surface-2: #11161A;
  --ink: #ECF0F4; --ink-soft: #C7D0D7; --muted: #93A0AA; --faint: #66717B;
  --line: #29323A; --line-soft: #1E262D;
  --accent: #DA7C4E; --accent-strong: #B8603C; --accent-ink: #11161A;
  --accent-soft: rgba(218,124,78,.14); --accent-soft-2: rgba(218,124,78,.26);
  --good: #63BE86; --good-bg: rgba(99,190,134,.16); --warn: #E3A24E; --warn-bg: rgba(227,162,78,.16); --bad: #E56A5B; --bad-bg: rgba(229,106,91,.16);
  --track: #232B31;
  /* الشريط فحمي ثابت في الوضعين (الحزمة 7 — أُلغي انعكاس الحزمة 94) */
  --topbar: #14181C; --topbar-ink: #EAEEF2; --topbar-line: #B8603C; --topbar-glass: rgba(20, 24, 28, .85);
  --glow: 0 0 0 1px rgba(218,124,78,.55), 0 0 22px rgba(218,124,78,.28);
  --shadow: 0 10px 34px rgba(0,0,0,.5); --shadow-lg: 0 22px 60px rgba(0,0,0,.66); --shadow-accent: 0 8px 22px rgba(218,124,78,.3);
  --glass-surface: rgba(24,30,36,.82); --glass-border: rgba(160,190,210,.1);
  --ambient: radial-gradient(900px 500px at 100% -10%, rgba(218,124,78,.13), transparent 60%), radial-gradient(700px 520px at -6% 8%, rgba(70,110,130,.10), transparent 62%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ar);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
/* طبقتا الخلفية: توهّج بيئي (ambient) + شبكة هندسية (مخطّط الكلك) — خلف المحتوى */
/* الجهات الأربع صريحة لا «inset: 0» — WebView الأقدم من Chrome 87 يتجاهل الاختصار فتنهار الطبقات (الحزمة 103) */
body::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; background: var(--ambient, transparent); transition: background .4s var(--ease); }
body::after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; background: var(--grid-bg, transparent); background-size: 26px 26px; }
#appView, #loginView, #modalRoot { position: relative; z-index: 1; }
/* خط الواجهة يتبع اللغة المختارة (قابل للتبديل من الإعدادات) */
html[lang="en"] body { font-family: var(--font-latin); }
[dir="rtl"] { direction: rtl; }
[dir="ltr"] { direction: ltr; }
a { color: var(--copper); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* -------- أزرار -------- */
.btn {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: .15s;
}
.btn:hover { border-color: var(--copper); color: var(--copper); }
.btn-primary {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}
.btn-primary:hover { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-icon { padding: 8px 10px; border-radius: 10px; line-height: 1; }

/* -------- الدخول -------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* خلفية فحمية ثابتة عبر التصاميم/الأوضاع — فُصلت عن --topbar لأنه صار يعكس الوضع (الحزمة 94) */
  background: linear-gradient(135deg, #1E1C1F, var(--near-black));
  padding: 20px;
  transition: background .4s var(--ease);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
  text-align: center;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 4px;
  font-size: 30px;
  color: var(--ink);
}
.brand-mark .dot { color: var(--copper); }
.brand-sub { color: var(--muted); font-size: 13px; margin-top: 8px; letter-spacing: 1px; }

/* -------- شعار سنكري (الصورة الأصلية) -------- */
.login-head {
  /* فحمية ثابتة (لا تتبع --topbar المنعكس) — الحزمة 94 */
  background: #1E1C1F;
  border-bottom: 3px solid var(--accent);
  padding: 30px 30px 24px;
}
.login-logo { width: 150px; max-width: 70%; height: auto; display: block; margin: 0 auto; }
.login-head .brand-sub { color: #F0EDEB; opacity: .72; margin-top: 12px; }
.login-body { padding: 26px 34px 32px; }
.login-card h1 { font-size: 19px; margin: 0 0 14px; color: var(--ink); }
.field { text-align: start; margin: 14px 0; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-family: inherit; font-size: 15px; background: var(--ivory);
}
.field input:focus { outline: none; border-color: var(--copper); background: var(--surface); }
.field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-family: inherit; font-size: 15px; background: var(--ivory); color: var(--text);
}
.field select:focus { outline: none; border-color: var(--copper); background: var(--surface); }
.field .newval { margin-top: 8px; }
.field .ro {
  padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--ivory); color: var(--muted); font-size: 14px;
}
.login-card .btn-primary { width: 100%; padding: 13px; margin-top: 8px; }
.login-err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 10px; }

/* -------- الترويسة -------- */
.topbar {
  background: var(--topbar);
  color: var(--topbar-ink);
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 60px;
  position: sticky; top: 0; z-index: 30;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
/* «التوهّج الداخلي» (الحزمة 8 — اختيار المالك «ب-②» بدل الخيط الذي رفضه): لا خطّ خارجي —
   غسلة نحاسية خافتة تذوب داخل الحافة السفلية للشريط نفسه، ساكنة بلا حركة، وتعمل على
   الكبسولة المستديرة (اللؤلؤ) كما على الأشرطة المستقيمة. شريط «الأفق» الجانبي العمودي
   يعيد تعريف background في قاعدته فلا يرث التوهّج (مقصود — التوهّج سفلي أفقي). */
.topbar {
  background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 46%), var(--topbar);
}
.topbar .logo { display: flex; align-items: center; }
.topbar .logo-img { height: 38px; width: auto; display: block; }
.topbar .spacer { flex: 1; }
.topbar .icon-btn {
  /* تظليل يتبع لون نصّ الشريط (يعمل على الشريط الداكن والفاتح معاً — الحزمة 94) */
  background: color-mix(in srgb, var(--topbar-ink) 9%, transparent); border: none; color: var(--topbar-ink);
  width: 38px; height: 38px; border-radius: 10px; font-size: 16px;
  transition: background-color .18s var(--ease), color .18s, transform .18s var(--ease);
}
.topbar .icon-btn:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }
.company-switch {
  background: color-mix(in srgb, var(--topbar-ink) 9%, transparent); color: var(--topbar-ink);
  border: 1px solid color-mix(in srgb, var(--topbar-ink) 18%, transparent); border-radius: 10px;
  padding: 7px 12px; font-size: 14px; font-weight: 600;
}
/* (الحزمة 7) الشريط فحمي ثابت في الوضعين — الشعار الشمبانيا يجلس عليه مباشرةً بلا شريحة. */
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.user-chip .role { background: var(--copper); color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 11px; }

/* -------- التخطيط -------- */
.container { max-width: 1240px; margin: 0 auto; padding: 22px 18px 60px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h2 { font-size: 22px; margin: 0; color: var(--ink); }
.page-head .spacer { flex: 1; }

/* -------- بطاقات المشاريع -------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; transition: .15s; cursor: pointer;
}
.card:hover { transform: translateY(-2px); border-color: var(--copper-soft); }
.card h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
.card .meta { color: var(--muted); font-size: 13px; }
.badge { display: inline-block; border-radius: 20px; padding: 2px 12px; font-size: 12px; font-weight: 600; }
.badge.planning { background: var(--champagne); color: var(--taupe); }
.badge.active { background: #e3efe0; color: var(--green); }
.badge.on_hold { background: #f6e6c9; color: var(--amber); }
.badge.completed { background: var(--ink); color: var(--ivory); }
.badge.paid { background: #e3efe0; color: var(--green); }
.badge.unpaid { background: #f6e6c9; color: var(--amber); }
.badge.overdue { background: #f7dcd8; color: var(--red); }
.pay-toggle { border: none; cursor: pointer; }
.pay-toggle:hover { filter: brightness(.96); }
.pay-status { white-space: nowrap; }
.late-tag { color: var(--red); font-weight: 700; font-size: 12px; margin-inline-start: 8px; }

/* -------- المرفقات -------- */
.att-n {
  display: inline-block; min-width: 15px; text-align: center;
  background: var(--copper); color: #fff; border-radius: 10px;
  font-size: 10px; font-weight: 700; padding: 0 4px; margin-inline-start: 2px; vertical-align: top;
}
.att-list { margin-bottom: 6px; }
.att-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 6px; background: var(--white);
}
.att-row .att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.att-row .att-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* -------- تذكير الدفعة القادمة -------- */
.next-pay {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ivory); border: 1px solid var(--line); border-inline-start: 4px solid var(--copper);
  border-radius: 12px; padding: 12px 16px; margin: 4px 0 18px; font-size: 14px;
}
.next-pay.overdue { border-inline-start-color: var(--red); background: #fbeeec; }
.next-pay .days { font-weight: 700; color: var(--copper); font-family: var(--font-display); margin-inline-start: auto; }
.next-pay.overdue .days { color: var(--red); }

/* -------- شريط التقدّم -------- */
.progress { height: 10px; background: var(--ivory); border-radius: 20px; overflow: hidden; margin: 12px 0 6px; }
.progress > span { display: block; height: 100%; background: var(--copper); border-radius: 20px; }
.progress.behind > span { background: var(--red); }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 16px 0 24px; }
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
/* حاوية مؤشر مفرد: دونات القسم المالي / قرص متابعة التكاليف (الحزمة 63) */
.kpi-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin: 16px 0 24px; }
.kpi .v { font-size: 28px; font-weight: 700; color: var(--copper); font-family: var(--font-display); }
.kpi .v.behind { color: var(--red); }
.kpi .v.sm { font-size: 16.5px; line-height: 1.5; padding: 7px 0 5px; } /* بطاقة نصية (سير المشروع) */
.kpi .l { color: var(--muted); font-size: 13px; }

/* -------- بطاقة معلومات المشروع -------- */
.info-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 16px 0 6px; box-shadow: var(--shadow);
}
.info-cell { background: var(--white); padding: 12px 16px; }
.info-l { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.info-v { color: var(--ink); font-size: 14px; font-weight: 600; }

/* -------- جداول -------- */
table.tbl { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); font-size: 14px; }
table.tbl th { background: var(--ivory); color: var(--taupe); font-weight: 700; }
table.tbl tr:last-child td { border-bottom: none; }
.row-behind { color: var(--red); font-weight: 600; }
/* النشاط المنتهي فعلياً (100%): خلفية خضراء مريمية فاتحة + شارة ✓ (اختيار المالك) */
.row-done td { background: var(--good-bg); }
.done-tag { display: inline-block; background: var(--good); color: #fff; border-radius: 12px; padding: 0 9px; font-size: 10.5px; font-weight: 700; margin-inline-start: 6px; vertical-align: middle; }
/* لون النسبة الفعلية حسب الفرق عن المفترض */
.pct-ok { color: var(--green); font-weight: 800; }
.pct-warn { color: var(--amber); font-weight: 800; }
.pct-late { color: var(--red); font-weight: 800; }
.tbl-total td { background: var(--ivory); font-weight: 700; color: var(--ink); }
/* جداول بأعمدة قابلة للتحكم: العرض يتغيّر بسحب حافة عنوان العمود */
.tbl-cols th { resize: horizontal; overflow: hidden; min-width: 56px; white-space: nowrap; }
/* تثبيت سطر الإجمالي يحتاج ثلاثة شروط معاً (دروس الحزم 14/16):
   border-collapse: separate (collapse يكسر sticky) + overflow: visible (hidden الموروث يكسره)
   + محدِّد مزدوج .tbl.tbl-sepa كي يغلب قوّة table.tbl */
.tbl.tbl-sepa { border-collapse: separate; border-spacing: 0; overflow: visible; }
.tbl.tbl-sepa .tbl-total td { position: sticky; bottom: 0; z-index: 2; box-shadow: inset 0 1px 0 var(--taupe); }
/* ترويسة مثبَّتة أعلى منطقة التمرير (نفس شروط sticky الثلاثة أعلاه) */
.tbl.tbl-sepa thead th { position: sticky; top: 0; z-index: 3; background: var(--ivory); box-shadow: inset 0 -1px 0 var(--taupe); }
/* تظليل السطر الذي يقف عليه مؤشر الماوس (عدا سطر الإجمالي) */
table.tbl tbody tr:not(.tbl-total):hover td { background: #f2e9e1; }
/* خيارات نافذة الأعمدة */
.col-opt { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 14px; cursor: pointer; }
/* ترتيب الفقرات بالسحب (الحزمة 73) */
.drag-h { cursor: grab; color: var(--muted); font-size: 15px; user-select: none; line-height: 1; }
.drag-h:active { cursor: grabbing; }
.sec-order-list { display: flex; flex-direction: column; gap: 6px; }
.sec-order-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ivory); cursor: grab; }
.sec-order-row:hover { border-color: var(--copper); }
.sec-order-row .sec-order-lbl { font-size: 14px; }
.pr-sec-wrap { display: flex; flex-direction: column; gap: 4px; }
.pr-sec-block { border: 1px solid transparent; border-radius: 10px; padding: 2px 4px; }
.pr-sec-block:hover { border-color: var(--line); }
.pr-sec-hdr { display: flex; align-items: center; gap: 8px; }
.pr-sec-drag { cursor: grab; }
/* زرّ «ابدأ صفحة جديدة» لكل فقرة في التقرير (الحزمة 75) */
.pr-pb-btn { margin-inline-start: auto; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; padding: 0 8px; font-size: 14px; line-height: 1.6; cursor: pointer; }
.pr-pb-btn:hover { border-color: var(--copper); color: var(--copper); }
.pr-pb-btn.on { background: var(--copper); border-color: var(--copper); color: #fff; }
.sec-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.sec-head h3 { margin: 0; }
.sec-head .btn { margin-inline-start: auto; padding: 6px 12px; }
.grp-main td { background: var(--champagne); font-weight: 700; color: var(--ink); }
.grp-toggle { text-align: center; width: 34px; }
.grp-name { font-weight: 700; }
.grp-sub .sub-name { padding-inline-start: 24px; }
.row-actions { white-space: nowrap; text-align: center; }
.mini-btn { border: none; background: transparent; font-size: 14px; padding: 3px 5px; border-radius: 6px; line-height: 1; opacity: .8; }
.mini-btn:hover { background: var(--ivory); opacity: 1; }

/* -------- نوافذ -------- */
.modal-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(12, 10, 9, .55); display: grid; place-items: center; z-index: 50; padding: 18px; }
.modal { background: var(--white); border-radius: 18px; width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); }
.modal header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal header h3 { margin: 0; font-size: 18px; color: var(--ink); }
.modal .body { padding: 20px; }
/* ⭐ الحزمة 23: `flex-wrap` على تذييل النوافذ — بدونه تتجاوز أزرارُ نافذةٍ ذات ثلاثة
   إجراءات عرضَ الهاتف، و`.modal-wide` بـ`overflow:hidden` **يقصّها فتصير غير قابلة للنقر**
   (نفس العلّة الموصوفة في § 3-ب رقم 33). والأزرار تلتفّ سطراً ثانياً بدل أن تُقصّ. */
.modal footer { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.modal footer .btn { min-width: 0; }
.modal-wide { max-width: 920px; display: flex; flex-direction: column; overflow: hidden; }
.modal-wide .body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal-wide #imp_preview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.modal-wide #imp_preview .imp-scroll { flex: 1 1 auto; min-height: 140px; max-height: none; }
/* منطقة جدول متمرّرة عامة داخل النوافذ العريضة (قائمة الأعمال/الزيارة) — نفس نمط imp_preview */
.modal-wide .mscroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.modal-wide .mscroll .imp-scroll { flex: 1 1 auto; min-height: 140px; max-height: none; }

/* -------- استيراد CSV -------- */
.imp-text {
  width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-family: var(--font-ar); font-size: 13px; background: var(--ivory); resize: vertical;
}
.imp-text:focus { outline: none; border-color: var(--copper); background: var(--surface); }
.imp-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 10px; max-height: 56vh; }
.tbl.imp-tbl { box-shadow: none; border-radius: 0; overflow: visible; table-layout: fixed; width: auto; border-collapse: separate; border-spacing: 0; }
/* عرض العمود قابل للتغيير بالسحب من زاوية العنوان + ترويسة ثابتة عند التمرير */
.imp-tbl th { white-space: nowrap; font-size: 12px; width: 180px; min-width: 70px; resize: horizontal; overflow: hidden; position: sticky; top: 0; z-index: 3; background: var(--champagne); box-shadow: inset 0 -1px 0 var(--taupe); }
.imp-tbl td { border-bottom: 1px solid var(--line); }
.imp-tbl th.imp-del-h { width: 36px; min-width: 36px; resize: none; }
.imp-tbl td { padding: 4px 6px; }
.imp-cell { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.imp-cell:focus { outline: none; border-color: var(--copper); }
.imp-del-h { width: 34px; }
.imp-del { text-align: center; }
.imp-del-btn { border: none; background: transparent; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px; opacity: .75; }
.imp-del-btn:hover { background: var(--bad-bg); opacity: 1; }
/* ألوان الحالة من الرموز لا قيماً مثبّتة — كانت خلفيات فاتحة ثابتة تظهر كاشفة قبيحة في الوضع الداكن (الحزمة 6) */
.imp-status { margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.imp-status.loading { background: var(--warn-bg); color: var(--warn); }
.imp-status.ok { background: var(--good-bg); color: var(--good); }
.imp-status.err { background: var(--bad-bg); color: var(--bad); }
.imp-main td { background: var(--champagne); }
.imp-main .imp-cell { background: var(--champagne); font-weight: 700; border-color: var(--sand); }
.imp-toggle { border: none; background: transparent; cursor: pointer; font-size: 12px; color: var(--copper); padding: 2px 4px; }

/* -------- منحنى S -------- */
.scurve { margin: 4px 0 22px; }
.scurve .sc-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 8px 4px; direction: ltr; }
.scurve svg { width: 100%; height: auto; display: block; }
.sc-legend { margin-inline-start: auto; font-size: 12.5px; display: flex; gap: 14px; }
.sc-legend .sc-p { color: var(--copper); font-weight: 700; }
.sc-legend .sc-a { color: var(--ink); font-weight: 700; }

/* -------- نافذة تسجيل الزيارة -------- */
.vis-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.vis-meta .field { margin: 4px 0; }
.vis-tbl td { vertical-align: middle; }
.vis-tbl .vis-act td { background: var(--champagne); font-weight: 700; color: var(--ink); }
.vis-tbl .vis-act td .code { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.vis-qty { background: rgba(111, 132, 101, .14); border: 1px solid #6F8465; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; color: var(--good); white-space: nowrap; }
.vis-note { color: var(--muted); font-size: 12px; font-weight: 400; }
.vis-val { width: 100px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; }
.vis-val:focus { outline: none; border-color: var(--copper); }
.vis-val:disabled { background: var(--ivory); opacity: .55; }
.vis-mode { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 12.5px; background: var(--surface); color: var(--text); }
/* قائمة الأعمال: نشاط بلا تغيّر مطلوب في الفترة يظهر باهتاً */
.wl-idle td { opacity: .55; }
/* شريط اختيار تفاصيل قائمة الأعمال */
.wl-cols { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; background: var(--ivory); border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; margin: 4px 0 10px; font-size: 13px; }
.wl-cols b { color: var(--taupe); font-size: 12px; }
.wl-opt { padding: 2px 0; }

/* -------- نافذة ربط الكميات بالأنشطة (سلال) --------
   التلوين حسب نوع الكيان: السلال (أنشطة) نحاسي · الرقائق (بنود كميات) أخضر مريمي #6F8465 */
.lk-legend { display: flex; gap: 14px; align-items: center; margin-inline-start: auto; font-size: 12px; color: var(--muted); }
.lk-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lk-dot { width: 9px; height: 9px; border-radius: 50%; background: #6F8465; display: inline-block; flex: none; }
.lk-grid { display: grid; grid-template-columns: 260px 1fr; gap: 12px; align-items: start; overflow: auto; flex: 1 1 auto; min-height: 200px; max-height: 58vh; padding: 2px; }
.lk-bucket { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--white); box-shadow: 0 3px 10px rgba(30, 28, 31, .05); }
.lk-bucket h4 { margin: 0; padding: 9px 13px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); font-size: 13px; cursor: pointer; display: flex; gap: 8px; align-items: center; user-select: none; border-inline-start: 4px solid var(--copper); }
.lk-bucket h4:hover { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.lk-bucket h4 .code { color: var(--accent); opacity: .8; font-size: 11.5px; font-weight: 400; }
.lk-bucket .lk-cnt { margin-inline-start: auto; background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 12px; padding: 0 8px; font-size: 11px; }
.lk-bucket.lk-pool h4 { background: var(--surface-2); border-inline-start-color: var(--faint); color: var(--ink); cursor: default; }
.lk-body { padding: 9px 12px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.lk-chip { border: 1.5px solid #6F8465; background: rgba(111, 132, 101, .09); color: var(--ink-soft); border-radius: 15px; padding: 3px 11px; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: .12s; }
.lk-chip:hover { box-shadow: 0 2px 7px rgba(30, 28, 31, .16); transform: translateY(-1px); }
.lk-chip.sel { outline: 2.5px solid var(--ink); outline-offset: 1px; font-weight: 700; }
.lk-chip .x { font-weight: 900; opacity: .55; cursor: pointer; font-size: 12px; }
.lk-chip .x:hover { color: var(--red); opacity: 1; }
.lk-chip .pct { background: var(--surface); color: var(--ink); border: 1px dashed #6F8465; border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 800; cursor: pointer; }
.lk-chip .pct:hover { background: var(--surface-2); }
.lk-chip .qty { background: var(--surface); border-radius: 10px; padding: 0 7px; font-size: 10.5px; font-weight: 700; color: var(--good); }
/* ⚖ وزن البند داخل النشاط (خاصية جهة النشاط ← نحاسي) — مميز عن ⇄ نسبة المشاركة (جهة البند ← مريمي) */
.lk-chip .wt { background: var(--accent-soft); border: 1px dashed var(--copper); border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 800; color: var(--accent); cursor: pointer; }
.lk-chip .wt:hover { background: rgba(184, 96, 60, .18); }
/* البند الموزّع على أكثر من نشاط: إطار متقطّع + ⇄ قبل اسمه */
.lk-chip.split { border-style: dashed; background: rgba(111, 132, 101, .15); }
.lk-empty { color: var(--faint); font-size: 12px; }
@media (max-width: 720px) { .lk-grid { grid-template-columns: 1fr; } }

.empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 14px 0 18px; flex-wrap: wrap; }
.tabs button { background: none; border: none; padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs button.active { color: var(--copper); border-bottom-color: var(--copper); }

@media (max-width: 640px) {
  .topbar .logo { font-size: 17px; letter-spacing: 2px; }
  .container { padding: 16px 12px 50px; }
}

/* -------- الجودة المبسّطة (الحزمة 50): شارتا الحكم + أدوات الجودة في نافذة الزيارة -------- */
.q-acc { display: inline-block; color: var(--green); font-weight: 700; font-size: 12px; white-space: nowrap; }
.q-rej { display: inline-block; color: var(--red); font-weight: 800; font-size: 12px; white-space: nowrap; }
.vis-q { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.vis-q .vis-qsel { font-size: 12px; padding: 4px 6px; }
.vis-q .vis-qpct { width: 62px; font-size: 12px; padding: 4px 6px; }
.vis-q .vis-qnote { width: 120px; font-size: 12px; padding: 4px 6px; }

/* -------- مجموعة أزرار التقرير في نافذة قائمة الأعمال (الحزمة 53) -------- */
.wl-report { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.wl-report b { font-size: 12px; color: var(--muted); }
.wl-report .btn { padding: 4px 11px; font-size: 12.5px; }

/* زرّ مسح التقييم داخل نافذة 🧪 */
.q-del { margin-top: 10px; color: var(--red); border-color: var(--red); }
.q-del:hover { background: rgba(180, 69, 60, .07); color: var(--red); border-color: var(--red); }

/* -------- منتقي نمط عرض النِّسب لكل عمود (الحزمة 55) -------- */
.col-opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col-opt-lab { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.pct-style-sel { font-size: 12px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
/* حقل تعديل اسم العمود في نافذة الأعمدة (الحزمة 69) */
.col-rename { font-size: 12px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); max-width: 160px; margin-inline-start: auto; }
.wl-opt .pct-style-sel { margin-inline-start: 5px; }
/* خلايا الجداول: توسيط الحلقة/الشريط شاقولياً */
.tbl td .pbar, .tbl td svg { vertical-align: middle; }

/* -------- أعمدة الجداول داخل نافذة تقرير المشروع (الحزمة 57) -------- */
.pr-subcols { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 8px 0; padding-inline-start: 26px; border-inline-start: 2px solid var(--line); }
.pr-subopt { font-size: 12.5px; color: var(--muted); cursor: grab; user-select: none; padding: 1px 6px; border: 1px dashed transparent; border-radius: 6px; }
.pr-subopt:hover { border-color: var(--line); background: var(--ivory); }
.pr-subopt:active { cursor: grabbing; }

/* -------- ترتيب أعمدة الجداول بالسحب + إدخال النفقات (الحزمة 60) -------- */
.tbl-cols th[draggable="true"] { cursor: grab; }
.tbl-cols th.col-dragging { opacity: .45; }
.tbl-cols th.col-dragover { box-shadow: inset 3px 0 0 var(--copper); }
/* ترتيب الأسطر بالنقر على العنوان (جدول الأنشطة) */
.tbl-cols th.th-sort { cursor: pointer; user-select: none; }
.tbl-cols th .sort-ar { font-size: 10px; color: var(--copper); font-weight: 800; }
.exp-in { width: 100%; min-width: 68px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-ar); font-size: 12px; background: var(--surface); color: var(--text); }
.exp-in:focus { outline: none; border-color: var(--copper); }
/* تجاوز النفقات (نصّ رقمي) */
.exp-over { color: var(--bad); font-weight: 800; }
/* بطاقة الكمية/الوحدة عند كل بند (نافذة الزيارة/قائمة الأعمال/التقرير) — لونها الأخضر القديم (طلب المالك) */
.qu-badge { display: inline-block; background: rgba(111, 132, 101, .14); border: 1px solid #6F8465; color: var(--good); font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 10px; vertical-align: middle; white-space: nowrap; }
/* بطاقات المؤشرات: حلقة الفجوة + شريط أعداد الأنشطة (الحزمة 60) */
.kpi-ring-band { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin: 6px 0; }
.kpi-ring-band .kpi { flex: 0 1 auto; min-width: 150px; }

/* ============================================================
   الحزمة 88 — طبقة نظام التصاميم: تصحيحات الوضع الداكن + الشفافية
   + توقيعات كل تصميم + الحركة الأنيقة الخفيفة. (تُطبَّق فوق ما سبق.)
   ============================================================ */

/* --- تصحيح التظليلات الثابتة كي تتبع الوضع/التصميم --- */
table.tbl tbody tr:not(.tbl-total):hover td { background: var(--accent-soft); }
.row-done td { background: var(--good-bg) !important; }
.badge.active, .badge.paid { background: var(--good-bg); color: var(--good); }
.badge.on_hold, .badge.unpaid { background: var(--warn-bg); color: var(--warn); }
.badge.overdue { background: var(--bad-bg); color: var(--bad); }
.badge.planning { background: var(--accent-soft-2); color: var(--accent-strong); }
.badge.completed { background: var(--topbar); color: var(--topbar-ink); }
.next-pay.overdue { background: var(--bad-bg); }

/* --- الشفافية الزجاجية (مفتاح data-glass، الشاشة فقط) --- */
:root[data-glass="on"] .card,
:root[data-glass="on"] .kpi,
:root[data-glass="on"] .kpi-card,
:root[data-glass="on"] table.tbl,
:root[data-glass="on"] .scurve .sc-box {
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
  backdrop-filter: blur(var(--blur)) saturate(1.4);
  border-color: var(--glass-border);
}
:root[data-glass="on"] .topbar {
  /* التوهّج الداخلي (الحزمة 8) فوق السطح الزجاجي نفسه */
  background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 46%), var(--topbar-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

/* --- حركة أنيقة خفيفة (تُلغى مع prefers-reduced-motion أدناه) --- */
.btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s, color .18s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow-accent); }
.btn:active { transform: translateY(0); }
.card { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s, background-color .4s var(--ease); }
.kpi { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s, background-color .4s var(--ease); }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-soft-2); }
.progress > span { transition: width 1s var(--ease); }
.modal-back { animation: pdFade .2s var(--ease); }
.modal { animation: pdModalIn .26s var(--ease); }
@keyframes pdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdModalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* التوقيعات مربوطة بـ data-sig (= التصميم للأساسية، ومفصل «الشكل» في المخصّص) — الحزمة 90 */
/* --- توقيع «مخطّط الكلك» (bp): علامات زوايا هندسية --- */
:root[data-sig="bp"] .kpi,
:root[data-sig="bp"] .scurve .sc-box { position: relative; }
:root[data-sig="bp"] .kpi::before,
:root[data-sig="bp"] .scurve .sc-box::before { content: ""; position: absolute; top: 6px; inset-inline-end: 6px; width: 9px; height: 9px; border-top: 1.5px solid var(--accent-soft-2); border-inline-end: 1.5px solid var(--accent-soft-2); pointer-events: none; }
:root[data-sig="bp"] .kpi::after,
:root[data-sig="bp"] .scurve .sc-box::after { content: ""; position: absolute; bottom: 6px; inset-inline-start: 6px; width: 9px; height: 9px; border-bottom: 1.5px solid var(--accent-soft-2); border-inline-start: 1.5px solid var(--accent-soft-2); pointer-events: none; }

/* --- توقيع «المِرصَد» (marsad): توهّج نحاسي + كشف أزرار الصفّ عند التأشير --- */
:root[data-sig="marsad"] .kpi:hover { box-shadow: var(--glow); border-color: var(--accent); }
:root[data-sig="marsad"] .btn:hover,
:root[data-sig="marsad"] .icon-btn:hover,
:root[data-sig="marsad"] .btn-icon:hover { box-shadow: var(--glow); }
:root[data-sig="marsad"] .row-actions { opacity: .5; transition: opacity .18s var(--ease); }
:root[data-sig="marsad"] table.tbl tbody tr:hover .row-actions { opacity: 1; }
:root[data-sig="marsad"][data-theme="dark"] .kpi .v { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  body::before, body::after { transition: none; }
}
.act-bar-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface); margin-top: 12px; }

/* ============================================================
   الحزمة 89 — طبقة المكوّنات الراقية (تطابق النماذج): تُعيد تصميم
   الأزرار/البطاقات/الجداول/النوافذ/الحقول/الشارات/التبويبات لكل التصاميم،
   وتضبط أيقونات SVG (وزنها يتبع التصميم). تُطبَّق فوق القواعد القديمة.
   ============================================================ */
:root { --ic-sw: 1.7; --ic-cap: round; --ic-join: round; }
:root[data-style="wing"] { --ic-sw: 1.85; }
:root[data-style="bp"] { --ic-sw: 1.4; --ic-cap: square; --ic-join: miter; }
:root[data-style="marsad"] { --ic-sw: 1.65; }

/* ---- أيقونات SVG ---- */
svg.ic { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: var(--ic-sw); stroke-linecap: var(--ic-cap); stroke-linejoin: var(--ic-join); vertical-align: -.16em; }

/* ---- الأزرار ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--r); padding: 9px 15px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.btn svg.ic { width: 16px; height: 16px; opacity: .92; }
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); transform: translateY(-2px); box-shadow: var(--shadow-accent), var(--shadow-lg); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: var(--r); line-height: 1; }
.icon-btn svg.ic { width: 18px; height: 18px; }
.mini-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); }
.mini-btn svg.ic { width: 15px; height: 15px; }
.mini-btn:hover { background: var(--accent-soft); color: var(--accent); }

/* ---- بطاقات المشاريع ---- */
.grid { gap: 16px; }
.card { border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-soft-2); }

/* ---- بطاقة معلومات المشروع ---- */
.info-card { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-radius: var(--r-lg); margin: 16px 0 6px; box-shadow: var(--shadow); }
.info-cell { padding: 13px 16px; }
.info-l { font-size: 11.5px; margin-bottom: 4px; }
.info-v { font-size: 14px; font-weight: 700; }

/* ---- المؤشرات ---- */
.kpi-row { gap: 16px; }
.kpi { border-radius: var(--r-lg); padding: 18px 18px 16px; box-shadow: var(--shadow); overflow: hidden; }
.kpi .v { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-family: var(--font-display); }
.kpi .v.sm { font-size: 17px; font-weight: 700; line-height: 1.5; }
.kpi .l { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.kpi-card { border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.progress { height: 8px; border-radius: 20px; background: var(--track); margin: 13px 0 6px; }
.progress > span { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 20px; }
.progress.behind > span { background: var(--bad); }

/* ---- شريط توزّع الأنشطة (تتبع الوضع) ---- */
.act-bar-card { border-radius: var(--r-lg); padding: 16px 18px; background: var(--surface); box-shadow: var(--shadow); margin-top: 16px; }

/* ---- جداول ---- */
table.tbl { border-radius: var(--r-lg); box-shadow: var(--shadow); }
table.tbl th, table.tbl td { padding: 12px 15px; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
table.tbl th { background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: .02em; }
:root[data-sig="bp"] table.tbl thead th { background: var(--graphite); color: #fff; }
table.tbl tbody tr:not(.tbl-total):hover td { background: var(--accent-soft); }
.tbl-total td { background: var(--surface-2); font-weight: 800; color: var(--ink); border-top: 1.5px solid var(--faint); }
.grp-main td { background: var(--surface-2); font-weight: 800; color: var(--ink); }
:root[data-sig="wing"] .grp-main td { background: color-mix(in srgb, var(--accent-soft-2) 55%, var(--surface-2)); }
.pbar .pv { font-weight: 800; font-size: 12.5px; min-width: 40px; }

/* ---- الشارات + حبّات الجودة ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.chip svg.ic { width: 13px; height: 13px; }

/* ---- النوافذ ---- */
.modal { border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.modal header { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.modal header h3 { font-size: 17px; }
.modal .body { padding: 18px 20px; }
.modal footer { padding: 14px 20px; border-top: 1px solid var(--line); }

/* ---- الحقول ---- */
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-size: 14px; color: var(--ink); transition: border-color .18s, box-shadow .18s, background-color .18s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- التبويبات ---- */
.tabs { gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0 18px; }
.tabs button { padding: 11px 15px; font-weight: 700; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
:root[data-sig="marsad"] .tabs button.active { box-shadow: 0 2px 12px -4px var(--accent); }

/* ---- رأس المشروع: يلتفّ عند الضيق فلا تخرج الأزرار (الحزمة 90) ---- */
.page-head { flex-wrap: wrap; gap: 9px; row-gap: 10px; }
.page-head h2 { margin-inline-end: 4px; }

/* ---- عناوين الأقسام ---- */
.sec-head { display: flex; align-items: center; gap: 12px; margin: 24px 2px 12px; }
.sec-head h3 { font-size: 17px; color: var(--ink); }

/* ---- منتقي التصميم بأزرار معاينة + مفاتيح انزلاق (الحزمة 90) ---- */
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-swatch { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); cursor: pointer; overflow: hidden; transition: transform .16s var(--ease), border-color .16s, box-shadow .16s, background-color .16s; }
.theme-swatch svg.ic { width: 25px; height: 25px; stroke-width: 1.8; }
.theme-swatch:hover { transform: translateY(-2px); border-color: var(--accent-soft-2); box-shadow: var(--shadow); }
.theme-swatch.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-swatch .sw-prev { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
.theme-swatch .sw-top { position: absolute; top: 0; inset-inline: 0; height: 12px; }
.theme-swatch .sw-card { position: absolute; inset-block-end: 7px; inset-inline-start: 7px; width: 18px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.theme-swatch .sw-dot { position: absolute; inset-block-end: 8px; inset-inline-end: 7px; width: 11px; height: 11px; border-radius: 50%; }
.theme-swatch .sw-custom { background: conic-gradient(from .25turn, #B8603C, #4C7150, #DA7C4E, #43474A, #B8603C); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; }
.switch-row > span { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.switch { position: relative; width: 46px; height: 26px; border-radius: 999px; border: none; background: var(--track); cursor: pointer; padding: 0; transition: background-color .2s var(--ease); flex: none; }
.switch .knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s var(--ease); }
.switch.on { background: var(--accent); }
.switch.on .knob { transform: translateX(-20px); }
:root[dir="ltr"] .switch.on .knob { transform: translateX(20px); }

/* ---- علامة مائية بشعار سنكري (الحزمة 91، أُعيد ربطها وتوسيعها في 93) ----
   تعمل عبر data-wm="on" (يضبطه THEME.applyAttrs): التصميم «جَناح» أو «مخصّص» بمفصل خلفية = جَناح.
   متحكّمات (من النقر على الشعار): --wm-size (الحجم، يتجاوز عرض الصفحة) · --wm-opacity (الشفافية)
   · --wm-bright (الغماقية عبر brightness) · data-wm-top (فوق المحتوى). */
:root[data-wm="on"] body::after {
  /* شعار الجناح المقصوص بلا كتابة (logo-glyph — الحزمة 96)؛ نسبته العريضة ≈16:9 مثالية للتغطية */
  background: url("assets/logo-glyph.png") no-repeat center center;
  background-size: var(--wm-size, cover);
  /* سقف شفافية إجباري (الحزمة 7): مهما رُفع متحكّم الشفافية لا تتجاوز العلامة حدّاً آمناً —
     كانت القيم العالية تغسل المحتوى بطبقة حليبية تُعمي النصوص (علّة حقيقية من صور المالك). */
  opacity: min(var(--wm-opacity, .05), .14);
  filter: brightness(var(--wm-bright, 1));
}
/* في الداكن: الشعار الفاتح يُعتَّم تلقائياً (يُضرب متحكّم الغماقية بـ0.45) ويُخفَض سقفه */
:root[data-wm="on"][data-theme="dark"] body::after {
  opacity: min(var(--wm-opacity, .07), .12);
  filter: brightness(calc(var(--wm-bright, 1) * .45));
}
/* «فوق المحتوى»: أعلى من طبقة التطبيق (z=1) وتحت طبقة النوافذ (#modalRoot صار z=3)
   وسقفها فوق المحتوى أدنى (0.08) لأنها تركب على النصوص مباشرةً */
:root[data-wm="on"][data-wm-top="1"] body::after { z-index: 2; opacity: min(var(--wm-opacity, .05), .08); }
#modalRoot { z-index: 3; }
/* الشعار قابل للنقر لفتح إعدادات العلامة عندما تكون فعّالة */
:root[data-wm="on"] .topbar .logo { cursor: pointer; }

/* ---- أشرطة التمرير تتبع الوضع (فاتح/داكن) ---- */
* { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 20px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* داخل الأسطح المتمرّرة: الحدّ بلون السطح لا الخلفية */
.imp-scroll::-webkit-scrollbar-thumb, .lk-grid::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb, .mscroll::-webkit-scrollbar-thumb { border-color: var(--surface); }

/* ---- حركة إغلاق النوافذ (تُضاف .closing قبل الإزالة) ---- */
.modal-back.closing { animation: pdFadeOut .2s var(--ease) forwards; }
.modal-back.closing .modal { animation: pdModalOut .2s var(--ease) forwards; }
@keyframes pdFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pdModalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ============================================================
   الحزمة 92 — تصميمان جديدان: ⑤ الأفق (horizon) و ⑥ اللؤلؤ (pearl)
   + مفتاح «لون التصميم» (data-accent: teal | sankari) لكلٍّ منهما.
   الأفق: أسلوب SaaS حديث بارد — خلفية رمادية-زرقاء فاتحة، بطاقات بيضاء
   بلا حدود بظلال ناعمة، شريط جانبي عمودي (بنية عبر data-sig)، تركوازي افتراضياً.
   اللؤلؤ: كبسولي دافئ — خلفية كريمية، كل العناصر كبسولية شديدة الاستدارة،
   ترويسة كبسولة عائمة فحمية، أزرار رئيسية فحمية، نحاسي سنكري افتراضياً.
   ============================================================ */

/* ============ ⑤ الأفق (horizon) — فاتح (التركوازي افتراضي) ============ */
:root[data-style="horizon"] {
  --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px;
  --bg: #F3F5F9; --surface: #FFFFFF; --surface-2: #F6F8FB;
  --ink: #101828; --ink-soft: #344054; --muted: #667085; --faint: #98A2B3;
  --line: #E7EBF0; --line-soft: #F0F3F7;
  --accent: #0F9BA8; --accent-strong: #0B7D89; --accent-ink: #FFFFFF;
  --accent-soft: rgba(15, 155, 168, .10); --accent-soft-2: rgba(15, 155, 168, .18);
  --good: #17936B; --good-bg: #E4F5EE; --warn: #C77E1E; --warn-bg: #FAF0DC; --bad: #D6493E; --bad-bg: #FBE7E5;
  --track: #EEF1F6;
  --topbar: #101828; --topbar-ink: #EAEEF4; --topbar-line: #0F9BA8; --topbar-glass: rgba(16, 24, 40, .72);
  --rail-glass: rgba(16, 24, 40, .8);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-lg: 0 24px 48px rgba(16, 24, 40, .12);
  --shadow-accent: 0 8px 20px rgba(15, 155, 168, .25);
  --glass-surface: rgba(255, 255, 255, .6); --glass-border: rgba(255, 255, 255, .8);
  --ambient: radial-gradient(900px 480px at 88% -10%, rgba(15, 155, 168, .05), transparent 60%), radial-gradient(700px 500px at -5% 12%, rgba(70, 110, 160, .05), transparent 62%);
  /* أرقام المؤشرات بخطّ لاتيني هندسي (بدل السيريف) — روح SaaS */
  --font-display: var(--font-latin);
}
:root[data-style="horizon"][data-theme="dark"] {
  /* معايرة الحزمة 6: مقروئية أعلى للنصوص الثانوية والفواصل */
  --bg: #0F141D; --surface: #171E2B; --surface-2: #121824;
  --ink: #EAEFF6; --ink-soft: #C9D2DE; --muted: #97A2B1; --faint: #6B7789;
  --line: #293345; --line-soft: #202938;
  --accent: #33B7C4; --accent-strong: #0F9BA8; --accent-ink: #06181B;
  --accent-soft: rgba(51, 183, 196, .14); --accent-soft-2: rgba(51, 183, 196, .24);
  --good: #4CC38A; --good-bg: rgba(76, 195, 138, .16); --warn: #E0A44E; --warn-bg: rgba(224, 164, 78, .16); --bad: #E56A5B; --bad-bg: rgba(229, 106, 91, .16);
  --track: #202938;
  /* الشريط كحلي ثابت في الوضعين (الحزمة 7 — أُلغي انعكاس الحزمة 94) */
  --topbar: #101828; --topbar-ink: #EAEEF4; --topbar-line: #0F9BA8; --topbar-glass: rgba(16, 24, 40, .85);
  --rail-glass: rgba(16, 24, 40, .85);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, .6);
  --shadow-accent: 0 8px 22px rgba(51, 183, 196, .3);
  --glass-surface: rgba(24, 31, 43, .82); --glass-border: rgba(160, 190, 210, .1);
  --ambient: radial-gradient(900px 480px at 88% -10%, rgba(51, 183, 196, .08), transparent 60%);
}
/* الأفق — مفتاح اللون: نحاسي سنكري بدل التركوازي */
:root[data-style="horizon"][data-accent="sankari"] {
  --accent: #B8603C; --accent-strong: #9A4E30; --accent-ink: #FFFFFF;
  --accent-soft: rgba(184, 96, 60, .10); --accent-soft-2: rgba(184, 96, 60, .18);
  --topbar-line: #B8603C; --shadow-accent: 0 8px 20px rgba(184, 96, 60, .26);
  --ambient: radial-gradient(900px 480px at 88% -10%, rgba(184, 96, 60, .05), transparent 60%), radial-gradient(700px 500px at -5% 12%, rgba(70, 110, 160, .05), transparent 62%);
}
:root[data-style="horizon"][data-theme="dark"][data-accent="sankari"] {
  --accent: #D07C52; --accent-strong: #B8603C; --accent-ink: #1A130E;
  --accent-soft: rgba(208, 124, 82, .15); --accent-soft-2: rgba(208, 124, 82, .24);
  --topbar-line: #B8603C; --shadow-accent: 0 8px 22px rgba(208, 124, 82, .3);
  --ambient: radial-gradient(900px 480px at 88% -10%, rgba(208, 124, 82, .08), transparent 60%);
}

/* ============ ⑥ اللؤلؤ (pearl) — فاتح (النحاسي افتراضي) ============ */
:root[data-style="pearl"] {
  --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px;
  --bg: #F7F2EA; --surface: #FFFFFF; --surface-2: #F4EEE4;
  --ink: #221E1A; --ink-soft: #46403A; --muted: #7A7268; --faint: #A79C8E;
  --line: #E9E1D3; --line-soft: #F1EBDF;
  --accent: #B8603C; --accent-strong: #9A4E30; --accent-ink: #FFFFFF;
  --accent-soft: rgba(184, 96, 60, .10); --accent-soft-2: rgba(184, 96, 60, .18);
  --good: #3E8E5F; --good-bg: #E3F3E9; --warn: #C0822F; --warn-bg: #F8ECCF; --bad: #C24A3F; --bad-bg: #F9E1DC;
  --track: #ECE4D6;
  --topbar: #221E1A; --topbar-ink: #F4EEE4; --topbar-line: #B8603C; --topbar-glass: rgba(34, 30, 26, .78);
  --shadow: 0 2px 6px rgba(34, 30, 26, .05), 0 10px 26px rgba(34, 30, 26, .07);
  --shadow-lg: 0 22px 50px rgba(34, 30, 26, .15);
  --shadow-accent: 0 8px 20px rgba(184, 96, 60, .28);
  --glass-surface: rgba(255, 255, 255, .58); --glass-border: rgba(255, 255, 255, .75);
  --ambient: radial-gradient(860px 460px at 92% -8%, rgba(184, 96, 60, .06), transparent 60%), radial-gradient(700px 520px at -6% 14%, rgba(218, 205, 193, .25), transparent 62%);
}
:root[data-style="pearl"][data-theme="dark"] {
  /* معايرة الحزمة 6: مقروئية أعلى للنصوص الثانوية والفواصل */
  --bg: #171310; --surface: #221C17; --surface-2: #1A1511;
  --ink: #F4EDE3; --ink-soft: #DBD0C3; --muted: #ADA093; --faint: #877A6D;
  --line: #3A3128; --line-soft: #2E241C;
  --accent: #D07C52; --accent-strong: #B8603C; --accent-ink: #1A130E;
  --accent-soft: rgba(208, 124, 82, .15); --accent-soft-2: rgba(208, 124, 82, .24);
  --good: #8FB07F; --good-bg: rgba(94, 122, 85, .22); --warn: #D9A24E; --warn-bg: rgba(192, 130, 47, .2); --bad: #D57A6F; --bad-bg: rgba(180, 69, 60, .24);
  --track: #33291D;
  /* الشريط فحمي ثابت في الوضعين (الحزمة 7 — أُلغي انعكاس الحزمة 94) */
  --topbar: #221E1A; --topbar-ink: #F4EEE4; --topbar-line: #B8603C; --topbar-glass: rgba(34, 30, 26, .85);
  --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .42);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, .6);
  --shadow-accent: 0 8px 22px rgba(208, 124, 82, .3);
  --glass-surface: rgba(40, 32, 26, .82); --glass-border: rgba(255, 255, 255, .08);
  --ambient: radial-gradient(860px 460px at 92% -8%, rgba(208, 124, 82, .1), transparent 60%);
}
/* اللؤلؤ — مفتاح اللون: تركوازي بدل النحاسي */
:root[data-style="pearl"][data-accent="teal"] {
  --accent: #0F9BA8; --accent-strong: #0B7D89; --accent-ink: #FFFFFF;
  --accent-soft: rgba(15, 155, 168, .10); --accent-soft-2: rgba(15, 155, 168, .18);
  --topbar-line: #0F9BA8; --shadow-accent: 0 8px 20px rgba(15, 155, 168, .25);
}
:root[data-style="pearl"][data-theme="dark"][data-accent="teal"] {
  --accent: #33B7C4; --accent-strong: #0F9BA8; --accent-ink: #06181B;
  --accent-soft: rgba(51, 183, 196, .14); --accent-soft-2: rgba(51, 183, 196, .24);
  --topbar-line: #0F9BA8; --shadow-accent: 0 8px 22px rgba(51, 183, 196, .3);
}

/* ---- مفتاح «لون التصميم» للتصاميم الأربعة الأصلية (الحزمة 94): التركوازي بديلاً عن النحاسي ---- */
:root[data-style="classic"][data-accent="teal"],
:root[data-style="wing"][data-accent="teal"],
:root[data-style="bp"][data-accent="teal"],
:root[data-style="marsad"][data-accent="teal"] {
  --accent: #0F9BA8; --accent-strong: #0B7D89; --accent-ink: #FFFFFF;
  --accent-soft: rgba(15, 155, 168, .10); --accent-soft-2: rgba(15, 155, 168, .18);
  --topbar-line: #0F9BA8; --shadow-accent: 0 8px 20px rgba(15, 155, 168, .25);
}
:root[data-style="classic"][data-theme="dark"][data-accent="teal"],
:root[data-style="wing"][data-theme="dark"][data-accent="teal"],
:root[data-style="bp"][data-theme="dark"][data-accent="teal"],
:root[data-style="marsad"][data-theme="dark"][data-accent="teal"] {
  --accent: #33B7C4; --accent-strong: #0F9BA8; --accent-ink: #06181B;
  --accent-soft: rgba(51, 183, 196, .14); --accent-soft-2: rgba(51, 183, 196, .24);
  --topbar-line: #0F9BA8; --shadow-accent: 0 8px 22px rgba(51, 183, 196, .3);
}

/* وزن الأيقونات لكل تصميم جديد */
:root[data-style="horizon"] { --ic-sw: 1.6; }
:root[data-style="pearl"] { --ic-sw: 1.8; }

/* ---- بنية «الأفق» (الحزمة 93، أُعيد ربطها في 94): شريط جانبي عمودي ضيّق افتراضياً يتوسّع بزرّ ☰.
   السمة القائدة data-bar (= التصميم للأساسية، ومفصل «الترويسة» للمخصّص) — منفصلة عن الشكل/التوقيع (data-sig)
   فيمكن مثلاً شريط الأفق الجانبي مع ترويسة جداول «مخطّط الكلك». ألوانه من رموز --topbar (عكس الوضع دائماً). ---- */
.rail-toggle { display: none; }
:root[data-bar="horizon"] #appView { padding-inline-start: 78px; }
:root[data-bar="horizon"] .topbar {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 78px; height: auto;
  flex-direction: column; align-items: stretch; gap: 10px;
  padding: 14px 11px; overflow-y: auto; overflow-x: hidden;
  background: var(--topbar); color: var(--topbar-ink);
  border-bottom: none; border-inline-end: 1px solid color-mix(in srgb, var(--topbar-ink) 14%, transparent);
  transition: width .25s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
}
/* الشعار داخل شريحة فحمية ثابتة (الشعار شمبانيا فاتح): ضيّق = العلامة المربّعة كخلفية، موسّع = الشعار الأفقي */
:root[data-bar="horizon"] .topbar .logo,
:root[data-theme="dark"][data-bar="horizon"] .topbar .logo {
  justify-content: center; background: var(--near-black); border-radius: var(--r); padding: 10px 8px; min-height: 48px;
  background-image: url("assets/logo-mark.png"); background-repeat: no-repeat; background-position: center; background-size: auto 36px;
}
:root[data-bar="horizon"] .topbar .logo-img { display: none; }
:root[data-bar="horizon"] .topbar .icon-btn {
  width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: transparent; border: 1px solid transparent; color: var(--topbar-ink); opacity: .8; border-radius: var(--r);
  overflow: hidden; white-space: nowrap;
}
:root[data-bar="horizon"] .topbar .icon-btn svg.ic { flex: none; }
:root[data-bar="horizon"] .topbar .icon-btn:hover { background: color-mix(in srgb, var(--topbar-ink) 11%, transparent); color: var(--topbar-ink); opacity: 1; transform: none; }
:root[data-bar="horizon"] .rail-toggle { display: flex; }
:root[data-bar="horizon"] .company-switch { display: none; }
:root[data-bar="horizon"] .user-chip { display: none; }
/* — الوضع الموسّع — */
:root[data-bar="horizon"][data-rail="wide"] #appView { padding-inline-start: 232px; }
:root[data-bar="horizon"][data-rail="wide"] .topbar { width: 232px; padding: 16px 14px; }
:root[data-bar="horizon"][data-rail="wide"] .topbar .logo { background-image: none; padding: 13px 10px; }
:root[data-bar="horizon"][data-rail="wide"] .topbar .logo-img { display: block; height: 30px; }
:root[data-bar="horizon"][data-rail="wide"] .topbar .icon-btn { justify-content: flex-start; padding-inline: 12px; }
:root[data-bar="horizon"][data-rail="wide"] .topbar .icon-btn::after { content: attr(title); font-size: 13px; font-weight: 600; }
:root[data-bar="horizon"][data-rail="wide"] .company-switch { display: block; width: 100%; }
:root[data-bar="horizon"][data-rail="wide"] .user-chip { display: flex; background: color-mix(in srgb, var(--topbar-ink) 8%, transparent); border-radius: var(--r); padding: 9px 12px; justify-content: space-between; color: var(--topbar-ink); }
/* الشفافية الزجاجية على الشريط الجانبي */
:root[data-glass="on"][data-bar="horizon"] .topbar {
  background: var(--rail-glass, var(--topbar-glass));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}
/* على الشاشات الضيقة يعود شريطاً علوياً عادياً */
@media (max-width: 760px) {
  :root[data-bar="horizon"] #appView, :root[data-bar="horizon"][data-rail="wide"] #appView { padding-inline-start: 0; }
  :root[data-bar="horizon"] .topbar, :root[data-bar="horizon"][data-rail="wide"] .topbar {
    position: sticky; width: auto; height: 60px; flex-direction: row; align-items: center;
    padding: 0 14px; overflow: visible; border-inline-end: none;
  }
  :root[data-bar="horizon"] .topbar .logo, :root[data-bar="horizon"][data-rail="wide"] .topbar .logo { background-image: none; padding: 5px 9px; border-radius: 9px; min-height: 0; }
  :root[data-bar="horizon"] .topbar .logo-img, :root[data-bar="horizon"][data-rail="wide"] .topbar .logo-img { display: block; height: 24px; }
  :root[data-bar="horizon"] .topbar .icon-btn, :root[data-bar="horizon"][data-rail="wide"] .topbar .icon-btn { width: 38px; height: 38px; justify-content: center; padding-inline: 0; }
  :root[data-bar="horizon"][data-rail="wide"] .topbar .icon-btn::after { content: none; }
  :root[data-bar="horizon"] .rail-toggle { display: none !important; }
  :root[data-bar="horizon"] .company-switch, :root[data-bar="horizon"][data-rail="wide"] .company-switch { display: block; width: auto; }
  :root[data-bar="horizon"] .user-chip, :root[data-bar="horizon"][data-rail="wide"] .user-chip { display: flex; background: transparent; padding: 0; }
}

/* ---- توقيع «الأفق»: بطاقات بلا حدود بظلال ناعمة + أرقام بالحبر (لا بالنحاسي) ---- */
:root[data-sig="horizon"] .card,
:root[data-sig="horizon"] .kpi,
:root[data-sig="horizon"] .kpi-card,
:root[data-sig="horizon"] table.tbl,
:root[data-sig="horizon"] .scurve .sc-box,
:root[data-sig="horizon"] .act-bar-card,
:root[data-sig="horizon"] .info-card { border-color: transparent; }
:root[data-sig="horizon"] .kpi .v { color: var(--ink); letter-spacing: -.01em; }
:root[data-sig="horizon"] .kpi .v.behind { color: var(--bad); }
:root[data-sig="horizon"] table.tbl th { background: var(--surface); }
:root[data-sig="horizon"] .tbl.tbl-sepa thead th { background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }

/* ---- بنية «اللؤلؤ»: ترويسة كبسولة عائمة (data-bar — مفصل «الترويسة» في المخصّص، الحزمة 94)
   + كل العناصر كبسولية (data-sig — مفصل «الشكل») ---- */
:root[data-bar="pearl"] .topbar {
  position: sticky; top: 10px; margin: 12px 16px 0;
  border-radius: 999px; height: 58px; padding-inline: 20px 12px;
  border-bottom: none; box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
  /* إطار رفيع بلون التصميم المميّز (يتبع مفتاح تركوازي/نحاسي) — الحزمة 93 */
  border: 1px solid var(--accent);
}
:root[data-bar="pearl"] .topbar .icon-btn { border-radius: 999px; }
:root[data-sig="pearl"] .btn { border-radius: 999px; padding-inline: 18px; }
:root[data-sig="pearl"] .icon-btn { border-radius: 999px; }
:root[data-sig="pearl"] .mini-btn { border-radius: 999px; }
:root[data-sig="pearl"] .btn-primary {
  background: var(--ink); border-color: var(--ink); color: var(--surface);
  box-shadow: 0 10px 24px rgba(34, 30, 26, .22);
}
:root[data-sig="pearl"] .btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--surface); }
:root[data-sig="pearl"] .tabs { border-bottom: none; gap: 8px; }
:root[data-sig="pearl"] .tabs button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 17px; background: var(--surface); border-bottom: 1px solid var(--line); }
:root[data-sig="pearl"] .tabs button:hover { border-color: var(--ink); color: var(--ink); }
:root[data-sig="pearl"] .tabs button.active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
:root[data-sig="pearl"] .field input, :root[data-sig="pearl"] .field select { border-radius: 999px; padding-inline: 17px; }
:root[data-sig="pearl"] .field textarea { border-radius: var(--r-lg); }
:root[data-sig="pearl"] .progress { height: 9px; }

/* ============================================================================
   الحزمة 98 — تطبيق الأندرويد + طبقة الاستجابة للهاتف
   (طبقة إضافية صرفة: لا تغيّر شيئاً على شاشات الحاسوب)
   ============================================================================ */

/* رابط تحميل التطبيق أسفل بطاقة الدخول */
.apk-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.apk-link:hover { background: var(--accent-soft); border-color: var(--accent); }
.apk-link .ic { width: 17px; height: 17px; }
/* زرّ الترويسة كرابط (تحميل APK) — يرث شكل .icon-btn */
a.icon-btn { text-decoration: none; }

/* زرّ ⌄ وقائمة الهاتف المنسدلة (الحزمة 99) — الزرّ مخفي على الحاسوب */
.more-btn { display: none; }
.more-menu {
  /* left صريحة (RTL: جهة الأزرار) — inset-inline-end لا يفهمها WebView القديم؛ يقلبها LTR أدناه */
  position: fixed; left: 10px; z-index: 60;
  min-width: 216px; padding: 6px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, .25));
  display: flex; flex-direction: column; gap: 2px;
  animation: pdFade .16s var(--ease);
}
.more-menu .mm-user { padding: 9px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.more-menu .mm-user b { font-size: 13.5px; color: var(--ink); }
.more-menu .mm-user span { font-size: 11.5px; color: var(--muted); }
.more-menu .mm-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: none; border: none; border-radius: 10px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: start;
}
.more-menu .mm-item:hover { background: var(--accent-soft); color: var(--accent); }
.more-menu .mm-item .ic { width: 17px; height: 17px; flex: 0 0 auto; }
.more-menu .mm-lang { font-weight: 800; font-size: 13px; width: 17px; text-align: center; flex: 0 0 auto; }
[dir="ltr"] .more-menu { left: auto; right: 10px; }

/* ---------- الهاتف (≤760px) ---------- */
@media (max-width: 760px) {
  /* الترويسة الهجينة (الحزمة 99): يبقى ⚙ والخروج ظاهرين + زرّ ⌄ يجمع البقية في قائمة —
     صفّ واحد يتّسع دائماً فلا تنزلق الأزرار خارج الكبسولة/الشريط (خلل اللؤلؤ في التطبيق) */
  .topbar { height: auto; min-height: 54px; padding: 6px 10px; gap: 6px; }
  .topbar .logo-img { height: 26px; }
  .topbar .icon-btn { width: 36px; height: 36px; }
  .company-switch { max-width: 118px; padding: 6px 8px; font-size: 12.5px; min-width: 0; }
  .more-btn { display: inline-grid; }
  #langBtn, #dirBtn, #apkBtn, #adminBtn, #profileBtn, .topbar .user-chip { display: none !important; }

  /* التخطيط العام */
  .container { padding: 14px 10px 70px; }
  .page-head h2 { font-size: 18.5px; }
  .page-head .btn { padding: 7px 10px; font-size: 12.5px; }

  /* الصفحة نفسها لا تنزلق أفقياً أبداً (الحزمة 100/101/104) — الانزلاق الأفقي للجداول داخل حاوياتها فقط.
     ثلاث طبقات دفاع: (1) قصّ عند حاوية المحتوى نفسها — الضمانة الصلبة: أي عنصر أعرض من الشاشة
     يُقصّ داخلها فلا يتّسع عرض الصفحة أصلاً (على الهاتف تكشّف أن الطبقات المثبّتة — العلامة المائية
     وخلفية النوافذ — لا تغطي منطقة السحب الزائدة، فأي فائض أفقي يفسد كل شيء)؛ (2) html؛ (3) body. */
  #main.container, .container { overflow-x: hidden; }
  html { overflow-x: hidden; }
  html, body { max-width: 100%; }
  body { overflow-x: hidden; overflow-x: clip; }
  /* حارس المحتوى المرن داخل الصفحة: الصور والرسوم لا تفرض عرضاً */
  #main img, #main svg { max-width: 100%; }

  /* النوافذ (الحزمة 100 — طلب المالك): أصغر من الشاشة طولاً وعرضاً بهوامش ظاهرة،
     وارتفاعها على قدر محتواها؛ إن لم يتّسع المحتوى ينزلق داخل جسم النافذة
     بالاتجاهين (شريطا تمرير داخليان) — الترويسة والأزرار مثبّتتان.
     النقر على الخلفية لا يغلقها على الهاتف (openModal في app.js). */
  .modal-back { padding: 14px 10px; place-items: center; overflow: hidden; }
  .modal, .modal-wide {
    width: 100%; max-width: calc(100vw - 20px); min-width: 0;
    height: auto; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px);
    border-radius: 16px;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .modal header, .modal footer { flex: 0 0 auto; }
  .modal .body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 12px; }
  .modal header { padding: 13px 14px 11px; }
  .modal footer { padding: 11px 12px; }
  /* حارس المحتوى العريض داخل النوافذ: الحقول لا تفرض عرضاً أكبر من النافذة */
  .modal .body input, .modal .body select, .modal .body textarea { max-width: 100%; }

  /* الجداول: انزلاق أفقي مريح داخل حاوياتها */
  .imp-scroll { max-height: 62vh; -webkit-overflow-scrolling: touch; }
  .card, .kpi-card { overflow-x: auto; }
  table.tbl { font-size: 12.5px; }

  /* المؤشرات والمنحنيات */
  .kpi-row { gap: 10px; }
  .kpi { padding: 13px 12px 12px; }
  .kpi .v { font-size: 24px; }
  .scurve .sc-box svg { max-width: 100%; height: auto; }

  /* شاشة الدخول */
  .login-body { padding: 22px 20px 26px; }
}

/* ---------- الهواتف الضيقة (≤420px) ---------- */
@media (max-width: 420px) {
  .container { padding: 12px 8px 70px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .topbar { gap: 5px; }
  .company-switch { max-width: 104px; }
}

/* ============================================================================
   الحزمة 116 — نظام أزرار النوافذ + قوائم منسدلة موحّدة (طلبات المالك)
   ============================================================================ */

/* --- ترويسة النافذة **مثبّتة** (اختيار المالك): أيقونات الإجراءات ظاهرة دائماً والمحتوى ينزلق تحتها.
       التذييل يبقى **غير مثبّت** على الحاسوب (يظهر بالتمرير لأسفل) — كما طلب المالك.
       (على الهاتف ≤760px يبقى التذييل مثبّتاً كما اعتُمد في الحزمة 100 — الشاشة قصيرة.) --- */
.modal header { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.m-acts { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

/* --- أزرار أيقونية **مربّعة مستديرة بلا كتابة** (النموذج «أ» — اختيار المالك)؛ الاسم يظهر بالتأشير (title) --- */
.m-act { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); border-radius: var(--r); line-height: 1; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, transform .12s; }
.m-act svg.ic { width: 18px; height: 18px; }
.m-act:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.m-act:active { transform: scale(.95); }
.m-act-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.m-act-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }

/* --- نافذة أعرض (الإعدادات): كي لا يحتاج جدول مفاصل «التصميم المخصّص» شريط تمرير أفقي --- */
.modal-xwide { max-width: 1180px; }

/* --- قوائم منسدلة موحّدة بهوية سنكري (بدل مظهر النظام الكلاسيكي).
       تُكتب الخصائص **مفردةً** (لا اختصار background) كي لا تمحو الأسهمَ قواعدُ سابقة تستعمل الاختصار. --- */
select, .field select, .company-switch, select.vis-mode {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: left 11px center; background-size: 15px;
  /* السهم دائماً على الجهة **المنتهية** (يسار في RTL · يمين في LTR)، فتُحجز المسافة بـpadding-inline-END
     لا START — وإلا حُجزت في الجهة الخاطئة فيركب السهم فوق النصّ العربي (الوضع الافتراضي). */
  padding-inline-end: 32px; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
[dir="ltr"] select, [dir="ltr"] .field select, [dir="ltr"] .company-switch, [dir="ltr"] select.vis-mode { background-position: right 11px center; }
/* توقيع «اللؤلؤ» يضبط padding-inline بأولوية أعلى — يُعاد حجز مكان السهم بأولوية مكافئة وأحدث */
:root[data-sig="pearl"] select, :root[data-sig="pearl"] .field select { padding-inline-end: 32px; }
select:hover, .field select:hover { border-color: var(--faint); }
select:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background-color: var(--surface); }
/* قائمة الخيارات المنبثقة يرسمها النظام وترث لون الحقل: تُفرض ألوان مقروءة دائماً —
   كان «مبدّل الشركة» يورّث لون الشريط الفاتح فتظهر الخيارات بلون كاشف غير واضح (شكوى المالك). */
select option { background: var(--surface); color: var(--ink); font-weight: 500; }
select optgroup { background: var(--surface-2); color: var(--muted); font-weight: 800; }
:root[data-theme="dark"] select, :root[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a49c94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* --- مبدّل الشركة على الشريط: يتبع لون الشريط المنعكس، بسهم مطابق وتباين أعلى --- */
.company-switch {
  background-color: color-mix(in srgb, var(--topbar-ink) 12%, transparent);
  color: var(--topbar-ink);
  border-color: color-mix(in srgb, var(--topbar-ink) 28%, transparent);
  padding: 7px 12px; padding-inline-end: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0EDEB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.company-switch:hover { border-color: color-mix(in srgb, var(--topbar-ink) 45%, transparent); }
.company-switch:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background-color: color-mix(in srgb, var(--topbar-ink) 18%, transparent); }
:root[data-theme="dark"] .company-switch {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1C1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* --- نافذة «مناقلة الكلفة» (الحزمة 116): الخانة = حقل الإدخال والمعاينة معاً --- */
.co-slot { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; min-width: 0; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.co-slot:hover { border-color: var(--faint); }
.co-slot.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft-2); }
.co-lab { font-size: 10.5px; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.co-hint { font-size: 11px; color: var(--faint); line-height: 1.4; }
.co-name { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-old { font-size: 11px; color: var(--muted); text-decoration: line-through; margin-top: 2px; line-height: 1.3; }
.co-new { font-size: 17px; font-weight: 800; line-height: 1.25; margin-top: 1px; }
/* صفوف الجدول قابلة للاختيار بالنقر، والمختار يتلوّن بلون جهته */
.co-row { cursor: pointer; }
.co-row:hover { background: var(--accent-soft); }
.co-row-from { background: var(--bad-bg); }
.co-row-to { background: var(--good-bg); }
.co-row-locked { cursor: not-allowed; opacity: .6; }
/* تظليل التأشير يُرسم على الخلية (td) بقاعدة الجدول العامة — فيُلغى على الخلية لا على الصفّ */
table.tbl tbody tr.co-row-locked:hover td { background: transparent; }

/* --- نافذة استيراد البيانات (الحزمة 117 — طلب المالك): تمرير شاقولي للنزول إلى جدول المعاينة،
       وتمرير شاقولي داخل الجدول نفسه. مقصورة على نافذة الاستيراد (imp-body) كي لا تتأثر بقية النوافذ العريضة. --- */
.modal-wide .imp-body { overflow-y: auto; overflow-x: hidden; display: block; }
.modal-wide .imp-body #imp_preview { display: block; }
.modal-wide .imp-body #imp_preview .imp-scroll { max-height: 320px; overflow-y: auto; overflow-x: auto; }

/* --- سطر الحالة داخل ترويسة النافذة المثبّتة (الحزمة 118): مضغوط ككبسولة بجانب الأزرار.
       يُنسَّق **بالموضع** لا بصنف مضاف، لأن مُطلِقي الحالة يعيدون ضبط className كاملاً. --- */
.modal header .imp-status { margin: 0; margin-inline-start: auto; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.modal header.has-status .m-acts { margin-inline-start: 10px; }
@media (max-width: 760px) { .modal header .imp-status { font-size: 11px; padding: 3px 8px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; } }

/* --- سطر «الترتيب» داخل بطاقة الفقرة في نافذة التقرير (الحزمة 118) --- */
.pr-sortrow { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pr-sortlab { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.pr-sortrow select { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; padding: 5px 9px; padding-inline-end: 28px; background-size: 13px; background-position: left 8px center; }
[dir="ltr"] .pr-sortrow select { background-position: right 8px center; }
.pr-dir { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); border-radius: var(--r); cursor: pointer; font-size: 11px; line-height: 1; }
.pr-dir:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ============ الحزمة 122: طريقة العرض «شريط جانبي» (pd_layout=side) + محرّر شجرته ============ */
/* البنية: #appView يصير شبكة صفّين — الشريط العلوي بعرض كامل، ثم [شريط التنقّل | المحتوى].
   ألوان الشريط من متغيّرات هوية التصميم الفعّال (--topbar*) فيتبع كل التصاميم (بما فيها الأفق) تلقائياً. */
#appView.with-nav { display: grid; grid-template-columns: 258px minmax(0, 1fr); grid-template-rows: auto 1fr; }
#appView.with-nav > .topbar { grid-column: 1 / -1; }
#appView.with-nav > #main { grid-column: 2; grid-row: 2; min-width: 0; }
/* هويتا الشريط (الحزمة 123 — اختيار المالك: «سطح الصفحة» و«هوية الترويسة المُثراة» معاً بمفتاح pd_nav_skin):
   كل قواعد الألوان تستهلك رموز --nav-* المعرّفة هنا، وكل «جلد» يعيد تعريفها فقط — فكلاهما يتبع
   التصميم الفعّال **والوضع الفاتح/الداكن** تلقائياً (سطح الصفحة من رموز الأسطح، والمُثراة من رموز
   الترويسة التي تنعكس مع الوضع أصلاً + تدرّج نحو اللون المميّز). */
#navSide {
  --nav-bg: var(--surface-2);
  --nav-ink: var(--ink);
  --nav-dim: var(--ink-soft);
  --nav-line: var(--line);
  --nav-hover: var(--accent-soft);
  --nav-field: var(--surface);
  --nav-active-bg: var(--accent);
  --nav-active-ink: var(--accent-ink);
  grid-column: 1; grid-row: 2;
  background: var(--nav-bg); color: var(--nav-ink);
  border-inline-end: 1px solid var(--nav-line);
  position: sticky; top: 60px; height: calc(100vh - 60px);
  overflow-y: auto; padding: 12px 10px 20px;
  scrollbar-width: thin;
}
#navSide.skin-accent {
  --nav-bg: linear-gradient(170deg, var(--topbar) 55%, color-mix(in srgb, var(--accent) 30%, var(--topbar)) 100%);
  --nav-ink: var(--topbar-ink);
  --nav-dim: color-mix(in srgb, var(--topbar-ink) 70%, transparent);
  --nav-line: var(--topbar-line);
  --nav-hover: color-mix(in srgb, var(--topbar-ink) 9%, transparent);
  --nav-field: color-mix(in srgb, var(--topbar-ink) 8%, transparent);
  --nav-active-bg: color-mix(in srgb, var(--accent) 86%, var(--topbar));
  --nav-active-ink: var(--accent-ink);
  border-inline-end: 1px solid var(--nav-line);
  border-top: 3px solid var(--accent);
}
#navSide .nav-brand { padding: 2px 10px 0; }
#navSide .nav-title { font-weight: 800; font-size: 14.5px; color: var(--nav-ink); line-height: 1.4; }
#navSide .nav-sub { font-size: 11.5px; color: var(--nav-dim); margin-top: 2px; }
#navSide .nav-back { background: none; border: none; color: var(--nav-dim); cursor: pointer; font-size: 12px; padding: 6px 10px; border-radius: 8px; }
#navSide .nav-back:hover { color: var(--nav-ink); background: var(--nav-hover); }
#navSide .nav-search { padding: 6px 8px 10px; position: relative; }
#navSide .nav-search input {
  width: 100%; background: var(--nav-field);
  border: 1px solid var(--nav-line);
  border-radius: 9px; padding: 7px 10px; padding-inline-end: 30px; color: var(--nav-ink); font-size: 12.5px;
}
#navSide .nav-search input::placeholder { color: var(--nav-dim); }
#navSide .nav-search input:focus { outline: none; border-color: var(--accent); }
/* أيقونة البحث SVG داخل الحقل (الحزمة 123 — طلب المالك: لا إيموجي)؛ مسافتها محجوزة بـ padding-inline-END (قاعدة §3-ب) */
#navSide .nav-search .nav-search-ic { position: absolute; top: 50%; transform: translateY(-50%); left: 18px; color: var(--nav-dim); pointer-events: none; display: flex; }
[dir="ltr"] #navSide .nav-search .nav-search-ic { left: auto; right: 18px; }
#navSide .nav-search .nav-search-ic svg.ic { width: 14px; height: 14px; }
.nav-group { margin-top: 6px; }
.nav-ghead { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--nav-ink); user-select: none; }
.nav-ghead:hover { background: var(--nav-hover); }
.nav-ghead.active { background: var(--nav-active-bg); color: var(--nav-active-ink); }
.nav-ghead .nav-glabel { flex: 1; min-width: 0; }
.nav-chev { opacity: .7; transition: transform .18s var(--ease); padding: 0 4px; }
.nav-group.closed .nav-chev { transform: rotate(-90deg); }
.nav-group.closed .nav-gbody { display: none; }
.nav-gbody { padding-inline-start: 10px; }
.nav-leaf {
  display: block; width: 100%; text-align: start; background: none; cursor: pointer;
  color: var(--nav-dim); font-size: 12.5px; padding: 6px 10px;
  border: none; border-inline-start: 3px solid transparent; border-radius: 8px;
}
.nav-leaf:hover { color: var(--nav-ink); background: var(--nav-hover); }
.nav-leaf.active { color: var(--accent); font-weight: 700; border-inline-start-color: var(--accent); background: var(--nav-hover); }
#navSide.skin-accent .nav-leaf.active { color: var(--nav-ink); }
/* زرّ ☰ فقرات الصفحة: للهاتف فقط (على الحاسوب الشريط ظاهر دائماً) */
.nav-burger { display: none; }
@media (max-width: 760px) {
  #appView.with-nav { display: block; }
  .nav-burger { display: inline-flex; background: color-mix(in srgb, var(--ink) 8%, transparent); border: 1px solid var(--line); color: var(--ink); }
  #navSide { display: none; }
  #appView.nav-open #navSide {
    display: block; position: fixed; top: 0; bottom: 0; right: 0; left: auto;
    width: 290px; max-width: 85vw; height: auto; z-index: 60;
    box-shadow: 0 0 44px rgba(0, 0, 0, .45);
  }
  [dir="ltr"] #appView.nav-open #navSide { left: 0; right: auto; }
}
/* محرّر شجرة الشريط (⚙ — الآلية ت2): صفوف عناوين غامقة + صفوف فقرات مزاحة (تعيد استعمال .sec-order-row) */
.nt-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; padding: 2px; }
.nt-group { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 6px; }
.nt-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px; cursor: grab; }
.nt-head .nt-name { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; padding: 6px 10px; }
.nt-body { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 4px; min-height: 12px; padding-top: 4px; padding-bottom: 2px; }
.nt-sec { padding: 7px 10px; }
.nt-sec .sec-order-lbl { font-size: 13px; }

/* ============ الحزمة 123: أيقونة 🛠 بزاوية ترويسة كل جدول + جدول النافذة يملأها شاقولياً ============ */
/* غلاف نسبي حول حاوية تمرير الجدول؛ الزرّ عائم فوق سطر العناوين (المثبّت) على الجهة المنتهية —
   يبقى ظاهراً أثناء التمرير الداخلي لأن الترويسة مثبّتة عند أعلى الحاوية والزرّ مثبّت عند أعلى الغلاف. */
.tblwrap { position: relative; }
.tbl-gear {
  position: absolute; top: 5px; left: 6px; z-index: 6;
  width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  background: var(--surface); color: var(--ink-soft);
}
[dir="ltr"] .tbl-gear { left: auto; right: 6px; }
.tbl-gear:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tbl-gear svg.ic { width: 14px; height: 14px; }
/* جداول النوافذ العريضة (تسجيل الزيارة/قائمة الأعمال/النفقات/التكاليف…): جسم النافذة يتمرّر شاقولياً،
   ومنطقة الجدول ترتفع حتى ~ارتفاع النافذة — فبالتمرير للأسفل يملأ الجدول النافذة ويعرض أكبر عدد أسطر،
   ويبقى له تمريره الشاقولي الداخلي (الترويسة المثبّتة تبقى ظاهرة). */
.modal-wide .body { overflow-y: auto; overflow-x: hidden; }
.modal-wide .mscroll { flex: none; }
.modal-wide .mscroll .imp-scroll { flex: none; min-height: 140px; max-height: calc(88vh - 175px); }
@media (max-width: 760px) {
  .modal-wide .mscroll .imp-scroll { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
}

/* ============================================================
   Admin-Dashboard — طبقة مكوّنات قسم الشؤون الإدارية
   قاعدة: كل لون من رموز التصميم (--*) ولا لون مثبّت — فترث كل التصاميم والأوضاع تلقائياً.
   ============================================================ */
svg.ic.sm { width: 15px; height: 15px; }
svg.ic.lg { width: 22px; height: 22px; }
.mono { font-family: var(--font-latin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-toggle { display: none; }
@media (max-width: 760px) { .nav-toggle { display: inline-flex; } }

/* الفقرات */
.ad-sec { margin: 0 0 18px; }
.ad-sec .sec-head { margin: 18px 2px 10px; }
.ad-sec .sec-head .spacer { flex: 1; }
.ad-sec-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px; }
.ad-sec-body > table.tbl, .ad-sec-body > .tblwrap { margin: -14px; width: calc(100% + 28px); }
.ad-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ad-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }
.ad-tscroll { overflow: auto; }
@media (max-width: 900px) { .ad-g2 { grid-template-columns: 1fr; } }

/* الهيرو: حلقة المؤشر الحاكم + مؤشرات مصغّرة */
.ad-hero {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.ad-hero-ring { display: grid; place-items: center; }
.ad-ring { width: 190px; height: auto; }
.ad-ring-v { font-size: 30px; font-weight: 700; fill: var(--ink); font-family: var(--font-latin); }
.ad-ring-l { font-size: 11px; fill: var(--muted); font-family: var(--font-ar); }
.ad-ring-s { font-size: 10px; fill: var(--faint); font-family: var(--font-latin); }
.ad-hero-t { font-size: 18px; margin: 0 0 3px; }
.ad-hero-s { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ad-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ad-m { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 9px 12px; background: var(--surface-2); }
.ad-m .l { font-size: 11px; color: var(--muted); }
.ad-m .v { font-family: var(--font-latin); font-weight: 700; font-size: 17px; color: var(--ink); }
.ad-hero-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 760px) { .ad-hero { grid-template-columns: 1fr; } }

/* الشارات الدلالية (اللون + إشارة الاتجاه، لا اعتماد على اللون وحده) */
.ad-badge { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ad-badge.b-good { background: var(--good-bg); color: var(--good); }
.ad-badge.b-warn { background: var(--warn-bg); color: var(--warn); }
.ad-badge.b-bad { background: var(--bad-bg); color: var(--bad); }
.ad-badge.b-mut { background: var(--surface-2); color: var(--muted); }
.ad-badge.b-acc { background: var(--accent-soft-2); color: var(--accent-strong); }
/* ⭐ الحزمة 21 — نغمة «الإشغال/المكان» التركوازية لشارات المحافظة والبروفايل. */
.ad-badge.b-teal { background: color-mix(in srgb, var(--tone-teal) 16%, transparent); color: var(--tone-teal); }

/* ⭐ الحزمة 21 — حقل المحافظة المقفل على بروفايل المحافظة (§7-ج).
   لا خلفية للصندوق نفسه (§3-ب رقم 27) — خيط فاصل وحده يعرّف الحقل. */
.ad-provlock { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.ad-provlock b { font-weight: 800; font-size: 13.5px; }

/* ⭐ الحزمة 21 — اختيار البروفايل عند الدخول (§7-ج). */
.prof-pick { display: grid; gap: 10px; margin-top: 6px; }
.prof-pick button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface);
  color: var(--ink); cursor: pointer; font: inherit; font-weight: 700; }
.prof-pick button:hover { border-color: var(--accent); background: var(--accent-soft-2); }
.prof-pick .pp-sub { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.prof-pick .pp-txt { flex: 1; min-width: 0; }
.ad-alert { font-size: 12.5px; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 11px; margin-top: 10px; display: flex; gap: 7px; align-items: center; }
.ad-alert.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.ad-alert.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

/* الصناديق */
.ad-funds { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ad-fund { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--surface-2); }
.ad-fund .h { font-size: 12.5px; font-weight: 700; display: flex; gap: 7px; align-items: center; color: var(--ink); }
.ad-fund .v { font-family: var(--font-latin); font-weight: 700; font-size: 22px; color: var(--ink); margin-top: 5px; }
.ad-fund .v small { font-size: 12px; color: var(--faint); }
.ad-fund .tr { height: 6px; border-radius: 99px; background: var(--track); margin: 8px 0 6px; overflow: hidden; }
.ad-fund .tr i { display: block; height: 100%; border-radius: 99px; }
.ad-fund .s { font-size: 11.5px; color: var(--muted); }

/* شريط الدورات */
.ad-cycles { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 16px; }
.ad-cy { flex: 1; padding: 9px 10px; font-size: 11.5px; background: var(--surface-2); color: var(--ink-soft); border: none; cursor: pointer; text-align: center; font-family: inherit; }
.ad-cy b { display: block; font-family: var(--font-latin); font-size: 15px; color: var(--ink); }
.ad-cy .ad-cy-st { color: var(--muted); }
.ad-cy.on { background: var(--accent); color: var(--accent-ink); }
.ad-cy.on b, .ad-cy.on .ad-cy-st { color: var(--accent-ink); }

/* التوزيعات */
.ad-dist { display: grid; gap: 9px; }
.ad-dist-row { display: grid; grid-template-columns: 1fr 92px; gap: 10px; align-items: center; }
.ad-dist-n { font-size: 12px; color: var(--ink-soft); }
.ad-dist-tr { height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.ad-dist-tr i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.ad-dist-v { text-align: end; font-family: var(--font-latin); font-weight: 700; font-size: 12px; color: var(--ink); }

/* خريطة الغرف والأسرّة */
.ad-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.ad-room { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.ad-room h4 { font-size: 12.5px; padding: 8px 11px; background: var(--surface-2); display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); margin: 0; }
.ad-room h4 .sp { flex: 1; }
.ad-beds { padding: 10px; display: grid; gap: 8px; }
.ad-bed { display: flex; gap: 9px; align-items: center; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 7px 9px; font-size: 12px; }
.ad-bed .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-bed .sz { font-size: 10.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; }
.ad-bed.free { background: var(--good-bg); border-color: var(--good); }
.ad-bed.busy { background: var(--accent-soft); border-color: var(--accent); }
.ad-bed.soft { background: var(--warn-bg); border-color: var(--warn); }
.ad-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); align-items: center; margin-top: 10px; }
.ad-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-inline-end: 5px; vertical-align: -1px; }

/* محرّر الغرف والأسرّة */
.ad-layout { display: grid; gap: 10px; }
.ad-lr { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 8px; }
.ad-lr-h { display: flex; gap: 8px; align-items: center; }
.ad-lr-h input { flex: 1; }
.ad-lr-b { padding-inline-start: 22px; display: grid; gap: 6px; margin-top: 8px; }
.ad-lb { display: grid; grid-template-columns: 1fr 130px 32px; gap: 8px; align-items: center; }

/* الإعدادات */
.ad-sett-h { font-size: 14px; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--ink); }
.ad-sett-sub { font-size: 12px; color: var(--muted); margin: 10px 0 6px; }
.ad-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-skin-prev { display: block; width: 34px; height: 20px; border-radius: 4px; border: 1px solid var(--line); }
.ad-skin-prev.surface { background: var(--surface-2); }
.ad-skin-prev.accent { background: var(--topbar); border-top: 3px solid var(--accent); }
.ad-days { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-day { display: flex; gap: 5px; align-items: center; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--surface); cursor: pointer; }
.ad-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 14px; }

/* معرض صور البيت */
.ad-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ad-ph { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); padding: 10px; display: flex; gap: 8px; align-items: center; }
.ad-ph a { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; color: var(--ink-soft); text-decoration: none; font-size: 12px; }
.ad-ph a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-ph a:hover { color: var(--accent); }

/* ============================================================
   الحزمة 2 — عرض عريض · نافذة إعدادات باصطلاح Pro-Dashboard · حالة التحديث ·
   الحقول المحروسة · نافذة الاستيراد
   ============================================================ */
/* العرض العريض (الافتراضي مُفعَّل — طلب المالك): الحاوية تملأ الشاشة بلا فراغات جانبية كبيرة */
:root[data-wide="on"] .container { max-width: none; padding-inline: 26px; }
:root[data-wide="on"] #appView.with-nav > #main { max-width: none; }
@media (max-width: 760px) { :root[data-wide="on"] .container { padding-inline: 14px; } }

/* صناديق نافذة الإعدادات (نفس اصطلاح Pro-Dashboard) */
.set-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--surface-2); }
.set-box-h { font-weight: 800; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.set-sub { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.set-sub-h { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }

/* شارة «جارٍ التحديث…» بجانب عنوان الصفحة — بديل شاشة الانتظار الكاملة */
.ad-busy { font-size: 11.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; margin-inline-start: 10px; }

/* عنصر محروس: ميزة تحتاج حقلاً فارغاً — تظهر باهتة وتشرح السبب عند النقر */
.ad-link { border: none; background: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0; }
.ad-link.off { color: var(--faint); cursor: help; text-decoration: line-through; }

/* نافذة استيراد ملف العهدة */
.ad-imp-modes { display: grid; gap: 8px; }
.ad-imp-mode { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--surface); cursor: pointer; }
.ad-imp-mode.on { border-color: var(--accent); background: var(--accent-soft); }
.ad-imp-mode input { margin-top: 3px; accent-color: var(--accent); }
.ad-imp-mode .l { font-weight: 700; font-size: 13px; color: var(--ink); }
.ad-imp-mode .d { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.7; }

/* الرسوم أوسع: تُمدّد على كامل عرض الفقرة */
.ad-sec-body > svg, .ad-sec-body svg[viewBox] { max-width: 100%; }

/* ============================================================
   الحزمة 3 — امتلاء العرض · هيرو أفقي · رسوم مقيسة بالبكسل · أيقونات دلالية ملوّنة
   ============================================================ */

/* ---------- 1) امتلاء العرض: لا شيء يتوقف عند حدّ عرض قديم ---------- */
:root[data-wide="on"] .container,
:root[data-wide="on"] #main.container { max-width: none !important; width: 100%; padding-inline: 24px; }
:root[data-wide="on"] #appView.with-nav > #main { max-width: none; min-width: 0; }
:root[data-wide="on"] .ad-sec,
:root[data-wide="on"] .ad-hero,
:root[data-wide="on"] .ad-sec-body { width: auto; }
@media (max-width: 760px) { :root[data-wide="on"] .container { padding-inline: 13px; } }

/* ---------- 2) الهيرو أفقي: الحلقة يميناً وكل المؤشرات صفّاً واحداً يملأ الباقي ---------- */
.ad-hero {
  display: flex; flex-direction: row; align-items: stretch; gap: 20px;
  width: 100%; box-sizing: border-box;
}
.ad-hero-ring { flex: 0 0 auto; width: 210px; display: grid; place-items: center; }
.ad-ring { width: 200px; max-width: 100%; height: auto; }
.ad-hero-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* المؤشرات صفّ أفقي يتمدّد: 8 مؤشرات تملأ العرض على الشاشات العريضة */
.ad-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.ad-m { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 0; }
.ad-m-t { min-width: 0; }
.ad-m .l { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-m .v { font-family: var(--font-latin); font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; }
@media (max-width: 900px) {
  .ad-hero { flex-direction: column; }
  .ad-hero-ring { width: 100%; }
}

/* ---------- 3) الرسوم: الحاوية تملأ العرض والارتفاع مضمون بالبكسل ---------- */
.ad-chart { width: 100%; }
.ad-chart svg { display: block; width: 100%; height: auto; }

/* ---------- 4) الأيقونات الدلالية: رمز حرّ **بلا إطار** بحجم الإطار المزال ----------
   (أُعيد بناؤها في الحزمة 6 — طلب المالك): أُزيل المربّع الملوّن حول كل أيقونة،
   وكبُر الرمز نفسه ليملأ حيّز الإطار السابق كاملاً (30 / 22 / 34px) محتفظاً
   بلونه الدلالي وتوهّجه الناعم (drop-shadow بلون الرمز نفسه).
   القاعدة الدائمة: **لا إيموجي إطلاقاً**، والنغمة دلالية لا تزيينية، والألوان من
   رموز التصميم فتتبع الفاتح/الداكن تلقائياً. */
.ad-ic {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px;
  color: var(--ic-c);
  vertical-align: -8px;
}
.ad-ic svg.ic {
  width: 100%; height: 100%;
  stroke-width: calc(var(--ic-sw) * .88);
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--ic-c) 38%, transparent));
}
.ad-ic.sm { width: 22px; height: 22px; vertical-align: -5px; }
.ad-ic.lg { width: 34px; height: 34px; vertical-align: -9px; }
/* التوهّج في الوضع الداكن يُقرأ كضوء منبعث فيُوسَّع قليلاً ويُرفع */
:root[data-theme="dark"] .ad-ic svg.ic { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ic-c) 52%, transparent)); }

/* النغمات الأربع الثابتة صارت رموزاً (الحزمة 7 — --tone-*) كي تستهلكها الحلقات والرسوم أيضاً */
:root { --tone-info: #4a86b8; --tone-violet: #7a5bd0; --tone-gold: #b8862f; --tone-teal: #0f9ba8; }
/* في الوضع الداكن تُرفع إضاءتها كي تبقى مقروءة */
:root[data-theme="dark"] { --tone-info: #7ab4e0; --tone-violet: #a98ef0; --tone-gold: #d9a94e; --tone-teal: #45c3cf; }
.ad-ic.accent { --ic-c: var(--accent); }
.ad-ic.good   { --ic-c: var(--good); }
.ad-ic.warn   { --ic-c: var(--warn); }
.ad-ic.bad    { --ic-c: var(--bad); }
.ad-ic.info   { --ic-c: var(--tone-info); }
.ad-ic.violet { --ic-c: var(--tone-violet); }
.ad-ic.gold   { --ic-c: var(--tone-gold); }
.ad-ic.teal   { --ic-c: var(--tone-teal); }

/* الأيقونة داخل عنوان الفقرة والصفحة */
.sec-head h3 { display: flex; align-items: center; gap: 9px; }
.page-head h2 { display: flex; align-items: center; gap: 10px; }
.sec-head h3 .ad-ic, .page-head h2 .ad-ic { vertical-align: baseline; }

/* أيقونات الشريط الجانبي: الرمز الحرّ بلون نغمته + النصّ بلون الشريط.
   على «هوية الترويسة المُثراة» (خلفية داكنة/متدرّجة) تُمزَج النغمة نحو لون نصّ الشريط
   كي تبقى مقروءة على الخلفية أياً كانت (بدل المربّع الفاتح الذي كان يؤمّن التباين). */
.nav-leaf { display: flex !important; align-items: center; gap: 9px; }
#navSide.skin-accent .nav-leaf .ad-ic { color: color-mix(in srgb, var(--ic-c) 52%, var(--nav-ink)); }

/* بطاقة الفقرة: الرسم يملأها بلا هوامش سالبة */
.ad-sec-body > .ad-chart { margin: 0 -4px; }

/* ============================================================
   الحزمة 4 — علامة مائية متمركزة في المحتوى · تخطيط الغرف الأنيق · ضيف جديد داخل النافذة ·
   شريط الدورات المتعدّد · منتقي المدى · تلوين أسطر الجداول بالتناوب · معاينة استيراد كاملة
   ============================================================ */

/* ---------- 1) العلامة المائية تتمركز في حيّز المحتوى لا في الصفحة ----------
   في وضع الشريط الجانبي كان مركز الصفحة يقع تحت الشريط، فتبدو العلامة منزاحة.
   الحلّ: إزاحة العلامة بعرض الشريط (258px) في هذا الوضع فقط، مع مراعاة الاتجاهين. */
:root[data-wm="on"] body::after { background-position: center center; }
@media (min-width: 761px) {
  #appView.with-nav ~ * { }
  :root[data-wm="on"]:has(#appView.with-nav) body::after {
    inset-inline-end: 258px;
    inset-inline-start: 0;
    width: auto;
  }
}
/* احتياط للمتصفّحات التي لا تدعم :has — يضبطه app.js بسمة data-navwm على <html> */
:root[data-navwm="on"] body::after { inset-inline-end: 258px; inset-inline-start: 0; width: auto; }
@media (max-width: 760px) { :root[data-navwm="on"] body::after { inset-inline-end: 0; } }

/* ---------- 2) الحلقة: القيمة داخلها والتفصيل تحتها (لا تخطٍّ) ---------- */
.ad-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.ad-ring-cap {
  font-family: var(--font-latin); font-size: 12px; color: var(--muted);
  text-align: center; line-height: 1.6; max-width: 230px; word-break: break-word;
}

/* ---------- 3) محرّر الغرف والأسرّة ---------- */
.ad-lrooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ad-lr { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.ad-lr-h { display: flex; gap: 8px; align-items: center; padding: 9px 11px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ad-lr-h .ad-lr-n { flex: 1; min-width: 0; margin: 0; padding: 6px 10px; font-weight: 700; }
.ad-lr-b { padding: 10px; display: grid; gap: 8px; }
/* ⚠️ الحزمة 18 — عطل حقيقي رصده المالك («زرّ مفرد/مزدوج لا يعمل»): كان العمود الثاني `1fr`
   وحقلُ اسم السرير داخله بـ`min-width:auto`، فيرفض التقلّص دون عرضه الجوهري (189px) ويسحق
   عمود المِقسم `auto` إلى **19px** بينما عرضه الحقيقي 141px — و`.ad-seg` بـ`overflow:hidden`
   فتُقصّ الأزرار وتصير غير قابلة للنقر أصلاً. العلاج: `minmax(0,1fr)` + `min-width:0` على
   الحقل، فيتقلّص الاسمُ ويأخذ المِقسمُ عرضه كاملاً (§3-ب رقم 33). */
.ad-lb { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 28px; gap: 8px; align-items: center; }
.ad-lb .ad-lb-n { margin: 0; padding: 6px 10px; min-width: 0; }
.ad-lb .ad-seg { flex: none; }
.ad-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.ad-seg-b { border: none; background: none; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.ad-seg-b i { font-style: normal; opacity: .6; font-family: var(--font-latin); }
.ad-seg-b.on { background: var(--accent); color: var(--accent-ink); }
.ad-seg-b.on i { opacity: .85; }

/* ---------- 4) بطاقة «ضيف جديد» داخل نافذة الزيارة ---------- */
.ad-newguest { border: 1px dashed var(--accent); border-radius: var(--r-lg); background: var(--accent-soft); padding: 10px 12px; margin-top: 10px; }
.ad-newguest-h { font-weight: 800; color: var(--accent-strong); display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }

/* ---------- 5) شريط الدورات (اختيار متعدّد) ---------- */
.ad-cycles-wrap { margin-bottom: 16px; }
.ad-cycles { margin-bottom: 0; }
.ad-cy { transition: background-color .15s var(--ease); }
.ad-cy:hover { background: var(--accent-soft); }
.ad-cy-hint { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 7px; flex-wrap: wrap; }

/* ---------- 6) زرّ المدى الزمني ---------- */
.ad-range-btn { font-family: var(--font-latin); font-size: 11.5px; padding: 6px 11px; }
.ad-range-btn.on { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.sec-head .ad-range-btn { margin-inline-start: auto; }

/* ---------- 7) تلوين أسطر الجداول بالتناوب (طلب المالك) ----------
   تظليل طفيف جداً من رمز السطح الثانوي كي يبقى ضمن الهوية في كل التصاميم والأوضاع،
   ويبقى تظليل التأشير (hover) أقوى منه فلا يختفي أثره. */
table.tbl tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
:root[data-theme="dark"] table.tbl tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--ink) 5%, transparent); }
table.tbl tbody tr:not(.tbl-total):hover > td { background: var(--accent-soft); }
table.tbl tbody tr.tbl-total > td, table.tbl tfoot tr > td { background: var(--surface-2); }

/* ---------- 8) معاينة الاستيراد: كل الحركات بتمرير شاقولي وأفقي ---------- */
.ad-imp-scroll {
  max-height: 46vh; overflow: auto; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface);
}
.ad-imp-scroll table.tbl { box-shadow: none; border-radius: 0; }
.ad-imp-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* ---------- 9) صفوف ترتيب فقرات التقرير ---------- */
.sec-order-list { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; padding: 2px; }
.sec-order-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; background: var(--surface); }
.sec-order-row .sec-order-lbl { font-size: 13px; }
.pr-pb-btn { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 7px; width: 28px; height: 26px; cursor: pointer; line-height: 1; }
.pr-pb-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ============================================================
   الحزمة 5 — اتجاه العلامة المائية · تكديس النوافذ · بطاقات الصناديق ·
   تشخيص العهدة · معالجة خروج النصوص من حيّزها
   ============================================================ */

/* ---------- 1) العلامة المائية: تُزاح **بعكس جهة الشريط الجانبي** ----------
   الشريط في RTL على اليمين ⇒ حيّز المحتوى إلى يساره ⇒ يجب حجز 258px من **جهة البداية**
   (inset-inline-start = اليمين في RTL). كانت الإزاحة من الجهة المنتهية فانزاحت للجهة الخطأ. */
:root[data-navwm="on"] body::after {
  inset-inline-start: 258px;
  inset-inline-end: 0;
  width: auto;
}
@media (max-width: 760px) { :root[data-navwm="on"] body::after { inset-inline-start: 0; } }
/* إلغاء قاعدة :has القديمة التي كانت تُزيح بالجهة المعاكسة */
@media (min-width: 761px) {
  :root[data-wm="on"]:has(#appView.with-nav) body::after { inset-inline-end: 0; inset-inline-start: 258px; }
}

/* ---------- 2) النوافذ المكدّسة: الأعلى فوق ما تحتها بظلّ أوضح ---------- */
#modalRoot .modal-back + .modal-back { background: rgba(0, 0, 0, .28); }
#modalRoot .modal-back:not(:last-child) .modal { filter: saturate(.9); }

/* ---------- 3) بطاقات الصناديق: الرصيد هو البطل + وصف صريح ---------- */
.ad-fund .cap { font-size: 11px; color: var(--muted); margin-top: -2px; }
.ad-fund.neg { border-color: var(--bad); background: var(--bad-bg); }
.ad-fund .h { flex-wrap: wrap; }
.ad-fund .s { line-height: 1.8; }
.ad-fund .s b { color: var(--muted); }

/* ---------- 4) تشخيص العهدة ---------- */
.ad-issues { display: grid; gap: 8px; }
.ad-issues .ad-alert { margin-top: 0; align-items: center; flex-wrap: wrap; }
.ad-issues .ad-alert .btn { flex: none; }

/* ---------- 5) خروج النصوص من حيّزها (طلب المالك) ----------
   القاعدة: **لا نصّ يُقصّ في بطاقة مؤشر**. التسمية تلتفّ حتى سطرين، والقيمة تلتفّ بحرّية،
   والوصف التوضيحي داخل <small> ينزل سطراً مستقلاً — والنصّ الكامل في `title` عند التأشير. */
.ad-m { align-items: flex-start; }
.ad-m .l {
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.ad-m .v { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.ad-m .v small {
  display: block; font-family: var(--font-ar); font-size: 10.5px; font-weight: 600;
  color: var(--muted); line-height: 1.5; margin-top: 2px;
}
.ad-m-t { flex: 1; min-width: 0; }
.ad-mini { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: stretch; }
.ad-m { min-height: 62px; }

/* حلقة الهيرو: السطر التفصيلي يلتفّ ولا يتجاوز عرض الحلقة */
.ad-ring-cap { max-width: 210px; }

/* الشارات وأسطر الحالة لا تخرج من حيّزها */
.ad-hero-s { overflow-wrap: anywhere; }
.ad-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ad-fund .v { overflow-wrap: anywhere; }

/* ============================================================
   الحزمة 6 — طبقة الأناقة الشاملة (الوضعان الفاتح والداكن معاً)
   المبدأ: كل قيمة من رموز التصميم (--*) فترث التصاميم الستة والوضعين تلقائياً؛
   لا تغيير DOM ولا سلوك — صقل بصري فقط: الهيرو، بطاقات المؤشرات، الصناديق،
   شريط الدورات، الجداول، التنبيهات، أشرطة التوزيع، الأزرار الرئيسية.
   ============================================================ */

/* ---------- 1) الهيرو: غسلة لونية خفيفة من اللون المميّز تتوّج بطاقة القيادة ---------- */
.ad-hero {
  border-color: var(--line-soft);
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 46%);
}
:root[data-theme="dark"] .ad-hero {
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 13%, var(--surface)) 0%, var(--surface) 52%);
}
.ad-hero-t { font-size: 20px; font-weight: 800; }
.ad-ring-v { font-weight: 800; letter-spacing: -.01em; }
.ad-ring-l { font-size: 11.5px; }

/* بطاقة المؤشر المصغّر: سطح هادئ بلا إطار، ترتفع بلطف عند التأشير */
.ad-m {
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  border-radius: var(--r);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.ad-m:hover { background: var(--surface-2); border-color: var(--line-soft); transform: translateY(-1px); }
.ad-m .l { font-weight: 600; font-size: 11.5px; }
.ad-m .v { font-size: 18px; letter-spacing: -.01em; }

/* ---------- 2) الفقرات والعناوين ---------- */
.ad-sec-body { border-color: var(--line-soft); }
.sec-head h3 { font-size: 16.5px; font-weight: 800; }
.page-head h2 { font-weight: 800; }

/* ---------- 3) الجداول: ترويسة أوضح (كانت باهتة في الداكن) وسطر إجمالي أنيق ---------- */
table.tbl th { font-size: 11.5px; }
:root[data-theme="dark"] table.tbl th { color: var(--ink-soft); }
:root[data-theme="dark"] .tbl.tbl-sepa thead th { color: var(--ink-soft); }

/* ---------- 4) بطاقات الصناديق: كتف لوني دلالي على جهة البداية ---------- */
.ad-fund {
  border-inline-start: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: var(--shadow);
  background: var(--surface);
}
.ad-fund.neg { border-inline-start-color: var(--bad); }
.ad-fund .v { font-size: 24px; letter-spacing: -.01em; }

/* ---------- 5) شريط الدورات: كبسولة أنعم واختيار متدرّج بلون الهوية ---------- */
.ad-cycles { border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.ad-cy { padding: 10px 10px; }
.ad-cy.on { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }

/* ---------- 6) التنبيهات: نصّ يُقرأ في الوضعين (يُمزَج لون الحالة نحو الحبر) ---------- */
.ad-alert.warn { color: color-mix(in srgb, var(--warn) 72%, var(--ink)); }
.ad-alert.bad { color: color-mix(in srgb, var(--bad) 74%, var(--ink)); }

/* ---------- 7) أشرطة التوزيع: تدرّج الهوية وارتفاع أوضح ---------- */
.ad-dist-tr { height: 9px; }
.ad-dist-tr i { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.ad-fund .tr { height: 7px; }

/* ---------- 8) الزرّ الرئيسي: تدرّج رأسي خفيف من لون الهوية ---------- */
.btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
.btn-primary:hover { background: linear-gradient(180deg, var(--accent-strong), var(--accent-strong)); }
:root[data-sig="pearl"] .btn-primary { background: var(--ink); }
:root[data-sig="pearl"] .btn-primary:hover { background: var(--ink-soft); }

/* ---------- 9) الرسوم البيانية: بطاقة الرسم تتنفس ---------- */
.ad-chart { padding: 4px 2px 0; }

/* ============================================================
   الحزمة 7 — هوية «أونكس سنكري» + مزاجا الوضع الداكن + طبقة الحركة الأنيقة
   (اختيارات المالك: الاتجاه ① أونكس · الشريط «ب» فحمي ثابت · مزاجا داكن أ/ج بمفتاح)
   ============================================================ */

/* ---------- 1) مزاج الداكن «ليل المرصد» (data-dark-mood="night") ----------
   طبقة أسطح تُركَّب فوق **أي تصميم** في وضعه الداكن: عتمة كحلية-فحمية بنفَس رقابي.
   («فحم دافئ» = الافتراضي: لوحات التصاميم الداكنة نفسها بلا تركيب.)
   تعتمد ترتيب الملف: نفس قوة محدِّد كتل التصاميم الداكنة وتأتي بعدها فتغلبها. */
:root[data-theme="dark"][data-dark-mood="night"] {
  --bg: #0F131A; --surface: #161C26; --surface-2: #121821;
  --ink: #ECF0F5; --ink-soft: #C9D2DD; --muted: #97A3B3; --faint: #6A788C;
  --line: #28323F; --line-soft: #1F2833; --track: #212B39;
  --glass-surface: rgba(22, 28, 38, .82); --glass-border: rgba(160, 190, 220, .08);
  --ambient: radial-gradient(900px 500px at 90% -10%, rgba(224, 135, 87, .07), transparent 60%),
             radial-gradient(700px 520px at -6% 10%, rgba(69, 195, 207, .05), transparent 62%);
}

/* ---------- 2) توقيع «أونكس»: أسطح تطفو بظلالها **وحدود شبح رقيقة تضبط الحواف** ----------
   (الحزمة 8 «عاجي مصقول»: عادت الحدود الخفيفة line-soft بدل الشفافية الكاملة — تضبط حافة
   البطاقة البيضاء على العاجي بلا ثقل. في الداكن تحكمها طبقة «حبر على فحم» أدناه.) */
:root[data-sig="classic"] .card,
:root[data-sig="classic"] .kpi,
:root[data-sig="classic"] .kpi-card,
:root[data-sig="classic"] table.tbl,
:root[data-sig="classic"] .ad-sec-body,
:root[data-sig="classic"] .ad-hero,
:root[data-sig="classic"] .ad-cycles,
:root[data-sig="classic"] .scurve .sc-box,
:root[data-sig="classic"] .act-bar-card,
:root[data-sig="classic"] .info-card { border-color: var(--line-soft); }
:root[data-sig="classic"] .modal { border-color: var(--line-soft); }
:root[data-sig="classic"] .ad-fund { border-color: var(--line-soft); }
:root[data-sig="classic"] .ad-fund.neg { border-color: var(--bad); }

/* ---------- 3) الحلقة: قوس يتلوّن بقيمته + توهّج بلون القوس + حركة ارتسام ---------- */
.ad-ring .ad-arc {
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 30%, transparent));
  animation: adRingDraw 1s var(--ease) both;
  transition: stroke-dasharray .6s var(--ease), color .4s var(--ease);
}
:root[data-theme="dark"] .ad-ring .ad-arc {
  filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 50%, transparent));
}
@keyframes adRingDraw { from { stroke-dashoffset: var(--arc, 0); } to { stroke-dashoffset: 0; } }

/* ---------- 4) دخول متدرّج لبطاقات المؤشرات (رسمي هادئ — يُلغى مع تقليل الحركة) ---------- */
@keyframes adRise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.ad-mini .ad-m { animation: adRise .45s var(--ease) both; }
.ad-mini .ad-m:nth-child(2) { animation-delay: .05s; }
.ad-mini .ad-m:nth-child(3) { animation-delay: .1s; }
.ad-mini .ad-m:nth-child(4) { animation-delay: .15s; }
.ad-mini .ad-m:nth-child(5) { animation-delay: .2s; }
.ad-mini .ad-m:nth-child(6) { animation-delay: .25s; }
.ad-mini .ad-m:nth-child(7) { animation-delay: .3s; }
.ad-mini .ad-m:nth-child(8) { animation-delay: .35s; }
.ad-mini .ad-m:nth-child(9) { animation-delay: .4s; }

/* ---------- 5) لمعة الهيرو: مسحة ضوئية واحدة تعبر البطاقة عند بنائها ---------- */
.ad-hero { position: relative; overflow: hidden; }
.ad-hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 44%; inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent 30%,
    color-mix(in srgb, var(--accent) 6%, transparent) 46%,
    rgba(255, 255, 255, .09) 52%, transparent 68%);
  transform: skewX(-14deg); pointer-events: none;
  animation: adHeroSheen 1.5s .3s var(--ease) forwards;
}
@keyframes adHeroSheen { to { inset-inline-start: 130%; } }

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

/* ---------- 1) الجداول: بلا خلفية على سطح الصفحة، ترويسة نصّية بخيط نحاسي ---------- */
:root[data-theme="dark"] table.tbl { background: transparent; box-shadow: none; }
:root[data-theme="dark"] table.tbl th {
  background: transparent; color: var(--muted);
  box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
/* الترويسة المثبّتة (داخل النوافذ) تحتاج خلفية مصمتة كي لا تشفّ الصفوف تحتها أثناء التمرير */
:root[data-theme="dark"] .tbl.tbl-sepa thead th,
:root[data-theme="dark"] .imp-tbl th { background: var(--surface); }
/* لا تناوب في الداكن — فواصل خيطية فقط (حدود td القائمة line-soft) */
:root[data-theme="dark"] table.tbl tbody tr:nth-child(even) > td { background: transparent; }
:root[data-theme="dark"] table.tbl tbody tr:not(.tbl-total):hover > td { background: var(--accent-soft); }
/* ---------- 2) سطر الإجمالي مميَّز (طلب المالك): غسلة نحاسية + كتف علوي ---------- */
:root[data-theme="dark"] table.tbl .tbl-total td,
:root[data-theme="dark"] table.tbl tfoot tr > td {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink); font-weight: 800;
  border-top: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
:root[data-theme="dark"] .tbl.tbl-sepa .tbl-total td {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------- 3) البطاقات: حدود خيطية بدل الظلال — حبرٌ على الفحم ---------- */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .kpi-card,
:root[data-theme="dark"] .ad-sec-body,
:root[data-theme="dark"] .ad-fund,
:root[data-theme="dark"] .ad-cycles,
:root[data-theme="dark"] .scurve .sc-box,
:root[data-theme="dark"] .act-bar-card {
  background: transparent; box-shadow: none; border: 1px solid var(--line);
}
:root[data-theme="dark"] .ad-hero {
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%);
  box-shadow: none; border: 1px solid var(--line);
}
/* الصندوق السالب يبقى معلَّماً بخلفيته الحمراء وتنبيهه */
:root[data-theme="dark"] .ad-fund.neg { background: var(--bad-bg); }
/* بطاقات التقارير تبقى قابلة للتمييز عند التأشير */
:root[data-theme="dark"] .card:hover { border-color: var(--accent-soft-2); background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* ---------- 5) الحزمة 9: الدورة التي يكسر ضمُّها التتالي · تلميح القائمة الهرمية ---------- */
.ad-cy.off { opacity: .42; cursor: not-allowed; }
.ad-cy.off:hover { background: var(--surface-2); }
:root[data-theme="dark"] .ad-cy.off:hover { background: transparent; }
/* الدورة **المختارة** في وسط المدى: مضمومة فعلاً ولا تُنقَر (التقليص من الطرفين فقط)
   ⇒ تبقى بكامل وضوحها ولا تُعتَّم — العتمة للمقطوعة خارج المدى وحدها. */
.ad-cy.on.off { opacity: 1; cursor: default; }
.ad-cy.on.off:hover { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
.ad-sel-hint { font-size: 11.5px; color: var(--good); margin-top: 5px; font-weight: 600; }
/* حقول القوائم المعطّلة (بانتظار اختيار الأب) تُقرأ معطّلةً بوضوح */
.field select:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- 4) الفاتح «عاجي مصقول»: خيط نحاسي خافت تحت ترويسة كل جدول ---------- */
:root[data-theme="light"] table.tbl thead th,
:root[data-theme="light"] table.tbl th {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ============================================================
   الحزمة 15 — (أ) الحقول مباشرةً على سطح النافذة  (ب) بحث الجداول وفلترة الأعمدة
   ============================================================ */

/* ---------- (أ) صناديق النوافذ بلا تعبئة (طلب المالك) ----------
   كانت `.set-box` بخلفية `--surface-2` والحقول داخلها بالخلفية نفسها، فتذوب حدودها
   ويبدو الصندوق مستطيلاً بيجياً على نافذة بيضاء. صار الصندوق **تجميعاً بصرياً بلا لون**
   (عنوان + خيط فاصل خفيف)، فتجلس الحقول البيج مباشرةً على سطح النافذة ويظهر تباينها. */
.set-box {
  background: transparent;
  border: none;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 12px 0 4px;
  margin-bottom: 10px;
}
.set-box:first-child { border-top: none; padding-top: 2px; }
.set-box-h { color: var(--ink); }
/* الصناديق المتداخلة (نافذة الإعدادات) لا تُكرّر الخيط */
.set-box .set-box { border-top: 1px dashed var(--line-soft); }

/* ---------- (ب) شريط أدوات الجدول: بحث حيّ + عدّاد + مسح المرشّحات ---------- */
.tbl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 9px; }
.tbl-search-w {
  display: flex; align-items: center; gap: 7px; flex: 1 1 210px; max-width: 340px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  padding: 0 11px; color: var(--muted);
}
.tbl-search-w:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tbl-search {
  flex: 1; border: none; background: transparent; padding: 9px 0; font-family: inherit;
  font-size: 13.5px; color: var(--ink); outline: none; min-width: 0;
}
.tbl-count { white-space: nowrap; }
.tbl-clear { padding: 6px 11px; font-size: 12.5px; }

/* ترويسة العمود: التسمية + قُمع الفلترة (يظهر مصمتاً حين يكون العمود مُرشَّحاً) */
table.tbl th { position: relative; }
.th-in { display: flex; align-items: center; gap: 6px; }
.th-lab { flex: 1; }
.th-filter {
  border: none; background: transparent; color: var(--faint); cursor: pointer;
  padding: 2px; border-radius: 5px; line-height: 0; opacity: .55;
  transition: opacity .16s, color .16s, background-color .16s;
}
table.tbl th:hover .th-filter { opacity: 1; }
.th-filter:hover { color: var(--accent); background: var(--accent-soft); }
.th-filter.on { opacity: 1; color: var(--accent); background: var(--accent-soft); }

/* لوح فلترة العمود */
.col-filter-pop {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40;
  width: 262px; max-width: 78vw; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 10px; text-align: start; font-weight: 500;
}
.cf-h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; margin-bottom: 8px; color: var(--ink); }
.cf-q {
  width: 100%; padding: 7px 10px; margin-bottom: 7px; font-family: inherit; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink);
}
.cf-q:focus { outline: none; border-color: var(--accent); }
.cf-list { max-height: 208px; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 4px; }
.cf-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: 12.5px; }
.cf-row:hover { background: var(--surface-2); }
.cf-row input { flex: none; accent-color: var(--accent); }
.cf-v { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-n { color: var(--muted); font-size: 11px; font-family: var(--font-latin); }
.cf-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.cf-foot .btn { padding: 6px 10px; font-size: 12px; }
@media (max-width: 760px) { .col-filter-pop { position: fixed; inset-inline: 12px; top: auto; width: auto; max-width: none; } }

/* أيقونة ضبط الأعمدة صارت داخل شريط الأدوات (لا معوّمة فوق الترويسة) */
.tbl-gear.inline { position: static; flex: none; }
/* شريط الأدوات داخل فقرة يمتدّ جدولها إلى حواف البطاقة ⇒ يُعاد له الهامش الداخلي */
.ad-sec-body > .tblwrap > .tbl-tools { padding: 12px 14px 9px; }

/* ---------- (ج) شريط الدورات الجديد + نافذة اختيار الدورات (الحزمة 15) ---------- */
.ad-cybar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.ad-cypick { display: flex; flex-direction: column; gap: 7px; max-height: 52vh; overflow: auto; padding: 2px; }
.ad-cyrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; text-align: start;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
.ad-cyrow:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ad-cyrow.on { border-color: var(--accent); background: var(--accent-soft); }
.ad-cyrow.off { opacity: .45; cursor: not-allowed; }
.ad-cyrow.on.off { opacity: 1; cursor: default; }
.ad-cyrow-m { width: 18px; flex: none; line-height: 0; color: var(--accent); }
.ad-cyrow-d { flex: 1; color: var(--muted); font-size: 12.5px; }
.ad-fund-fx { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line-soft); }

/* قائمة اختيار الضيوف في تقرير الضيف (الحزمة 15): بحث + قائمة مرتفعة قابلة للتمرير */
.tbl-search-plain {
  width: 100%; padding: 9px 12px; margin-bottom: 8px; font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink);
}
.tbl-search-plain:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ad-glist { max-height: 40vh; overflow: auto; }

/* ============================================================
   الحزمة 16 — تمييز خيار «إضافة قيمة جديدة» في كل القوائم المنسدلة
   الفاصل معطّل والخيار بلون الهوية وخطّ عريض. (قوائم الهاتف يرسمها النظام فقد يتجاهل
   اللون — ولذلك يبقى **الفاصل والنصّ المحاط بعلامتَي زاوية** هما التمييز المضمون.)
   ============================================================ */
select option.opt-new { color: var(--accent); font-weight: 800; background: var(--accent-soft); }
select option.opt-sep { color: var(--faint); font-size: 11px; }
:root[data-theme="dark"] select option.opt-new { color: var(--accent); background: var(--surface-2); }
/* صفّ إضافة قيمة في «إدارة القوائم» (الحزمة 16): منتقيات الأصل ثم القيمة ثم زرّ الإضافة */
.ad-addrow { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; background: var(--surface-2); }
.ad-addrow .field { margin: 6px 0; }

/* ============================================================
   الحزمة 17 — إشارة «تحتاج تخريج» · تقييم الضيف وملاحظاته · الفنادق · الجنس
   ============================================================ */

/* (أ) إقامة حلّ موعد خروجها ولم تُخرَّج: نقطة حمراء نابضة لا، ساكنة (§18-ي-3) + نصّ أحمر */
.ad-due-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bad); margin-inline-end: 7px; vertical-align: middle;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent);
}
.ad-due-txt { color: var(--bad); font-weight: 700; }
table.tbl tbody tr.row-due td { background: color-mix(in srgb, var(--bad) 7%, transparent); }

/* (ب) نجوم التقييم */
.ad-rate { display: flex; gap: 4px; }
.ad-rate-s {
  border: none; background: transparent; cursor: pointer; font-size: 24px; line-height: 1;
  color: var(--line); padding: 2px 3px; transition: color .15s, transform .15s;
}
.ad-rate-s:hover { transform: scale(1.12); }
.ad-rate-s.on { color: var(--tone-gold); }
.ad-stars { color: var(--tone-gold); letter-spacing: 1px; white-space: nowrap; }
.ad-stars .off { color: var(--line); }

/* (ج) بطاقات ملاحظات الضيف — لونها من نوعها */
.ad-notes { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.ad-note-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r); border-inline-start: 3px solid var(--line);
}
.ad-note-row.pos { border-inline-start-color: var(--good); background: color-mix(in srgb, var(--good) 6%, transparent); }
.ad-note-row.neg { border-inline-start-color: var(--bad); background: color-mix(in srgb, var(--bad) 6%, transparent); }
.ad-note-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 0 12px; flex: 1; min-width: 0; }
@media (max-width: 700px) { .ad-note-grid { grid-template-columns: 1fr; } }
.ad-note-row .field { margin: 4px 0; }
.ad-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ad-seg-b {
  border: none; background: var(--surface-2); color: var(--muted); cursor: pointer;
  padding: 9px 14px; font-family: inherit; font-size: 13px; font-weight: 700;
}
.ad-seg-b.on { background: var(--accent); color: #fff; }

/* صندوق تفاصيل رحلة داخل نافذة الزيارة/التخريج (الحزمة 20) — تجميع بصري بخيط لا بلون
   (§3-ب رقم 27: لا خلفية على صندوق يحوي حقولاً بلون الخلفية نفسه). */
.ad-trip-box { border-inline-start: 3px solid var(--accent); padding-inline-start: 10px; margin: 6px 0 10px; }
.ad-trip-box .field { margin: 6px 0; }

/* بطاقة ملاحظة في قائمة الضيوف */
.ad-gnote { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; margin: 2px 3px 2px 0; border: 1px solid var(--line); }
.ad-gnote.pos { color: color-mix(in srgb, var(--good) 78%, var(--ink)); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 10%, transparent); }
.ad-gnote.neg { color: color-mix(in srgb, var(--bad) 78%, var(--ink)); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.ad-gnote .d { color: var(--muted); font-family: var(--font-latin); font-size: 10.5px; }

/* (د) الجنس */
.ad-gender { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.ad-gender.male { color: color-mix(in srgb, var(--tone-info) 82%, var(--ink)); background: color-mix(in srgb, var(--tone-info) 13%, transparent); }
.ad-gender.female { color: color-mix(in srgb, var(--tone-violet) 82%, var(--ink)); background: color-mix(in srgb, var(--tone-violet) 13%, transparent); }

/* ============================================================================
   ⭐ الحزمة 31 — الأصول والاشتراكات + ترتيب الأعمدة + مرفقات الطلبات
   كل الألوان من رموز التصميم (§3-ب رقم 11) · أعمدة الحقول minmax(0,1fr) (رقم 33) ·
   لا اختصارات `inset` (رقم 4) · صفوف الأزرار تلتفّ (رقم 36).
   ============================================================================ */
/* شارة عدد الطلبات المعلّقة على عنصر الشريط الجانبي */
.nav-leaf .nav-cnt { margin-inline-start: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800;
  text-align: center; background: var(--bad-bg); color: var(--bad); font-family: var(--font-latin); }
/* الترتيب بأي عمود: التسمية قابلة للنقر، والسهم بلون الهوية */
.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { color: var(--accent); }
.th-sort-ar { font-size: 9.5px; color: var(--accent); font-weight: 800; }
table.tbl th.th-sorted .th-lab { color: var(--accent); }
/* وسم القائمة (خط · اشتراك · سيارة) بنغماتها الدلالية */
.ad-badge.ad-tag-phone { color: color-mix(in srgb, var(--tone-teal) 84%, var(--ink)); background: color-mix(in srgb, var(--tone-teal) 14%, transparent); }
.ad-badge.ad-tag-sub { color: color-mix(in srgb, var(--tone-violet) 84%, var(--ink)); background: color-mix(in srgb, var(--tone-violet) 14%, transparent); }
.ad-badge.ad-tag-car { color: color-mix(in srgb, var(--tone-gold) 84%, var(--ink)); background: color-mix(in srgb, var(--tone-gold) 16%, transparent); }
.ad-badge svg.ic.sm { vertical-align: -2px; }
/* القيمة + مِقسم العملة · الموعد (يوم + شهر) */
.ad-amt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ad-amt input { min-width: 0; }
.ad-amt .ad-seg-b { font-family: var(--font-latin); min-width: 46px; }
.ad-due { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ad-due input, .ad-due select { min-width: 0; }
.ad-due .ad-provlock { min-height: 42px; }
/* المنتقي المتقدّم للبند (نافذة حركة المصروف) */
.ad-pick-in { position: relative; }
.ad-pick-in svg.ic { position: absolute; top: 50%; transform: translateY(-50%); right: 13px; color: var(--muted); pointer-events: none; }
[dir="ltr"] .ad-pick-in svg.ic { right: auto; left: 13px; }
.ad-pick-in input { width: 100%; padding-inline-start: 38px; }
.ad-pick-res { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: auto; max-height: 292px; }
.ad-pick-res table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 12.5px; }
.ad-pick-res th { position: sticky; top: 0; z-index: 1; text-align: start; padding: 8px 10px; white-space: nowrap; font-weight: 700;
  color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ad-pick-res td { padding: 9px 10px; white-space: nowrap; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.ad-pick-res tbody tr { cursor: pointer; }
.ad-pick-res tbody tr:hover td, .ad-pick-res tbody tr:focus td { background: var(--accent-soft); color: var(--ink); outline: none; }
.ad-pick-res mark { background: var(--accent-soft-2); color: inherit; border-radius: 3px; padding: 0 2px; }
.ad-pick-card { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--r); padding: 10px 12px; font-size: 13px; color: var(--ink); }
.ad-pick-card .m { color: var(--muted); font-size: 12px; flex: 1; min-width: 120px; overflow-wrap: anywhere; }
/* مرفقات الطلبات العامة: مصغَّرة + اسم الملف */
.ad-att-btn { border: none; cursor: pointer; font-family: inherit; }
.ad-att-gal { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ad-att { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px;
  text-decoration: none; color: var(--ink-soft); background: var(--surface); }
.ad-att:hover { border-color: var(--accent); color: var(--accent); }
.ad-att-th { height: 96px; border-radius: 6px; background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--muted); }
.ad-att-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-att-n { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ⭐ الحزمة 34 — بنود الحركة المجمّعة في نافذة حركة المصروف (ألوان من الرموز · أعمدة minmax(0,1fr) · تلتفّ على الضيّق) */
.ad-xitems { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.ad-xitem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 240px) auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ad-xitem-n { min-width: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.ad-xitem-n .m { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ad-xitem .ad-amt input { padding: 7px 9px; font-size: 13.5px; }
.ad-xsum { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft); }
@media (max-width: 640px) { .ad-xitem { grid-template-columns: minmax(0, 1fr) auto; } .ad-xitem .ad-amt { grid-column: 1 / -1; grid-row: 2; } }