/* ===================== المتغيرات والأساسيات ===================== */
/* لوحة مالية: تيل الثقة (Trustworthy Teal) أساساً، وذهب الازدهار للزكاة،
   وأخضر النموّ للربح — مستوحاة من لوحات القطاع المالي ومتحقَّق من
   تباينها بمعيار WCAG AA في الثيمين. */
:root {
  --bg: #0a1117;
  --bg-2: #0d161d;
  --surface: #121d26;
  --surface-2: #18252f;
  --border: #223441;
  --text: #e6edf2;
  --text-dim: #93a7b3;
  --text-faint: #64798a;
  --primary: #0f7d99;        /* خلفية الأزرار — أبيض عليها 4.76:1 */
  --primary-d: #0c6479;
  --accent: #4fb3d4;         /* روابط وحالات نشطة — 7.90:1 على الأرضية */
  --on-primary: #ffffff;
  --green: #4fb277;
  --red: #e0687e;
  --amber: #d7b740;          /* ذهب الزكاة */
  --purple: #9d8df1;
  --shadow: 0 10px 30px rgba(0, 0, 0, .38);
  --chart-axis: #93a7b3;
  --chart-grid: #223441;
  --topbar: rgba(10, 17, 23, .86);
  --radius: 14px;
  font-size: 15px;
}
:root[data-theme="light"] {
  --bg: #f6f9fa;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef3f5;
  --border: #d7e0e5;
  --text: #0f1a20;
  --text-dim: #4f6472;
  --text-faint: #7b8d99;
  --primary: #1f6f8b;
  --primary-d: #17586f;
  --accent: #1a6480;
  --on-primary: #ffffff;
  --green: #2f7a4c;
  --red: #b23a52;
  --amber: #8a6a12;
  --purple: #6b5bc4;
  --shadow: 0 10px 30px rgba(20, 45, 60, .12);
  --chart-axis: #4f6472;
  --chart-grid: #d7e0e5;
  --topbar: rgba(255, 255, 255, .88);
}
:root[data-theme="light"] .auth-screen {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(31,111,139,.13), transparent),
    radial-gradient(900px 500px at 0% 100%, rgba(138,106,18,.07), transparent),
    var(--bg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* رمز الريال السعودي الموحّد (2025) — خط أحادي الرمز مضمّن base64، يتبع لون النص وحجمه والثيم */
@font-face {
  font-family: "RiyalSym";
  src: url("data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTaelW30AAAaQAAAAHE9TLzJHKtLwAAABWAAAAGBjbWFwAw/0ZAAAAcgAAAE6Y3Z0IAAhAnkAAAMEAAAABGdhc3D//wADAAAGiAAAAAhnbHlmLOWONAAAAxQAAADkaGVhZCru04wAAADcAAAANmhoZWEHXgOxAAABFAAAACRobXR4DVYAgQAAAbgAAAAQbG9jYQCcAFQAAAMIAAAACm1heHAASABaAAABOAAAACBuYW1lkETiNwAAA/gAAAJkcG9zdAAuADUAAAZcAAAAKgABAAAAAQAAtLhmGF8PPPUACwPoAAAAAOPnR50AAAAA4+dIrgAh/zoD4AMiAAAACAACAAAAAAAAAAEAAAMi/zoAWgRyAAAAAAPgAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACkAAgAAAAAAAgAAAAEAAQAAAEAALgAAAAAABARyAZAABQAAAooCvAAAAIwCigK8AAAB4AAxAQIAAAIABQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZACA8Orw6gMg/zgAWgMiAMaAAAAAAAAAAAAAAAAAAAAgAAEEcgAhAAAAAARyAAAEcgBgAAAAAgABAAAAAAA0AAMAAAAAABQABAAgAAAABAAEAAEAAPDq//8AAPDq//8PGQABAAAAAAAAAQYAAAEAAAAAAAAAAQIAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhAnkAAAAqACoAKgByAAAAAgAhAAABKgKaAAMABwAusQEALzyyBwQA7TKxBgXcPLIDAgDtMgCxAwAvPLIFBADtMrIHBgH8PLIBAgDtMjMRIREnMxEjIQEJ6MfHApr9ZiECWAAAAgBg/zoD4AMiAAUAKAAABSUGBwU2JQU1BxUUDwEGBwU2NyU1BTY/ARE2NxE3ETY3ESUGDwEVJQYCjgFSBhn+rgYBTP6uaQk3FSb+1gYZAR3+9gYY7Cw9aS09AQcGGegBBwZUSDw2SDzjSNcWdxAOUR8IQDw3PIg5PDYyAaM2Iv4cFgFBNiL+fTg7NzFsODwAAAAVAQIAAQAAAAAAAAAZADQAAQAAAAAAAQAJAGIAAQAAAAAAAgAHAHwAAQAAAAAAAwAlANAAAQAAAAAABAAJAQoAAQAAAAAABQAPATQAAQAAAAAABgAJAVgAAwAABAkAAAAyAAAAAwAABAkAAQASAE4AAwAABAkAAgAOAGwAAwAABAkAAwBKAIQAAwAABAkABAASAPYAAwAABAkABQAeARQAAwAABAkABgASAUQAAwABBAkAAAAyAAAAAwABBAkAAQASAE4AAwABBAkAAgAOAGwAAwABBAkAAwBKAIQAAwABBAkABAASAPYAAwABBAkABQAeARQAAwABBAkABgASAUQAQwBvAHAAeQByAGkAZwBoAHQAIAAoAGMAKQAgADIAMAAyADUALAAgAGEAcgBlAGgAbQAAQ29weXJpZ2h0IChjKSAyMDI1LCBhcmVobQAAVQBuAHQAaQB0AGwAZQBkADIAAFVudGl0bGVkMgAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAARgBvAG4AdABGAG8AcgBnAGUAIAAyAC4AMAAgADoAIABVAG4AdABpAHQAbABlAGQAMgAgADoAIAAyADgALQAyAC0AMgAwADIANQAARm9udEZvcmdlIDIuMCA6IFVudGl0bGVkMiA6IDI4LTItMjAyNQAAVQBuAHQAaQB0AGwAZQBkADIAAFVudGl0bGVkMgAAVgBlAHIAcwBpAG8AbgAgADAAMAAxAC4AMAAwADAAAFZlcnNpb24gMDAxLjAwMAAAVQBuAHQAaQB0AGwAZQBkADIAAFVudGl0bGVkMgAAAgAAAAAAAP+1ADIAAAABAAAAAAAAAAAAAAAAAAAAAAAEAAAAAQACAHIAAAAAAAH//wACAAAAAQAAAADf1ssxAAAAAOPnR50AAAAA4+dIrg==") format("truetype");
  font-display: swap;
}
.ryl { font-family: "RiyalSym", sans-serif; font-style: normal; font-weight: 700; line-height: 0; }
.ryl::before { content: "\00ea"; }

body {
  font-family: "Segoe UI", "Tahoma", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
ul { list-style: none; }

/* ===================== الأزرار ===================== */
.btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  transition: transform .05s ease, background .15s ease, opacity .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-d); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-danger { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 24%, transparent); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 8px; }

.icon-btn {
  background: transparent; border: 0; color: var(--text-dim);
  width: 36px; height: 36px; border-radius: 9px; font-size: 1.1rem;
  display: grid; place-items: center;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ===================== تسجيل الدخول ===================== */
.auth-screen {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(79,179,212,.16), transparent),
    radial-gradient(900px 500px at 0% 100%, rgba(215,183,64,.09), transparent),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 36px 30px; box-shadow: var(--shadow); text-align: center;
}
.auth-logo { font-size: 3rem; }
.auth-title { font-size: 1.5rem; margin-top: 8px; }
.auth-sub { color: var(--text-dim); margin: 6px 0 22px; font-size: .92rem; }
.auth-form { text-align: right; display: grid; gap: 14px; }
.auth-error {
  background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red);
  padding: 8px 12px; border-radius: 8px; font-size: .85rem; text-align: center;
}
.auth-hint { margin-top: 18px; font-size: .8rem; color: var(--text-dim); }

