/* ============================================================
   Company Flow — التنسيق الكامل (عربي RTL)
   خط Cairo · لوحة زمردي/تيل (بدون أزرق/بنفسجي)
   ============================================================ */

:root {
  --c-primary: #059669;      /* زمردي 600 */
  --c-primary-dark: #047857;
  --c-teal: #0d9488;
  --c-bg: #f4f7f6;
  --c-card: #ffffff;
  --c-text: #12333e;
  --c-text-soft: #5b7480;
  --c-line: #d8e4e2;
  --c-danger: #dc2626;
  --c-amber: #b45309;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(18, 51, 62, .06);
  --shadow-lg: 0 10px 32px rgba(18, 51, 62, .14);
  --tree-gap: 44px;
  --tree-line: #b7c9c6;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 14px;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-family: inherit; font-size: 14px; }
svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============ شاشة الدخول ============ */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 15% 10%, #0b5f4a, #062e26 70%);
}
.login-card {
  width: 100%; max-width: 400px; background: #fff; border-radius: 20px;
  padding: 38px 34px; text-align: center; box-shadow: var(--shadow-lg);
}
.brand-mark {
  width: 62px; height: 62px; border-radius: 16px; margin: 0 auto 16px;
  background: linear-gradient(135deg, #10b981, #0d9488); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(5, 150, 105, .35);
}
.brand-mark svg { width: 30px; height: 30px; }
.brand-mark.small { width: 40px; height: 40px; border-radius: 11px; margin: 0; }
.brand-mark.small svg { width: 20px; height: 20px; }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 800; }
.login-card > p { color: var(--c-text-soft); margin: 6px 0 24px; font-size: 13px; }
.login-card form { display: grid; gap: 6px; text-align: right; }
.login-card label { font-size: 12.5px; font-weight: 700; color: var(--c-text-soft); margin-top: 8px; }
.login-card input {
  border: 1.5px solid var(--c-line); border-radius: 10px; padding: 12px 14px;
  background: #fafcfb; outline: none; transition: border-color .15s;
}
.login-card input:focus { border-color: var(--c-primary); }
.login-card small { display: block; margin-top: 14px; color: #93a8a3; font-size: 11px; }
.login-status { min-height: 20px; margin-top: 10px; font-size: 12px; display: none; }
.login-status.error {
  display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
  border-radius: 8px; padding: 9px 12px; line-height: 1.7;
}

/* ============ الأزرار ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 13px;
  transition: all .15s;
}
.btn.primary { background: var(--c-primary); color: #fff; box-shadow: 0 3px 8px rgba(5, 150, 105, .3); }
.btn.primary:hover { background: var(--c-primary-dark); }
.btn.primary:disabled { opacity: .6; cursor: not-allowed; }
.btn.ghost { background: #edf4f2; color: #33635a; }
.btn.ghost:hover { background: #e0ebe8; }
.btn.danger { background: var(--c-danger); color: #fff; }
.btn.danger:hover { background: #b91c1c; }
.btn.outline { border: 1.5px solid var(--c-line); background: #fff; color: var(--c-text); }
.btn.outline:hover { border-color: var(--c-teal); color: var(--c-teal); }
.btn.wide { width: 100%; padding: 13px; }
.btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn.icon { padding: 7px; border-radius: 8px; }
.btn.icon.edit { color: var(--c-teal); }
.btn.icon.edit:hover { background: #e6f4f2; }
.btn.icon.view { color: var(--c-text-soft); }
.btn.icon.view:hover { background: #eef4f2; color: var(--c-primary); }
.btn.icon.del { color: var(--c-danger); }
.btn.icon.del:hover { background: #fdeaea; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ============ هيكل التطبيق ============ */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 258px; background: #0d2b33; color: #a9c3bd; display: flex; flex-direction: column;
  gap: 14px; padding: 18px 12px; position: sticky; top: 0; height: 100vh;
}
.side-brand { display: flex; align-items: center; gap: 10px; color: #fff; padding: 0 8px; }
.side-brand b { display: block; font-size: 15px; }
.side-brand span { display: block; font-size: 10.5px; color: #7d9c95; }
.profile {
  display: flex; align-items: center; gap: 10px; background: #14323c;
  border-radius: 13px; padding: 12px;
}
.avatar {
  width: 38px; height: 38px; border-radius: 10px; background: var(--c-primary);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.profile b { display: block; font-size: 12.5px; color: #fff; }
.profile span { display: block; font-size: 10px; color: #7d9c95; margin-top: 2px; }
nav { display: grid; gap: 5px; }
.nav-btn {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 10px;
  color: #9db8b1; text-align: right; font-size: 13px; font-weight: 600; transition: all .15s;
}
.nav-btn:hover { background: #1a3d48; color: #fff; }
.nav-btn.active { background: #1f4a56; color: #fff; box-shadow: inset -3px 0 0 #10b981; }
.side-bottom { margin-top: auto; display: grid; gap: 4px; }
.side-bottom button {
  display: flex; align-items: center; gap: 9px; color: #8fada6; padding: 9px 13px;
  border-radius: 9px; font-size: 12px; text-align: right;
}
.side-bottom button:hover { background: #1a3d48; color: #fff; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: #fff; border-bottom: 1px solid var(--c-line); padding: 20px 30px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.crumb { color: #93a8a3; font-size: 11.5px; }
.crumb b { color: var(--c-teal); }
.topbar h2 { margin: 4px 0 0; font-size: 19px; font-weight: 800; }
.topbar-date { font-size: 12.5px; color: var(--c-text-soft); background: #eef5f3; padding: 7px 14px; border-radius: 9px; }
.content { padding: 22px 30px; flex: 1; }
.app-footer {
  margin-top: auto; text-align: center; padding: 14px; color: #93a8a3; font-size: 11px;
  border-top: 1px solid var(--c-line); background: #fff;
}

/* ============ [v4.3] شارة الإصدار — أسفل يمين الموقع دائمًا ============ */
.ver-badge {
  position: fixed; bottom: 7px; right: 9px; z-index: 90;
  direction: ltr; font-family: ui-monospace, 'Cascadia Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: #0d9488; background: rgba(13, 148, 136, .10);
  border: 1px solid rgba(13, 148, 136, .28); border-radius: 999px;
  padding: 2px 10px; pointer-events: none; user-select: none;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.ver-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #10b981; margin-left: 5px; vertical-align: 1px; }
@media print { .ver-badge { display: none; } }

/* ============ [v4.3] رمز العملة بجوار المبالغ ============ */
.cur-sym {
  font-size: .78em; font-weight: 700; color: var(--c-teal);
  background: rgba(13, 148, 136, .09); border: 1px solid rgba(13, 148, 136, .22);
  border-radius: 6px; padding: 1px 6px; white-space: nowrap; display: inline-block;
  vertical-align: 1px; line-height: 1.5;
}

/* ============ [v4.3] إدارة عملات الشركة (إعدادات سير العمل) ============ */
.cur-admin { display: grid; gap: 12px; margin: 10px 0 4px; }
.cur-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px; max-height: 264px; overflow-y: auto; padding: 10px;
  background: #f6faf9; border: 1px solid var(--c-line); border-radius: 12px;
}
.cur-chip {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
  cursor: pointer; font-size: 12px; transition: all .12s; user-select: none;
}
.cur-chip:hover { border-color: var(--c-teal); }
.cur-chip:has(input:checked) { border-color: var(--c-teal); background: #ecfdf5; box-shadow: inset 0 0 0 1px var(--c-teal); }
.cur-chip input { width: auto; accent-color: var(--c-teal); margin: 0; }
.cur-chip .cc-name { font-weight: 700; flex: 1; min-width: 0; }
.cur-chip .cc-code { font-family: ui-monospace, monospace; font-size: 10px; color: var(--c-text-soft); }
.cur-def-label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; }
@media (max-width: 640px) { .cur-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

/* ============ [v4.3] نتائج بحث مسؤول الوحدة ============ */
.uhead-results { display: grid; gap: 6px; margin-top: 2px; }
.uhead-results:empty { display: none; }
.uhead-results .job-row { background: #fff; }

/* ============ بطاقات الإحصاء ============ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 16px 18px; display: flex; justify-content: space-between; align-items: center;
  box-shadow: var(--shadow);
}
.stat-card .label { font-size: 11.5px; color: var(--c-text-soft); font-weight: 700; }
.stat-card strong { display: block; font-size: 25px; font-weight: 800; margin-top: 4px; }
.stat-ico {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
}
.stat-ico.green { background: #e6f7f0; color: #059669; }
.stat-ico.teal { background: #e0f2f0; color: #0d9488; }
.stat-ico.amber { background: #fef3e2; color: #b45309; }
.stat-ico.rose { background: #fdeaea; color: #dc2626; }
/* [v4.5.1] كان مفقودًا من لوحة القيادة (أيقونة الشواغر عند الصفر) */
.stat-ico.gray { background: #f0f4f3; color: #5b7480; }

/* ============ الشجرة التنظيمية المرئية ============ */
.tree-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 14px;
}
.tree-toolbar .group { display: flex; gap: 7px; align-items: center; }
.zoom-label { font-size: 11px; color: var(--c-text-soft); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }

.tree-viewport {
  border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff;
  background-image: radial-gradient(#e5eeec 1px, transparent 1px); background-size: 22px 22px;
  overflow: auto; padding: 26px 14px; min-height: 420px;
}
.tree-viewport::-webkit-scrollbar { height: 10px; width: 10px; }
.tree-viewport::-webkit-scrollbar-track { background: transparent; }
.tree-viewport::-webkit-scrollbar-thumb { background: #c3d4d0; border-radius: 8px; }

.orgtree, .orgtree ul {
  list-style: none; margin: 0; padding: 0; display: flex; justify-content: center;
  direction: rtl;
}
.orgtree ul { position: relative; padding-top: var(--tree-gap); }
.orgtree li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 5px; }

/* الخط الرأسي النازل من الأب حتى مستوى السكة */
.orgtree ul::before {
  content: ''; position: absolute; top: 0; left: calc(50% - 1px);
  width: 2px; height: calc(var(--tree-gap) / 2); background: var(--tree-line);
}
/* نصفا السكة الأفقية لكل ابن */
.orgtree li::before {
  content: ''; position: absolute; top: calc(-1 * var(--tree-gap) / 2);
  left: 50%; width: 50%; height: 2px; background: var(--tree-line);
}
.orgtree li::after {
  content: ''; position: absolute; top: calc(-1 * var(--tree-gap) / 2);
  right: 50%; width: 50%; height: 2px; background: var(--tree-line);
}
/* الخط الرأسي الصاعد من رأس البطاقة حتى السكة */
.orgtree .node { position: relative; }
.orgtree .node::before {
  content: ''; position: absolute; bottom: 100%; left: calc(50% - 1px);
  width: 2px; height: calc(var(--tree-gap) / 2); background: var(--tree-line);
}
/* إحداثيات left/right في CSS مطلقة بصريًا (لا تنعكس مع RTL):
   first-child = أقصى اليمين في RTL → نصفه الخارجي هو ::before (left:50%) → يُخفى
   last-child  = أقصى اليسار       → نصفه الخارجي هو ::after (right:50%) → يُخفى */
.orgtree li:first-child::before { display: none; }
.orgtree li:last-child::after { display: none; }
.orgtree li:only-child::before, .orgtree li:only-child::after { display: none; }
/* الجذر بلا خطوط */
.orgtree > li::before, .orgtree > li::after { display: none; }
.orgtree > li > .node::before { display: none; }
/* شجرة مطوية */
.orgtree li.collapsed > ul { display: none; }

/* بطاقة الوحدة */
.orgtree .node .unit-card {
  width: 216px; background: #fff; border: 2px solid var(--tree-line); border-radius: 13px;
  padding: 10px 11px 9px; cursor: pointer; position: relative; z-index: 1;
  transition: transform .15s, box-shadow .15s; box-shadow: var(--shadow);
}
.orgtree .node .unit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.unit-card[data-type="إدارة"] { border-color: #10b981; }
.unit-card[data-type="قسم"] { border-color: #14b8a6; }
.unit-card[data-type="وحدة"] { border-color: #f59e0b; }
.unit-card[data-type="منصب"] { border-color: #fb7185; }
.unit-card .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.unit-type {
  font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 20px;
  background: #f0f7f5; color: #476b63; border: 1px solid #d3e4e0;
}
.unit-card[data-type="إدارة"] .unit-type { background: #e6f7f0; color: #047857; border-color: #a7e3cd; }
.unit-card[data-type="قسم"] .unit-type { background: #e0f4f1; color: #0f766e; border-color: #a8ded8; }
.unit-card[data-type="وحدة"] .unit-type { background: #fef3e2; color: #b45309; border-color: #f3d9a8; }
.unit-card[data-type="منصب"] .unit-type { background: #fdeaea; color: #be123c; border-color: #f4b8c0; }
.unit-code { font-size: 10px; color: #93a8a3; font-family: ui-monospace, monospace; letter-spacing: .5px; }
.unit-name {
  font-size: 13.5px; font-weight: 800; text-align: center; min-height: 36px;
  display: flex; align-items: center; justify-content: center; padding: 0 2px; line-height: 1.4;
}
.unit-meta {
  display: flex; justify-content: center; gap: 14px; margin-top: 6px; padding-top: 7px;
  border-top: 1px dashed #e0eae7; font-size: 11px; color: var(--c-text-soft);
}
.unit-meta span { display: inline-flex; align-items: center; gap: 4px; }
.unit-meta svg { width: 12px; height: 12px; }

/* أزرار إدارة الوحدة (تظهر عند التحويم) */
.node-actions {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: none; gap: 2px; background: #fff; border: 1px solid var(--c-line);
  border-radius: 20px; padding: 3px 5px; box-shadow: var(--shadow-lg); z-index: 5;
}
.orgtree .node:hover .node-actions { display: flex; }
.node-actions button {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  color: #476b63; transition: background .12s;
}
.node-actions button svg { width: 12.5px; height: 12.5px; }
.node-actions button:hover { background: #edf4f2; }
.node-actions button.del:hover { background: #fdeaea; color: var(--c-danger); }
.node-actions button.add:hover { background: #e6f7f0; color: var(--c-primary); }

/* زر الطي/التوسيع */
.collapse-btn {
  position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); z-index: 5;
  min-width: 26px; height: 26px; border-radius: 20px; background: #fff;
  border: 2px solid var(--c-teal); color: var(--c-teal); font-size: 11px; font-weight: 800;
  display: grid; place-items: center; box-shadow: var(--shadow); padding: 0 7px;
}
.collapse-btn:hover { background: #e0f4f1; }

.tree-legend {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px;
  font-size: 11.5px; color: var(--c-text-soft);
}
.tree-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tree-legend .dot.d1 { background: #10b981; } .tree-legend .dot.d2 { background: #14b8a6; }
.tree-legend .dot.d3 { background: #f59e0b; } .tree-legend .dot.d4 { background: #fb7185; }
.tree-empty {
  text-align: center; padding: 70px 20px; color: var(--c-text-soft);
}
.tree-empty svg { width: 46px; height: 46px; opacity: .35; margin-bottom: 10px; }

/* ============ الجداول ============ */
.view-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.view-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.view-head p { margin: 3px 0 0; color: var(--c-text-soft); font-size: 12px; }
.search-box { position: relative; flex: 1; min-width: 210px; max-width: 340px; }
.search-box svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #93a8a3; }
.search-box input {
  width: 100%; border: 1.5px solid var(--c-line); border-radius: 10px; padding: 9px 36px 9px 12px;
  background: #fff; outline: none; transition: border-color .15s;
}
.search-box input:focus { border-color: var(--c-teal); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }

/* [v2.13.2] تلميح حد البحث (يبدأ من المحرف الثالث) — صفحة المشاريع */
.search-hint { margin: -8px 2px 10px; font-size: 12px; color: var(--c-text-soft); }

.table-wrap {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: auto; box-shadow: var(--shadow);
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: right; color: #7d938e; font-weight: 700; font-size: 11.5px;
  padding: 11px 12px; border-bottom: 1px solid var(--c-line); background: #f8fbfa; white-space: nowrap;
}
table.tbl td { padding: 11px 12px; border-bottom: 1px solid #eef4f2; vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: #f6faf9; }
table.tbl .empty-cell { text-align: center; color: #93a8a3; padding: 34px !important; }
.row-actions { display: flex; gap: 2px; justify-content: flex-start; }

.badge {
  display: inline-block; border-radius: 20px; padding: 3px 10px; font-size: 11px;
  font-weight: 700; white-space: nowrap;
}
.badge.gray { background: #f0f4f3; color: #5b7480; }
.badge.green { background: #e6f7f0; color: #047857; }
.badge.amber { background: #fef3e2; color: #b45309; }
.badge.rose { background: #fdeaea; color: #be123c; }
.badge.teal { background: #e0f4f1; color: #0f766e; }
/* [v4.5.1] كان مفقودًا من لوحة القيادة (بطاقة الشواغر) فسقطت إلى بلا لون */
.badge.blue { background: #e8f0fb; color: #1d4ed8; }
.badge.code { font-family: ui-monospace, monospace; direction: ltr; letter-spacing: .5px; }

/* ============ النوافذ المنبثقة ============ */
.modal-bg {
  position: fixed; inset: 0; background: rgba(13, 43, 51, .55); z-index: 50;
  display: grid; place-items: center; padding: 18px; animation: fadeIn .15s;
}
.modal {
  background: #fff; border-radius: 16px; padding: 24px; width: 100%; max-width: 580px;
  box-shadow: var(--shadow-lg); max-height: 92vh; overflow: auto; animation: slideUp .18s;
  position: relative; /* [v2.12.3] مرجع زر الإغلاق الموحد */
}
.modal.wide { max-width: 720px; }
.modal h3 { margin: 0 0 18px; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 30px; /* [v2.12.3] حماية السطر الأول من الاصطدام بزر الإغلاق في RTL */ }
.modal .form-grid { display: grid; gap: 13px; }
.modal label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: var(--c-text-soft); }
.modal input, .modal select, .modal textarea {
  border: 1.5px solid var(--c-line); border-radius: 9px; padding: 10px 12px;
  background: #fafcfb; outline: none; width: 100%; transition: border-color .15s;
}
.modal textarea { resize: vertical; min-height: 78px; line-height: 1.8; }
.modal .form-grid .span2 { grid-column: 1 / -1; }
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--c-primary); }
.modal .hint { font-size: 11px; color: #93a8a3; font-weight: 500; }
.modal-actions { display: flex; gap: 8px; margin-top: 20px; }
.modal select.ltr { direction: ltr; }

/* [v2.12.3] زر الإغلاق الموحد (X) لكل النوافذ المنبثقة — لا إغلاق إلا به:
   دبوس لاصق أعلى المحتوى يبقي الزر مرئيًا حتى عند تمرير النوافذ الطويلة
   (معايرة تجريبية: top:0 يجعل الدبوس يلتصق بموضعه الابتدائي نفسه مهما مُرّر) */
.x-pin { position: sticky; top: 0; height: 0; z-index: 6; }
.modal-x {
  position: absolute; top: -13px; left: -13px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--c-line); background: #fff;
  color: #94a8a3; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 43, 51, .14);
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.modal-x svg { width: 15px; height: 15px; }
.modal-x:hover { background: #fdeaea; border-color: #f2c4c9; color: #be123c; }
.modal-x:active { transform: scale(.92); }
.modal-x:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(14px); opacity: 0; } }

/* مربع تحذير */
.warn-box {
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 11px;
  padding: 12px 15px; font-size: 12.5px; line-height: 1.9; margin-bottom: 16px;
}

/* صفوف وظائف داخل نافذة الوحدة */
.job-row {
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--c-line);
  border-radius: 12px; padding: 11px 13px; background: #fff;
}
.job-row:hover { box-shadow: var(--shadow); }
.job-ico {
  width: 38px; height: 38px; border-radius: 10px; background: #e0f4f1; color: #0d9488;
  display: grid; place-items: center; flex-shrink: 0;
}
.job-info { flex: 1; min-width: 0; }
.job-info .t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.job-info .t b { font-size: 13.5px; }
.job-info .sub { font-size: 11.5px; color: var(--c-text-soft); margin-top: 3px; }
.job-info .sub .occupied { color: #047857; font-weight: 700; }
.job-info .sub .vacant { color: var(--c-amber); font-weight: 700; }
.job-row select {
  border: 1.5px solid var(--c-line); border-radius: 8px; padding: 7px 10px;
  font-size: 12px; max-width: 170px; background: #fafcfb; outline: none;
}
.job-list { display: grid; gap: 9px; max-height: 52vh; overflow: auto; padding-left: 4px; }
.job-list::-webkit-scrollbar { width: 8px; }
.job-list::-webkit-scrollbar-thumb { background: #c3d4d0; border-radius: 8px; }

/* ============ الإشعارات ============ */
.toast-host { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(420px, 92vw); }
.toast {
  border-radius: 11px; padding: 12px 16px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg); animation: slideUp .2s; background: #fff; color: var(--c-text);
  display: flex; align-items: center; gap: 9px; line-height: 1.6;
}
.toast.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.toast.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.toast svg { width: 17px; height: 17px; }

/* ============ متجاوب ============ */
/* [v4.10] الجوال: الشريط صار درجًا منزلقًا من اليمين (همبرغر في
   الترويسة + خلفية معتمة) بدل الشريط الأفقي المزدحم فوق المحتوى */
@media (max-width: 900px) {
  .shell { display: block; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 90;
    width: min(304px, 84vw); height: 100dvh; padding: 18px 14px; gap: 14px;
    transform: translateX(100%); transition: transform .26s ease;
  }
  body.nav-open .sidebar { transform: none; box-shadow: -18px 0 46px rgba(0,0,0,.4); }
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 85; background: rgba(3,18,24,.55);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav-toggle { display: grid; }
  .nav-rail-btn { display: none; }   /* لا معنى للطي داخل درج */
  .side-bottom { margin-top: 6px; }
  .content { padding: 16px; }
  .topbar { padding: 14px 16px; }
  .orgtree .node .unit-card { width: 172px; }
  .stat-card strong { font-size: 20px; }
}

/* ============ إضافات v2.0: أنواع ومواصفات ============ */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec-grid .full { grid-column: 1 / -1; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 0; font-size: 12.5px; }
.kv > div { padding: 7px 10px; border-bottom: 1px solid #eef4f2; }
.kv > div:nth-child(odd) { color: #7d938e; font-weight: 700; background: #f8fbfa; }
.kv > div:last-child { border-bottom: 0; }
.kv > div:nth-last-child(2) { border-bottom: 0; }
.view-head p small { color: #93a8a3; }
@media (max-width: 640px) { .spec-grid { grid-template-columns: 1fr; } }

/* ============ إضافات v2.1: تصفير قاعدة البيانات ============ */
/* زر أداة الخطر في الشريط الجانبي */
.side-bottom button.danger-tool { color: #fca5a5; }
.side-bottom button.danger-tool:hover { background: #3d1418; color: #fecaca; }

/* تقرير النافذة: ما سيُحذف وما سيبقى */
.wipe-report { border: 1px solid var(--c-line); border-radius: 12px; padding: 13px 15px; margin-bottom: 6px; background: #fff; }
.wipe-report h4 { font-size: 11.5px; color: #7d938e; margin: 0 0 8px; font-weight: 700; }
.wipe-report h4 + .wipe-tables { margin-bottom: 12px; }
.wipe-tables { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12px; line-height: 2; }
.wipe-tables .badge { font-size: 11px; }

/* حالة نصية ملونة داخل نافذة التصفير */
.reset-status { font-size: 12.5px; font-weight: 700; min-height: 20px; text-align: center; border-radius: 9px; padding: 9px 12px; }
.reset-status:empty { padding: 0; }
.reset-status.info { background: #eff6ff; color: #1d4ed8; }
.reset-status.ok { background: #ecfdf5; color: #047857; }
.reset-status.error { background: #fef2f2; color: #b91c1c; }

/* ============ إضافات v2.2: رسالة تأكيد قبل الحذف + رسالة إشعار بعده ============ */
/* المرحلة 2 — رسالة التأكيد قبل الحذف (صندوق خطر أحمر) */
.confirm-danger { text-align: center; border: 1px solid #fecaca; background: #fef2f2; border-radius: 12px; padding: 18px 16px 14px; }
.confirm-danger .confirm-icon { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: #fee2e2; color: #b91c1c; display: flex; align-items: center; justify-content: center; }
.confirm-danger .confirm-icon svg { width: 24px; height: 24px; }
.confirm-danger h4 { margin: 0 0 6px; font-size: 15px; color: #991b1b; }
.confirm-danger p { margin: 0 0 9px; font-size: 13px; color: #7f1d1d; line-height: 1.8; }
.confirm-summary { font-size: 12.5px; background: #fff; border: 1px dashed #fecaca; border-radius: 9px; padding: 9px 11px; color: #7f1d1d; line-height: 2; }
.confirm-danger .confirm-note { margin-top: 9px; font-weight: 700; font-size: 12.5px; }

/* المرحلة 3 — التنفيذ (دوران + قفل النافذة) */
.wipe-progress { text-align: center; padding: 26px 10px; }
.wipe-progress p { font-size: 13.5px; font-weight: 700; margin: 14px 0 10px; }
.spinner { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; border: 3px solid #e2e8e6; border-top-color: #be123c; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* المرحلة 4 — رسالة الإشعار بعد الحذف (صندوق نجاح أخضر) */
.wipe-done { text-align: center; border: 1px solid #a7f3d0; background: #ecfdf5; border-radius: 12px; padding: 18px 16px 14px; }
.wipe-done .done-icon { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: #d1fae5; color: #047857; display: flex; align-items: center; justify-content: center; }
.wipe-done .done-icon svg { width: 24px; height: 24px; }
.wipe-done h4 { margin: 0 0 6px; font-size: 15px; color: #065f46; }
.wipe-done p { margin: 0 0 10px; font-size: 13px; color: #065f46; line-height: 1.8; }
.wipe-done .hint { color: #047857; }

/* ============ إضافات v2.3: أنواع الوحدات الديناميكية ============ */
/* شريط الإشعار بالترقية داخل عرض الشجرة */
.upgrade-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #fffdf7; border: 1px solid #f3d9a8; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.upgrade-note b { color: #b45309; font-size: 13.5px; }
.upgrade-note p { margin: 3px 0 0; font-size: 12px; color: #92400e; line-height: 1.8; }

/* لوحة الترقية (شرح + تأكيد) — عرض «أنواع الوحدات» */
.upgrade-panel { text-align: center; border: 1px solid #f3d9a8; background: #fffdf7; border-radius: 12px; padding: 18px 16px 14px; }
.upgrade-panel h4 { margin: 0 0 6px; font-size: 15px; color: #92400e; }
.upgrade-panel p { margin: 0 0 9px; font-size: 13px; color: #92400e; line-height: 1.8; }
.upgrade-summary { font-size: 12.5px; background: #fff; border: 1px dashed #f3d9a8; border-radius: 9px; padding: 9px 11px; color: #92400e; line-height: 2; text-align: right; }
.confirm-icon.amber { background: #fef3e2; color: #b45309; }
.btn.amber { background: #b45309; color: #fff; }
.btn.amber:hover { background: #92400e; }
.spinner.amber { border-top-color: #b45309; }

/* ألوان الأنواع الإضافية في الشجرة (utx-*) — الأنواع الافتراضية الأربعة تحتفظ بألوانها أعلاه */
.unit-card.utx-0 { border-color: #6366f1; } .unit-card.utx-0 .unit-type { background: #eef0ff; color: #4338ca; border-color: #c7d2fe; }
.unit-card.utx-1 { border-color: #0ea5e9; } .unit-card.utx-1 .unit-type { background: #e8f6fd; color: #0369a1; border-color: #bae2f5; }
.unit-card.utx-2 { border-color: #84cc16; } .unit-card.utx-2 .unit-type { background: #f2f9e6; color: #4d7c0f; border-color: #dcf0b8; }
.unit-card.utx-3 { border-color: #a855f7; } .unit-card.utx-3 .unit-type { background: #faf2fe; color: #7e22ce; border-color: #e6d5fb; }
.unit-card.utx-4 { border-color: #2563eb; } .unit-card.utx-4 .unit-type { background: #eaf1fe; color: #1e40af; border-color: #c6d8f9; }
.unit-card.utx-5 { border-color: #78716c; } .unit-card.utx-5 .unit-type { background: #f5f5f4; color: #57534e; border-color: #e0dedb; }
.dot.dx0 { background: #6366f1; } .dot.dx1 { background: #0ea5e9; } .dot.dx2 { background: #84cc16; }
.dot.dx3 { background: #a855f7; } .dot.dx4 { background: #2563eb; } .dot.dx5 { background: #78716c; }

/* ============ إضافات v2.4: الوظائف المجردة بالكميات ============ */
/* سطر وصفي تحت عنوان النافذة */
.modal-sub { font-size: 12px; color: var(--c-text-soft); margin: -8px 0 14px; line-height: 1.9; }

/* تحرير الكمية داخل نافذة تفاصيل الوحدة */
.qty-edit { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.qty-edit input[type="number"] {
  width: 74px; padding: 7px 9px; border: 1.5px solid var(--c-line); border-radius: 9px;
  font-size: 13.5px; font-weight: 700; text-align: center; background: #fff;
}
.qty-edit input[type="number"]:focus { border-color: var(--c-primary); outline: none; }
/* Firefox: إخفاء أسهم الرقم */
.qty-edit input[type="number"]::-webkit-outer-spin-button,
.qty-edit input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-edit input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* الكمية للعرض فقط (غير المدير) */
.qty-ro { font-size: 14px; font-weight: 800; color: var(--c-teal); display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.qty-ro b { font-size: 17px; }

/* حقل الكمية في نافذة «إضافة وظائف للوحدة» */
.qty-field {
  display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; color: var(--c-text-soft);
}
.qty-field input[type="number"] {
  width: 84px; padding: 8px 9px; border: 1.5px solid var(--c-line); border-radius: 9px;
  font-size: 14px; font-weight: 800; text-align: center; background: #fff;
}
.qty-field input[type="number"]:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px rgba(5, 150, 105, .12); }
.qty-field input[type="number"]::-webkit-outer-spin-button,
.qty-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* قائمة الوظائف في نافذة الإسناد */
.assign-list { max-height: 48vh; }
.assign-row { align-items: center; }
.assign-row .job-info .t b { font-size: 13.5px; }

/* v2.4.5 — نافذة الإسناد بحثًا أولًا: البحث + النتائج + ترويسة القسم */
.aj-find { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.aj-find .aj-search { flex: 1; max-width: none; }
.aj-find .aj-search input { padding: 10px 36px 10px 12px; font-size: 13px; }
.aj-results { max-height: 30vh; margin-bottom: 4px; }
.aj-results .job-row { padding: 9px 12px; }
.sr-row { cursor: pointer; }
.sr-row .sr-add { flex-shrink: 0; }
.sr-row.attached { cursor: default; }
.aj-sec {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 12px 0 8px; font-size: 12px; font-weight: 800; color: var(--c-text-soft);
}
.aj-sec > span:first-child { display: flex; align-items: center; gap: 7px; }
.aj-sec svg { width: 14px; height: 14px; opacity: .7; }
.aj-hint {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1.5px dashed var(--c-line); border-radius: 12px; padding: 18px 14px;
  color: var(--c-text-soft); font-size: 12px; line-height: 1.8; background: #f8fbfa;
}
.aj-hint svg { width: 26px; height: 26px; opacity: .35; }
.aj-hint b { color: var(--c-teal); }
.aj-more { text-align: center; font-size: 11px; color: #93a8a3; margin: 8px 0 0; font-weight: 600; }
.assign-row .qty-edit { gap: 7px; }

/* [v2.12.5] منتقي مسؤول المشروع بحثًا أولًا (كنمط «إرفاق موظف بوظيفة»):
   شارة المسؤول المختار أعلى حقل البحث + قائمة نتائج مدمجة داخل النموذج
   (div بلا label كي لا تعيدّ النقرات غير التفاعلية توجيهها لأول زر
   قابل للتسمية داخلها — زر إزالة المسؤول — فتمسح الاختيار خطأً) */
.modal .form-grid .mgr-field {
  display: grid; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--c-text-soft);
}
.mgr-cur {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1.5px dashed var(--c-line); border-radius: 9px;
  padding: 5px 8px; background: #fafcfb; min-height: 44px;
}
.mgr-cur:empty { display: none; }
.mgr-none { display: inline-flex; align-items: center; gap: 7px; color: #93a8a3; font-size: 12.5px; font-weight: 600; }
.mgr-none svg { width: 16px; height: 16px; opacity: .55; }
.mgr-chip {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: #f0faf6; border: 1.5px solid #b9e2d6; border-radius: 999px;
  padding: 4px 8px; font-size: 13px; color: var(--c-primary);
}
.mgr-chip .emp-ico { width: 26px; height: 26px; border-radius: 999px; background: #dff3ec; }
.mgr-chip .emp-ico svg { width: 14px; height: 14px; }
.mgr-chip .mgr-clear { padding: 5px; }
.mgr-chip .mgr-clear svg { width: 13px; height: 13px; }
.mgr-results { max-height: 24vh; }

/* موظفو الوحدة داخل نافذة التفاصيل */
.unit-emp { border: 1px dashed var(--c-line); border-radius: 12px; padding: 11px 13px; margin-top: 14px; background: #f8fbfa; }
.unit-emp > b { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--c-text-soft); margin-bottom: 9px; }
.unit-emp > b svg { width: 14px; height: 14px; }
.emp-chip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--c-line);
  border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 600; margin: 0 0 6px 6px;
}
.emp-chip .badge { font-size: 10px; }

@media (max-width: 640px) {
  .qty-field input[type="number"] { width: 70px; }
  .job-row { flex-wrap: wrap; }
}

/* ============================================================
   v2.4.2 — بطاقة الموظف الكاملة + الإرفاق من الشجرة
   ============================================================ */

/* شبكة النموذج: عمودان صريحان في كل نوافذ الإدخال [v2.13.4]
   (كانت auto-fill/minmax(235px) لا تسع عمودين إلا في النوافذ الواسعة
   فتتراصف الحقول عموديًا — الآن عمودان دائمًا لاختزال الارتفاع)
   و span2 للحقول التي تستوجب العرض الكامل (ملاحظات/منتقي/مفردة) */
.modal .form-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .modal .form-grid { grid-template-columns: 1fr; } }

/* الحقول الإلزامية */
.req { color: var(--c-danger); font-weight: 800; }

/* عدّاد المحارف الحي (المعرف/كلمة المرور 3-9) */
.char-count { font-family: ui-monospace, monospace; font-size: 11.5px; direction: ltr; }

/* أيقونة موظف في قوائم الإرفاق */
.emp-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: #e0f4f1; color: var(--c-teal); display: grid; place-items: center;
}
.emp-ico svg { width: 18px; height: 18px; }

/* صف موظف مُرفق بالفعل */
.job-row.attached { background: #f0faf6; border-color: #b9e2d6; }

/* [v2.6] صف موظف موقوف في قوائم حاملي الدور */
.job-row.stt-off { opacity: .75; background: #fafafa; }

/* [v2.6] شارة الدور الرئيسي داخل الجداول */
.badge.rose svg { width: 12px; height: 12px; }

/* ============ بطاقة الموظف (نافذة العرض) ============ */
.emp-card { border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; }
.emp-card-head {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  background: linear-gradient(135deg, #f0faf6 0%, #e0f4f1 100%);
  border-bottom: 1px solid var(--c-line);
}
.avatar.big { width: 58px; height: 58px; border-radius: 16px; font-size: 24px; box-shadow: 0 4px 12px rgba(5, 150, 105, .25); }
.avatar.big svg { width: 27px; height: 27px; }
.emp-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.emp-field { padding: 13px 16px; border-bottom: 1px solid #eef4f2; }
.emp-field:nth-last-child(-n+2) { border-bottom: none; }
.emp-field span { display: block; font-size: 10.5px; color: #93a8a3; font-weight: 700; margin-bottom: 4px; }
.emp-field b { font-size: 13.5px; color: var(--c-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* زر الإرفاق داخل صف وظيفة الوحدة */
.qty-edit .btn svg { width: 15px; height: 15px; }

/* صفوف قائمة الإرفاق داخل نافذة الوحدة */
#attachList .job-row { padding: 9px 12px; }

/* ============ [v2.8] شريط الترقيم الصفحي ============ */
.pager {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 12px;
}
.pager-info { font-size: 12px; color: var(--c-text-soft); }
.pager-info b { color: var(--c-text); font-weight: 700; }
.pager-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 32px; height: 32px; padding: 0 9px;
  border: 1.5px solid var(--c-line); border-radius: 9px;
  background: #fff; color: var(--c-text); font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.pg-btn svg { width: 14px; height: 14px; }
.pg-btn:hover:not(:disabled) { border-color: var(--c-teal); color: var(--c-teal); background: #f2faf9; }
.pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.pg-btn.pg-num.active {
  background: var(--c-primary); border-color: var(--c-primary);
  color: #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, .3);
}
.pg-gap { color: #93a8a3; font-size: 13px; padding: 0 2px; user-select: none; }

.pg-size {
  height: 32px; border: 1.5px solid var(--c-line); border-radius: 9px;
  background: #fff; color: var(--c-text); font-size: 12px; font-weight: 700;
  padding: 0 8px; cursor: pointer; outline: none;
  margin-inline-start: 6px;
}
.pg-size:focus { border-color: var(--c-teal); }

@media (max-width: 640px) {
  .pager { justify-content: center; }
  .pg-btn span { display: none; }   /* على الضيق: الأزرار السابقة/التالية أيقونات فقط */
  .pg-btn { min-width: 36px; padding: 0 8px; }
}

/* ============================================================
   [v2.10] بطاقات المشاريع — لوحة شبكية + شريط زمني
   ============================================================ */

/* أدوات ترويسة العرض: مبدّل الوضع + زر الإضافة معًا */
.view-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* مبدّل بطاقات/جدول (Segmented) */
.seg {
  display: inline-flex; background: #fff; border: 1.5px solid var(--c-line);
  border-radius: 11px; padding: 3px; gap: 3px; box-shadow: var(--shadow);
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--c-text-soft);
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg-btn svg { width: 15px; height: 15px; }
.seg-btn:hover { color: var(--c-teal); background: #f2faf9; }
.seg-btn.active { background: var(--c-primary); color: #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, .3); }

/* لوحة البطاقات الشبكية */
.prj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(325px, 1fr)); gap: 14px; }

/* الكرت: شريط علوي ملون بحالة المشروع + رفع عند التحويم + دخول متدرج */
.prj-card {
  background: #fff; border: 1.5px solid var(--c-line); border-radius: 15px;
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  cursor: pointer; position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: prjCardIn .4s ease both;
}
@keyframes prjCardIn { from { opacity: 0; transform: translateY(12px); } }
.prj-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.prj-card:active { transform: translateY(-1px); }

.prj-accent { height: 4px; flex-shrink: 0; }
.prj-card.st-green .prj-accent { background: linear-gradient(270deg, #34d399, #059669); }
.prj-card.st-amber .prj-accent { background: linear-gradient(270deg, #fbbf24, #d97706); }
.prj-card.st-teal  .prj-accent { background: linear-gradient(270deg, #2dd4bf, #0d9488); }
.prj-card.st-rose  .prj-accent { background: linear-gradient(270deg, #fb7185, #be123c); }
.prj-card.st-gray  .prj-accent { background: linear-gradient(270deg, #cbd5e1, #94a3b8); }
.prj-card.st-green:hover { border-color: #6ee7b7; }
.prj-card.st-amber:hover { border-color: #fcd34d; }
.prj-card.st-teal:hover  { border-color: #5eead4; }
.prj-card.st-rose:hover  { border-color: #fda4af; }
.prj-card.st-gray:hover  { border-color: #cbd5e1; }

/* ترويسة الكرت: أيقونة الحالة + الاسم والشارات */
.prj-head { display: flex; gap: 12px; padding: 14px 16px 12px; align-items: flex-start; }
.prj-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
}
.prj-ico.green { background: #e6f7f0; color: #059669; }
.prj-ico.amber { background: #fef3e2; color: #b45309; }
.prj-ico.teal  { background: #e0f2f0; color: #0d9488; }
.prj-ico.rose  { background: #fdeaea; color: #dc2626; }
.prj-ico.gray  { background: #f0f4f3; color: #5b7480; }
.prj-ico svg { width: 20px; height: 20px; }
.prj-title { flex: 1; min-width: 0; }
.prj-title h4 {
  margin: 0 0 7px; font-size: 14.5px; font-weight: 800; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 43px; word-break: break-word;
}
.prj-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* التوصيف المصغّر: شبكة 2×2 بفواصل خفيفة */
.prj-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: #eef4f2; border-top: 1px solid #eef4f2; border-bottom: 1px solid #eef4f2;
}
.prj-meta .mf { background: #fff; padding: 9px 16px; min-width: 0; }
.prj-meta .mf span {
  display: flex; align-items: center; gap: 5px; font-size: 10px;
  color: #93a8a3; font-weight: 700; margin-bottom: 3px;
}
.prj-meta .mf span svg { width: 11px; height: 11px; flex-shrink: 0; }
.prj-meta .mf b {
  display: block; font-size: 12.5px; color: var(--c-text); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prj-meta .mf b.mgr { display: flex; align-items: center; gap: 7px; }
.mgr-av {
  width: 21px; height: 21px; border-radius: 50%; background: var(--c-teal); color: #fff;
  font-size: 11px; font-weight: 800; font-style: normal; display: inline-grid; place-items: center;
  flex-shrink: 0; box-shadow: 0 1px 3px rgba(13, 148, 136, .35);
}
.mgr-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- الشريط الزمني داخل الكرت (v2.11: مسار = مدة التنفيذ من البداية) ---- */
.prj-tl { padding: 12px 16px 4px; }
.tl-dates {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: var(--c-text-soft); font-weight: 600; margin-bottom: 9px;
}
.tl-dates b { color: #7d938e; font-weight: 800; margin-inline-end: 4px; }
.tl-dates .dd, .tl-dates .de { text-align: left; }

/* المسار الكلي: نافذة المدة + امتداد متقطع حتى علم التسليم */
.tl-track { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tl-bar {
  position: relative; flex: 1 1 auto; min-width: 40px; height: 9px; border-radius: 99px; background: #e8f0ee;
}
/* تعبئة التقدم = المنقضي من مدة التنفيذ (من البداية يمينًا نحو نهاية المدة) */
.tl-fill {
  position: absolute; top: 0; right: 0; height: 100%; border-radius: 99px;
  background: linear-gradient(270deg, #10b981, #0d9488);
  transition: width .5s ease; max-width: 100%;
}
.prj-tl.ph-late .tl-fill, .prj-tl.ph-overdue .tl-fill { background: linear-gradient(270deg, #f87171, #dc2626); }
/* انقضت المدة والتسليم لم يحن بعد: كهرماني (تحذير دون إنذار أحمر) */
.prj-tl.ph-over .tl-fill { background: linear-gradient(270deg, #fbbf24, #d97706); }
.prj-tl.ph-done .tl-fill { background: linear-gradient(270deg, #34d399, #059669); }
/* بدأ بلا مدة ولا تسليم: تعبئة مخططة متحركة (جارٍ بلا نهاية معلومة) */
.prj-tl.ph-open .tl-fill {
  background: repeating-linear-gradient(45deg, #14b8a6 0 8px, #b2ece5 8px 16px);
  animation: tlSlide 1.1s linear infinite;
}
@keyframes tlSlide { to { background-position: 22.63px 0; } }
/* مشروع لم يبدأ أو ملغى أو بلا تواريخ: مسار باهت */
.prj-tl.ph-pend .tl-fill, .prj-tl.ph-cancelled .tl-fill, .prj-tl.ph-none .tl-fill { background: transparent; }
.prj-tl.ph-none .tl-bar, .prj-tl.ph-cancelled .tl-bar {
  background: repeating-linear-gradient(90deg, #edf3f1 0 7px, #f6faf9 7px 14px);
}

/* الامتداد المتقطع من نهاية المدة حتى التسليم (ليس تقدمًا) */
.tl-ext {
  position: absolute; top: 0; left: 0; height: 100%;
  border-radius: 99px 0 0 99px;
  background: repeating-linear-gradient(90deg, #dbe7e3 0 6px, transparent 6px 12px);
}
/* علامة الضغط ≈ حين يُختصر الامتداد الطويل جدًا كي تبقى النافذة مرئية */
.tl-approx {
  flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #93a8a3;
  cursor: help; line-height: 1; padding-inline: 1px;
}

/* نقطتا البداية (يمين) ونهاية المدة (موضعها حصتها من المسار) */
.tl-dot {
  position: absolute; top: 50%; right: 0; transform: translate(50%, -50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 3px solid #cbd5e1; z-index: 2; box-sizing: border-box;
}
/* بدأ فعلاً → نقطة البداية ملوّنة تيل */
.prj-tl.ph-run .tl-dot.start, .prj-tl.ph-open .tl-dot.start,
.prj-tl.ph-late .tl-dot.start, .prj-tl.ph-over .tl-dot.start, .prj-tl.ph-done .tl-dot.start { border-color: var(--c-teal); }
/* انتهت المدة → نقطة النهاية خضراء · تجاوزتها → حمراء · انقضت دون تسليم → كهرمانية */
.prj-tl.ph-done .tl-dot.end { border-color: #059669; background: #059669; }
.prj-tl.ph-late .tl-dot.end, .prj-tl.ph-overdue .tl-dot.end { border-color: #dc2626; background: #dc2626; }
.prj-tl.ph-over .tl-dot.end { border-color: #d97706; background: #d97706; }

/* علامة «اليوم» — نقطة داكنة نابضة عند الموضع الحالي (أثناء التنفيذ فقط) */
.tl-today {
  position: absolute; top: 50%; transform: translate(50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #12333e; border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(18, 51, 62, .4); z-index: 3;
  animation: tlPulse 1.8s ease infinite;
}
@keyframes tlPulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(18, 51, 62, .4), 0 0 0 2px rgba(18, 51, 62, .22); }
  50%      { box-shadow: 0 1px 4px rgba(18, 51, 62, .4), 0 0 0 6px rgba(18, 51, 62, .07); }
}

/* علم التسليم — بعد نهاية المدة (أو تحذيري داخلها لبيانات قديمة) */
.tl-flag {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 2.5px 8px; border-radius: 8px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; cursor: help; line-height: 1.5;
  background: #eef6f4; color: #0f766e; border: 1px solid #cfe8e2;
}
.tl-flag svg { width: 10px; height: 10px; flex-shrink: 0; }
.tl-flag.up    { background: #eef6f4; color: #0f766e; border-color: #cfe8e2; }
.tl-flag.soon  { background: #fef3c7; color: #b45309; border-color: #fde68a; animation: tlFlagPulse 2s ease infinite; }
.tl-flag.today { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.tl-flag.past  { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.tl-flag.done  { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.tl-flag.warn  { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
@keyframes tlFlagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, .18); }
  50%      { box-shadow: 0 0 0 5px rgba(180, 83, 9, .05); }
}
/* العلم التحذيري داخل المسار (بيانات قديمة: تسليم قبل نهاية المدة) */
.tl-flag.in-bar {
  position: absolute; top: 50%; transform: translate(50%, -50%);
  padding: 2px; border-radius: 6px; z-index: 4;
}
.tl-flag.in-bar svg { width: 11px; height: 11px; }

/* سطر التفسير أسفل الشريط */
.tl-cap {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; line-height: 1.6;
}
.tl-cap svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .75; }
.tl-cap b { font-weight: 800; }
.tl-cap.run  { color: #0f766e; }
.tl-cap.hold { color: #b45309; }
.tl-cap.pend { color: #b45309; }
.tl-cap.over { color: #b45309; }
.tl-cap.late { color: #be123c; }
.tl-cap.done { color: #047857; }
.tl-cap.gray { color: #93a8a3; font-weight: 600; }

/* حقل المدة المنظّم في نافذة المشروع: رقم + وحدة جنبًا إلى جنب */
.dur-grid { display: grid; grid-template-columns: 1fr 105px; gap: 8px; }
.dur-grid input[type="number"] { min-width: 0; }

/* [v2.13.8] صف رمز المشروع: حقل الرمز + زر «رمز تلقائي» (اقتراح
   الرمز التالي بالتسلسل الأوسع PRJ-NNNN من الخادم) جنبًا إلى جنب */
.code-suggest { display: flex; gap: 8px; align-items: stretch; }
.code-suggest input { flex: 1; min-width: 0; }
.code-suggest .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .code-suggest { flex-direction: column; align-items: stretch; }
  .code-suggest .btn { width: 100%; }
}

/* ذيل الكرت: طلبات الشراء + الإجراءات */
.prj-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 16px 12px; border-top: 1px dashed #e0eae7; margin-top: auto;
}
.prj-reqs {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: var(--c-text-soft); font-weight: 600; min-width: 0;
}
.prj-reqs svg { width: 13px; height: 13px; flex-shrink: 0; }
.prj-reqs b { color: var(--c-text); font-weight: 800; }

/* حالة فراغ في وضع البطاقات */
.prj-empty {
  grid-column: 1 / -1; text-align: center; padding: 56px 20px;
  color: var(--c-text-soft); border: 1.5px dashed var(--c-line);
  border-radius: 14px; background: #fff;
}
.prj-empty svg { width: 44px; height: 44px; opacity: .3; margin-bottom: 10px; }
.prj-empty p { margin: 0; font-size: 13px; }

/* متجاوب: عمود واحد على الضيق + مبدّل أيقونات فقط */
@media (max-width: 640px) {
  .prj-grid { grid-template-columns: 1fr; }
  .seg-btn span { display: none; }
  .seg-btn { padding: 8px 11px; }
}

/* ============================================================
   v2.12 — طلبات الشراء وسلسلة الموافقة
   ============================================================ */

/* شارات أعداد على أزرار الشريط الجانبي (طلباتي/فريقي/مشاريعي/المالية) */
.nav-btn { position: relative; }
.nav-badge {
  position: absolute; inset-inline-start: 10px; top: 6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #334155; color: #cbd5e1;
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
  font-style: normal; display: none;
}
.nav-badge:not(:empty) { display: block; }
.nav-badge.hot { background: #dc2626; color: #fff; box-shadow: 0 0 0 2px #16323c; }

/* خلية المرحلة في جداول الطلبات */
.stage-cell { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stage-cell b { font-size: 12.5px; }

/* رأس بطاقة الطلب */
.pr-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* شبكة معلومات الطلب (بطاقة العرض) */
.pr-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; background: #f7fbfa; border: 1px solid var(--c-line);
  border-radius: 12px; padding: 14px; margin: 12px 0;
}
.pr-info > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-info span {
  font-size: 11px; color: var(--c-text-soft); font-weight: 700;
  display: flex; align-items: center; gap: 5px;
}
.pr-info span svg { width: 12px; height: 12px; }
.pr-info b { font-size: 13px; word-break: break-word; }

/* ملاحظات الطلب */
.pr-notes {
  background: #fffdf4; border: 1px solid #f2e3ae; border-radius: 10px;
  padding: 10px 14px; margin: 0 0 12px; font-size: 12.5px;
}
.pr-notes b { display: flex; align-items: center; gap: 6px; color: #92600a; font-size: 12px; }
.pr-notes b svg { width: 13px; height: 13px; }
.pr-notes p { margin: 6px 0 0; white-space: pre-wrap; color: var(--c-text); }

/* عناوين أقسام بطاقة الطلب */
.pr-section {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--c-line);
}
.pr-section b { font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.pr-section b svg { width: 14px; height: 14px; color: var(--c-teal); }
.pr-section .hint { margin: 0; }

/* بطاقات مواد الطلب */
.pr-items { display: grid; gap: 10px; }
.pr-item {
  background: #fff; border: 1.5px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; transition: border-color .15s;
}
.pr-item:hover { border-color: #b9d4ce; }
.pr-item.rejected { background: #fff8f8; border-color: #f3c8c8; }
.pi-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pi-head b { font-size: 13.5px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.pi-head b svg { width: 15px; height: 15px; color: var(--c-teal); flex-shrink: 0; }
.pi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 14px; margin-top: 10px;
}
.pi-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pi-grid span { font-size: 10.5px; color: var(--c-text-soft); font-weight: 700; }
.pi-grid b { font-size: 12.5px; word-break: break-word; }
.pi-notes {
  margin-top: 9px; font-size: 11.5px; color: var(--c-text-soft);
  display: flex; align-items: flex-start; gap: 6px;
  background: #f6faf9; border-radius: 8px; padding: 7px 10px;
}
.pi-notes svg { width: 11px; height: 11px; flex-shrink: 0; margin-top: 2px; }

/* سلسلة الموافقة العمودية */
.chain { display: flex; flex-direction: column; }
.chain-start {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--c-text-soft); padding: 0 8px 10px 0;
}
.chain-start svg { width: 14px; height: 14px; }
.chain-start b { color: var(--c-text); }
.chain-step {
  display: flex; align-items: center; gap: 12px; position: relative;
  padding: 10px 12px; border-inline-start: 2px solid var(--c-line);
  border-radius: 0 12px 12px 0; background: #fbfdfd; margin-bottom: 6px;
}
.chain-step .cs-dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #eef2f1; color: #93a8a3; border: 2px solid #d8e4e2;
}
.chain-step .cs-dot svg { width: 14px; height: 14px; }
.chain-step .cs-body { flex: 1; min-width: 0; }
.chain-step .cs-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chain-step .cs-head b { font-size: 13px; }
.chain-step .cs-sub { font-size: 11.5px; color: var(--c-text-soft); margin-top: 3px; }
.chain-step .cs-ord {
  font-size: 11px; font-weight: 800; color: #93a8a3; flex-shrink: 0;
  min-width: 22px; text-align: center;
}
.chain-step .cs-ord svg { width: 14px; height: 14px; }
.chain-step.done { background: #f2faf6; border-inline-start-color: #059669; }
.chain-step.done .cs-dot { background: #d9f2e5; color: #047857; border-color: #a7e3c4; }
.chain-step.current {
  background: #fffaf0; border-inline-start-color: #d97706;
  box-shadow: 0 0 0 1.5px #f7d9a0 inset;
}
.chain-step.current .cs-dot { background: #fef3e2; color: #b45309; border-color: #f0c98a; }
.chain-step.finance { background: #f0f8f7; border-inline-start-color: #0d9488; }
.chain-step.finance.done { background: #e6f7f5; border-inline-start-color: #0d9488; }
.chain-step.finance .cs-dot { background: #d9f0ee; color: #0f766e; border-color: #a5ded9; }

/* سجل الأحداث */
.ev-log { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; padding-inline-end: 4px; }
.ev-row {
  display: flex; align-items: flex-start; gap: 10px; font-size: 12px;
  padding: 8px 10px; background: #fbfdfd; border: 1px solid #e4edea; border-radius: 10px;
}
.ev-row .badge { flex-shrink: 0; min-width: 96px; text-align: center; }
.ev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-body b { font-size: 12px; }
.ev-body span { color: var(--c-text-soft); word-break: break-word; }
.ev-time { flex-shrink: 0; color: #93a8a3; font-size: 10.5px; white-space: nowrap; margin-top: 2px; }

/* بانى المواد في نافذة الطلب الجديد */
.mat-builder {
  border: 1.5px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; margin-top: 14px; background: #fcfefe;
}
.mat-builder-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.mat-builder-head b { font-size: 13px; display: flex; align-items: center; gap: 7px; }
.mat-builder-head b svg { width: 14px; height: 14px; color: var(--c-teal); }
.mat-builder-head .req { margin-inline-start: 2px; }
#nrMatList { display: grid; gap: 10px; }
.mat-card {
  border: 1.5px solid var(--c-line); border-radius: 11px; padding: 10px 12px; background: #fff;
}
.mat-card:focus-within { border-color: var(--c-teal); }
.mat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mat-head b { font-size: 12px; color: var(--c-teal); display: flex; align-items: center; gap: 6px; }
.mat-head b svg { width: 13px; height: 13px; }
.mat-grid { margin: 0; }
.mat-grid input { font-size: 12.5px; }

/* رقائق مشاريعي (اختيار المشروع الذي أديره) */
.prj-mini-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.prj-mini {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1.5px solid var(--c-line); background: #fff; border-radius: 11px;
  padding: 8px 13px; font-size: 12.5px; cursor: pointer; transition: all .15s;
  text-align: right;
}
.prj-mini:hover { border-color: var(--c-teal); }
.prj-mini.active {
  border-color: var(--c-primary); background: #f0faf5;
  box-shadow: 0 0 0 1px var(--c-primary);
}
.prj-mini b { font-size: 12.5px; }
.prj-mini .badge { font-size: 10.5px; }

/* شريط معلومات المشروع المحدد في تبويبة مشاريعي */
.pm-prj-info {
  display: flex; align-items: flex-start; gap: 10px; background: #f7fbfa;
  border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.pm-prj-info > svg { width: 18px; height: 18px; color: var(--c-teal); flex-shrink: 0; margin-top: 3px; }
.pm-prj-info b { font-size: 13.5px; }
.pm-prj-info .badge { margin-inline-start: 4px; }

/* اسم مسؤول الوحدة على بطاقة الشجرة */
.unit-head-name {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #0f766e; font-weight: 700;
  background: #e8f4f1; border-radius: 7px; padding: 2.5px 8px;
  margin: 4px 0 2px; width: fit-content; max-width: 100%;
}
.unit-head-name svg { width: 10px; height: 10px; flex-shrink: 0; }
.unit-head-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* متجاوب: بطاقات أضيق */
@media (max-width: 640px) {
  .pr-info { grid-template-columns: 1fr 1fr; }
  .pi-grid { grid-template-columns: 1fr 1fr; }
  .mat-grid { grid-template-columns: 1fr !important; }
  .ev-row { flex-wrap: wrap; }
  .ev-time { margin-inline-start: auto; }
  .prj-mini { width: 100%; }
}

/* ============================================================
   v2.12.2 — معاينة سلسلة الموافقة ولافتة طلبات فريقي
   ============================================================ */

/* معاينة المسار داخل نافذة الطلب الجديد */
.pr-chain-preview {
  background: #f7fbfa; border: 1px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; margin: 0 0 14px; font-size: 13px; line-height: 1.9;
}
.pr-chain-preview b { font-size: 13px; }
.chain-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.chain-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #ffffff; border: 1px solid var(--c-line); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 700; color: var(--c-text);
}
.chain-chip small { font-weight: 600; font-size: 10px; color: var(--c-text-soft); }
.chain-chip.auto { border-color: #b5d8d0; background: #e8f4f1; }
.chain-chip.auto small { color: #0f766e; }
.chain-chip.finance { background: #ecfdf5; border-color: #a7e3c8; color: #065f46; }
.chain-chip svg { width: 13px; height: 13px; }
.chain-arrow { color: var(--c-text-soft); font-weight: 700; font-size: 12px; }

/* لافتة إرشادية في «طلبات فريقي» عند وجود طلبات خارج خطوتي */
.pr-hint {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
  padding: 11px 14px; margin-bottom: 14px;
  font-size: 12.5px; line-height: 1.9; color: #78350f;
}
.pr-hint svg { width: 16px; height: 16px; color: var(--c-amber); flex-shrink: 0; margin-top: 4px; }
.pr-hint[hidden] { display: none; }

/* [v2.12.3] قسم «رقابة إدارية» المطوي للمدير العام في «طلبات فريقي» */
.pr-oversight {
  margin-top: 18px; border: 1px dashed #c8d6d2; border-radius: 12px;
  padding: 10px; background: #f7faf9;
}
.pr-oversight #ovBody { margin-top: 10px; }
.pr-oversight .btn.ghost { font-size: 12.5px; }
.pr-oversight .hint { font-size: 12px; }

@media (max-width: 640px) {
  .chain-chips { gap: 4px; }
  .chain-chip { padding: 3px 9px; font-size: 11.5px; }
}

/* ============================================================
   [v2.13.6] المشاريع السرية — شارة «سري» + خيار السرية في نافذة
   المشروع + قائمة الموظفين المصرح لهم بالاطلاع (بحث + تمرير)
   ============================================================ */
.badge.secret { background: #eef0fb; color: #4338ca; }
.badge.secret svg { width: 12px; height: 12px; }

/* سطر خيار «مشروع سري» داخل النموذج — صف كامل مميز بإطار متقطع */
.secret-line {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; margin-top: 2px;
  border: 1px dashed #c7d2fe; border-radius: 10px;
  background: #f8faff;
}
.secret-line .hint { margin: 0; }
.check-line {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: 700; font-size: 13px;
}
.check-line input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.check-line svg { width: 15px; height: 15px; color: #4338ca; }

/* ============================================================
   [v2.13.7] إدارة المصرح لهم من كرت المشروع السري — زر بنفسجي على
   الكرت (وفي صف الجدول وبطاقة التوصيف) + نافذة البحث والوسوم:
   بحث من حرفين + إضافة متكررة + وسوم قابلة للإزالة بزر X
   ============================================================ */
.btn.icon.acc { color: #4338ca; }
.btn.icon.acc:hover { background: #eef0fb; }

/* وسوم المصرح لهم داخل نافذة الإدارة */
.acc-tags {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1.5px dashed var(--c-line); border-radius: 9px;
  padding: 6px 9px; background: #fafcff; min-height: 46px;
}
.acc-tag {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: #f4f5fe; border: 1.5px solid #c7d2fe; border-radius: 999px;
  padding: 4px 8px; font-size: 13px; color: #4338ca;
}
.acc-tag .emp-ico { width: 26px; height: 26px; border-radius: 999px; background: #e4e7fd; color: #4338ca; }
.acc-tag .emp-ico svg { width: 14px; height: 14px; }
.acc-tag b { font-weight: 700; }
.acc-tag .acc-clear { padding: 5px; }
.acc-tag .acc-clear svg { width: 13px; height: 13px; }

/* ============================================================
   [v2.14.0] الصرف النقدي · المشتريات · المستودع
   ============================================================ */

/* ملاحظة إرشادية عامة (تحذير/تأكيد) في تبويبات الصرف */
.cw-note {
  display: flex; align-items: center; gap: 10px;
  background: #fef3e2; border: 1.5px solid #f5d9a8; border-radius: 10px;
  color: #92400e; padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.cw-note svg { width: 20px; height: 20px; flex-shrink: 0; }
.cw-note.ok { background: #e6f7f0; border-color: #a7e3c8; color: #047857; }

/* رأس قائمة اختيار الطلبات في نافذة إنشاء الوصل */
.cw-picks-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; font-size: 13.5px;
}
.cw-picks {
  border: 1.5px solid var(--c-line); border-radius: 10px;
  max-height: 300px; overflow-y: auto; background: #fff;
}
.cw-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px dashed #e4ede9;
}
.cw-pick:last-child { border-bottom: 0; }
.cw-pick-check input { width: 17px; height: 17px; cursor: pointer; }
.cw-pick-info { flex: 1; min-width: 0; }
.cw-pick-info .t { font-size: 13px; }
.cw-pick-amt input {
  width: 130px; text-align: left; direction: ltr;
  font-family: ui-monospace, monospace;
}
.cw-pick-amt input:disabled { background: #f4f7f6; color: #b6c4c0; }

/* الإجمالي الحي أسفل القائمة */
.cw-total {
  display: flex; align-items: center; justify-content: space-between;
  background: #e6f2ef; border: 1.5px solid #b5dcD3; border-radius: 10px;
  padding: 10px 14px; font-size: 14px; margin-top: 10px; color: #0f5c50;
}
.cw-total b { font-size: 16px; }

/* بطاقة وصل بانتظار الاستلام (مشترياتي) */
.cw-vcard {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1.5px solid var(--c-line); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 10px; background: #fff;
  flex-wrap: wrap;
}
.cw-vcard .v-main { min-width: 240px; flex: 1; }
.cw-vcard .v-no { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cw-vcard .v-amount b { font-size: 19px; color: #0f5c50; }
.cw-vcard .v-amount span { display: block; font-size: 11.5px; color: var(--c-text-soft); margin-top: 2px; }
.cw-vcard .v-reqs { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.cw-vcard .v-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* صندوق الحسابات (التسوية) في ملف الوصل ونافذة الإدخال */
.cw-settle {
  border: 1.5px solid var(--c-line); border-radius: 12px;
  background: #fbfdfc; padding: 6px 14px; margin: 14px 0 4px;
}
.cw-settle .row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed #e0eae6; font-size: 13.5px;
}
.cw-settle .row:last-child { border-bottom: 0; }
.cw-settle .row b { font-size: 15px; }
.cw-settle .row.ok b { color: #047857; }
.cw-settle .row.bad b { color: #be123c; }
.cw-settle .row.notes b { font-size: 12.5px; text-align: left; max-width: 60%; }
.cw-settle.closed { border-color: #a7e3c8; background: #f4fbf8; }

/* صفوف مواد نافذة إدخال المستودع */
.cw-witems {
  border: 1.5px solid var(--c-line); border-radius: 10px;
  max-height: 330px; overflow-y: auto; background: #fff;
}
.cw-witem {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px dashed #e4ede9;
}
.cw-witem:last-child { border-bottom: 0; }
.cw-witem.done { background: #f6fbf8; }
.cw-witem .wi-name { flex: 1; min-width: 0; }
.cw-witem .wi-name b { font-size: 13.5px; }
.cw-witem .wi-name .sub { font-size: 11.5px; color: var(--c-text-soft); margin-top: 3px; }
.cw-witem .wi-in { display: flex; gap: 8px; flex-shrink: 0; }
.cw-witem .wi-in input {
  width: 118px; text-align: left; direction: ltr;
  font-family: ui-monospace, monospace;
}
.cw-witem .wi-in input::placeholder { font-size: 10.5px; }

/* شارة المستلم المختار في نافذة الوصل */
.cw-buyer-chip { margin-bottom: 8px; }

/* [v2.14.0] شارة دور مسؤول المشتريات (بنفسجية كشارة السرية) */
.badge.violet { background: #eef0fb; color: #4338ca; }
.badge.violet svg { width: 12px; height: 12px; }

/* ============================================================
   [v2.14.1] باركود الوصل · الاستلام بالمسح · إصدار الوصل
   ============================================================ */

/* بطاقة الباركود: نافذة الإصدار + ملف الوصل */
.cw-barcode, .cw-barcode-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--c-line); border-radius: 12px;
  padding: 14px 16px; margin: 12px 0;
}
/* [v2.14.3] width:100% (لا max-width فقط!) — القاعدة العامة svg{width:18px}
   كانت تسحق باركود الوصل إلى 18×3px لأن max-width لا تلغي العرض المفروض؛
   هنا نتجاوزها صراحة فيمتلئ الباركود عرض البطاقة ويتمدد ارتفاعه نسبيًا */
.cw-barcard-svg svg, .cw-barcode svg, .cw-barcode-card svg {
  width: 100%; height: auto; display: block;
}
.cw-barcode-card .t {
  font-size: 12.5px; color: var(--c-text-soft); text-align: center;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.cw-barcode-card .t svg { width: 16px; height: 16px; }
.cw-bc-fallback {
  font-family: ui-monospace, monospace; font-size: 18px; letter-spacing: 2px;
  padding: 10px 18px; border: 1.5px dashed #cfdad6; border-radius: 8px;
}

/* مرحلة إصدار الوصل في نافذة الإنشاء */
.cw-issued { display: flex; flex-direction: column; gap: 4px; }
.cw-issued-ok {
  display: flex; align-items: flex-start; gap: 10px;
  background: #e6f7f0; border: 1.5px solid #a7e3c8; border-radius: 10px;
  color: #047857; padding: 10px 14px; font-size: 13.5px; margin-bottom: 6px;
}
.cw-issued-ok svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.cw-issued-ok span { display: block; font-size: 12px; color: #047857; margin-top: 3px; }

/* بانتظار قراءة الباركود (نبض) */
.cw-wait {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fef3e2; border: 1.5px solid #f5d9a8; border-radius: 10px;
  color: #92400e; padding: 12px 14px; margin-top: 10px;
}
.cw-wait svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; animation: cwPulse 1.6s ease-in-out infinite; }
.cw-wait span { display: block; font-size: 12px; color: #92400e; margin-top: 2px; }
@keyframes cwPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.92); }
}

/* سُجّلت القراءة — كشف زر الحفظ والطباعة */
.cw-received {
  display: flex; align-items: flex-start; gap: 10px;
  background: #e6f7f0; border: 1.5px solid #a7e3c8; border-radius: 10px;
  color: #047857; padding: 12px 14px; margin-top: 10px;
}
.cw-received svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.cw-received span { display: block; font-size: 12px; color: #047857; margin-top: 2px; }

/* صندوق المسح: الكاميرا + الحالة */
.cw-scanbox {
  border: 1.5px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; margin-top: 12px; background: #fbfdfc;
}
.cw-scan-video { margin-bottom: 10px; }
.cw-scan-video video { width: 100%; max-height: 320px; object-fit: contain; }
.cw-scan-actions { display: flex; justify-content: center; }
.cw-scan-status:empty { display: none; }
.cw-scan-status .cw-note { margin: 10px 0 0; }
.cw-scan-live {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #0f766e; font-size: 13px; margin-top: 10px;
}
.cw-scan-live svg { width: 18px; height: 18px; animation: cwPulse 1.6s ease-in-out infinite; }

/* الإدخال اليدوي لرقم الوصل */
.cw-manual { margin-top: 12px; }
.cw-manual-row { display: flex; gap: 8px; margin-top: 8px; }
.cw-manual-row input {
  flex: 1; text-align: left; direction: ltr;
  font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: 1px;
}
.cw-manual-row .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .cw-manual-row { flex-direction: column; }
}

/* ============================================================
   v2.14.2 — تصفير طلبات المشروع (أداة اختبار للمدير العام)
   ============================================================ */

/* زر التصفير في كرت المشروع وصف الجدول: تحذيري كهرماني —
   يميزه عن «حذف المشروع» الأحمر وعن أزرار العرض/التعديل */
.btn.icon.warn { color: var(--c-amber); }
.btn.icon.warn:hover { background: #fef3e2; }

/* ============================================================
   v2.14.4 — الفلترة المتقدمة في «طلباتي»
   شرائح تاريخ سريعة بعدادات حية · قوائم أشخاص/مشاريع بعدادات ·
   لوحة مدى مخصص · شرائح فلاتر نشطة قابلة للإزالة · تنسيق
   موحّد للقوائم المنسدلة في شريط الفلاتر (كل التبويبات)
   ============================================================ */

/* القوائم المنسدلة في شريط الفلاتر — نفس هوية حقول البحث
   (ترقية عامة لكل تبويبات التطبيق: طلباتي · فريقي · المالية…) */
.filters select {
  border: 1.5px solid var(--c-line); border-radius: 10px;
  padding: 8px 12px; background: #fff; color: var(--c-text);
  cursor: pointer; min-width: 158px; max-width: 340px;
  transition: border-color .15s, box-shadow .15s;
}
.filters select:hover { border-color: #b7ccc7; }
.filters select:focus { border-color: var(--c-teal); outline: none; }

/* صف أدوات الفلترة (شرائح التاريخ) */
.qf-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 12px; }
.qf-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: #7d938e; white-space: nowrap;
}
.qf-label svg { width: 14px; height: 14px; }

/* شرائح التاريخ: حاوية بنمط seg + شريحة بعدّاد حي */
.qf-chips {
  display: inline-flex; flex-wrap: wrap; gap: 3px;
  background: #fff; border: 1.5px solid var(--c-line); border-radius: 11px;
  padding: 3px; box-shadow: var(--shadow);
}
.qf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 8px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--c-text-soft);
  transition: background .15s, color .15s, box-shadow .15s;
}
.qf-chip:hover { color: var(--c-teal); background: #f2faf9; }
.qf-chip:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 1px; }
.qf-chip.active { background: var(--c-primary); color: #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, .3); }
.qf-chip.active:hover { background: #047857; color: #fff; }
.qf-count {
  background: #eef4f2; color: #5b7480; border-radius: 20px;
  padding: 1px 8px; font-size: 11px; font-weight: 800; min-width: 22px;
  text-align: center; letter-spacing: .3px;
}
.qf-chip:hover .qf-count { background: #e0f4f1; color: #0f766e; }
.qf-chip.active .qf-count { background: rgba(255, 255, 255, .25); color: #fff; }
.qf-chip[data-p="custom"] .qf-count { letter-spacing: 0; }

/* لوحة المدى المخصص (من تاريخ إلى تاريخ) */
.qf-range {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -2px 0 12px; padding: 9px 14px;
  background: #f8fbfa; border: 1.5px dashed var(--c-line); border-radius: 11px;
}
.qf-range label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; color: var(--c-text-soft);
}
.qf-range input[type="date"] {
  border: 1.5px solid var(--c-line); border-radius: 8px;
  padding: 6px 10px; background: #fff; font-size: 13px; color: var(--c-text);
  font-family: inherit;
}
.qf-range input[type="date"]:hover { border-color: #b7ccc7; }
.qf-range input[type="date"]:focus { border-color: var(--c-teal); outline: none; }
.qf-range-sep { color: #93a8a3; display: inline-flex; }
.qf-range-sep svg { width: 15px; height: 15px; }
.qf-range-note { font-size: 11.5px; color: #b45309; font-weight: 700; }

/* شرائح الفلاتر النشطة: قابلة للإزالة واحدة واحدة */
.qf-active {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 12px; animation: fadeIn .18s ease;
}
.qf-aChip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #e0f4f1; color: #0f766e; border-radius: 20px;
  padding: 4px 6px 4px 5px; font-size: 12px; font-weight: 800;
}
.qf-aChip svg { width: 13px; height: 13px; flex-shrink: 0; }
.qf-aX {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%; border: 0;
  background: transparent; color: #0f766e; cursor: pointer;
  transition: background .15s, color .15s;
}
.qf-aX:hover { background: #fbe3e6; color: #be123c; }
.qf-aX:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 1px; }
.qf-aX svg { width: 12px; height: 12px; }
.qf-match { font-size: 12px; color: var(--c-text-soft); font-weight: 700; }
.qf-clear { margin-inline-start: auto; }

/* أزرار اقتراحات الحالة الفارغة الذكية */
.empty-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 11px; }
.empty-actions .badge { vertical-align: middle; margin-inline-start: 3px; }

@media (max-width: 640px) {
  .qf-chip { padding: 6px 9px; }
  .qf-label { display: none; }        /* على الضيق: الشريحة نفسها تشرح نفسها */
  .qf-clear { margin-inline-start: 0; width: 100%; justify-content: center; }
  .qf-range { gap: 8px; }
}

/* ============================================================
   [v2.14.5] تبويبة «إدارة الشركة» — دمج التبويبات الإدارية الخمس
   (الهيكل · الوظائف · الأدوار · الموظفون · أنواع الوحدات)
   ============================================================ */
.co-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: #eef5f3; border: 1px solid var(--c-line); border-radius: 13px;
  padding: 6px; margin-bottom: 18px;
}
.co-tab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; color: #5b7480;
  font: inherit; font-size: 13px; font-weight: 800;
  padding: 9px 15px; border-radius: 9px; cursor: pointer;
  transition: background .16s, color .16s, box-shadow .16s;
}
.co-tab svg { width: 16px; height: 16px; }
.co-tab:hover { background: #e0f0ec; color: #0f5f56; }
.co-tab.active {
  background: var(--c-teal); color: #fff;
  box-shadow: 0 2px 8px rgba(13, 148, 136, .28);
}
.co-tab:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

/* ============================================================
   [v2.14.5] دليل المستخدم — رحلة طلب الشراء حتى المستودع
   ============================================================ */
/* البطاقة التمهيدية: أرقام الوثائق الثلاث + عدد الخطوات */
.gd-hero {
  display: flex; align-items: stretch; gap: 18px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 55%, #115e59 100%);
  border-radius: var(--radius); color: #fff;
  padding: 22px 26px; margin-bottom: 22px;
  box-shadow: 0 10px 26px -14px rgba(15, 118, 110, .55);
}
.gd-hero-main { flex: 1; min-width: 0; }
.gd-hero p { margin: 12px 0 0; font-size: 13.5px; line-height: 2; color: rgba(255, 255, 255, .93); }
.gd-hero b { color: #fff; }
.gd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.gd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px; padding: 5px 13px; font-size: 12px; font-weight: 700;
}
.gd-chip b {
  background: #fff; color: #0f766e; border-radius: 6px;
  padding: 1px 7px; font-size: 11.5px; letter-spacing: .5px;
}
.gd-hero-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.7;
  background: rgba(255, 255, 255, .12); border: 1px dashed rgba(255, 255, 255, .35);
  border-radius: 12px; padding: 10px 18px; align-self: center;
}
.gd-hero-side .gd-num { font-size: 34px; font-weight: 800; line-height: 1; }

/* [v4.8.1] شريط تنبيه داخل فصول الدليل للمزايا غير المشمولة بخطة الشركة */
.gd-plan-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: var(--radius); padding: 14px 18px;
  color: #92400e; font-size: 13.5px; line-height: 1.9;
}
.gd-plan-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 5px; color: #d97706; }
.gd-plan-note b { color: #78350f; }

/* مسار الخطوات: خط زمني عمودي بدوائر مرقمة على اليمين */
.gd-steps { display: grid; gap: 14px; }
.gd-step {
  display: flex; gap: 16px; position: relative;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color .18s, box-shadow .18s;
}
.gd-step:hover { border-color: #b7d9d3; box-shadow: 0 6px 18px -12px rgba(13, 148, 136, .4); }
/* الخط الواصل بين الخطوات (يمين الدوائر — RTL) */
.gd-step:not(:last-child) .gd-rail::after {
  content: ''; position: absolute; top: 44px; bottom: -32px;
  right: 17px; width: 2px;
  background: repeating-linear-gradient(180deg, #b7d9d3 0 6px, transparent 6px 12px);
}
.gd-rail { position: relative; flex-shrink: 0; }
.gd-idx {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-teal); color: #fff;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 3px 10px -3px rgba(13, 148, 136, .55);
}
.gd-body { flex: 1; min-width: 0; }
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gd-top h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0; font-size: 15.5px; font-weight: 800; color: var(--c-text);
}
.gd-top h4 svg { width: 18px; height: 18px; color: var(--c-teal); }
.gd-badges { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gd-badges .badge { font-size: 11.5px; }
.gd-tab {
  display: inline-flex; align-items: center;
  background: #f0f4f3; color: #5b7480;
  border: 1px dashed #c3d4cf; border-radius: 8px;
  padding: 3px 10px; font-size: 11.5px; font-weight: 800;
}
.gd-intro { margin: 8px 0 4px; font-size: 13px; color: var(--c-text-soft); font-weight: 700; line-height: 1.9; }
.gd-step ul { margin: 8px 0 0; padding: 0 18px 0 0; display: grid; gap: 7px; }
.gd-step li { font-size: 13px; line-height: 2; color: var(--c-text); }
.gd-step li::marker { color: var(--c-teal); }
.gd-actions { margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.gd-go svg { transform: rotate(90deg); }

/* أقسام الجدول والأسئلة الشائعة */
.gd-sec { margin-top: 26px; }
.gd-sec > h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; font-size: 15px; font-weight: 800;
}
.gd-sec > h4 svg { width: 17px; height: 17px; color: var(--c-teal); }
.gd-faqs { display: grid; gap: 8px; }
.gd-faq {
  background: #fff; border: 1px solid var(--c-line); border-radius: 11px;
  overflow: hidden;
}
.gd-faq[open] { border-color: #b7d9d3; }
.gd-faq summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
  padding: 13px 16px; font-size: 13.5px; font-weight: 800; color: var(--c-text);
  transition: background .15s;
}
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary:hover { background: #f5faf9; }
.gd-faq summary svg { width: 15px; height: 15px; color: var(--c-teal); transition: transform .18s; flex-shrink: 0; }
.gd-faq[open] summary svg { transform: rotate(90deg); }
.gd-faq > div {
  padding: 2px 16px 15px 16px;
  font-size: 13px; line-height: 2.1; color: var(--c-text-soft);
  border-top: 1px dashed var(--c-line);
}

@media (max-width: 640px) {
  .gd-hero { flex-direction: column; }
  .gd-hero-side { flex-direction: row; gap: 12px; align-self: stretch; }
  .gd-step { flex-direction: column; gap: 10px; }
  .gd-step:not(:last-child) .gd-rail::after { display: none; }
  .gd-idx { width: 30px; height: 30px; font-size: 13px; }
  .co-tab { padding: 8px 11px; font-size: 12px; }
  .co-tab span { font-size: 12px; }
}

/* ============================================================
   [v2.14.6] الدليل الشامل — فهرس الفصول اللاصق (scroll-spy)
   وترويسات الفصول وبطاقات الأدوار والشرائط الحية
   ============================================================ */
.gd-toc {
  position: sticky; top: 0; z-index: 6;
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 10px 12px; margin: 0 0 18px;
  background: rgba(244, 247, 246, .96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line); border-radius: 13px;
  box-shadow: 0 10px 24px -20px rgba(18, 51, 62, .6);
}
.gd-toc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--c-line); background: #fff;
  color: var(--c-text-soft); font-size: 12px; font-weight: 700;
  transition: all .15s;
}
.gd-toc-btn svg { width: 14px; height: 14px; }
.gd-toc-btn:hover { border-color: #b7d9d3; color: #0f5f56; background: #eef6f4; }
.gd-toc-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.gd-ch { margin-top: 26px; scroll-margin-top: 86px; }
.gd-ch-head {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 60%, #115e59 100%);
  box-shadow: 0 10px 24px -16px rgba(15, 118, 110, .6);
}
.gd-ch-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255, 255, 255, .16); display: grid; place-items: center;
}
.gd-ch-ico svg { width: 20px; height: 20px; color: #fff; }
.gd-ch-head h4 { margin: 0; font-size: 15.5px; font-weight: 800; color: #fff; }
.gd-ch-head p { margin: 3px 0 0; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.gd-ch-count {
  margin-inline-start: auto; white-space: nowrap;
  background: rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 6px 13px; font-size: 11.5px; font-weight: 700;
}
.gd-ch .gd-steps { margin-top: 14px; }
.gd-ch .gd-sec { margin-top: 16px; }

.gd-live {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding: 12px 14px;
  border: 1.5px dashed #b7d9d3; border-radius: 12px; background: #f5fbfa;
}
.gd-live-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: #0f5f56; }
.gd-live-label svg { width: 15px; height: 15px; }
.gd-live-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; color: var(--c-text);
}
.gd-live-chip b { color: var(--c-teal); font-size: 12.5px; }

.gd-roles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin-top: 14px;
}
.gd-role {
  display: flex; flex-direction: column; gap: 9px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 15px 16px;
  transition: border-color .18s, box-shadow .18s;
}
.gd-role:hover { border-color: #b7d9d3; box-shadow: 0 6px 18px -12px rgba(13, 148, 136, .4); }
.gd-role-top { display: flex; align-items: center; gap: 11px; }
.gd-role-ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; background: #eef6f4; color: var(--c-teal);
}
.gd-role-ico svg { width: 19px; height: 19px; }
.gd-role-ico.rose { background: #fdf0f2; color: #be123c; }
.gd-role-ico.green { background: #ecf8f2; color: #059669; }
.gd-role-ico.amber { background: #fdf6ec; color: #b45309; }
.gd-role-ico.violet { background: #f3f0fa; color: #6d28d9; }
.gd-role-top b { font-size: 14.5px; font-weight: 800; }
.gd-role-top .sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.gd-role-task { margin: 0; font-size: 12.5px; line-height: 1.95; color: var(--c-text); }
.gd-role-holders {
  display: flex; align-items: center; gap: 7px; margin-top: auto;
  padding-top: 9px; border-top: 1px dashed var(--c-line);
  font-size: 11.5px; font-weight: 700; color: var(--c-text-soft);
}
.gd-role-holders svg { width: 14px; height: 14px; color: var(--c-teal); }

.gd-docs {
  margin-top: 14px; padding: 16px 18px; color: #fff; border-radius: 14px;
  background: linear-gradient(135deg, #134e4a 0%, #0d9488 100%);
  box-shadow: 0 10px 24px -16px rgba(19, 78, 74, .6);
}
.gd-docs p { margin: 11px 0 0; font-size: 13px; line-height: 2; color: rgba(255, 255, 255, .93); }
.gd-docs b { color: #fff; }

@media (max-width: 640px) {
  .gd-ch-head { flex-wrap: wrap; gap: 10px; }
  .gd-ch-count { margin-inline-start: 0; }
  .gd-ch-head p { flex-basis: 100%; }
  .gd-roles { grid-template-columns: 1fr; }
  .gd-toc { position: static; }
  .gd-toc-btn span { font-size: 11px; }
}

/* ============================================================
   v3.0.0 — Company Flow Cloud
   صفحة البداية (lp-*) · بطاقة الشركة في الشريط الجانبي · لوحة المنصة
   ============================================================ */

/* ---------- أساسيات صفحة البداية ---------- */
.lp { min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); }
.lp-container { width: min(1140px, 92vw); margin-inline: auto; }

.lp-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.lp-nav-in { display: flex; align-items: center; gap: 22px; padding: 14px 0; }
.lp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text); }
.lp-brand b { font-size: 17px; font-weight: 800; }
.lp-cloud-chip {
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-teal));
  color: #fff; padding: 3px 9px; border-radius: 999px;
}
.lp-nav-links { display: flex; gap: 20px; margin-inline-start: auto; }
.lp-nav-links a { color: var(--c-text-soft); text-decoration: none; font-size: 14px; font-weight: 600; }
.lp-nav-links a:hover { color: var(--c-primary); }
.lp-nav-cta { display: flex; gap: 10px; }

/* ---------- أزرار صفحة البداية ---------- */
.lp-btn-primary, .lp-btn-outline, .lp-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer;
  text-decoration: none; border: 1.5px solid transparent;
  padding: 10px 18px; transition: all .18s ease; font-family: inherit;
}
.lp-btn-primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-teal) 100%);
  color: #fff; box-shadow: 0 4px 14px -6px rgba(5, 150, 105, .55);
}
.lp-btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lp-btn-outline { background: #fff; color: var(--c-primary-dark); border-color: #b8ded4; }
.lp-btn-outline:hover { border-color: var(--c-primary); background: #f2fbf8; }
.lp-btn-ghost { background: transparent; color: var(--c-text-soft); }
.lp-btn-ghost:hover { color: var(--c-primary); }
.lp-btn-primary.lg, .lp-btn-outline.lg { padding: 14px 26px; font-size: 15.5px; border-radius: 14px; }
.lp-btn-primary svg, .lp-btn-outline svg { width: 17px; height: 17px; }
.lp-btn-primary.busy, .lp-btn-outline.busy { opacity: .65; cursor: wait; }

/* ---------- البطل ---------- */
.lp-hero { position: relative; background: linear-gradient(160deg, #f2faf7 0%, #e8f5f1 60%, #e0f2ec 100%); overflow: hidden; }

/* ---------- [v4.6] سلايدشو خلفية البطل ---------- */
/* طبقات صور متراكبة تتناوب بالتلاشي؛ الحالة الأساسية للشريحة غير
   النشطة هي نهاية حركة التكبير (scale 1.12) — فإزالة .on لا تُحدِث
   قفزة بصرية أثناء التلاشي بل تُكمل من حيث انتهت */
.lp-hero-bg { position: absolute; inset: 0; z-index: 0; background: #06332a; }
.lp-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.12);
  transition: opacity 1.6s ease; will-change: opacity, transform;
}
.lp-hero-slide.on { opacity: 1; animation: lpKenBurns 16s ease-out both; }
@keyframes lpKenBurns { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* حجاب داكن متدرج أقوى جهة النص يحمي الوضوح فوق أي صورة */
.lp-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(3, 32, 27, .93) 0%, rgba(4, 46, 39, .82) 34%,
    rgba(5, 60, 50, .56) 62%, rgba(6, 72, 60, .34) 100%);
}

/* نقاط التنقل — النقطة النشطة تتطايل إلى كبسولة تيل فاتح */
.lp-hero-dots {
  position: absolute; bottom: 60px; inset-inline: 0; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.lp-hero-dots button {
  width: 9px; height: 9px; border-radius: 999px; padding: 0; border: 0;
  background: rgba(255, 255, 255, .38); cursor: pointer; transition: all .3s ease;
}
.lp-hero-dots button:hover { background: rgba(255, 255, 255, .72); }
.lp-hero-dots button.on { background: #5eead4; width: 26px; }

/* وضع الصور المفعلة (has-slides): هيرو داكن بنصوص فاتحة فوق الحجاب
   — وبلا صور يبقى التدرج الفاتح الأصلي كما هو تمامًا */
.lp-hero.has-slides { background: #06332a; }
.lp-hero.has-slides .lp-hero-in { position: relative; z-index: 2; }
/* [v4.6.1] موجة القاع في وضع الصور: كانت الموجة الأصلية قوسًا فاتحًا
   حاد الحافة (علامة توقف 72%←73% بلون خلفية الصفحة) صُممت للهيرو
   الفاتح القديم — فوق الصور الداكنة صارت تقطع الصورة شريطًا أبيض
   سميكًا يقسمها قسمين. الآن: انصهار ناعم من الصورة إلى خلفية الصفحة
   بتدرج شفاف طويل — لا خط ولا حافة أبدًا، والصورة تذوب في الصفحة */
.lp-hero.has-slides .lp-hero-wave {
  z-index: 2;
  height: 88px;
  background: linear-gradient(to top, var(--c-bg), transparent);
}
.lp-hero.has-slides .lp-pill {
  background: rgba(255, 255, 255, .12); color: #ccfbf1;
  border-color: rgba(153, 246, 228, .38); box-shadow: none;
}
.lp-hero.has-slides .lp-hero-copy h1 { color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, .38); }
.lp-hero.has-slides .lp-hero-copy h1 em {
  background: linear-gradient(120deg, #34d399, #5eead4);
  -webkit-background-clip: text; background-clip: text;
}
.lp-hero.has-slides .lp-hero-sub { color: rgba(236, 253, 250, .86); }
.lp-hero.has-slides .lp-stat b { color: #5eead4; }
.lp-hero.has-slides .lp-stat span { color: rgba(236, 253, 250, .68); }
.lp-hero.has-slides .lp-btn-outline {
  background: rgba(255, 255, 255, .1); color: #fff;
  border-color: rgba(255, 255, 255, .36); backdrop-filter: blur(5px);
}
.lp-hero.has-slides .lp-btn-outline:hover {
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .68);
}
.lp-hero.has-slides .lp-hero-art { filter: drop-shadow(0 18px 42px rgba(0, 0, 0, .42)); }
.lp-hero.has-slides .lp-leaf { background: rgba(255, 255, 255, .84); }

@media (prefers-reduced-motion: reduce) {
  .lp-hero-slide { transition: none; }
  .lp-hero-slide.on { animation: none; }
}

.lp-hero-in {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px;
  align-items: center; padding: 72px 0 96px;
}
.lp-pill {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  background: #fff; color: var(--c-primary-dark);
  border: 1px solid #c4e6da; padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(13, 148, 136, .1);
}
.lp-hero-copy h1 {
  margin: 18px 0 14px; font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.35; font-weight: 900; color: var(--c-text);
}
.lp-hero-copy h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--c-primary), var(--c-teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero-sub { color: var(--c-text-soft); font-size: 16px; line-height: 2.1; margin: 0 0 26px; max-width: 56ch; }
.lp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.lp-stats { display: flex; gap: 34px; margin-top: 34px; flex-wrap: wrap; }
.lp-stat b {
  display: block; font-size: 26px; font-weight: 900; color: var(--c-primary-dark);
  font-variant-numeric: tabular-nums;
}
.lp-stat span { font-size: 12.5px; color: var(--c-text-soft); font-weight: 600; }

/* ---------- رسم الشجرة ---------- */
.lp-hero-art { position: relative; }
.lp-tree { position: relative; padding: 26px 18px; }
.lp-node {
  background: #fff; border: 1.5px solid var(--c-line); border-radius: 12px;
  padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--c-text);
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px;
}
.lp-node.root {
  width: max-content; margin-inline: auto;
  border-color: var(--c-primary); font-size: 14.5px;
  background: linear-gradient(135deg, #fff, #f0fdf7);
}
.lp-node-ic {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-teal));
  color: #fff; font-size: 11px; font-weight: 900; font-family: inherit;
}
.lp-branches { display: flex; gap: 16px; margin-top: 54px; position: relative; }
.lp-branches::before {
  content: ''; position: absolute; top: -54px; inset-inline: 50% 0;
  height: 54px; border-top: 2px solid #b8ded4; border-radius: 8px 8px 0 0;
  border-inline-start: 2px solid #b8ded4;
}
.lp-branch { flex: 1; position: relative; padding-top: 30px; }
.lp-branch::before {
  content: ''; position: absolute; top: -30px; inset-inline: 50% 0;
  height: 30px; border-inline-start: 2px solid #b8ded4;
}
.lp-branch .lp-node { font-size: 12px; padding: 7px 12px; justify-content: center; }
.lp-leaf {
  margin-top: 12px; font-size: 11px; font-weight: 700; color: var(--c-text-soft);
  background: rgba(255, 255, 255, .75); border: 1px dashed #c4e6da;
  border-radius: 9px; padding: 7px 10px; direction: ltr; text-align: center;
}
.lp-leaf .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 5px; }
.lp-leaf .dot.fin { background: #b45309; } .lp-leaf .dot.pm { background: #059669; } .lp-leaf .dot.buy { background: #0d9488; }

.lp-float {
  position: absolute; background: #fff; border: 1px solid var(--c-line);
  border-radius: 999px; padding: 7px 14px; font-size: 11.5px; font-weight: 700;
  color: var(--c-text-soft); box-shadow: var(--shadow-lg);
  animation: lpFloat 5s ease-in-out infinite;
}
.lp-float.f1 { top: 6%; inset-inline-start: -4%; animation-delay: 0s; }
.lp-float.f2 { bottom: 20%; inset-inline-end: -6%; animation-delay: 1.4s; }
.lp-float.f3 { bottom: 2%; inset-inline-start: 6%; animation-delay: 2.6s; }
@keyframes lpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.lp-hero-wave {
  position: absolute; inset-inline: 0; bottom: -1px; height: 46px;
  background: radial-gradient(120% 100% at 50% 100%, transparent 72%, var(--c-bg) 73%);
}

/* ---------- الأقسام ---------- */
.lp-section { padding: 76px 0; }
.lp-section.alt { background: #fff; border-block: 1px solid var(--c-line); }
.lp-sec-title { text-align: center; font-size: clamp(22px, 3vw, 30px); font-weight: 900; margin: 0 0 8px; }
.lp-sec-sub { text-align: center; color: var(--c-text-soft); font-size: 14.5px; margin: 0 0 44px; }

.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-feat {
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 24px 22px; transition: all .2s ease;
}
.lp-feat:hover { border-color: #a7d8c9; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lp-feat-ic {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: #ecfaf4; color: var(--c-primary-dark);
  border: 1px solid #c9ecdd; margin-bottom: 14px;
}
.lp-feat-ic svg { width: 22px; height: 22px; }
.lp-feat h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.lp-feat p { margin: 0; color: var(--c-text-soft); font-size: 13px; line-height: 1.95; }

.lp-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-step {
  position: relative; background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 26px 22px 22px;
}
.lp-step-n {
  position: absolute; top: -18px; inset-inline-start: 20px;
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-teal));
  color: #fff; font-weight: 900; font-size: 16px; box-shadow: 0 4px 12px -4px rgba(5, 150, 105, .5);
}
.lp-step h3 { margin: 10px 0 8px; font-size: 16px; font-weight: 800; }
.lp-step p { margin: 0; color: var(--c-text-soft); font-size: 13.5px; line-height: 2; }

/* ---------- بطاقة الدخول ---------- */
.lp-auth-wrap { max-width: 720px; }
.lp-co-banner {
  display: flex; align-items: center; gap: 10px;
  background: #eefaf4; border: 1px solid #b9e6d4; color: var(--c-primary-dark);
  border-radius: 14px; padding: 13px 18px; font-size: 14px; font-weight: 600;
  margin-bottom: 18px;
}
.lp-co-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.lp-auth-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 20px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.lp-tabs { display: flex; border-bottom: 1px solid var(--c-line); background: #fafcfb; }
.lp-tab {
  flex: 1; padding: 15px 10px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--c-text-soft);
  border-bottom: 2.5px solid transparent; transition: all .15s;
}
.lp-tab:hover { color: var(--c-primary-dark); }
.lp-tab.active { color: var(--c-primary-dark); border-bottom-color: var(--c-primary); background: #fff; }
.lp-pane { display: none; padding: 28px 30px 30px; }
.lp-pane.active { display: block; }
.lp-pane h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.lp-pane-sub { color: var(--c-text-soft); font-size: 13px; margin: 0 0 20px; }
.lp-pane label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--c-text);
  margin-bottom: 14px;
}
.lp-pane input {
  display: block; width: 100%; margin-top: 6px;
  border: 1.5px solid var(--c-line); border-radius: 11px;
  padding: 11px 13px; font-size: 14px; font-family: inherit;
  background: #fbfdfc; transition: border-color .15s;
}
.lp-pane input:focus { outline: none; border-color: var(--c-teal); background: #fff; }
.lp-pane input[readonly] { background: #f2f6f5; color: var(--c-text-soft); }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-check {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 12.5px !important; font-weight: 600 !important; color: var(--c-text-soft) !important;
  background: #f7fbf9; border: 1px dashed #c4e6da; border-radius: 11px; padding: 12px 14px;
}
.lp-check input { width: auto; margin: 0; accent-color: var(--c-primary); }
.lp-pane .lp-btn-primary { width: 100%; margin-top: 6px; }
.lp-status { min-height: 20px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--c-text-soft); }
.lp-status.error { color: var(--c-danger); }

/* ---------- التذييل ---------- */
.lp-footer { margin-top: auto; background: #0f2e29; color: #cfe8e2; }
.lp-footer-in {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 34px 0;
}
.lp-footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.lp-footer-brand .brand-mark { border-color: rgba(255, 255, 255, .3); color: #99d5c8; }
.lp-footer-links { display: flex; gap: 20px; margin-inline-start: auto; }
.lp-footer-links a { color: #9ec9c0; text-decoration: none; font-size: 13px; font-weight: 600; }
.lp-footer-links a:hover { color: #fff; }
.lp-footer-copy { width: 100%; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; font-size: 12.5px; color: #8fbcb2; }

/* ---------- بطاقة الشركة (داخل التطبيق) ---------- */
.company-card {
  background: linear-gradient(135deg, #f0fdf7, #ecfaf6);
  border: 1px solid #c9ecdd; border-radius: 12px; padding: 12px;
  margin: 14px 0 4px; display: flex; flex-direction: column; gap: 9px;
}
.company-card-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-primary-dark); }
.company-card-head svg { width: 15px; height: 15px; flex-shrink: 0; }
.company-link-row { display: flex; gap: 7px; }
.company-link-row input {
  flex: 1; min-width: 0; font-size: 11.5px; font-family: inherit;
  border: 1px solid #c4e6da; border-radius: 8px; padding: 7px 9px;
  background: #fff; color: var(--c-text-soft); direction: ltr; text-align: left;
}
.mini-btn {
  border: 1px solid #c4e6da; background: #fff; color: var(--c-primary-dark);
  border-radius: 8px; padding: 6px 12px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s;
  text-decoration: none; display: inline-block;
}
.mini-btn:hover { background: #f0fdf7; border-color: var(--c-primary); }
.mini-btn.warn { color: var(--c-amber); border-color: #eed9bd; }
.mini-btn.warn:hover { background: #fef8ee; border-color: var(--c-amber); }
.mini-btn.danger { color: var(--c-danger); border-color: #f3caca; }
.mini-btn.danger:hover { background: #fdf3f3; border-color: var(--c-danger); }
.mini-btn.ok { color: var(--c-primary-dark); }
.company-card-note { margin: 0; font-size: 11px; line-height: 1.8; color: var(--c-text-soft); }
.company-demo-note {
  font-size: 11px; line-height: 1.9; color: var(--c-text-soft);
  background: #fff; border: 1px dashed #c4e6da; border-radius: 9px; padding: 8px 10px;
}
.company-demo-note b { color: var(--c-amber); }
.company-demo-note span[dir="ltr"] { font-family: ui-monospace, monospace; font-size: 10.5px; }

/* ---------- لوحة المنصة ---------- */
.console-body { background: #eef3f1; }
.console-wrap {
  width: min(1240px, 95vw); margin-inline: auto; padding: 26px 0 40px;
  display: flex; flex-direction: column; min-height: 100vh;
}
.console-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.console-brand { display: flex; align-items: center; gap: 11px; }
.console-brand b { display: block; font-size: 16px; }
.console-brand span { font-size: 11.5px; color: var(--c-text-soft); }
.console-head-actions { margin-inline-start: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.console-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 22px 0; }
.console-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 13px;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 4px;
}
.console-card b { font-size: 23px; font-weight: 900; color: var(--c-text); }
.console-card span { font-size: 11px; font-weight: 700; color: var(--c-text-soft); }
.console-card.ok b { color: var(--c-primary-dark); }
.console-card.demo b { color: var(--c-amber); }
.console-card.bad b { color: var(--c-danger); }

.console-table-wrap {
  background: #fff; border: 1px solid var(--c-line); border-radius: 15px;
  overflow: auto; box-shadow: var(--shadow);
}
.console-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 980px; }
.console-table th {
  text-align: right; padding: 12px 13px; background: #f7faf9;
  color: var(--c-text-soft); font-size: 11.5px; font-weight: 800;
  border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
.console-table td { padding: 11px 13px; border-bottom: 1px solid #eef4f2; vertical-align: middle; }
.console-table tr:last-child td { border-bottom: none; }
.console-table tr.suspended { background: #fdf7f7; }
.console-slug {
  display: block; font-family: ui-monospace, monospace; font-size: 10px;
  color: var(--c-text-soft); direction: ltr; text-align: right;
}
.console-email { font-size: 11.5px; color: var(--c-text-soft); }
.console-date { font-size: 11.5px; color: var(--c-text-soft); white-space: nowrap; }
.console-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.console-empty { text-align: center; color: var(--c-text-soft); padding: 40px 0 !important; font-weight: 700; }

.console-chpass {
  margin-top: 22px; background: #fff; border: 1px solid var(--c-line); border-radius: 13px;
  padding: 16px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.console-chpass h3 { margin: 0; font-size: 14px; }
.console-chpass input {
  border: 1.5px solid var(--c-line); border-radius: 10px; padding: 9px 12px;
  font-size: 13px; font-family: inherit; flex: 1; min-width: 180px;
}
.console-chpass input:focus { outline: none; border-color: var(--c-teal); }
.console-chpass span { font-size: 12px; font-weight: 700; }
.console-footer { margin-top: auto; padding-top: 26px; text-align: center; font-size: 12px; color: var(--c-text-soft); }

/* ---------- [v4.6] إدارة شرائح خلفية البطل ---------- */
.console-slides {
  margin-top: 22px; background: #fff; border: 1px solid var(--c-line);
  border-radius: 15px; padding: 18px 20px;
}
.console-slides h3 { margin: 0 0 4px; font-size: 14px; }
.console-slides .slides-hint { margin: 0 0 16px; font-size: 12px; color: var(--c-text-soft); line-height: 1.9; }
.slides-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.slide-card {
  border: 1px solid var(--c-line); border-radius: 13px; overflow: hidden;
  background: #fbfdfc; display: flex; flex-direction: column;
}
.slide-card.off { opacity: .55; }
.slide-card.off .slide-thumb { filter: grayscale(.9); }
.slide-thumb {
  height: 118px; background-size: cover; background-position: center;
  background-color: #e7efec;
}
.slide-meta {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px 6px;
  font-size: 11.5px; border-bottom: 1px dashed #e4edea;
}
.slide-meta b {
  width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center;
  background: #eef7f3; color: var(--c-primary-dark); font-size: 10.5px;
}
.slide-src { color: var(--c-text-soft); font-weight: 700; }
.slide-tools { display: flex; gap: 5px; padding: 8px 10px; flex-wrap: wrap; }
.slide-tools .mini-btn { padding: 4px 9px; font-size: 11px; }
.slides-empty {
  padding: 26px 14px; text-align: center; color: var(--c-text-soft);
  font-weight: 700; font-size: 12.5px; border: 1.5px dashed var(--c-line);
  border-radius: 12px; margin-bottom: 16px;
}
.slides-add { border-top: 1px solid var(--c-line); padding-top: 16px; display: grid; gap: 12px; }
.slides-add .add-title { font-size: 12.5px; font-weight: 800; }
.slides-modes { display: flex; gap: 18px; flex-wrap: wrap; }
.slides-modes label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 700; cursor: pointer; color: var(--c-text);
}
.slides-modes input { accent-color: var(--c-teal); }
.slides-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.slides-row input[type="url"], .slides-row input[type="file"] {
  border: 1.5px solid var(--c-line); border-radius: 10px; padding: 9px 12px;
  font-size: 13px; font-family: inherit; flex: 1; min-width: 230px; background: #fff;
}
.slides-row input:focus { outline: none; border-color: var(--c-teal); }
.slides-row .mini-btn { padding: 9px 16px; font-size: 12.5px; }
.slides-note { font-size: 11px; color: var(--c-text-soft); }

/* ============================================================
   [v3.3] لوحة «تفقّد بريدك» بعد طلب إنشاء الشركة
   ============================================================ */
.lp-verify { display: grid; gap: 12px; text-align: center; padding: 6px 2px 2px; }
.lp-verify-icon {
  width: 64px; height: 64px; margin: 4px auto 0; border-radius: 50%;
  background: #e0f4f1; color: var(--c-teal); display: grid; place-items: center;
}
.lp-verify-icon svg { width: 30px; height: 30px; }
.lp-verify h3 { margin: 2px 0 0; font-size: 19px; font-weight: 800; }
.lp-verify-sub { margin: 0; font-size: 12.5px; color: var(--c-text-soft); font-weight: 600; }
.lp-verify-mail {
  direction: ltr; font-family: ui-monospace, monospace; font-size: 14px; font-weight: 700;
  background: #f0faf8; border: 1px dashed #9fd8cf; color: #0f5c53;
  border-radius: 10px; padding: 10px 12px; word-break: break-all;
}
.lp-verify-note { margin: 0; font-size: 13px; line-height: 2; color: var(--c-text); }
.lp-verify-warn {
  margin: 0; font-size: 12.5px; line-height: 1.9; color: #b45309;
  background: #fef3e2; border: 1px solid #f5d9ae; border-radius: 10px; padding: 9px 12px;
}
.lp-verify-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: right; }
.lp-verify-tips li {
  font-size: 12px; color: var(--c-text-soft); line-height: 1.9;
  padding-right: 22px; position: relative;
}
.lp-verify-tips li::before {
  content: ''; position: absolute; right: 4px; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-teal); opacity: .65;
}
.lp-verify-actions { display: grid; gap: 10px; margin-top: 4px; }
.lp-verify-actions .lp-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--c-line); border-radius: 11px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; background: transparent;
}
.lp-verify-actions .lp-btn-ghost svg { width: 16px; height: 16px; }
.lp-verify-actions .lp-btn-ghost:hover { border-color: var(--c-teal); color: var(--c-teal); }
.lp-verify-actions .lp-btn-ghost:disabled { opacity: .55; cursor: default; }
.lp-verify-link { font-size: 12.5px; font-weight: 700; color: var(--c-text-soft); }
.lp-verify-link:hover { color: var(--c-primary); }
.lp-btn-ghost.wide { width: 100%; margin-top: 10px; }

/* ============================================================
   [v3.3] صفحة تفعيل الحساب (activate.php)
   ============================================================ */
.act-card { max-width: 460px; width: 100%; }
.act-card h1 { margin: 12px 0 4px; font-size: 20px; font-weight: 800; text-align: center; }
.act-sub { margin: 0 0 14px; font-size: 13px; line-height: 2; color: var(--c-text-soft); text-align: center; }
.act-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center;
}
.act-icon svg { width: 30px; height: 30px; }
.act-icon.ok  { background: #e6f7f0; color: #047857; }
.act-icon.bad { background: #fdeaea; color: var(--c-danger); }
.act-help {
  background: #f6f8f7; border: 1px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; text-align: right; margin-bottom: 14px;
}
.act-help b { font-size: 12.5px; color: var(--c-text); }
.act-help ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.act-help li { font-size: 12px; line-height: 1.9; color: var(--c-text-soft); padding-right: 18px; position: relative; }
.act-help li::before {
  content: ''; position: absolute; right: 2px; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-teal); opacity: .6;
}
.act-bar {
  height: 6px; border-radius: 99px; background: #e0ece9; overflow: hidden; margin: 6px 0 16px;
}
.act-bar span {
  display: block; height: 100%; width: 40%; border-radius: 99px;
  background: linear-gradient(90deg, var(--c-teal), var(--c-primary-dark));
  animation: actSlide 1.1s ease-in-out infinite alternate;
}
@keyframes actSlide { from { width: 22%; } to { width: 86%; } }
.act-copy { text-align: center; font-size: 11.5px; color: #93a8a3; margin-top: 14px; }

/* ============================================================
   [v3.3] لوحة المنصة — طلبات التفعيل المعلقة
   ============================================================ */
.console-card.wait b { color: var(--c-amber); }
.console-table tr.pending { background: #fffdf5; }
.console-mails {
  display: inline-block; margin-inline-start: 6px; font-size: 10.5px; font-weight: 700;
  color: #b45309; background: #fef3e2; border-radius: 99px; padding: 2px 8px;
}

/* ---------- استجابة صفحة البداية واللوحة ---------- */
@media (max-width: 980px) {
  .lp-hero-in { grid-template-columns: 1fr; padding: 48px 0 72px; }
  .lp-hero-art { display: none; }
  .lp-features, .lp-how { grid-template-columns: 1fr 1fr; }
  .console-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .lp-nav-links { display: none; }
  .lp-nav-cta { margin-inline-start: auto; }
  .lp-features, .lp-how { grid-template-columns: 1fr; }
  .lp-two { grid-template-columns: 1fr; }
  .lp-stats { gap: 20px; }
  .lp-pane { padding: 22px 20px 24px; }
  .console-cards { grid-template-columns: repeat(2, 1fr); }
  .console-wrap { width: 96vw; }
}

/* ============================================================
   [v4.2.0] الإجازات · الإشعارات · المرفقات · إعدادات السير
   ============================================================ */

/* ---------- شريط الأدوات العلوي (الجرس + التاريخ) ---------- */
.topbar-tools { display: flex; align-items: center; gap: 10px; }
.ntf-wrap { position: relative; }
.ntf-bell {
  position: relative; width: 40px; height: 40px; border-radius: 11px;
  background: #eef5f3; color: var(--c-text); display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.ntf-bell:hover { background: #dcece8; color: var(--c-primary-dark); }
.ntf-bell svg { width: 19px; height: 19px; }
.ntf-bell.has-unread { color: var(--c-primary-dark); }
.ntf-badge {
  position: absolute; top: -5px; inset-inline-start: -5px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--c-danger); color: #fff; font-size: 10.5px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
  box-shadow: 0 2px 6px rgba(220, 38, 38, .4);
}

/* لوحة الإشعارات المنسدلة */
.ntf-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  width: 380px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden;
}
.ntf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--c-line);
  background: #f8fbfa; font-size: 13.5px;
}
.ntf-head b { display: inline-flex; align-items: center; gap: 7px; }
.ntf-list { max-height: 430px; overflow-y: auto; }
.ntf-item {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 11px 14px; border-bottom: 1px solid #eef3f2; text-align: right;
  transition: background .12s;
}
.ntf-item:hover { background: #f6faf9; }
.ntf-item.unread { background: #f0faf6; }
.ntf-item.unread:hover { background: #e6f5ee; }
.ntf-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: #eef5f3; color: var(--c-primary-dark); display: grid; place-items: center;
}
.ntf-ic svg { width: 16px; height: 16px; }
.ntf-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ntf-body b { font-size: 12.8px; font-weight: 800; line-height: 1.5; }
.ntf-body span { font-size: 12px; color: var(--c-text-soft); line-height: 1.6; }
.ntf-body time { font-size: 10.5px; color: #93a8a3; }
.ntf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-primary); margin-top: 6px; flex-shrink: 0; }
.ntf-loading, .ntf-empty { padding: 34px 18px; text-align: center; color: var(--c-text-soft); font-size: 12.5px; line-height: 2; }
.ntf-empty svg { width: 34px; height: 34px; opacity: .4; margin-bottom: 8px; }

/* ---------- [v4.4.3] ترقيم صفحي للإشعارات: ترويسات الأيام + التذييل + شريط الجديد ---------- */
.ntf-day {
  padding: 7px 14px 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  color: var(--c-text-soft); background: #f6faf9;
  border-bottom: 1px solid #eef3f2; position: sticky; top: 0; z-index: 2;
}
.ntf-day:first-child { border-top: none; }
.ntf-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-top: 1px solid var(--c-line); background: #f8fbfa;
}
.ntf-count { font-size: 11px; color: var(--c-text-soft); white-space: nowrap; }
.ntf-count b { color: var(--c-text); font-weight: 800; }
.ntf-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 9px;
  background: #fff; color: var(--c-primary-dark); font-size: 12px; font-weight: 800;
  cursor: pointer; transition: background .12s, border-color .12s;
  font-family: inherit;
}
.ntf-more:hover { background: #eef5f3; border-color: #cfe3dd; }
.ntf-more:disabled { opacity: .55; cursor: default; }
.ntf-more svg { width: 15px; height: 15px; }
.ntf-newbar {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 8px 12px; border: none; border-bottom: 1px solid #bfe8d5;
  background: #e8f8f0; color: #0b7a55; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: background .12s; font-family: inherit;
  animation: ntfPulse 1.6s ease-in-out infinite;
}
.ntf-newbar:hover { background: #d9f2e6; }
.ntf-newbar svg { width: 15px; height: 15px; }
.ntf-newbar[hidden] { display: none; }
.ntf-spin {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #cfe3dd; border-top-color: var(--c-primary);
  animation: ntfSpin .7s linear infinite;
}
@keyframes ntfSpin { to { transform: rotate(360deg); } }
@keyframes ntfPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(11, 122, 85, 0); }
  50% { box-shadow: inset 0 -14px 12px -14px rgba(11, 122, 85, .35); }
}

/* ---------- بطاقات أرصدة الإجازات ---------- */
.lv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px; margin-top: 14px;
}
.lv-card {
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.lv-card-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-soft); }
.lv-card-head svg { color: var(--c-primary); }
.lv-card-big { font-size: 26px; font-weight: 800; margin-top: 8px; line-height: 1.2; }
.lv-card-big span { display: block; font-size: 11.5px; font-weight: 600; color: var(--c-text-soft); }
.lv-bar { height: 6px; background: #e8f0ee; border-radius: 4px; overflow: hidden; margin: 10px 0 7px; }
.lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #0d9488); border-radius: 4px; }
.lv-card-sub { font-size: 11px; color: var(--c-text-soft); }

/* ---------- قائمة المرفقات ---------- */
.att-list { display: grid; gap: 8px; margin: 10px 0; }
.att-chip {
  display: flex; align-items: center; gap: 10px;
  background: #f8fbfa; border: 1px solid var(--c-line); border-radius: 10px;
  padding: 9px 12px;
}
.att-chip:hover { border-color: #bfe0d8; }
.att-ic {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: #eef5f3; color: var(--c-primary-dark); display: grid; place-items: center;
}
.att-ic svg { width: 15px; height: 15px; }
.att-name {
  flex: 1; min-width: 0; font-weight: 700; font-size: 12.8px; color: var(--c-text);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right;
}
.att-name:hover { color: var(--c-primary-dark); text-decoration: underline; }
.att-meta { font-size: 11px; color: var(--c-text-soft); white-space: nowrap; }
.att-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }

/* استجابة الجوال */
@media (max-width: 640px) {
  .ntf-panel { position: fixed; top: 66px; inset-inline: 10px; width: auto; }
  .lv-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .att-chip { flex-wrap: wrap; }
  .att-meta { width: 100%; order: 5; }
}

/* ============================================================
   [v4.4] التقارير والتحليلات — فلاتر ورسوم ومركز تصدير
   ============================================================ */
.rep-filters {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px;
}
.rep-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rep-range label { font-size: 12.5px; color: var(--c-text-soft); display: flex; align-items: center; gap: 6px; }
.rep-range input[type="date"] {
  border: 1px solid var(--c-line); border-radius: 8px; padding: 6px 9px;
  font-family: inherit; font-size: 12.5px; background: #fff;
}
.rep-loading, .rep-error, .rep-empty {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 38px 16px; color: var(--c-text-soft); font-size: 13px; text-align: center;
}
.rep-error { color: var(--c-danger); }
.rep-loading svg, .rep-error svg, .rep-empty svg { width: 20px; height: 20px; }

/* شبكة بطاقات الرسوم */
.rep-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.rep-card {
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.rep-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rep-card-head b { font-size: 13.5px; font-weight: 800; }
.rep-card-head span { font-size: 11px; color: var(--c-text-soft); }
.rep-card-wide-half { grid-column: span 1; }

/* الرسوم SVG */
.rep-scroll { overflow-x: auto; }
.rep-svg { width: 100%; height: auto; display: block; }
.rep-svg text { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; }
.rep-svg .rep-lb { font-size: 10px; fill: var(--c-text-soft); }
.rep-svg .rep-val { font-size: 10.5px; font-weight: 700; fill: var(--c-text); }
.rep-svg .rep-lbl { font-size: 11.5px; font-weight: 700; fill: var(--c-text); }
.rep-svg .rep-val2 { font-size: 11px; font-weight: 700; fill: var(--c-primary-dark); }
.rep-svg .rep-grid { stroke: #e7efed; stroke-width: 1; }
.rep-legend { display: flex; gap: 14px; margin-top: 8px; }
.rep-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--c-text-soft); }
.rep-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* حلقة الإجازات */
.rep-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rep-donut svg { width: 132px; height: 132px; flex-shrink: 0; }
.rep-donut-n { font-size: 22px; font-weight: 800; fill: var(--c-text); }
.rep-donut-l { font-size: 9px; fill: var(--c-text-soft); }
.rep-legs { display: grid; gap: 7px; flex: 1; min-width: 150px; }
.rep-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rep-leg b { font-size: 12.5px; }
.rep-leg span:last-child { color: var(--c-text-soft); font-size: 11px; }
.rep-dot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }

/* شريط تبديل العملة */
.rep-curbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #f0f7f4; border: 1px dashed #bfe0d8; border-radius: var(--radius);
  padding: 8px 14px; margin-bottom: 16px;
}

/* مركز التصدير */
.rep-exp-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  background: linear-gradient(135deg, #f2faf8, #fff);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 14px 16px; margin: 18px 0 12px; flex-wrap: wrap;
}
.rep-exp-head h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.rep-exp-head p { margin: 0; font-size: 12px; color: var(--c-text-soft); max-width: 640px; line-height: 1.8; }
.rep-exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.rep-exp {
  display: flex; align-items: center; gap: 12px;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 12px 14px;
}
.rep-exp:hover { border-color: #bfe0d8; }
.rep-exp-ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: #eef5f3; color: var(--c-primary-dark); display: grid; place-items: center;
}
.rep-exp-ico svg { width: 18px; height: 18px; }
.rep-exp-body { flex: 1; min-width: 0; }
.rep-exp-body b { font-size: 13px; font-weight: 800; display: block; }
.rep-exp-body p { margin: 2px 0 0; font-size: 11px; color: var(--c-text-soft); line-height: 1.7; }

/* استجابة الجوال للتقارير */
@media (max-width: 640px) {
  .rep-grid { grid-template-columns: 1fr; }
  .rep-exp { flex-wrap: wrap; }
  .rep-exp .btn { width: 100%; justify-content: center; }
  .rep-exp-head { flex-direction: column; }
}

/* الطباعة: التقارير تُطبع نظيفة بلا أدوات */
@media print {
  .rep-filters, .rep-curbar, .rep-exp-head, .rep-exp-grid, .no-print { display: none !important; }
}

/* ============================================================
   [v4.7] نظام الاشتراكات — لوحة المنصة + التطبيق + شاشة القفل
   ============================================================ */

/* ---------- لوحة المنصة: بطاقات وفلاتر ---------- */
.console-card.soon  { border-inline-start: 3px solid var(--c-amber); }
.console-card.soon b  { color: var(--c-amber); }
.console-card.expired { border-inline-start: 3px solid var(--c-danger); }
.console-card.expired b { color: var(--c-danger); }

.console-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px;
}
.filter-chip {
  border: 1.5px solid var(--c-line); background: #fff; color: var(--c-text-soft);
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  transition: all .15s;
}
.filter-chip b {
  background: var(--c-bg); border-radius: 999px; padding: 1px 8px;
  margin-inline-start: 6px; font-size: 11.5px; color: var(--c-text-soft);
}
.filter-chip:hover { border-color: var(--c-teal); color: var(--c-primary-dark); }
.filter-chip.on {
  background: var(--c-primary-dark); border-color: var(--c-primary-dark);
  color: #fff;
}
.filter-chip.on b { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---------- خلية الاشتراك في جدول الشركات ---------- */
.console-sub { min-width: 128px; }
.sub-plan-badge {
  display: inline-block; font-size: 11px; font-weight: 800;
  padding: 2px 9px; border-radius: 999px; margin-bottom: 4px;
}
.sub-plan-badge.slate { background: #e2e8f0; color: #334155; }
/* [v4.8] هوية كل نوع: لون فريد بلون خطة الاختيار نفسه */
.sub-plan-badge.trial      { background: #fef3c7; color: #92400e; }
.sub-plan-badge.basic      { background: #ccfbf1; color: #0f766e; }
.sub-plan-badge.pro        { background: #d1fae5; color: #047857; }
.sub-plan-badge.enterprise { background: #ede9fe; color: #5b21b6; }
.console-sub .sub-state {
  display: block; font-size: 12px; font-weight: 800;
}
.console-sub .sub-state.green { color: var(--c-primary-dark); }
.console-sub .sub-state.amber { color: var(--c-amber); }
.console-sub .sub-state.rose  { color: var(--c-danger); }
.console-sub .sub-state.dim   { color: var(--c-text-soft); }
.console-sub .sub-end {
  display: block; font-size: 11px; color: var(--c-text-soft); direction: ltr; text-align: right;
}
.sub-bar {
  display: block; height: 4px; width: 100%; max-width: 110px;
  background: var(--c-line); border-radius: 99px; overflow: hidden; margin-top: 5px;
}
.sub-bar i { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #0d9488); border-radius: 99px; }

/* ---------- زر الاشتراك في صف الشركة ---------- */
.console-actions .sub-btn {
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
}
.console-actions .sub-btn:hover { background: #d1fae5; }

/* ---------- قسم إعدادات الاشتراكات ---------- */
.console-subsettings {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 20px 22px; margin-top: 22px; box-shadow: var(--shadow);
}
.console-subsettings h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.subsettings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-top: 14px; align-items: end;
}
.ss-field { display: grid; gap: 6px; font-size: 12.5px; }
.ss-field span { font-weight: 700; color: var(--c-text-soft); }
.ss-field input {
  border: 1.5px solid var(--c-line); border-radius: 10px; padding: 10px 12px;
  background: #fafcfb; outline: none; transition: border-color .15s;
}
.ss-field input:focus { border-color: var(--c-teal); }
.ss-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.ss-actions span { font-size: 12.5px; font-weight: 700; }

/* ---------- نوافذ الاشتراك (اللوحة) ---------- */
.sub-modal-bg {
  position: fixed; inset: 0; background: rgba(9, 30, 38, .55);
  backdrop-filter: blur(3px); z-index: 1000;
  display: grid; place-items: center; padding: 16px;
}
/* [إصلاح] خاصية display أعلاه تتغلب على hidden الافتراضية —
   هذا يستعيدها فلا تغطي النوافذُ المخفية الصفحة */
.sub-modal-bg[hidden] { display: none; }
.sub-modal {
  width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg);
}
.sub-modal.narrow { max-width: 460px; }
.sub-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.sub-modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.sub-close {
  width: 34px; height: 34px; border-radius: 10px; background: var(--c-bg);
  color: var(--c-text-soft); font-size: 15px; display: grid; place-items: center;
}
.sub-close:hover { background: #fee2e2; color: var(--c-danger); }
.sub-modal-body { padding: 18px 20px; display: grid; gap: 16px; }
.sub-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--c-line);
  position: sticky; bottom: 0; background: #fff;
}
.sub-modal-foot span { flex: 1; font-size: 12.5px; font-weight: 700; }

.sub-current {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
  border: 1px solid #a7f3d0; border-radius: 12px; padding: 12px 14px;
}
.sub-current .sub-state { font-size: 12.5px; font-weight: 800; }
.sub-current .sub-state.green { color: var(--c-primary-dark); }
.sub-current .sub-state.amber { color: var(--c-amber); }
.sub-current .sub-state.rose  { color: var(--c-danger); }
.sub-current .sub-state.dim   { color: var(--c-text-soft); }
.sub-current .sub-end { font-size: 12px; color: var(--c-text-soft); }
.sub-current b { font-size: 14px; }

.sub-field { display: grid; gap: 8px; }
.sub-label { font-size: 12.5px; font-weight: 800; color: var(--c-text-soft); }
.sub-field input[type="number"], .sub-field input[type="date"], .sub-field input[type="text"] {
  border: 1.5px solid var(--c-line); border-radius: 10px; padding: 10px 12px;
  background: #fafcfb; outline: none; max-width: 220px;
}
.sub-field input:focus { border-color: var(--c-teal); }

.sub-plans-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.sub-plan-opt {
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 10px 12px;
  cursor: pointer; display: grid; gap: 3px; transition: all .15s;
}
.sub-plan-opt input { display: none; }
.sub-plan-opt b { font-size: 13px; }
.sub-plan-opt small { font-size: 10.5px; color: var(--c-text-soft); line-height: 1.5; }
.sub-plan-opt:has(input:checked) {
  border-color: var(--c-primary-dark); background: #ecfdf5;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .12);
}

.sub-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.sub-mode {
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 9px 12px;
  cursor: pointer; display: grid; gap: 2px; transition: all .15s;
}
.sub-mode input { display: none; }
.sub-mode b { font-size: 12.5px; }
.sub-mode small { font-size: 10px; color: var(--c-text-soft); }
.sub-mode:has(input:checked) {
  border-color: var(--c-teal); background: #f0fdfa;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .12);
}

.sub-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.preset-chip {
  border: 1.5px solid var(--c-line); background: #fff; color: var(--c-text-soft);
  border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 700;
  transition: all .15s;
}
.preset-chip:hover { border-color: var(--c-primary-dark); color: var(--c-primary-dark); background: #ecfdf5; }

/* ---------- سجل الاشتراك (اللوحة + صفحة التطبيق) ---------- */
.sublog-list { display: grid; gap: 4px; }
.sublog-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--c-line);
  background: #fff;
}
.sublog-item:hover { background: #fafcfb; }
.sublog-dot { width: 9px; height: 9px; border-radius: 99px; margin-top: 6px; flex-shrink: 0; }
.sublog-dot.rose  { background: var(--c-danger); }
.sublog-dot.amber { background: #f59e0b; }
.sublog-dot.green { background: #10b981; }
.sublog-dot.dim   { background: #94a3b8; }
.sublog-main { flex: 1; display: grid; gap: 2px; }
.sublog-main b { font-size: 12.5px; }
.sublog-main small { font-size: 11px; color: var(--c-text-soft); }
.sublog-note { font-style: italic; }
.sublog-side { display: grid; gap: 2px; text-align: left; }
.sublog-side span { font-size: 11px; color: var(--c-text-soft); font-weight: 700; }
.sublog-side time { font-size: 10.5px; color: var(--c-text-soft); opacity: .8; }
.sublog-loading {
  padding: 18px; text-align: center; color: var(--c-text-soft); font-size: 12.5px;
}

/* ---------- التطبيق: بانر الاشتراك فوق المحتوى ---------- */
.sub-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: linear-gradient(120deg, #fffbeb, #fef3c7);
  border: 1px solid #fcd34d; border-radius: 12px;
  padding: 10px 16px; margin-bottom: 16px; font-size: 13px;
}
.sub-banner.urgent {
  background: linear-gradient(120deg, #fff1f2, #ffe4e6);
  border-color: #fda4af;
}
.sub-banner-ico { display: grid; place-items: center; color: var(--c-amber); }
.sub-banner.urgent .sub-banner-ico { color: var(--c-danger); }
.sub-banner-ico svg { width: 20px; height: 20px; }
.sub-banner b { font-weight: 800; }
.sub-banner.urgent b { color: var(--c-danger); }
.sub-banner-note { color: var(--c-text-soft); font-size: 12px; }
.sub-banner .mini-btn {
  margin-inline-start: auto; background: #fff; border: 1px solid #fcd34d; color: #92400e;
}
.sub-banner.urgent .mini-btn { border-color: #fda4af; color: #b91c1c; }

/* لمحة الأيام في زر التنقل الجانبي */
.sub-nav-hint {
  display: inline-block; background: #f59e0b; color: #fff;
  font-size: 10px; border-radius: 999px; padding: 1px 8px;
  margin-inline-start: 6px; vertical-align: middle;
}
.sub-nav-hint.urgent { background: var(--c-danger); }

/* ---------- التطبيق: صفحة الاشتراك ---------- */
.sub-page { display: grid; gap: 18px; }
.sub-loading, .sub-error {
  padding: 40px; text-align: center; color: var(--c-text-soft); font-size: 13.5px;
  display: grid; place-items: center; gap: 10px;
}
.sub-error svg { width: 34px; height: 34px; color: var(--c-danger); }

.sub-hero {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
  border-radius: 18px; padding: 26px 30px; color: #fff;
  box-shadow: 0 10px 30px rgba(5, 150, 105, .25);
}
.sub-hero-main { flex: 1; min-width: 260px; }
.sub-plan-chip {
  display: inline-block; font-size: 12px; font-weight: 800;
  padding: 3px 12px; border-radius: 999px; margin-bottom: 10px;
  background: rgba(255, 255, 255, .16); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
}
.sub-plan-chip.soon   { background: rgba(245, 158, 11, .3); border-color: rgba(253, 230, 138, .6); }
.sub-plan-chip.urgent { background: rgba(220, 38, 38, .35); border-color: rgba(254, 202, 202, .6); }
.sub-hero h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.sub-hero-note { margin: 0 0 16px; font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, .92); }
.sub-urgent-text { color: #fde68a; }
.sub-plan-chip.urgent ~ .sub-hero h3 { color: #fecaca; }
.sub-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-fact {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px; padding: 8px 16px; display: grid; gap: 3px; min-width: 110px;
}
.sub-fact span { font-size: 11px; color: rgba(255, 255, 255, .75); }
.sub-fact b { font-size: 13.5px; text-align: center; }

.sub-ring { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.sub-ring svg { width: 100%; height: 100%; }
.sub-ring .ring-bg { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 10; }
.sub-ring .ring-fg { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; }
.sub-ring.soon .ring-fg   { stroke: #fcd34d; }
.sub-ring.urgent .ring-fg { stroke: #fca5a5; }
.sub-ring-text {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px;
}
.sub-ring-text b { font-size: 26px; font-weight: 900; }
.sub-ring-text span { font-size: 10.5px; color: rgba(255, 255, 255, .85); }

.sub-renew, .sub-history {
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow);
}
.sub-renew h4, .sub-history h4 {
  margin: 0 0 10px; font-size: 14.5px; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.sub-renew h4 svg, .sub-history h4 svg { color: var(--c-teal); }
.sub-renew p { margin: 0 0 12px; font-size: 13px; color: var(--c-text-soft); line-height: 1.8; }
.sub-channels { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-channel {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 9px 16px;
  font-size: 12.5px; color: var(--c-text); text-decoration: none;
  transition: all .15s; background: #fafcfb;
}
.sub-channel svg { width: 17px; height: 17px; color: var(--c-teal); }
.sub-channel.wa svg { color: #16a34a; }
.sub-channel b { color: var(--c-primary-dark); }
.sub-channel:hover { border-color: var(--c-teal); background: #f0fdfa; transform: translateY(-1px); }
.sub-renew-note { font-size: 11.5px !important; opacity: .85; margin-top: 4px !important; }

/* ---------- شاشة القفل: انتهى الاشتراك ---------- */
.sublock-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(circle at 12% 8%, rgba(13, 148, 136, .35), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(5, 150, 105, .28), transparent 40%),
    linear-gradient(150deg, #06342b, #052e26 55%, #04211c);
}
.sublock-card {
  width: 100%; max-width: 520px; background: #fff; border-radius: 22px;
  padding: 40px 36px 30px; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  animation: sublock-in .45s ease;
}
@keyframes sublock-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.sublock-ico {
  width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 18px;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(217, 119, 6, .4);
}
.sublock-ico svg { width: 40px; height: 40px; }
.sublock-card h1 { margin: 0 0 8px; font-size: 23px; font-weight: 900; color: var(--c-text); }
.sublock-sub { margin: 0 0 22px; font-size: 13.5px; color: var(--c-text-soft); line-height: 1.9; }
.sublock-sub b { color: var(--c-text); }

.sublock-facts { display: grid; gap: 8px; text-align: right; margin-bottom: 22px; }
.sublock-fact {
  display: flex; align-items: center; gap: 10px;
  background: #f0fdfa; border: 1px solid #ccfbf1; border-radius: 12px;
  padding: 10px 14px; font-size: 12.5px; color: var(--c-text-soft);
}
.sublock-fact svg { width: 17px; height: 17px; color: var(--c-primary-dark); flex-shrink: 0; }
.sublock-fact b { color: var(--c-primary-dark); }

.sublock-contact { margin-bottom: 22px; }
.sublock-contact > b {
  display: block; font-size: 13.5px; margin-bottom: 10px; color: var(--c-text);
}
.sublock-channels { display: flex; flex-direction: column; gap: 8px; }
.sublock-channel {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 11px 16px;
  font-size: 13.5px; text-decoration: none; color: var(--c-text); background: #fafcfb;
  transition: all .15s;
}
.sublock-channel svg { width: 19px; height: 19px; color: var(--c-teal); }
.sublock-channel.wa { background: #f0fdf4; border-color: #bbf7d0; }
.sublock-channel.wa svg { color: #16a34a; }
.sublock-channel:hover { transform: translateY(-1px); border-color: var(--c-teal); }

.sublock-home {
  display: inline-block; margin-top: 4px; padding: 11px 34px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-teal));
  color: #fff; border-radius: 12px; font-size: 14px; font-weight: 800;
  text-decoration: none; box-shadow: 0 6px 18px rgba(5, 150, 105, .35);
}
.sublock-home:hover { filter: brightness(1.05); }
.sublock-brand {
  margin-top: 18px; color: rgba(255, 255, 255, .5); font-size: 12px; text-align: center;
}

/* موبايل */
@media (max-width: 640px) {
  .sub-hero { padding: 20px; }
  .sub-ring { margin: 0 auto; }
  .sub-banner .mini-btn { margin-inline-start: 0; }
  .subsettings-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   [v4.8] «سلّم الصعود» — هوية أنواع الاشتراك والمزايا المتدرجة
   ============================================================ */

/* بطاقات الخطط في نافذة اشتراك الشركة (لوحة المنصة) */
.sub-plans-note { margin: 10px 2px 0; font-size: 11.5px; color: var(--c-text-soft); line-height: 1.7; }
.sub-plans-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
.sub-plan-opt {
  border-top: 3px solid var(--pc, var(--c-line));
  display: grid; gap: 6px; padding: 12px 12px 11px;
}
.sub-plan-opt .sp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sub-plan-opt .sp-head b { font-size: 13.5px; color: var(--pc-ink, inherit); }
.sub-plan-opt .sp-dots { display: inline-flex; gap: 3px; align-items: center; }
.sub-plan-opt .sp-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pc, var(--c-line)); opacity: .22; display: inline-block;
}
.sub-plan-opt .sp-dots i.on { opacity: 1; }
.sub-plan-opt .sp-dots i.star { width: auto; height: auto; background: none; opacity: 1; color: var(--pc, #f59e0b); font-size: 12px; font-style: normal; }
.sub-plan-opt small { font-size: 10.5px; color: var(--c-text-soft); line-height: 1.55; }
.sub-plan-opt .sp-feats { display: grid; gap: 3px; border-top: 1px dashed var(--c-line); padding-top: 7px; margin-top: 2px; }
.sub-plan-opt .sp-feats i {
  font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1.4;
  display: flex; gap: 5px; align-items: baseline;
}
.sub-plan-opt .sp-feats i.on  { color: var(--pc-ink, #047857); }
.sub-plan-opt .sp-feats i.off { color: #94a3b8; text-decoration: none; }
.sub-plan-opt:has(input:checked) {
  border-color: var(--pc, var(--c-primary-dark));
  border-top-color: var(--pc, var(--c-primary-dark));
  background: color-mix(in srgb, var(--pc, #059669) 6%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, #059669) 18%, transparent);
}

/* شاشة قفل الميزة داخل تطبيق الشركة */
.feat-lock { display: grid; place-items: center; padding: 30px 10px; }
.feat-lock-card {
  max-width: 520px; width: 100%; text-align: center;
  background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--pc, #0d9488);
  border-radius: 18px; padding: 34px 28px; box-shadow: 0 14px 40px rgba(2, 44, 34, .08);
}
.feat-lock-ico {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--pc-soft, #ccfbf1); color: var(--pc-ink, #0f766e);
  display: grid; place-items: center;
}
.feat-lock-ico svg { width: 28px; height: 28px; }
.feat-lock-card h3 { margin: 0 0 8px; font-size: 19px; color: #0f172a; }
.feat-lock-card > p { margin: 0 0 16px; color: var(--c-text-soft); font-size: 13.5px; line-height: 1.8; }
.feat-lock-plans { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.feat-lock-plans .chip {
  font-size: 12px; font-weight: 800; padding: 5px 13px; border-radius: 999px;
  background: var(--pc-soft); color: var(--pc-ink);
}
.feat-lock-plans .chip.cur { opacity: .75; }
.feat-lock-actions .btn { background: var(--pc, #0d9488); border-color: var(--pc, #0d9488); color: #fff; }
.feat-lock-actions .btn svg { width: 15px; height: 15px; }

/* مزايا الخطة في صفحة «اشتراك شركتك» */
.sub-features h4 { margin: 0 0 12px; }
.sub-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.sub-feat {
  display: flex; align-items: center; gap: 11px;
  border: 1.5px solid var(--c-line); border-radius: 13px; padding: 11px 13px;
  background: #fff;
}
.sub-feat.on  { border-color: color-mix(in srgb, var(--pc) 45%, #fff); background: linear-gradient(0deg, color-mix(in srgb, var(--pc-soft) 55%, #fff), #fff); }
.sub-feat.off { background: #fbfcfd; border-style: dashed; }
.sub-feat-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--pc-soft); color: var(--pc-ink);
}
.sub-feat-ico svg { width: 17px; height: 17px; }
.sub-feat.off .sub-feat-ico { background: #f1f5f9; color: #64748b; }
.sub-feat-main { flex: 1; min-width: 0; }
.sub-feat-main b { display: block; font-size: 13px; }
.sub-feat-main small { display: block; color: var(--c-text-soft); font-size: 11px; line-height: 1.5; margin-top: 2px; }
.sub-feat-tag {
  font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: var(--pc-soft); color: var(--pc-ink); white-space: nowrap;
}
.sub-feat.off .sub-feat-tag { background: #f1f5f9; color: #64748b; }
.sub-feat-note { margin: 12px 0 0; font-size: 12.5px; color: var(--c-text-soft); }
.sub-feat-note svg { width: 13px; height: 13px; vertical-align: -2px; }

/* [v4.8] قسم «أنواع الاشتراك» في صفحة البداية */
.lp-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-plan {
  --pc: #0d9488; --pc-soft: #ccfbf1; --pc-ink: #0f766e;
  background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--pc);
  border-radius: 16px; padding: 20px 18px; display: flex; flex-direction: column;
  transition: all .2s ease; position: relative;
}
.lp-plan:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(2, 44, 34, .1); border-color: color-mix(in srgb, var(--pc) 55%, var(--c-line)); }
.lp-plan.star { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-soft) 45%, #fff), #fff 40%); }
.lp-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-plan-top b { font-size: 17px; color: var(--pc-ink); }
.lp-plan-lv { display: inline-flex; gap: 4px; align-items: center; }
.lp-plan-lv i { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); opacity: .2; }
.lp-plan-lv i.on { opacity: 1; }
.lp-plan-lv i.star { width: auto; height: auto; background: none; opacity: 1; color: var(--pc); font-style: normal; font-size: 14px; }
.lp-plan-aud { margin: 7px 0 12px; font-size: 12px; color: var(--c-text-soft); min-height: 32px; line-height: 1.6; }
.lp-plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; }
.lp-plan-feats li { font-size: 12.3px; padding-inline-start: 20px; position: relative; line-height: 1.5; }
.lp-plan-feats li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 1px;
  font-weight: 900; font-size: 11px;
}
.lp-plan-feats li.core::before { color: #0f766e; }
.lp-plan-feats li.extra { font-weight: 800; color: var(--pc-ink); }
.lp-plan-feats li.extra::before { color: var(--pc); }
.lp-plan-feats li.off { color: #a8b3bd; }
.lp-plan-feats li.off::before { content: '—'; color: #cbd5e1; font-weight: 400; }
.lp-plan-hint { margin: 13px 0 0; font-size: 11px; color: var(--c-text-soft); border-top: 1px dashed var(--c-line); padding-top: 10px; line-height: 1.6; }
.lp-plans-note { text-align: center; color: var(--c-text-soft); font-size: 13px; margin: 26px 0 0; }
@media (max-width: 1024px) { .lp-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .lp-plans { grid-template-columns: 1fr; } }

/* ============================================================
   [v4.9] بوابة التواصل مع الإدارة — التطبيق + لوحة الإدارة
   ============================================================ */

/* ---------- الهيكل العام والترويسة ---------- */
.fbk-wrap { display: grid; gap: 18px; }
.fbk-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, #0f766e, #115e59); color: #fff;
  border-radius: 18px; padding: 24px 28px; box-shadow: 0 12px 30px rgba(15, 118, 110, .18);
}
.fbk-hero h3 { margin: 0 0 6px; font-size: 21px; display: flex; align-items: center; gap: 10px; }
.fbk-hero h3 svg { width: 24px; height: 24px; }
.fbk-hero p { margin: 0; opacity: .88; font-size: 13.5px; max-width: 640px; line-height: 1.8; }
.fbk-hero .btn { background: #fff; color: #0f766e; border: 0; }
.fbk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.fbk-stat {
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: 14px;
  padding: 14px 16px; display: grid; gap: 3px; box-shadow: var(--shadow);
}
.fbk-stat b { font-size: 22px; color: var(--c-primary-dark); }
.fbk-stat span { font-size: 12px; color: var(--c-text-soft); font-weight: 700; }
.fbk-loading { padding: 50px; text-align: center; color: var(--c-text-soft); font-weight: 700; }

/* ---------- التبويبات ---------- */
.fbk-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.fbk-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-card); border: 1.5px solid var(--c-line); border-radius: 999px;
  padding: 9px 16px; font-weight: 800; font-size: 13px; color: var(--c-text-soft);
  transition: all .15s;
}
.fbk-tab svg { width: 16px; height: 16px; }
.fbk-tab:hover { border-color: var(--c-teal); color: var(--c-teal); }
.fbk-tab.on { background: #0f766e; border-color: #0f766e; color: #fff; }
.fbk-tab-count {
  font-style: normal; background: rgba(13, 148, 136, .12); color: var(--c-teal);
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px;
}
.fbk-tab.on .fbk-tab-count { background: rgba(255, 255, 255, .22); color: #fff; }
.fbk-tab-badge {
  font-style: normal; background: var(--c-danger); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 11.5px; animation: fbkPulse 2s infinite;
}
@keyframes fbkPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- لائحة الطلبات ---------- */
.fbk-list { display: grid; gap: 10px; }
.fbk-row {
  display: flex; justify-content: space-between; gap: 16px; text-align: right; cursor: pointer;
  background: var(--c-card); border: 1.5px solid var(--c-line); border-radius: 14px;
  padding: 14px 16px; transition: border-color .15s, box-shadow .15s; position: relative;
}
.fbk-row:hover { border-color: var(--c-teal); box-shadow: var(--shadow); }
.fbk-row.unread { border-color: #f59e0b; background: #fffdf5; }
.fbk-row-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.fbk-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbk-row-subject { font-size: 14.5px; }
.fbk-row-preview {
  margin: 0; font-size: 12.5px; color: var(--c-text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fbk-row-side {
  display: grid; gap: 4px; justify-items: end; align-content: start;
  font-size: 11.5px; color: var(--c-text-soft); min-width: 110px;
}
.fbk-row-side b { font-size: 13px; color: var(--c-text); }
.fbk-row-side time { font-size: 10.5px; }
.fbk-empty {
  padding: 44px 24px; text-align: center; color: var(--c-text-soft);
  background: var(--c-card); border: 1.5px dashed var(--c-line); border-radius: 16px;
  display: grid; gap: 8px; justify-items: center;
}
.fbk-empty svg { width: 34px; height: 34px; color: var(--c-teal); }
.fbk-empty b { font-size: 15px; color: var(--c-text); }
.fbk-empty p { margin: 0; max-width: 440px; line-height: 1.8; }

/* ---------- الشارات المشتركة: النوع والأولوية والنجوم ---------- */
.fbk-kind {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.fbk-kind svg { width: 13px; height: 13px; }
.fbk-kind.teal   { background: #ccfbf1; color: #0f766e; }
.fbk-kind.violet { background: #ede9fe; color: #6d28d9; }
.fbk-kind.rose   { background: #ffe4e6; color: #be123c; }
.fbk-kind.blue   { background: #e8f0fb; color: #1d4ed8; }
.fbk-kind.amber  { background: #fef3c7; color: #92400e; }
.fbk-kind.gray   { background: #eef2f1; color: var(--c-text-soft); }
.fbk-prio {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 2px 9px;
}
.fbk-prio.amber { background: #fef3c7; color: #92400e; }
.fbk-prio.rose  { background: #ffe4e6; color: #be123c; }
.fbk-prio.gray  { background: #eef2f1; color: var(--c-text-soft); }
.fbk-pub {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  color: #6d28d9; background: #ede9fe; border-radius: 999px; padding: 2px 9px;
}
.fbk-pub svg { width: 12px; height: 12px; }
.fbk-stars { display: inline-flex; gap: 1px; }
.fbk-stars i { font-style: normal; color: #d7dee2; font-size: 13px; }
.fbk-stars i.on { color: #f59e0b; }

/* ---------- لوحة الأفكار المشتركة ---------- */
.fbk-ideas-head {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, #f5f3ff, #ecfeff); border: 1px solid #ddd6fe;
  border-radius: 14px; padding: 14px 16px;
}
.fbk-ideas-head svg { width: 22px; height: 22px; color: #6d28d9; flex-shrink: 0; margin-top: 2px; }
.fbk-ideas-head b { font-size: 13.5px; }
.fbk-ideas-head p { margin: 4px 0 0; font-size: 12px; color: var(--c-text-soft); line-height: 1.8; }
.fbk-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.fbk-idea {
  display: flex; gap: 14px; background: var(--c-card); border: 1.5px solid var(--c-line);
  border-radius: 14px; padding: 14px;
}
.fbk-idea.mine { border-color: #a7f3d0; background: #f6fefb; }
.fbk-idea.done { opacity: .82; }
.fbk-vote {
  display: grid; place-items: center; gap: 0; min-width: 52px; padding: 8px 6px;
  border: 1.5px solid var(--c-line); border-radius: 12px; background: #fafcfb;
  transition: all .15s; align-self: flex-start;
}
.fbk-vote b { font-size: 16px; color: var(--c-text); }
.fbk-vote span { font-size: 10px; color: var(--c-text-soft); }
.fbk-vote .fbk-vote-arrow { font-size: 12px; color: var(--c-text-soft); line-height: 1; }
.fbk-vote:hover { border-color: #6d28d9; }
.fbk-vote.voted { background: #ede9fe; border-color: #6d28d9; }
.fbk-vote.voted b, .fbk-vote.voted .fbk-vote-arrow { color: #6d28d9; }
.fbk-idea-body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.fbk-idea-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fbk-idea-body > b { font-size: 14px; }
.fbk-idea-body p { margin: 0; font-size: 12.5px; color: var(--c-text-soft); line-height: 1.8; }
.fbk-idea-body time { font-size: 10.5px; color: var(--c-text-soft); }
.fbk-mine {
  font-size: 10.5px; font-weight: 800; color: #fff; background: #0f766e;
  border-radius: 999px; padding: 2px 9px;
}
.fbk-anon {
  font-size: 10.5px; font-weight: 700; color: var(--c-text-soft);
  background: #eef2f1; border-radius: 999px; padding: 2px 9px;
}

/* ---------- إعلانات الإدارة ---------- */
.fbk-anns { display: grid; gap: 12px; max-width: 780px; }
.fbk-ann {
  background: var(--c-card); border: 1.5px solid var(--c-line); border-radius: 14px;
  padding: 16px 18px; border-inline-start: 4px solid #0d9488;
}
.fbk-ann-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fbk-ann-head svg { width: 17px; height: 17px; color: var(--c-teal); }
.fbk-ann-head b { font-size: 14.5px; }
.fbk-ann-head time { font-size: 11px; color: var(--c-text-soft); margin-inline-start: auto; }
.fbk-ann p { margin: 10px 0 0; font-size: 13px; line-height: 1.9; color: var(--c-text); white-space: pre-wrap; }

/* ---------- نافذة المحادثة (التطبيق) ---------- */
.fbk-modal .modal { max-width: 760px; }
.fbk-ticket { display: grid; gap: 14px; }
.fbk-t-head { display: grid; gap: 8px; }
.fbk-t-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbk-t-head h3 { margin: 0; font-size: 17px; }
.fbk-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.fbk-step {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
  background: #eef2f1; color: var(--c-text-soft); border-radius: 999px; padding: 4px 11px;
}
.fbk-step.on { background: #d1fae5; color: #047857; }
.fbk-step.cur { background: #0f766e; color: #fff; }
.fbk-thread {
  display: grid; gap: 12px; max-height: 46vh; overflow-y: auto;
  background: #f7faf9; border: 1px solid var(--c-line); border-radius: 14px; padding: 16px;
}
.fbk-msg { display: grid; gap: 3px; justify-items: start; }
.fbk-msg.mine { justify-items: end; }
.fbk-bubble {
  max-width: 82%; background: #fff; border: 1px solid var(--c-line);
  border-radius: 14px; padding: 9px 13px; font-size: 13px; line-height: 1.8;
}
.fbk-msg.mine .fbk-bubble { background: #d1fae5; border-color: #a7f3d0; }
.fbk-bubble b { display: block; font-size: 11px; color: var(--c-text-soft); margin-bottom: 3px; }
.fbk-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.fbk-msg time { font-size: 10px; color: var(--c-text-soft); padding: 0 4px; }
.fbk-sys { display: grid; justify-items: center; gap: 2px; text-align: center; }
.fbk-sys span {
  font-size: 11px; font-weight: 700; color: var(--c-text-soft);
  background: #eef2f1; border-radius: 999px; padding: 4px 14px;
}
.fbk-sys time { font-size: 9.5px; color: #b3bfc4; }
.fbk-closed-note {
  text-align: center; font-size: 12.5px; font-weight: 700; color: var(--c-text-soft);
  background: #eef2f1; border-radius: 12px; padding: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.fbk-closed-note svg { width: 15px; height: 15px; }

/* ---------- التقييم بالنجوم ---------- */
.fbk-rate {
  background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1.5px solid #fcd34d;
  border-radius: 14px; padding: 16px 18px; display: grid; gap: 10px;
}
.fbk-rate b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #92400e; }
.fbk-rate b svg { width: 17px; height: 17px; }
.fbk-rate p { margin: 0; font-size: 12px; color: #a16207; }
.fbk-rate-stars { display: flex; gap: 6px; direction: rtl; }
.fbk-rate-stars button {
  font-size: 30px; line-height: 1; color: #e5e7eb; background: none;
  transition: transform .1s, color .1s;
}
.fbk-rate-stars button:hover { transform: scale(1.18); }
.fbk-rate-stars button.on { color: #f59e0b; }
.fbk-rate textarea, .fbk-reply textarea, .fbk-new textarea {
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 11px 14px;
  background: #fff; outline: none; resize: vertical; width: 100%;
}
.fbk-rate textarea:focus, .fbk-reply textarea:focus, .fbk-new textarea:focus { border-color: var(--c-teal); }
.fbk-rated {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #f6fefb; border: 1px solid #a7f3d0; border-radius: 12px; padding: 12px 15px;
  font-size: 13px;
}
.fbk-rated p { margin: 0; color: var(--c-text-soft); font-size: 12.5px; }

/* ---------- صندوق الرد ---------- */
.fbk-reply { display: grid; gap: 10px; }
.fbk-reply-note {
  margin: 0; display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--c-amber);
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 9px 12px;
}
.fbk-reply-note svg { width: 14px; height: 14px; }
.fbk-reply-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- نموذج طلب جديد ---------- */
.fbk-new { display: grid; gap: 15px; }
.fbk-new h3 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 17px; }
.fbk-new h3 svg { width: 19px; height: 19px; color: var(--c-teal); }
.fbk-new-sub { margin: 0; font-size: 12.5px; color: var(--c-text-soft); }
.fbk-field { display: grid; gap: 8px; }
.fbk-label { font-size: 12.5px; font-weight: 800; color: var(--c-text-soft); }
.fbk-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.fbk-kind-opt {
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 10px 12px;
  cursor: pointer; display: grid; gap: 4px; background: #fafcfb; transition: all .15s;
}
.fbk-kind-opt input { display: none; }
.fbk-ko-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.fbk-ko-head svg { width: 16px; height: 16px; }
.fbk-kind-opt small { font-size: 10.5px; color: var(--c-text-soft); line-height: 1.6; }
.fbk-kind-opt.teal:hover, .fbk-kind-opt.teal:has(input:checked) { border-color: var(--c-teal); background: #f0fdfa; }
.fbk-kind-opt.violet:hover, .fbk-kind-opt.violet:has(input:checked) { border-color: #7c3aed; background: #f5f3ff; }
.fbk-kind-opt.rose:hover, .fbk-kind-opt.rose:has(input:checked) { border-color: #e11d48; background: #fff1f2; }
.fbk-kind-opt.blue:hover, .fbk-kind-opt.blue:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.fbk-kind-opt.amber:hover, .fbk-kind-opt.amber:has(input:checked) { border-color: #d97706; background: #fffbeb; }
.fbk-prios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.fbk-prio-opt {
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 9px 12px; cursor: pointer;
  display: grid; gap: 2px; background: #fafcfb; text-align: center;
}
.fbk-prio-opt input { display: none; }
.fbk-prio-opt b { font-size: 13px; }
.fbk-prio-opt small { font-size: 10.5px; color: var(--c-text-soft); }
.fbk-prio-opt.gray:has(input:checked) { border-color: var(--c-text-soft); background: #eef2f1; }
.fbk-prio-opt.amber:has(input:checked) { border-color: #d97706; background: #fffbeb; }
.fbk-prio-opt.rose:has(input:checked) { border-color: #e11d48; background: #fff1f2; }
.fbk-new input[type="text"] {
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 11px 14px;
  background: #fafcfb; outline: none;
}
.fbk-new input[type="text"]:focus { border-color: var(--c-teal); }
.fbk-pub-opt {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid #ddd6fe; background: #f5f3ff; border-radius: 12px; padding: 12px 14px;
}
.fbk-pub-opt input { margin-top: 3px; width: 16px; height: 16px; accent-color: #6d28d9; }
.fbk-pub-opt svg { width: 17px; height: 17px; color: #6d28d9; flex-shrink: 0; margin-top: 1px; }
.fbk-pub-opt b { display: block; font-size: 13px; color: #4c1d95; }
.fbk-pub-opt small { display: block; font-size: 11px; color: var(--c-text-soft); line-height: 1.7; margin-top: 2px; }
.fbk-new-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- لوحة إدارة المنصة: قسم تواصل الشركات ---------- */
.fbk-chip {
  background: var(--c-danger); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; margin-inline-start: 4px;
}
.console-fbk { display: grid; gap: 14px; margin-top: 26px; }
.console-fbk h3 { margin: 0; font-size: 17px; }
.console-fbk h4 { margin: 6px 0 0; font-size: 14px; color: var(--c-text); }
.fbk-kind-filter {
  border: 1.5px solid var(--c-line); border-radius: 999px; padding: 7px 14px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; background: #fff; color: var(--c-text);
  outline: none; margin-inline-start: auto;
}
.fbk-unread-row { background: #fffdf5; }
.fbk-unread-row td { border-top-color: #fde68a !important; }
.fbk-subj small { display: block; color: var(--c-text-soft); font-size: 11px; margin-top: 3px; }
.fbk-new-dot {
  font-style: normal; font-size: 10px; font-weight: 800; color: #fff;
  background: var(--c-danger); border-radius: 999px; padding: 1px 8px;
}
.fbk-dim { color: #a8b3bd; font-size: 12px; }
.fbk-pub-mark { font-size: 11px; font-weight: 800; color: #6d28d9; }
.fbk-admin-block {
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 18px 20px; display: grid; gap: 14px; margin-top: 8px;
}
.fbk-admin-ideas, .fbk-admin-anns { display: grid; gap: 10px; }
.fbk-aidea {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1.5px solid var(--c-line); border-radius: 14px; padding: 13px 15px;
}
.fbk-aidea.done { background: #f6fefb; border-color: #a7f3d0; }
.fbk-aidea-votes {
  display: grid; place-items: center; gap: 1px; min-width: 58px;
  background: #f5f3ff; border: 1.5px solid #ddd6fe; border-radius: 12px; padding: 8px 6px;
}
.fbk-aidea-votes b { font-size: 17px; color: #6d28d9; }
.fbk-aidea-votes span { font-size: 10px; color: var(--c-text-soft); }
.fbk-aidea-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fbk-aidea-body b { font-size: 13.5px; }
.fbk-aidea-body p { margin: 0; font-size: 12px; color: var(--c-text-soft); line-height: 1.7; }
.fbk-aidea-body small { font-size: 11px; color: var(--c-text-soft); }
.fbk-aidea-actions { display: grid; gap: 6px; align-self: center; }
.fbk-aidea-actions .mini-btn { font-size: 11px; padding: 5px 12px; white-space: nowrap; }
.fbk-ann-form { display: grid; gap: 9px; }
.fbk-ann-form input, .fbk-ann-form textarea {
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 11px 14px;
  font-family: inherit; font-size: 13px; background: #fafcfb; outline: none; width: 100%;
}
.fbk-ann-form input:focus, .fbk-ann-form textarea:focus { border-color: var(--c-teal); }
.fbk-ann-form .mini-btn { justify-self: start; }
.fbk-ann-form span { font-size: 12px; font-weight: 700; }
.fbk-aann { border: 1.5px solid var(--c-line); border-radius: 14px; padding: 13px 15px; display: grid; gap: 8px; }
.fbk-aann.off { opacity: .62; }
.fbk-aann-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbk-aann-head b { font-size: 13.5px; }
.fbk-aann-head time { font-size: 11px; color: var(--c-text-soft); margin-inline-start: auto; }
.fbk-aann p { margin: 0; font-size: 12.5px; color: var(--c-text-soft); line-height: 1.8; white-space: pre-wrap; }

/* نافذة محادثة الإدارة */
.sub-modal.wide { max-width: 760px; }
.fbk-aticket { display: grid; gap: 13px; }
.fbk-at-head { display: grid; gap: 7px; }
.fbk-at-head h4 { margin: 0; font-size: 16px; }
.fbk-at-co { margin: 0; font-size: 12px; color: var(--c-text-soft); }
.fbk-at-rate { margin: 0; font-size: 12.5px; color: var(--c-text); }
.fbk-admin-controls { display: flex; gap: 9px; flex-wrap: wrap; }
.fbk-admin-controls select {
  border: 1.5px solid var(--c-line); border-radius: 10px; padding: 8px 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; background: #fff; outline: none;
}
.fbk-areply { display: grid; gap: 9px; }
.fbk-areply textarea {
  border: 1.5px solid var(--c-line); border-radius: 12px; padding: 11px 14px;
  font-family: inherit; font-size: 13px; background: #fafcfb; outline: none; resize: vertical;
}
.fbk-areply textarea:focus { border-color: var(--c-teal); }
.fbk-areply .mini-btn { justify-self: start; }

/* تجاوب الموبايل */
@media (max-width: 640px) {
  .fbk-hero { padding: 18px 20px; }
  .fbk-row { flex-direction: column; gap: 8px; }
  .fbk-row-side { grid-auto-flow: column; justify-items: start; align-items: center; }
  .fbk-ideas { grid-template-columns: 1fr; }
  .fbk-prios { grid-template-columns: 1fr; }
  .fbk-aidea { flex-direction: column; }
  .fbk-aidea-actions { display: flex; flex-wrap: wrap; }
  .fbk-kind-filter { margin-inline-start: 0; }
}

/* ============================================================
   [v4.10] مركز القيادة — الشريط الجانبي المنظم
   أقسام منطقية قابلة للطي بشارات مجمعة + زر انتقال سريع +
   وضع أيقونات مضغوط بقوائم منبثقة + لوحة أوامر Ctrl+K + درج جوال
   ============================================================ */

/* --- زر الطي أعلى الشريط --- */
.side-brand-txt { flex: 1; min-width: 0; }
.side-brand-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-rail-btn {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: #7d9c95; cursor: pointer; flex-shrink: 0; transition: all .15s;
}
.nav-rail-btn:hover { background: #1a3d48; color: #fff; }
.nav-rail-btn svg { width: 15px; height: 15px; }

/* --- زر الانتقال السريع --- */
.nav-quick {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px;
  border-radius: 10px; background: #14323c; color: #9db8b1; font-size: 12.5px;
  font-weight: 700; border: 1px dashed #24505c; cursor: pointer; text-align: right;
  transition: all .15s;
}
.nav-quick:hover { color: #fff; border-color: var(--c-teal); background: #1a3d48; }
.nav-quick svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-quick kbd {
  margin-inline-start: auto; font-family: inherit; font-size: 9.5px; font-weight: 700;
  background: #0d2b33; border: 1px solid #24505c; padding: 3px 7px; border-radius: 6px;
  color: #7d9c95; white-space: nowrap;
}

/* --- حاوية القائمة: تمرير رفيع عند الطول --- */
nav#sideNav {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px;
  overflow-y: auto; overflow-x: hidden; padding-inline: 2px; margin-inline: -2px;
}
nav#sideNav::-webkit-scrollbar { width: 4px; }
nav#sideNav::-webkit-scrollbar-thumb { background: #1f4a56; border-radius: 4px; }
nav#sideNav::-webkit-scrollbar-thumb:hover { background: #2a5f6e; }

/* --- رأس قسم --- */
.nav-group { position: relative; }
.nav-group-head {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border-radius: 9px; background: transparent; color: #7d9c95;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px; cursor: pointer;
  text-align: right; transition: all .15s; border: 0;
}
.nav-group-head:hover { color: #d7eae4; background: #122f38; }
.nav-group-head .ng-ico { display: grid; place-items: center; width: 17px; height: 17px; flex-shrink: 0; }
.nav-group-head .ng-ico svg { width: 15px; height: 15px; }
.nav-group-head .ng-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.nav-group-head .ng-chev { display: grid; place-items: center; opacity: .55; transition: transform .2s; flex-shrink: 0; }
.nav-group-head .ng-chev svg { width: 13px; height: 13px; }
.nav-group.open > .nav-group-head { color: #eaf6f2; background: #122f38; }
.nav-group.open > .nav-group-head .ng-chev { transform: rotate(180deg); }

/* شارة رأس القسم: مجموع ما ينتظرك داخله */
.nav-group-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-grid; place-items: center; background: #24505c; color: #cfe5df;
  font-size: 10px; font-weight: 800; font-style: normal; flex-shrink: 0;
}
.nav-group-badge.hot { background: #dc2626; color: #fff; box-shadow: 0 0 0 2px #0d2b33; }

/* --- جسم القسم: طي/فتح بانسيابية (صفوف الشبكة 0fr→1fr) --- */
.nav-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.nav-group-body > div { overflow: hidden; display: grid; gap: 2px; }
.nav-group.open > .nav-group-body { grid-template-rows: 1fr; }
.nav-group-body .nav-btn {
  margin-inline-start: 8px; width: calc(100% - 8px);
  padding: 10px 13px; font-size: 12.5px;
}

/* --- القائمة المنبثقة (وضع الأيقونات) --- */
.nav-flyout {
  display: none; position: absolute; inset-inline-start: calc(100% + 10px); top: 0;
  min-width: 232px; background: #0f313b; border: 1px solid #1f4a56; border-radius: 12px;
  padding: 8px; z-index: 80; box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.nav-flyout > b {
  display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #7d9c95;
  padding: 5px 10px 9px; font-weight: 800;
}
.nav-flyout > b svg { width: 14px; height: 14px; }
.nav-flyout .nav-btn { margin: 0; width: 100%; font-size: 12.5px; padding: 10px 12px; }

/* --- وضع الأيقونات المضغوط (سطح المكتب حصرًا) --- */
@media (min-width: 901px) {
  .sidebar.rail { width: 64px; padding: 16px 8px; gap: 12px; }
  .sidebar.rail .side-brand { flex-direction: column; gap: 8px; padding: 0; }
  .sidebar.rail .side-brand-txt { display: none; }
  .sidebar.rail .profile { padding: 8px; justify-content: center; }
  .sidebar.rail .profile > div:not(.avatar) { display: none; }
  .sidebar.rail .company-card { display: none; }
  .sidebar.rail .nav-quick { justify-content: center; padding: 11px 0; }
  .sidebar.rail .nav-quick span, .sidebar.rail .nav-quick kbd { display: none; }
  .sidebar.rail nav#sideNav { overflow: visible; gap: 4px; }
  .sidebar.rail .nav-btn { justify-content: center; padding: 11px 0; gap: 0; }
  .sidebar.rail .nav-btn span { display: none; }
  .sidebar.rail .nav-group-head { justify-content: center; padding: 10px 0; gap: 0; }
  .sidebar.rail .nav-group-head .ng-label,
  .sidebar.rail .nav-group-head .ng-chev { display: none; }
  .sidebar.rail .nav-group-badge { position: absolute; top: 2px; inset-inline-start: 8px; min-width: 15px; height: 15px; font-size: 9px; padding: 0 3px; }
  .sidebar.rail .side-bottom button { justify-content: center; padding: 9px 0; gap: 0; }
  .sidebar.rail .side-bottom button span { display: none; }
  .sidebar.rail .nav-group:hover > .nav-flyout,
  .nav-flyout.show { display: block; animation: flyIn .14s ease; }
}
@keyframes flyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- زر القائمة (الجوال) وترويسة الشريط العلوي --- */
.topbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-lead > div { min-width: 0; }
.nav-toggle {
  display: none; width: 40px; height: 40px; border-radius: 10px; background: #eef5f3;
  color: #0f5e56; place-items: center; cursor: pointer; flex-shrink: 0;
}
.nav-toggle:hover { background: #dceeea; }
.nav-toggle svg { width: 20px; height: 20px; }

/* ============================================================
   [v4.10] لوحة «انتقال سريع» — Ctrl+K
   ============================================================ */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 120; background: rgba(4,22,28,.55);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start;
  justify-content: center; padding: 11vh 16px 16px; animation: fadeIn .12s ease;
}
.cmdk {
  width: min(560px, 100%); background: #fff; border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35); overflow: hidden;
  display: flex; flex-direction: column; max-height: 64vh;
  animation: cmdkPop .16s ease;
}
@keyframes cmdkPop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--c-line); }
.cmdk-ico { color: var(--c-teal); display: grid; place-items: center; }
.cmdk-ico svg { width: 18px; height: 18px; }
.cmdk-input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 14.5px; background: transparent; color: var(--c-text); }
.cmdk-input::placeholder { color: #9fb4ae; }
.cmdk-x { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #93a8a3; cursor: pointer; background: #f1f7f5; flex-shrink: 0; }
.cmdk-x:hover { background: #e6efec; color: var(--c-text); }
.cmdk-x svg { width: 15px; height: 15px; }
.cmdk-list { overflow-y: auto; padding: 8px; flex: 1; }
.cmdk-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
  border-radius: 10px; cursor: pointer; text-align: right; border: 0;
  background: transparent; color: var(--c-text); font-size: 13.5px; font-weight: 600;
}
.cmdk-item small { display: block; font-weight: 500; color: #93a8a3; font-size: 10.5px; margin-top: 2px; }
.cmdk-item .ci-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #f1f7f5; color: var(--c-teal); flex-shrink: 0; }
.cmdk-item .ci-ico svg { width: 16px; height: 16px; }
.cmdk-item .ci-label { flex: 1; min-width: 0; }
.cmdk-item > svg { width: 15px; height: 15px; color: #b8cac5; flex-shrink: 0; }
.cmdk-item:hover { background: #f6faf9; }
.cmdk-item.sel { background: #e9f5f2; box-shadow: inset 2px 0 0 var(--c-teal); }
.cmdk-item.act { color: #065f46; }
.cmdk-item.act .ci-ico { background: #ecfdf5; color: #059669; }
.cmdk-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: grid; place-items: center; background: #eef5f3; color: #0f5e56;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.cmdk-badge.hot { background: #fee2e2; color: #b91c1c; }
.cmdk-empty { padding: 34px 16px; text-align: center; color: #93a8a3; font-size: 13px; }
.cmdk-empty svg { width: 22px; height: 22px; display: block; margin: 0 auto 8px; }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--c-line); background: #fafdfc; color: #93a8a3; font-size: 11px; }
.cmdk-foot kbd {
  background: #fff; border: 1px solid var(--c-line); border-radius: 5px; padding: 1px 6px;
  font-family: inherit; font-size: 10px; margin-inline-end: 3px; box-shadow: 0 1px 0 var(--c-line);
}
body.cmdk-open { overflow: hidden; }

/* الجوال: اللوحة من أسفل بلوحة كاملة تقريبًا */
@media (max-width: 640px) {
  .cmdk-overlay { padding: 0; align-items: flex-end; }
  .cmdk { width: 100%; max-height: 86vh; border-radius: 18px 18px 0 0; }
}

/* [v4.10] إصلاح ترتيب التنافس: قاعدة إظهار همبرغر الجوال بعد القاعدة
   الأساسية (display:none) كي تعمل داخل نافذة ≤900px */
@media (max-width: 900px) {
  .nav-toggle { display: grid; }
}