/* ===================== الحقول ===================== */
.field { display: grid; gap: 6px; }
.field > span { font-size: .85rem; color: var(--text-dim); font-weight: 600; }
.field input, .field select, .field textarea {
  /* background-color لا background: المختصرة تمحو background-image،
     فيضيع سهم القائمة المنسدلة المرسوم أدناه */
  background-color: var(--bg-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 10px; padding: 10px 12px; width: 100%;
  transition: border .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { resize: vertical; }
/* هامشٌ حول الحقل حين يُجلَب إلى الرؤية، فلا يلتصق بحافّة منطقة التمرير */
.modal-body .field { scroll-margin-block: 16px; }

/* ===================== تخطيط التطبيق ===================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 270px; flex-shrink: 0; background: var(--bg-2);
  border-inline-start: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0;
  /* dvh لا vh: شريط عنوان المتصفّح على الجوال يجعل 100vh أطول من المرئي،
     فتسقط الصفحات الثابتة والملف الشخصي تحت الحافة بلا وسيلةٍ لبلوغها. */
  height: 100vh; height: 100dvh;
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 12px;
}
.brand { font-weight: 800; font-size: 1.05rem; }
.sidebar-close { display: grid; }
.sidebar-close:hover { background: var(--surface-2); }

.nav { display: grid; gap: 4px; padding: 6px 12px; flex: 1 1 auto; overflow-y: auto; align-content: start; }
.head-actions { display: flex; gap: 4px; align-items: center; }
.nav-item {
  /* صفٌّ واحد لا يتكسّر: [مقبض] [رمز] [اسم يتمدّد] [شارة/إخفاء] */
  display: flex; align-items: center; gap: 9px; flex-wrap: nowrap;
  text-align: start; background: transparent; border: 0; color: var(--text-dim);
  padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem;
  cursor: pointer; width: 100%; min-width: 0;
}
.nav-item .nav-ico { flex: none; display: grid; place-items: center; }
.nav-item .nav-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-item .badge { flex: none; margin-inline-start: auto; }
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--primary); color: #fff; }

.sidebar-section { padding: 14px 12px; flex: 1; overflow-y: auto; }
.sidebar-section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px 10px; color: var(--text-dim); font-size: .8rem; font-weight: 700;
}
.badge {
  background: var(--surface-2); color: var(--text-dim);
  border-radius: 20px; padding: 1px 9px; font-size: .78rem; font-weight: 700;
}
.asset-nav { display: grid; gap: 3px; }
.asset-nav li {
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: .9rem; transition: background .12s;
}
.asset-nav li:hover { background: var(--surface); }
.asset-nav li.active { background: var(--surface-2); }
.asset-nav .an-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-nav .an-chg { font-size: .78rem; font-weight: 700; flex-shrink: 0; }

.sidebar-foot {
  padding: 14px 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.user-chip {
  display: flex; align-items: center; gap: 9px; overflow: hidden;
  background: transparent; border: 0; cursor: pointer; color: var(--text);
  border-radius: 10px; padding: 5px 7px; transition: background .12s; text-align: right;
}
.user-chip:hover { background: var(--surface-2); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--primary);
  color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}
.user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40;
}

/*
 * قفل تمرير الخلفية أثناء النوافذ المنبثقة.
 *
 * ‏overflow:hidden وحده لا يكفي في سفاري الجوال: يبقى المستند يُمرَّر
 * تحت الإصبع فتتحرّك الصفحة خلف النافذة. الحلّ تثبيت الجسم مع حفظ موضع
 * التمرير واستعادته عند الإغلاق (يتكفّل به app.js).
 */
body.modal-open {
  position: fixed; inset-inline: 0; width: 100%; overflow: hidden;
}
/*
 * الشريط العلوي لا يبقى لاصقاً والجسم مثبَّت.
 *
 * ‏sticky يُحسب على منطقة تمريرٍ لم تعد تُمرَّر، ومعه `backdrop-filter`
 * الذي يُنشئ طبقةً خاصّة — وسفاري الجوال قد يترك الشريط مرسوماً في
 * موضعه القديم بعد فكّ التثبيت فيبدو مغطّياً أعلى الصفحة. جعلُه عادياً
 * أثناء فتح النافذة يُلغي الحساب أصلاً، وعودتُه بعدها تُجبر إعادة رسم.
 */
body.modal-open .topbar { position: static; }

/* ===================== المحتوى ===================== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 16px 24px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--topbar); backdrop-filter: blur(8px); z-index: 20;
}
.menu-btn { display: none; }
.topbar-title { font-size: 1.2rem; flex: 1; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.topbar-actions .btn { min-width: 122px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.topbar-actions .caret { font-size: .75rem; opacity: .8; }
.topbar-actions .btn-label { margin-inline-start: 6px; }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px);
  left: 0; right: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
  width: max-content; min-width: 210px; max-width: min(88vw, 320px); z-index: 60;
  animation: menuIn .12s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
.dropdown-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: right; background: transparent; border: 0; color: var(--text);
  padding: 10px 12px; border-radius: 9px; font-weight: 500; white-space: nowrap;
}
.dropdown-menu button:hover { background: var(--surface-2); }
.dropdown-menu .mi { width: 22px; text-align: center; flex-shrink: 0; }

/* ===================== الإشعارات ===================== */
/* النقطة شارةٌ لا عدّاد: الرقم الدقيق لا يغيّر تصرّف من يراه، ووجودُ
   شيءٍ غير مقروء هو كلّ ما يحتاج قبل أن يفتح. */
.notif-wrap { position: relative; display: inline-flex; }
.notif-dot {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); border: 2px solid var(--bg-2); pointer-events: none;
}
.notif-menu { padding: 0; min-width: 320px; max-width: min(92vw, 400px); }
.notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: .9rem;
}
/* زرّ «تعليم الكل كمقروء» يرث عرض 100٪ من قاعدة القائمة العامّة فيدفع
   العنوان خارج الترويسة — يعود إلى حجم نصّه */
.notif-head .link-btn {
  width: auto; padding: 0; font-size: .8rem; white-space: nowrap; font-weight: 600;
}
.notif-list { max-height: min(60vh, 420px); overflow-y: auto; }
/*
 * كل قاعدة هنا مسبوقة بـ‎.notif-menu‎ لا لتجميلٍ بل لضرورة: صفوف
 * الإشعارات أزرارٌ داخل ‎.dropdown-menu‎، وقاعدتها العامّة
 * ‎`.dropdown-menu button`‎ أعلى تخصيصاً من ‎`.notif-row`‎ وحدها — فكانت
 * تفرض ‎white-space:nowrap‎ (فيخرج النصّ عن المربّع بلا التفاف)
 * و‎border:0‎ (فيختفي الفاصل بين إشعارٍ وآخر) و‎display:flex‎ (فتُهمَل
 * الشبكة). ما يلي يستعيدها صراحةً.
 */
.notif-menu .notif-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px;
  padding: 13px 14px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  cursor: pointer; background: transparent;
  width: 100%; text-align: start; color: var(--text);
  white-space: normal; font-weight: 400; align-items: start;
}
.notif-menu .notif-row:last-child { border-bottom: 0; }
.notif-menu .notif-row:hover { background: var(--surface-2); }
.notif-menu .notif-row.unread { background: color-mix(in srgb, var(--amber) 9%, transparent); }
.notif-menu .notif-row .n-ico { color: var(--amber); padding-top: 2px; }
.notif-menu .notif-row.soon .n-ico { color: var(--text-dim); }
/* العنوان والنصّ والوقت أسطرٌ متتابعة لا نصٌّ متّصل: هي عناصر span
   داخل زرّ، والافتراضي inline فتلتحم في سطرٍ واحد طويل */
.notif-menu .notif-row > span:last-child { display: block; min-width: 0; }
.notif-menu .notif-title,
.notif-menu .notif-body,
.notif-menu .notif-time { display: block; white-space: normal; overflow-wrap: anywhere; }
.notif-menu .notif-title { font-weight: 600; font-size: .88rem; margin-bottom: 3px; line-height: 1.5; }
.notif-menu .notif-body { font-size: .8rem; color: var(--text-dim); line-height: 1.65; }
.notif-menu .notif-time { font-size: .72rem; color: var(--text-faint); margin-top: 5px; }
.notif-empty { padding: 26px 14px; text-align: center; color: var(--text-dim); font-size: .85rem; }

/* ===================== دفعات الشراء وحالة الحول ===================== */
.hawl-pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  border: 1px solid transparent;
}
.hawl-pill.full { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 12%, transparent); }
.hawl-pill.partial { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 14%, transparent); }
.hawl-pill.none { color: var(--text-dim); border-color: var(--border); background: var(--surface-2); }
.lot-row.done { color: var(--text-dim); }
.zakat-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.metal-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.metal-pick .seg {
  padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim); font-weight: 600; font-size: .86rem;
}
.metal-pick .seg.on { border-color: var(--amber); color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent); }

/* الاستيراد */
.import-list { display: grid; gap: 8px; margin: 4px 0 8px; }
.import-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.import-row .ir-count { background: var(--surface-2); color: var(--text-dim);
  border-radius: 20px; padding: 2px 11px; font-size: .8rem; font-weight: 700; }
.import-mode {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px;
  color: var(--text-dim); font-size: .9rem; cursor: pointer;
}
.import-mode b { color: var(--text); }
.import-mode input { margin-top: 3px; }

/* مبدّل المحفظة في الشريط الجانبي */
.pf-switch { padding: 12px 0 10px; }
.pf-switch label {
  font-size: .74rem; color: var(--text-dim); font-weight: 700;
  display: block; margin-bottom: 7px;
}
.pf-select-wrap { position: relative; }
.pf-switch select {
  width: 100%; background-color: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding-block: 11px; padding-inline: 14px 38px; font-weight: 700; font-size: .95rem;
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  transition: border .15s, background-color .15s;
}
.pf-switch select::-ms-expand { display: none; }
.pf-switch select:hover { border-color: var(--accent); }
.pf-switch select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }

/* زر الثيم */
.theme-toggle {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 7px 12px; font-weight: 600; font-size: .85rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.theme-toggle:hover { background: var(--border); }

/* منطقة الخطر (المسح) */
.danger-zone {
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  background: color-mix(in srgb, var(--red) 6%, transparent);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 20px;
}
.danger-zone h4 { color: var(--red); margin-bottom: 6px; }
.danger-zone p { color: var(--text-dim); font-size: .88rem; margin-bottom: 12px; }
.danger-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* الصفحة الشخصية */
.profile-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 4px;
}
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; flex-shrink: 0;
}
.pf-manage-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
}
.pf-manage-row .pf-meta { color: var(--text-dim); font-size: .85rem; }
.pf-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pf-add input {
  flex: 1; min-width: 160px; background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 10px; padding: 9px 12px;
}

/* التحديد الجماعي */
.col-check { width: 38px; text-align: center; }
.col-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); vertical-align: middle; }
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--primary);
  border-radius: 12px; padding: 10px 16px; margin-bottom: 12px;
}
.bulk-count { font-weight: 800; }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }


/* التبديل المقطعي (بيع كلي/جزئي) */
.seg { display: flex; gap: 6px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.seg-opt { flex: 1; position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-opt span { display: block; text-align: center; padding: 9px; border-radius: 9px; font-weight: 700; color: var(--text-dim); transition: .12s; }
.seg-opt input:checked + span { background: var(--primary); color: #fff; }

/* الأسعار المباشرة: تلميح ونتائج */
.price-hint {
  margin-top: 14px; background: rgba(245,185,66,.10); border: 1px solid rgba(245,185,66,.4);
  color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: .88rem;
}
.price-results { margin-top: 14px; display: grid; gap: 6px; }
.pr-line { font-size: .88rem; font-weight: 600; }
.pr-line.pos { color: var(--green); }
.pr-line.neg { color: var(--red); }

.content { padding: 24px; }
/* شريط أدوات لوحة التحكم: مدخلٌ واحد للإضافة مهما كانت الفئة */
.dash-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dash-tools .btn { min-width: 150px; justify-content: center; }

/* ===================== البطاقات الإحصائية ===================== */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.stat-label { color: var(--text-dim); font-size: .85rem; font-weight: 600; }
/* الأرقام لاتينية دائماً، فالتباعد السالب عليها آمن — لكن لا يُطبَّق
   على عنوانٍ عربي مجاور، لذا يُحصر في .num وحدها */
.stat-value { font-size: 1.7rem; font-weight: 800; margin-top: 6px; }
.stat-value.num, .stat-value .num { letter-spacing: -.5px; }
.stat-sub { font-size: .82rem; margin-top: 4px; font-weight: 700; }

.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--text-dim); }

/* ===================== الرسوم البيانية ===================== */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.panel-title { font-size: 1.05rem; font-weight: 700; }
.charts-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.charts-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
@media (max-width: 1100px) { .charts-3 { grid-template-columns: 1fr; } }
/* الصندوق يحدّد الارتفاع، والكانفاس يملؤه. overflow يمنع أي فيض إن
   تأخّر إعادةُ الرسم بعد تغيير المقاس. */
.chart-box { position: relative; width: 100%; height: 260px; overflow: hidden; }
.chart-box canvas { width: 100%; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-dim); }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; }

/* ===================== الجدول ===================== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { text-align: right; padding: 12px 14px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); font-size: .82rem; font-weight: 700; white-space: nowrap; }
tbody tr { transition: background .12s; cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
td .type-pill {
  background: var(--surface-2); color: var(--text-dim);
  padding: 2px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600;
}
.row-actions { display: flex; gap: 6px; justify-content: flex-start; }

/* عمود الإجراءات المثبّت (يظهر دائماً عند التمرير الأفقي على الجوال) */
.col-actions {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .35);
}
thead .col-actions { z-index: 3; background: var(--bg-2); }
tbody tr:hover .col-actions { background: var(--surface-2); }
:root[data-theme="light"] .col-actions { box-shadow: 6px 0 8px -6px rgba(30, 50, 90, .12); }

/* ===================== تفاصيل الأصل ===================== */
.detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.detail-title { font-size: 1.6rem; font-weight: 800; }
.detail-meta { color: var(--text-dim); margin-top: 4px; }
.back-link {
  background: transparent; border: 0; color: var(--accent);
  font-weight: 600; padding: 4px 0; margin-bottom: 8px;
}

/* ===================== الحالة الفارغة ===================== */
.empty {
  text-align: center; padding: 60px 20px; color: var(--text-dim);
}
.empty-icon { font-size: 3.5rem; }
.empty h3 { color: var(--text); margin: 12px 0 6px; }

/* ===================== النوافذ المنبثقة ===================== */
/*
 * النافذة تشغل المساحة المرئية فعلاً لا الشاشة كاملة.
 *
 * ‏`--vv-h` و`--vv-top` يضبطهما app.js من `visualViewport`: لوحة المفاتيح
 * تغطّي أسفل الشاشة ولا تُنقص `vh`، فبدونهما تمتدّ النافذة تحتها ويقع
 * الحقل المُركَّز في مكانٍ لا يُرى ولا يُمرَّر إليه. والقيم الافتراضية
 * تُعيد السلوك القديم حيث لا دعم.
 */
.modal {
  position: fixed; inset-inline: 0;
  top: var(--vv-top, 0px); height: var(--vv-h, 100%);
  z-index: 100; display: grid; place-items: center; padding: 20px;
}
/* الخلفية تُظلّل الشاشة كلّها لا صندوق النافذة وحده: صندوقها ينكمش مع
   لوحة المفاتيح، ولو تبعتها لانكشف ما تحتها */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
/*
 * البطاقة عمودٌ مرن: الترويسة والذيل ثابتان والجسم وحده يمرّر.
 *
 * كان التمرير على البطاقة كلّها، فذيلُها — «حفظ» و«إلغاء» — يهبط مع
 * المحتوى ولا يظهر إلا بعد التمرير إلى آخر النموذج. ومن يملأ نموذجاً
 * طويلاً على الجوال يحتاج أن يرى أين يحفظ من أول لحظة.
 */
.modal-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; width: 100%; max-width: 560px; box-shadow: var(--shadow);
  /* 100٪ من صندوق النافذة — وهو المساحة المرئية ناقصَ حشوتها، فتنكمش
     البطاقة مع لوحة المفاتيح بدل أن تختفي تحتها */
  max-height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  --modal-pad: 22px;
}
.modal-sm { max-width: 400px; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  flex: 0 0 auto;
  padding: 18px var(--modal-pad); border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 1.15rem; }
.modal-body {
  padding: var(--modal-pad); padding-bottom: 0;
  display: grid; gap: 16px; align-content: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* لا يُمرَّر ما خلف النافذة حين يبلغ الجسم طرفه */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/*
 * الذيل لاصقٌ في قاع الجسم. حُشوة الجسم السفلية صفر ليطابق حدُّ لصوقه
 * قاعَ منطقة التمرير تماماً — ولو بقيت 22px لعلق فوقها بفجوة.
 */
.modal-foot {
  display: flex; justify-content: flex-start; gap: 10px;
  position: sticky; bottom: 0; z-index: 2;
  margin: 4px calc(-1 * var(--modal-pad)) 0;
  padding: 14px var(--modal-pad) var(--modal-pad);
  background: var(--surface); border-top: 1px solid var(--border);
}

/* ===================== التنبيهات ===================== */
.toast {
  position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(50%);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 12px 22px; border-radius: 12px; box-shadow: var(--shadow); z-index: 200;
  font-weight: 600; animation: toastIn .25s ease;
}
.toast.ok { border-color: var(--green); }
.toast.err { border-color: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translate(50%, 12px); } }

/* ===================== الاستجابة ===================== */
/* طيّ الشريط الجانبي على سطح المكتب */
@media (min-width: 761px) {
  .app.nav-collapsed .sidebar { display: none; }
  .app.nav-collapsed .menu-btn { display: grid; }
}

@media (max-width: 860px) {
  .charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar {
    position: fixed; right: 0; left: auto; top: 0; z-index: 50; width: 84vw; max-width: 320px;
    transform: translateX(100%); transition: transform .25s ease;
  }
  .app.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow); }
  .app.nav-open .sidebar-overlay { display: block; }
  .sidebar-close, .menu-btn { display: grid; }
  .grid-2 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .topbar { padding: 12px 14px; gap: 8px; }
  .topbar-title { font-size: 1.05rem; }
  .topbar-actions { gap: 7px; }
  /* الشريط ضيّق: الزرّان يعودان إلى أيقونتيهما ويبقى العنوان تلميحاً.
     إخفاء الزرّ نفسه كان يقطع الاستيراد والتصدير عن مستخدم الجوال. */
  .topbar-actions .btn { min-width: 0; padding: 9px 11px; font-size: .9rem; }
  .topbar-actions .btn-label { display: none; }
  .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-value { font-size: 1.35rem; }
  .panel { padding: 16px; }
  .charts-row { grid-template-columns: 1fr; }
  .dropdown-menu { max-width: min(92vw, 320px); }
  /*
   * لوحة الإشعارات ورقةٌ بعرض الشاشة لا قائمةٌ معلّقة بالجرس: عرضها
   * الأدنى 320px والجرس في وسط الشريط، فأيّاً كانت جهة فتحها خرج طرفُها
   * عن الشاشة وانقطع النصّ. موضعُها الرأسي يُضبط من app.js بقياس الشريط.
   */
  .notif-menu {
    position: fixed;
    inset-inline: 10px;
    inset-block-start: var(--notif-top, 64px);
    width: auto; min-width: 0; max-width: none;
  }
  .notif-list { max-height: min(62vh, 420px); }

  .modal { padding: 12px; align-items: flex-end; }
  .modal-card { max-height: 100%; border-radius: 18px 18px 0 0; --modal-pad: 16px; }
  /* مساحةٌ لشريط الإيماءات أسفل شاشات آيفون، فلا يقع «حفظ» تحته */
  .modal-foot { padding-bottom: max(var(--modal-pad), env(safe-area-inset-bottom)); }
  /*
   * 16px حدٌّ لا نزول تحته في حقول الإدخال: سفاري الجوال يُكبّر الصفحة
   * تلقائياً عند التركيز على حقلٍ أصغر منه، فتتغيّر الواجهة تحت المستخدم
   * ويصير التمرير على الصفحة لا على النافذة.
   */
  input, select, textarea { font-size: 16px; }
}
@media (max-width: 460px) {
  :root { font-size: 14px; }
  .stat-grid { grid-template-columns: 1fr; }
  .detail-title { font-size: 1.3rem; }
  .detail-head { gap: 10px; }
  .detail-head > div:last-child { width: 100%; }
  .detail-head .btn { flex: 1; }
  .panel-head { gap: 8px; flex-wrap: wrap; }
  .bulk-actions { width: 100%; }
  .bulk-actions .btn { flex: 1; }
}
@media print {
  .sidebar, .topbar, .row-actions, .panel-head .btn, .back-link { display: none !important; }
  body, .content { background: #fff; color: #000; }
  .panel, .stat-card { border-color: #ccc; break-inside: avoid; }
}

/* ===================== التعليمات + بطاقة الدعم ===================== */
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.help-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.help-card-head {
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 10px;
  color: var(--text);
}
.help-list { list-style: none; display: grid; gap: 9px; padding-inline-start: 2px; }
.help-list li { display: flex; gap: 10px; line-height: 1.6; color: var(--text-dim); }
.help-list li .pos { flex: 0 0 auto; }

@media (max-width: 560px) {
}

/* ===================== تبديل دخول/تسجيل ===================== */
.auth-switch { text-align: center; margin-top: 14px; color: var(--text-dim); font-size: .92rem; }
.link-btn {
  background: none; border: none; color: var(--accent); font: inherit; font-weight: 700;
  cursor: pointer; padding: 0 4px; text-decoration: underline;
}
.link-btn:hover { color: var(--primary-d); }

/* ===================== استعادة كلمة المرور + لوحة المشرف ===================== */
.auth-forgot { text-align: center; margin-top: 8px; }
.auth-msg {
  background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: 10px;
  padding: 10px 12px; font-size: .9rem; margin: 4px 0;
}
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
}
.pill-admin {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.admin-table th, .admin-table td { text-align: center; vertical-align: middle; }
/* شريط حدّ الباقة (يظهر لأصحاب الباقة التجريبية) */
.limit-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 18px; padding: 12px 18px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text); font-size: .92rem;
}
.limit-bar.limit-full {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}
.limit-bar .btn { white-space: nowrap; text-decoration: none; }
@media (max-width: 620px) {
  .limit-bar { justify-content: center; text-align: center; }
  .limit-bar .btn { width: 100%; }
}

/* background-color لا background: المختصرة تمحو background-image، ومحدّد
   الصنف يغلب محدّد العنصر مهما كان ترتيبهما — فيسقط السهم المرسوم في
   القاعدة العامّة ويبقى الحقل بلا دلالةٍ على أنه قائمة.
   والحشوة الأفقية تأتي من القاعدة العامّة، فلا تُكتب هنا فتزاحم السهم. */
.plan-select {
  background-color: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding-block: 5px; padding-inline-start: 8px;
  font: inherit; font-size: .85rem; cursor: pointer;
}
.plan-select:disabled { opacity: .5; cursor: wait; }
.admin-table td:nth-child(2), .admin-table th:nth-child(2) { text-align: start; }
.icon-btn.danger:hover { color: var(--red); }

/* زر اللغة في شاشة الدخول */
.auth-card { position: relative; }
.auth-lang { position: absolute; top: 14px; inset-inline-end: 14px; font-weight: 700; font-size: .85rem; }

/* ===================== الشعار (قابل للضغط) ===================== */
.brand-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.brand-link:not(.brand-static):hover { opacity: .82; }
.brand-link:not(.brand-static) { cursor: pointer; }
.brand-static { cursor: default; }
.brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* شاشة الدخول: الشعار فوق الاسم */
.auth-brand { flex-direction: column; gap: 4px; justify-content: center; width: 100%; }
.auth-logo-img { display: block; max-height: 64px; width: auto; margin-inline: auto; }

/* الشريط الجانبي */
.brand-mark { font-size: 1.15rem; line-height: 1; }
.brand-mark-img { display: block; height: 26px; width: auto; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===================== شعار العلامة ===================== */
/* الشعار يحمل الاسم مكتوباً، فالنصّ المجاور يبقى للقارئ الآلي فقط. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.oso-logo { display: block; width: auto; }
/* الألوان تتبع الثيم: أبيض+تيل على الداكن، تيل+ذهبي على الفاتح —
   وهما نسختا الشعار الأصليتان بالضبط. */
.oso-logo .lg-main   { fill: #F5F5F5; }
.oso-logo .lg-accent { fill: #007F9C; }
:root[data-theme="light"] .oso-logo .lg-main   { fill: #007F9C; }
:root[data-theme="light"] .oso-logo .lg-accent { fill: #906800; }

.auth-logo { display: block; margin-inline: auto; }
.auth-logo .oso-logo { height: 58px; margin-inline: auto; }
.auth-title { margin-top: 0; }

.brand-mark .oso-logo { height: 30px; }
.brand-link { min-width: 0; }

/* ===================== مؤشّر التحميل ===================== */
/* مبنيّ من رمز الشعار نفسه: حلقته الخارجية تدور والجذع ثابت. */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px);
  animation: loaderIn .18s ease both;
}
@keyframes loaderIn { from { opacity: 0 } to { opacity: 1 } }

.loader-card {
  display: grid; justify-items: center; gap: 16px;
  padding: 30px 38px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.oso-spinner { height: 62px; overflow: visible; }
/* الدوران على الحلقة وحدها حول مركز الرمز — لا على الشعار كله،
   فيبقى الجذع ثابتاً ويُقرأ الرمز أثناء الحركة. */
.oso-spinner .lg-ring {
  transform-origin: 139px 146px;
  animation: osoSpin 1.15s cubic-bezier(.55, .15, .45, .85) infinite;
}
@keyframes osoSpin { to { transform: rotate(360deg) } }

.oso-spinner .lg-accent { animation: osoPulse 1.7s ease-in-out infinite; }
@keyframes osoPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.loader-msg { color: var(--text-dim); font-size: .92rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; }
  .oso-spinner .lg-ring, .oso-spinner .lg-accent { animation: none; }
  .loader-msg::after { content: " ⏳"; }
}

/* ===================== لوحة الحساب ===================== */
.account-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start;
}
.account-avatar { display: grid; justify-items: center; gap: 10px; }
.avatar-lg {
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; overflow: hidden;
  font-size: 2.4rem; font-weight: 800; color: var(--accent);
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.account-fields { display: grid; gap: 12px; max-width: 420px; }
.account-fields .btn { justify-self: start; }
.account-sep { height: 1px; background: var(--border); margin: 26px 0 20px; }

/* الشارة في الشريط الجانبي تحمل صورة أو حرفاً */
.avatar.has-img { padding: 0; overflow: hidden; }
.avatar.has-img .avatar-img { width: 100%; height: 100%; }

@media (max-width: 640px) {
  .account-grid { grid-template-columns: 1fr; gap: 20px; }
  .account-fields { max-width: none; }
}

/* حالة الرخصة في لوحة المشرف */
.pill-soon { background: rgba(215, 183, 64, .12); color: var(--amber); border: 1px solid rgba(215, 183, 64, .3); }
.pill-late { background: rgba(224, 104, 126, .12); color: var(--red); border: 1px solid rgba(224, 104, 126, .32); }

/* ===================== المشاركة للقراءة فقط ===================== */
.share-list { display: grid; gap: 10px; margin-top: 14px; }
.share-row {
  display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto auto;
  gap: 10px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-2);
}
.share-meta { display: grid; gap: 2px; min-width: 0; }
.share-meta b { font-size: .92rem; }
.share-meta span { font-size: .76rem; }
.share-url {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-dim); padding: 8px 10px; font-size: .78rem;
  direction: ltr; text-align: left; width: 100%; min-width: 0;
}
@media (max-width: 700px) {
  .share-row { grid-template-columns: 1fr auto; }
  .share-url { grid-column: 1 / -1; }
}

.share-bar { border-color: var(--accent); }

/*
 * وضع القراءة فقط: يُخفي كل ما يكتب.
 * هذا إخفاء لا حراسة — data.php يشترط توكن جلسة والرابط المشترَك بلا
 * توكن، فالمنع الحقيقي على الخادم. الغرض هنا ألّا يُعرض للمشاهد زرٌّ
 * يظنّه يعمل.
 */
.share-mode #addInSectionBtn,
.share-mode #importBtn,
.share-mode #exportMenu,
.share-mode #exportBtn,
.share-mode #logoutBtn,
.share-mode #userChip,
.share-mode .row-actions,
.share-mode .bulk-bar,
.share-mode .sel-col,
.share-mode [data-go="admin"],
.share-mode [data-go="profile"],
.share-mode .notif-wrap,
.share-mode .danger-zone { display: none !important; }
.share-mode .table tbody tr { cursor: default; }
/* الحقول تبقى ظاهرة لتُقرأ القيم، لكنها لا تُحرَّر */
.share-mode #content input,
.share-mode #content select,
.share-mode #content textarea { pointer-events: none; opacity: .75; }
.share-mode #banners input { pointer-events: auto; }

/* زرّ الدخول التجريبي في شاشة الدخول */
.auth-demo { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.auth-demo p { margin-top: 8px; font-size: .8rem; text-align: center; color: var(--text-dim); }

/* نافذة السؤال العامة — بديل confirm/prompt الأصليين */
.ask-msg { line-height: 1.75; white-space: pre-line; color: var(--text); }
.ask-msg b { color: var(--accent); }
#askModal .modal-foot { margin-top: 8px; }
#askModal .btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
#askModal .btn-danger:hover { filter: brightness(1.08); }

/* بطاقة الحساب المختصرة في الملف الشخصي */
.account-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar-md {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; overflow: hidden;
  font-size: 1.4rem; font-weight: 800; color: var(--accent);
}
.account-card-body { display: grid; gap: 3px; flex: 1 1 200px; min-width: 0; }
.account-card-body b { font-size: 1.02rem; }
.account-card-body span { font-size: .84rem; }

/* ===================== لوحة الإعدادات المبوّبة ===================== */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-dim); padding: 11px 16px; font: inherit; font-size: .92rem;
  font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-danger.active { color: var(--red); border-bottom-color: var(--red); }
.settings-panel .tab-pane { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .settings-panel .tab-pane { animation: none } }

/* ===================== منتقي الرمز ===================== */
.emoji-field { display: flex; align-items: center; gap: 12px; }
.emoji-btn {
  width: 56px; height: 56px; flex: none; font-size: 1.7rem; line-height: 1;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; display: grid; place-items: center; transition: border-color .15s;
}
.emoji-btn:hover, .emoji-btn[aria-expanded="true"] { border-color: var(--accent); }
.emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px;
  margin-top: 10px; padding: 10px; max-height: 190px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
}
.emoji-grid button {
  background: none; border: 1px solid transparent; border-radius: 9px;
  font-size: 1.35rem; line-height: 1; padding: 8px 0; cursor: pointer;
}
.emoji-grid button:hover { background: var(--surface); border-color: var(--border); }
.emoji-grid button[aria-selected="true"] { border-color: var(--accent); background: var(--surface); }

/* صفوف المعاينة غير الأصول (محافظ · فئات · إعدادات) */
.import-row-extra { color: var(--text-dim); border-top: 1px dashed var(--border); }

/* ===================== الأيقونات الخطّية ===================== */
/*
 * الافتراض inline-block لا block: الأيقونة تُكتب داخل نصّ العنوان
 * (‎<span class="panel-title">◇ الاسم</span>‎)، وblock يجعلها تأخذ سطراً
 * وحدها فتظهر **فوق** العنوان لا بجانبه.
 */
.ico { display: inline-block; vertical-align: -3px; flex: none; }
.btn .ico { margin-inline-end: 6px; }
.panel-title .ico, .tab .ico { margin-inline-end: 7px; }
/* حيث تكون الأيقونة وحدها في وعاء شبكي، لا يضرّ inline-block */
.icon-btn { display: grid; place-items: center; }
.btn-icon-only .ico { margin: 0; }

/* زرّ الخروج: أحمر لأنه الفعل الوحيد في الشريط الذي يُنهي الجلسة */
.logout-btn {
  background: none; border: 1px solid transparent; border-radius: 10px;
  color: var(--red); padding: 8px; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.logout-btn:hover { background: rgba(224, 104, 126, .12); border-color: rgba(224, 104, 126, .3); }




/* ===================== تعديل القائمة الجانبية ===================== */
/* أدوات القائمة أسفلها — قريبة ممّا تعمل عليه */
.nav-tools { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

.nav-add {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 11px 12px;
  background: none; border: 1.5px dashed var(--border); border-radius: 10px;
  color: var(--text-dim); font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; text-align: start;
  transition: border-color .15s, color .15s, background .15s;
}
.nav-add:hover { border-color: var(--accent); color: var(--accent); background: rgba(127,127,127,.06); }
.nav-add .ico { flex: none; }
.nav-edit-toggle.on { border-style: solid; border-color: var(--accent); color: var(--accent); background: rgba(79,179,212,.10); }

/* مفتاح تبديل — أوضح من مربّع اختيار: الحالة تُقرأ من الشكل لا من علامة */
.nav-switch {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; background: none; border: 0; border-radius: 10px;
  color: var(--text-dim); font: inherit; font-size: .84rem; cursor: pointer; text-align: start;
}
.nav-switch:hover { background: rgba(127,127,127,.08); }
.sw-track {
  width: 34px; height: 20px; flex: none; border-radius: 999px;
  background: var(--border); position: relative; transition: background .18s;
}
.sw-knob {
  position: absolute; top: 2px; inset-inline-start: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim);
  transition: transform .18s, background .18s;
}
.nav-switch.on { color: var(--accent); }
.nav-switch.on .sw-track { background: var(--accent); }
.nav-switch.on .sw-knob { background: #fff; transform: translateX(-14px); }
html[dir="ltr"] .nav-switch.on .sw-knob { transform: translateX(14px); }

/* الصفّ في وضع التعديل */
.nav-item.editable { cursor: default; }
.nav-grip {
  display: grid; place-items: center; flex: none; margin-inline-end: 2px;
  color: var(--text-dim); cursor: grab; touch-action: none; opacity: .6;
  border-radius: 6px; padding: 2px;
}
.nav-grip:hover { opacity: 1; background: rgba(127,127,127,.14); }
.nav-grip:active { cursor: grabbing; }

.nav-item .nav-ico.tap,
.nav-item .nav-label.tap { cursor: pointer; border-radius: 6px; }
.nav-item .nav-ico.tap { padding: 2px 4px; }
.nav-item .nav-label.tap { padding: 2px 6px; }
.nav-item .nav-ico.tap:hover,
.nav-item .nav-label.tap:hover { background: rgba(127,127,127,.18); }

.nav-name-input {
  background: var(--surface); border: 1px solid var(--accent); border-radius: 7px;
  color: var(--text); font: inherit; font-size: .88rem; padding: 3px 8px;
  flex: 1 1 auto; min-width: 0;
}
.nav-hide-btn {
  background: none; border: 0; cursor: pointer; color: var(--text-dim);
  padding: 3px; margin-inline-start: auto; border-radius: 6px; display: grid; place-items: center;
}
.nav-hide-btn:hover { color: var(--text); background: rgba(127,127,127,.16); }
.nav-item.is-hidden { opacity: .45; }

/* السحب: الصفّ يتبع الإصبع وبقيّته تنزلق */
.nav-item.dragging {
  position: relative; z-index: 5; cursor: grabbing;
  background: var(--surface); box-shadow: 0 10px 26px -10px rgba(0,0,0,.55);
}
#mainNav.is-dragging .nav-item:not(.dragging) { transition: transform .16s ease; }
#mainNav.is-dragging { user-select: none; }

/* منتقي الرمز بجوار الصفّ لا في وسط الشاشة */
.nav-icon-pop { margin: 6px 0 8px; max-height: 168px; }

@media (prefers-reduced-motion: reduce) {
  #mainNav.is-dragging .nav-item:not(.dragging) { transition: none; }
  .sw-knob, .sw-track { transition: none; }
}

/* الصفحات الثابتة أسفل أدوات الفئات — فاصل يوضّح أنها كتلة أخرى */
.nav-fixed {
  display: grid; gap: 2px; flex: none;
  padding: 8px 12px; border-top: 1px solid var(--border);
}
.nav-fixed .nav-item { padding: 8px 14px; font-size: .9rem; }
.tab .ico { flex: none; }
.tab { display: inline-flex; align-items: center; gap: 7px; }


/* ===================== القوائم المنسدلة =====================
 * السهم الأصلي يختلف موضعه بين المتصفحات، وفي RTL يقع على اليسار فيصطدم
 * به النصّ الطويل فيبدو مقطوعاً. نرسم سهماً واحداً ونحجز له مساحة بحشوة
 * **منطقية** — فينقلب مع اتجاه الصفحة ولا يحتاج قاعدةً ثانية للإنجليزية.
 */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: left 12px center;
  padding-inline-end: 38px !important;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a7b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[dir="ltr"] select { background-position: right 12px center; }
select::-ms-expand { display: none; }
/* في النمط الفاتح يحتاج السهم لوناً أغمق ليُرى */
html[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* الخيارات نفسها: بعض المتصفحات ترثها من الصفحة فتصير غير مقروءة */
select option { background: var(--bg-2); color: var(--text); }

/* ===================== هيكل ثابت: التمرير داخل المحتوى لا على الصفحة =====
 * الشريط الجانبي والشريط العلوي يبقيان في مكانهما، ويتحرّك المحتوى وحده.
 * الصفحةُ كلّها لا تتمرّر، فلا يختفي التنقّل حين تُراجع قائمةً طويلة.
 *
 * أمّا الجداول: بياناتها تنمو بلا حدّ، فلا يصحّ أن يُوعَد بصفحةٍ لا تتمرّر
 * أبداً. الحلّ أن يتمرّر الجدول داخل لوحته فتبقى البطاقات والرسوم ظاهرة.
 * وهذا لا يُطبَّق على الجوال: هناك تمريرُ الصفحة هو المتوقَّع.
 */
@media (min-width: 861px) {
  html, body { height: 100%; overflow: hidden; }
  .app { height: 100vh; overflow: hidden; }
  .main { height: 100vh; overflow: hidden; }
  .topbar { flex: none; position: static; }
  #banners { flex: none; }
  .content {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  /* الجدول يتمرّر داخل لوحته، فتبقى ترويسته والبطاقات فوقها ثابتة */
  .table-wrap { max-height: min(58vh, 620px); overflow: auto; }
  .table-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
}

/* شريط تمرير رقيق يتبع الثيم — الافتراضي عريض ويكسر الإحساس بالثبات */
.content::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.content::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 999px;
}
.content::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}
.content::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: transparent; }

/* حقول نافذة السؤال المتعدّدة */
#askFields { display: grid; gap: 14px; }
#askFields .field small { margin-top: 2px; }

/* مفتاح المشاركة داخل تبويب المحافظ */
.pf-share-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}
.pf-share-row .nav-switch { width: auto; padding-inline: 0; }
.pf-share-row .nav-switch:hover { background: none; }

/* أدوات المحفظة أعلى التبويب */
.pf-tools { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 14px; }
.pf-tool { border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.pf-tool:hover { border-color: var(--accent); color: var(--accent); }
.pf-tool.on { border-color: var(--accent); color: var(--accent); background: rgba(79,179,212,.10); }
.pf-tool.danger { color: var(--red); }
.pf-tool.danger:hover { border-color: var(--red); background: rgba(224,104,126,.10); }

/* كتلة روابط المشاركة تحت المحافظ */
.share-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.share-head > span { font-weight: 700; font-size: .95rem; }
.share-block .share-row { margin-top: 10px; }


/* ===================== الجوال: البطاقات والرسوم =====================
 * بطاقتان في الصفّ بدل واحدة: الرقم الواحد لا يملأ عرض الشاشة، وصفٌّ
 * لكل بطاقة يدفع الرسمَ البياني خارج أول شاشة فلا يُرى إلا بتمرير.
 */
@media (max-width: 720px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 13px 14px; }
  .stat-label { font-size: .74rem; line-height: 1.35; }
  .stat-value { font-size: 1.25rem; margin-top: 4px; word-break: break-word; }
  .stat-sub { font-size: .72rem; }

  .charts-row { grid-template-columns: 1fr; gap: 14px; }
  .chart-box { height: 210px; }
  .panel { padding: 16px 14px; }
  .panel-title { font-size: .98rem; }
  .legend { font-size: .76rem; gap: 6px 12px; }
  .content { padding: 14px; }
}

/* العمود الواحد للشاشات الضيّقة جداً وحدها (أقل من 360px).
 * الآيفون المعتاد 390–430px، وإجباره على عمود يدفع الرسم البياني إلى
 * ما بعد 580px فلا يُرى إلا بتمرير — وهو أهمّ ما في اللوحة. */
@media (max-width: 359px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 1.4rem; }
}

/* ===================== قسم رابط العرض ===================== */
/* الرابط وأدواته في صفٍّ واحد: المرجع بيّن بلا عناوين تشرحه */
.share-block .share-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 10px 12px; margin-top: 10px;
}
.share-block .share-url { flex: 1 1 auto; min-width: 0; }
.share-block .icon-btn { flex: none; }
.share-switch { margin-top: 16px; width: auto; padding-inline: 0; }
.share-switch:hover { background: none; }

/* أزرار البيع والشراء في صفّ الأصل — نصٌّ لا أيقونة */
.btn-mini {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-dim); font: inherit; font-size: .78rem; font-weight: 700;
  padding: 4px 11px; cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.btn-mini.buy:hover { color: var(--green); border-color: var(--green); background: rgba(79,178,119,.10); }
.btn-mini.sell:hover { color: var(--amber); border-color: var(--amber); background: rgba(215,183,64,.10); }

/* مفتاح إخفاء الفئات الفارغة — فوق الفئات مباشرةً */
/* داخل أدوات التعديل: هامشُه من شبكة الأدوات، فلا يحتاج هامشاً خاصاً */
.nav-empty-switch { padding: 8px 12px; font-size: .8rem; }

/* إبراز الحقل المقصود بعد الانتقال إليه من نافذة */
.field-flash { animation: fieldFlash 1.5s ease; }
@keyframes fieldFlash {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .field-flash { animation: none; border-color: var(--accent); } }

/* ═══════════ لوحة البحث ═══════════
   تُثبَّت قرب أعلى الشاشة لا في وسطها: قائمة النتائج تطول وتقصر مع كل
   حرف، والتوسيط يجعلها ترقص تحت المؤشّر. */
.search-modal { align-items: start; padding-top: min(12vh, 90px); }
.search-modal .modal-card { max-width: 640px; overflow: hidden; }

.search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.search-bar-ico { color: var(--text-dim); display: inline-flex; flex: none; }
.search-bar input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 1.02rem; padding: 4px 0;
}
.search-bar input::-webkit-search-cancel-button { display: none; }

.search-results { max-height: min(60vh, 480px); overflow-y: auto; padding: 8px; }
.search-hint { padding: 26px 18px; text-align: center; font-size: .88rem; }

.search-hit {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: none; border: 0; border-radius: 11px; padding: 10px 12px;
  color: var(--text); font: inherit; cursor: pointer;
}
.search-hit:hover, .search-hit:focus-visible { background: var(--surface-2); outline: none; }
.search-hit-ico { font-size: 1.25rem; flex: none; line-height: 1; }
.search-hit-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.search-hit-main b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit-main .muted { font-size: .78rem; }
.search-hit-val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; flex: none; }

/* ═══════════ الملف الشخصي — عرضٌ للقراءة ═══════════ */
.profile-view .pv-body {
  display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap; padding-top: 4px;
}
.profile-view .pv-face { flex: none; }
.pv-rows { flex: 1; min-width: 240px; display: grid; gap: 2px; }
.pv-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.pv-row:last-child { border-bottom: 0; }
.pv-label { color: var(--text-dim); font-size: .85rem; flex: none; }
.pv-value { font-weight: 600; text-align: end; word-break: break-word; }

@media (max-width: 560px) {
  .profile-view .pv-body { gap: 18px; }
  .pv-rows { min-width: 0; width: 100%; }
}

/* مربّع اختيار داخل نافذة النموذج: الصندوق قبل التسمية لا فوقها */
.field-check { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.field-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.field-check > span { color: var(--text); font-size: .92rem; }

/* مجموعات المحافظ */
.pf-group-block { margin-top: 18px; border-top: 1px solid var(--border); }

/* ═══════════ أصولي شركاء ═══════════ */
.space-switch { margin-bottom: 10px; }
.space-switch label { color: var(--accent); }

/* الشريك يقرأ ولا يكتب: أدوات التعديل تُخفى عنه فلا يجرّبها ثم يُمنع.
   والحارس في الشيفرة هو الفعلي — هذا تهذيبٌ للواجهة لا حماية. */
body.px-readonly .row-actions,
body.px-readonly .btn-mini,
body.px-readonly #importBtn,
body.px-readonly .nav-tools,
body.px-readonly .pf-tools,
body.px-readonly [data-add],
body.px-readonly #addInSectionBtn { display: none !important; }

body.px-mode .sidebar-head::after {
  content: ""; display: block; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-top: 8px;
}

/* لافتة الدعوة في شاشة الدخول */
.invite-banner {
  display: flex; align-items: center; gap: 12px; text-align: start;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 18px;
}
.invite-banner .invite-ico { font-size: 1.5rem; flex: none; line-height: 1; }
.invite-banner b { display: block; font-size: .95rem; }
.invite-banner .muted { font-size: .82rem; }

/* ═══ شاشة الشركاء: الترويسة والصفوف ═══ */
.px-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.px-name { font-size: 1.12rem; font-weight: 700; }
.px-head-sub { font-size: .82rem; }

/* أدوات الصفّ: لا تتمدّد ولا تلتفّ */
td.row-tools { white-space: nowrap; width: 1%; }
td.row-tools .icon-btn { vertical-align: middle; }

/* ذيل الجدول: مجموع النسب والاستقطاع أسفل عموديهما */
tfoot .tfoot-row td {
  border-top: 2px solid var(--border); font-weight: 600;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

/* ═══ الدعوات المعلّقة: صفوفٌ لا جدول ═══
   البريد لاتيني في واجهة عربية؛ <bdi> يعزل اتجاهه ويُبقي محاذاته
   تابعةً للصفّ — وdir="ltr" كان يدفعه إلى الطرف المقابل فيبدو مُبعثراً. */
.inv-list { display: grid; gap: 8px; margin-top: 12px; }
.inv-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface-2);
}
.inv-row.is-expired { opacity: .55; }
.inv-ico { color: var(--text-dim); display: inline-flex; flex: none; }
.inv-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.inv-mail {
  font-weight: 700; font-size: .93rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-main .muted { font-size: .78rem; }
.inv-tools { display: flex; gap: 4px; flex: none; }

@media (max-width: 560px) {
  .inv-row { flex-wrap: wrap; }
  .inv-tools { width: 100%; justify-content: flex-end; }
}

/* ═══ الرسمان الدائريان متجاوران ═══
   يبقيان عمودين حتى على الجوال: كلاهما يجيب «كيف تتوزّع قيمتي؟»،
   والمقارنة بينهما لا تصحّ إن فصلهما تمريرُ شاشة. والحلّ للضيق تصغيرهما
   لا تكديسهما — والأسطورة تحتهما تنزل سطراً سطراً فتبقى مقروءة. */
.charts-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.charts-duo.solo { grid-template-columns: 1fr; }
/* عنصر الشبكة عرضه الأدنى محتواه، فسطرُ أسطورةٍ طويل يمنع الانكماش
   ويفيض الصفحة أفقياً. min-width:0 يجعل النصّ يُقصّ بدل أن يدفع. */
.charts-duo > * { min-width: 0; }

@media (max-width: 620px) {
  .charts-duo { gap: 10px; }
  .charts-duo .panel { padding: 12px 10px; }
  .charts-duo .chart-box { height: 168px; }
  .charts-duo .panel-title { font-size: .82rem; line-height: 1.3; }
  .charts-duo .legend { flex-direction: column; gap: 4px; font-size: .7rem; margin-top: 10px; }
  /* السطر يلتفّ ولا يُقصّ: ellipsis لا يعمل على حاوية flex، وقصُّ الرقم
     يُخفي المبلغ. والالتفاف يُطيل اللوحة قليلاً ولا يُفقد شيئاً. */
  .charts-duo .legend-item { flex-wrap: wrap; max-width: 100%; row-gap: 0; }
  .charts-duo .legend-dot { flex: none; }
  .charts-duo.solo .chart-box { height: 210px; }
  .charts-duo.solo .legend { flex-direction: row; }
}

/* ═══ تنبيه الخمول ═══ */
.idle-modal .modal-backdrop { background: rgba(0,0,0,.72); }
.idle-count {
  font-size: 2.6rem; font-weight: 800; text-align: center; margin: 6px 0 2px;
  font-variant-numeric: tabular-nums; color: var(--red);
}

/* ═══ حقل التاريخ في واجهة عربية ═══
   المتصفّح يفرض على input[type=date] اتجاهاً لاتينياً (وهو صحيح: التاريخ
   يُقرأ يوم/شهر/سنة من اليسار)، لكنه يُلصق المحتوى بالطرف المعاكس لبقيّة
   الحقول فيبدو خارجاً عن الصفّ. فيُحاذى إلى بداية الصفّ لا إلى بداية
   الحقل، وتنتقل أيقونة التقويم إلى الطرف الآخر فلا تزاحمه.

   وappearance:none يمنع iOS من فرض عرضٍ داخليّ أكبر من الحقل — وهو سبب
   خروجه عن الشاشة على الجوال — ولا يُلغي منتقي التاريخ الأصلي. */
.field input[type="date"] {
  min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
}
html[dir="rtl"] .field input[type="date"] { text-align: end; }
html[dir="rtl"] .field input[type="date"]::-webkit-calendar-picker-indicator {
  margin-inline-end: 0; margin-inline-start: auto; order: -1;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: inherit; }

/* ═══ منتقي السهم ═══ */
.cbx-wrap { position: relative; }
.cbx-pop {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; padding: 6px;
}
.cbx-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  background: none; border: 0; border-radius: 9px; padding: 8px 10px;
  color: var(--text); font: inherit; cursor: pointer;
}
.cbx-row:hover, .cbx-row.on { background: var(--surface-2); }
.cbx-sym {
  flex: none; min-width: 58px; font-weight: 700; font-size: .82rem;
  font-variant-numeric: tabular-nums; color: var(--accent); direction: ltr; text-align: start;
}
.cbx-name { display: grid; gap: 1px; min-width: 0; font-size: .88rem; }
.cbx-name .muted { font-size: .74rem; }

/* ملاحظة تحت الحقل — والرابط فيها يبدو رابطاً لا نصّاً */
.field-note { font-size: .76rem; line-height: 1.6; }
.field-note .link-btn { font-size: inherit; }

/* ═══ الدرج الجانبي على الجوال ═══
   يمرّر بكامله لا قسمُ الفئات وحده: على شاشةٍ قصيرة كانت الفئات تأخذ
   المساحة كلّها فتُدفع «الإعدادات» و«لوحة المشرف» خارج المرئي، ولا
   يمرّرها شيء. والآن يبقى الملف الشخصي ملتصقاً بالأسفل فلا يضيع. */
@media (max-width: 760px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; }
  .nav { flex: 0 0 auto; overflow-y: visible; }
  .nav-fixed { flex: 0 0 auto; }
  .sidebar-foot {
    position: sticky; bottom: 0; background: var(--bg-2);
    box-shadow: 0 -8px 16px -12px rgba(0,0,0,.5);
  }
  .sidebar-head { position: sticky; top: 0; z-index: 2; background: var(--bg-2); }
}